fix(click to component): use vite to resolve path

Author: wmertens

.changeset/six-cars-juggle.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/qwik': patch
+---
+
+fix: Click-to-Component is now more reliable across platforms

packages/qwik/package.json

@@ -35,6 +35,7 @@
     "ignore": "5.3.1",
     "image-size": "1.2.1",
     "kleur": "4.1.5",
+    "launch-editor": "^2.11.1",
     "ts-morph": "23.0.0"
   },
   "engines": {

packages/qwik/src/optimizer/src/plugins/click-to-component.html

@@ -136,34 +136,24 @@
           const target = findContainer(event.target);
           if (target) {
             event.preventDefault();
+            event.stopPropagation();
             const inspectUrl = target.getAttribute(inspectAttribute);
             if (inspectUrl !== 'false') {
               body.style.setProperty('cursor', 'progress');
-              qwikOpenInEditor(inspectUrl);
+              const match = inspectUrl.match(/^(.*?)(:\d+(:\d+)?)?$/);
+              if (match) {
+                const [, filePath, location] = match;
+                fetch(`${filePath}?editor${location}`).then(() => {
+                  body.style.removeProperty('cursor');
+                });
+              }
             }
           }
         }
       },
       { capture: true }
     );
 
-    globalThis.qwikOpenInEditor = function (path) {
-      const isWindows = navigator.platform.includes('Win');
-      const resolvedURL = new URL(path, isWindows ? origin : srcDir);
-      let filePath =
-        resolvedURL.protocol === 'file:' && resolvedURL.pathname.startsWith('/')
-          ? resolvedURL.pathname.slice(1)
-          : resolvedURL.pathname.startsWith('/@fs/')
-            ? resolvedURL.pathname.slice(isWindows ? 5 : 4)
-            : resolvedURL.pathname;
-      if (filePath.startsWith('/src/')) {
-        const prefix = isWindows ? srcDir : srcDir.replace('http://local.local', '');
-        filePath = prefix + filePath.slice(4);
-      }
-      const params = new URLSearchParams();
-      params.set('file', filePath);
-      fetch('/__open-in-editor?' + params.toString());
-    };
     document.addEventListener(
       'contextmenu',
       (event) => {

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

@@ -1,29 +1,28 @@
-/* eslint-disable no-console */
-import type { Rollup, Plugin, ViteDevServer, HmrContext } from 'vite';
+import type { ManualChunksOption } from 'rollup';
+import type { HmrContext, Plugin, Rollup, ViteDevServer } from 'vite';
+import type { BundleGraphAdder } from '..';
 import { hashCode } from '../../../core/util/hash_code';
 import { generateManifestFromBundles, getValidManifest } from '../manifest';
 import { createOptimizer } from '../optimizer';
 import type {
   Diagnostic,
   EntryStrategy,
   GlobalInjections,
-  SegmentAnalysis,
   Optimizer,
   OptimizerOptions,
   OptimizerSystem,
   QwikManifest,
+  SegmentAnalysis,
+  ServerQwikManifest,
+  SmartEntryStrategy,
   TransformModule,
   TransformModuleInput,
   TransformModulesOptions,
   TransformOutput,
-  SmartEntryStrategy,
-  ServerQwikManifest,
 } from '../types';
+import { convertManifestToBundleGraph } from './bundle-graph';
 import { createLinter, type QwikLinter } from './eslint-plugin';
 import { isWin, parseId } from './vite-utils';
-import type { BundleGraphAdder } from '..';
-import { convertManifestToBundleGraph } from './bundle-graph';
-import type { ManualChunksOption } from 'rollup';
 
 const REG_CTX_NAME = ['server'];
 
@@ -427,6 +426,7 @@ export function createQwikPlugin(optimizerOptions: OptimizerOptions = {}) {
   };
 
   let resolveIdCount = 0;
+  let doNotEdit = false;
   /**
    * This resolves virtual names and QRL segments/entries. All the rest falls through. We must
    * always return a value for QRL segments because they don't exist on disk.
@@ -445,6 +445,35 @@ export function createQwikPlugin(optimizerOptions: OptimizerOptions = {}) {
     if (id.startsWith('\0')) {
       return;
     }
+
+    // Intercept requests to open in editor
+    const editMatch = devServer && /^(.*)\?editor(:(\d+)(:\d+)?)?$/.exec(id);
+    if (editMatch) {
+      // Throttle so we don't open multiple times on re-resolve
+      if (!doNotEdit) {
+        doNotEdit = true;
+        setTimeout(() => (doNotEdit = false), 500);
+
+        const [, origId, location] = editMatch;
+        // Find the actual file on disk by asking vite to resolve it
+        const resolved = await ctx.resolve(origId, importerId);
+        if (resolved) {
+          const file = devServer!.moduleGraph.getModuleById(resolved.id)?.file;
+          if (file) {
+            const path = `${file}${location}`;
+            try {
+              console.warn(`Opening in editor: ${path}`);
+              const launchEditor = (await import('launch-editor')).default;
+              launchEditor(path);
+            } catch (e: any) {
+              console.error(`Failed to open editor: ${e.message}`);
+            }
+          }
+        }
+      }
+      return { id: `\0editor` };
+    }
+
     const count = resolveIdCount++;
     const isServer = getIsServer(resolveOpts);
     debug(`resolveId(${count})`, `begin ${id} | ${isServer ? 'server' : 'client'} | ${importerId}`);
@@ -577,6 +606,10 @@ export function createQwikPlugin(optimizerOptions: OptimizerOptions = {}) {
     id: string,
     loadOpts?: Parameters<Extract<Plugin['load'], Function>>[1]
   ): Promise<Rollup.LoadResult> => {
+    if (id === '\0editor') {
+      // This doesn't get used, but we need to return something
+      return '"opening in editor"';
+    }
     if (id.startsWith('\0') || id.startsWith('/@fs/')) {
       return;
     }
@@ -850,11 +883,13 @@ export function createQwikPlugin(optimizerOptions: OptimizerOptions = {}) {
 
   const debug = (...str: any[]) => {
     if (opts.debug) {
+      // eslint-disable-next-line no-console
       console.debug(`[QWIK PLUGIN: ${id}]`, ...str);
     }
   };
 
   const log = (...str: any[]) => {
+    // eslint-disable-next-line no-console
     console.log(`[QWIK PLUGIN: ${id}]`, ...str);
   };
 

packages/qwik/src/optimizer/src/plugins/vite-dev-server.ts

@@ -391,6 +391,9 @@ const shouldSsrRender = (req: IncomingMessage, url: URL) => {
   if (pathname.includes('__open-in-editor')) {
     return false;
   }
+  if (pathname.includes('?editor:')) {
+    return false;
+  }
   if (url.searchParams.has('html-proxy')) {
     return false;
   }

pnpm-lock.yaml

@@ -1,28 +1,28 @@
 packages:
-  - 'packages/*'
-  - 'e2e/*'
-  # - 'starters/adapter/*'
-  # - 'starters/features/*'
+  - packages/*
+  - e2e/*
+
+autoInstallPeers: false
+
+engineStrict: true
 
 onlyBuiltDependencies:
   - '@parcel/watcher'
   - '@tailwindcss/oxide'
-  - 'esbuild'
-  - 'netlify-cli'
-  - 'puppeteer'
-  - 'sharp'
-  - 'simple-git-hooks'
-  - 'unix-dgram'
-  - 'workerd'
+  - esbuild
+  - netlify-cli
+  - puppeteer
+  - sharp
+  - simple-git-hooks
+  - unix-dgram
+  - workerd
 
 overrides:
-  'typescript': '5.4.5'
-  'vfile': '6.0.3'
+  typescript: 5.4.5
+  vfile: 6.0.3
 
 patchedDependencies:
-  '[email protected]': 'patches/[email protected]'
-  '[email protected]': 'patches/[email protected]'
+  [email protected]: patches/[email protected]
+  [email protected]: patches/[email protected]
 
-engineStrict: true
 shellEmulator: true
-autoInstallPeers: false

pnpm-workspace.yaml

@@ -33,6 +33,7 @@ export async function submoduleOptimizer(config: BuildConfig) {
       external: [
         /* no Node.js built-in externals allowed! */
         'espree',
+        'launch-editor',
       ],
     };