App state tutorial

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-app-state/01-page-state/+assets/app-b/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/index.md → apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/01-page-state/index.md

@@ -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-app-state/02-navigating-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-app-state/02-navigating-state/+assets/app-b/src/routes/+layout.svelte

@@ -0,0 +1,20 @@
+<script>
+	import { page, navigating } 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>
+
+	{#if navigating.to}
+		navigating to {navigating.to.url.pathname}
+	{/if}
+</nav>
+
+{@render children()}

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

@@ -0,0 +1,39 @@
+---
+title: navigating
+---
+
+The `navigating` object represents the current navigation. When a navigation starts — because of a link click, or a back/forward navigation, or a programmatic `goto` — the value of `navigating` will become an object with the following properties:
+
+- `from` and `to` — objects with `params`, `route` and `url` properties
+- `type` — the type of navigation, e.g. `link`, `popstate` or `goto`
+
+> [!NOTE] For complete type information visit the [`Navigation`](/docs/kit/@sveltejs-kit#Navigation) documentation.
+
+It can be used to show a loading indicator for long-running navigations. In this exercise, `src/routes/+page.server.js` and `src/routes/about/+page.server.js` both have an artificial delay. Inside `src/routes/+layout.svelte`, import the `navigating` object and add a message to the nav bar:
+
+```svelte
+/// file: src/routes/+layout.svelte
+<script>
+	import { page, +++navigating+++ } 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>
+
++++	{#if navigating.to}
+		navigating to {navigating.to.url.pathname}
+	{/if}+++
+</nav>
+
+{@render children()}
+```
+
+> [!NOTE] Prior to SvelteKit 2.12, you had to use `$app/stores` for this, which provides a `$navigating` 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/03-updated-store/+assets/app-a/src/routes/+layout.svelte → apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/03-updated-state/+assets/app-a/src/routes/+layout.svelte

@@ -1,19 +1,19 @@
 <script>
-	import { page, navigating } from '$app/stores';
+	import { page, navigating } 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>
 
-	{#if $navigating}
-		navigating to {$navigating.to.url.pathname}
+	{#if navigating.to}
+		navigating to {navigating.to.url.pathname}
 	{/if}
 </nav>
 

apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/+assets/app-b/src/routes/+layout.svelte → apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/03-updated-state/+assets/app-b/src/routes/+layout.svelte

@@ -1,25 +1,25 @@
 <script>
-	import { page, navigating, updated } from '$app/stores';
+	import { page, navigating, updated } 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>
 
-	{#if $navigating}
-		navigating to {$navigating.to.url.pathname}
+	{#if navigating.to}
+		navigating to {navigating.to.url.pathname}
 	{/if}
 </nav>
 
 {@render children()}
 
-{#if $updated}
+{#if updated.current}
 	<div class="toast">
 		<p>
 			A new version of the app is available
@@ -52,4 +52,3 @@
 		border-radius: 4px;
 	}
 </style>
-

apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/03-updated-store/index.md → apps/svelte.dev/content/tutorial/03-sveltekit/08-app-state/03-updated-state/index.md

@@ -2,23 +2,23 @@
 title: updated
 ---
 
-The `updated` store contains `true` or `false` depending on whether a new version of the app has been deployed since the page was first opened. For this to work, your `svelte.config.js` must specify `kit.version.pollInterval`.
+The `updated` state contains `true` or `false` depending on whether a new version of the app has been deployed since the page was first opened. For this to work, your `svelte.config.js` must specify `kit.version.pollInterval`.
 
 ```svelte
 /// file: src/routes/+layout.svelte
 <script>
-	import { page, navigating, +++updated+++ } from '$app/stores';
+	import { page, navigating, +++updated+++ } from '$app/state';
 </script>
 ```
 
-Version changes only happen in production, not during development. For that reason, `$updated` will always be `false` in this tutorial.
+Version changes only happen in production, not during development. For that reason, `updated.current` will always be `false` in this tutorial.
 
 You can manually check for new versions, regardless of `pollInterval`, by calling `updated.check()`.
 
 ```svelte
 /// file: src/routes/+layout.svelte
 
-+++{#if $updated}+++
++++{#if updated.current}+++
 	<div class="toast">
 		<p>
 			A new version of the app is available
@@ -30,3 +30,5 @@ You can manually check for new versions, regardless of `pollInterval`, by callin
 	</div>
 +++{/if}+++
 ```
+
+> [!NOTE] Prior to SvelteKit 2.12, you had to use `$app/stores` for this, which provides an `$updated` 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-app-state/index.md

@@ -0,0 +1,3 @@
+---
+title: $app/state
+---