Skip to content

Commit dfe0138

Browse files
paoloricciutipaoloricciuti
authored
fix: various svelte:component migration bugs (#13473)
1 parent a51b3df commit dfe0138

File tree

4 files changed

+186
-13
lines changed

4 files changed

+186
-13
lines changed

‎.changeset/real-timers-complain.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: various `svelte:component` migration bugs

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

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -639,21 +639,30 @@ const template = {
639639
part.type === 'EachBlock' ||
640640
part.type === 'AwaitBlock' ||
641641
part.type === 'IfBlock' ||
642-
part.type === 'KeyBlock' ||
643642
part.type === 'SnippetBlock' ||
644643
part.type === 'Component' ||
645644
part.type === 'SvelteComponent'
646645
) {
646+
let position = node.start;
647+
if (i !== path.length - 1) {
648+
for (let modifier = 1; modifier < path.length - i; modifier++) {
649+
const path_part = path[i + modifier];
650+
if ('start' in path_part) {
651+
position = /** @type {number} */ (path_part.start);
652+
break;
653+
}
654+
}
655+
}
647656
const indent = state.str.original.substring(
648-
state.str.original.lastIndexOf('\n', node.start) + 1,
649-
node.start
657+
state.str.original.lastIndexOf('\n', position) + 1,
658+
position
650659
);
651660
state.str.prependLeft(
652-
node.start,
661+
position,
653662
`{@const ${expression} = ${current_expression}}\n${indent}`
654663
);
655664
needs_derived = false;
656-
continue;
665+
break;
657666
}
658667
}
659668
if (needs_derived) {

‎packages/svelte/tests/migrate/samples/svelte-component/input.svelte

Lines changed: 75 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,4 +122,78 @@
122122
<svelte:component this={Something} />
123123
{:catch Error}
124124
<svelte:component this={Error} />
125-
{/await}
125+
{/await}
126+
127+
<Component>
128+
{@const stuff = true}
129+
<div>
130+
<p>
131+
<svelte:component this={stuff && Component} />
132+
</p>
133+
</div>
134+
</Component>
135+
136+
<svelte:component this={Component}>
137+
{@const stuff = true}
138+
<div>
139+
<p>
140+
<svelte:component this={stuff && Component} />
141+
</p>
142+
</div>
143+
</svelte:component>
144+
145+
{#each [] as i}
146+
{@const stuff = true}
147+
<li>
148+
<svelte:component this={stuff && Component} />
149+
</li>
150+
{/each}
151+
152+
{#await stuff}
153+
{@const stuff = true}
154+
<li>
155+
<svelte:component this={stuff && Component} />
156+
</li>
157+
{:then x}
158+
{@const stuff = true}
159+
<li>
160+
<svelte:component this={stuff && Component} />
161+
</li>
162+
{:catch e}
163+
{@const stuff = true}
164+
<li>
165+
<svelte:component this={stuff && Component} />
166+
</li>
167+
{/await}
168+
169+
{#await stuff then x}
170+
{@const stuff = true}
171+
<li>
172+
<svelte:component this={stuff && Component} />
173+
</li>
174+
{:catch e}
175+
{@const stuff = true}
176+
<li>
177+
<svelte:component this={stuff && Component} />
178+
</li>
179+
{/await}
180+
181+
{#if true}
182+
{@const stuff = true}
183+
<li>
184+
<svelte:component this={stuff && Component} />
185+
</li>
186+
{/if}
187+
188+
{#snippet test()}
189+
{@const stuff = true}
190+
<li>
191+
<svelte:component this={stuff && Component} />
192+
</li>
193+
{/snippet}
194+
195+
<Component>
196+
<Nested>
197+
<svelte:component this={stuff && Component} />
198+
</Nested>
199+
</Component>

‎packages/svelte/tests/migrate/samples/svelte-component/output.svelte

Lines changed: 92 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,22 +22,22 @@
2222
</Component>
2323

2424
<Component>
25+
{@const SvelteComponent_2 = stuff}
2526
<div slot="x" let:comp={stuff}>
26-
{@const SvelteComponent_2 = stuff}
2727
<SvelteComponent_2 />
2828
</div>
2929
</Component>
3030

3131
<Component>
32+
{@const SvelteComponent_3 = stuff}
3233
<svelte:fragment slot="x" let:comp={stuff}>
33-
{@const SvelteComponent_3 = stuff}
3434
<SvelteComponent_3 />
3535
</svelte:fragment>
3636
</Component>
3737

3838
<Component>
39+
{@const SvelteComponent_4 = stuff}
3940
<svelte:element this={"div"} slot="x" let:comp={stuff}>
40-
{@const SvelteComponent_4 = stuff}
4141
<SvelteComponent_4 />
4242
</svelte:element>
4343
</Component>
@@ -57,22 +57,22 @@
5757
</Component>
5858

5959
<Component>
60+
{@const SvelteComponent_7 = stuff}
6061
<div slot="x" let:comp={stuff}>
61-
{@const SvelteComponent_7 = stuff}
6262
<SvelteComponent_7 />
6363
</div>
6464
</Component>
6565

6666
<Component>
67+
{@const SvelteComponent_8 = stuff}
6768
<svelte:fragment slot="x" let:comp={stuff}>
68-
{@const SvelteComponent_8 = stuff}
6969
<SvelteComponent_8 />
7070
</svelte:fragment>
7171
</Component>
7272

7373
<Component>
74+
{@const SvelteComponent_9 = stuff}
7475
<svelte:element this={"div"} slot="x" let:comp={stuff}>
75-
{@const SvelteComponent_9 = stuff}
7676
<SvelteComponent_9 />
7777
</svelte:element>
7878
</Component>
@@ -140,4 +140,89 @@
140140
<Something />
141141
{:catch Error}
142142
<Error />
143-
{/await}
143+
{/await}
144+
145+
<Component>
146+
{@const stuff = true}
147+
{@const SvelteComponent_18 = stuff && Component}
148+
<div>
149+
<p>
150+
<SvelteComponent_18 />
151+
</p>
152+
</div>
153+
</Component>
154+
155+
<Component>
156+
{@const stuff = true}
157+
{@const SvelteComponent_19 = stuff && Component}
158+
<div>
159+
<p>
160+
<SvelteComponent_19 />
161+
</p>
162+
</div>
163+
</Component>
164+
165+
{#each [] as i}
166+
{@const stuff = true}
167+
{@const SvelteComponent_20 = stuff && Component}
168+
<li>
169+
<SvelteComponent_20 />
170+
</li>
171+
{/each}
172+
173+
{#await stuff}
174+
{@const stuff = true}
175+
{@const SvelteComponent_21 = stuff && Component}
176+
<li>
177+
<SvelteComponent_21 />
178+
</li>
179+
{:then x}
180+
{@const stuff = true}
181+
{@const SvelteComponent_22 = stuff && Component}
182+
<li>
183+
<SvelteComponent_22 />
184+
</li>
185+
{:catch e}
186+
{@const stuff = true}
187+
{@const SvelteComponent_23 = stuff && Component}
188+
<li>
189+
<SvelteComponent_23 />
190+
</li>
191+
{/await}
192+
193+
{#await stuff then x}
194+
{@const stuff = true}
195+
{@const SvelteComponent_24 = stuff && Component}
196+
<li>
197+
<SvelteComponent_24 />
198+
</li>
199+
{:catch e}
200+
{@const stuff = true}
201+
{@const SvelteComponent_25 = stuff && Component}
202+
<li>
203+
<SvelteComponent_25 />
204+
</li>
205+
{/await}
206+
207+
{#if true}
208+
{@const stuff = true}
209+
{@const SvelteComponent_26 = stuff && Component}
210+
<li>
211+
<SvelteComponent_26 />
212+
</li>
213+
{/if}
214+
215+
{#snippet test()}
216+
{@const stuff = true}
217+
{@const SvelteComponent_27 = stuff && Component}
218+
<li>
219+
<SvelteComponent_27 />
220+
</li>
221+
{/snippet}
222+
223+
<Component>
224+
<Nested>
225+
{@const SvelteComponent_28 = stuff && Component}
226+
<SvelteComponent_28 />
227+
</Nested>
228+
</Component>

0 commit comments

Comments
 (0)