language-tools
language-tools copied to clipboard
sveltejs
Slot prop types from generic components not propagating upwards
Describe the bug
When using experimental generics, there is a bug happening where the let:prop type is not being passed up to the parent component, causing type issues within typescript only (the code works).
Reproduction
Main.svelte
<script>
import Foo from "./Foo.svelte"
</script>
<Foo xyz="foo" >
<div slot="option" let:abc>
{abc}
</div>
</Foo>
The type of abc here is unknown when it should be string. This will appear as an error in VSCode
Foo.svelte
<script lang="ts">
import Bar from "./Bar.svelte"
type T = $$Generic
export let xyz: T
</script>
<Bar {xyz}>
<svelte:fragment slot="option" let:bar>
<slot name="option" abc={bar}/>
</svelte:fragment>
</Bar>
Bar.svelte
<script lang="ts">
type T = $$Generic
export let xyz: T
</script>
<slot name="option" bar={xyz} />
Additionally, when you remove the name="option" and use the default to target the default slots the type becomes any instead of unknown. This does not appear as an error in VSCode, since it is any however all the type information is gone
Example using default slot:
Main.svelte
<script>
import Foo from "./Foo.svelte"
</script>
<Foo xyz="foo" let:abc>
{abc}
</Foo>
Foo.svelte
<script lang="ts">
import Bar from "./Bar.svelte"
type T = $$Generic
export let xyz: T
</script>
<Bar {xyz} let:bar>
<slot abc={bar}/>
</Bar>
Bar.svelte
<script lang="ts">
type T = $$Generic
export let xyz: T
</script>
<slot bar={xyz}/>
Logs
No response
System Info
System:
OS: macOS 12.0.1
CPU: (8) arm64 Apple M1 Pro
Memory: 82.30 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.17.0 - /usr/local/bin/node
npm: 8.15.0 - /usr/local/bin/npm
Browsers:
Chrome: 104.0.5112.101
Firefox Developer Edition: 105.0
Safari: 15.1
Severity
blocking an upgrade
A workaround I have discovered is to force Svelte to adopt a better interface for $$Slots
type T = $$Generic
interface $$Slots {
default: { abc: T }
}
I still feel as if this should be automatic though
In our case using the svelte-checker with '--use-new-transformation' has fixed the problem. No problems with VSCode.
The issue only occurred in some situations (some components worked, others didn't).
In our case using the svelte-checker with '--use-new-transformation' has fixed the problem. No problems with VSCode.
The issue only occurred in some situations (some components worked, others didn't).
How does one apply this change?