Auto import of Astro's navigate() in VS Code defaults to astro/dist/transitions/router

[glib-0]

Astro Info

Astro                    v4.5.16
Node                     v20.11.1
System                   Windows (x64)
Package Manager          npm
Output                   server
Adapter                  @astrojs/vercel/serverless
Integrations             @astrojs/tailwind

If this issue only occurs in one browser, which browser is a problem?

N/A

Describe the Bug

I know this is pretty minor, but when using VS Code's auto importing to import navigate() in a React component, the default option is astro/dist/transitions/router instead of astro:transitions/client, which throws the following error:

The error is not super clear, and it's a very easy mistake to make.

The default option is correct inside .astro files, but obviously there is not much use for it there:

What's the expected result?

The navigate from astro:transitions/client to take higher priority in the list.

In the Stackblitz example, it defaults to 'astro/virtual-modules/transitions-router.js', which doesn't throw an error but also just doesn't work.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-baf1mz?file=src%2Fcomponents%2FReactComponent.tsx

Participation

• I am willing to submit a pull request for this issue.

[glib-0]

Actually the Stackblitz default does work - I swear I tried it a few times 🙄. Bug still applies.

[Princesseuh]

Unfortunately, you can't really control the ordering of that list inside the project itself, it has to be done in the tooling. That's why it shows higher in Astro files, because we control all the tooling there.

The way to fix this in .ts(x) files would be to modify our TypeScript plugin, decorate the language service's method that does the completions and change the sortText property on the completions that start with astro:.

Here:

language-tools/packages/ts-plugin/src/index.ts

Line 4 in 0503392

export = createLanguageServicePlugin(() => [getLanguageModule()]);

, instead of using Volar's all-in-one method for making the plugin, we should do all the decoration ourselves, like Vue does here: https://github.com/vuejs/language-tools/blob/e3fc9b97a74e6e50bf2c9bde81cb43e8ca3fa7bc/packages/typescript-plugin/index.ts#L17.

We should implement a decorateLanguageServiceForAstro function like they do, and in it augment the getCompletionsAtPosition function like they do here: https://github.com/vuejs/language-tools/blob/e3fc9b97a74e6e50bf2c9bde81cb43e8ca3fa7bc/packages/typescript-plugin/lib/common.ts#L20.

For the exact changes to do to the sortText, we can refer to this code:

language-tools/packages/language-server/src/plugins/typescript/completions.ts

Lines 14 to 17 in 0503392

	// Sort completions starting with `astro:` higher than other imports
	if (source.startsWith('astro:')) {
	completion.sortText = '\u0000' + (completion.sortText ?? completion.label);
	}

If anyone is interested in sending a PR, let me know and I'll provide more details / I'm happy to answer more questions.