fix: various `svelte:component` migration bugs (#13473)

.changeset/real-timers-complain.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: various `svelte:component` migration bugs

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

@@ -639,21 +639,30 @@ const template = {
 					part.type === 'EachBlock' ||
 					part.type === 'AwaitBlock' ||
 					part.type === 'IfBlock' ||
-					part.type === 'KeyBlock' ||
 					part.type === 'SnippetBlock' ||
 					part.type === 'Component' ||
 					part.type === 'SvelteComponent'
 				) {
+					let position = node.start;
+					if (i !== path.length - 1) {
+						for (let modifier = 1; modifier < path.length - i; modifier++) {
+							const path_part = path[i + modifier];
+							if ('start' in path_part) {
+								position = /** @type {number} */ (path_part.start);
+								break;
+							}
+						}
+					}
 					const indent = state.str.original.substring(
-						state.str.original.lastIndexOf('\n', node.start) + 1,
-						node.start
+						state.str.original.lastIndexOf('\n', position) + 1,
+						position
 					);
 					state.str.prependLeft(
-						node.start,
+						position,
 						`{@const ${expression} = ${current_expression}}\n${indent}`
 					);
 					needs_derived = false;
-					continue;
+					break;
 				}
 			}
 			if (needs_derived) {

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

@@ -122,4 +122,78 @@
 	<svelte:component this={Something} />
 {:catch Error}
 	<svelte:component this={Error} />
-{/await}
+{/await}
+
+<Component>
+	{@const stuff = true}
+	<div>
+		<p>
+			<svelte:component this={stuff && Component} />
+		</p>
+	</div>
+</Component>
+
+<svelte:component this={Component}>
+	{@const stuff = true}
+	<div>
+		<p>
+			<svelte:component this={stuff && Component} />
+		</p>
+	</div>
+</svelte:component>
+
+{#each [] as i}
+	{@const stuff = true}
+	<li>
+		<svelte:component this={stuff && Component} />
+	</li>
+{/each}
+
+{#await stuff}
+	{@const stuff = true}
+	<li>
+		<svelte:component this={stuff && Component} />
+	</li>
+{:then x}
+	{@const stuff = true}
+	<li>
+		<svelte:component this={stuff && Component} />
+	</li>
+{:catch e}
+	{@const stuff = true}
+	<li>
+		<svelte:component this={stuff && Component} />
+	</li>
+{/await}
+
+{#await stuff then x}
+	{@const stuff = true}
+	<li>
+		<svelte:component this={stuff && Component} />
+	</li>
+{:catch e}
+	{@const stuff = true}
+	<li>
+		<svelte:component this={stuff && Component} />
+	</li>
+{/await}
+
+{#if true}
+	{@const stuff = true}
+	<li>
+		<svelte:component this={stuff && Component} />
+	</li>
+{/if}
+
+{#snippet test()}
+	{@const stuff = true}
+	<li>
+		<svelte:component this={stuff && Component} />
+	</li>
+{/snippet}
+
+<Component>
+	<Nested>
+		<svelte:component this={stuff && Component} />
+	</Nested>
+</Component>

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

@@ -22,22 +22,22 @@
 </Component>
 
 <Component>
+	{@const SvelteComponent_2 = stuff}
 	<div slot="x" let:comp={stuff}>
-		{@const SvelteComponent_2 = stuff}
 		<SvelteComponent_2 />
 	</div>
 </Component>
 
 <Component>
+	{@const SvelteComponent_3 = stuff}
 	<svelte:fragment slot="x" let:comp={stuff}>
-		{@const SvelteComponent_3 = stuff}
 		<SvelteComponent_3 />
 	</svelte:fragment>
 </Component>
 
 <Component>
+	{@const SvelteComponent_4 = stuff}
 	<svelte:element this={"div"} slot="x" let:comp={stuff}>
-		{@const SvelteComponent_4 = stuff}
 		<SvelteComponent_4 />
 	</svelte:element>
 </Component>
@@ -57,22 +57,22 @@
 </Component>
 
 <Component>
+	{@const SvelteComponent_7 = stuff}
 	<div slot="x" let:comp={stuff}>
-		{@const SvelteComponent_7 = stuff}
 		<SvelteComponent_7 />
 	</div>
 </Component>
 
 <Component>
+	{@const SvelteComponent_8 = stuff}
 	<svelte:fragment slot="x" let:comp={stuff}>
-		{@const SvelteComponent_8 = stuff}
 		<SvelteComponent_8 />
 	</svelte:fragment>
 </Component>
 
 <Component>
+	{@const SvelteComponent_9 = stuff}
 	<svelte:element this={"div"} slot="x" let:comp={stuff}>
-		{@const SvelteComponent_9 = stuff}
 		<SvelteComponent_9 />
 	</svelte:element>
 </Component>
@@ -140,4 +140,89 @@
 	<Something />
 {:catch Error}
 	<Error />
-{/await}
+{/await}
+
+<Component>
+	{@const stuff = true}
+	{@const SvelteComponent_18 = stuff && Component}
+	<div>
+		<p>
+			<SvelteComponent_18 />
+		</p>
+	</div>
+</Component>
+
+<Component>
+	{@const stuff = true}
+	{@const SvelteComponent_19 = stuff && Component}
+	<div>
+		<p>
+			<SvelteComponent_19 />
+		</p>
+	</div>
+</Component>
+
+{#each [] as i}
+	{@const stuff = true}
+	{@const SvelteComponent_20 = stuff && Component}
+	<li>
+		<SvelteComponent_20 />
+	</li>
+{/each}
+
+{#await stuff}
+	{@const stuff = true}
+	{@const SvelteComponent_21 = stuff && Component}
+	<li>
+		<SvelteComponent_21 />
+	</li>
+{:then x}
+	{@const stuff = true}
+	{@const SvelteComponent_22 = stuff && Component}
+	<li>
+		<SvelteComponent_22 />
+	</li>
+{:catch e}
+	{@const stuff = true}
+	{@const SvelteComponent_23 = stuff && Component}
+	<li>
+		<SvelteComponent_23 />
+	</li>
+{/await}
+
+{#await stuff then x}
+	{@const stuff = true}
+	{@const SvelteComponent_24 = stuff && Component}
+	<li>
+		<SvelteComponent_24 />
+	</li>
+{:catch e}
+	{@const stuff = true}
+	{@const SvelteComponent_25 = stuff && Component}
+	<li>
+		<SvelteComponent_25 />
+	</li>
+{/await}
+
+{#if true}
+	{@const stuff = true}
+	{@const SvelteComponent_26 = stuff && Component}
+	<li>
+		<SvelteComponent_26 />
+	</li>
+{/if}
+
+{#snippet test()}
+	{@const stuff = true}
+	{@const SvelteComponent_27 = stuff && Component}
+	<li>
+		<SvelteComponent_27 />
+	</li>
+{/snippet}
+
+<Component>
+	<Nested>
+		{@const SvelteComponent_28 = stuff && Component}
+		<SvelteComponent_28 />
+	</Nested>
+</Component>