Merge pull request #8187 from QwikDev/v2-fix-click-to-component

fix(dev): use vite base in click-to-component

Author: wmertens

packages/qwik/src/optimizer/src/plugins/dev/click-to-component.js

@@ -2,7 +2,7 @@ if (typeof document !== 'undefined') {
   const register = () => {
     const inspectAttribute = 'data-qwik-inspector';
     const hotKeys = globalThis.__HOTKEYS__;
-    const srcDir = globalThis.__SRC_DIR__;
+    const base = globalThis.__BASE__;
     let popup = document.querySelector('#qwik-inspector-info-popup');
     if (!popup) {
       popup = document.createElement('div');
@@ -92,7 +92,7 @@ if (typeof document !== 'undefined') {
               const match = inspectUrl.match(/^(.*?)(:\d+(:\d+)?)?$/);
               if (match) {
                 const [, filePath, location] = match;
-                fetch(`${filePath}?editor${location}`).then(() => {
+                fetch(`${base}${filePath}?editor${location}`).then(() => {
                   body.style.removeProperty('cursor');
                 });
               }

packages/qwik/src/optimizer/src/plugins/dev/index.ts

@@ -77,7 +77,7 @@ function invalidPreviewMessage(middlewares: Connect.Server, msg: string) {
   });
 }
 
-export const getViteIndexTags = (opts: NormalizedQwikPluginOptions, srcDir: string) => {
+export const getViteIndexTags = (opts: NormalizedQwikPluginOptions, base: string) => {
   const tags: HtmlTagDescriptor[] = [
     { tag: 'style', children: qwikErrorOverlayStyles, injectTo: 'body' },
     { tag: 'style', children: inspectorStyles, injectTo: 'body' },
@@ -104,13 +104,16 @@ export const getViteIndexTags = (opts: NormalizedQwikPluginOptions, srcDir: stri
   }
   if (opts.devTools?.clickToSource ?? true) {
     const hotKeys = opts.devTools.clickToSource ?? [];
-    const srcDirUrl = new URL(srcDir + '/', 'http://local.local').href;
+    // the filepaths start with /
+    if (base.endsWith('/')) {
+      base = base.slice(0, -1);
+    }
     tags.push({
       tag: 'script',
       attrs: { type: 'module' },
       children: clickToComponent
         .replace('globalThis.__HOTKEYS__', JSON.stringify(hotKeys))
-        .replace('globalThis.__SRC_DIR__', JSON.stringify(srcDirUrl)),
+        .replace('globalThis.__BASE__', JSON.stringify(base)),
       injectTo: 'body',
     });
   }

packages/qwik/src/optimizer/src/plugins/vite.ts

@@ -564,7 +564,7 @@ export function qwikVite(qwikViteOpts: QwikVitePluginOptions = {}): any {
       if (viteCommand !== 'serve') {
         return;
       }
-      return getViteIndexTags(qwikPlugin.getOptions(), srcDir!);
+      return getViteIndexTags(qwikPlugin.getOptions(), basePathname);
     },
     configureServer(server: ViteDevServer) {
       qwikPlugin.configureServer(server);