fix: use runes in when detecting Svelte 5 (#11028)

- fixes #11027 (not the underlying issue, but the problem within SvelteKit)
- fixes #11022

Author: dummdidumm

.changeset/beige-ties-allow.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: use runes in generated root when detecting Svelte 5

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(() => {