Fix home page examples not firing

The Examples script imported mountDummyElement/removeDummyElement from
CodeSample.tsx. Importing a React module into a vanilla Astro <script>
tripped @vitejs/plugin-react's dev preamble guard, which threw and
prevented any example button listeners from attaching.

Move the two framework-free DOM helpers into src/lib/dummyElement.ts and
import them from there in both the Examples script and CodeSample.

Author: nilbuild

docs/src/components/CodeSample.tsx

@@ -1,6 +1,7 @@
 import type { Config, DriveStep, PopoverDOM } from "driver.js";
 import { driver } from "driver.js";
 import "driver.js/dist/driver.css";
+import { mountDummyElement, removeDummyElement } from "../lib/dummyElement";
 
 type CodeSampleProps = {
   heading?: string;
@@ -15,30 +16,6 @@ type CodeSampleProps = {
   buttonText?: string;
 };
 
-export function removeDummyElement() {
-  const el = document.querySelector(".dynamic-el");
-  if (el) {
-    el.remove();
-  }
-}
-
-export function mountDummyElement() {
-  const newDiv = (document.querySelector(".dynamic-el") || document.createElement("div")) as HTMLElement;
-
-  newDiv.innerHTML = "This is a new Element";
-  newDiv.style.display = "block";
-  newDiv.style.padding = "20px";
-  newDiv.style.backgroundColor = "black";
-  newDiv.style.color = "white";
-  newDiv.style.fontSize = "14px";
-  newDiv.style.position = "fixed";
-  newDiv.style.top = `${Math.random() * (500 - 30) + 30}px`;
-  newDiv.style.left = `${Math.random() * (500 - 30) + 30}px`;
-  newDiv.className = "dynamic-el";
-
-  document.body.appendChild(newDiv);
-}
-
 function attachFirstButton(popover: PopoverDOM) {
   const firstButton = document.createElement("button");
   firstButton.innerText = "Go to First";

docs/src/components/Examples.astro

@@ -28,7 +28,7 @@ import { ExampleButton } from "./ExampleButton";
 <script>
   import { driver } from "driver.js";
   import "driver.js/dist/driver.css";
-  import { mountDummyElement, removeDummyElement } from "../components/CodeSample";
+  import { mountDummyElement, removeDummyElement } from "../lib/dummyElement";
 
   function markDone(btn) {
     btn.classList.add("bg-gray-300", "hover:bg-gray-200", "line-through");

docs/src/lib/dummyElement.ts

@@ -0,0 +1,28 @@
+// Plain DOM helpers shared by the home-page examples script and the CodeSample
+// component. Kept in a framework-free module so it can be imported from vanilla
+// Astro <script> tags without pulling in React (which would otherwise trip the
+// @vitejs/plugin-react dev preamble guard and crash the script).
+
+export function removeDummyElement() {
+  const el = document.querySelector(".dynamic-el");
+  if (el) {
+    el.remove();
+  }
+}
+
+export function mountDummyElement() {
+  const newDiv = (document.querySelector(".dynamic-el") || document.createElement("div")) as HTMLElement;
+
+  newDiv.innerHTML = "This is a new Element";
+  newDiv.style.display = "block";
+  newDiv.style.padding = "20px";
+  newDiv.style.backgroundColor = "black";
+  newDiv.style.color = "white";
+  newDiv.style.fontSize = "14px";
+  newDiv.style.position = "fixed";
+  newDiv.style.top = `${Math.random() * (500 - 30) + 30}px`;
+  newDiv.style.left = `${Math.random() * (500 - 30) + 30}px`;
+  newDiv.className = "dynamic-el";
+
+  document.body.appendChild(newDiv);
+}