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+

src/client.ts

@@ -37,6 +37,7 @@ style.innerHTML = `[data-click-to-component-target] {
 document.head.appendChild(style);
 
 const root = "__ROOT__";
+const base = "__BASE__";
 let currentTarget: HTMLElement | undefined;
 let hasMenu = false;
 const menuElement = document.createElement("div");
@@ -123,7 +124,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);

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) {