@sveltejs/kit 3.0.0-next.11 → 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';
@@ -25,7 +26,9 @@ import {
 	serialize_binary_form,
 	deep_get,
 	DELETE_KEY,
-	BINARY_FORM_CONTENT_TYPE
+	BINARY_FORM_CONTENT_TYPE,
+	parse_form_key,
+	coerce_form_value
 } from '../../form-utils.js';
 
 /**
@@ -37,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));
 }
 
 /**
@@ -67,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
@@ -123,8 +154,8 @@ export function form(id) {
 		/** @type {InternalRemoteFormIssue[] | null} */
 		let unread_issues = null;
 
-		/** @type {string | null} */
-		let previous_submitter_name = null;
+		/** @type {{ name: string; type: 'number' | 'boolean' | null; is_array: boolean } | null} */
+		let previous_submitter = null;
 
 		/**
 		 * In dev, warn if there are validation issues going unread
@@ -160,8 +191,8 @@ export function form(id) {
 		 * @returns {Record<string, any>}
 		 */
 		function convert(form_data) {
-			const data = convert_formdata(form_data);
-			if (key !== undefined && !form_data.has('id')) {
+			const data = convert_formdata(action_id_without_key, form_data);
+			if (key !== undefined && !('id' in data)) {
 				data.id = key;
 			}
 			return data;
@@ -353,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) {
@@ -405,26 +439,30 @@ export function form(id) {
 				const form_data = new FormData(form, event.submitter);
 
 				if (
-					previous_submitter_name !== null &&
-					!Array.from(form_data.keys()).map(strip_prefix).includes(previous_submitter_name)
+					previous_submitter !== null &&
+					!Array.from(form_data.keys())
+						.map((k) => parse_form_key(action_id_without_key, k).name)
+						.includes(previous_submitter.name)
 				) {
-					// Strip any `n:`/`b:` type prefix before clearing, otherwise
-					// `set_nested_value` would coerce `undefined` to `NaN`/`false`
-					// instead of clearing the previously-submitted value.
-					set_nested_value(input, previous_submitter_name, undefined);
+					set_nested_value(input, previous_submitter, undefined);
 				}
 
 				if (event.submitter) {
 					const name = event.submitter.getAttribute('name');
+
+					/** @type {null | ReturnType<typeof parse_form_key>} */
+					let submitter = null;
+
 					const value = /** @type {any} */ (event.submitter).value;
 
 					if (name !== null && value !== undefined) {
-						set_nested_value(input, name, value);
+						submitter = parse_form_key(action_id_without_key, name);
+						set_nested_value(input, submitter, coerce_form_value(submitter.type, value));
 					}
 
-					previous_submitter_name = strip_prefix(name);
+					previous_submitter = submitter;
 				} else {
-					previous_submitter_name = null;
+					previous_submitter = null;
 				}
 
 				if (DEV) {
@@ -463,15 +501,14 @@ export function form(id) {
 				// but that makes the types unnecessarily awkward
 				const element = /** @type {HTMLInputElement} */ (e.target);
 
-				let name = element.name;
+				const name = element.name;
 				if (!name) return;
 
-				const is_array = name.endsWith('[]');
-				if (is_array) name = name.slice(0, -2);
+				const field = parse_form_key(action_id_without_key, name);
 
 				const is_file = element.type === 'file';
 
-				if (is_array) {
+				if (field.is_array) {
 					let value;
 
 					if (element.tagName === 'SELECT') {
@@ -481,7 +518,7 @@ export function form(id) {
 						);
 					} else {
 						const elements = /** @type {HTMLInputElement[]} */ (
-							Array.from(form.querySelectorAll(`[name="${name}[]"]`))
+							Array.from(form.querySelectorAll(`[name="${name}"]`))
 						);
 
 						if (DEV) {
@@ -502,7 +539,7 @@ export function form(id) {
 						}
 					}
 
-					set_nested_value(input, name, value);
+					set_nested_value(input, field, value);
 				} else if (is_file) {
 					if (DEV && element.multiple) {
 						throw new Error(
@@ -513,21 +550,19 @@ export function form(id) {
 					const file = /** @type {HTMLInputElement & { files: FileList }} */ (element).files[0];
 
 					if (file) {
-						set_nested_value(input, name, file);
+						set_nested_value(input, field, file);
 					} else {
-						set_nested_value(input, name, DELETE_KEY);
+						set_nested_value(input, field, DELETE_KEY);
 					}
 				} else {
 					set_nested_value(
 						input,
-						name,
+						field,
 						element.type === 'checkbox' && !element.checked ? null : element.value
 					);
 				}
 
-				name = strip_prefix(name);
-
-				dirty[name] = true;
+				dirty[field.name] = true;
 			};
 
 			const handle_reset = async () => {
@@ -535,7 +570,7 @@ export function form(id) {
 				// the inputs are actually updated (so that it can be cancelled)
 				await tick();
 
-				input = convert_formdata(new FormData(form));
+				input = convert_formdata(action_id_without_key, new FormData(form));
 				raw_issues = [];
 				touched = {};
 				dirty = {};
@@ -545,15 +580,15 @@ export function form(id) {
 
 			/** @param {Event} e */
 			const handle_focusout = (e) => {
-				let name = /** @type {HTMLInputElement} */ (e.target).name;
+				const name = /** @type {HTMLInputElement} */ (e.target).name;
 				if (!name) return;
 
-				name = strip_prefix(name).replace(/\[\]$/, '');
+				const field = parse_form_key(action_id_without_key, name);
 
-				touched[name] = true;
+				touched[field.name] = true;
 
-				if (Object.hasOwn(dirty, name)) {
-					can_validate[name] = true;
+				if (Object.hasOwn(dirty, field.name)) {
+					can_validate[field.name] = true;
 				}
 			};
 
@@ -608,10 +643,10 @@ export function form(id) {
 			},
 			fields: {
 				get: () =>
-					create_field_proxy(
-						{},
-						() => input,
-						(path, value) => {
+					create_field_proxy({
+						form_id: action_id_without_key,
+						get: () => input,
+						set: (path, value) => {
 							if (path.length === 0) {
 								input = value;
 							} else if (value !== deep_get(input, path)) {
@@ -626,7 +661,7 @@ export function form(id) {
 								}
 							}
 						},
-						(path, all) => {
+						get_issues: (path, all) => {
 							if (DEV && unread_issues !== null && path !== undefined) {
 								unread_issues = unread_issues.filter((issue) => {
 									return (
@@ -638,10 +673,9 @@ export function form(id) {
 
 							return issues;
 						},
-						() => touched,
-						() => dirty,
-						[]
-					)
+						get_touched: () => touched,
+						get_dirty: () => dirty
+					})
 			},
 			result: {
 				get: () => result
@@ -809,13 +843,3 @@ function validate_form_data(form_data, enctype) {
 		}
 	}
 }
-
-/**
- * Remove the `n:` or `b:` prefix from a field name
- * @template {string | null} T
- * @param {T} name
- * @returns {T}
- */
-function strip_prefix(name) {
-	return /** @type {T} */ (name && name.replace(/^[nb]:/, ''));
-}

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/index.js

@@ -1,7 +1,7 @@
 /** @import { RemoteQueryFunction } from '@sveltejs/kit' */
 import { app_dir, base } from '$app/paths/internal/client';
 import { _goto, query_map } from '../../client.js';
-import { get_remote_request_headers, QUERY_FUNCTION_ID, remote_request } from '../shared.svelte.js';
+import { QUERY_FUNCTION_ID, remote_request } from '../shared.svelte.js';
 import { DEV } from 'esm-env';
 import { QueryProxy } from './proxy.js';
 
@@ -26,7 +26,7 @@ export function query(id) {
 		return new QueryProxy(id, arg, async (payload) => {
 			const url = `${base}/${app_dir}/remote/${id}${payload ? `?payload=${payload}` : ''}`;
 
-			const result = await remote_request(url, { headers: get_remote_request_headers() });
+			const result = await remote_request(url);
 
 			if (result.redirect) {
 				// Use internal version to allow redirects to external URLs

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

@@ -1,7 +1,7 @@
 /** @import { RemoteQueryFunction } from '@sveltejs/kit' */
 import { app_dir, base } from '$app/paths/internal/client';
 import { _goto } from '../client.js';
-import { get_remote_request_headers, QUERY_FUNCTION_ID, remote_request } from './shared.svelte.js';
+import { QUERY_FUNCTION_ID, remote_request } from './shared.svelte.js';
 import { QueryProxy } from './query/proxy.js';
 import { HttpError } from '@sveltejs/kit/internal';
 
@@ -30,8 +30,7 @@ export function query_batch(id) {
 				// but in different forks/async contexts and in the same macrotask?
 				// If so this would potentially be buggy
 				const headers = {
-					'Content-Type': 'application/json',
-					...get_remote_request_headers()
+					'Content-Type': 'application/json'
 				};
 
 				// Wait for the next macrotask - don't use microtask as Svelte runtime uses these to collect changes and flush them,
@@ -72,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,6 +1,8 @@
+/** @import { RemoteFunctionResponse } from 'types' */
 import { app_dir, base } from '$app/paths/internal/client';
 import { app } from '../../client.js';
-import { get_remote_request_headers, handle_side_channel_response } from '../shared.svelte.js';
+import { notify_version } from '../../state.svelte.js';
+import { handle_side_channel_response } from '../shared.svelte.js';
 import * as devalue from 'devalue';
 import { HttpError } from '@sveltejs/kit/internal';
 import { noop } from '../../../../utils/functions.js';
@@ -23,25 +25,28 @@ export async function* create_live_iterator(
 	const url = `${base}/${app_dir}/remote/${id}${payload ? `?payload=${payload}` : ''}`;
 
 	const response = await fetch(url, {
-		headers: get_remote_request_headers(),
 		signal: controller.signal
 	});
 
+	// detect new deployments from the response header
+	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) {
@@ -60,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

@@ -6,7 +6,7 @@ import { app, _goto, live_query_map, query_map, query_responses } from '../clien
 import { HttpError, Redirect } from '@sveltejs/kit/internal';
 import { untrack } from 'svelte';
 import { create_remote_key, split_remote_key } from '../../shared.js';
-import { navigating, page } from '../state.svelte.js';
+import { navigating, page, notify_version } from '../state.svelte.js';
 
 /** Indicates a query function, as opposed to a query instance */
 export const QUERY_FUNCTION_ID = Symbol('sveltekit.query_function_id');
@@ -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,24 +112,28 @@ 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'));
 
 	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} */ (
@@ -144,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);
 			}
@@ -198,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;