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

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

@@ -1,6 +1,6 @@
 import { BROWSER, DEV } from 'esm-env';
 import { noop } from '../../utils/functions.js';
-import { hash } from '../../utils/hash.js';
+import { hash_request } from '../../utils/hash.js';
 import { base64_decode } from '../utils.js';
 
 let loading = 0;
@@ -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,18 +165,14 @@ function build_selector(resource, opts) {
 	let selector = `script[data-sveltekit-fetched][data-url=${url}]`;
 
 	if (opts?.headers || opts?.body) {
-		/** @type {import('types').StrictBody[]} */
-		const values = [];
-
-		if (opts.headers) {
-			values.push([...new Headers(opts.headers)].join(','));
-		}
+		const body = opts.body;
 
-		if (opts.body && (typeof opts.body === 'string' || ArrayBuffer.isView(opts.body))) {
-			values.push(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;
 		}
 
-		selector += `[data-hash="${hash(...values)}"]`;
+		selector += `[data-hash="${hash_request(opts.headers, body)}"]`;
 	}
 
 	return selector;

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
@@ -233,13 +262,9 @@ export function form(id) {
 
 					if (response.redirect) {
 						// Use internal version to allow redirects to external URLs
-						void _goto(
-							response.redirect,
-							{
-								refreshAll: should_refresh
-							},
-							0
-						);
+						void _goto(response.redirect, {
+							refreshAll: should_refresh
+						});
 						return true;
 					}
 
@@ -355,7 +380,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

@@ -100,7 +100,7 @@ export function prerender(id) {
 
 				if (result.redirect) {
 					// Use internal version to allow redirects to external URLs
-					void _goto(result.redirect, {}, 0);
+					void _goto(result.redirect);
 					return;
 				}
 
@@ -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/index.js

@@ -30,7 +30,7 @@ export function query(id) {
 
 			if (result.redirect) {
 				// Use internal version to allow redirects to external URLs
-				await _goto(result.redirect, {}, 0);
+				await _goto(result.redirect);
 			}
 		});
 	};

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

@@ -50,7 +50,7 @@ export function query_batch(id) {
 
 						if (response.redirect) {
 							// Use internal version to allow redirects to external URLs
-							await _goto(response.redirect, {}, 0);
+							await _goto(response.redirect);
 
 							// settle all batched promises (with `undefined`, like a redirect
 							// from a non-batched query) so that callers don't hang forever
@@ -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/query-live/proxy.js

@@ -74,16 +74,6 @@ export class LiveQueryProxy {
 		return this.#get_cached_query().done;
 	}
 
-	/**
-	 * @deprecated Use `for await (const value of liveQuery())` instead.
-	 * @returns {AsyncGenerator<T>}
-	 */
-	run() {
-		throw new Error(
-			'`.run()` has been removed from live queries. Use `for await (const value of liveQuery())` instead.'
-		);
-	}
-
 	reconnect() {
 		return this.#get_cached_query().reconnect();
 	}

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);
 			}
@@ -196,12 +197,12 @@ export async function remote_request(url, init) {
 export async function handle_side_channel_response(response) {
 	if (response.type === 'redirect') {
 		// Use internal version to allow redirects to external URLs
-		await _goto(response.location, {}, 0);
+		await _goto(response.location);
 		throw new Redirect(307, response.location);
 	}
 
 	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']
 });
 
 /**
@@ -123,6 +122,7 @@ export function get_link_info(a, base, uses_hash_router) {
 	/** @type {URL | undefined} */
 	let url;
 
+	// TODO replace the try/catch with `URL.parse` when browser support allows (Chrome 126, Firefox 126, Safari 18)
 	try {
 		url = new URL(a instanceof SVGAElement ? a.href.baseVal : a.href, document.baseURI);
 
@@ -150,12 +150,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 +162,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 +207,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/form-utils.js

@@ -3,12 +3,10 @@
 
 import { DEV } from 'esm-env';
 import * as devalue from 'devalue';
-import { text_encoder } from './utils.js';
+import { text_decoder, text_encoder } from './utils.js';
 import { noop } from '../utils/functions.js';
 import { SvelteKitError } from '@sveltejs/kit/internal';
 
-const decoder = new TextDecoder();
-
 /**
  * Sets a parsed form field value in a nested object, mutating the original object.
  * @param {Record<string, any>} object
@@ -283,7 +281,7 @@ export async function deserialize_binary_form(request, form_id) {
 		const file_offsets_buffer = await get_buffer(HEADER_BYTES + data_length, file_offsets_length);
 		if (!file_offsets_buffer) throw deserialize_error('file offset table too short');
 
-		const parsed_offsets = JSON.parse(decoder.decode(file_offsets_buffer));
+		const parsed_offsets = JSON.parse(text_decoder.decode(file_offsets_buffer));
 
 		if (
 			!Array.isArray(parsed_offsets) ||
@@ -298,7 +296,7 @@ export async function deserialize_binary_form(request, form_id) {
 
 	/** @type {Array<{ offset: number, size: number }>} */
 	const file_spans = [];
-	const [data, meta] = devalue.parse(decoder.decode(data_buffer), {
+	const [data, meta] = devalue.parse(text_decoder.decode(data_buffer), {
 		File: ([name, type, size, last_modified, index]) => {
 			if (
 				typeof name !== 'string' ||
@@ -488,7 +486,7 @@ class LazyFile {
 		});
 	}
 	async text() {
-		return decoder.decode(await this.arrayBuffer());
+		return text_decoder.decode(await this.arrayBuffer());
 	}
 }