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

package/src/runtime/client/client.js

@@ -1,3 +1,4 @@
+/** @import { RouteId } from '$app/types' */
 /** @import { RemoteFunctionDataNode, ServerNodesResponse, ServerRedirectNode } from 'types' */
 /** @import { NavigationIntent } from './types.js' */
 /** @import { RenderNode } from '../types.js' */
@@ -21,7 +22,7 @@ import {
 	scroll_state,
 	load_css
 } from './utils.js';
-import { base } from '$app/paths/internal/client';
+import { base, set_match_implementation } from '$app/paths/internal/client';
 import * as devalue from 'devalue';
 import {
 	HISTORY_INDEX,
@@ -42,7 +43,7 @@ import {
 	validate_load_response
 } from '../shared.js';
 import { get_message, get_status } from '../../utils/error.js';
-import { page, update, navigating, updated } from './state.svelte.js';
+import { page, update, navigating, updated, notify_version } from './state.svelte.js';
 import { payload } from './payload.js';
 import { add_data_suffix, add_resolution_suffix } from '../pathname.js';
 import { noop_span } from '../telemetry/noop.js';
@@ -332,6 +333,23 @@ export const query_map = new Map();
  */
 export const live_query_map = new Map();
 
+set_match_implementation(async (url) => {
+	if (typeof url === 'string') {
+		url = new URL(url, location.href);
+	}
+
+	const intent = await get_navigation_intent(url, false);
+
+	if (intent) {
+		return {
+			id: /** @type {RouteId} */ (intent.route.id),
+			params: intent.params
+		};
+	}
+
+	return null;
+});
+
 /**
  * @param {import('./types.js').SvelteKitApp} _app
  * @param {HTMLElement} _target
@@ -1197,7 +1215,8 @@ async function load_route({ id, invalidating, url, params, route, preload }) {
 	/** @type {import('types').ServerNodesResponse | import('types').ServerRedirectNode | null} */
 	let server_data = null;
 	const url_changed = current.url ? id !== get_page_key(current.url) : false;
-	const route_changed = current.route ? route.id !== current.route.id : false;
+	// current.route is null after an error-page render, so a missing route counts as changed
+	const route_changed = !current.route || route.id !== current.route.id;
 	const search_params_changed = diff_search_params(current.url, url);
 
 	let parent_invalid = false;
@@ -1986,14 +2005,14 @@ async function navigate({
 	}
 
 	// we reset scroll before dealing with focus, to avoid a flash of unscrolled content
-	/** @type {Element | null | ''} */
+	/** @type {Element | null} */
 	let deep_linked = null;
 
 	if (autoscroll) {
 		const scroll = popped ? popped.scroll : noscroll ? scroll_state() : null;
 		if (scroll) {
 			scrollTo(scroll.x, scroll.y);
-		} else if ((deep_linked = url.hash && document.getElementById(get_id(url)))) {
+		} else if ((deep_linked = get_hash_element(url))) {
 			// Here we use `scrollIntoView` on the element instead of `scrollTo`
 			// because it natively supports the `scroll-margin` and `scroll-behavior`
 			// CSS properties.
@@ -2744,13 +2763,19 @@ function _start_router() {
 			history.scrollRestoration = 'auto';
 		}
 	});
-
 	addEventListener('visibilitychange', () => {
 		if (document.visibilityState === 'hidden') {
 			persist_state();
+		} else {
+			// the tab just became visible — a good time to check for a new deployment
+			void updated.check();
 		}
 	});
 
+	addEventListener('focus', () => {
+		void updated.check();
+	});
+
 	// @ts-expect-error this isn't supported everywhere yet
 	if (!navigator.connection?.saveData) {
 		setup_preload();
@@ -3177,6 +3202,9 @@ async function load_data(url, invalid) {
 	const fetcher = DEV ? dev_fetch : window.fetch;
 	const res = await fetcher(data_url.href, {});
 
+	// detect new deployments from the response header
+	notify_version(res.headers.get('x-sveltekit-version'));
+
 	if (!res.ok) {
 		// error message is a JSON-stringified string which devalue can't handle at the top level
 		// turn it into a HttpError to not call handleError on the client again (was already handled on the server)
@@ -3294,8 +3322,8 @@ function reset_focus(url, scroll = true) {
 
 		// Mimic the browsers' behaviour and set the sequential focus navigation
 		// starting point to the fragment identifier.
-		const id = get_id(url);
-		if (id && document.getElementById(id)) {
+		const element = get_hash_element(url);
+		if (element) {
 			const { x, y } = scroll_state();
 
 			// `element.focus()` doesn't work on Safari and Firefox Ubuntu so we need
@@ -3304,7 +3332,7 @@ function reset_focus(url, scroll = true) {
 				const history_state = history.state;
 
 				resetting_focus = true;
-				location.replace(new URL(`#${id}`, location.href));
+				location.replace(new URL(`#${element.id}`, location.href));
 
 				// Firefox has a bug that sets the history state to `null` so we need to
 				// restore it after. See https://bugzilla.mozilla.org/show_bug.cgi?id=1199924
@@ -3456,6 +3484,15 @@ function get_id(url) {
 	return decodeURIComponent(id);
 }
 
+/**
+ * @param {URL} url
+ * @returns {Element | null}
+ */
+function get_hash_element(url) {
+	const id = get_id(url);
+	return id ? document.getElementById(id) : null;
+}
+
 if (DEV) {
 	// Nasty hack to silence harmless warnings the user can do nothing about
 	const console_warn = console.warn;

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

@@ -25,7 +25,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';
 
 /**
@@ -123,8 +125,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 +162,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;
@@ -405,26 +407,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 +469,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 +486,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 +507,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 +518,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 +538,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 +548,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 +611,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 +629,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 +641,9 @@ export function form(id) {
 
 							return issues;
 						},
-						() => touched,
-						() => dirty,
-						[]
-					)
+						get_touched: () => touched,
+						get_dirty: () => dirty
+					})
 			},
 			result: {
 				get: () => result
@@ -809,13 +811,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/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-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,

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

@@ -1,6 +1,7 @@
 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,10 +24,12 @@ 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',

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');
@@ -113,6 +113,9 @@ export function get_remote_request_headers() {
 export async function remote_request(url, init) {
 	const response = await fetch(url, init);
 
+	// 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',

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

@@ -25,41 +25,74 @@ export const updated = new (class Updated {
 	check = async () => false;
 })();
 
+/**
+ * Internal: mark `updated.current` as `true` if the given version differs.
+ * Called from the server response header path. No-op unless version checks
+ * are enabled (assigned below). Not exported on the public `updated` object.
+ * @type {(new_version: string | null) => void}
+ */
+export let notify_version = () => {};
+
 if (!DEV && BROWSER) {
 	const interval = __SVELTEKIT_APP_VERSION_POLL_INTERVAL__;
 
-	/** @type {number} */
+	/** @type {number | undefined} */
 	let timeout;
 
+	/** @type {Promise<boolean> | undefined} */
+	let checking;
+
+	if (__SVELTEKIT_APP_VERSION_CHECKS_ENABLED__) {
+		/**
+		 * Mark `updated.current` as `true` if the given version differs from the one
+		 * the app was hydrated with. Called from the server response header path.
+		 * Does NOT reset the poll timer — unlike `check()`, this is a passive observation
+		 * from a single server instance's response, not an explicit version check. The
+		 * poll timer continues on its original schedule as a backstop. This is important
+		 * for platforms that implement skew protection, where `x-sveltekit-version`
+		 * may be out of date — in this case we still need to poll for `version.json`.
+		 * @param {string | null} new_version
+		 */
+		notify_version = (new_version) => {
+			if (new_version && new_version !== version) {
+				updated.current = true;
+			}
+		};
+	}
+
 	/** @type {() => Promise<boolean>} */
-	async function check() {
+	function check() {
+		if (checking) return checking;
+
 		window.clearTimeout(timeout);
 
-		if (interval) timeout = window.setTimeout(check, interval);
+		return (checking = (async () => {
+			try {
+				const res = await fetch(`${assets}/${__SVELTEKIT_APP_VERSION_FILE__}`, {
+					headers: {
+						'cache-control': 'no-cache'
+					}
+				});
 
-		try {
-			const res = await fetch(`${assets}/${__SVELTEKIT_APP_VERSION_FILE__}`, {
-				headers: {
-					'cache-control': 'no-cache'
+				if (!res.ok) {
+					return false;
 				}
-			});
 
-			if (!res.ok) {
-				return false;
-			}
+				const data = await res.json();
+				const new_update = data.version !== version;
 
-			const data = await res.json();
-			const new_update = data.version !== version;
+				if (new_update) {
+					updated.current = true;
+				}
 
-			if (new_update) {
-				updated.current = true;
-				window.clearTimeout(timeout);
+				return new_update;
+			} catch {
+				return false;
+			} finally {
+				checking = undefined;
+				if (interval && !updated.current) timeout = window.setTimeout(check, interval);
 			}
-
-			return new_update;
-		} catch {
-			return false;
-		}
+		})());
 	}
 
 	if (interval) timeout = window.setTimeout(check, interval);