Experimental support for React 19 [publish]

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.1.0
+
+- Experimental support for React 19. `_debugSource` [was removed](https://github.com/facebook/react/pull/28265) in React 19. The PR says that tools should lazily generate component stack strace, but I couldn't find a way to use the React devtools globals to generate one for a given Fiber node. I've aksed some React team members about insights on how to make this works, but for now I decided to patch the jsx dev runtime (when serving it) to reinject into Fiber node the source prop added by JSX transform.
+
 ## 3.0.1
 
 - Add vite@6 to peer dependency ranges

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-plugin-react-click-to-component",
   "type": "module",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "license": "MIT",
   "scripts": {
     "postinstall": "cd playground && bun i",
@@ -18,7 +18,7 @@
     "trailingComma": "all"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
+    "react": "^18.3.1 || ^19.0.0",
     "vite": "^4 || ^5 || ^6"
   },
   "devDependencies": {

playground/package.json

@@ -8,11 +8,12 @@
     "lint-ci": "eslint --max-warnings 0"
   },
   "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "vite-plugin-restart": "^0.4.2"
   },
   "devDependencies": {
-    "@types/react-dom": "^18.3.1",
+    "@types/react-dom": "^19.0.2",
     "@vitejs/plugin-react-swc": "^3.7.2"
   }
 }

playground/vite.config.ts

@@ -1,8 +1,13 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import { reactClickToComponent } from "../dist/index.mjs";
+import restart from "vite-plugin-restart";
 
 export default defineConfig({
-  plugins: [react(), reactClickToComponent()],
+  plugins: [
+    react(),
+    reactClickToComponent(),
+    restart({ restart: ["../dist/client.js", "../dist/index.mjs"] }),
+  ],
   server: { open: true },
 });

src/client.ts

@@ -157,20 +157,23 @@ const getLayersForElement = (element: Element) => {
 };
 
 const getPath = (fiber: Fiber) => {
-  if (!fiber._debugSource) {
+  const source = fiber._debugSource ?? fiber._debugInfo;
+  if (!source) {
     console.debug("Couldn't find a React instance for the element", fiber);
     return;
   }
-  const { columnNumber = 1, fileName, lineNumber = 1 } = fiber._debugSource;
+  const { columnNumber = 1, fileName, lineNumber = 1 } = source;
   return `${fileName}:${lineNumber}:${columnNumber}`;
 };
 
+type Source = {
+  columnNumber?: number;
+  fileName: string;
+  lineNumber?: number;
+};
 type Fiber = {
-  _debugSource?: {
-    columnNumber?: number;
-    fileName: string;
-    lineNumber?: number;
-  };
+  _debugSource?: Source;
+  _debugInfo?: Source; // Injected by React jsxDev patch for React 19
   _debugOwner?: Fiber;
   type: string | { displayName?: string; name: string };
 };

src/index.mts

@@ -8,7 +8,7 @@ let root = "";
 export const reactClickToComponent = (): PluginOption => ({
   name: "react-click-to-component",
   apply: "serve",
-  configResolved: (config) => {
+  configResolved(config) {
     root = config.root;
   },
   transformIndexHtml: () => [
@@ -21,4 +21,15 @@ export const reactClickToComponent = (): PluginOption => ({
       ).replace("__ROOT__", root),
     },
   ],
+  transform(code, id) {
+    if (!id.includes("jsx-dev-runtime.js")) return;
+    if (code.includes("_source")) return;
+    const defineIndex = code.indexOf('"_debugInfo"');
+    if (defineIndex === -1) return;
+    const valueIndex = code.indexOf("value: null", defineIndex);
+    if (valueIndex === -1) return;
+    return (
+      code.slice(0, valueIndex) + "value: source" + code.slice(valueIndex + 11)
+    );
+  },
 });