Skip to content

Commit f0c2d4c

Browse files
fix: account for shadowing children slot during migration (#14224)
Fixes #14171
1 parent 31e6bbb commit f0c2d4c

File tree

4 files changed

+47
-1
lines changed

4 files changed

+47
-1
lines changed

.changeset/lazy-chefs-float.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'svelte': patch
3+
---
4+
5+
fix: account for shadowing children slot during migration

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

+15
Original file line numberDiff line numberDiff line change
@@ -1300,6 +1300,21 @@ const template = {
13001300
existing_prop.needs_refine_type = false;
13011301
}
13021302

1303+
if (
1304+
slot_name === 'default' &&
1305+
path.some(
1306+
(parent) =>
1307+
(parent.type === 'SvelteComponent' ||
1308+
parent.type === 'Component' ||
1309+
parent.type === 'RegularElement' ||
1310+
parent.type === 'SvelteElement' ||
1311+
parent.type === 'SvelteFragment') &&
1312+
parent.attributes.some((attr) => (attr.type = 'LetDirective'))
1313+
)
1314+
) {
1315+
aliased_slot_name = `${name}_render`;
1316+
state.derived_conflicting_slots.set(aliased_slot_name, name);
1317+
}
13031318
name = aliased_slot_name ?? name;
13041319

13051320
if (node.fragment.nodes.length > 0) {

packages/svelte/tests/migrate/samples/shadowed-forwarded-slot/input.svelte

+10
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,14 @@
1212
</div>
1313
</MyComponent>
1414
</div>
15+
</MyInput>
16+
17+
<MyInput let:args>
18+
<slot/>
19+
</MyInput>
20+
21+
<MyInput>
22+
<div let:args>
23+
<slot/>
24+
</div>
1525
</MyInput>

packages/svelte/tests/migrate/samples/shadowed-forwarded-slot/output.svelte

+17-1
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@
22
/**
33
* @typedef {Object} Props
44
* @property {import('svelte').Snippet} [label]
5+
* @property {import('svelte').Snippet} [children]
56
*/
67
78
/** @type {Props} */
8-
let { label } = $props();
9+
let { label, children } = $props();
910
const label_render = $derived(label);
11+
const children_render = $derived(children);
1012
1113
</script>
1214

@@ -30,4 +32,18 @@
3032
</MyComponent>
3133
</div>
3234
{/snippet}
35+
</MyInput>
36+
37+
<MyInput >
38+
{#snippet children({ args })}
39+
{@render children_render?.()}
40+
{/snippet}
41+
</MyInput>
42+
43+
<MyInput>
44+
<div >
45+
{#snippet children({ args })}
46+
{@render children_render?.()}
47+
{/snippet}
48+
</div>
3349
</MyInput>

0 commit comments

Comments
 (0)