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

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/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'

package/src/runtime/server/page/actions.js

@@ -7,7 +7,7 @@ import { HttpError, Redirect, ActionFailure, SvelteKitError } from '@sveltejs/ki
 import { with_request_store, merge_tracing } from '@sveltejs/kit/internal/server';
 import { normalize_error } from '../../../utils/error.js';
 import { is_form_content_type, negotiate } from '../../../utils/http.js';
-import { create_replacer } from '../utils.js';
+import { create_replacer, with_version_header } from '../utils.js';
 import { handle_error_and_jsonify } from '../errors.js';
 import { record_span } from '../../telemetry/record_span.js';
 
@@ -95,7 +95,7 @@ export async function handle_action_json_request(event, event_state, options, se
 			});
 		} else {
 			// no data returned — use 204 No Content (without a body, per the spec)
-			return new Response(null, { status: 204 });
+			return with_version_header(new Response(null, { status: 204 }));
 		}
 	} catch (e) {
 		const err = normalize_error(e);
@@ -148,7 +148,7 @@ export function action_json_redirect(redirect) {
  * @param {ResponseInit} [init]
  */
 function action_json(data, init) {
-	return json(data, init);
+	return with_version_header(json(data, init));
 }
 
 /**

package/src/runtime/server/page/render.js

@@ -304,6 +304,19 @@ export async function render_response({
 		head.add_style(style, attributes);
 	}
 
+	/**
+	 * see the `output.linkHeaderPreload` option for details on why we have multiple options here
+	 * @param {string} path
+	 * @param {string[]} attributes
+	 */
+	const add_preload = (path, attributes) => {
+		if (options.link_header_preload && !state.prerendering) {
+			link_headers.add(`<${encodeURI(path)}>; ${attributes.join('; ')}; nopush`);
+		} else {
+			head.add_link_tag(path, attributes);
+		}
+	};
+
 	for (const dep of stylesheets) {
 		const path = prefixed(dep);
 
@@ -328,18 +341,7 @@ export async function render_response({
 		if (resolve_opts.preload({ type: 'font', path })) {
 			const ext = dep.slice(dep.lastIndexOf('.') + 1);
 
-			if (options.link_header_preload && !state.prerendering) {
-				link_headers.add(
-					`<${encodeURI(path)}>; rel="preload"; as="font"; type="font/${ext}"; crossorigin; nopush`
-				);
-			} else {
-				head.add_link_tag(path, [
-					'rel="preload"',
-					'as="font"',
-					`type="font/${ext}"`,
-					'crossorigin'
-				]);
-			}
+			add_preload(path, ['rel="preload"', 'as="font"', `type="font/${ext}"`, 'crossorigin']);
 		}
 	}
 
@@ -368,23 +370,12 @@ export async function render_response({
 		}
 
 		if (!client.inline) {
-			const included_modulepreloads = Array.from(modulepreloads, (dep) => prefixed(dep)).filter(
-				(path) => resolve_opts.preload({ type: 'js', path })
-			);
-
-			/** @type {(path: string) => void} */
-			let add_preload;
+			for (const dep of modulepreloads) {
+				const path = prefixed(dep);
 
-			// see the output.preloadStrategy option for details on why we have multiple options here
-			if (options.link_header_preload && !state.prerendering) {
-				add_preload = (path) =>
-					link_headers.add(`<${encodeURI(path)}>; rel="modulepreload"; nopush`);
-			} else {
-				add_preload = (path) => head.add_link_tag(path, ['rel="modulepreload"']);
-			}
-
-			for (const path of included_modulepreloads) {
-				add_preload(path);
+				if (resolve_opts.preload({ type: 'js', path })) {
+					add_preload(path, ['rel="modulepreload"']);
+				}
 			}
 		}
 

package/src/runtime/server/remote-functions.js

@@ -13,6 +13,7 @@ import { check_incorrect_fail_use } from './page/actions.js';
 import { DEV } from 'esm-env';
 import { record_span } from '../telemetry/record_span.js';
 import { deserialize_binary_form } from '../form-utils.js';
+import { with_version_header } from './utils.js';
 
 /**
  * How long (in milliseconds) to wait after the last message was sent before
@@ -28,11 +29,12 @@ export async function handle_remote_call(event, state, options, manifest, id) {
 		attributes: {
 			'sveltekit.remote.call.id': id
 		},
-		fn: (current) => {
+		fn: async (current) => {
 			const traced_event = merge_tracing(event, current);
-			return with_request_store({ event: traced_event, state }, () =>
+			const response = await with_request_store({ event: traced_event, state }, () =>
 				handle_remote_call_internal(traced_event, state, options, manifest, id)
 			);
+			return with_version_header(response);
 		}
 	});
 }
@@ -240,7 +242,11 @@ async function handle_remote_call_internal(event, state, options, manifest, id)
 					);
 				}
 
-				const { data: input, meta, form_data } = await deserialize_binary_form(event.request);
+				const {
+					data: input,
+					meta,
+					form_data
+				} = await deserialize_binary_form(event.request, internals.id);
 				state.remote.requested = create_requested_map(meta.remote_refreshes);
 
 				// If this is a keyed form instance (created via form.for(key)), add the key to the form data (unless already set)
@@ -368,43 +374,64 @@ export async function collect_remote_data(data, event, state, options) {
 	/** @type {Promise<any>[]} */
 	const promises = [];
 
+	// Keys the explicit pass has serialized. Invoking a query's `fn` there can, as a
+	// side effect, register the same query in `state.remote.implicit` (via
+	// `get_response`), so we skip those keys in the implicit pass below to avoid
+	// processing them twice.
+	/** @type {Set<string>} */
+	const processed = new Set();
+
 	if (state.remote.explicit) {
-		for (const [remote_key, { internals, fn }] of state.remote.explicit) {
-			// there were explicit refreshes/reconnects (via `refresh()`/`set()`/`reconnect()`),
-			// so the client should apply these single-flight updates instead of calling `invalidateAll()`
-			data.r = true;
+		const { explicit } = state.remote;
 
-			const type = /** @type {'p' | 'q' | 'l'} */ (
-				internals.type === 'query_live' ? 'l' : internals.type[0]
-			);
+		/** @type {Promise<void>[]} */
+		const inflight = [];
+
+		const drain = () => {
+			for (const [remote_key, { internals, fn }] of explicit) {
+				explicit.delete(remote_key);
+				if (processed.has(remote_key)) continue;
+				processed.add(remote_key);
+
+				// there were explicit refreshes/reconnects (via `refresh()`/`set()`/`reconnect()`),
+				// so the client should apply these single-flight updates instead of calling `invalidateAll()`
+				data.r = true;
 
-			// `fn` is deferred until now so the query runs after any state mutations
-			// in the command/form body. If the query was re-awaited in the meantime,
-			// `fn` returns the existing (fresh) cache entry rather than re-running.
-			// Kick off the query immediately and collect the promise so that multiple
-			// explicit refreshes run concurrently rather than serially.
-			const promise = fn();
-
-			promises.push(
-				promise.then(
-					(v) => {
-						((data[type] ??= {})[remote_key] ??= {}).v = v;
-					},
-					async (e) => {
-						if (e instanceof Redirect) {
-							// already handled elsewhere
-							return;
+				const type = /** @type {'p' | 'q' | 'l'} */ (
+					internals.type === 'query_live' ? 'l' : internals.type[0]
+				);
+
+				// `fn` is deferred until now so the query runs after any state mutations
+				// in the command/form body. If the query was re-awaited in the meantime,
+				// `fn` returns the existing (fresh) cache entry rather than re-running.
+				inflight.push(
+					fn().then(
+						(v) => {
+							// a fresh value replaces the node entirely, so a re-run can't leave
+							// a stale error from a previous run alongside the new value
+							(data[type] ??= {})[remote_key] = { v };
+							drain();
+						},
+						async (e) => {
+							if (!(e instanceof Redirect)) {
+								// (a Redirect is already handled elsewhere)
+								(data[type] ??= {})[remote_key] = { e: await convert_error(e) };
+							}
+							drain();
 						}
+					)
+				);
+			}
+		};
 
-						((data[type] ??= {})[remote_key] ??= {}).e = await convert_error(e);
-					}
-				)
-			);
+		drain();
+
+		// `inflight` grows as settles drain newly-refreshed queries
+		for (const promise of inflight) {
+			await promise;
 		}
 	}
 
-	await Promise.all(promises);
-
 	if (state.remote.implicit) {
 		for (const [internals, record] of state.remote.implicit) {
 			// Private (non-exported) remote functions have no `id` and must never be
@@ -416,6 +443,10 @@ export async function collect_remote_data(data, event, state, options) {
 				// form outputs are registered under the client-side action id directly
 				const remote_key = internals.type === 'form' ? key : create_remote_key(internals.id, key);
 
+				// already serialized by the explicit pass (which always awaits and wins),
+				// so don't reprocess it here with the implicit "still loading" heuristic
+				if (processed.has(remote_key)) continue;
+
 				const type = /** @type {'p' | 'q' | 'l' | 'f'} */ (
 					internals.type === 'query_live' ? 'l' : internals.type[0]
 				);
@@ -540,9 +571,9 @@ async function handle_remote_form_post_internal(event, state, manifest, id) {
 	}
 
 	try {
-		const fn = /** @type {RemoteFormInternals} */ (/** @type {any} */ (form).__).fn;
+		const __ = /** @type {RemoteFormInternals} */ (/** @type {any} */ (form).__);
 
-		const { data, meta, form_data } = await deserialize_binary_form(event.request);
+		const { data, meta, form_data } = await deserialize_binary_form(event.request, __.id);
 
 		if (action_id && !('id' in data)) {
 			data.id = JSON.parse(decodeURIComponent(action_id));
@@ -550,7 +581,7 @@ async function handle_remote_form_post_internal(event, state, manifest, id) {
 
 		await with_request_store(
 			{ event, state: { ...state, is_in_remote_form_or_command: true } },
-			() => fn(data, meta, form_data)
+			() => __.fn(data, meta, form_data)
 		);
 
 		// We don't want the data to appear on `let { form } = $props()`, which is why we're not returning it.