fix: Alt + click not working on windows and mac

[LazyClicks]

What is it?

• Feature / enhancement
• Bug
• Docs / tests / types / typos
• Infra

Description

Checklist

• My code follows the developer guidelines of this project
• I performed a self-review of my own code
• I added a changeset with pnpm change
• I made corresponding changes to the Qwik docs
• I added new tests to cover the fix / functionality

[changeset-bot]

🦋 Changeset detected

Latest commit: 7435fa5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@builder.io/qwik	Patch
eslint-plugin-qwik	Patch
@builder.io/qwik-city	Patch
create-qwik	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@builder.io/qwik@7785

npm i https://pkg.pr.new/@builder.io/qwik-city@7785

npm i https://pkg.pr.new/eslint-plugin-qwik@7785

npm i https://pkg.pr.new/create-qwik@7785

commit: f33058b

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
qwik-docs	✅ Ready (View Log)	Visit Preview	f33058b

[gioboa]

Close #7135

[gioboa]

With macOs and VSCode is working fine 👏
Thanks @LazyClicks

[Shane-Donlon]

With macOs and VSCode is working fine 👏 Thanks @LazyClicks

Hey everyone 👋
Windows testing with VSCode feedback:

For simple pages it works great: example below: (both of those work)

In the above both alt+click goes straight to an index page (expected behavior)
http://localhost:5173/__open-in-editor?file=C%3A%2FUsers%2Ffolder-location-stuff%2Ffolder-location-stuff%2Ffolder-location-stuff%2Ffolder%2Ftesting-windows-stuff%2Fsrc%2Froutes%2Findex.tsx%3A35%3A7

But when I add a button component, it doesn't work so well (on the button)

The fetch request goes to http://localhost:5173/__open-in-editor?file=%2Fsrc%2Fcomponents%2Fbutton%2Fbutton.tsx%3A4%3A9 rather than including the whole path / absolute URL (c:/users etc..) http://localhost:5173/__open-in-editor?file=C%3A%2FUsers%2Ffolder-location-stuff%2Ffolder-location-stuff%2Ffolder-location-stuff%2Ffolder%2Ftesting-windows-stuff%2Fsrc%2Froutes%2Findex.tsx%3A35%3A7

In summary:
This does not work:
http://localhost:5173/__open-in-editor?file=%2Fsrc%2Fcomponents%2Fbutton%2Fbutton.tsx%3A4%3A9

This does work
http://localhost:5173/__open-in-editor?file=C%3A%2FUsers%2Ffolder-location-stuff%2Ffolder-location-stuff%2Ffolder-location-stuff%2Ffolder%2Ftesting-windows-stuff%2Fsrc%2Froutes%2Findex.tsx%3A35%3A7

Let me know if you have questions.

[gioboa]

Is this one working for you @Shane-Donlon
C%3A%2F%2FUsers%2Ffolder-location-stuff%2Ffolder-location-stuff%2Ffolder-location-stuff%2Ffolder%2Ftesting-windows-stuff%2Fsrc%2Froutes%2Findex.tsx%3A35%3A7
I added an extra / in the beginning

[Shane-Donlon]

http://localhost:5173/__open-in-editor?file=C%3A%2FUsers%2Ffolder-location-stuff%2Ffolder-location-stuff%2Ffolder-location-stuff%2Ffolder%2Ftesting-windows-stuff%2Fsrc%2Froutes%2Findex.tsx%3A35%3A7

@gioboa Yes this works, but the problem wasn't with the index.tsx file.
So to make it a little easier for reading etc..

The below URL fetch works:
C://Users/localtionstuff/localtionstuff/localtionstuff/localtionstuff/testing-windows-stuff/src/routes/index.tsx

The below URL fetch does not work:
src/components/button/button.tsx does not work.

the fetch request for the button is missing the C://Users/localtionstuff/localtionstuff/localtionstuff/localtionstuff/testing-windows-stuff before the src folder.

If I manually add this absolute URL details to the URL for the button VSCode opens the button component tsx file perfectly.

[LazyClicks]

http://localhost:5173/__open-in-editor?file=C%3A%2FUsers%2Ffolder-location-stuff%2Ffolder-location-stuff%2Ffolder-location-stuff%2Ffolder%2Ftesting-windows-stuff%2Fsrc%2Froutes%2Findex.tsx%3A35%3A7

@gioboa Yes this works, but the problem wasn't with the index.tsx file. So to make it a little easier for reading etc..

The below URL fetch works: C://Users/localtionstuff/localtionstuff/localtionstuff/localtionstuff/testing-windows-stuff/src/routes/index.tsx

The below URL fetch does not work: src/components/button/button.tsx does not work.

the fetch request for the button is missing the C://Users/localtionstuff/localtionstuff/localtionstuff/localtionstuff/testing-windows-stuff before the src folder.

If I manually add this absolute URL details to the URL for the button VSCode opens the button component tsx file perfectly.

i was able to reproduce it on my end, i added a if check to see if file path starts with prefix
(prefix in this case is full file path up to src, so c://src/) if it doesn't it would combine prefix with filepath, also removing "src" from filepath before combining them because it seems when filepath doesnt contain the full path it still has src in it

[Shane-Donlon]

Yeah that loads perfectly on Windows now 🥳

Although I'll need to double check this again later when the CI Checks are passing
pkg-pr-new is running on commit ba9aec0 and not commit 955507a I did the test by cloning the fork and rebuilding locally.

Follow-up:
CI has been updated with the new commit, works wonderfully on Windows with VSCode now. 🥳

[MarcoMonza]

✅ Confirmed: this patch successfully resolves the issue on Windows.

Tested on Windows 11 24H2 using both VSCode and Cursor as editors, with the application running in Google Chrome (v139.0.7258.67) and Microsoft Edge (v138.0.3351.121).

Thanks!

[LazyClicks]

✅ Confirmed: this patch successfully resolves the issue on Windows.

Tested on Windows 11 24H2 using both VSCode and Cursor as editors, with the application running in Google Chrome (v139.0.7258.67) and Microsoft Edge (v138.0.3351.121).

Thanks!

did it work with cursor? because on my end the vite plugin only works with vsc, even with an independent script that uses the plugin directly

[gioboa]

With Linux and Mac is working fine.

[gioboa]

Thanks @LazyClicks for your help 🥳

[wmertens]

LGTM 🔌

[wmertens]

At some point we might use the vite dev url for a file instead, with a query parameter, and then in the plugin call launch-editor after resolving the path.

But until then, this is very welcome 🤗

[LazyClicks]

ah, i found another edge case where it's failing
when using alt+click on a part of the page that uses a component with a slot, the path its giving is not correct
http://localhost:5173/__open-in-editor?file=c%3A%2FUsers%2Fayoub%2FDesktop%2FProjects%2Ftemp%2Fqwik-app%2Fsrc%2F%5CC%3A%2FUsers%2Fayoub%2FDesktop%2FProjects%2Ftemp%2Fqwik-app%2Fsrc%2Froutes%2Findex.tsx%3A32%3A13
it seems prefix check with filePath isnt filtering this one out, im gonna see if i can make it more strict later on after im back
however for everything else it seems to work fine on my windows machine

[wmertens]

@LazyClicks perhaps you could try calling launch-editor directly from resolveId() in plugin.ts of qwik?

Then you could call this.resolve to get the path when getting e.g. /src/root.tsx?openEditor

And we'd change the optimizer to put vite paths in the jsxdev

[gioboa]

Thanks for your help @LazyClicks

[jails]

Hi, I'm encountering a problem with the Alt+Click "open in editor" feature and this fix doesn't work for me.

In my vite.config.ts, I'm setting a custom srcDir like this:

qwikVite({ 
   srcDir: new URL('./src/some/directory', import.meta.url).pathname
})

However, when I Alt+Click a component in the browser, the generated URL looks like this:

https://localhost:5004/__open-in-editor?file=%2Fhome%2Fusername%2Fproject%2Fqwikcity%2Fapp%2Fsrc%2Fsome%2F%2Fdirectory%2Fsome%2F%2Fdirectory%2Fcomponents%2Fstarter%2Fhero%2Fhero.tsx%3A9%3A7

You can see that the some/directory part is duplicated in the file path.

It seems that the path passed to qwikOpenInEditor() is relative to the repo root instead of being resolved relative to the configured srcDir. As a result, the final path is incorrect and the editor can't open the file.

Let me know if I can help testing a fix.

Thanks!

[gioboa]

Let me know if I can help testing a fix.

Is it working without that srcDir property?
In the network tab you can click on initiator and debug the qwikOpenInEditor function to find the fix to create the correct path.

[jails]

Hi, thanks I appreciate the hint!

It's working well without the srcDir, but that assumes the project is located directly under the default src/ directory.

That said, I believe the core issue goes a bit deeper than just filtering out the "src" path. The real problem is that the path passed to the qwikOpenInEditor() function includes the srcDir portion as well as the srcDir itself. This leads to the srcDir being duplicated in the final result.

For example:

path: /src/presentation/app/components/xyz.tsx:50:9

srcDir: http://local.local/home/user/project/src/presentation/app/

So when the full path is constructed, the srcDir is effectively included twice, which breaks setups with custom directory structures.

[gioboa]

Nice catch. Can you create an issue for that? Would you like to drop a PR to fix that?

[jails]

@gioboa I'm not entirely sure where srcDir is used internally, so I preferred not to modify its current behavior. Instead, I opened a PR here: #7921, which populates rootDir which was the missing piece for a working qwikOpenInEditor().