@sveltejs/kit 3.0.0-next.4 → 3.0.0-next.7

package/src/runtime/client/fetcher.js

@@ -94,8 +94,6 @@ export function initial_fetch(resource, opts) {
 		script.remove(); // In case multiple script tags match the same selector
 		let { body, ...init } = JSON.parse(script.textContent);
 
-		const ttl = script.getAttribute('data-ttl');
-		if (ttl) cache.set(selector, { body, init, ttl: 1000 * Number(ttl) });
 		const b64 = script.getAttribute('data-b64');
 		if (b64 !== null) {
 			// Can't use native_fetch('data:...;base64,${body}')
@@ -103,6 +101,9 @@ export function initial_fetch(resource, opts) {
 			body = base64_decode(body);
 		}
 
+		const ttl = script.getAttribute('data-ttl');
+		if (ttl) cache.set(selector, { body, init, ttl: 1000 * Number(ttl) });
+
 		return Promise.resolve(new Response(body, init));
 	}
 

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

@@ -1,8 +1,10 @@
+/** @import { Query } from './query/instance.svelte.js' */
+/** @import { LiveQuery } from './query-live/instance.svelte.js' */
 import { tick } from 'svelte';
 import { once } from '../../../utils/functions.js';
 
 /**
- * @template R
+ * @template [R=Query<any> | LiveQuery<any>]
  * @typedef {object} CacheEntry
  * @property {number} proxy_count The number of live proxy instances referencing this
  *   entry. The entry is eligible for eviction when this hits zero.

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

@@ -4,7 +4,13 @@
 import { app_dir, base } from '$app/paths/internal/client';
 import { DEV } from 'esm-env';
 import { HttpError } from '@sveltejs/kit/internal';
-import { query_responses, _goto, set_nearest_error_page, invalidateAll } from '../client.js';
+import {
+	query_responses,
+	_goto,
+	set_nearest_error_page,
+	invalidateAll,
+	handle_error
+} from '../client.js';
 import { tick } from 'svelte';
 import { categorize_updates, remote_request } from './shared.svelte.js';
 import { createAttachmentKey } from 'svelte/attachments';
@@ -17,6 +23,8 @@ import {
 	build_path_string,
 	normalize_issue,
 	serialize_binary_form,
+	deep_get,
+	DELETE_KEY,
 	BINARY_FORM_CONTENT_TYPE
 } from '../../form-utils.js';
 
@@ -52,6 +60,9 @@ 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;
@@ -89,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);
 			}
 		};
 
@@ -97,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({});
+
+		/** @type {Record<string, boolean>} */
+		let can_validate = {};
 
-		let submitted = false;
+		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
 		 */
@@ -302,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(
@@ -346,6 +369,8 @@ export function form(id) {
 			element = form;
 
 			touched = {};
+			dirty = {};
+			can_validate = {};
 
 			/** @param {SubmitEvent} event */
 			const handle_submit = async (event) => {
@@ -379,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);
 				}
@@ -396,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--;
 				}
@@ -418,8 +471,6 @@ export function form(id) {
 
 				const is_file = element.type === 'file';
 
-				touched[name] = true;
-
 				if (is_array) {
 					let value;
 
@@ -464,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(
@@ -481,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 () => {
@@ -492,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;
 			};
 		};
 
@@ -534,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;
 				}
@@ -549,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) => {
@@ -567,7 +637,10 @@ export function form(id) {
 							}
 
 							return issues;
-						}
+						},
+						() => touched,
+						() => dirty,
+						[]
 					)
 			},
 			result: {
@@ -576,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;
@@ -603,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;
@@ -636,8 +717,8 @@ export function form(id) {
 						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;
@@ -728,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, goto, prerender_responses } from '../client.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}`;
@@ -97,7 +99,8 @@ export function prerender(id) {
 				const result = await remote_request(url, { headers });
 
 				if (result.redirect) {
-					void goto(result.redirect);
+					// Use internal version to allow redirects to external URLs
+					void _goto(result.redirect, {}, 0);
 					return;
 				}
 
@@ -146,6 +149,7 @@ class Prerender {
 	/** @type {T | undefined} */
 	#current = $state.raw();
 
+	/** @type {App.Error | undefined} */
 	#error = $state.raw(undefined);
 
 	/**
@@ -160,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,6 +1,6 @@
 /** @import { RemoteQueryFunction } from '@sveltejs/kit' */
 import { app_dir, base } from '$app/paths/internal/client';
-import { goto, query_map } 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 { DEV } from 'esm-env';
 import { QueryProxy } from './proxy.js';
@@ -29,7 +29,8 @@ export function query(id) {
 			const result = await remote_request(url, { headers: get_remote_request_headers() });
 
 			if (result.redirect) {
-				await goto(result.redirect);
+				// Use internal version to allow redirects to external URLs
+				await _goto(result.redirect, {}, 0);
 			}
 		});
 	};

package/src/runtime/client/remote-functions/query/instance.svelte.js

@@ -1,4 +1,4 @@
-import { query_responses } from '../../client.js';
+import { query_responses, handle_error } from '../../client.js';
 import { HttpError } from '@sveltejs/kit/internal';
 import { QUERY_OVERRIDE_KEY } from '../shared.svelte.js';
 import { noop } from '../../../../utils/functions.js';
@@ -37,7 +37,7 @@ export class Query {
 		return this.#overrides.reduce((v, r) => r(v), /** @type {T} */ (this.#raw));
 	});
 
-	/** @type {any} */
+	/** @type {App.Error | undefined} */
 	#error = $state.raw(undefined);
 
 	/** @type {Promise<T>['then']} */
@@ -70,7 +70,7 @@ export class Query {
 			delete query_responses[key];
 
 			if (node.e) {
-				this.fail(new HttpError(node.e[0] ?? 500, node.e[1]));
+				this.fail(new HttpError(node.e.status, node.e));
 			} else {
 				this.set(/** @type {T} */ (node.v));
 			}
@@ -87,7 +87,9 @@ export class Query {
 		// every time you see this comment, try removing the `tick.then` here and see
 		// if all the tests still pass with the latest svelte version
 		// if they do, congrats, you can remove tick.then
-		void tick().then(() => this.#get_promise());
+		void tick()
+			.then(() => this.#get_promise())
+			.catch(noop);
 	}
 
 	#clear_pending() {
@@ -100,6 +102,11 @@ export class Query {
 
 		const { promise, resolve, reject } = Promise.withResolvers();
 
+		// the rejection is surfaced via `.error` / the `then` getter for awaiting
+		// consumers — a purely reactive consumer (`.current`) attaches no handler,
+		// so make sure the stored promise can never become an unhandled rejection
+		promise.catch(noop);
+
 		this.#latest.push(resolve);
 
 		Promise.resolve(this.#fn())
@@ -119,22 +126,33 @@ export class Query {
 
 				resolve(undefined);
 			})
-			.catch((e) => {
+			.catch(async (e) => {
 				// TODO: Our behavior here could be better:
 				// - We should not reject on redirects, but should hook into the router
 				//   to ensure the query is properly refreshed before the navigation completes
 				// - Instead of failing on transport-level errors, we should probably do what
 				//   LiveQuery does and preserve the last known good value and retry the connection
+				if (this.#latest.indexOf(resolve) === -1) return;
+
+				const error = await handle_error(e, {
+					params: {},
+					route: { id: null },
+					url: new URL(location.href)
+				});
+
+				// Re-check after the async `handle_error` gap: a later request may have
+				// resolved/rejected while we were awaiting and superseded this one, so
+				// recompute the index and bail out if this request is no longer current
 				const idx = this.#latest.indexOf(resolve);
 				if (idx === -1) return;
 
 				untrack(() => {
 					this.#latest.splice(0, idx).forEach((r) => r(undefined));
-					this.#error = e;
+					this.#error = error;
 					this.#loading = false;
 				});
 
-				reject(e);
+				reject(new HttpError(error.status, error)); // so that transformError doesn't transform it again
 			});
 
 		return promise;
@@ -222,9 +240,7 @@ export class Query {
 		this.#promise = Promise.resolve();
 	}
 
-	/**
-	 * @param {unknown} error
-	 */
+	/** @param {HttpError} error */
 	fail(error) {
 		// normally consumed in the constructor, but make sure a leftover
 		// SSR record can never shadow the newly-set error
@@ -232,7 +248,7 @@ export class Query {
 
 		this.#clear_pending();
 		this.#loading = false;
-		this.#error = error;
+		this.#error = error.body;
 
 		const promise = Promise.reject(error);
 

package/src/runtime/client/remote-functions/query-batch.svelte.js

@@ -1,6 +1,6 @@
 /** @import { RemoteQueryFunction } from '@sveltejs/kit' */
 import { app_dir, base } from '$app/paths/internal/client';
-import { goto } from '../client.js';
+import { _goto } from '../client.js';
 import { get_remote_request_headers, QUERY_FUNCTION_ID, remote_request } from './shared.svelte.js';
 import { QueryProxy } from './query/proxy.js';
 import { HttpError } from '@sveltejs/kit/internal';
@@ -50,7 +50,8 @@ export function query_batch(id) {
 						});
 
 						if (response.redirect) {
-							await goto(response.redirect);
+							// Use internal version to allow redirects to external URLs
+							await _goto(response.redirect, {}, 0);
 
 							// settle all batched promises (with `undefined`, like a redirect
 							// from a non-batched query) so that callers don't hang forever
@@ -71,7 +72,7 @@ export function query_batch(id) {
 
 							for (const { resolve, reject } of resolvers) {
 								if (result.type === 'error') {
-									reject(new HttpError(result.status, result.error));
+									reject(new HttpError(result.error.status, result.error));
 								} else {
 									resolve(result.data);
 								}

package/src/runtime/client/remote-functions/query-live/instance.svelte.js

@@ -1,4 +1,4 @@
-import { query_responses } from '../../client.js';
+import { query_responses, handle_error } from '../../client.js';
 import { HttpError, Redirect } from '@sveltejs/kit/internal';
 import { noop, once } from '../../../../utils/functions.js';
 import { SharedIterator } from '../../../../utils/shared-iterator.js';
@@ -24,7 +24,7 @@ export class LiveQuery {
 	#done = $state(false);
 	/** @type {T | undefined} */
 	#raw = $state.raw();
-	/** @type {any} */
+	/** @type {App.Error | undefined} */
 	#error = $state.raw(undefined);
 	/** @type {Promise<void>} */
 	#promise;
@@ -91,9 +91,9 @@ export class LiveQuery {
 				// the query failed during SSR — seed the failed state (mirroring `fail()`,
 				// minus its terminal `#done`), so the main loop still connects as usual
 				// and the query can recover
-				const error = new HttpError(node.e[0] ?? 500, node.e[1]);
+				const error = new HttpError(node.e.status, node.e);
 				this.#loading = false;
-				this.#error = error;
+				this.#error = error.body;
 
 				promise.catch(noop);
 				this.#reject_first?.(error);
@@ -122,6 +122,7 @@ export class LiveQuery {
 
 		/** @type {PromiseWithResolvers<void>} */
 		const { promise: stopped, resolve: on_stop } = Promise.withResolvers();
+		let connected = false;
 
 		while (!this.#done) {
 			const controller = new AbortController();
@@ -134,16 +135,22 @@ export class LiveQuery {
 			const generator = create_live_iterator(this.#id, this.#payload, controller, () => {
 				this.#connected = true;
 				this.#attempt = 0;
+				connected = true;
 				on_connect();
 			});
 
 			try {
 				const { done, value } = await generator.next();
 
-				// TODO how much special handling does this need?
-				// should we even try to reconnect if this is the case?
-				if (done && !this.#ready) {
-					throw new Error('Live query completed before yielding a value');
+				if (done) {
+					if (!this.#ready) {
+						throw new Error('Live query completed before yielding a value');
+					}
+					// stream completed without yielding (e.g. the generator returned
+					// immediately on reconnect) — keep the last good value
+					this.#done = true;
+					this.#fan_out.done();
+					break;
 				}
 
 				this.set(value);
@@ -168,7 +175,7 @@ export class LiveQuery {
 
 				if (!this.#ready) {
 					// If we haven't successfully connected and received a value yet, surface the error
-					this.fail(error);
+					await this.#fail(error);
 					on_connect_failed(error);
 					break;
 				}
@@ -200,6 +207,12 @@ export class LiveQuery {
 		}
 
 		this.#interrupt = null;
+		// If the loop exited without ever successfully connecting, settle the
+		// reconnect handshake so callers (e.g. `invalidateAll()`) never await
+		// a forever-pending promise.
+		if (!connected) {
+			on_connect_failed(this.#error ?? new Error('Live query connection was interrupted'));
+		}
 		on_stop();
 	}
 
@@ -343,10 +356,13 @@ export class LiveQuery {
 		promise.catch(noop);
 		this.#done = false;
 		this.#attempt = 0;
-		// The previous fan-out may have been closed by `done()`/`fail()`. Future
-		// `for await` consumers need a fresh, open fan-out attached to the new
-		// `#main` lifetime.
-		this.#fan_out = new SharedIterator();
+		// Keep the existing fan-out open so active `for await` consumers
+		// continue receiving values from the new connection without interruption.
+		// Only replace it if it was already closed by a prior `done()`/`fail()`
+		// (e.g. reconnecting after a finite or hard-failed stream)
+		if (this.#fan_out.closed) {
+			this.#fan_out = new SharedIterator();
+		}
 		this.#main({ on_connect, on_connect_failed }).catch(noop);
 		await promise;
 	}
@@ -369,10 +385,10 @@ export class LiveQuery {
 		this.#fan_out.push(value);
 	}
 
-	/** @param {unknown} error */
+	/** @param {HttpError} error */
 	fail(error) {
 		this.#loading = false;
-		this.#error = error;
+		this.#error = error.body;
 		// `fail` is terminal — once a live query has hard-failed, the only way to start
 		// streaming again is via `reconnect()`. Mark it done and abort any in-flight
 		// request so that callers from outside the main loop (e.g. `apply_reconnections`)
@@ -381,6 +397,7 @@ export class LiveQuery {
 		void this.#interrupt?.();
 
 		if (this.#reject_first) {
+			this.#promise.catch(noop);
 			this.#reject_first(error);
 			this.#resolve_first = null;
 			this.#reject_first = null;
@@ -393,6 +410,16 @@ export class LiveQuery {
 		this.#fan_out.fail(error);
 	}
 
+	/** @param {unknown} e */
+	async #fail(e) {
+		const error = await handle_error(e, {
+			params: {},
+			route: { id: null },
+			url: new URL(location.href)
+		});
+		this.fail(new HttpError(error.status, error));
+	}
+
 	get [Symbol.toStringTag]() {
 		return 'LiveQuery';
 	}