Skip to content

Commit ab9eeb4

Browse files
paoloricciutipaoloricciuti
authored
fix: migrated snippet shadowing prop and let directive removal (#13679)
1 parent 894b1c3 commit ab9eeb4

File tree

6 files changed

+154
-1
lines changed

6 files changed

+154
-1
lines changed

‎.changeset/ten-vans-divide.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: migrated snippet shadowing prop and let directive removal

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

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1097,6 +1097,10 @@ function migrate_slot_usage(node, path, state) {
10971097
let snippet_name = 'children';
10981098
let snippet_props = [];
10991099

1100+
// if we stop the transform because the name is not correct we don't want to
1101+
// remove the let directive and they could come before the name
1102+
let removal_queue = [];
1103+
11001104
for (let attribute of node.attributes) {
11011105
if (
11021106
attribute.type === 'Attribute' &&
@@ -1112,6 +1116,23 @@ function migrate_slot_usage(node, path, state) {
11121116
);
11131117
return;
11141118
}
1119+
if (parent?.type === 'Component' || parent?.type === 'SvelteComponent') {
1120+
for (let attribute of parent.attributes) {
1121+
if (attribute.type === 'Attribute' || attribute.type === 'BindDirective') {
1122+
if (attribute.name === snippet_name) {
1123+
state.str.appendLeft(
1124+
node.start,
1125+
`<!-- @migration-task: migrate this slot by hand, \`${snippet_name}\` would shadow a prop on the parent component -->\n${state.indent}`
1126+
);
1127+
return;
1128+
}
1129+
}
1130+
}
1131+
}
1132+
// flush the queue after we found the name
1133+
for (let remove_let of removal_queue) {
1134+
remove_let();
1135+
}
11151136
state.str.remove(attribute.start, attribute.end);
11161137
}
11171138
if (attribute.type === 'LetDirective') {
@@ -1121,7 +1142,14 @@ function migrate_slot_usage(node, path, state) {
11211142
? `: ${state.str.original.substring(/** @type {number} */ (attribute.expression.start), /** @type {number} */ (attribute.expression.end))}`
11221143
: '')
11231144
);
1124-
state.str.remove(attribute.start, attribute.end);
1145+
// we just add to the queue to remove them after we found if we need to migrate or we bail
1146+
removal_queue.push(() => state.str.remove(attribute.start, attribute.end));
1147+
}
1148+
}
1149+
1150+
if (removal_queue.length > 0) {
1151+
for (let remove_let of removal_queue) {
1152+
remove_let();
11251153
}
11261154
}
11271155

‎packages/svelte/tests/migrate/samples/slot-non-identifier/input.svelte

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,31 @@
3636
<svelte:fragment slot="stuff">
3737
cool
3838
</svelte:fragment>
39+
</Comp>
40+
41+
42+
<!-- don't remove the let directive if we don't migrate -->
43+
44+
<Comp>
45+
<div let:should_stay slot="cool:stuff">
46+
cool
47+
</div>
48+
</Comp>
49+
50+
<Comp>
51+
<div let:should_stay slot="cool stuff">
52+
cool
53+
</div>
54+
</Comp>
55+
56+
<Comp>
57+
<svelte:fragment let:should_stay slot="cool:stuff">
58+
cool
59+
</svelte:fragment>
60+
</Comp>
61+
62+
<Comp>
63+
<svelte:fragment let:should_stay slot="cool stuff">
64+
cool
65+
</svelte:fragment>
3966
</Comp>

‎packages/svelte/tests/migrate/samples/slot-non-identifier/output.svelte

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,4 +44,35 @@
4444
cool
4545

4646
{/snippet}
47+
</Comp>
48+
49+
50+
<!-- don't remove the let directive if we don't migrate -->
51+
52+
<Comp>
53+
<!-- @migration-task: migrate this slot by hand, `cool:stuff` is an invalid identifier -->
54+
<div let:should_stay slot="cool:stuff">
55+
cool
56+
</div>
57+
</Comp>
58+
59+
<Comp>
60+
<!-- @migration-task: migrate this slot by hand, `cool stuff` is an invalid identifier -->
61+
<div let:should_stay slot="cool stuff">
62+
cool
63+
</div>
64+
</Comp>
65+
66+
<Comp>
67+
<!-- @migration-task: migrate this slot by hand, `cool:stuff` is an invalid identifier -->
68+
<svelte:fragment let:should_stay slot="cool:stuff">
69+
cool
70+
</svelte:fragment>
71+
</Comp>
72+
73+
<Comp>
74+
<!-- @migration-task: migrate this slot by hand, `cool stuff` is an invalid identifier -->
75+
<svelte:fragment let:should_stay slot="cool stuff">
76+
cool
77+
</svelte:fragment>
4778
</Comp>

‎packages/svelte/tests/migrate/samples/slot-shadow-props/input.svelte

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<script>
2+
import Comp from "./Component.svelte";
3+
</script>
4+
5+
<Comp stuff="cool">
6+
<div slot="stuff">
7+
cool
8+
</div>
9+
</Comp>
10+
11+
<Comp stuff="cool">
12+
<svelte:fragment slot="stuff">
13+
cool
14+
</svelte:fragment>
15+
</Comp>
16+
17+
<!-- don't remove the let if we are not migrating -->
18+
19+
<Comp stuff="cool">
20+
<div let:should_stay slot="stuff">
21+
cool
22+
</div>
23+
</Comp>
24+
25+
<Comp stuff="cool">
26+
<svelte:fragment let:should_stay slot="stuff">
27+
cool
28+
</svelte:fragment>
29+
</Comp>

‎packages/svelte/tests/migrate/samples/slot-shadow-props/output.svelte

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<script>
2+
import Comp from "./Component.svelte";
3+
</script>
4+
5+
<Comp stuff="cool">
6+
<!-- @migration-task: migrate this slot by hand, `stuff` would shadow a prop on the parent component -->
7+
<div slot="stuff">
8+
cool
9+
</div>
10+
</Comp>
11+
12+
<Comp stuff="cool">
13+
<!-- @migration-task: migrate this slot by hand, `stuff` would shadow a prop on the parent component -->
14+
<svelte:fragment slot="stuff">
15+
cool
16+
</svelte:fragment>
17+
</Comp>
18+
19+
<!-- don't remove the let if we are not migrating -->
20+
21+
<Comp stuff="cool">
22+
<!-- @migration-task: migrate this slot by hand, `stuff` would shadow a prop on the parent component -->
23+
<div let:should_stay slot="stuff">
24+
cool
25+
</div>
26+
</Comp>
27+
28+
<Comp stuff="cool">
29+
<!-- @migration-task: migrate this slot by hand, `stuff` would shadow a prop on the parent component -->
30+
<svelte:fragment let:should_stay slot="stuff">
31+
cool
32+
</svelte:fragment>
33+
</Comp>

0 commit comments

Comments
 (0)