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

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/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,7 +23,8 @@ import {
 	build_path_string,
 	normalize_issue,
 	serialize_binary_form,
-	BINARY_FORM_CONTENT_TYPE
+	BINARY_FORM_CONTENT_TYPE,
+	deep_get
 } from '../../form-utils.js';
 
 /**
@@ -52,6 +59,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 +99,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 +109,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 +323,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 +368,8 @@ export function form(id) {
 			element = form;
 
 			touched = {};
+			dirty = {};
+			can_validate = {};
 
 			/** @param {SubmitEvent} event */
 			const handle_submit = async (event) => {
@@ -379,6 +403,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 +443,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 +470,6 @@ export function form(id) {
 
 				const is_file = element.type === 'file';
 
-				touched[name] = true;
-
 				if (is_array) {
 					let value;
 
@@ -481,9 +531,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 +542,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 +604,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 +620,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 +643,10 @@ export function form(id) {
 							}
 
 							return issues;
-						}
+						},
+						() => touched,
+						() => dirty,
+						[]
 					)
 			},
 			result: {
@@ -576,16 +655,29 @@ 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,
+					// @ts-expect-error TODO remove this in 3.0
+					includeUntouched
+				} = {}) => {
 					if (!element) return;
 
 					const id = ++validate_id;
@@ -603,8 +695,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 +728,16 @@ export function form(id) {
 						array = /** @type {InternalRemoteFormIssue[]} */ (result._);
 					}
 
-					if (!includeUntouched && !submitted) {
-						array = array.filter((issue) => touched[issue.name]);
+					if (includeUntouched !== undefined) {
+						console.warn(
+							`\`{ includeUntouched: ${includeUntouched} }\` has been replaced with \`{ all: ${includeUntouched} }\``
+						);
+
+						all = includeUntouched;
+					}
+
+					if (!all && !submitted) {
+						array = array.filter((issue) => can_validate[issue.name]);
 					}
 
 					const is_server_validation = !validated?.issues && !preflightOnly;
@@ -728,3 +828,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,10 @@
 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, 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';
 
 // Initialize Cache API for prerender functions
 const CACHE_NAME = __SVELTEKIT_DEV__ ? `sveltekit:${Date.now()}` : `sveltekit:${version}`;
@@ -97,7 +98,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;
 				}
 
@@ -166,6 +168,10 @@ class Prerender {
 				throw error;
 			}
 		);
+
+		// 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

@@ -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())

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

@@ -91,7 +91,7 @@ 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;
 
@@ -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);
@@ -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;
 	}
@@ -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;

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

@@ -2,7 +2,7 @@
 /** @import { RemoteQueryUpdate } from '@sveltejs/kit' */
 /** @import { CacheEntry } from './cache.svelte.js' */
 import * as devalue from 'devalue';
-import { app, goto, live_query_map, query_map, query_responses } from '../client.js';
+import { app, _goto, live_query_map, query_map, query_responses } from '../client.js';
 import { HttpError, Redirect } from '@sveltejs/kit/internal';
 import { untrack } from 'svelte';
 import { create_remote_key, split_remote_key } from '../../shared.js';
@@ -86,7 +86,7 @@ export function pin_while_resolving(cache_map, cache, id, payload, then) {
  */
 export function unwrap_node(node) {
 	if (node.e) {
-		throw new HttpError(node.e[0] ?? 500, node.e[1]);
+		throw new HttpError(node.e.status, node.e);
 	}
 
 	return node.v;
@@ -114,13 +114,22 @@ export async function remote_request(url, init) {
 	const response = await fetch(url, init);
 
 	if (!response.ok) {
-		throw new HttpError(500, 'Failed to execute remote function');
+		const result = await response.json().catch(() => ({
+			type: 'error',
+			status: response.status,
+			error: response.statusText
+		}));
+
+		throw new HttpError(
+			result.error?.status ?? result.status ?? response.status ?? 500,
+			result.error
+		);
 	}
 
 	const result = /** @type {RemoteFunctionResponse} */ (await response.json());
 
 	if (result.type === 'error') {
-		throw new HttpError(result.status ?? 500, result.error);
+		throw new HttpError(result.error.status, result.error);
 	}
 
 	const data = /** @type {RemoteFunctionData} */ (
@@ -136,7 +145,7 @@ export async function remote_request(url, init) {
 	function refresh(key, entry, result) {
 		if (entry?.resource) {
 			if (result.e) {
-				entry.resource.fail(new HttpError(result.e[0] ?? 500, result.e[1]));
+				entry.resource.fail(new HttpError(result.e.status, result.e));
 			} else {
 				entry.resource.set(result.v);
 			}
@@ -184,12 +193,13 @@ export async function remote_request(url, init) {
  */
 export async function handle_side_channel_response(response) {
 	if (response.type === 'redirect') {
-		await goto(response.location);
+		// Use internal version to allow redirects to external URLs
+		await _goto(response.location, {}, 0);
 		throw new Redirect(307, response.location);
 	}
 
 	if (response.type === 'error') {
-		throw new HttpError(response.status ?? 500, response.error);
+		throw new HttpError(response.error.status, response.error);
 	}
 
 	return response;

package/src/runtime/client/types.d.ts

@@ -58,6 +58,12 @@ export interface SvelteKitApp {
 	hash: boolean;
 
 	root: typeof SvelteComponent;
+
+	/**
+	 * Lazily loads the contents of src/error.html, used as a last-resort
+	 * error page when the root layout's load function throws during client-side rendering.
+	 */
+	get_error_template: () => Promise<(data: { status: number; message: string }) => string>;
 }
 
 export type NavigationIntent = {
@@ -77,6 +83,7 @@ export type NavigationResult = NavigationRedirect | NavigationFinished;
 
 export type NavigationRedirect = {
 	type: 'redirect';
+	status: number;
 	location: string;
 };
 
@@ -119,7 +126,8 @@ export interface NavigationState {
 }
 
 export interface HydrateOptions {
-	status: number;
+	/** Provided in the case of a form action that returns `fail`, but otherwise derived from `error` */
+	status?: number;
 	error: App.Error | null;
 	node_ids: number[];
 	params: Record<string, string>;

package/src/runtime/client/utils.js

@@ -1,6 +1,6 @@
 import { BROWSER, DEV } from 'esm-env';
 import { writable } from 'svelte/store';
-import { assets } from '$app/paths';
+import { assets } from '$app/paths/internal/client';
 import { version } from '$app/env';
 import { noop } from '../../utils/functions.js';
 import { PRELOAD_PRIORITIES } from './constants.js';