@sveltejs/kit 3.0.0-next.0 → 3.0.0-next.10

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

@@ -1,13 +1,18 @@
 /** @import { StandardSchemaV1 } from '@standard-schema/spec' */
 /** @import { RemoteFormInput, RemoteForm, RemoteQueryUpdate } from '@sveltejs/kit' */
-/** @import { InternalRemoteFormIssue, RemoteFunctionResponse } from 'types' */
+/** @import { InternalRemoteFormIssue } from 'types' */
 import { app_dir, base } from '$app/paths/internal/client';
-import * as devalue from 'devalue';
 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 { 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,6 +23,8 @@ import {
 	build_path_string,
 	normalize_issue,
 	serialize_binary_form,
+	deep_get,
+	DELETE_KEY,
 	BINARY_FORM_CONTENT_TYPE
 } from '../../form-utils.js';
 
@@ -53,24 +60,34 @@ 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);
 
+		// 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 +100,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 +110,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 {string | null} */
+		let previous_submitter_name = null;
+
 		/**
 		 * In dev, warn if there are validation issues going unread
 		 */
@@ -181,77 +209,54 @@ export function form(id) {
 						remote_refreshes: Array.from(refreshes ?? [])
 					});
 
-					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
-					});
-
-					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');
-					}
-
-					const form_result = /** @type { RemoteFunctionResponse} */ (await response.json());
-
-					// reset issues in case it's a redirect or error (but issues passed in that case)
-					raw_issues = [];
-					result = undefined;
-
-					if (form_result.type === 'result') {
-						({ issues: raw_issues = [], result } = devalue.parse(form_result.result, app.decoders));
-						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 (form_result.reconnects) {
-									apply_reconnections(form_result.reconnects);
-								}
-							}
-						} else {
-							if (DEV) {
-								warn_on_missing_issue_reads();
-							}
+					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
 						}
+					);
 
-						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);
-						}
+					({ issues: raw_issues = [], result } = response._ ?? {});
 
-						if (stringified_reconnects) {
-							apply_reconnections(stringified_reconnects);
-						}
+					// 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;
 
+					if (response.redirect) {
 						// Use internal version to allow redirects to external URLs
 						void _goto(
-							form_result.location,
+							response.redirect,
 							{
-								invalidateAll:
-									refreshes === null && !stringified_refreshes && !stringified_reconnects
+								refreshAll: should_refresh
 							},
 							0
 						);
 						return true;
+					}
+
+					const succeeded = raw_issues.length === 0;
+
+					if (succeeded) {
+						if (should_refresh) {
+							void refreshAll();
+						}
 					} else {
-						throw new HttpError(form_result.status ?? 500, form_result.error);
+						if (DEV) {
+							warn_on_missing_issue_reads();
+						}
 					}
+
+					return succeeded;
 				} catch (e) {
 					result = undefined;
+					raw_issues = [];
 					throw e;
 				} finally {
 					overrides?.forEach((fn) => fn());
@@ -319,7 +324,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(
@@ -363,6 +369,8 @@ export function form(id) {
 			element = form;
 
 			touched = {};
+			dirty = {};
+			can_validate = {};
 
 			/** @param {SubmitEvent} event */
 			const handle_submit = async (event) => {
@@ -396,6 +404,29 @@ export function form(id) {
 
 				const form_data = new FormData(form, event.submitter);
 
+				if (
+					previous_submitter_name !== null &&
+					!Array.from(form_data.keys()).map(strip_prefix).includes(previous_submitter_name)
+				) {
+					// Strip any `n:`/`b:` type prefix before clearing, otherwise
+					// `set_nested_value` would coerce `undefined` to `NaN`/`false`
+					// instead of clearing the previously-submitted value.
+					set_nested_value(input, previous_submitter_name, undefined);
+				}
+
+				if (event.submitter) {
+					const name = event.submitter.getAttribute('name');
+					const value = /** @type {any} */ (event.submitter).value;
+
+					if (name !== null && value !== undefined) {
+						set_nested_value(input, name, value);
+					}
+
+					previous_submitter_name = strip_prefix(name);
+				} else {
+					previous_submitter_name = null;
+				}
+
 				if (DEV) {
 					validate_form_data(form_data, clone(form).enctype);
 				}
@@ -413,9 +444,14 @@ 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);
+						e instanceof HttpError
+							? e.body
+							: await handle_error(e, {
+									params: {},
+									route: { id: null },
+									url: new URL(location.href)
+								});
+					void set_nearest_error_page(error);
 				} finally {
 					pending_count--;
 				}
@@ -435,8 +471,6 @@ export function form(id) {
 
 				const is_file = element.type === 'file';
 
-				touched[name] = true;
-
 				if (is_array) {
 					let value;
 
@@ -481,14 +515,7 @@ export function form(id) {
 					if (file) {
 						set_nested_value(input, name, 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, name, DELETE_KEY);
 					}
 				} else {
 					set_nested_value(
@@ -498,9 +525,9 @@ export function form(id) {
 					);
 				}
 
-				name = name.replace(/^[nb]:/, '');
+				name = strip_prefix(name);
 
-				touched[name] = true;
+				dirty[name] = true;
 			};
 
 			const handle_reset = async () => {
@@ -509,18 +536,38 @@ export function form(id) {
 				await tick();
 
 				input = convert_formdata(new FormData(form));
+				raw_issues = [];
+				touched = {};
+				dirty = {};
+				can_validate = {};
+				submitted = false;
+			};
+
+			/** @param {Event} e */
+			const handle_focusout = (e) => {
+				let name = /** @type {HTMLInputElement} */ (e.target).name;
+				if (!name) return;
+
+				name = strip_prefix(name).replace(/\[\]$/, '');
+
+				touched[name] = true;
+
+				if (Object.hasOwn(dirty, name)) {
+					can_validate[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,9 +598,10 @@ export function form(id) {
 
 					const submission = submit(form_data, true);
 
-					void submission.finally(() => {
+					const decrement = () => {
 						pending_count--;
-					});
+					};
+					void submission.then(decrement, decrement);
 
 					return submission;
 				}
@@ -566,11 +614,16 @@ export function form(id) {
 						(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) => {
@@ -584,7 +637,10 @@ export function form(id) {
 							}
 
 							return issues;
-						}
+						},
+						() => touched,
+						() => dirty,
+						[]
 					)
 			},
 			result: {
@@ -593,16 +649,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 +684,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 +694,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;
@@ -748,3 +809,13 @@ function validate_form_data(form_data, enctype) {
 		}
 	}
 }
+
+/**
+ * Remove the `n:` or `b:` prefix from a field name
+ * @template {string | null} T
+ * @param {T} name
+ * @returns {T}
+ */
+function strip_prefix(name) {
+	return /** @type {T} */ (name && name.replace(/^[nb]:/, ''));
+}

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

@@ -2,9 +2,11 @@
 import { app_dir, base } from '$app/paths/internal/client';
 import { version } from '$app/env';
 import * as devalue from 'devalue';
-import { app, prerender_responses } from '../client.js';
-import { get_remote_request_headers, remote_request } from './shared.svelte.js';
+import { app, _goto, handle_error, prerender_responses } from '../client.js';
+import { get_remote_request_headers, remote_request, unwrap_node } from './shared.svelte.js';
 import { create_remote_key, stringify_remote_arg } from '../../shared.js';
+import { noop } from '../../../utils/functions.js';
+import { HttpError } from '@sveltejs/kit/internal';
 
 // Initialize Cache API for prerender functions
 const CACHE_NAME = __SVELTEKIT_DEV__ ? `sveltekit:${Date.now()}` : `sveltekit:${version}`;
@@ -67,7 +69,7 @@ export function prerender(id) {
 				const url = `${base}/${app_dir}/remote/${id}${payload ? `/${payload}` : ''}`;
 
 				if (Object.hasOwn(prerender_responses, cache_key)) {
-					const data = prerender_responses[cache_key];
+					const data = unwrap_node(prerender_responses[cache_key]);
 
 					if (prerender_cache) {
 						void put(url, devalue.stringify(data, app.encoders));
@@ -77,6 +79,7 @@ export function prerender(id) {
 				}
 
 				// Do this here, after await Svelte' reactivity context is gone.
+				// TODO we really don't want to be sending these specific headers here?
 				const headers = get_remote_request_headers();
 
 				// Check the Cache API first
@@ -93,14 +96,22 @@ export function prerender(id) {
 					}
 				}
 
-				const encoded = await remote_request(url, headers);
+				const result = await remote_request(url, { headers });
+
+				if (result.redirect) {
+					// Use internal version to allow redirects to external URLs
+					void _goto(result.redirect, {}, 0);
+					return;
+				}
+
+				const data = result._;
 
 				// For successful prerender requests, save to cache
 				if (prerender_cache) {
-					void put(url, encoded);
+					void put(url, devalue.stringify(data, app.encoders));
 				}
 
-				return devalue.parse(encoded, app.decoders);
+				return data;
 			});
 
 			prerender_resources.set(cache_key, new WeakRef(resource));
@@ -138,6 +149,7 @@ class Prerender {
 	/** @type {T | undefined} */
 	#current = $state.raw();
 
+	/** @type {App.Error | undefined} */
 	#error = $state.raw(undefined);
 
 	/**
@@ -152,12 +164,21 @@ class Prerender {
 				this.#error = undefined;
 				return value;
 			},
-			(error) => {
+			async (e) => {
+				const error = await handle_error(e, {
+					params: {},
+					route: { id: null },
+					url: new URL(location.href)
+				});
 				this.#loading = false;
 				this.#error = error;
-				throw error;
+				throw new HttpError(error.status, error); // so that transformError doesn't transform it again
 			}
 		);
+
+		// rejections are surfaced via `.error` for reactive consumers — make sure the
+		// stored promise (consumed without `await`) never becomes an unhandled rejection
+		this.#promise.catch(noop);
 	}
 
 	/**

package/src/runtime/client/remote-functions/query/index.js

@@ -1,10 +1,8 @@
 /** @import { RemoteQueryFunction } from '@sveltejs/kit' */
 import { app_dir, base } from '$app/paths/internal/client';
-import { app, query_map, query_responses } from '../../client.js';
+import { _goto, query_map } from '../../client.js';
 import { get_remote_request_headers, QUERY_FUNCTION_ID, remote_request } from '../shared.svelte.js';
-import * as devalue from 'devalue';
 import { DEV } from 'esm-env';
-import { hydratable } from 'svelte';
 import { QueryProxy } from './proxy.js';
 
 /**
@@ -25,20 +23,15 @@ export function query(id) {
 
 	/** @type {RemoteQueryFunction<any, any>} */
 	const wrapper = (arg) => {
-		return new QueryProxy(id, arg, async (key, payload) => {
-			if (Object.hasOwn(query_responses, key)) {
-				const value = query_responses[key];
-				delete query_responses[key];
-				return value;
-			}
-
+		return new QueryProxy(id, arg, async (payload) => {
 			const url = `${base}/${app_dir}/remote/${id}${payload ? `?payload=${payload}` : ''}`;
 
-			const serialized = await hydratable(key, () =>
-				remote_request(url, get_remote_request_headers())
-			);
+			const result = await remote_request(url, { headers: get_remote_request_headers() });
 
-			return devalue.parse(serialized, app.decoders);
+			if (result.redirect) {
+				// Use internal version to allow redirects to external URLs
+				await _goto(result.redirect, {}, 0);
+			}
 		});
 	};