diff --git a/.changeset/silver-beans-hear.md b/.changeset/silver-beans-hear.md new file mode 100644 index 0000000000..19ec07a6e3 --- /dev/null +++ b/.changeset/silver-beans-hear.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: ensure migrate correctly handles named slots diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js index 57091ba1a1..a4a2fb488e 100644 --- a/packages/svelte/src/compiler/migrate/index.js +++ b/packages/svelte/src/compiler/migrate/index.js @@ -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 { @@ -1200,7 +1204,13 @@ function migrate_slot_usage(node, path, state) { [node.end, state.str.original.length] ] }); - state.str.appendLeft(node.end, `\n${state.indent.repeat(path.length - 2)}{/snippet}`); + const str = `\n${state.indent.repeat(path.length - 2)}{/snippet}`; + + if (node.type === 'SlotElement') { + state.str.appendRight(node.end, str); + } else { + state.str.appendLeft(node.end, str); + } } } diff --git a/packages/svelte/tests/migrate/samples/named-slots/input.svelte b/packages/svelte/tests/migrate/samples/named-slots/input.svelte new file mode 100644 index 0000000000..1996e08afd --- /dev/null +++ b/packages/svelte/tests/migrate/samples/named-slots/input.svelte @@ -0,0 +1,7 @@ + + + + + diff --git a/packages/svelte/tests/migrate/samples/named-slots/output.svelte b/packages/svelte/tests/migrate/samples/named-slots/output.svelte new file mode 100644 index 0000000000..bb5ad39aa3 --- /dev/null +++ b/packages/svelte/tests/migrate/samples/named-slots/output.svelte @@ -0,0 +1,14 @@ + + + + {#snippet msg()} + {@render children?.()} + {/snippet} + \ No newline at end of file