fix: ensure migrate correctly handles named slots

pull/13676/head
Dominic Gannaway 2 years ago
parent c9d85c2d52
commit 31d6ba9a77

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: ensure migrate correctly handles named slots

@ -996,6 +996,10 @@ const template = {
if (attr.type === 'SpreadAttribute') {
slot_props += `...${state.str.original.substring(/** @type {number} */ (attr.expression.start), attr.expression.end)}, `;
} else if (attr.type === 'Attribute') {
if (attr.name === 'slot') {
continue;
}
if (attr.name === 'name') {
slot_name = /** @type {any} */ (attr.value)[0].data;
} else {
@ -1189,18 +1193,17 @@ function migrate_slot_usage(node, path, state) {
);
}
} else {
const prepend_string = `{#snippet ${snippet_name}(${props})}\n${state.indent.repeat(path.length - 2)}`;
// Named slot or `svelte:fragment`: wrap element itself in a snippet
state.str.prependLeft(
node.start,
`{#snippet ${snippet_name}(${props})}\n${state.indent.repeat(path.length - 2)}`
);
state.str.prependLeft(node.start, prepend_string);
state.str.indent(state.indent, {
exclude: [
[0, node.start],
[node.end, state.str.original.length]
]
});
state.str.appendLeft(node.end, `\n${state.indent.repeat(path.length - 2)}{/snippet}`);
const append_string = `\n${state.indent.repeat(path.length - 2)}{/snippet}`;
state.str.appendLeft(node.end, append_string);
}
}

@ -0,0 +1,7 @@
<script lang="ts">
import Component from './Component.svelte';
</script>
<Component>
<slot slot="msg"></slot>
</Component>

@ -0,0 +1,13 @@
<script lang="ts">
import Component from './Component.svelte';
interface Props {
children?: import('svelte').Snippet;
}
let { children }: Props = $props();
</script>
<Component>
{#snippet msg()}
{@render children?.()}
</Component>
Loading…
Cancel
Save