Language-tools: Slot prop not found on slot element itself
Describe the bug
Slot properties are only found within the slot element, but not on the element itself. Svelte allows using the property on the element, so the error is simply a bit misleading. Possibly only surfaced as error when using TypeScript with sufficiently strict settings.
To Reproduce
Create a component with slot properties and use the property on the element declaring the property (here the error in on the class usage):
<Component n={10}>
<div slot="item" let:zebra class={zebra}>Hello {zebra}</div>
</Component>
Expected behavior
Slot property is in scope and no error is raised.
Screenshots
System (please complete the following information):
- OS: Windows 10 64bit
- IDE: VSCode
- Plugin/Package: Svelte for VSCode
brunnerh
All 3 comments
We need to pull the jsx-transformation on level up, surrounding the tag. So for example in this test it should become
<>{() => { let {thing:{ a }} = __sveltets_instanceOf(Component).$$slot_def['default'];<><Component>
<h1>Hello { a }</h1>
</Component></>}}</>
dummdidumm
on 15 Feb 2021
@dummdidumm Thank you for the fix
I just tested this and if the let:prop is after its usage, you still get a svelte warning instead of a type error:
'prop' is not defined [svelte(missing-declaration)]
Example screenshot:
The generated output works regardless of the order, though. Of course i can just reorder the attributes to get rid of the error as a workaround.
brunnerh
on 21 Feb 2021
This is a Svelte compiler bug, I created https://github.com/sveltejs/svelte/issues/6009 for that.
dummdidumm
on 21 Feb 2021
Related issues
baileyherbert
·
3Comments
matthewmueller
·
5Comments
koddr
·
6Comments
shirakaba
·
4Comments
JoeDailey
·
6Comments