Slot prop not found on slot element itself

[brunnerh]

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>

[REPL]

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

[dummdidumm]

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></>}}</>

[brunnerh]

@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.

[dummdidumm]

This is a Svelte compiler bug, I created sveltejs/svelte#6009 for that.