Skip to content

Commit 61391c8

Browse files
authored
fix: ensure migrate correctly handles named slots (#13676)
* fix: ensure migrate correctly handles named slots * tweak * fix
1 parent c9d85c2 commit 61391c8

File tree

4 files changed

+37
-1
lines changed

4 files changed

+37
-1
lines changed

.changeset/silver-beans-hear.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'svelte': patch
3+
---
4+
5+
fix: ensure migrate correctly handles named slots

packages/svelte/src/compiler/migrate/index.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -996,6 +996,10 @@ const template = {
996996
if (attr.type === 'SpreadAttribute') {
997997
slot_props += `...${state.str.original.substring(/** @type {number} */ (attr.expression.start), attr.expression.end)}, `;
998998
} else if (attr.type === 'Attribute') {
999+
if (attr.name === 'slot') {
1000+
continue;
1001+
}
1002+
9991003
if (attr.name === 'name') {
10001004
slot_name = /** @type {any} */ (attr.value)[0].data;
10011005
} else {
@@ -1200,7 +1204,13 @@ function migrate_slot_usage(node, path, state) {
12001204
[node.end, state.str.original.length]
12011205
]
12021206
});
1203-
state.str.appendLeft(node.end, `\n${state.indent.repeat(path.length - 2)}{/snippet}`);
1207+
const str = `\n${state.indent.repeat(path.length - 2)}{/snippet}`;
1208+
1209+
if (node.type === 'SlotElement') {
1210+
state.str.appendRight(node.end, str);
1211+
} else {
1212+
state.str.appendLeft(node.end, str);
1213+
}
12041214
}
12051215
}
12061216

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script lang="ts">
2+
import Component from './Component.svelte';
3+
</script>
4+
5+
<Component>
6+
<slot slot="msg"></slot>
7+
</Component>
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script lang="ts">
2+
import Component from './Component.svelte';
3+
interface Props {
4+
children?: import('svelte').Snippet;
5+
}
6+
7+
let { children }: Props = $props();
8+
</script>
9+
10+
<Component>
11+
{#snippet msg()}
12+
{@render children?.()}
13+
{/snippet}
14+
</Component>

0 commit comments

Comments
 (0)