feat: snapshots

packages/kit/src/core/sync/write_root.js

@@ -21,16 +21,16 @@ export function write_root(manifest_data, output) {
 
 	let l = max_depth;
 
-	let pyramid = `<svelte:component this={components[${l}]} data={data_${l}} {form} />`;
+	let pyramid = `<svelte:component this={constructors[${l}]} bind:this={components[${l}]} data={data_${l}} {form} />`;
 
 	while (l--) {
 		pyramid = `
-			{#if components[${l + 1}]}
-				<svelte:component this={components[${l}]} data={data_${l}}>
+			{#if constructors[${l + 1}]}
+				<svelte:component this={constructors[${l}]} bind:this={components[${l}]} data={data_${l}}>
 					${pyramid.replace(/\n/g, '\n\t\t\t\t\t')}
 				</svelte:component>
 			{:else}
-				<svelte:component this={components[${l}]} data={data_${l}} {form} />
+				<svelte:component this={constructors[${l}]} bind:this={components[${l}]} data={data_${l}} {form} />
 			{/if}
 		`
 			.replace(/^\t\t\t/gm, '')
@@ -49,7 +49,8 @@ export function write_root(manifest_data, output) {
 				export let stores;
 				export let page;
 
-				export let components;
+				export let constructors;
+				export let components = [];
 				export let form;
 				${levels.map((l) => `export let data_${l} = null;`).join('\n\t\t\t\t')}
 

packages/kit/src/exports/vite/index.js

@@ -132,6 +132,23 @@ export async function sveltekit() {
 			hydratable: true,
 			...svelte_config.compilerOptions
 		},
+		experimental: {
+			dynamicCompileOptions: ({ filename, code, compileOptions }) => {
+				const options =
+					svelte_config.vitePlugin?.experimental?.dynamicCompileOptions?.({
+						filename,
+						code,
+						compileOptions
+					}) ?? {};
+
+				const basename = path.basename(filename);
+				if (basename.startsWith('+layout') || basename.startsWith('+page')) {
+					options.accessors = true;
+				}
+
+				return options;
+			}
+		},
 		...svelte_config.vitePlugin
 	};
 

packages/kit/src/runtime/client/client.js

@@ -15,6 +15,7 @@ import {
 	is_external_url,
 	scroll_state
 } from './utils.js';
+import * as storage from './session-storage.js';
 import {
 	lock_fetch,
 	unlock_fetch,
@@ -30,7 +31,7 @@ import { HttpError, Redirect } from '../control.js';
 import { stores } from './singletons.js';
 import { unwrap_promises } from '../../utils/promises.js';
 import * as devalue from 'devalue';
-import { INDEX_KEY, PRELOAD_PRIORITIES, SCROLL_KEY } from './constants.js';
+import { INDEX_KEY, PRELOAD_PRIORITIES, SCROLL_KEY, SNAPSHOT_KEY } from './constants.js';
 import { validate_common_exports } from '../../utils/exports.js';
 import { compact } from '../../utils/array.js';
 
@@ -51,12 +52,10 @@ default_error_loader();
 
 /** @typedef {{ x: number, y: number }} ScrollPosition */
 /** @type {Record<number, ScrollPosition>} */
-let scroll_positions = {};
-try {
-	scroll_positions = JSON.parse(sessionStorage[SCROLL_KEY]);
-} catch {
-	// do nothing
-}
+const scroll_positions = storage.get(SCROLL_KEY) ?? {};
+
+/** @type {Record<string, any[]>} */
+const snapshots = storage.get(SNAPSHOT_KEY) ?? {};
 
 /** @param {number} index */
 function update_scroll_positions(index) {
@@ -75,6 +74,9 @@ export function create_client({ target, base }) {
 	/** @type {Array<((url: URL) => boolean)>} */
 	const invalidated = [];
 
+	/** @type {import('svelte').SvelteComponent[]} */
+	const components = [];
+
 	/** @type {{id: string, promise: Promise<import('./types').NavigationResult>} | null} */
 	let load_cache = null;
 
@@ -123,6 +125,8 @@ export function create_client({ target, base }) {
 		);
 	}
 
+	const initial_history_index = current_history_index;
+
 	// if we reload the page, or Cmd-Shift-T back to it,
 	// recover scroll position
 	const scroll = scroll_positions[current_history_index];
@@ -238,11 +242,20 @@ export function create_client({ target, base }) {
 	 * @param {import('./types').NavigationIntent | undefined} intent
 	 * @param {URL} url
 	 * @param {string[]} redirect_chain
+	 * @param {number} [previous_history_index]
 	 * @param {{hash?: string, scroll: { x: number, y: number } | null, keepfocus: boolean, details: { replaceState: boolean, state: any } | null}} [opts]
 	 * @param {{}} [nav_token] To distinguish between different navigation events and determine the latest. Needed for example for redirects to keep the original token
 	 * @param {() => void} [callback]
 	 */
-	async function update(intent, url, redirect_chain, opts, nav_token = {}, callback) {
+	async function update(
+		intent,
+		url,
+		redirect_chain,
+		previous_history_index,
+		opts,
+		nav_token = {},
+		callback
+	) {
 		token = nav_token;
 		let navigation_result = intent && (await load_route(intent));
 
@@ -301,6 +314,11 @@ export function create_client({ target, base }) {
 
 		updating = true;
 
+		// `previous_history_index` will be undefined for invalidation
+		if (previous_history_index) {
+			snapshots[previous_history_index] = components.map((c) => c.snapshot?.capture());
+		}
+
 		if (opts && opts.details) {
 			const { details } = opts;
 			const change = details.replaceState ? 0 : 1;
@@ -383,10 +401,14 @@ export function create_client({ target, base }) {
 
 		root = new Root({
 			target,
-			props: { ...result.props, stores },
+			props: { ...result.props, stores, components },
 			hydrate: true
 		});
 
+		snapshots[current_history_index]?.forEach((value, i) => {
+			components[i].snapshot?.restore(value);
+		});
+
 		/** @type {import('types').AfterNavigate} */
 		const navigation = {
 			from: null,
@@ -444,7 +466,7 @@ export function create_client({ target, base }) {
 			},
 			props: {
 				// @ts-ignore Somehow it's getting SvelteComponent and SvelteComponentDev mixed up
-				components: compact(branch).map((branch_node) => branch_node.node.component)
+				constructors: compact(branch).map((branch_node) => branch_node.node.component)
 			}
 		};
 
@@ -1081,8 +1103,11 @@ export function create_client({ target, base }) {
 			return;
 		}
 
+		// TODO update scroll positions at same time as snapshot?
 		update_scroll_positions(current_history_index);
 
+		const previous_history_index = current_history_index;
+
 		accepted();
 
 		navigating = true;
@@ -1095,6 +1120,7 @@ export function create_client({ target, base }) {
 			intent,
 			url,
 			redirect_chain,
+			previous_history_index,
 			{
 				scroll,
 				keepfocus,
@@ -1373,12 +1399,10 @@ export function create_client({ target, base }) {
 			addEventListener('visibilitychange', () => {
 				if (document.visibilityState === 'hidden') {
 					update_scroll_positions(current_history_index);
+					storage.set(SCROLL_KEY, scroll_positions);
 
-					try {
-						sessionStorage[SCROLL_KEY] = JSON.stringify(scroll_positions);
-					} catch {
-						// do nothing
-					}
+					snapshots[current_history_index] = components.map((c) => c.snapshot?.capture());
+					storage.set(SNAPSHOT_KEY, snapshots);
 				}
 			});
 
@@ -1525,15 +1549,15 @@ export function create_client({ target, base }) {
 				});
 			});
 
-			addEventListener('popstate', (event) => {
+			addEventListener('popstate', async (event) => {
 				if (event.state?.[INDEX_KEY]) {
 					// if a popstate-driven navigation is cancelled, we need to counteract it
 					// with history.go, which means we end up back here, hence this check
 					if (event.state[INDEX_KEY] === current_history_index) return;
 
 					const delta = event.state[INDEX_KEY] - current_history_index;
 
-					navigate({
+					await navigate({
 						url: new URL(location.href),
 						scroll: scroll_positions[event.state[INDEX_KEY]],
 						keepfocus: false,
@@ -1548,6 +1572,10 @@ export function create_client({ target, base }) {
 						type: 'popstate',
 						delta
 					});
+
+					snapshots[current_history_index].forEach((value, i) => {
+						components[i].snapshot?.restore(value);
+					});
 				}
 			});
 

packages/kit/src/runtime/client/constants.js

@@ -1,3 +1,4 @@
+export const SNAPSHOT_KEY = 'sveltekit:snapshot';
 export const SCROLL_KEY = 'sveltekit:scroll';
 export const INDEX_KEY = 'sveltekit:index';
 

packages/kit/src/runtime/client/session-storage.js

@@ -0,0 +1,25 @@
+/**
+ * Read a value from `sessionStorage`
+ * @param {string} key
+ */
+export function get(key) {
+	try {
+		return JSON.parse(sessionStorage[key]);
+	} catch {
+		// do nothing
+	}
+}
+
+/**
+ * Write a value to `sessionStorage`
+ * @param {string} key
+ * @param {any} value
+ */
+export function set(key, value) {
+	const json = JSON.stringify(value);
+	try {
+		sessionStorage[key] = json;
+	} catch {
+		// do nothing
+	}
+}

packages/kit/src/runtime/server/page/render.js

@@ -89,7 +89,7 @@ export async function render_response({
 				navigating: writable(null),
 				updated
 			},
-			components: await Promise.all(branch.map(({ node }) => node.component())),
+			constructors: await Promise.all(branch.map(({ node }) => node.component())),
 			form: form_value
 		};
 

packages/kit/test/apps/basics/src/routes/snapshot/+layout.svelte

@@ -0,0 +1,5 @@
+<a href="/snapshot/a">a</a>
+<a href="/snapshot/b">b</a>
+<a href="/snapshot/c" data-sveltekit-reload>c</a>
+
+<slot />

packages/kit/test/apps/basics/src/routes/snapshot/a/+page.svelte

@@ -0,0 +1,10 @@
+<script>
+	let message = '';
+
+	export const snapshot = {
+		capture: () => message,
+		restore: (snapshot) => (message = snapshot)
+	};
+</script>
+
+<input bind:value={message} />

packages/kit/test/apps/basics/src/routes/snapshot/b/+page.svelte

@@ -0,0 +1 @@
+<h1>b</h1>

packages/kit/test/apps/basics/src/routes/snapshot/c/+page.svelte

@@ -0,0 +1 @@
+<h1>c</h1>

packages/kit/test/apps/basics/test/client.test.js

@@ -607,3 +607,32 @@ test.describe('env in app.html', () => {
 		expect(await page.locator('body').getAttribute('class')).toContain('groovy');
 	});
 });
+
+test.describe('Snapshots', () => {
+	test('recovers snapshotted data', async ({ page, clicknav }) => {
+		await page.goto('/snapshot/a');
+
+		let input = page.locator('input');
+		await input.type('hello');
+
+		await clicknav('[href="/snapshot/b"]');
+		await page.goBack();
+
+		input = page.locator('input');
+		expect(await input.inputValue()).toBe('hello');
+
+		await input.clear();
+		await input.type('works for cross-document navigations');
+
+		await clicknav('[href="/snapshot/c"]');
+		await page.goBack();
+		expect(await page.locator('input').inputValue()).toBe('works for cross-document navigations');
+
+		input = page.locator('input');
+		await input.clear();
+		await input.type('works for reloads');
+
+		await page.reload();
+		expect(await page.locator('input').inputValue()).toBe('works for reloads');
+	});
+});

turbo.json

@@ -43,7 +43,6 @@
 			"outputMode": "new-only"
 		},
 		"test": {
-			"dependsOn": ["^build"],
 			"inputs": ["src/**", "scripts/**", "shared/**", "templates/**", "test/**"],
 			"outputs": ["coverage/", "test-results/**"],
 			"outputMode": "new-only",