Support frameworks not using transformIndexHtml (fixes #13) [publish]

Author: ArnaudBarre

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 4.2.0
+
+- Add support for frameworks not using transformIndexHtml hook like React Router 7 (fixes #13)
+
 ## 4.1.0
 
 - Add support for React 19.2

README.md

@@ -22,6 +22,17 @@ export default defineConfig({
 });
 ```
 
+### For frameworks not using transformIndexHtml hook (like React Router 7 framework mode)
+
+> [!NOTE]
+> If you're unsure, try first without adding this import
+
+Add this somewhere in your entry file (like `src/main.tsx`):
+
+```ts
+import "vite-plugin-react-click-to-component/client";
+```
+
 ## Inspiration
 
 This plugin is a light version of [ericclemmons/click-to-component](https://github.com/ericclemmons/click-to-component) that uses Vite's launch editor middleware to open the source code in your currently running editor. This also benefits from Vite's transformIndexHtml hook so that you don't need to modify your source code.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-plugin-react-click-to-component",
   "type": "module",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "private": true,
   "license": "MIT",
   "scripts": {

playground/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "postinstall": "rm -rf node_modules/vite",
     "dev": "vite",
+    "build": "vite build",
     "lint": "eslint --max-warnings 0"
   },
   "dependencies": {

scripts/bundle.ts

@@ -45,6 +45,7 @@ await Promise.all([
 export declare const reactClickToComponent: () => PluginOption;
 `,
   );
+  writeFileSync("dist/client.d.ts", "export {};\n");
 
   writeFileSync(
     "dist/package.json",
@@ -60,6 +61,7 @@ export declare const reactClickToComponent: () => PluginOption;
         type: "module",
         exports: {
           ".": "./index.js",
+          "./client": { types: "./client.d.ts" },
         },
         keywords: [
           "vite",

src/index.ts

@@ -2,54 +2,89 @@ import { readFileSync } from "node:fs";
 import { join } from "node:path";
 import type { PluginOption } from "vite";
 
-let root = "";
-let base = "";
+export const reactClickToComponent = (): PluginOption => {
+  let root = "";
+  let base = "";
+  let isServe = false;
+  let clientCode: string | undefined;
 
-export const reactClickToComponent = (): PluginOption => ({
-  name: "react-click-to-component",
-  apply: "serve",
-  configResolved(config) {
-    root = config.root;
-    base = config.base;
-  },
-  transformIndexHtml: () => [
-    {
-      tag: "script",
-      attrs: { type: "module" },
-      children: readFileSync(join(import.meta.dirname, "client.js"), "utf-8")
-        .replace("__ROOT__", root)
-        .replace("__BASE__", base),
+  return {
+    name: "react-click-to-component",
+    configResolved(config) {
+      root = config.root;
+      base = config.base;
+      isServe = config.command === "serve";
     },
-  ],
-  transform: {
-    filter: { id: /jsx-dev-runtime\.js/u },
-    handler(code) {
-      if (code.includes("_source")) return; // React <19, no hack needed
-      // React 19, inject source into _debugInfo
-      const defineIndex = code.indexOf('"_debugInfo"');
-      if (defineIndex === -1) return;
-      const valueIndex = code.indexOf("value: null", defineIndex);
-      if (valueIndex === -1) return;
-      let newCode =
-        code.slice(0, valueIndex)
-        + "value: source"
-        + code.slice(valueIndex + 11);
-      if (code.includes("function ReactElement(type, key, self, source,")) {
+
+    // Fix React 19 not injecting source in jsxDEV
+    transform: {
+      filter: { id: /jsx-dev-runtime\.js/u },
+      handler(code) {
+        if (!isServe) return;
+        if (code.includes("_source")) return; // React <19, no hack needed
+
+        // React 19, inject source into _debugInfo
+        const defineIndex = code.indexOf('"_debugInfo"');
+        if (defineIndex === -1) return;
+        const valueIndex = code.indexOf("value: null", defineIndex);
+        if (valueIndex === -1) return;
+        let newCode =
+          code.slice(0, valueIndex)
+          + "value: source"
+          + code.slice(valueIndex + 11);
+        if (code.includes("function ReactElement(type, key, self, source,")) {
+          return newCode;
+        }
+
+        // React 19.2: we need to inject source jsxDEV -> jsxDEVImpl -> ReactElement
+        newCode = newCode.replaceAll(
+          /maybeKey,\s*isStaticChildren/gu,
+          "maybeKey, isStaticChildren, source",
+        );
+        newCode = newCode.replaceAll(
+          /(\w+)?,\s*debugStack,\s*debugTask/gu,
+          (m, previousArg) => {
+            if (previousArg === "source") return m;
+            return m.replace("debugTask", "debugTask, source");
+          },
+        );
         return newCode;
-      }
-      // React 19.2: we need to inject source jsxDEV -> jsxDEVImpl -> ReactElement
-      newCode = newCode.replaceAll(
-        /maybeKey,\s*isStaticChildren/gu,
-        "maybeKey, isStaticChildren, source",
-      );
-      newCode = newCode.replaceAll(
-        /(\w+)?,\s*debugStack,\s*debugTask/gu,
-        (m, previousArg) => {
-          if (previousArg === "source") return m;
-          return m.replace("debugTask", "debugTask, source");
+      },
+    },
+
+    // Default: Inject client via transformIndexHtml (no source code modification required)
+    transformIndexHtml() {
+      if (!isServe) return;
+      return [
+        {
+          tag: "script",
+          attrs: { type: "module" },
+          children:
+            'import "/@id/__x00__vite-plugin-react-click-to-component/client";',
         },
-      );
-      return newCode;
+      ];
+    },
+
+    // Inject with `import "vite-plugin-react-click-to-component/client"` for SSR frameworks
+    resolveId: {
+      order: "pre",
+      filter: { id: /^vite-plugin-react-click-to-component\/client$/u },
+      handler(source) {
+        return "\0" + source;
+      },
+    },
+    load: {
+      filter: { id: /^\0vite-plugin-react-click-to-component\/client$/u },
+      handler() {
+        if (!isServe) return "";
+        if (!clientCode) {
+          clientCode = readFileSync(
+            join(import.meta.dirname, "client.js"),
+            "utf-8",
+          );
+        }
+        return clientCode.replace("__ROOT__", root).replace("__BASE__", base);
+      },
     },
-  },
-});
+  };
+};