updated store

Author: Rich Harris

content/tutorial/03-sveltekit/07-stores/03-updated-store/README.md

@@ -2,4 +2,40 @@
 title: updated
 ---
 
-> Coming soon
+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`.
+
+Version changes only happens in production, not during development. For that reason, `$updated` 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
+<script>
+	import { page, navigating, +++updated+++ } from '$app/stores';
+</script>
+
+<nav>
+	<a href="/" aria-current={$page.url.pathname === '/'}>
+		home
+	</a>
+
+	<a href="/about" aria-current={$page.url.pathname === '/about'}>
+		about
+	</a>
+
+	{#if $navigating}
+		navigating to {$navigating.to.url.pathname}
+	{/if}
+</nav>
+
+<slot />
+
++++{#if $updated}
+	<p class="toast">
+		A new version of the app is available
+
+		<button on:click={() => location.reload()}>
+			reload the page
+		</button>
+	</p>
+{/if}+++

content/tutorial/03-sveltekit/07-stores/03-updated-store/app-a/src/routes/+layout.svelte

@@ -0,0 +1,29 @@
+<script>
+	import { page, navigating, updated } from '$app/stores';
+</script>
+
+<nav>
+	<a href="/" aria-current={$page.url.pathname === '/'}>
+		home
+	</a>
+
+	<a href="/about" aria-current={$page.url.pathname === '/about'}>
+		about
+	</a>
+
+	{#if $navigating}
+		navigating to {$navigating.to.url.pathname}
+	{/if}
+</nav>
+
+<slot />
+
+{#if $updated}
+	<p class="toast">
+		A new version of the app is available
+
+		<button on:click={() => location.reload()}>
+			reload the page
+		</button>
+	</p>
+{/if}

content/tutorial/03-sveltekit/07-stores/03-updated-store/app-a/src/routes/+page.server.js

@@ -0,0 +1,5 @@
+export async function load() {
+	return new Promise((fulfil) => {
+		setTimeout(fulfil, 1000);
+	});
+}

content/tutorial/03-sveltekit/07-stores/03-updated-store/app-a/src/routes/+page.svelte

@@ -0,0 +1,2 @@
+<h1>home</h1>
+<p>this is the home page.</p>

content/tutorial/03-sveltekit/07-stores/03-updated-store/app-a/src/routes/about/+page.server.js

@@ -0,0 +1,5 @@
+export async function load() {
+	return new Promise((fulfil) => {
+		setTimeout(fulfil, 1000);
+	});
+}

content/tutorial/03-sveltekit/07-stores/03-updated-store/app-a/src/routes/about/+page.svelte

@@ -0,0 +1,2 @@
+<h1>about</h1>
+<p>this is the about page.</p>

content/tutorial/03-sveltekit/07-stores/03-updated-store/app-a/svelte.config.js

@@ -0,0 +1,12 @@
+export default {
+	kit: {
+		version: {
+			// ideally, this should be something deterministic
+			// like the output of `git rev-parse HEAD`
+			name: Date.now().toString(),
+
+			// if undefined, no polling will occur
+			pollInterval: 5000
+		}
+	}
+};