@sveltejs/kit 2.43.7 → 2.44.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "2.43.7",
+  "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/exports/vite/dev/index.js

@@ -234,7 +234,7 @@ export async function dev(vite, vite_config, svelte_config, get_remotes) {
 						// in dev we inline all styles to avoid FOUC. this gets populated lazily so that
 						// components/stylesheets loaded via import() during `load` are included
 						result.inline_styles = async () => {
-							/** @type {Set<import('vite').ModuleNode>} */
+							/** @type {Set<import('vite').ModuleNode | import('vite').EnvironmentModuleNode>} */
 							const deps = new Set();
 
 							for (const module_node of module_nodes) {
@@ -610,8 +610,8 @@ function remove_static_middlewares(server) {
 
 /**
  * @param {import('vite').ViteDevServer} vite
- * @param {import('vite').ModuleNode} node
- * @param {Set<import('vite').ModuleNode>} deps
+ * @param {import('vite').ModuleNode | import('vite').EnvironmentModuleNode} node
+ * @param {Set<import('vite').ModuleNode | import('vite').EnvironmentModuleNode>} deps
  */
 async function find_deps(vite, node, deps) {
 	// since `ssrTransformResult.deps` contains URLs instead of `ModuleNode`s, this process is asynchronous.
@@ -619,7 +619,7 @@ async function find_deps(vite, node, deps) {
 	/** @type {Promise<void>[]} */
 	const branches = [];
 
-	/** @param {import('vite').ModuleNode} node */
+	/** @param {import('vite').ModuleNode | import('vite').EnvironmentModuleNode} node */
 	async function add(node) {
 		if (!deps.has(node)) {
 			deps.add(node);
@@ -629,20 +629,23 @@ async function find_deps(vite, node, deps) {
 
 	/** @param {string} url */
 	async function add_by_url(url) {
-		const node = await vite.moduleGraph.getModuleByUrl(url);
+		const node = await get_server_module_by_url(vite, url);
 
 		if (node) {
 			await add(node);
 		}
 	}
 
-	if (node.ssrTransformResult) {
-		if (node.ssrTransformResult.deps) {
-			node.ssrTransformResult.deps.forEach((url) => branches.push(add_by_url(url)));
+	const transform_result =
+		/** @type {import('vite').ModuleNode} */ (node).ssrTransformResult || node.transformResult;
+
+	if (transform_result) {
+		if (transform_result.deps) {
+			transform_result.deps.forEach((url) => branches.push(add_by_url(url)));
 		}
 
-		if (node.ssrTransformResult.dynamicDeps) {
-			node.ssrTransformResult.dynamicDeps.forEach((url) => branches.push(add_by_url(url)));
+		if (transform_result.dynamicDeps) {
+			transform_result.dynamicDeps.forEach((url) => branches.push(add_by_url(url)));
 		}
 	} else {
 		node.importedModules.forEach((node) => branches.push(add(node)));
@@ -651,6 +654,16 @@ async function find_deps(vite, node, deps) {
 	await Promise.all(branches);
 }
 
+/**
+ * @param {import('vite').ViteDevServer} vite
+ * @param {string} url
+ */
+function get_server_module_by_url(vite, url) {
+	return vite.environments
+		? vite.environments.ssr.moduleGraph.getModuleByUrl(url)
+		: vite.moduleGraph.getModuleByUrl(url, true);
+}
+
 /**
  * Determine if a file is being requested with the correct case,
  * to ensure consistent behaviour between dev and prod and across

package/src/exports/vite/index.js

@@ -298,6 +298,23 @@ async function kit({ svelte_config }) {
 						`${kit.files.routes}/**/+*.{svelte,js,ts}`,
 						`!${kit.files.routes}/**/+*server.*`
 					],
+					esbuildOptions: {
+						plugins: [
+							{
+								name: 'vite-plugin-sveltekit-setup:optimize',
+								setup(build) {
+									if (!kit.experimental.remoteFunctions) return;
+
+									const filter = new RegExp(
+										`.remote(${kit.moduleExtensions.join('|')})$`.replaceAll('.', '\\.')
+									);
+
+									// treat .remote.js files as empty for the purposes of prebundling
+									build.onLoad({ filter }, () => ({ contents: '' }));
+								}
+							}
+						]
+					},
 					exclude: [
 						// Without this SvelteKit will be prebundled on the client, which means we end up with two versions of Redirect etc.
 						// Also see https://github.com/sveltejs/kit/issues/5952#issuecomment-1218844057
@@ -697,7 +714,8 @@ async function kit({ svelte_config }) {
 		},
 
 		async transform(code, id, opts) {
-			if (!svelte_config.kit.moduleExtensions.some((ext) => id.endsWith(`.remote${ext}`))) {
+			const normalized = normalize_id(id, normalized_lib, normalized_cwd);
+			if (!svelte_config.kit.moduleExtensions.some((ext) => normalized.endsWith(`.remote${ext}`))) {
 				return;
 			}
 
@@ -770,8 +788,14 @@ async function kit({ svelte_config }) {
 				return `export const ${name} = ${namespace}.${type}('${remote.hash}/${name}');`;
 			});
 
+			let result = `import * as ${namespace} from '__sveltekit/remote';\n\n${exports.join('\n')}\n`;
+
+			if (dev_server) {
+				result += `\nimport.meta.hot?.accept();\n`;
+			}
+
 			return {
-				code: `import * as ${namespace} from '__sveltekit/remote';\n\n${exports.join('\n')}\n`
+				code: result
 			};
 		},
 

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