@sveltejs/kit 2.40.0 → 2.42.0

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

@@ -1,4 +1,5 @@
-/** @import { RemoteForm, RemoteQueryOverride } from '@sveltejs/kit' */
+/** @import { StandardSchemaV1 } from '@standard-schema/spec' */
+/** @import { RemoteFormInput, RemoteForm, RemoteQueryOverride } from '@sveltejs/kit' */
 /** @import { RemoteFunctionResponse } from 'types' */
 /** @import { Query } from './query.svelte.js' */
 import { app_dir, base } from '__sveltekit/paths';
@@ -15,15 +16,18 @@ import {
 } from '../client.js';
 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';
 
 /**
  * Client-version of the `form` function from `$app/server`.
- * @template T
+ * @template {RemoteFormInput} T
+ * @template U
  * @param {string} id
- * @returns {RemoteForm<T>}
+ * @returns {RemoteForm<T, U>}
  */
 export function form(id) {
-	/** @type {Map<any, { count: number, instance: RemoteForm<T> }>} */
+	/** @type {Map<any, { count: number, instance: RemoteForm<T, U> }>} */
 	const instances = new Map();
 
 	/** @param {string | number | boolean} [key] */
@@ -31,12 +35,80 @@ 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({});
+
+		/** @type {Record<string, StandardSchemaV1.Issue[]>} */
+		let issues = $state.raw({});
+
 		/** @type {any} */
 		let result = $state.raw(started ? undefined : remote_responses[action_id]);
 
 		/** @type {number} */
 		let pending_count = $state(0);
 
+		/** @type {StandardSchemaV1 | undefined} */
+		let preflight_schema = undefined;
+
+		/** @type {HTMLFormElement | null} */
+		let element = null;
+
+		/** @type {Record<string, boolean>} */
+		let touched = {};
+
+		/**
+		 * @param {HTMLFormElement} form
+		 * @param {FormData} form_data
+		 * @param {Parameters<RemoteForm<any, any>['enhance']>[0]} callback
+		 */
+		async function handle_submit(form, form_data, callback) {
+			const data = convert_formdata(form_data);
+
+			const validated = await preflight_schema?.['~standard'].validate(data);
+
+			if (validated?.issues) {
+				issues = flatten_issues(validated.issues);
+				return;
+			}
+
+			// TODO 3.0 remove this warning
+			if (DEV) {
+				const error = () => {
+					throw new Error(
+						'Remote form functions no longer get passed a FormData object. The payload is now a POJO. See https://kit.svelte.dev/docs/remote-functions#form for details.'
+					);
+				};
+				for (const key of [
+					'append',
+					'delete',
+					'entries',
+					'forEach',
+					'get',
+					'getAll',
+					'has',
+					'keys',
+					'set',
+					'values'
+				]) {
+					if (!(key in data)) {
+						Object.defineProperty(data, key, { get: error });
+					}
+				}
+			}
+
+			try {
+				await callback({
+					form,
+					data,
+					submit: () => submit(form_data)
+				});
+			} catch (e) {
+				const error = e instanceof HttpError ? e.body : { message: /** @type {any} */ (e).message };
+				const status = e instanceof HttpError ? e.status : 500;
+				void set_nearest_error_page(error, status);
+			}
+		}
+
 		/**
 		 * @param {FormData} data
 		 * @returns {Promise<any> & { updates: (...args: any[]) => any }}
@@ -64,13 +136,6 @@ export function form(id) {
 					await Promise.resolve();
 
 					if (updates.length > 0) {
-						if (DEV) {
-							if (data.get('sveltekit:remote_refreshes')) {
-								throw new Error(
-									'The FormData key `sveltekit:remote_refreshes` is reserved for internal use and should not be set manually'
-								);
-							}
-						}
 						data.set('sveltekit:remote_refreshes', JSON.stringify(updates.map((u) => u._key)));
 					}
 
@@ -88,9 +153,18 @@ export function form(id) {
 					const form_result = /** @type { RemoteFunctionResponse} */ (await response.json());
 
 					if (form_result.type === 'result') {
-						result = devalue.parse(form_result.result, app.decoders);
-
-						if (form_result.refreshes) {
+						({
+							input = {},
+							issues = {},
+							result
+						} = devalue.parse(form_result.result, {
+							...app.decoders,
+							File: file_transport.decode
+						}));
+
+						if (issues.$) {
+							release_overrides(updates);
+						} else if (form_result.refreshes) {
 							refresh_queries(form_result.refreshes, updates);
 						} else {
 							void invalidateAll();
@@ -104,7 +178,6 @@ export function form(id) {
 						// Use internal version to allow redirects to external URLs
 						void _goto(form_result.location, { invalidateAll }, 0);
 					} else {
-						result = undefined;
 						throw new HttpError(form_result.status ?? 500, form_result.error);
 					}
 				} catch (e) {
@@ -134,43 +207,13 @@ export function form(id) {
 			return promise;
 		}
 
-		/** @type {RemoteForm<T>} */
+		/** @type {RemoteForm<T, U>} */
 		const instance = {};
 
 		instance.method = 'POST';
 		instance.action = action;
 
-		/**
-		 * @param {HTMLFormElement} form_element
-		 * @param {HTMLElement | null} submitter
-		 */
-		function create_form_data(form_element, submitter) {
-			const form_data = new FormData(form_element);
-
-			if (DEV) {
-				const enctype = submitter?.hasAttribute('formenctype')
-					? /** @type {HTMLButtonElement | HTMLInputElement} */ (submitter).formEnctype
-					: clone(form_element).enctype;
-				if (enctype !== 'multipart/form-data') {
-					for (const value of form_data.values()) {
-						if (value instanceof File) {
-							throw new Error(
-								'Your form contains <input type="file"> fields, but is missing the necessary `enctype="multipart/form-data"` attribute. This will lead to inconsistent behavior between enhanced and native forms. For more details, see https://github.com/sveltejs/kit/issues/9819.'
-							);
-						}
-					}
-				}
-			}
-
-			const submitter_name = submitter?.getAttribute('name');
-			if (submitter_name) {
-				form_data.append(submitter_name, submitter?.getAttribute('value') ?? '');
-			}
-
-			return form_data;
-		}
-
-		/** @param {Parameters<RemoteForm<any>['enhance']>[0]} callback */
+		/** @param {Parameters<RemoteForm<any, any>['enhance']>[0]} callback */
 		const form_onsubmit = (callback) => {
 			/** @param {SubmitEvent} event */
 			return async (event) => {
@@ -194,26 +237,105 @@ export function form(id) {
 
 				event.preventDefault();
 
-				const data = create_form_data(form, event.submitter);
+				const form_data = new FormData(form);
 
-				try {
-					await callback({
-						form,
-						data,
-						submit: () => submit(data)
-					});
-				} catch (e) {
-					const error =
-						e instanceof HttpError ? e.body : { message: /** @type {any} */ (e).message };
-					const status = e instanceof HttpError ? e.status : 500;
-					void set_nearest_error_page(error, status);
+				if (DEV) {
+					validate_form_data(form_data, clone(form).enctype);
 				}
+
+				await handle_submit(form, form_data, callback);
 			};
 		};
 
-		instance.onsubmit = form_onsubmit(({ submit, form }) => submit().then(() => form.reset()));
+		/** @param {(event: SubmitEvent) => void} onsubmit */
+		function create_attachment(onsubmit) {
+			return (/** @type {HTMLFormElement} */ form) => {
+				if (element) {
+					let message = `A form object can only be attached to a single \`<form>\` element`;
+					if (DEV && !key) {
+						const name = id.split('/').pop();
+						message += `. To create multiple instances, use \`${name}.for(key)\``;
+					}
+
+					throw new Error(message);
+				}
+
+				element = form;
+
+				touched = {};
+
+				form.addEventListener('submit', onsubmit);
+
+				form.addEventListener('input', (e) => {
+					// strictly speaking it can be an HTMLTextAreaElement or HTMLSelectElement
+					// but that makes the types unnecessarily awkward
+					const element = /** @type {HTMLInputElement} */ (e.target);
+
+					let name = element.name;
+					if (!name) return;
+
+					const is_array = name.endsWith('[]');
+					if (is_array) name = name.slice(0, -2);
+
+					const is_file = element.type === 'file';
+
+					touched[name] = true;
+
+					if (is_array) {
+						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}")`
+									);
+								}
+							}
+						}
+
+						input[name] = is_file
+							? elements.map((input) => Array.from(input.files ?? [])).flat()
+							: elements.map((element) => element.value);
+					} else if (is_file) {
+						if (DEV && element.multiple) {
+							throw new Error(
+								`Can only use the \`multiple\` attribute when \`name\` includes a \`[]\` suffix — consider changing "${name}" to "${name}[]"`
+							);
+						}
+
+						const file = /** @type {HTMLInputElement & { files: FileList }} */ (element).files[0];
 
-		/** @param {Parameters<RemoteForm<any>['buttonProps']['enhance']>[0]} callback */
+						if (file) {
+							input[name] = file;
+						} else {
+							delete input[name];
+						}
+					} else {
+						input[name] = element.value;
+					}
+				});
+
+				return () => {
+					element = null;
+					preflight_schema = undefined;
+				};
+			};
+		}
+
+		instance[createAttachmentKey()] = create_attachment(
+			form_onsubmit(({ submit, form }) =>
+				submit().then(() => {
+					if (!issues.$) {
+						form.reset();
+					}
+				})
+			)
+		);
+
+		/** @param {Parameters<RemoteForm<any, any>['buttonProps']['enhance']>[0]} callback */
 		const form_action_onclick = (callback) => {
 			/** @param {Event} event */
 			return async (event) => {
@@ -225,34 +347,41 @@ export function form(id) {
 				event.stopPropagation();
 				event.preventDefault();
 
-				const data = create_form_data(form, target);
+				const form_data = new FormData(form);
 
-				try {
-					await callback({
-						form,
-						data,
-						submit: () => submit(data)
-					});
-				} catch (e) {
-					const error =
-						e instanceof HttpError ? e.body : { message: /** @type {any} */ (e).message };
-					const status = e instanceof HttpError ? e.status : 500;
-					void set_nearest_error_page(error, status);
+				if (DEV) {
+					const enctype = target.hasAttribute('formenctype')
+						? target.formEnctype
+						: clone(form).enctype;
+
+					validate_form_data(form_data, enctype);
 				}
+
+				if (target.name) {
+					form_data.append(target.name, target?.getAttribute('value') ?? '');
+				}
+
+				await handle_submit(form, form_data, callback);
 			};
 		};
 
-		/** @type {RemoteForm<any>['buttonProps']} */
+		/** @type {RemoteForm<any, any>['buttonProps']} */
 		// @ts-expect-error we gotta set enhance as a non-enumerable property
 		const button_props = {
 			type: 'submit',
 			formmethod: 'POST',
 			formaction: action,
-			onclick: form_action_onclick(({ submit, form }) => submit().then(() => form.reset()))
+			onclick: form_action_onclick(({ submit, form }) =>
+				submit().then(() => {
+					if (!issues.$) {
+						form.reset();
+					}
+				})
+			)
 		};
 
 		Object.defineProperty(button_props, 'enhance', {
-			/** @type {RemoteForm<any>['buttonProps']['enhance']} */
+			/** @type {RemoteForm<any, any>['buttonProps']['enhance']} */
 			value: (callback) => {
 				return {
 					type: 'submit',
@@ -267,23 +396,106 @@ export function form(id) {
 			get: () => pending_count
 		});
 
+		let validate_id = 0;
+
 		Object.defineProperties(instance, {
 			buttonProps: {
 				value: button_props
 			},
+			input: {
+				get: () => input,
+				set: (v) => {
+					input = v;
+				}
+			},
+			issues: {
+				get: () => issues
+			},
 			result: {
 				get: () => result
 			},
 			pending: {
 				get: () => pending_count
 			},
+			field: {
+				value: (/** @type {string} */ name) => name
+			},
+			preflight: {
+				/** @type {RemoteForm<any, any>['preflight']} */
+				value: (schema) => {
+					preflight_schema = schema;
+					return instance;
+				}
+			},
+			validate: {
+				/** @type {RemoteForm<any, any>['validate']} */
+				value: async ({ includeUntouched = false } = {}) => {
+					if (!element) return;
+
+					const id = ++validate_id;
+
+					const form_data = new FormData(element);
+
+					/** @type {readonly StandardSchemaV1.Issue[]} */
+					let array = [];
+
+					const validated = await preflight_schema?.['~standard'].validate(
+						convert_formdata(form_data)
+					);
+
+					if (validated?.issues) {
+						array = validated.issues;
+					} else {
+						form_data.set('sveltekit:validate_only', 'true');
+
+						const response = await fetch(`${base}/${app_dir}/remote/${action_id}`, {
+							method: 'POST',
+							body: form_data
+						});
+
+						const result = await response.json();
+
+						if (validate_id !== id) {
+							return;
+						}
+
+						if (result.type === 'result') {
+							array = /** @type {StandardSchemaV1.Issue[]} */ (
+								devalue.parse(result.result, app.decoders)
+							);
+						}
+					}
+
+					if (!includeUntouched) {
+						array = array.filter((issue) => {
+							if (issue.path !== undefined) {
+								let path = '';
+
+								for (const segment of issue.path) {
+									const key = typeof segment === 'object' ? segment.key : segment;
+
+									if (typeof key === 'number') {
+										path += `[${key}]`;
+									} else if (typeof key === 'string') {
+										path += path === '' ? key : '.' + key;
+									}
+								}
+
+								return touched[path];
+							}
+						});
+					}
+
+					issues = flatten_issues(array);
+				}
+			},
 			enhance: {
-				/** @type {RemoteForm<any>['enhance']} */
+				/** @type {RemoteForm<any, any>['enhance']} */
 				value: (callback) => {
 					return {
 						method: 'POST',
 						action,
-						onsubmit: form_onsubmit(callback)
+						[createAttachmentKey()]: create_attachment(form_onsubmit(callback))
 					};
 				}
 			}
@@ -295,7 +507,7 @@ export function form(id) {
 	const instance = create_instance();
 
 	Object.defineProperty(instance, 'for', {
-		/** @type {RemoteForm<any>['for']} */
+		/** @type {RemoteForm<T, U>['for']} */
 		value: (key) => {
 			const entry = instances.get(key) ?? { count: 0, instance: create_instance(key) };
 
@@ -335,3 +547,33 @@ export function form(id) {
 function clone(element) {
 	return /** @type {T} */ (HTMLElement.prototype.cloneNode.call(element));
 }
+
+/**
+ * @param {FormData} form_data
+ * @param {string} enctype
+ */
+function validate_form_data(form_data, enctype) {
+	for (const key of form_data.keys()) {
+		if (key.startsWith('sveltekit:')) {
+			throw new Error(
+				'FormData keys starting with `sveltekit:` are reserved for internal use and should not be set manually'
+			);
+		}
+
+		if (/^\$[.[]?/.test(key)) {
+			throw new Error(
+				'`$` is used to collect all FormData validation issues and cannot be used as the `name` of a form control'
+			);
+		}
+	}
+
+	if (enctype !== 'multipart/form-data') {
+		for (const value of form_data.values()) {
+			if (value instanceof File) {
+				throw new Error(
+					'Your form contains <input type="file"> fields, but is missing the necessary `enctype="multipart/form-data"` attribute. This will lead to inconsistent behavior between enhanced and native forms. For more details, see https://github.com/sveltejs/kit/issues/9819.'
+				);
+			}
+		}
+	}
+}

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

@@ -408,29 +408,6 @@ export async function render_response({
 						}`);
 		}
 
-		const { remote_data } = event_state;
-
-		if (remote_data) {
-			/** @type {Record<string, any>} */
-			const remote = {};
-
-			for (const key in remote_data) {
-				remote[key] = await remote_data[key];
-			}
-
-			// TODO this is repeated in a few places — dedupe it
-			const replacer = (/** @type {any} */ thing) => {
-				for (const key in options.hooks.transport) {
-					const encoded = options.hooks.transport[key].encode(thing);
-					if (encoded) {
-						return `app.decode('${key}', ${devalue.uneval(encoded, replacer)})`;
-					}
-				}
-			};
-
-			properties.push(`data: ${devalue.uneval(remote, replacer)}`);
-		}
-
 		// create this before declaring `data`, which may contain references to `${global}`
 		blocks.push(`${global} = {
 						${properties.join(',\n\t\t\t\t\t\t')}
@@ -482,20 +459,45 @@ export async function render_response({
 			args.push(`{\n${indent}\t${hydrate.join(`,\n${indent}\t`)}\n${indent}}`);
 		}
 
+		const { remote_data } = event_state;
+
+		let serialized_remote_data = '';
+
+		if (remote_data) {
+			/** @type {Record<string, any>} */
+			const remote = {};
+
+			for (const key in remote_data) {
+				remote[key] = await remote_data[key];
+			}
+
+			// TODO this is repeated in a few places — dedupe it
+			const replacer = (/** @type {any} */ thing) => {
+				for (const key in options.hooks.transport) {
+					const encoded = options.hooks.transport[key].encode(thing);
+					if (encoded) {
+						return `app.decode('${key}', ${devalue.uneval(encoded, replacer)})`;
+					}
+				}
+			};
+
+			serialized_remote_data = `${global}.data = ${devalue.uneval(remote, replacer)};\n\n\t\t\t\t\t\t`;
+		}
+
 		// `client.app` is a proxy for `bundleStrategy === 'split'`
 		const boot = client.inline
 			? `${client.inline.script}
 
-					__sveltekit_${options.version_hash}.app.start(${args.join(', ')});`
+					${serialized_remote_data}${global}.app.start(${args.join(', ')});`
 			: client.app
 				? `Promise.all([
 						import(${s(prefixed(client.start))}),
 						import(${s(prefixed(client.app))})
 					]).then(([kit, app]) => {
-						kit.start(app, ${args.join(', ')});
+						${serialized_remote_data}kit.start(app, ${args.join(', ')});
 					});`
 				: `import(${s(prefixed(client.start))}).then((app) => {
-						app.start(${args.join(', ')})
+						${serialized_remote_data}app.start(${args.join(', ')})
 					});`;
 
 		if (load_env_eagerly) {

package/src/runtime/server/remote.js

@@ -12,6 +12,7 @@ import { normalize_error } from '../../utils/error.js';
 import { check_incorrect_fail_use } from './page/actions.js';
 import { DEV } from 'esm-env';
 import { record_span } from '../telemetry/record_span.js';
+import { file_transport } from '../utils.js';
 
 /** @type {typeof handle_remote_call_internal} */
 export async function handle_remote_call(event, state, options, manifest, id) {
@@ -128,8 +129,8 @@ async function handle_remote_call_internal(event, state, options, manifest, id)
 			return json(
 				/** @type {RemoteFunctionResponse} */ ({
 					type: 'result',
-					result: stringify(data, transport),
-					refreshes: await serialize_refreshes(form_client_refreshes)
+					result: stringify(data, { ...transport, File: file_transport }),
+					refreshes: data.issues ? {} : await serialize_refreshes(form_client_refreshes)
 				})
 			);
 		}
@@ -262,7 +263,7 @@ async function handle_remote_form_post_internal(event, state, manifest, id) {
 	const remotes = manifest._.remotes;
 	const module = await remotes[hash]?.();
 
-	let form = /** @type {RemoteForm<any>} */ (module?.default[name]);
+	let form = /** @type {RemoteForm<any, any>} */ (module?.default[name]);
 
 	if (!form) {
 		event.setHeaders({