@sveltejs/kit 2.43.8 → 2.44.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "2.43.8",
+  "version": "2.44.0",
   "description": "SvelteKit is the fastest way to build Svelte apps",
   "keywords": [
     "framework",
@@ -41,7 +41,7 @@
     "@types/set-cookie-parser": "^2.4.7",
     "dts-buddy": "^0.6.2",
     "rollup": "^4.14.2",
-    "svelte": "^5.39.3",
+    "svelte": "^5.39.8",
     "svelte-preprocess": "^6.0.0",
     "typescript": "^5.3.3",
     "vite": "^6.3.5",

package/src/core/postbuild/prerender.js

@@ -320,7 +320,8 @@ async function prerender({ hash, out, manifest_path, metadata, verbose, env }) {
 		// avoid triggering `filterSerializeResponseHeaders` guard
 		const headers = Object.fromEntries(response.headers);
 
-		if (config.prerender.crawl && headers['content-type'] === 'text/html') {
+		// if it's a 200 HTML response, crawl it. Skip error responses, as we don't save those
+		if (response.ok && config.prerender.crawl && headers['content-type'] === 'text/html') {
 			const { ids, hrefs } = crawl(body.toString(), decoded);
 
 			actual_hashlinks.set(decoded, ids);

package/src/exports/public.d.ts

@@ -1813,78 +1813,127 @@ export interface Snapshot<T = any> {
 // If T is unknown or has an index signature, the types below will recurse indefinitely and create giant unions that TS can't handle
 type WillRecurseIndefinitely<T> = unknown extends T ? true : string extends keyof T ? true : false;
 
-// Helper type to convert union to intersection
-type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void
-	? I
-	: never;
-
-type FlattenInput<T, Prefix extends string> = T extends string | number | boolean | null | undefined
-	? { [P in Prefix]: string }
-	: WillRecurseIndefinitely<T> extends true
-		? { [key: string]: string }
-		: T extends Array<infer U>
-			? U extends string | File
-				? { [P in Prefix]: string[] }
-				: FlattenInput<U, `${Prefix}[${number}]`>
-			: T extends File
-				? { [P in Prefix]: string }
-				: {
-						// Required<T> is crucial here to avoid an undefined type to sneak into the union, which would turn the intersection into never
-						[K in keyof Required<T>]: FlattenInput<
-							T[K],
-							Prefix extends '' ? K & string : `${Prefix}.${K & string}`
-						>;
-					}[keyof T];
-
-type FlattenIssues<T, Prefix extends string> = T extends
-	| string
-	| number
-	| boolean
-	| null
-	| undefined
-	? { [P in Prefix]: RemoteFormIssue[] }
-	: WillRecurseIndefinitely<T> extends true
-		? { [key: string]: RemoteFormIssue[] }
-		: T extends Array<infer U>
-			? { [P in Prefix | `${Prefix}[${number}]`]: RemoteFormIssue[] } & FlattenIssues<
-					U,
-					`${Prefix}[${number}]`
-				>
-			: T extends File
-				? { [P in Prefix]: RemoteFormIssue[] }
-				: {
-						// Required<T> is crucial here to avoid an undefined type to sneak into the union, which would turn the intersection into never
-						[K in keyof Required<T>]: FlattenIssues<
-							T[K],
-							Prefix extends '' ? K & string : `${Prefix}.${K & string}`
-						>;
-					}[keyof T];
-
-type FlattenKeys<T, Prefix extends string> = T extends string | number | boolean | null | undefined
-	? { [P in Prefix]: string }
-	: WillRecurseIndefinitely<T> extends true
-		? { [key: string]: string }
-		: T extends Array<infer U>
-			? U extends string | File
-				? { [P in `${Prefix}[]`]: string[] }
-				: FlattenKeys<U, `${Prefix}[${number}]`>
-			: T extends File
-				? { [P in Prefix]: string }
-				: {
-						// Required<T> is crucial here to avoid an undefined type to sneak into the union, which would turn the intersection into never
-						[K in keyof Required<T>]: FlattenKeys<
-							T[K],
-							Prefix extends '' ? K & string : `${Prefix}.${K & string}`
-						>;
-					}[keyof T];
+// Input type mappings for form fields
+type InputTypeMap = {
+	text: string;
+	email: string;
+	password: string;
+	url: string;
+	tel: string;
+	search: string;
+	number: number;
+	range: number;
+	date: string;
+	'datetime-local': string;
+	time: string;
+	month: string;
+	week: string;
+	color: string;
+	checkbox: boolean | string[];
+	radio: string;
+	file: File;
+	hidden: string;
+	submit: string;
+	button: string;
+	reset: string;
+	image: string;
+	select: string;
+	'select multiple': string[];
+	'file multiple': File[];
+};
+
+// Valid input types for a given value type
+export type RemoteFormFieldType<T> = {
+	[K in keyof InputTypeMap]: T extends InputTypeMap[K] ? K : never;
+}[keyof InputTypeMap];
+
+// Input element properties based on type
+type InputElementProps<T extends keyof InputTypeMap> = T extends 'checkbox' | 'radio'
+	? {
+			type: T;
+			'aria-invalid': boolean | 'false' | 'true' | undefined;
+			get checked(): boolean;
+			set checked(value: boolean);
+		}
+	: T extends 'file'
+		? {
+				type: 'file';
+				'aria-invalid': boolean | 'false' | 'true' | undefined;
+				get files(): FileList | null;
+				set files(v: FileList | null);
+			}
+		: {
+				type: T;
+				'aria-invalid': boolean | 'false' | 'true' | undefined;
+				get value(): string | number;
+				set value(v: string | number);
+			};
+
+type RemoteFormFieldMethods<T> = {
+	/** The values that will be submitted */
+	value(): T;
+	/** Set the values that will be submitted */
+	set(input: T): T;
+	/** Validation issues, if any */
+	issues(): RemoteFormIssue[] | undefined;
+};
+
+export type RemoteFormFieldValue = string | string[] | number | boolean | File | File[];
+
+type AsArgs<Type extends keyof InputTypeMap, Value> = Type extends 'checkbox'
+	? Value extends string[]
+		? [type: 'checkbox', value: Value[number] | (string & {})]
+		: [type: Type]
+	: Type extends 'radio'
+		? [type: 'radio', value: Value | (string & {})]
+		: [type: Type];
+
+/**
+ * Form field accessor type that provides name(), value(), and issues() methods
+ */
+export type RemoteFormField<Value extends RemoteFormFieldValue> = RemoteFormFieldMethods<Value> & {
+	/**
+	 * Returns an object that can be spread onto an input element with the correct type attribute,
+	 * aria-invalid attribute if the field is invalid, and appropriate value/checked property getters/setters.
+	 * @example
+	 * ```svelte
+	 * <input {...myForm.fields.myString.as('text')} />
+	 * <input {...myForm.fields.myNumber.as('number')} />
+	 * <input {...myForm.fields.myBoolean.as('checkbox')} />
+	 * ```
+	 */
+	as<T extends RemoteFormFieldType<Value>>(...args: AsArgs<T, Value>): InputElementProps<T>;
+};
+
+type RemoteFormFieldContainer<Value> = RemoteFormFieldMethods<Value> & {
+	/** Validation issues belonging to this or any of the fields that belong to it, if any */
+	allIssues(): RemoteFormIssue[] | undefined;
+};
+
+/**
+ * Recursive type to build form fields structure with proxy access
+ */
+type RemoteFormFields<T> =
+	WillRecurseIndefinitely<T> extends true
+		? RecursiveFormFields
+		: NonNullable<T> extends string | number | boolean | File
+			? RemoteFormField<NonNullable<T>>
+			: T extends string[] | File[]
+				? RemoteFormField<T> & { [K in number]: RemoteFormField<T[number]> }
+				: T extends Array<infer U>
+					? RemoteFormFieldContainer<T> & { [K in number]: RemoteFormFields<U> }
+					: RemoteFormFieldContainer<T> & { [K in keyof T]-?: RemoteFormFields<T[K]> };
+
+// By breaking this out into its own type, we avoid the TS recursion depth limit
+type RecursiveFormFields = RemoteFormField<any> & { [key: string]: RecursiveFormFields };
+
+type MaybeArray<T> = T | T[];
 
 export interface RemoteFormInput {
-	[key: string]: FormDataEntryValue | FormDataEntryValue[] | RemoteFormInput | RemoteFormInput[];
+	[key: string]: MaybeArray<string | number | boolean | File | RemoteFormInput>;
 }
 
 export interface RemoteFormIssue {
-	name: string;
-	path: Array<string | number>;
 	message: string;
 }
 
@@ -1926,14 +1975,6 @@ export type RemoteForm<Input extends RemoteFormInput | void, Output> = {
 	 * ```
 	 */
 	for(key: string | number | boolean): Omit<RemoteForm<Input, Output>, 'for'>;
-	/**
-	 * This method exists to allow you to typecheck `name` attributes. It returns its argument
-	 * @example
-	 * ```svelte
-	 * <input name={login.field('username')} />
-	 * ```
-	 **/
-	field<Name extends keyof UnionToIntersection<FlattenKeys<Input, ''>>>(string: Name): Name;
 	/** Preflight checks */
 	preflight(schema: StandardSchemaV1<Input, any>): RemoteForm<Input, Output>;
 	/** Validate the form contents programmatically */
@@ -1946,10 +1987,8 @@ export type RemoteForm<Input extends RemoteFormInput | void, Output> = {
 	get result(): Output | undefined;
 	/** The number of pending submissions */
 	get pending(): number;
-	/** The submitted values */
-	input: null | UnionToIntersection<FlattenInput<Input, ''>>;
-	/** Validation issues */
-	issues: null | UnionToIntersection<FlattenIssues<Input, ''>>;
+	/** Access form fields using object notation */
+	fields: Input extends void ? never : RemoteFormFields<Input>;
 	/** Spread this onto a `<button>` or `<input type="submit">` */
 	buttonProps: {
 		type: 'submit';

package/src/runtime/app/server/remote/form.js

@@ -1,10 +1,17 @@
 /** @import { RemoteFormInput, RemoteForm } from '@sveltejs/kit' */
-/** @import { MaybePromise, RemoteInfo } from 'types' */
+/** @import { InternalRemoteFormIssue, MaybePromise, RemoteInfo } from 'types' */
 /** @import { StandardSchemaV1 } from '@standard-schema/spec' */
 import { get_request_store } from '@sveltejs/kit/internal/server';
 import { DEV } from 'esm-env';
+import {
+	convert_formdata,
+	flatten_issues,
+	create_field_proxy,
+	set_nested_value,
+	throw_on_old_property_access,
+	deep_set
+} from '../../../form-utils.svelte.js';
 import { get_cache, run_remote_function } from './shared.js';
-import { convert_formdata, flatten_issues } from '../../../utils.js';
 
 /**
  * Creates a form object that can be spread onto a `<form>` element.
@@ -128,7 +135,7 @@ export function form(validate_or_fn, maybe_fn) {
 					}
 				}
 
-				/** @type {{ input?: Record<string, string | string[]>, issues?: Record<string, StandardSchemaV1.Issue[]>, result: Output }} */
+				/** @type {{ input?: Record<string, any>, issues?: Record<string, InternalRemoteFormIssue[]>, result: Output }} */
 				const output = {};
 
 				const { event, state } = get_request_store();
@@ -140,18 +147,27 @@ export function form(validate_or_fn, maybe_fn) {
 
 				if (validated?.issues !== undefined) {
 					output.issues = flatten_issues(validated.issues);
-					output.input = {};
 
-					for (let key of form_data.keys()) {
-						// redact sensitive fields
-						if (/^[.\]]?_/.test(key)) continue;
+					// if it was a progressively-enhanced submission, we don't need
+					// to return the input — it's already there
+					if (!event.isRemoteRequest) {
+						output.input = {};
 
-						const is_array = key.endsWith('[]');
-						const values = form_data.getAll(key).filter((value) => typeof value === 'string');
+						for (let key of form_data.keys()) {
+							// redact sensitive fields
+							if (/^[.\]]?_/.test(key)) continue;
 
-						if (is_array) key = key.slice(0, -2);
+							const is_array = key.endsWith('[]');
+							const values = form_data.getAll(key).filter((value) => typeof value === 'string');
 
-						output.input[key] = is_array ? values : values[0];
+							if (is_array) key = key.slice(0, -2);
+
+							output.input = set_nested_value(
+								/** @type {Record<string, any>} */ (output.input),
+								key,
+								is_array ? values : values[0]
+							);
+						}
 					}
 				} else {
 					if (validated !== undefined) {
@@ -185,16 +201,30 @@ export function form(validate_or_fn, maybe_fn) {
 			enumerable: true
 		});
 
-		for (const property of ['input', 'issues']) {
-			Object.defineProperty(instance, property, {
-				get() {
-					try {
-						return get_cache(__)?.['']?.[property] ?? {};
-					} catch {
-						return undefined;
-					}
-				}
-			});
+		Object.defineProperty(instance, 'fields', {
+			get() {
+				const data = get_cache(__)?.[''];
+				return create_field_proxy(
+					{},
+					() => data?.input ?? {},
+					(path, value) => {
+						if (data) {
+							// don't override a submission
+							return;
+						}
+
+						const input = path.length === 0 ? value : deep_set({}, path.map(String), value);
+
+						get_cache(__)[''] ??= { input };
+					},
+					() => data?.issues ?? {}
+				);
+			}
+		});
+
+		// TODO 3.0 remove
+		if (DEV) {
+			throw_on_old_property_access(instance);
 		}
 
 		Object.defineProperty(instance, 'result', {
@@ -217,10 +247,6 @@ export function form(validate_or_fn, maybe_fn) {
 			get: () => 0
 		});
 
-		Object.defineProperty(instance, 'field', {
-			value: (/** @type {string} */ name) => name
-		});
-
 		Object.defineProperty(instance, 'preflight', {
 			// preflight is a noop on the server
 			value: () => instance

package/src/runtime/app/server/remote/shared.js

@@ -133,9 +133,7 @@ export async function run_remote_function(event, state, allow_cookies, arg, vali
 
 				return event.cookies.delete(name, opts);
 			}
-		},
-		route: { id: null },
-		url: new URL(event.url.origin)
+		}
 	};
 
 	// In two parts, each with_event, so that runtimes without async local storage can still get the event at the start of the function

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

@@ -40,7 +40,9 @@ export function command(id) {
 						refreshes: updates.map((u) => u._key)
 					}),
 					headers: {
-						'Content-Type': 'application/json'
+						'Content-Type': 'application/json',
+						'x-sveltekit-pathname': location.pathname,
+						'x-sveltekit-search': location.search
 					}
 				});
 

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

@@ -1,6 +1,6 @@
 /** @import { StandardSchemaV1 } from '@standard-schema/spec' */
 /** @import { RemoteFormInput, RemoteForm, RemoteQueryOverride } from '@sveltejs/kit' */
-/** @import { RemoteFunctionResponse } from 'types' */
+/** @import { InternalRemoteFormIssue, RemoteFunctionResponse } from 'types' */
 /** @import { Query } from './query.svelte.js' */
 import { app_dir, base } from '$app/paths/internal/client';
 import * as devalue from 'devalue';
@@ -10,7 +10,34 @@ import { app, remote_responses, _goto, set_nearest_error_page, invalidateAll } f
 import { tick } from 'svelte';
 import { refresh_queries, release_overrides } from './shared.svelte.js';
 import { createAttachmentKey } from 'svelte/attachments';
-import { convert_formdata, file_transport, flatten_issues } from '../../utils.js';
+import {
+	convert_formdata,
+	flatten_issues,
+	create_field_proxy,
+	deep_set,
+	set_nested_value,
+	throw_on_old_property_access
+} from '../../form-utils.svelte.js';
+
+/**
+ * Merge client issues into server issues
+ * @param {Record<string, InternalRemoteFormIssue[]>} current_issues
+ * @param {Record<string, InternalRemoteFormIssue[]>} client_issues
+ * @returns {Record<string, InternalRemoteFormIssue[]>}
+ */
+function merge_with_server_issues(current_issues, client_issues) {
+	const merged_issues = Object.fromEntries(
+		Object.entries(current_issues)
+			.map(([key, issue_list]) => [key, issue_list.filter((issue) => issue.server)])
+			.filter(([, issue_list]) => issue_list.length > 0)
+	);
+
+	for (const [key, new_issue_list] of Object.entries(client_issues)) {
+		merged_issues[key] = [...(merged_issues[key] || []), ...new_issue_list];
+	}
+
+	return merged_issues;
+}
 
 /**
  * Client-version of the `form` function from `$app/server`.
@@ -28,10 +55,14 @@ export function form(id) {
 		const action_id = id + (key != undefined ? `/${JSON.stringify(key)}` : '');
 		const action = '?/remote=' + encodeURIComponent(action_id);
 
-		/** @type {Record<string, string | string[] | File | File[]>} */
-		let input = $state({});
+		/**
+		 * By making this $state.raw() and creating a new object each time we update it,
+		 * all consumers along the update chain are properly invalidated.
+		 * @type {Record<string, string | string[] | File | File[]>}
+		 */
+		let input = $state.raw({});
 
-		/** @type {Record<string, StandardSchemaV1.Issue[]>} */
+		/** @type {Record<string, InternalRemoteFormIssue[]>} */
 		let issues = $state.raw({});
 
 		/** @type {any} */
@@ -49,6 +80,8 @@ export function form(id) {
 		/** @type {Record<string, boolean>} */
 		let touched = {};
 
+		let submitted = false;
+
 		/**
 		 * @param {HTMLFormElement} form
 		 * @param {FormData} form_data
@@ -57,10 +90,13 @@ export function form(id) {
 		async function handle_submit(form, form_data, callback) {
 			const data = convert_formdata(form_data);
 
+			submitted = true;
+
 			const validated = await preflight_schema?.['~standard'].validate(data);
 
 			if (validated?.issues) {
-				issues = flatten_issues(validated.issues);
+				const client_issues = flatten_issues(validated.issues, false);
+				issues = merge_with_server_issues(issues, client_issues);
 				return;
 			}
 
@@ -134,7 +170,11 @@ export function form(id) {
 
 					const response = await fetch(`${base}/${app_dir}/remote/${action_id}`, {
 						method: 'POST',
-						body: data
+						body: data,
+						headers: {
+							'x-sveltekit-pathname': location.pathname,
+							'x-sveltekit-search': location.search
+						}
 					});
 
 					if (!response.ok) {
@@ -146,21 +186,25 @@ export function form(id) {
 					const form_result = /** @type { RemoteFunctionResponse} */ (await response.json());
 
 					if (form_result.type === 'result') {
-						({
-							input = {},
-							issues = {},
-							result
-						} = devalue.parse(form_result.result, {
-							...app.decoders,
-							File: file_transport.decode
-						}));
+						({ issues = {}, result } = devalue.parse(form_result.result, app.decoders));
+
+						// Mark server issues with server: true
+						for (const issue_list of Object.values(issues)) {
+							for (const issue of issue_list) {
+								issue.server = true;
+							}
+						}
 
 						if (issues.$) {
 							release_overrides(updates);
-						} else if (form_result.refreshes) {
-							refresh_queries(form_result.refreshes, updates);
 						} else {
-							void invalidateAll();
+							input = {};
+
+							if (form_result.refreshes) {
+								refresh_queries(form_result.refreshes, updates);
+							} else {
+								void invalidateAll();
+							}
 						}
 					} else if (form_result.type === 'redirect') {
 						const refreshes = form_result.refreshes ?? '';
@@ -275,23 +319,37 @@ export function form(id) {
 					touched[name] = true;
 
 					if (is_array) {
-						const elements = /** @type {HTMLInputElement[]} */ (
-							Array.from(form.querySelectorAll(`[name="${name}[]"]`))
-						);
+						let value;
 
-						if (DEV) {
-							for (const e of elements) {
-								if ((e.type === 'file') !== is_file) {
-									throw new Error(
-										`Cannot mix and match file and non-file inputs under the same name ("${element.name}")`
-									);
+						if (element.tagName === 'SELECT') {
+							value = Array.from(
+								element.querySelectorAll('option:checked'),
+								(e) => /** @type {HTMLOptionElement} */ (e).value
+							);
+						} else {
+							const elements = /** @type {HTMLInputElement[]} */ (
+								Array.from(form.querySelectorAll(`[name="${name}[]"]`))
+							);
+
+							if (DEV) {
+								for (const e of elements) {
+									if ((e.type === 'file') !== is_file) {
+										throw new Error(
+											`Cannot mix and match file and non-file inputs under the same name ("${element.name}")`
+										);
+									}
 								}
 							}
+
+							value = is_file
+								? elements.map((input) => Array.from(input.files ?? [])).flat()
+								: elements.map((element) => element.value);
+							if (element.type === 'checkbox') {
+								value = /** @type {string[]} */ (value.filter((_, i) => elements[i].checked));
+							}
 						}
 
-						input[name] = is_file
-							? elements.map((input) => Array.from(input.files ?? [])).flat()
-							: elements.map((element) => element.value);
+						input = set_nested_value(input, name, value);
 					} else if (is_file) {
 						if (DEV && element.multiple) {
 							throw new Error(
@@ -302,12 +360,23 @@ export function form(id) {
 						const file = /** @type {HTMLInputElement & { files: FileList }} */ (element).files[0];
 
 						if (file) {
-							input[name] = file;
+							input = set_nested_value(input, name, file);
 						} else {
-							delete input[name];
+							// Remove the property by setting to undefined and clean up
+							const path_parts = name.split(/\.|\[|\]/).filter(Boolean);
+							let current = /** @type {any} */ (input);
+							for (let i = 0; i < path_parts.length - 1; i++) {
+								if (current[path_parts[i]] == null) return;
+								current = current[path_parts[i]];
+							}
+							delete current[path_parts[path_parts.length - 1]];
 						}
 					} else {
-						input[name] = element.value;
+						input = set_nested_value(
+							input,
+							name,
+							element.type === 'checkbox' && !element.checked ? null : element.value
+						);
 					}
 				});
 
@@ -387,18 +456,29 @@ export function form(id) {
 
 		let validate_id = 0;
 
+		// TODO 3.0 remove
+		if (DEV) {
+			throw_on_old_property_access(instance);
+		}
+
 		Object.defineProperties(instance, {
 			buttonProps: {
 				value: button_props
 			},
-			input: {
-				get: () => input,
-				set: (v) => {
-					input = v;
-				}
-			},
-			issues: {
-				get: () => issues
+			fields: {
+				get: () =>
+					create_field_proxy(
+						{},
+						() => input,
+						(path, value) => {
+							if (path.length === 0) {
+								input = value;
+							} else {
+								input = deep_set(input, path.map(String), value);
+							}
+						},
+						() => issues
+					)
 			},
 			result: {
 				get: () => result
@@ -406,11 +486,8 @@ export function form(id) {
 			pending: {
 				get: () => pending_count
 			},
-			field: {
-				value: (/** @type {string} */ name) => name
-			},
 			preflight: {
-				/** @type {RemoteForm<any, any>['preflight']} */
+				/** @type {RemoteForm<T, U>['preflight']} */
 				value: (schema) => {
 					preflight_schema = schema;
 					return instance;
@@ -455,7 +532,7 @@ export function form(id) {
 						}
 					}
 
-					if (!includeUntouched) {
+					if (!includeUntouched && !submitted) {
 						array = array.filter((issue) => {
 							if (issue.path !== undefined) {
 								let path = '';
@@ -475,7 +552,10 @@ export function form(id) {
 						});
 					}
 
-					issues = flatten_issues(array);
+					const is_server_validation = !validated?.issues;
+					const new_issues = flatten_issues(array, is_server_validation);
+
+					issues = is_server_validation ? new_issues : merge_with_server_issues(issues, new_issues);
 				}
 			},
 			enhance: {