Add support for Vite base path

Author: ArnaudBarre

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## Unreleased
+
+- Add support for Vite base path
+
 ## 4.0.0
 
 - Align with Vite 7: ESM only, node 20.19+

playground/vite.config.ts

@@ -4,6 +4,7 @@ import { reactClickToComponent } from "../dist/index.js";
 import restart from "vite-plugin-restart";
 
 export default defineConfig({
+  base: "/base",
   plugins: [
     react(),
     reactClickToComponent(),

src/client.ts

@@ -37,6 +37,8 @@ style.innerHTML = `[data-click-to-component-target] {
 document.head.appendChild(style);
 
 const root = "__ROOT__";
+const base = "__BASE__";
+const originWithBase = window.location.origin + base.slice(0, -1);
 let currentTarget: HTMLElement | undefined;
 let hasMenu = false;
 const menuElement = document.createElement("div");
@@ -123,7 +125,9 @@ window.addEventListener("contextmenu", (event) => {
     spanR.textContent = layer.path.replace(`${root}/`, "");
     item.appendChild(spanR);
     item.addEventListener("click", () => {
-      void fetch(`/__open-in-editor?file=${encodeURIComponent(layer.path)}`);
+      void fetch(
+        `${base}__open-in-editor?file=${encodeURIComponent(layer.path)}`,
+      );
       cleanUp();
     });
     menuElement.appendChild(item);
@@ -160,6 +164,7 @@ const getLayersForElement = (element: Element) => {
   const layers: { name: string; path: string }[] = [];
   while (instance) {
     const path = getPath(instance);
+    console.log(path);
     if (path) {
       const name =
         typeof instance.type === "string"
@@ -169,21 +174,26 @@ const getLayersForElement = (element: Element) => {
             ?? instance.type.render?.name
             ?? "undefined");
       layers.push({ name, path });
+    } else {
+      console.debug("Couldn't find a React instance for the element", instance);
     }
     instance = instance._debugOwner;
   }
-
   return layers;
 };
 
 const getPath = (fiber: Fiber) => {
-  const source = fiber._debugSource ?? fiber._debugInfo;
-  if (!source) {
-    console.debug("Couldn't find a React instance for the element", fiber);
-    return;
+  if (fiber._debugSource) {
+    const { columnNumber = 1, fileName, lineNumber = 1 } = fiber._debugSource;
+    return `${fileName}:${lineNumber}:${columnNumber}`;
+  } else if (fiber._debugStack) {
+    const componentLine = fiber._debugStack.stack?.split("\n")[2];
+    if (!componentLine) return;
+    if (!componentLine.endsWith(")")) return;
+    const startBracketIndex = componentLine.indexOf("(");
+    const url = componentLine.slice(startBracketIndex + 1, -1);
+    return url.replace(originWithBase, root);
   }
-  const { columnNumber = 1, fileName, lineNumber = 1 } = source;
-  return `${fileName}:${lineNumber}:${columnNumber}`;
 };
 
 type Source = {
@@ -193,8 +203,8 @@ type Source = {
 };
 type Fiber = {
   _debugSource?: Source;
-  _debugInfo?: Source; // Injected by React jsxDev patch for React 19
   _debugOwner?: Fiber;
+  _debugStack?: Error;
   type:
     | string
     | { displayName?: string; name?: string; render?: () => unknown };

src/index.ts

@@ -3,21 +3,22 @@ import { join } from "node:path";
 import type { PluginOption } from "vite";
 
 let root = "";
+let base = "";
 
 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),
+      children: readFileSync(join(import.meta.dirname, "client.js"), "utf-8")
+        .replace("__ROOT__", root)
+        .replace("__BASE__", base),
     },
   ],
   transform(code, id) {