From 726b89f6163895c428bd025cfd70547b737559ba Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Mon, 19 Aug 2024 12:02:19 +0200
Subject: [PATCH] fix: use dynamic components in `root.svelte` instead of
 `svelte:component` for svelte 5 (#12584)

Closes #12573
---
 .changeset/cyan-hounds-refuse.md         |  5 ++++
 packages/kit/src/core/sync/write_root.js | 37 +++++++++++++++++++-----
 2 files changed, 34 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/cyan-hounds-refuse.md

diff --git a/.changeset/cyan-hounds-refuse.md b/.changeset/cyan-hounds-refuse.md
new file mode 100644
index 000000000000..39d3805dd218
--- /dev/null
+++ 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
index 284f4a61dcdc..4440d53b0964 100644
--- 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}