language-tools icon indicating copy to clipboard operation
language-tools copied to clipboard

Weird typing when using `bun` as a language server runtime.

Open ptrxyz opened this issue 1 year ago • 2 comments

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: image

Import into .ts image

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.svelte in 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

ptrxyz avatar Nov 04 '24 14:11 ptrxyz

This matter has also been discussed in the Svelte discord channel: https://discord.com/channels/457912077277855764/1302585993064353834/1302603032667754538

ptrxyz avatar Nov 04 '24 14:11 ptrxyz

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.

jasonlyu123 avatar Nov 05 '24 05:11 jasonlyu123