From dc2e7c9a19ea7b8ee9c5c6fd23228a7be0a53e99 Mon Sep 17 00:00:00 2001
From: Peyton-Spencer <pas1234567@gmail.com>
Date: Sun, 8 Feb 2026 19:25:12 -0500
Subject: [PATCH] fix: use virtual module for runtime auto-import
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous approach injected an inline `<script type="module">` with
`import "solid-grab"` via transformIndexHtml. Browsers cannot resolve
bare module specifiers in inline scripts — Vite only processes scripts
that were in the original HTML, not those injected by plugins.

Fix: use a virtual module (`virtual:solid-grab-init`) served through
Vite's dev server via configureServer middleware. The HTML now gets a
`<script type="module" src="/@solid-grab/init">` tag, which the browser
fetches as a normal module request. Vite's middleware rewrites the URL
to `/@id/virtual:solid-grab-init`, which resolves through the plugin's
resolveId/load hooks and gets the bare import properly resolved.

Tested and working in ditto-app — overlay activates on Alt+hover.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/vite.ts               | 46 +++++++++++++++++++++++++++++----------
 tests/vite-plugin.test.ts | 27 ++++++++++++-----------
 2 files changed, 49 insertions(+), 24 deletions(-)
diff --git a/src/vite.ts b/src/vite.ts
index 8b2cacf..d6d130a 100644
--- a/src/vite.ts
+++ b/src/vite.ts
@@ -18,9 +18,12 @@
  *   });
  */
 
-import type { Plugin, ResolvedConfig } from "vite";
+import type { Plugin, ResolvedConfig, ViteDevServer } from "vite";
 import type { SolidGrabPluginOptions } from "./types.js";
 
+const VIRTUAL_INIT = "virtual:solid-grab-init";
+const RESOLVED_VIRTUAL_INIT = "\0" + VIRTUAL_INIT;
+
 // ── Regex-based JSX transform ────────────────────────────────────────
 //
 // We intentionally avoid a full AST parse here for speed. Solid JSX is
@@ -191,6 +194,17 @@ export default function solidGrab(
       isDev = config.command === "serve" || config.mode === "development";
     },
 
+    // Virtual module that imports the runtime — resolved by Vite's pipeline
+    resolveId(id) {
+      if (id === VIRTUAL_INIT) return RESOLVED_VIRTUAL_INIT;
+    },
+
+    load(id) {
+      if (id === RESOLVED_VIRTUAL_INIT) {
+        return `import "solid-grab";`;
+      }
+    },
+
     transform(code, id) {
       // Only transform in dev mode
       if (!isDev) return null;
@@ -217,17 +231,27 @@ export default function solidGrab(
       };
     },
 
-    // Auto-inject the runtime script in dev mode
-    transformIndexHtml(html) {
-      if (!autoImport) return html;
-      if (!isDev) return html;
-
-      // Inject a module script that imports solid-grab
-      const script = `<script type="module">
-  import("solid-grab").catch(() => {});
-</script>`;
+    // Serve the virtual init module through Vite's transform pipeline
+    configureServer(server: ViteDevServer) {
+      server.middlewares.use((req, _res, next) => {
+        // Rewrite the URL so Vite's built-in module serving handles it
+        if (req.url === "/@solid-grab/init") {
+          req.url = `/@id/${VIRTUAL_INIT}`;
+        }
+        next();
+      });
+    },
 
-      return html.replace("</head>", `${script}\n</head>`);
+    // Inject a <script src> that Vite's dev server will resolve
+    transformIndexHtml() {
+      if (!autoImport || !isDev) return;
+      return [
+        {
+          tag: "script",
+          attrs: { type: "module", src: "/@solid-grab/init" },
+          injectTo: "head" as const,
+        },
+      ];
     },
   };
 }
diff --git a/tests/vite-plugin.test.ts b/tests/vite-plugin.test.ts
index 74006a7..0e2af3e 100644
--- a/tests/vite-plugin.test.ts
+++ b/tests/vite-plugin.test.ts
@@ -208,28 +208,29 @@ describe("transform", () => {
 });
 
 describe("transformIndexHtml", () => {
-  test("injects runtime script in dev mode", () => {
+  test("returns tag descriptors in dev mode", () => {
     const plugin = createPlugin();
-    const html = "<html><head></head><body></body></html>";
-    const result = (plugin as any).transformIndexHtml(html);
+    const result = (plugin as any).transformIndexHtml();
 
-    expect(result).toContain('import("solid-grab")');
-    expect(result).toContain("</head>");
+    expect(result).toBeArray();
+    expect(result).toHaveLength(1);
+    expect(result[0].tag).toBe("script");
+    expect(result[0].attrs.type).toBe("module");
+    expect(result[0].attrs.src).toBe("/@solid-grab/init");
+    expect(result[0].injectTo).toBe("head");
   });
 
-  test("does not inject in production mode", () => {
+  test("returns undefined in production mode", () => {
     const plugin = createPlugin({}, "production");
-    const html = "<html><head></head><body></body></html>";
-    const result = (plugin as any).transformIndexHtml(html);
+    const result = (plugin as any).transformIndexHtml();
 
-    expect(result).not.toContain("solid-grab");
+    expect(result).toBeUndefined();
   });
 
-  test("respects autoImport: false", () => {
+  test("returns undefined when autoImport is false", () => {
     const plugin = createPlugin({ autoImport: false });
-    const html = "<html><head></head><body></body></html>";
-    const result = (plugin as any).transformIndexHtml(html);
+    const result = (plugin as any).transformIndexHtml();
 
-    expect(result).not.toContain("solid-grab");
+    expect(result).toBeUndefined();
   });
 });
