@sveltejs/kit 2.40.0 → 2.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "2.40.0",
+  "version": "2.42.0",
   "description": "SvelteKit is the fastest way to build Svelte apps",
   "keywords": [
     "framework",

package/src/core/sync/write_server.js

@@ -7,6 +7,7 @@ import { load_error_page, load_template } from '../config/index.js';
 import { runtime_directory } from '../utils.js';
 import { isSvelte5Plus, write_if_changed } from './utils.js';
 import colors from 'kleur';
+import { escape_html } from '../../utils/escape.js';
 
 /**
  * @param {{
@@ -54,6 +55,7 @@ export const options = {
 			.replace('%sveltekit.body%', '" + body + "')
 			.replace(/%sveltekit\.assets%/g, '" + assets + "')
 			.replace(/%sveltekit\.nonce%/g, '" + nonce + "')
+			.replace(/%sveltekit\.version%/g, escape_html(config.kit.version.name))
 			.replace(
 				/%sveltekit\.env\.([^%]+)%/g,
 				(_match, capture) => `" + (env[${s(capture)}] ?? "") + "`

package/src/exports/public.d.ts

@@ -1810,28 +1810,105 @@ export interface Snapshot<T = any> {
 	restore: (snapshot: T) => void;
 }
 
+// If T is unknown or RemoteFormInput, the types below will recurse indefinitely and create giant unions that TS can't handle
+type WillRecurseIndefinitely<T> = unknown extends T
+	? true
+	: RemoteFormInput extends 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> =
+	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 }
+				: T extends object
+					? {
+							[K in keyof T]: FlattenInput<
+								T[K],
+								Prefix extends '' ? K & string : `${Prefix}.${K & string}`
+							>;
+						}[keyof T]
+					: { [P in Prefix]: string };
+
+type FlattenIssues<T, Prefix extends string> =
+	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[] }
+				: T extends object
+					? {
+							[K in keyof T]: FlattenIssues<
+								T[K],
+								Prefix extends '' ? K & string : `${Prefix}.${K & string}`
+							>;
+						}[keyof T]
+					: { [P in Prefix]: RemoteFormIssue[] };
+
+type FlattenKeys<T, Prefix extends 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 }
+				: T extends object
+					? {
+							[K in keyof T]: FlattenKeys<
+								T[K],
+								Prefix extends '' ? K & string : `${Prefix}.${K & string}`
+							>;
+						}[keyof T]
+					: { [P in Prefix]: string };
+
+export interface RemoteFormInput {
+	[key: string]: FormDataEntryValue | FormDataEntryValue[] | RemoteFormInput | RemoteFormInput[];
+}
+
+export interface RemoteFormIssue {
+	name: string;
+	path: Array<string | number>;
+	message: string;
+}
+
 /**
  * The return value of a remote `form` function. See [Remote functions](https://svelte.dev/docs/kit/remote-functions#form) for full documentation.
  */
-export type RemoteForm<Result> = {
+export type RemoteForm<Input extends RemoteFormInput | void, Output> = {
+	/** Attachment that sets up an event handler that intercepts the form submission on the client to prevent a full page reload */
+	[attachment: symbol]: (node: HTMLFormElement) => void;
 	method: 'POST';
 	/** The URL to send the form to. */
 	action: string;
-	/** Event handler that intercepts the form submission on the client to prevent a full page reload */
-	onsubmit: (event: SubmitEvent) => void;
 	/** Use the `enhance` method to influence what happens when the form is submitted. */
 	enhance(
 		callback: (opts: {
 			form: HTMLFormElement;
-			data: FormData;
+			data: Input;
 			submit: () => Promise<void> & {
 				updates: (...queries: Array<RemoteQuery<any> | RemoteQueryOverride>) => Promise<void>;
 			};
-		}) => void
+		}) => void | Promise<void>
 	): {
 		method: 'POST';
 		action: string;
-		onsubmit: (event: SubmitEvent) => void;
+		[attachment: symbol]: (node: HTMLFormElement) => void;
 	};
 	/**
 	 * Create an instance of the form for the given key.
@@ -1847,11 +1924,27 @@ export type RemoteForm<Result> = {
 	 *	{/each}
 	 * ```
 	 */
-	for(key: string | number | boolean): Omit<RemoteForm<Result>, 'for'>;
+	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 */
+	validate(options?: { includeUntouched?: boolean }): Promise<void>;
 	/** The result of the form submission */
-	get result(): Result | undefined;
+	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, ''>>;
 	/** Spread this onto a `<button>` or `<input type="submit">` */
 	buttonProps: {
 		type: 'submit';
@@ -1862,11 +1955,11 @@ export type RemoteForm<Result> = {
 		enhance(
 			callback: (opts: {
 				form: HTMLFormElement;
-				data: FormData;
+				data: Input;
 				submit: () => Promise<void> & {
 					updates: (...queries: Array<RemoteQuery<any> | RemoteQueryOverride>) => Promise<void>;
 				};
-			}) => void
+			}) => void | Promise<void>
 		): {
 			type: 'submit';
 			formmethod: 'POST';

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

@@ -1,34 +1,77 @@
-/** @import { RemoteForm } from '@sveltejs/kit' */
-/** @import { RemoteInfo, MaybePromise } from 'types' */
+/** @import { RemoteFormInput, RemoteForm } from '@sveltejs/kit' */
+/** @import { 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 { 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.
  *
  * See [Remote functions](https://svelte.dev/docs/kit/remote-functions#form) for full documentation.
  *
- * @template T
- * @param {(data: FormData) => MaybePromise<T>} fn
- * @returns {RemoteForm<T>}
+ * @template Output
+ * @overload
+ * @param {() => Output} fn
+ * @returns {RemoteForm<void, Output>}
+ * @since 2.27
+ */
+/**
+ * Creates a form object that can be spread onto a `<form>` element.
+ *
+ * See [Remote functions](https://svelte.dev/docs/kit/remote-functions#form) for full documentation.
+ *
+ * @template {RemoteFormInput} Input
+ * @template Output
+ * @overload
+ * @param {'unchecked'} validate
+ * @param {(data: Input) => MaybePromise<Output>} fn
+ * @returns {RemoteForm<Input, Output>}
+ * @since 2.27
+ */
+/**
+ * Creates a form object that can be spread onto a `<form>` element.
+ *
+ * See [Remote functions](https://svelte.dev/docs/kit/remote-functions#form) for full documentation.
+ *
+ * @template {StandardSchemaV1<RemoteFormInput, Record<string, any>>} Schema
+ * @template Output
+ * @overload
+ * @param {Schema} validate
+ * @param {(data: StandardSchemaV1.InferOutput<Schema>) => MaybePromise<Output>} fn
+ * @returns {RemoteForm<StandardSchemaV1.InferInput<Schema>, Output>}
+ * @since 2.27
+ */
+/**
+ * @template {RemoteFormInput} Input
+ * @template Output
+ * @param {any} validate_or_fn
+ * @param {(data?: Input) => MaybePromise<Output>} [maybe_fn]
+ * @returns {RemoteForm<Input, Output>}
  * @since 2.27
  */
 /*@__NO_SIDE_EFFECTS__*/
 // @ts-ignore we don't want to prefix `fn` with an underscore, as that will be user-visible
-export function form(fn) {
+export function form(validate_or_fn, maybe_fn) {
+	/** @type {(data?: Input) => Output} */
+	const fn = maybe_fn ?? validate_or_fn;
+
+	/** @type {StandardSchemaV1 | null} */
+	const schema = !maybe_fn || validate_or_fn === 'unchecked' ? null : validate_or_fn;
+
 	/**
 	 * @param {string | number | boolean} [key]
 	 */
 	function create_instance(key) {
-		/** @type {RemoteForm<T>} */
+		/** @type {RemoteForm<Input, Output>} */
 		const instance = {};
 
 		instance.method = 'POST';
-		instance.onsubmit = () => {};
 
 		Object.defineProperty(instance, 'enhance', {
 			value: () => {
-				return { action: instance.action, method: instance.method, onsubmit: instance.onsubmit };
+				return { action: instance.action, method: instance.method };
 			}
 		});
 
@@ -54,19 +97,79 @@ export function form(fn) {
 			id: '',
 			/** @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;
+
+				// TODO 3.0 remove this warning
+				if (DEV && !data) {
+					const error = () => {
+						throw new Error(
+							'Remote form functions no longer get passed a FormData object. ' +
+								"`form` now has the same signature as `query` or `command`, i.e. it expects to be invoked like `form(schema, callback)` or `form('unchecked', callback)`. " +
+								'The payload of the callback function is now a POJO instead of a FormData object. See https://kit.svelte.dev/docs/remote-functions#form for details.'
+						);
+					};
+					data = {};
+					for (const key of [
+						'append',
+						'delete',
+						'entries',
+						'forEach',
+						'get',
+						'getAll',
+						'has',
+						'keys',
+						'set',
+						'values'
+					]) {
+						Object.defineProperty(data, key, { get: error });
+					}
+				}
+
+				/** @type {{ input?: Record<string, string | string[]>, issues?: Record<string, StandardSchemaV1.Issue[]>, result: Output }} */
+				const output = {};
+
 				const { event, state } = get_request_store();
+				const validated = await schema?.['~standard'].validate(data);
+
+				if (validate_only) {
+					return validated?.issues ?? [];
+				}
+
+				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;
+
+						const is_array = key.endsWith('[]');
+						const values = form_data.getAll(key).filter((value) => typeof value === 'string');
 
-				state.refreshes ??= {};
+						if (is_array) key = key.slice(0, -2);
 
-				const result = await run_remote_function(event, state, true, form_data, (d) => d, fn);
+						output.input[key] = is_array ? values : values[0];
+					}
+				} else {
+					if (validated !== undefined) {
+						data = validated.value;
+					}
+
+					state.refreshes ??= {};
+
+					output.result = await run_remote_function(event, state, true, data, (d) => d, fn);
+				}
 
 				// We don't need to care about args or deduplicating calls, because uneval results are only relevant in full page reloads
 				// where only one form submission is active at the same time
 				if (!event.isRemoteRequest) {
-					(state.remote_data ??= {})[__.id] = result;
+					(state.remote_data ??= {})[__.id] = output;
 				}
 
-				return result;
+				return output;
 			}
 		};
 
@@ -82,11 +185,24 @@ export function form(fn) {
 			enumerable: true
 		});
 
+		for (const property of ['input', 'issues']) {
+			Object.defineProperty(instance, property, {
+				get() {
+					try {
+						const { remote_data } = get_request_store().state;
+						return remote_data?.[__.id]?.[property] ?? {};
+					} catch {
+						return undefined;
+					}
+				}
+			});
+		}
+
 		Object.defineProperty(instance, 'result', {
 			get() {
 				try {
 					const { remote_data } = get_request_store().state;
-					return remote_data?.[__.id];
+					return remote_data?.[__.id]?.result;
 				} catch {
 					return undefined;
 				}
@@ -103,9 +219,24 @@ export function form(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
+		});
+
+		Object.defineProperty(instance, 'validate', {
+			value: () => {
+				throw new Error('Cannot call validate() on the server');
+			}
+		});
+
 		if (key == undefined) {
 			Object.defineProperty(instance, 'for', {
-				/** @type {RemoteForm<any>['for']} */
+				/** @type {RemoteForm<any, any>['for']} */
 				value: (key) => {
 					const { state } = get_request_store();
 					const cache_key = __.id + '|' + JSON.stringify(key);

package/src/runtime/client/client.js

@@ -190,10 +190,7 @@ let target;
 export let app;
 
 /** @type {Record<string, any>} */
-// we have to conditionally access the properties of `__SVELTEKIT_PAYLOAD__`
-// because it will be `undefined` when users import the exports from this module.
-// It's only defined when the server renders a page.
-export const remote_responses = __SVELTEKIT_PAYLOAD__?.data ?? {};
+export let remote_responses = {};
 
 /** @type {Array<((url: URL) => boolean)>} */
 const invalidated = [];
@@ -294,6 +291,10 @@ export async function start(_app, _target, hydrate) {
 		);
 	}
 
+	if (__SVELTEKIT_PAYLOAD__.data) {
+		remote_responses = __SVELTEKIT_PAYLOAD__?.data;
+	}
+
 	// detect basic auth credentials in the current URL
 	// https://github.com/sveltejs/kit/pull/11179
 	// if so, refresh the page without credentials
@@ -460,7 +461,7 @@ export async function _goto(url, options, redirect_count, nav_token) {
 		load_cache = null;
 	}
 
-	const result = await navigate({
+	await navigate({
 		type: 'goto',
 		url: resolve_url(url),
 		keepfocus: options.keepFocus,
@@ -480,6 +481,7 @@ export async function _goto(url, options, redirect_count, nav_token) {
 			}
 		}
 	});
+
 	if (options.invalidateAll) {
 		// TODO the ticks shouldn't be necessary, something inside Svelte itself is buggy
 		// when a query in a layout that still exists after page change is refreshed earlier than this
@@ -495,7 +497,6 @@ export async function _goto(url, options, redirect_count, nav_token) {
 				});
 			});
 	}
-	return result;
 }
 
 /** @param {import('./types.js').NavigationIntent} intent */
@@ -1282,6 +1283,7 @@ async function load_root_error_page({ status, error, url, route }) {
 		});
 	} catch (error) {
 		if (error instanceof Redirect) {
+			// @ts-expect-error TODO investigate this
 			return _goto(new URL(error.location, location.href), {}, 0);
 		}
 
@@ -1576,7 +1578,7 @@ async function navigate({
 	if (navigation_result.type === 'redirect') {
 		// whatwg fetch spec https://fetch.spec.whatwg.org/#http-redirect-fetch says to error after 20 redirects
 		if (redirect_count < 20) {
-			return navigate({
+			await navigate({
 				type,
 				url: new URL(navigation_result.location, url),
 				popped,
@@ -1587,6 +1589,9 @@ async function navigate({
 				redirect_count: redirect_count + 1,
 				nav_token
 			});
+
+			nav.fulfil(undefined);
+			return;
 		}
 
 		navigation_result = await load_root_error_page({