From 6894a6f2cfafaa2f6567f88b49b5b425257c8b03 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Sat, 17 Aug 2024 12:45:47 +0200
Subject: [PATCH 1/2] fix: use dynamic components in `root.svelte` instead of
 `svelte:component` for svelte 5

---
 .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..f40b38a788b2 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 -->
+		<Piramid_${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 Piramid_${l} = constructors[${l}]}
+						<!-- svelte-ignore binding_property_non_reactive -->
+						<Piramid_${l} bind:this={components[${l}]} data={data_${l}} {form}>
+							${pyramid}
+						</Piramid_${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 Piramid_${l} = constructors[${l}]}
+					<!-- svelte-ignore binding_property_non_reactive -->
+					<Piramid_${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 Piramid_${max_depth}=$derived(constructors[${max_depth}])` : ''}
 			</script>
 
 			${pyramid}

From 9cbeff49f224bcd853c508c58a5fdfe43dc6e54e Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Sun, 18 Aug 2024 22:13:49 +0200
Subject: [PATCH 2/2] chore: rename Piramid to Pyramid

---
 packages/kit/src/core/sync/write_root.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/kit/src/core/sync/write_root.js b/packages/kit/src/core/sync/write_root.js
index f40b38a788b2..4440d53b0964 100644
--- a/packages/kit/src/core/sync/write_root.js
+++ b/packages/kit/src/core/sync/write_root.js
@@ -25,7 +25,7 @@ export function write_root(manifest_data, output) {
 	${
 		isSvelte5Plus()
 			? `<!-- svelte-ignore binding_property_non_reactive -->
-		<Piramid_${l} bind:this={components[${l}]} data={data_${l}} {form} />`
+		<Pyramid_${l} bind:this={components[${l}]} data={data_${l}} {form} />`
 			: `<svelte:component this={constructors[${l}]} bind:this={components[${l}]} data={data_${l}} {form} />`
 	}`;
 
@@ -34,11 +34,11 @@ export function write_root(manifest_data, output) {
 			{#if constructors[${l + 1}]}
 				${
 					isSvelte5Plus()
-						? dedent`{@const Piramid_${l} = constructors[${l}]}
+						? dedent`{@const Pyramid_${l} = constructors[${l}]}
 						<!-- svelte-ignore binding_property_non_reactive -->
-						<Piramid_${l} bind:this={components[${l}]} data={data_${l}} {form}>
+						<Pyramid_${l} bind:this={components[${l}]} data={data_${l}} {form}>
 							${pyramid}
-						</Piramid_${l}>`
+						</Pyramid_${l}>`
 						: dedent`<svelte:component this={constructors[${l}]} bind:this={components[${l}]} data={data_${l}}>
 					${pyramid}
 				</svelte:component>`
@@ -48,9 +48,9 @@ export function write_root(manifest_data, output) {
 				${
 					isSvelte5Plus()
 						? dedent`
-					{@const Piramid_${l} = constructors[${l}]}
+					{@const Pyramid_${l} = constructors[${l}]}
 					<!-- svelte-ignore binding_property_non_reactive -->
-					<Piramid_${l} bind:this={components[${l}]} data={data_${l}} {form} />
+					<Pyramid_${l} bind:this={components[${l}]} data={data_${l}} {form} />
 					`
 						: dedent`<svelte:component this={constructors[${l}]} bind:this={components[${l}]} data={data_${l}} {form} />`
 				}
@@ -131,7 +131,7 @@ export function write_root(manifest_data, output) {
 					return unsubscribe;
 				});
 
-				${isSvelte5Plus() ? `const Piramid_${max_depth}=$derived(constructors[${max_depth}])` : ''}
+				${isSvelte5Plus() ? `const Pyramid_${max_depth}=$derived(constructors[${max_depth}])` : ''}
 			</script>
 
 			${pyramid}