@sveltejs/kit 3.0.0-next.12 → 3.0.0-next.13

package/src/runtime/client/constants.js

@@ -1,10 +1,6 @@
 export const SNAPSHOT_KEY = 'sveltekit:snapshot';
-export const SCROLL_KEY = 'sveltekit:scroll';
-export const STATES_KEY = 'sveltekit:states';
-export const PAGE_URL_KEY = 'sveltekit:pageurl';
-
-export const HISTORY_INDEX = 'sveltekit:history';
-export const NAVIGATION_INDEX = 'sveltekit:navigation';
+export const HISTORY_INFO_KEY = 'sveltekit:history-info';
+export const HISTORY_METADATA_KEY = 'sveltekit:metadata';
 
 export const PRELOAD_PRIORITIES = /** @type {const} */ ({
 	tap: 1,

package/src/runtime/client/fetcher.js

@@ -89,22 +89,24 @@ const cache = new Map();
 export function initial_fetch(resource, opts) {
 	const selector = build_selector(resource, opts);
 
-	const script = document.querySelector(selector);
-	if (script?.textContent) {
-		script.remove(); // In case multiple script tags match the same selector
-		let { body, ...init } = JSON.parse(script.textContent);
-
-		const b64 = script.getAttribute('data-b64');
-		if (b64 !== null) {
-			// Can't use native_fetch('data:...;base64,${body}')
-			// csp can block the request
-			body = base64_decode(body);
-		}
+	if (selector) {
+		const script = document.querySelector(selector);
+		if (script?.textContent) {
+			script.remove(); // In case multiple script tags match the same selector
+			let { body, ...init } = JSON.parse(script.textContent);
+
+			const b64 = script.getAttribute('data-b64');
+			if (b64 !== null) {
+				// Can't use native_fetch('data:...;base64,${body}')
+				// csp can block the request
+				body = base64_decode(body);
+			}
 
-		const ttl = script.getAttribute('data-ttl');
-		if (ttl) cache.set(selector, { body, init, ttl: 1000 * Number(ttl) });
+			const ttl = script.getAttribute('data-ttl');
+			if (ttl) cache.set(selector, { body, init, ttl: 1000 * Number(ttl) });
 
-		return Promise.resolve(new Response(body, init));
+			return Promise.resolve(new Response(body, init));
+		}
 	}
 
 	return DEV ? dev_fetch(resource, opts) : window.fetch(resource, opts);
@@ -119,7 +121,7 @@ export function initial_fetch(resource, opts) {
 export function subsequent_fetch(resource, resolved, opts) {
 	if (cache.size > 0) {
 		const selector = build_selector(resource, opts);
-		const cached = cache.get(selector);
+		const cached = selector && cache.get(selector);
 		if (cached) {
 			// https://developer.mozilla.org/en-US/docs/Web/API/Request/cache#value
 			if (
@@ -155,6 +157,7 @@ export function dev_fetch(resource, opts) {
  * Build the cache key for a given request
  * @param {URL | RequestInfo} resource
  * @param {RequestInit} [opts]
+ * @returns {string | null} `null` for requests the server never serializes
  */
 function build_selector(resource, opts) {
 	const url = JSON.stringify(resource instanceof Request ? resource.url : resource);
@@ -162,6 +165,13 @@ function build_selector(resource, opts) {
 	let selector = `script[data-sveltekit-fetched][data-url=${url}]`;
 
 	if (opts?.headers || opts?.body) {
+		const body = opts.body;
+
+		if (body && typeof body !== 'string' && !ArrayBuffer.isView(body)) {
+			// the server skips serializing these, so a matching script tag belongs to another request
+			return null;
+		}
+
 		/** @type {import('types').StrictBody[]} */
 		const values = [];
 
@@ -169,8 +179,8 @@ function build_selector(resource, opts) {
 			values.push([...new Headers(opts.headers)].join(','));
 		}
 
-		if (opts.body && (typeof opts.body === 'string' || ArrayBuffer.isView(opts.body))) {
-			values.push(opts.body);
+		if (body) {
+			values.push(/** @type {import('types').StrictBody} */ (body));
 		}
 
 		selector += `[data-hash="${hash(...values)}"]`;

package/src/runtime/client/remote-functions/form.svelte.js

@@ -11,6 +11,7 @@ import {
 	handle_error,
 	refreshAll
 } from '../client.js';
+import { page } from '../state.svelte.js';
 import { tick } from 'svelte';
 import { categorize_updates, remote_request } from './shared.svelte.js';
 import { createAttachmentKey } from 'svelte/attachments';
@@ -39,16 +40,22 @@ import {
  * @returns {InternalRemoteFormIssue[]}
  */
 function merge_with_server_issues(form_data, current_issues, client_issues) {
+	const client_names = new Set(client_issues.map((issue) => issue.name));
+
 	const merged = [
-		...current_issues.filter(
-			(issue) => issue.server && !client_issues.some((i) => i.name === issue.name)
-		),
+		...current_issues.filter((issue) => issue.server && !client_names.has(issue.name)),
 		...client_issues
 	];
 
-	const keys = Array.from(form_data.keys());
+	/** @type {Map<string, number>} */
+	const positions = new Map();
+	let i = 0;
+	for (const key of form_data.keys()) {
+		if (!positions.has(key)) positions.set(key, i);
+		i++;
+	}
 
-	return merged.sort((a, b) => keys.indexOf(a.name) - keys.indexOf(b.name));
+	return merged.sort((a, b) => (positions.get(a.name) ?? -1) - (positions.get(b.name) ?? -1));
 }
 
 /**
@@ -69,7 +76,29 @@ export function form(id) {
 	function create_instance(key) {
 		const action_id_without_key = id;
 		const action_id = id + (key != undefined ? `/${JSON.stringify(key)}` : '');
-		const action = '?/remote=' + encodeURIComponent(action_id);
+		const action = '/remote=' + encodeURIComponent(action_id);
+
+		/** @type {string} */
+		let cached_search = '';
+		/** @type {string} */
+		let cached_query = '';
+
+		/** @returns {string} */
+		function get_action() {
+			if (page.url.search !== cached_search) {
+				cached_search = page.url.search;
+
+				if (page.url.search) {
+					const params = new URLSearchParams(page.url.search);
+					params.delete('/remote');
+					cached_query = params.toString();
+				} else {
+					cached_query = '';
+				}
+			}
+
+			return `?${cached_query && `${cached_query}&`}${action}`;
+		}
 
 		// the output of a non-enhanced submission that resulted in this page —
 		// consume it so the form's state survives hydration (form outputs are
@@ -355,7 +384,10 @@ export function form(id) {
 		const instance = {};
 
 		instance.method = 'POST';
-		instance.action = action;
+		Object.defineProperty(instance, 'action', {
+			get: get_action,
+			enumerable: true
+		});
 
 		instance[createAttachmentKey()] = (/** @type {HTMLFormElement} */ form) => {
 			if (element) {

package/src/runtime/client/remote-functions/prerender.svelte.js

@@ -172,7 +172,7 @@ class Prerender {
 				});
 				this.#loading = false;
 				this.#error = error;
-				throw new HttpError(error.status, error); // so that transformError doesn't transform it again
+				throw new HttpError(error); // so that transformError doesn't transform it again
 			}
 		);
 

package/src/runtime/client/remote-functions/query/instance.svelte.js

@@ -70,7 +70,7 @@ export class Query {
 			delete query_responses[key];
 
 			if (node.e) {
-				this.fail(new HttpError(node.e.status, node.e));
+				this.fail(new HttpError(node.e));
 			} else {
 				this.set(/** @type {T} */ (node.v));
 			}
@@ -152,7 +152,7 @@ export class Query {
 					this.#loading = false;
 				});
 
-				reject(new HttpError(error.status, error)); // so that transformError doesn't transform it again
+				reject(new HttpError(error)); // so that transformError doesn't transform it again
 			});
 
 		return promise;

package/src/runtime/client/remote-functions/query-batch.svelte.js

@@ -71,7 +71,7 @@ export function query_batch(id) {
 
 							for (const { resolve, reject } of resolvers) {
 								if (result.type === 'error') {
-									reject(new HttpError(result.error.status, result.error));
+									reject(new HttpError(result.error));
 								} else {
 									resolve(result.data);
 								}

package/src/runtime/client/remote-functions/query-live/instance.svelte.js

@@ -91,7 +91,7 @@ export class LiveQuery {
 				// the query failed during SSR — seed the failed state (mirroring `fail()`,
 				// minus its terminal `#done`), so the main loop still connects as usual
 				// and the query can recover
-				const error = new HttpError(node.e.status, node.e);
+				const error = new HttpError(node.e);
 				this.#loading = false;
 				this.#error = error.body;
 
@@ -417,7 +417,7 @@ export class LiveQuery {
 			route: { id: null },
 			url: new URL(location.href)
 		});
-		this.fail(new HttpError(error.status, error));
+		this.fail(new HttpError(error));
 	}
 
 	get [Symbol.toStringTag]() {

package/src/runtime/client/remote-functions/query-live/iterator.js

@@ -1,3 +1,4 @@
+/** @import { RemoteFunctionResponse } from 'types' */
 import { app_dir, base } from '$app/paths/internal/client';
 import { app } from '../../client.js';
 import { notify_version } from '../../state.svelte.js';
@@ -31,20 +32,21 @@ export async function* create_live_iterator(
 	notify_version(response.headers.get('x-sveltekit-version'));
 
 	if (!response.ok) {
-		const result = await response.json().catch(() => ({
-			type: 'error',
-			status: response.status,
-			error: response.statusText
-		}));
+		/** @type {RemoteFunctionResponse | undefined} */
+		const result = await response.json().catch(() => undefined);
 
-		throw new HttpError(result.status ?? response.status ?? 500, result.error);
+		throw new HttpError(
+			result?.type === 'error'
+				? result.error
+				: { status: response.status, message: response.statusText }
+		);
 	}
 
 	if (response.headers.get('content-type')?.includes('application/json')) {
 		// we can end up here if we e.g. redirect in `handle`
 		const result = await response.json();
 		await handle_side_channel_response(result);
-		throw new HttpError(500, 'Invalid query.live response');
+		throw new HttpError({ status: 500, message: 'Invalid query.live response' });
 	}
 
 	if (!response.body) {
@@ -63,7 +65,7 @@ export async function* create_live_iterator(
 			}
 
 			await handle_side_channel_response(node);
-			throw new HttpError(500, 'Invalid query.live response');
+			throw new HttpError({ status: 500, message: 'Invalid query.live response' });
 		}
 	} finally {
 		try {

package/src/runtime/client/remote-functions/shared.svelte.js

@@ -86,7 +86,7 @@ export function pin_while_resolving(cache_map, cache, id, payload, then) {
  */
 export function unwrap_node(node) {
 	if (node.e) {
-		throw new HttpError(node.e.status, node.e);
+		throw new HttpError(node.e);
 	}
 
 	return node.v;
@@ -112,6 +112,7 @@ export function get_remote_request_headers() {
  */
 export async function remote_request(url, init) {
 	const response = await fetch(url, init);
+	const status = response.status;
 
 	// detect new deployments from the response header
 	notify_version(response.headers.get('x-sveltekit-version'));
@@ -119,20 +120,20 @@ export async function remote_request(url, init) {
 	if (!response.ok) {
 		const result = await response.json().catch(() => ({
 			type: 'error',
-			status: response.status,
-			error: response.statusText
+			status,
+			error: {
+				status,
+				message: response.statusText
+			}
 		}));
 
-		throw new HttpError(
-			result.error?.status ?? result.status ?? response.status ?? 500,
-			result.error
-		);
+		throw new HttpError({ status, ...result.error });
 	}
 
 	const result = /** @type {RemoteFunctionResponse} */ (await response.json());
 
 	if (result.type === 'error') {
-		throw new HttpError(result.error.status, result.error);
+		throw new HttpError(result.error);
 	}
 
 	const data = /** @type {RemoteFunctionData} */ (
@@ -147,7 +148,7 @@ export async function remote_request(url, init) {
 	function refresh(key, entry, result) {
 		if (entry?.resource) {
 			if (result.e) {
-				entry.resource.fail(new HttpError(result.e.status, result.e));
+				entry.resource.fail(new HttpError(result.e));
 			} else {
 				entry.resource.set(result.v);
 			}
@@ -201,7 +202,7 @@ export async function handle_side_channel_response(response) {
 	}
 
 	if (response.type === 'error') {
-		throw new HttpError(response.error.status, response.error);
+		throw new HttpError(response.error);
 	}
 
 	return response;

package/src/runtime/client/state.svelte.js

@@ -9,6 +9,7 @@ export const page = new (class Page {
 	error = $state.raw(null);
 	params = $state.raw({});
 	route = $state.raw({ id: null });
+	shallow = $state.raw(null);
 	state = $state.raw({});
 	status = $state.raw(-1);
 	url = $state.raw(new URL('a:'));
@@ -61,12 +62,14 @@ if (!DEV && BROWSER) {
 	}
 
 	/** @type {() => Promise<boolean>} */
-	function check() {
-		if (checking) return checking;
-
+	updated.check = function check() {
 		window.clearTimeout(timeout);
 
-		return (checking = (async () => {
+		if (updated.current) {
+			return Promise.resolve(true);
+		}
+
+		return (checking ??= (async () => {
 			try {
 				const res = await fetch(`${assets}/${__SVELTEKIT_APP_VERSION_FILE__}`, {
 					headers: {
@@ -79,13 +82,7 @@ if (!DEV && BROWSER) {
 				}
 
 				const data = await res.json();
-				const new_update = data.version !== version;
-
-				if (new_update) {
-					updated.current = true;
-				}
-
-				return new_update;
+				return (updated.current ||= data.version !== version);
 			} catch {
 				return false;
 			} finally {
@@ -93,16 +90,7 @@ if (!DEV && BROWSER) {
 				if (interval && !updated.current) timeout = window.setTimeout(check, interval);
 			}
 		})());
-	}
+	};
 
-	if (interval) timeout = window.setTimeout(check, interval);
-
-	updated.check = check;
-}
-
-/**
- * @param {import('@sveltejs/kit').Page} new_page
- */
-export function update(new_page) {
-	Object.assign(page, new_page);
+	if (interval) timeout = window.setTimeout(updated.check, interval);
 }

package/src/runtime/client/types.d.ts

@@ -1,4 +1,3 @@
-import { SvelteComponent } from 'svelte';
 import {
 	ClientHooks,
 	CSRPageNode,
@@ -10,7 +9,7 @@ import {
 	Uses
 } from 'types';
 import { Page, ParamMatcher } from '@sveltejs/kit';
-import { RenderNode } from '../types.js';
+import { RenderNode } from '../props.svelte.js';
 
 export interface SvelteKitApp {
 	/**

package/src/runtime/client/utils.js

@@ -31,10 +31,9 @@ const warned = new WeakSet();
 const valid_link_options = /** @type {const} */ ({
 	'preload-code': ['', 'false', 'tap', 'hover', 'viewport', 'eager'],
 	'preload-data': ['', 'false', 'tap', 'hover'],
-	keepfocus: ['', 'true', 'false'],
-	noscroll: ['', 'true', 'false'],
 	reload: ['', 'true', 'false'],
-	replacestate: ['', 'true', 'false']
+	replacestate: ['', 'true', 'false'],
+	reset: ['', 'true', 'false']
 });
 
 /**
@@ -150,12 +149,6 @@ export function get_link_info(a, base, uses_hash_router) {
  * @param {HTMLFormElement | HTMLAnchorElement | SVGAElement} element
  */
 export function get_router_options(element) {
-	/** @type {ValidLinkOptions<'keepfocus'> | null} */
-	let keepfocus = null;
-
-	/** @type {ValidLinkOptions<'noscroll'> | null} */
-	let noscroll = null;
-
 	/** @type {ValidLinkOptions<'preload-code'> | null} */
 	let preload_code = null;
 
@@ -168,16 +161,31 @@ export function get_router_options(element) {
 	/** @type {ValidLinkOptions<'replacestate'> | null} */
 	let replace_state = null;
 
+	/** @type {ValidLinkOptions<'reset'> | null} */
+	let reset = null;
+
 	/** @type {Element} */
 	let el = element;
 
 	while (el && el !== document.documentElement) {
+		if (DEV) {
+			for (const name of ['keepfocus', 'noscroll']) {
+				const value = el.getAttribute(`data-sveltekit-${name}`);
+				if (value !== null && !warned.has(el)) {
+					warned.add(el);
+					console.warn(
+						`\`data-sveltekit-${name}="true"\` has been replaced with \`data-sveltekit-reset="false"\``
+					);
+					console.log(el);
+				}
+			}
+		}
+
 		if (preload_code === null) preload_code = link_option(el, 'preload-code');
 		if (preload_data === null) preload_data = link_option(el, 'preload-data');
-		if (keepfocus === null) keepfocus = link_option(el, 'keepfocus');
-		if (noscroll === null) noscroll = link_option(el, 'noscroll');
 		if (reload === null) reload = link_option(el, 'reload');
 		if (replace_state === null) replace_state = link_option(el, 'replacestate');
+		if (reset === null) reset = link_option(el, 'reset');
 
 		el = /** @type {Element} */ (parent_element(el));
 	}
@@ -198,10 +206,9 @@ export function get_router_options(element) {
 	return {
 		preload_code: levels[preload_code ?? 'false'],
 		preload_data: levels[preload_data ?? 'false'],
-		keepfocus: get_option_state(keepfocus),
-		noscroll: get_option_state(noscroll),
 		reload: get_option_state(reload),
-		replace_state: get_option_state(replace_state)
+		replace_state: get_option_state(replace_state),
+		reset: get_option_state(reset) ?? true
 	};
 }
 

package/src/runtime/components/root.svelte

@@ -1,18 +1,8 @@
 <script lang="ts">
 	import { afterNavigate } from '$app/navigation';
-	import type { Page } from '@sveltejs/kit';
-	import type { RenderNode } from '../types.js';
+	import type { Props, RenderNode } from '../props.svelte.js';
 
-	interface Props {
-		page: Page;
-		tree: RenderNode;
-		components: any[];
-		resetters: Array<(() => void) | undefined>;
-		form?: any;
-		error?: App.Error;
-	}
-
-	const { page, components, resetters, tree, form, error }: Props = $props();
+	const { page, components, onerror, tree, form, error }: Props = $props();
 
 	let mounted = $state(false);
 	let navigated = $state(false);
@@ -33,7 +23,7 @@
 	{const Error = $derived(n.error)}
 	{const data = $derived(n.data)}
 
-	<svelte:boundary onerror={(_, reset) => (resetters[depth] = reset)}>
+	<svelte:boundary {onerror}>
 		{#if n.child}
 			<!-- svelte-ignore binding_property_non_reactive -->
 			<Component bind:this={components[depth]} {data} {form} params={page.params}>
@@ -44,7 +34,7 @@
 			<Component bind:this={components[depth]} {data} {form} params={page.params} {error} />
 		{/if}
 
-		{#snippet failed(error)}
+		{#snippet failed(error: unknown)}
 			<Error {error} />
 		{/snippet}
 	</svelte:boundary>

package/src/runtime/props.svelte.js

@@ -0,0 +1,71 @@
+/** @import { Component } from 'svelte'; */
+/** @import { Page } from '@sveltejs/kit'; */
+
+import { noop } from '../utils/functions.js';
+
+export class Props {
+	/** @type {Page} */
+	page;
+
+	/**
+	 * An array of the `+layout.svelte` and `+page.svelte` component instances
+	 * that currently live on the page — used for capturing and restoring snapshots.
+	 * It's updated/manipulated through `bind:this` in `Root.svelte`.
+	 * @type {Array<Record<string, any>>}
+	 */
+	components = [];
+
+	/** @type {any} */
+	form;
+
+	/** @type {App.Error | undefined} */
+	error;
+
+	/** @type {RenderNode} */
+	tree;
+
+	/** @type {(error: unknown, reset: () => void) => void} */
+	onerror;
+
+	/**
+	 * @param {{
+	 *   page: Page;
+	 *   tree: RenderNode;
+	 *   form: any;
+	 *   error: App.Error | undefined;
+	 *   onerror?: (error: unknown, reset: () => void) => void;
+	 * }} props
+	 */
+	constructor({ page, tree, form, error, onerror = noop }) {
+		this.page = page;
+		this.tree = tree;
+		this.onerror = onerror;
+
+		this.form = $state.raw(form);
+		this.error = $state.raw(error);
+	}
+}
+
+export class RenderNode {
+	/** @type {Component} */
+	component;
+
+	/** @type {Component | undefined} */
+	error;
+
+	/** @type {Record<string, any>} */
+	data = $state.raw({});
+
+	/** @type {RenderNode | undefined} */
+	child = $state.raw();
+
+	/**
+	 *
+	 * @param {Component} component
+	 * @param {Component} error
+	 */
+	constructor(component, error) {
+		this.component = component;
+		this.error = error;
+	}
+}

package/src/runtime/server/fetch.js

@@ -117,7 +117,7 @@ export function create_fetch({ event, options, manifest, state, get_cookie_heade
 					return await fetch(request);
 				}
 
-				if (has_prerendered_path(manifest, paths.base + decoded)) {
+				if (has_prerendered_path(manifest, decoded)) {
 					// The path of something prerendered could match a different route
 					// that is still in the manifest, leading to the wrong route being loaded.
 					// We therefore bail early here. The prerendered logic is different for
@@ -142,11 +142,9 @@ export function create_fetch({ event, options, manifest, state, get_cookie_heade
 					request.headers.set('accept', '*/*');
 				}
 
-				if (!request.headers.has('accept-language')) {
-					request.headers.set(
-						'accept-language',
-						/** @type {string} */ (event.request.headers.get('accept-language'))
-					);
+				const accept_language = event.request.headers.get('accept-language');
+				if (accept_language && !request.headers.has('accept-language')) {
+					request.headers.set('accept-language', accept_language);
 				}
 
 				const response = await internal_fetch(request, options, manifest, state);