App state tutorial (#1016)

* migrate everything but the page stores section to $app/state

* move redirects from tutorial into handle hooks: keeps all redirects on one place, less prerendered pages for stuff that's increasingly rotten, fixes a bug with the specific redirects not working currently (they were missing from entries)

* replace $app/stores tutorial with $app/state

* bump kit

* small tweaks

* update

* Update apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/01-page-state/index.md

Co-authored-by: Conduitry <[email protected]>

* Update apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/01-page-state/index.md

* Update apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/02-navigating-state/index.md

Co-authored-by: Conduitry <[email protected]>

* Update apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/03-updated-state/index.md

Co-authored-by: Conduitry <[email protected]>

* Update apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/03-updated-state/index.md

* Apply suggestions from code review

* bump, use <page.data.component> directly

* update

* revert

* only update kit

* get the damn thing working

* sure, prettier, let's suddenly start complaining about these files for some reason

* undo some other upgrade that fucked up syntax highlighting for some insane reason. fuck me i fucking hate computers

* i don't fucking believe this

---------

Co-authored-by: Rich Harris <[email protected]>
Co-authored-by: Conduitry <[email protected]>

Author: 3 people

apps/svelte.dev/content/tutorial/+assets/package.json

@@ -8,7 +8,7 @@
 	},
 	"devDependencies": {
 		"@rollup/wasm-node": "^4.25.0",
-		"@sveltejs/kit": "^2.5",
+		"@sveltejs/kit": "^2.12.1",
 		"esbuild-wasm": "^0.21.5",
 		"svelte": "^5.0.0",
 		"vite": "^5.4"

apps/svelte.dev/content/tutorial/01-svelte/+assets/src/routes/+error.svelte

@@ -1,8 +1,8 @@
 <script>
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 </script>
 
-{#if $page.status === 404}
+{#if page.status === 404}
 	<h1>Not found</h1>
 	<p><a href="/">Go to /</a></p>
 {:else}
@@ -11,8 +11,8 @@
 		code
 		<a
 			target="_blank"
-			href="https://http.dog/{$page.status}"
-			>{$page.status}</a
+			href="https://http.dog/{page.status}"
+			>{page.status}</a
 		>
 	</p>
 {/if}

apps/svelte.dev/content/tutorial/02-advanced-svelte/+assets/src/routes/+error.svelte

@@ -1,8 +1,8 @@
 <script>
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 </script>
 
-{#if $page.status === 404}
+{#if page.status === 404}
 	<h1>Not found</h1>
 	<p><a href="/">Go to /</a></p>
 {:else}
@@ -11,12 +11,12 @@
 		code
 		<a
 			target="_blank"
-			href="https://http.dog/{$page.status}"
-			>{$page.status}</a
+			href="https://http.dog/{page.status}"
+			>{page.status}</a
 		>
 	</p>
 
-	<pre>{$page.error?.stack || ''}</pre>
+	<pre>{page.error?.stack || ''}</pre>
 {/if}
 
 <style>

apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/+assets/app-a/src/routes/+layout.svelte renamed to apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/01-page-state/+assets/app-a/src/routes/+layout.svelte

@@ -0,0 +1,16 @@
+<script>
+	import { page } from '$app/state';
+	let { children } = $props();
+</script>
+
+<nav>
+	<a href="/" aria-current={page.url.pathname === '/'}>
+		home
+	</a>
+
+	<a href="/about" aria-current={page.url.pathname === '/about'}>
+		about
+	</a>
+</nav>
+
+{@render children()}

apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/+assets/app-a/src/routes/+page.svelte renamed to apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/01-page-state/+assets/app-a/src/routes/+page.svelte

@@ -2,11 +2,7 @@
 title: page
 ---
 
-> TODO link to stores exercise
-
-As we learned earlier, Svelte stores are a place to put data that doesn't belong to an individual component.
-
-SvelteKit makes three readonly stores available via the `$app/stores` module — `page`, `navigating` and `updated`. The one you'll use most often is [`page`](/docs/kit/@sveltejs-kit#Page), which provides information about the current page:
+SvelteKit makes three readonly state objects available via the `$app/state` module — `page`, `navigating` and `updated`. The one you'll use most often is [`page`](/docs/kit/@sveltejs-kit#Page), which provides information about the current page:
 
 - `url` — the [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) of the current page
 - `params` — the current page's [parameters](params)
@@ -16,25 +12,27 @@ SvelteKit makes three readonly stores available via the `$app/stores` module —
 - `data` — the data for the current page, combining the return values of all `load` functions
 - `form` — the data returned from a [form action](the-form-element)
 
-As with any other store, you can reference its value in a component by prefixing its name with the `$` symbol. For example, we can access the current pathname as `$page.url.pathname`:
+Each of these properties is reactive, using `$state.raw` under the hood. Here's an example using `page.url.pathname`:
 
 ```svelte
 /// file: src/routes/+layout.svelte
 <script>
-	+++import { page } from '$app/stores';+++
+	+++import { page } from '$app/state';+++
 
 	let { children } = $props();
 </script>
 
 <nav>
-	<a href="/" +++aria-current={$page.url.pathname === '/'}+++>
+	<a href="/" +++aria-current={page.url.pathname === '/'}+++>
 		home
 	</a>
 
-	<a href="/about" +++aria-current={$page.url.pathname === '/about'}+++>
+	<a href="/about" +++aria-current={page.url.pathname === '/about'}+++>
 		about
 	</a>
 </nav>
 
 {@render children()}
 ```
+
+> [!NOTE] Prior to SvelteKit 2.12, you had to use `$app/stores` for this, which provides a `$page` store with the same information. If you're currently using `$app/stores`, we advise you to migrate towards `$app/state` (requires Svelte 5).

apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/01-page-store/+assets/app-a/src/routes/about/+page.svelte renamed to apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/01-page-state/+assets/app-a/src/routes/about/+page.svelte

@@ -0,0 +1,16 @@
+<script>
+	import { page } from '$app/state';
+	let { children } = $props();
+</script>
+
+<nav>
+	<a href="/" aria-current={page.url.pathname === '/'}>
+		home
+	</a>
+
+	<a href="/about" aria-current={page.url.pathname === '/about'}>
+		about
+	</a>
+</nav>
+
+{@render children()}