@sveltejs/kit 2.43.8 → 2.45.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "2.43.8",
+  "version": "2.45.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,81 +1813,138 @@ 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;
 }
 
+// If the schema specifies `id` as a string or number, ensure that `for(...)`
+// only accepts that type. Otherwise, accept `string | number`
+type ExtractId<Input> = Input extends { id: infer Id }
+	? Id extends string | number
+		? Id
+		: string | number
+	: string | number;
+
 /**
  * The return value of a remote `form` function. See [Remote functions](https://svelte.dev/docs/kit/remote-functions#form) for full documentation.
  */
@@ -1912,8 +1969,8 @@ export type RemoteForm<Input extends RemoteFormInput | void, Output> = {
 		[attachment: symbol]: (node: HTMLFormElement) => void;
 	};
 	/**
-	 * Create an instance of the form for the given key.
-	 * The key is stringified and used for deduplication to potentially reuse existing instances.
+	 * Create an instance of the form for the given `id`.
+	 * The `id` is stringified and used for deduplication to potentially reuse existing instances.
 	 * Useful when you have multiple forms that use the same remote form action, for example in a loop.
 	 * ```svelte
 	 * {#each todos as todo}
@@ -1925,15 +1982,7 @@ export type RemoteForm<Input extends RemoteFormInput | void, Output> = {
 	 *	{/each}
 	 * ```
 	 */
-	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;
+	for(id: ExtractId<Input>): Omit<RemoteForm<Input, Output>, 'for'>;
 	/** Preflight checks */
 	preflight(schema: StandardSchemaV1<Input, any>): RemoteForm<Input, Output>;
 	/** Validate the form contents programmatically */
@@ -1946,10 +1995,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.
@@ -98,10 +105,16 @@ export function form(validate_or_fn, maybe_fn) {
 			/** @param {FormData} form_data */
 			fn: async (form_data) => {
 				const validate_only = form_data.get('sveltekit:validate_only') === 'true';
-				form_data.delete('sveltekit:validate_only');
 
 				let data = maybe_fn ? convert_formdata(form_data) : undefined;
 
+				if (data && data.id === undefined) {
+					const id = form_data.get('sveltekit:id');
+					if (typeof id === 'string') {
+						data.id = JSON.parse(id);
+					}
+				}
+
 				// TODO 3.0 remove this warning
 				if (DEV && !data) {
 					const error = () => {
@@ -128,7 +141,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 +153,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 = {};
+
+						for (let key of form_data.keys()) {
+							// redact sensitive fields
+							if (/^[.\]]?_/.test(key)) continue;
 
-						const is_array = key.endsWith('[]');
-						const values = form_data.getAll(key).filter((value) => typeof value === 'string');
+							const is_array = key.endsWith('[]');
+							const values = form_data.getAll(key).filter((value) => typeof value === 'string');
 
-						if (is_array) key = key.slice(0, -2);
+							if (is_array) key = key.slice(0, -2);
 
-						output.input[key] = is_array ? values : values[0];
+							output.input = set_nested_value(
+								/** @type {Record<string, any>} */ (output.input),
+								key,
+								is_array ? values : values[0]
+							);
+						}
 					}
 				} else {
 					if (validated !== undefined) {
@@ -185,16 +207,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 +253,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

@@ -1,5 +1,5 @@
 /** @import { RequestEvent } from '@sveltejs/kit' */
-/** @import { ServerHooks, MaybePromise, RequestState, RemoteInfo } from 'types' */
+/** @import { ServerHooks, MaybePromise, RequestState, RemoteInfo, RequestStore } from 'types' */
 import { parse } from 'devalue';
 import { error } from '@sveltejs/kit';
 import { with_request_store, get_request_store } from '@sveltejs/kit/internal/server';
@@ -103,44 +103,48 @@ export function parse_remote_response(data, transport) {
  * @param {(arg?: any) => T} fn
  */
 export async function run_remote_function(event, state, allow_cookies, arg, validate, fn) {
-	/** @type {RequestEvent} */
-	const cleansed = {
-		...event,
-		setHeaders: () => {
-			throw new Error('setHeaders is not allowed in remote functions');
-		},
-		cookies: {
-			...event.cookies,
-			set: (name, value, opts) => {
-				if (!allow_cookies) {
-					throw new Error('Cannot set cookies in `query` or `prerender` functions');
-				}
-
-				if (opts.path && !opts.path.startsWith('/')) {
-					throw new Error('Cookies set in remote functions must have an absolute path');
-				}
-
-				return event.cookies.set(name, value, opts);
+	/** @type {RequestStore} */
+	const store = {
+		event: {
+			...event,
+			setHeaders: () => {
+				throw new Error('setHeaders is not allowed in remote functions');
 			},
-			delete: (name, opts) => {
-				if (!allow_cookies) {
-					throw new Error('Cannot delete cookies in `query` or `prerender` functions');
-				}
-
-				if (opts.path && !opts.path.startsWith('/')) {
-					throw new Error('Cookies deleted in remote functions must have an absolute path');
+			cookies: {
+				...event.cookies,
+				set: (name, value, opts) => {
+					if (!allow_cookies) {
+						throw new Error('Cannot set cookies in `query` or `prerender` functions');
+					}
+
+					if (opts.path && !opts.path.startsWith('/')) {
+						throw new Error('Cookies set in remote functions must have an absolute path');
+					}
+
+					return event.cookies.set(name, value, opts);
+				},
+				delete: (name, opts) => {
+					if (!allow_cookies) {
+						throw new Error('Cannot delete cookies in `query` or `prerender` functions');
+					}
+
+					if (opts.path && !opts.path.startsWith('/')) {
+						throw new Error('Cookies deleted in remote functions must have an absolute path');
+					}
+
+					return event.cookies.delete(name, opts);
 				}
-
-				return event.cookies.delete(name, opts);
 			}
 		},
-		route: { id: null },
-		url: new URL(event.url.origin)
+		state: {
+			...state,
+			is_in_remote_function: true
+		}
 	};
 
 	// In two parts, each with_event, so that runtimes without async local storage can still get the event at the start of the function
-	const validated = await with_request_store({ event: cleansed, state }, () => validate(arg));
-	return with_request_store({ event: cleansed, state }, () => fn(validated));
+	const validated = await with_request_store(store, () => validate(arg));
+	return with_request_store(store, () => fn(validated));
 }
 
 /**

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
 					}
 				});