language-tools
language-tools copied to clipboard
Weird typing when using `bun` as a language server runtime.
Describe the bug
When you are using Svelte 5 in conjunction with VSCode, the official Svelte extension, Typescript and you set svelte.language-server.runtime as well as typescript.tsserver.nodePath to bun, you get very different and weird behavior if you import from a .svelte file into a normal .ts versus when you import from .svelte into another .svelte (or .svelte.ts) file.
See the following screenshots as a reference:
Import into .svelte:
Import into .ts
In both cases, import happens from this basic component but the results are very different:
// this is the component
<script lang="ts" module>
export type Props = {
onclick?: () => void;
};
</script>
<script lang="ts">
let { onclick }: Props = $props();
</script>
<button type="button" {onclick}> click </button>
Weird:
(1) I can get the type of component as the return type of a function in a .svelte but in a .ts the same import is not a function but a class.
(2) I can not import whatever types a Svelte[context=module] exports in a .ts file, but I can import it in a .svelte file.
(3) I can use the ComponentProps helper in a .svelte file but it won't work in .ts due to (1) and I can't seem to find a way to access the typings of a component's props in a .ts file otherwise.
Reproduction
- Check out this Repo: https://github.com/ptrxyz/s5-import-problems
- Configure VSCode to make the svelte language server use bun as runtime (settings ID
svelte.language-server.runtime) - Configure VSCode's Typescript feature to also use bun as runtime (settings ID
typescript.tsserver.nodePath) - Navigate to
src/lib/test.ts/src/lib/test.sveltein VSCode and see the difference.
Expected behaviour
Probably the same behavior no matter what JS runtime I use.
System Info
System: OS: Linux 6.11 Arch Linux CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor Memory: 51.40 GB / 62.71 GB Shell: 5.9 - /usr/bin/zsh Binaries: Node: 23.1.0 - /usr/bin/node Yarn: 1.22.22 - /usr/bin/yarn npm: 10.9.0 - /usr/bin/npm pnpm: 9.12.3 - /usr/bin/pnpm bun: 1.1.34 - ~/bin/bun Browsers: Brave Browser: 130.1.71.121 Chromium: 130.0.6723.91
IDE: VSCode Version: 1.95.1 Commit: 65edc4939843c90c34d61f4ce11704f09d3e5cb6 Date: 2024-10-31T05:14:54.222Z Electron: 32.2.1 ElectronBuildId: 10427718 Chromium: 128.0.6613.186 Node.js: 20.18.0 V8: 12.8.374.38-electron.0 OS: Linux x64 6.11.6-arch1-1
Extension: svelte.svelte-vscode version v109.1.0 vscode.typescript-language-features v1.0.0 (built-in)
Typescript: version 5.6.3
Which package is the issue about?
No response
Additional Information, eg. Screenshots
No response
This matter has also been discussed in the Svelte discord channel: https://discord.com/channels/457912077277855764/1302585993064353834/1302603032667754538
I don't have bun setup but it probably is require.resolve call for the svelte compiler failed or resolved to the bundled svelte 4. So the component is generated as a class. You might need to check if the latest version of Bun has the same problem. if it does, please report to Bun.