@sveltejs/kit 3.0.0-next.2 → 3.0.0-next.21

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

@@ -1,13 +1,19 @@
 /** @import { StandardSchemaV1 } from '@standard-schema/spec' */
-/** @import { RemoteFormInput, RemoteForm, RemoteQueryUpdate } from '@sveltejs/kit' */
-/** @import { InternalRemoteFormIssue, RemoteFunctionResponse } from 'types' */
-import { app_dir, base } from '$app/paths/internal/client';
-import * as devalue from 'devalue';
+/** @import { RemoteFormInput, RemoteForm, RemoteQueryUpdate } from '@sveltejs/kit/remote' */
+/** @import { InternalRemoteFormIssue } from 'types' */
+import { app_dir, base } from '#app/paths';
 import { DEV } from 'esm-env';
-import { HttpError } from '@sveltejs/kit/internal';
-import { app, query_responses, _goto, set_nearest_error_page, invalidateAll } from '../client.js';
+
+import {
+	query_responses,
+	_goto,
+	set_nearest_error_page,
+	handle_error,
+	refreshAll
+} from '../client.js';
+import { page } from '../state.svelte.js';
 import { tick } from 'svelte';
-import { apply_refreshes, categorize_updates, apply_reconnections } from './shared.svelte.js';
+import { categorize_updates, remote_request } from './shared.svelte.js';
 import { createAttachmentKey } from 'svelte/attachments';
 import {
 	convert_formdata,
@@ -18,7 +24,11 @@ import {
 	build_path_string,
 	normalize_issue,
 	serialize_binary_form,
-	BINARY_FORM_CONTENT_TYPE
+	deep_get,
+	DELETE_KEY,
+	BINARY_FORM_CONTENT_TYPE,
+	parse_form_key,
+	coerce_form_value
 } from '../../form-utils.js';
 
 /**
@@ -30,16 +40,22 @@ import {
  * @returns {InternalRemoteFormIssue[]}
  */
 function merge_with_server_issues(form_data, current_issues, client_issues) {
+	const client_names = new Set(client_issues.map((issue) => issue.name));
+
 	const merged = [
-		...current_issues.filter(
-			(issue) => issue.server && !client_issues.some((i) => i.name === issue.name)
-		),
+		...current_issues.filter((issue) => issue.server && !client_names.has(issue.name)),
 		...client_issues
 	];
 
-	const keys = Array.from(form_data.keys());
+	/** @type {Map<string, number>} */
+	const positions = new Map();
+	let i = 0;
+	for (const key of form_data.keys()) {
+		if (!positions.has(key)) positions.set(key, i);
+		i++;
+	}
 
-	return merged.sort((a, b) => keys.indexOf(a.name) - keys.indexOf(b.name));
+	return merged.sort((a, b) => (positions.get(a.name) ?? -1) - (positions.get(b.name) ?? -1));
 }
 
 /**
@@ -53,24 +69,56 @@ export function form(id) {
 	/** @type {Map<any, { count: number, instance: RemoteForm<T, U> }>} */
 	const instances = new Map();
 
+	/** @type {StandardSchemaV1 | null} */
+	let shared_preflight_schema = null;
+
 	/** @param {string | number | boolean} [key] */
 	function create_instance(key) {
 		const action_id_without_key = id;
 		const action_id = id + (key != undefined ? `/${JSON.stringify(key)}` : '');
-		const action = '?/remote=' + encodeURIComponent(action_id);
+		const action = '/remote=' + encodeURIComponent(action_id);
+
+		/** @type {string} */
+		let cached_search = '';
+		/** @type {string} */
+		let cached_query = '';
+
+		/** @returns {string} */
+		function get_action() {
+			if (page.url.search !== cached_search) {
+				cached_search = page.url.search;
+
+				if (page.url.search) {
+					const params = new URLSearchParams(page.url.search);
+					params.delete('/remote');
+					cached_query = params.toString();
+				} else {
+					cached_query = '';
+				}
+			}
+
+			return `?${cached_query && `${cached_query}&`}${action}`;
+		}
+
+		// the output of a non-enhanced submission that resulted in this page —
+		// consume it so the form's state survives hydration (form outputs are
+		// always value nodes; the server never serializes them as errors)
+		/** @type {{ input?: Record<string, any>, issues?: InternalRemoteFormIssue[], result?: any } | undefined} */
+		const initial = query_responses[action_id]?.v;
+		delete query_responses[action_id];
 
 		/**
 		 * @type {Record<string, string | string[] | File | File[]>}
 		 */
-		let input = $state({});
+		let input = $state(initial?.input ?? {});
 
 		/** @type {InternalRemoteFormIssue[]} */
-		let raw_issues = $state.raw([]);
+		let raw_issues = $state.raw(initial?.issues ?? []);
 
 		const issues = $derived(flatten_issues(raw_issues));
 
 		/** @type {any} */
-		let result = $state.raw(query_responses[action_id]);
+		let result = $state.raw(initial?.result);
 
 		/** @type {number} */
 		let pending_count = $state(0);
@@ -83,7 +131,9 @@ export function form(id) {
 		 */
 		let enhance_callback = async (instance) => {
 			if (await instance.submit()) {
-				instance.element.reset();
+				await tick();
+				// We call reset from the prototype to avoid DOM clobbering
+				HTMLFormElement.prototype.reset.call(instance.element);
 			}
 		};
 
@@ -91,13 +141,22 @@ export function form(id) {
 		let element = null;
 
 		/** @type {Record<string, boolean>} */
-		let touched = {};
+		let touched = $state({});
+
+		/** @type {Record<string, boolean>} */
+		let dirty = $state({});
 
-		let submitted = false;
+		/** @type {Record<string, boolean>} */
+		let can_validate = {};
+
+		let submitted = $state(false);
 
 		/** @type {InternalRemoteFormIssue[] | null} */
 		let unread_issues = null;
 
+		/** @type {{ name: string; type: 'number' | 'boolean' | null; is_array: boolean } | null} */
+		let previous_submitter = null;
+
 		/**
 		 * In dev, warn if there are validation issues going unread
 		 */
@@ -132,8 +191,8 @@ export function form(id) {
 		 * @returns {Record<string, any>}
 		 */
 		function convert(form_data) {
-			const data = convert_formdata(form_data);
-			if (key !== undefined && !form_data.has('id')) {
+			const data = convert_formdata(action_id_without_key, form_data);
+			if (key !== undefined && !('id' in data)) {
 				data.id = key;
 			}
 			return data;
@@ -163,109 +222,84 @@ export function form(id) {
 			/** @type {Error | undefined} */
 			let updates_error;
 
-			/** @type {Promise<boolean> & { updates: (...args: RemoteQueryUpdate[]) => Promise<boolean> }} */
-			const promise = (async () => {
-				try {
-					await Promise.resolve();
-
-					if (updates_error) {
-						throw updates_error;
-					}
+			const promise =
+				/** @type {Promise<boolean> & { updates: (...args: RemoteQueryUpdate[]) => Promise<boolean> }} */ (
+					(async () => {
+						try {
+							await Promise.resolve();
 
-					if (should_preflight) {
-						const valid = await preflight(form_data);
-						if (!valid) return false;
-					}
+							if (updates_error) {
+								throw updates_error;
+							}
 
-					const { blob } = serialize_binary_form(convert(form_data), {
-						remote_refreshes: Array.from(refreshes ?? [])
-					});
+							if (should_preflight) {
+								const valid = await preflight(form_data);
+								if (!valid) return false;
+							}
 
-					const response = await fetch(`${base}/${app_dir}/remote/${action_id_without_key}`, {
-						method: 'POST',
-						headers: {
-							'Content-Type': BINARY_FORM_CONTENT_TYPE,
-							// Forms cannot be called during rendering, so it's save to use location here
-							'x-sveltekit-pathname': location.pathname,
-							'x-sveltekit-search': location.search
-						},
-						body: blob
-					});
+							const { blob } = serialize_binary_form(convert(form_data), {
+								remote_refreshes: Array.from(refreshes ?? [])
+							});
+
+							const response = await remote_request(
+								`${base}/${app_dir}/remote/${action_id_without_key}`,
+								{
+									method: 'POST',
+									headers: {
+										'Content-Type': BINARY_FORM_CONTENT_TYPE,
+										// Forms cannot be called during rendering, so it's save to use location here
+										'x-sveltekit-pathname': location.pathname,
+										'x-sveltekit-search': location.search
+									},
+									body: blob
+								}
+							);
 
-					if (!response.ok) {
-						// We only end up here in case of a network error or if the server has an internal error
-						// (which shouldn't happen because we handle errors on the server and always send a 200 response)
-						throw new Error('Failed to execute remote function');
-					}
+							({ issues: raw_issues = [], result } = response._ ?? {});
 
-					const form_result = /** @type { RemoteFunctionResponse} */ (await response.json());
+							// if the developer took control of updates via `.updates(...)` (even with
+							// no arguments), or the server performed explicit refreshes, don't invalidateAll
+							const should_refresh = refreshes === null && !response.r;
 
-					// reset issues in case it's a redirect or error (but issues passed in that case)
-					raw_issues = [];
-					result = undefined;
+							if (response.redirect) {
+								// Use internal version to allow redirects to external URLs
+								void _goto(response.redirect, {
+									refreshAll: should_refresh
+								});
+								return true;
+							}
 
-					if (form_result.type === 'result') {
-						({ issues: raw_issues = [], result } = devalue.parse(form_result.result, app.decoders));
-						const succeeded = raw_issues.length === 0;
+							const succeeded = raw_issues.length === 0;
 
-						if (succeeded) {
-							if (refreshes === null && !form_result.refreshes && !form_result.reconnects) {
-								void invalidateAll();
-							} else {
-								if (form_result.refreshes) {
-									apply_refreshes(form_result.refreshes);
+							if (succeeded) {
+								if (should_refresh) {
+									void refreshAll();
 								}
-								if (form_result.reconnects) {
-									apply_reconnections(form_result.reconnects);
+							} else {
+								if (DEV) {
+									warn_on_missing_issue_reads();
 								}
 							}
-						} else {
-							if (DEV) {
-								warn_on_missing_issue_reads();
-							}
-						}
 
-						return succeeded;
-					} else if (form_result.type === 'redirect') {
-						const stringified_refreshes = form_result.refreshes ?? '';
-						const stringified_reconnects = form_result.reconnects ?? '';
-						if (stringified_refreshes) {
-							apply_refreshes(stringified_refreshes);
-						}
-
-						if (stringified_reconnects) {
-							apply_reconnections(stringified_reconnects);
-						}
-
-						// Use internal version to allow redirects to external URLs
-						void _goto(
-							form_result.location,
-							{
-								invalidateAll:
-									refreshes === null && !stringified_refreshes && !stringified_reconnects
-							},
-							0
-						);
-						return true;
-					} else {
-						throw new HttpError(form_result.status ?? 500, form_result.error);
-					}
-				} catch (e) {
-					result = undefined;
-					throw e;
-				} finally {
-					overrides?.forEach((fn) => fn());
-
-					void tick().then(() => {
-						if (entry) {
-							entry.count--;
-							if (entry.count === 0) {
-								instances.delete(key);
-							}
+							return succeeded;
+						} catch (e) {
+							result = undefined;
+							raw_issues = [];
+							throw e;
+						} finally {
+							overrides?.forEach((fn) => fn());
+
+							void tick().then(() => {
+								if (entry) {
+									entry.count--;
+									if (entry.count === 0) {
+										instances.delete(key);
+									}
+								}
+							});
 						}
-					});
-				}
-			})();
+					})()
+				);
 
 			let updates_called = false;
 			promise.updates = (...args) => {
@@ -319,7 +353,8 @@ export function form(id) {
 		 */
 		async function preflight(form_data) {
 			const data = convert(form_data);
-			const validated = await preflight_schema?.['~standard'].validate(data);
+			const schema = preflight_schema ?? shared_preflight_schema;
+			const validated = await schema?.['~standard'].validate(data);
 
 			if (validated?.issues) {
 				raw_issues = merge_with_server_issues(
@@ -343,11 +378,13 @@ export function form(id) {
 			return true;
 		}
 
-		/** @type {RemoteForm<T, U>} */
-		const instance = {};
+		const instance = /** @type {RemoteForm<T, U>} */ ({});
 
 		instance.method = 'POST';
-		instance.action = action;
+		Object.defineProperty(instance, 'action', {
+			get: get_action,
+			enumerable: true
+		});
 
 		instance[createAttachmentKey()] = (/** @type {HTMLFormElement} */ form) => {
 			if (element) {
@@ -363,6 +400,8 @@ export function form(id) {
 			element = form;
 
 			touched = {};
+			dirty = {};
+			can_validate = {};
 
 			/** @param {SubmitEvent} event */
 			const handle_submit = async (event) => {
@@ -396,6 +435,33 @@ export function form(id) {
 
 				const form_data = new FormData(form, event.submitter);
 
+				if (
+					previous_submitter !== null &&
+					!Array.from(form_data.keys())
+						.map((k) => parse_form_key(action_id_without_key, k).name)
+						.includes(previous_submitter.name)
+				) {
+					set_nested_value(input, previous_submitter, undefined);
+				}
+
+				if (event.submitter) {
+					const name = event.submitter.getAttribute('name');
+
+					/** @type {null | ReturnType<typeof parse_form_key>} */
+					let submitter = null;
+
+					const value = /** @type {any} */ (event.submitter).value;
+
+					if (name !== null && value !== undefined) {
+						submitter = parse_form_key(action_id_without_key, name);
+						set_nested_value(input, submitter, coerce_form_value(submitter.type, value));
+					}
+
+					previous_submitter = submitter;
+				} else {
+					previous_submitter = null;
+				}
+
 				if (DEV) {
 					validate_form_data(form_data, clone(form).enctype);
 				}
@@ -412,10 +478,12 @@ export function form(id) {
 
 					await enhance_callback(create_enhance_callback_instance(form, 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);
+					const error = await handle_error(e, {
+						params: {},
+						route: { id: null },
+						url: new URL(location.href)
+					});
+					void set_nearest_error_page(error);
 				} finally {
 					pending_count--;
 				}
@@ -427,17 +495,14 @@ export function form(id) {
 				// but that makes the types unnecessarily awkward
 				const element = /** @type {HTMLInputElement} */ (e.target);
 
-				let name = element.name;
+				const name = element.name;
 				if (!name) return;
 
-				const is_array = name.endsWith('[]');
-				if (is_array) name = name.slice(0, -2);
+				const field = parse_form_key(action_id_without_key, name);
 
 				const is_file = element.type === 'file';
 
-				touched[name] = true;
-
-				if (is_array) {
+				if (field.is_array) {
 					let value;
 
 					if (element.tagName === 'SELECT') {
@@ -447,7 +512,7 @@ export function form(id) {
 						);
 					} else {
 						const elements = /** @type {HTMLInputElement[]} */ (
-							Array.from(form.querySelectorAll(`[name="${name}[]"]`))
+							Array.from(form.querySelectorAll(`[name="${name}"]`))
 						);
 
 						if (DEV) {
@@ -468,7 +533,7 @@ export function form(id) {
 						}
 					}
 
-					set_nested_value(input, name, value);
+					set_nested_value(input, field, value);
 				} else if (is_file) {
 					if (DEV && element.multiple) {
 						throw new Error(
@@ -479,28 +544,19 @@ export function form(id) {
 					const file = /** @type {HTMLInputElement & { files: FileList }} */ (element).files[0];
 
 					if (file) {
-						set_nested_value(input, name, file);
+						set_nested_value(input, field, file);
 					} else {
-						// 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]];
+						set_nested_value(input, field, DELETE_KEY);
 					}
 				} else {
 					set_nested_value(
 						input,
-						name,
+						field,
 						element.type === 'checkbox' && !element.checked ? null : element.value
 					);
 				}
 
-				name = name.replace(/^[nb]:/, '');
-
-				touched[name] = true;
+				dirty[field.name] = true;
 			};
 
 			const handle_reset = async () => {
@@ -508,19 +564,39 @@ export function form(id) {
 				// the inputs are actually updated (so that it can be cancelled)
 				await tick();
 
-				input = convert_formdata(new FormData(form));
+				input = convert_formdata(action_id_without_key, new FormData(form));
+				raw_issues = [];
+				touched = {};
+				dirty = {};
+				can_validate = {};
+				submitted = false;
+			};
+
+			/** @param {Event} e */
+			const handle_focusout = (e) => {
+				const name = /** @type {HTMLInputElement} */ (e.target).name;
+				if (!name) return;
+
+				const field = parse_form_key(action_id_without_key, name);
+
+				touched[field.name] = true;
+
+				if (Object.hasOwn(dirty, field.name)) {
+					can_validate[field.name] = true;
+				}
 			};
 
 			form.addEventListener('submit', handle_submit);
 			form.addEventListener('input', handle_input);
+			form.addEventListener('focusout', handle_focusout);
 			form.addEventListener('reset', handle_reset);
 
 			return () => {
 				form.removeEventListener('submit', handle_submit);
 				form.removeEventListener('input', handle_input);
+				form.removeEventListener('focusout', handle_focusout);
 				form.removeEventListener('reset', handle_reset);
 				element = null;
-				preflight_schema = undefined;
 			};
 		};
 
@@ -551,29 +627,35 @@ export function form(id) {
 
 					const submission = submit(form_data, true);
 
-					void submission.finally(() => {
+					const decrement = () => {
 						pending_count--;
-					});
+					};
+					void submission.then(decrement, decrement);
 
 					return submission;
 				}
 			},
 			fields: {
 				get: () =>
-					create_field_proxy(
-						{},
-						() => input,
-						(path, value) => {
+					create_field_proxy({
+						form_id: action_id_without_key,
+						get: () => input,
+						set: (path, value) => {
 							if (path.length === 0) {
 								input = value;
-							} else {
+							} else if (value !== deep_get(input, path)) {
 								deep_set(input, path.map(String), value);
 
 								const key = build_path_string(path);
-								touched[key] = true;
+
+								if (element) {
+									touched[key] = true;
+									dirty[key] = true;
+									can_validate[key] = true;
+								}
 							}
 						},
-						(path, all) => {
+						get_issues: (path, all) => {
 							if (DEV && unread_issues !== null && path !== undefined) {
 								unread_issues = unread_issues.filter((issue) => {
 									return (
@@ -584,8 +666,10 @@ export function form(id) {
 							}
 
 							return issues;
-						}
-					)
+						},
+						get_touched: () => touched,
+						get_dirty: () => dirty
+					})
 			},
 			result: {
 				get: () => result
@@ -593,16 +677,24 @@ export function form(id) {
 			pending: {
 				get: () => pending_count
 			},
+			submitted: {
+				get: () => submitted
+			},
 			preflight: {
 				/** @type {RemoteForm<T, U>['preflight']} */
 				value: (schema) => {
 					preflight_schema = schema;
+
+					if (key === undefined) {
+						shared_preflight_schema = schema;
+					}
+
 					return instance;
 				}
 			},
 			validate: {
 				/** @type {RemoteForm<any, any>['validate']} */
-				value: async ({ includeUntouched = false, preflightOnly = false } = {}) => {
+				value: async ({ all = false, preflightOnly = false } = {}) => {
 					if (!element) return;
 
 					const id = ++validate_id;
@@ -620,8 +712,8 @@ export function form(id) {
 					let array = [];
 
 					const data = convert(form_data);
-
-					const validated = await preflight_schema?.['~standard'].validate(data);
+					const schema = preflight_schema ?? shared_preflight_schema;
+					const validated = await schema?.['~standard'].validate(data);
 
 					if (validate_id !== id) {
 						return;
@@ -630,34 +722,31 @@ export function form(id) {
 					if (validated?.issues) {
 						array = validated.issues.map((issue) => normalize_issue(issue, false));
 					} else if (!preflightOnly) {
-						const response = await fetch(`${base}/${app_dir}/remote/${action_id_without_key}`, {
-							method: 'POST',
-							headers: {
-								'Content-Type': BINARY_FORM_CONTENT_TYPE,
-								// Validation should not be and will not be called during rendering, so it's save to use location here
-								'x-sveltekit-pathname': location.pathname,
-								'x-sveltekit-search': location.search
-							},
-							body: serialize_binary_form(data, {
-								validate_only: true
-							}).blob
-						});
-
-						const result = await response.json();
+						const result = await remote_request(
+							`${base}/${app_dir}/remote/${action_id_without_key}`,
+							{
+								method: 'POST',
+								headers: {
+									'Content-Type': BINARY_FORM_CONTENT_TYPE,
+									// Validation should not be and will not be called during rendering, so it's save to use location here
+									'x-sveltekit-pathname': location.pathname,
+									'x-sveltekit-search': location.search
+								},
+								body: serialize_binary_form(data, {
+									validate_only: true
+								}).blob
+							}
+						);
 
 						if (validate_id !== id) {
 							return;
 						}
 
-						if (result.type === 'result') {
-							array = /** @type {InternalRemoteFormIssue[]} */ (
-								devalue.parse(result.result, app.decoders)
-							);
-						}
+						array = /** @type {InternalRemoteFormIssue[]} */ (result._);
 					}
 
-					if (!includeUntouched && !submitted) {
-						array = array.filter((issue) => touched[issue.name]);
+					if (!all && !submitted) {
+						array = array.filter((issue) => can_validate[issue.name]);
 					}
 
 					const is_server_validation = !validated?.issues && !preflightOnly;