You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
<scriptlang="ts" module>exporttypeProps={onclick?: ()=>void;};</script><scriptlang="ts">let{ onclick }: Props=$props();</script><buttontype="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.
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.
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 astypescript.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:
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
svelte.language-server.runtime
)typescript.tsserver.nodePath
)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
The text was updated successfully, but these errors were encountered: