From 0554fecf3a6a53f8f38cacc3702b01eeb405a40f Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 14 Nov 2023 10:31:49 +0100
Subject: [PATCH] fix: use runes in when detecting Svelte 5 (#11028)

- fixes #11027 (not the underlying issue, but the problem within SvelteKit)
- fixes #11022
---
 .changeset/beige-ties-allow.md           |  5 +++
 packages/kit/src/core/sync/write_root.js | 55 ++++++++++++++++++------
 2 files changed, 47 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/beige-ties-allow.md

diff --git a/.changeset/beige-ties-allow.md b/.changeset/beige-ties-allow.md
new file mode 100644
index 000000000000..eaacb90917fb
--- /dev/null
+++ b/.changeset/beige-ties-allow.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: use runes in generated root when detecting Svelte 5
diff --git a/packages/kit/src/core/sync/write_root.js b/packages/kit/src/core/sync/write_root.js
index a332664d95c1..9115d74c1715 100644
--- a/packages/kit/src/core/sync/write_root.js
+++ b/packages/kit/src/core/sync/write_root.js
@@ -40,28 +40,57 @@ export function write_root(manifest_data, output) {
 		dedent`
 			<!-- This file is generated by @sveltejs/kit — do not edit it! -->
 			<script>
-				import { setContext, afterUpdate, onMount, tick } from 'svelte';
+				import { setContext, ${isSvelte5Plus() ? '' : 'afterUpdate, '}onMount, tick } from 'svelte';
 				import { browser } from '$app/environment';
 
 				// stores
-				export let stores;
-				export let page;
-
-				export let constructors;
-				export let components = [];
-				export let form;
-				${levels.map((l) => `export let data_${l} = null;`).join('\n')}
+				${
+					isSvelte5Plus()
+						? dedent`
+							let { stores, page, constructors, components = [], form, ${levels
+								.map((l) => `data_${l} = null`)
+								.join(', ')} } = $props();
+						`
+						: dedent`
+							export let stores;
+							export let page;
+
+							export let constructors;
+							export let components = [];
+							export let form;
+							${levels.map((l) => `export let data_${l} = null;`).join('\n')}
+						`
+				}
 
 				if (!browser) {
 					setContext('__svelte__', stores);
 				}
 
-				$: stores.page.set(page);
-				afterUpdate(stores.page.notify);
+				${
+					isSvelte5Plus()
+						? dedent`
+							if (browser) {
+								$effect.pre(() => stores.page.set(page));
+							} else {
+								stores.page.set(page);
+							}
+						`
+						: '$: stores.page.set(page);'
+				}
+				${
+					isSvelte5Plus()
+						? dedent`
+							$effect(() => {
+								stores;page;constructors;components;form;${levels.map((l) => `data_${l}`).join(';')};
+								stores.page.notify();
+							});
+						`
+						: 'afterUpdate(stores.page.notify);'
+				}
 
-				let mounted = false;
-				let navigated = false;
-				let title = null;
+				let mounted = ${isSvelte5Plus() ? '$state(false)' : 'false'};
+				let navigated = ${isSvelte5Plus() ? '$state(false)' : 'false'};
+				let title = ${isSvelte5Plus() ? '$state(null)' : 'null'};
 
 				onMount(() => {
 					const unsubscribe = stores.page.subscribe(() => {