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

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:'));
@@ -25,51 +26,71 @@ 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() {
+	updated.check = function check() {
 		window.clearTimeout(timeout);
 
-		if (interval) timeout = window.setTimeout(check, interval);
+		if (updated.current) {
+			return Promise.resolve(true);
+		}
 
-		try {
-			const res = await fetch(`${assets}/${__SVELTEKIT_APP_VERSION_FILE__}`, {
-				headers: {
-					'cache-control': 'no-cache'
+		return (checking ??= (async () => {
+			try {
+				const res = await fetch(`${assets}/${__SVELTEKIT_APP_VERSION_FILE__}`, {
+					headers: {
+						'cache-control': 'no-cache'
+					}
+				});
+
+				if (!res.ok) {
+					return false;
 				}
-			});
 
-			if (!res.ok) {
+				const data = await res.json();
+				return (updated.current ||= data.version !== version);
+			} catch {
 				return false;
+			} finally {
+				checking = undefined;
+				if (interval && !updated.current) timeout = window.setTimeout(check, interval);
 			}
+		})());
+	};
 
-			const data = await res.json();
-			const new_update = data.version !== version;
-
-			if (new_update) {
-				updated.current = true;
-				window.clearTimeout(timeout);
-			}
-
-			return new_update;
-		} catch {
-			return false;
-		}
-	}
-
-	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/form-utils.js

@@ -10,21 +10,58 @@ import { SvelteKitError } from '@sveltejs/kit/internal';
 const decoder = new TextDecoder();
 
 /**
- * Sets a value in a nested object using a path string, mutating the original object
+ * Sets a parsed form field value in a nested object, mutating the original object.
  * @param {Record<string, any>} object
- * @param {string} path_string
+ * @param {{ name: string; type: 'number' | 'boolean' | null }} field
  * @param {any} value
  */
-export function set_nested_value(object, path_string, value) {
-	if (path_string.startsWith('n:')) {
-		path_string = path_string.slice(2);
-		value = value === '' ? undefined : parseFloat(value);
-	} else if (path_string.startsWith('b:')) {
-		path_string = path_string.slice(2);
-		value = value === 'on';
+export function set_nested_value(object, field, value) {
+	deep_set(object, split_path(field.name), value);
+}
+
+/**
+ * Separates a form field's path from the metadata encoded in its name.
+ * @param {string} form_id
+ * @param {string} key
+ * @returns {{ name: string; type: 'number' | 'boolean' | null; is_array: boolean }}
+ */
+export function parse_form_key(form_id, key) {
+	const suffix = '/' + form_id;
+	let name = key;
+
+	if (!name.endsWith(suffix)) {
+		throw new Error(`Form contained a field that wasn't created with form.fields.as(...): ${name}`);
 	}
 
-	deep_set(object, split_path(path_string), value);
+	name = name.slice(0, -suffix.length);
+
+	/** @type {'number' | 'boolean' | null} */
+	let type = null;
+
+	if (name.startsWith('n:')) {
+		name = name.slice(2);
+		type = 'number';
+	} else if (name.startsWith('b:')) {
+		name = name.slice(2);
+		type = 'boolean';
+	}
+
+	const is_array = name.endsWith('[]');
+	if (is_array) name = name.slice(0, -2);
+
+	return { name, type, is_array };
+}
+
+/**
+ * @param {'number' | 'boolean' | null} type
+ * @param {any} value
+ * @returns {any}
+ */
+export function coerce_form_value(type, value) {
+	if (Array.isArray(value)) return value.map((value) => coerce_form_value(type, value));
+	if (type === 'number') return value === '' ? undefined : parseFloat(value);
+	if (type === 'boolean') return value === 'on';
+	return value;
 }
 
 /** Pass this to set_nested_value to delete the last part of the given path */
@@ -32,38 +69,36 @@ export const DELETE_KEY = {};
 
 /**
  * Convert `FormData` into a POJO
+ * @param {string} form_id
  * @param {FormData} data
  */
-export function convert_formdata(data) {
+export function convert_formdata(form_id, data) {
 	/** @type {Record<string, any>} */
 	const result = {};
 
-	for (let key of data.keys()) {
-		const is_array = key.endsWith('[]');
+	for (const field_name of data.keys()) {
 		/** @type {any[]} */
-		let values = data.getAll(key);
+		const values = data.getAll(field_name);
 
-		if (is_array) key = key.slice(0, -2);
+		const field = parse_form_key(form_id, field_name);
 
 		// an empty `<input type="file">` will submit a non-existent file, bizarrely
-		values = values.filter(
+		const entries = values.filter(
 			(entry) => typeof entry === 'string' || entry.name !== '' || entry.size > 0
 		);
-		if (values.length === 0 && !is_array) continue;
-
-		if (key.startsWith('n:')) {
-			key = key.slice(2);
-			values = values.map((v) => (v === '' ? undefined : parseFloat(/** @type {string} */ (v))));
-		} else if (key.startsWith('b:')) {
-			key = key.slice(2);
-			values = values.map((v) => v === 'on');
-		}
+		if (entries.length === 0 && !field.is_array) continue;
 
-		if (values.length > 1 && !is_array) {
-			throw new Error(`Form cannot contain duplicated keys — "${key}" has ${values.length} values`);
+		if (entries.length > 1 && !field.is_array) {
+			throw new Error(
+				`Form cannot contain duplicated keys — "${field.name}" has ${entries.length} values`
+			);
 		}
 
-		set_nested_value(result, key, is_array ? values : values[0]);
+		set_nested_value(
+			result,
+			field,
+			coerce_form_value(field.type, field.is_array ? entries : entries[0])
+		);
 	}
 
 	return result;
@@ -139,12 +174,13 @@ export function serialize_binary_form(data, meta) {
 
 /**
  * @param {Request} request
+ * @param {string} form_id
  * @returns {Promise<{ data: Record<string, any>; meta: BinaryFormMeta; form_data: FormData | null }>}
  */
-export async function deserialize_binary_form(request) {
+export async function deserialize_binary_form(request, form_id) {
 	if (request.headers.get('content-type') !== BINARY_FORM_CONTENT_TYPE) {
 		const form_data = await request.formData();
-		return { data: convert_formdata(form_data), meta: {}, form_data };
+		return { data: convert_formdata(form_id, form_data), meta: {}, form_data };
 	}
 	if (!request.body) {
 		throw deserialize_error('no body');
@@ -653,18 +689,21 @@ function deep_clone(value) {
 
 /**
  * Creates a proxy-based field accessor for form data
+ * @param {{
+ * 	form_id: string,
+ * 	get: () => Record<string, any>,
+ * 	set: (path: (string | number)[], value: any) => void,
+ * 	get_issues: (path?: (string | number)[], all?: boolean) => Record<string, InternalRemoteFormIssue[]>,
+ * 	get_touched: () => Record<string, boolean>,
+ * 	get_dirty: () => Record<string, boolean>
+ * }} context - Form context, including value accessors and form metadata
  * @param {any} target - Function or empty POJO
- * @param {() => Record<string, any>} get - Function to get current input data
- * @param {(path: (string | number)[], value: any) => void} set - Function to set input data
- * @param {(path?: (string | number)[], all?: boolean) => Record<string, InternalRemoteFormIssue[]>} get_issues - Function to get current issues
- * @param {() => Record<string, boolean>} get_touched - Function to get touched fields
- * @param {() => Record<string, boolean>} get_dirty - Function to get dirty fields
  * @param {(string | number)[]} path - Current access path
  * @returns {any} Proxy object with name(), value(), and issues() methods
  */
-export function create_field_proxy(target, get, set, get_issues, get_touched, get_dirty, path) {
+export function create_field_proxy(context, target = {}, path = []) {
 	const get_value = () => {
-		const value = deep_get(get(), path);
+		const value = deep_get(context.get(), path);
 		return deep_clone(value);
 	};
 
@@ -674,10 +713,7 @@ export function create_field_proxy(target, get, set, get_issues, get_touched, ge
 
 			// Handle array access like jobs[0]
 			if (/^\d+$/.test(prop)) {
-				return create_field_proxy({}, get, set, get_issues, get_touched, get_dirty, [
-					...path,
-					parseInt(prop, 10)
-				]);
+				return create_field_proxy(context, {}, [...path, parseInt(prop, 10)]);
 			}
 
 			const key = build_path_string(path);
@@ -685,20 +721,19 @@ export function create_field_proxy(target, get, set, get_issues, get_touched, ge
 
 			if (prop === 'set') {
 				const set_func = function (/** @type {any} */ newValue) {
-					set(path, newValue);
+					context.set(path, newValue);
 					return newValue;
 				};
-
-				return create_field_proxy(set_func, get, set, get_issues, get_touched, get_dirty, next);
+				return create_field_proxy(context, set_func, next);
 			}
 
 			if (prop === 'value') {
-				return create_field_proxy(get_value, get, set, get_issues, get_touched, get_dirty, next);
+				return create_field_proxy(context, get_value, next);
 			}
 
 			if (prop === 'issues' || prop === 'allIssues') {
 				const issues_func = () => {
-					const all_issues = get_issues(path, prop === 'allIssues')[key === '' ? '$' : key];
+					const all_issues = context.get_issues(path, prop === 'allIssues')[key === '' ? '$' : key];
 
 					if (prop === 'allIssues') {
 						return all_issues?.map((issue) => ({
@@ -717,12 +752,12 @@ export function create_field_proxy(target, get, set, get_issues, get_touched, ge
 					return issues?.length ? issues : undefined;
 				};
 
-				return create_field_proxy(issues_func, get, set, get_issues, get_touched, get_dirty, next);
+				return create_field_proxy(context, issues_func, next);
 			}
 
 			if (prop === 'touched' || prop === 'dirty') {
 				const fn = () => {
-					const object = prop === 'dirty' ? get_dirty() : get_touched();
+					const object = prop === 'dirty' ? context.get_dirty() : context.get_touched();
 
 					if (key === '') {
 						return Object.keys(object).length > 0;
@@ -745,7 +780,7 @@ export function create_field_proxy(target, get, set, get_issues, get_touched, ge
 					return false;
 				};
 
-				return create_field_proxy(fn, get, set, get_issues, get_touched, get_dirty, next);
+				return create_field_proxy(context, fn, next);
 			}
 
 			if (prop === 'as') {
@@ -759,14 +794,14 @@ export function create_field_proxy(target, get, set, get_issues, get_touched, ge
 						type === 'select multiple' ||
 						(type === 'checkbox' && typeof input_value === 'string');
 
-					const prefix = get_type_prefix(type, is_array, input_value);
+					const type_prefix = get_type_prefix(type, is_array, input_value);
 
 					// Base properties for all input types
 					/** @type {Record<string, any>} */
 					const base_props = {
-						name: prefix + key + (is_array ? '[]' : ''),
+						name: type_prefix + key + (is_array ? '[]' : '') + '/' + context.form_id,
 						get 'aria-invalid'() {
-							const issues = get_issues();
+							const issues = context.get_issues();
 							return key in issues ? 'true' : undefined;
 						}
 					};
@@ -911,11 +946,11 @@ export function create_field_proxy(target, get, set, get_issues, get_touched, ge
 					});
 				};
 
-				return create_field_proxy(as_func, get, set, get_issues, get_touched, get_dirty, next);
+				return create_field_proxy(context, as_func, next);
 			}
 
 			// Handle property access (nested fields)
-			return create_field_proxy({}, get, set, get_issues, get_touched, get_dirty, next);
+			return create_field_proxy(context, {}, next);
 		}
 	});
 }

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

@@ -73,7 +73,7 @@ export function get_cookies(request, url) {
 		httpOnly: true,
 		path: '/',
 		sameSite: 'lax',
-		secure: url.hostname === 'localhost' && url.protocol === 'http:' ? false : true
+		secure: !__SVELTEKIT_DEV__ && !(url.hostname === 'localhost' && url.protocol === 'http:')
 	};
 
 	/** @type {import('@sveltejs/kit').Cookies} */

package/src/runtime/server/data/index.js

@@ -7,6 +7,7 @@ import { load_server_data } from '../page/load_data.js';
 import { handle_error_and_jsonify } from '../errors.js';
 import { normalize_path } from '../../../utils/url.js';
 import { text_encoder } from '../../utils.js';
+import { with_version_header } from '../utils.js';
 
 /**
  * @param {import('@sveltejs/kit').RequestEvent} event
@@ -31,9 +32,7 @@ export async function render_data(
 ) {
 	if (!route.page) {
 		// requesting /__data.json should fail for a +server.js
-		return new Response(undefined, {
-			status: 404
-		});
+		return with_version_header(new Response(undefined, { status: 404 }));
 	}
 
 	try {
@@ -123,26 +122,28 @@ export async function render_data(
 			return json_response(data);
 		}
 
-		return new Response(
-			new ReadableStream({
-				async start(controller) {
-					controller.enqueue(text_encoder.encode(data));
-					for await (const chunk of chunks) {
-						controller.enqueue(text_encoder.encode(chunk));
+		return with_version_header(
+			new Response(
+				new ReadableStream({
+					async start(controller) {
+						controller.enqueue(text_encoder.encode(data));
+						for await (const chunk of chunks) {
+							controller.enqueue(text_encoder.encode(chunk));
+						}
+						controller.close();
+					},
+
+					type: 'bytes'
+				}),
+				{
+					headers: {
+						// we use a proprietary content type to prevent buffering.
+						// the `text` prefix makes it inspectable
+						'content-type': 'text/sveltekit-data',
+						'cache-control': 'private, no-store'
 					}
-					controller.close();
-				},
-
-				type: 'bytes'
-			}),
-			{
-				headers: {
-					// we use a proprietary content type to prevent buffering.
-					// the `text` prefix makes it inspectable
-					'content-type': 'text/sveltekit-data',
-					'cache-control': 'private, no-store'
 				}
-			}
+			)
 		);
 	} catch (e) {
 		const error = normalize_error(e);
@@ -161,13 +162,15 @@ export async function render_data(
  * @param {number} [status]
  */
 function json_response(json, status = 200) {
-	return text(typeof json === 'string' ? json : JSON.stringify(json), {
-		status,
-		headers: {
-			'content-type': 'application/json',
-			'cache-control': 'private, no-store'
-		}
-	});
+	return with_version_header(
+		text(typeof json === 'string' ? json : JSON.stringify(json), {
+			status,
+			headers: {
+				'content-type': 'application/json',
+				'cache-control': 'private, no-store'
+			}
+		})
+	);
 }
 
 /**

package/src/runtime/server/errors.js

@@ -17,7 +17,7 @@ export async function handle_fatal_error(event, state, options, error) {
 	const body = await handle_error_and_jsonify(event, state, options, error);
 	const status = body.status;
 
-	// ideally we'd use sec-fetch-dest instead, but Safari — quelle surprise — doesn't support it
+	// sec-fetch-dest would be nicer, but non-browser clients and plain HTTP hosts don't send it
 	const type = negotiate(event.request.headers.get('accept') || 'text/html', [
 		'application/json',
 		'text/html'