fix: use dynamic components in root.svelte instead of `svelte:compo…

…nent` for svelte 5 (#12584) Closes #12573
sveltejs · Aug 19, 2024 · 726b89f · 726b89f
1 parent 715ee96
commit 726b89f
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 8 deletions.
diff --git a/.changeset/cyan-hounds-refuse.md b/.changeset/cyan-hounds-refuse.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: use dynamic components in `root.svelte` instead of `svelte:component` for svelte 5
diff --git a/packages/kit/src/core/sync/write_root.js b/packages/kit/src/core/sync/write_root.js
@@ -22,20 +22,39 @@ export function write_root(manifest_data, output) {
 	let l = max_depth;
 
 	let pyramid = dedent`
-	${isSvelte5Plus() ? '<!-- svelte-ignore binding_property_non_reactive -->' : ''}
-	<svelte:component this={constructors[${l}]} bind:this={components[${l}]} data={data_${l}} {form} />
-	`;
+	${
+		isSvelte5Plus()
+			? `<!-- svelte-ignore binding_property_non_reactive -->
+		<Pyramid_${l} bind:this={components[${l}]} data={data_${l}} {form} />`
+			: `<svelte:component this={constructors[${l}]} bind:this={components[${l}]} data={data_${l}} {form} />`
+	}`;
 
 	while (l--) {
 		pyramid = dedent`
 			{#if constructors[${l + 1}]}
-				${isSvelte5Plus() ? '<!-- svelte-ignore binding_property_non_reactive -->' : ''}
-				<svelte:component this={constructors[${l}]} bind:this={components[${l}]} data={data_${l}}>
+				${
+					isSvelte5Plus()
+						? dedent`{@const Pyramid_${l} = constructors[${l}]}
+						<!-- svelte-ignore binding_property_non_reactive -->
+						<Pyramid_${l} bind:this={components[${l}]} data={data_${l}} {form}>
+							${pyramid}
+						</Pyramid_${l}>`
+						: dedent`<svelte:component this={constructors[${l}]} bind:this={components[${l}]} data={data_${l}}>
 					${pyramid}
-				</svelte:component>
+				</svelte:component>`
+				}
+				
 			{:else}
-				${isSvelte5Plus() ? '<!-- svelte-ignore binding_property_non_reactive -->' : ''}
-				<svelte:component this={constructors[${l}]} bind:this={components[${l}]} data={data_${l}} {form} />
+				${
+					isSvelte5Plus()
+						? dedent`
+					{@const Pyramid_${l} = constructors[${l}]}
+					<!-- svelte-ignore binding_property_non_reactive -->
+					<Pyramid_${l} bind:this={components[${l}]} data={data_${l}} {form} />
+					`
+						: dedent`<svelte:component this={constructors[${l}]} bind:this={components[${l}]} data={data_${l}} {form} />`
+				}
+				
 			{/if}
 		`;
 	}
@@ -111,6 +130,8 @@ export function write_root(manifest_data, output) {
 					mounted = true;
 					return unsubscribe;
 				});
+
+				${isSvelte5Plus() ? `const Pyramid_${max_depth}=$derived(constructors[${max_depth}])` : ''}
 			</script>
 
 			${pyramid}