Migrate: svelte fragments with dashes create invalid code

[paoloricciuti]

Describe the bug

<Stuff>
 <svelte:fragment slot="sticky-bottom">
	 cool
 </svelte:fragment>
</Stuff>

this is migrated to

<Stuff>
 {#snippet sticky-bottom()}
	
		 cool
	 
	{/snippet}
</Stuff>

which is invalid code.

We should either set a TODO or migrate the snippet to be outside and passed as a prop.

Reproduction

repl

Logs

No response

System Info

repl

Severity

annoyance

[trueadm]

I think it can add a TODO and maybe rename it to sticky_bottom instead? Creating it outside might get complicated because of scoping, e.g. if it's created in another logical block.

[paoloricciuti]

I think it can add a TODO and maybe rename it to sticky_bottom instead? Creating it outside might get complicated because of scoping, e.g. if it's created in another logical block.

The problem is also that is the component inside expects a slot it will not work even if it's named correctly. So if it's a component that we migrate we are actually migrating to sticky_bottom (which we should fix too probably). But if we pass a snippet as prop (like we should do here) it will not be added to the slots array.

This is tricky

[trueadm]

I was thinking:

<script>
	import Stuff from './Stuff.svelte'
</script>

<Stuff sticky-bottom={sticky_bottom}>
	{#snippet sticky_bottom()}
		 cool
	{/snippet}
</Stuff>

However that doesn't quite work, because of this line:

https://github.com/sveltejs/svelte/blob/main/packages/svelte/src/internal/client/dom/blocks/slot.js#L15

It explicitly looks in $$slots, but maybe we could also check regular props if it doesn't find it in $$slots and the above would work.

[paoloricciuti]

I was thinking:

<script>
	import Stuff from './Stuff.svelte'
</script>

<Stuff sticky-bottom={sticky_bottom}>
	{#snippet sticky_bottom()}
		 cool
	{/snippet}
</Stuff>

However that doesn't quite work, because of this line:

https://github.com/sveltejs/svelte/blob/main/packages/svelte/src/internal/client/dom/blocks/slot.js#L15

It explicitly looks in $$slots, but maybe we could also check regular props if it doesn't find it in $$slots and the above would work.

Yeah that's what I was thinking too