@sveltejs/kit 2.54.0 → 2.56.0

package/src/runtime/app/server/remote/requested.js

@@ -0,0 +1,172 @@
+/** @import { RemoteQueryFunction, RequestedResult } from '@sveltejs/kit' */
+/** @import { MaybePromise, RemoteQueryInternals } from 'types' */
+import { get_request_store } from '@sveltejs/kit/internal/server';
+import { create_remote_key, parse_remote_arg } from '../../../shared.js';
+import { mark_argument_validated } from './query.js';
+
+/**
+ * In the context of a remote `command` or `form` request, returns an iterable
+ * of the client-requested refreshes' validated arguments up to the supplied limit.
+ * Arguments that fail validation or exceed the limit are recorded as failures in
+ * the response to the client.
+ *
+ * @example
+ * ```ts
+ * import { requested } from '$app/server';
+ *
+ * for (const arg of requested(getPost, 5)) {
+ * 	// it's safe to throw away this promise -- SvelteKit
+ * 	// will await it for us and handle any errors by sending
+ * 	// them to the client.
+ * 	void getPost(arg).refresh();
+ * }
+ * ```
+ *
+ * As a shorthand for the above, you can also call `refreshAll` on the result:
+ *
+ * ```ts
+ * import { requested } from '$app/server';
+ *
+ * await requested(getPost, 5).refreshAll();
+ * ```
+ *
+ * @template Input
+ * @template Output
+ * @param {RemoteQueryFunction<Input, Output>} query
+ * @param {number} [limit=Infinity]
+ * @returns {RequestedResult<Input>}
+ */
+export function requested(query, limit = Infinity) {
+	const { state } = get_request_store();
+	const internals = /** @type {RemoteQueryInternals | undefined} */ (/** @type {any} */ (query).__);
+
+	if (!internals || internals.type !== 'query') {
+		throw new Error('requested(...) expects a query function created with query(...)');
+	}
+
+	const requested = state.remote.requested;
+	const payloads = requested?.get(internals.id) ?? [];
+	const refreshes = (state.remote.refreshes ??= {});
+	const [selected, skipped] = split_limit(payloads, limit);
+
+	/**
+	 * @param {string} payload
+	 * @param {unknown} error
+	 */
+	const record_failure = (payload, error) => {
+		const promise = Promise.reject(error);
+		promise.catch(() => {});
+
+		const key = create_remote_key(internals.id, payload);
+		refreshes[key] = promise;
+	};
+
+	for (const payload of skipped) {
+		record_failure(
+			payload,
+			new Error(
+				`Requested refresh was rejected because it exceeded requested(${internals.name}, ${limit}) limit`
+			)
+		);
+	}
+
+	return {
+		*[Symbol.iterator]() {
+			for (const payload of selected) {
+				try {
+					const parsed = parse_remote_arg(payload, state.transport);
+					const validated = internals.validate(parsed);
+
+					if (is_thenable(validated)) {
+						throw new Error(
+							// TODO improve
+							`requested(${internals.name}, ${limit}) cannot be used with synchronous iteration because the query validator is async. Use \`for await ... of\` instead`
+						);
+					}
+
+					yield mark_argument_validated(internals, state, validated);
+				} catch (error) {
+					record_failure(payload, error);
+					continue;
+				}
+			}
+		},
+		async *[Symbol.asyncIterator]() {
+			yield* race_all(selected, async (payload) => {
+				try {
+					const parsed = parse_remote_arg(payload, state.transport);
+					const validated = await internals.validate(parsed);
+					return mark_argument_validated(internals, state, validated);
+				} catch (error) {
+					record_failure(payload, error);
+					throw new Error(`Skipping ${internals.name}(${payload})`, { cause: error });
+				}
+			});
+		},
+		async refreshAll() {
+			for await (const arg of this) {
+				void query(arg).refresh();
+			}
+		}
+	};
+}
+
+/**
+ * @template T
+ * @param {Array<T>} array
+ * @param {number} limit
+ * @returns {[Array<T>, Array<T>]}
+ */
+function split_limit(array, limit) {
+	if (limit === Infinity) {
+		return [array, []];
+	}
+	if (!Number.isInteger(limit) || limit < 0) {
+		throw new Error('Limit must be a non-negative integer or Infinity');
+	}
+	return [array.slice(0, limit), array.slice(limit)];
+}
+
+/**
+ * @param {any} value
+ * @returns {value is PromiseLike<any>}
+ */
+function is_thenable(value) {
+	return !!value && (typeof value === 'object' || typeof value === 'function') && 'then' in value;
+}
+
+/**
+ * Runs all callbacks immediately and yields resolved values in completion order.
+ * If the promise rejects, it is skipped.
+ *
+ * @template T
+ * @template R
+ * @param {Array<T>} array
+ * @param {(value: T) => MaybePromise<R>} fn
+ * @returns {AsyncIterable<R>}
+ */
+async function* race_all(array, fn) {
+	/** @type {Set<Promise<{ promise: Promise<any>, value: Awaited<R> }>>} */
+	const pending = new Set();
+
+	for (const value of array) {
+		/** @type {Promise<{ promise: Promise<any>, value: Awaited<R> }>} */
+		const promise = Promise.resolve(fn(value)).then((result) => ({
+			promise,
+			value: result
+		}));
+
+		promise.catch(() => {});
+		pending.add(promise);
+	}
+
+	while (pending.size > 0) {
+		try {
+			const { promise, value } = await Promise.race(pending);
+			pending.delete(promise);
+			yield value;
+		} catch {
+			// Ignore errors, they are handled in the fn callback and result in skip
+		}
+	}
+}

package/src/runtime/app/server/remote/shared.js

@@ -1,9 +1,14 @@
 /** @import { RequestEvent } from '@sveltejs/kit' */
-/** @import { ServerHooks, MaybePromise, RequestState, RemoteInfo, RequestStore } from 'types' */
+/** @import { ServerHooks, MaybePromise, RequestState, RemoteInternals, RequestStore } from 'types' */
 import { parse } from 'devalue';
 import { error } from '@sveltejs/kit';
 import { with_request_store, get_request_store } from '@sveltejs/kit/internal/server';
-import { stringify_remote_arg } from '../../../shared.js';
+import {
+	stringify_remote_arg,
+	create_remote_key,
+	stringify,
+	unfriendly_hydratable
+} from '../../../shared.js';
 
 /**
  * @param {any} validate_or_fn
@@ -61,20 +66,37 @@ export function create_validator(validate_or_fn, maybe_fn) {
  * Also saves an uneval'ed version of the result for later HTML inlining for hydration.
  *
  * @template {MaybePromise<any>} T
- * @param {RemoteInfo} info
+ * @param {RemoteInternals} internals
  * @param {any} arg
  * @param {RequestState} state
  * @param {() => Promise<T>} get_result
  * @returns {Promise<T>}
  */
-export async function get_response(info, arg, state, get_result) {
+export async function get_response(internals, arg, state, get_result) {
 	// wait a beat, in case `myQuery().set(...)` or `myQuery().refresh()` is immediately called
 	// eslint-disable-next-line @typescript-eslint/await-thenable
 	await 0;
 
-	const cache = get_cache(info, state);
+	const cache = get_cache(internals, state);
+	const key = stringify_remote_arg(arg, state.transport);
+	const entry = (cache[key] ??= {
+		serialize: false,
+		data: get_result()
+	});
 
-	return (cache[stringify_remote_arg(arg, state.transport)] ??= get_result());
+	entry.serialize ||= !!state.is_in_universal_load;
+
+	if (state.is_in_render && internals.id) {
+		const remote_key = create_remote_key(internals.id, key);
+
+		Promise.resolve(entry.data)
+			.then((value) => {
+				void unfriendly_hydratable(remote_key, () => stringify(value, state.transport));
+			})
+			.catch(() => {});
+	}
+
+	return entry.data;
 }
 
 /**
@@ -146,15 +168,15 @@ export async function run_remote_function(event, state, allow_cookies, get_input
 }
 
 /**
- * @param {RemoteInfo} info
+ * @param {RemoteInternals} internals
  * @param {RequestState} state
  */
-export function get_cache(info, state = get_request_store().state) {
-	let cache = state.remote_data?.get(info);
+export function get_cache(internals, state = get_request_store().state) {
+	let cache = state.remote.data?.get(internals);
 
 	if (cache === undefined) {
 		cache = {};
-		(state.remote_data ??= new Map()).set(info, cache);
+		(state.remote.data ??= new Map()).set(internals, cache);
 	}
 
 	return cache;

package/src/runtime/app/state/server.js

@@ -11,7 +11,7 @@ function context_dev(name) {
 		return context();
 	} catch {
 		throw new Error(
-			`Can only read '${name}' on the server during rendering (not in e.g. \`load\` functions), as it is bound to the current request via component context. This prevents state from leaking between users.` +
+			`Can only read '${name}' on the server during rendering (not in e.g. \`load\` functions), as it is bound to the current request via component context. This prevents state from leaking between users. ` +
 				'For more information, see https://svelte.dev/docs/kit/state-management#avoid-shared-state-on-the-server'
 		);
 	}

package/src/runtime/client/client.js

@@ -1,3 +1,4 @@
+/** @import { RemoteQueryCacheEntry } from './remote-functions/query.svelte.js' */
 import { BROWSER, DEV } from 'esm-env';
 import * as svelte from 'svelte';
 import { HttpError, Redirect, SvelteKitError } from '@sveltejs/kit/internal';
@@ -198,10 +199,18 @@ let target;
 export let app;
 
 /**
- * Data that was serialized during SSR. This is cleared when the user first navigates
+ * Data that was serialized during SSR for queries/forms/commands.
+ * This is cleared before client-side loads run.
  * @type {Record<string, any>}
  */
-export let remote_responses = {};
+export let query_responses = {};
+
+/**
+ * Data that was serialized during SSR for prerender functions.
+ * This persists across client-side navigations.
+ * @type {Record<string, any>}
+ */
+export let prerender_responses = {};
 
 /** @type {Array<((url: URL) => boolean)>} */
 const invalidated = [];
@@ -292,8 +301,8 @@ const preload_tokens = new Set();
 export let pending_invalidate;
 
 /**
- * @type {Map<string, {count: number, resource: any}>}
- * A map of id -> query info with all queries that currently exist in the app.
+ * @type {Map<string, Map<string, RemoteQueryCacheEntry<any>>>}
+ * A map of query id -> payload -> query internals for all active queries.
  */
 export const query_map = new Map();
 
@@ -309,8 +318,9 @@ export async function start(_app, _target, hydrate) {
 		);
 	}
 
-	if (__SVELTEKIT_PAYLOAD__?.data) {
-		remote_responses = __SVELTEKIT_PAYLOAD__.data;
+	if (__SVELTEKIT_PAYLOAD__) {
+		query_responses = __SVELTEKIT_PAYLOAD__.query ?? {};
+		prerender_responses = __SVELTEKIT_PAYLOAD__.prerender ?? {};
 	}
 
 	// detect basic auth credentials in the current URL
@@ -401,8 +411,10 @@ async function _invalidate(include_load_functions = true, reset_page_state = tru
 
 	// Rerun queries
 	if (force_invalidation) {
-		query_map.forEach(({ resource }) => {
-			resource.refresh?.();
+		query_map.forEach((entries) => {
+			entries.forEach(({ resource }) => {
+				void resource.refresh?.();
+			});
 		});
 	}
 
@@ -433,7 +445,11 @@ async function _invalidate(include_load_functions = true, reset_page_state = tru
 	}
 
 	// Don't use allSettled yet because it's too new
-	await Promise.all([...query_map.values()].map(({ resource }) => resource)).catch(noop);
+	await Promise.all(
+		[...query_map.values()].flatMap((entries) =>
+			[...entries.values()].map(({ resource }) => resource)
+		)
+	).catch(noop);
 }
 
 function reset_invalidation() {
@@ -491,7 +507,12 @@ export async function _goto(url, options, redirect_count, nav_token) {
 		accept: () => {
 			if (options.invalidateAll) {
 				force_invalidation = true;
-				query_keys = [...query_map.keys()];
+				query_keys = [];
+				query_map.forEach((entries, id) => {
+					for (const payload of entries.keys()) {
+						query_keys.push(id + '/' + payload);
+					}
+				});
 			}
 
 			if (options.invalidate) {
@@ -507,11 +528,12 @@ export async function _goto(url, options, redirect_count, nav_token) {
 			.tick()
 			.then(svelte.tick)
 			.then(() => {
-				query_map.forEach(({ resource }, key) => {
-					// Only refresh those that already existed on the old page
-					if (query_keys?.includes(key)) {
-						resource.refresh?.();
-					}
+				query_map.forEach((entries, id) => {
+					entries.forEach(({ resource }, payload) => {
+						if (query_keys?.includes(id + '/' + payload)) {
+							void resource.refresh?.();
+						}
+					});
 				});
 			});
 	}
@@ -1602,8 +1624,6 @@ async function navigate({
 	block = noop,
 	event
 }) {
-	remote_responses = {};
-
 	const prev_token = token;
 	token = nav_token;
 
@@ -1767,6 +1787,10 @@ async function navigate({
 	// also compare ids to avoid using wrong fork (e.g. a new one could've been added while navigating)
 	const load_cache_fork = intent && load_cache?.id === intent.id ? load_cache.fork : null;
 	// reset preload synchronously after the history state has been set to avoid race conditions
+	if (load_cache?.fork && !load_cache_fork) {
+		// discard fork of different route
+		discard_load_cache();
+	}
 	load_cache = null;
 
 	navigation_result.props.page.state = state;
@@ -2262,8 +2286,6 @@ export function refreshAll({ includeLoadFunctions = true } = {}) {
 		throw new Error('Cannot call refreshAll() on the server');
 	}
 
-	remote_responses = {};
-
 	force_invalidation = true;
 	return _invalidate(includeLoadFunctions, false);
 }
@@ -2942,6 +2964,8 @@ async function _hydrate(
 
 		target.textContent = '';
 		hydrate = false;
+	} finally {
+		query_responses = {};
 	}
 
 	if (result.props.page) {
@@ -3130,7 +3154,8 @@ function reset_focus(url, scroll = true) {
 			const tabindex = root.getAttribute('tabindex');
 
 			root.tabIndex = -1;
-			// @ts-expect-error options.focusVisible is only supported in Firefox
+			// TODO: remove this when we switch to TypeScript 6
+			// @ts-ignore options.focusVisible is only typed in TypeScript 6
 			// See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#browser_compatibility
 			root.focus({ preventScroll: true, focusVisible: false });
 

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

@@ -1,12 +1,15 @@
-/** @import { RemoteCommand, RemoteQueryOverride } from '@sveltejs/kit' */
+/** @import { RemoteCommand, RemoteQueryUpdate } from '@sveltejs/kit' */
 /** @import { RemoteFunctionResponse } from 'types' */
-/** @import { Query } from './query.svelte.js' */
 import { app_dir, base } from '$app/paths/internal/client';
 import * as devalue from 'devalue';
 import { HttpError } from '@sveltejs/kit/internal';
 import { app } from '../client.js';
 import { stringify_remote_arg } from '../../shared.js';
-import { get_remote_request_headers, refresh_queries, release_overrides } from './shared.svelte.js';
+import {
+	get_remote_request_headers,
+	apply_refreshes,
+	categorize_updates
+} from './shared.svelte.js';
 
 /**
  * Client-version of the `command` function from `$app/server`.
@@ -21,8 +24,13 @@ export function command(id) {
 	// If we make it async, the return type will be a promise that resolves to a promise with an updates() method, which is not what we want.
 	/** @type {RemoteCommand<any, any>} */
 	const command_function = (arg) => {
-		/** @type {Array<Query<any> | RemoteQueryOverride>} */
-		let updates = [];
+		let overrides = /** @type {Array<() => void> | null} */ (null);
+
+		/** @type {Set<string> | null} */
+		let refreshes = null;
+
+		/** @type {Error | undefined} */
+		let updates_error;
 
 		// Increment pending count when command starts
 		pending_count++;
@@ -34,23 +42,26 @@ export function command(id) {
 			...get_remote_request_headers()
 		};
 
-		/** @type {Promise<any> & { updates: (...args: any[]) => any }} */
+		/** @type {Promise<any> & { updates: (...args: RemoteQueryUpdate[]) => Promise<any> }} */
 		const promise = (async () => {
 			try {
 				// Wait a tick to give room for the `updates` method to be called
 				await Promise.resolve();
 
+				if (updates_error) {
+					throw updates_error;
+				}
+
 				const response = await fetch(`${base}/${app_dir}/remote/${id}`, {
 					method: 'POST',
 					body: JSON.stringify({
-						payload: stringify_remote_arg(arg, app.hooks.transport),
-						refreshes: updates.map((u) => u._key)
+						payload: stringify_remote_arg(arg, app.hooks.transport, false),
+						refreshes: Array.from(refreshes ?? [])
 					}),
 					headers
 				});
 
 				if (!response.ok) {
-					release_overrides(updates);
 					// 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');
@@ -58,30 +69,42 @@ export function command(id) {
 
 				const result = /** @type {RemoteFunctionResponse} */ (await response.json());
 				if (result.type === 'redirect') {
-					release_overrides(updates);
 					throw new Error(
 						'Redirects are not allowed in commands. Return a result instead and use goto on the client'
 					);
 				} else if (result.type === 'error') {
-					release_overrides(updates);
 					throw new HttpError(result.status ?? 500, result.error);
 				} else {
 					if (result.refreshes) {
-						refresh_queries(result.refreshes, updates);
+						apply_refreshes(result.refreshes);
 					}
 
 					return devalue.parse(result.result, app.decoders);
 				}
 			} finally {
+				overrides?.forEach((fn) => fn());
+
 				// Decrement pending count when command completes
 				pending_count--;
 			}
 		})();
 
-		promise.updates = (/** @type {any} */ ...args) => {
-			updates = args;
-			// @ts-expect-error Don't allow updates to be called multiple times
-			delete promise.updates;
+		let updates_called = false;
+		promise.updates = (...args) => {
+			if (updates_called) {
+				console.warn(
+					'Updates can only be sent once per command invocation. Ignoring additional updates.'
+				);
+				return promise;
+			}
+			updates_called = true;
+
+			try {
+				({ refreshes, overrides } = categorize_updates(args));
+			} catch (error) {
+				updates_error = /** @type {Error} */ (error);
+			}
+
 			return promise;
 		};
 

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

@@ -1,14 +1,13 @@
 /** @import { StandardSchemaV1 } from '@standard-schema/spec' */
-/** @import { RemoteFormInput, RemoteForm, RemoteQueryOverride } from '@sveltejs/kit' */
+/** @import { RemoteFormInput, RemoteForm, RemoteQueryUpdate } from '@sveltejs/kit' */
 /** @import { InternalRemoteFormIssue, RemoteFunctionResponse } from 'types' */
-/** @import { Query } from './query.svelte.js' */
 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, remote_responses, _goto, set_nearest_error_page, invalidateAll } from '../client.js';
+import { app, query_responses, _goto, set_nearest_error_page, invalidateAll } from '../client.js';
 import { tick } from 'svelte';
-import { refresh_queries, release_overrides } from './shared.svelte.js';
+import { apply_refreshes, categorize_updates } from './shared.svelte.js';
 import { createAttachmentKey } from 'svelte/attachments';
 import {
 	convert_formdata,
@@ -53,7 +52,6 @@ function merge_with_server_issues(form_data, current_issues, client_issues) {
  */
 export function form(id) {
 	/** @type {Map<any, { count: number, instance: RemoteForm<T, U> }>} */
-	// eslint-disable-next-line svelte/prefer-svelte-reactivity -- we don't need reactivity for this
 	const instances = new Map();
 
 	/** @param {string | number | boolean} [key] */
@@ -73,7 +71,7 @@ export function form(id) {
 		const issues = $derived(flatten_issues(raw_issues));
 
 		/** @type {any} */
-		let result = $state.raw(remote_responses[action_id]);
+		let result = $state.raw(query_responses[action_id]);
 
 		/** @type {number} */
 		let pending_count = $state(0);
@@ -167,6 +165,8 @@ export function form(id) {
 				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);
+			} finally {
+				pending_count--;
 			}
 		}
 
@@ -185,16 +185,25 @@ export function form(id) {
 				entry.count++;
 			}
 
-			/** @type {Array<Query<any> | RemoteQueryOverride>} */
-			let updates = [];
+			let overrides = /** @type {Array<() => void> | null} */ (null);
+
+			/** @type {Set<string> | null} */
+			let refreshes = null;
+
+			/** @type {Error | undefined} */
+			let updates_error;
 
-			/** @type {Promise<any> & { updates: (...args: any[]) => any }} */
+			/** @type {Promise<any> & { updates: (...args: RemoteQueryUpdate[]) => Promise<any> }} */
 			const promise = (async () => {
 				try {
 					await Promise.resolve();
 
+					if (updates_error) {
+						throw updates_error;
+					}
+
 					const { blob } = serialize_binary_form(convert(data), {
-						remote_refreshes: updates.map((u) => u._key)
+						remote_refreshes: Array.from(refreshes ?? [])
 					});
 
 					const response = await fetch(`${base}/${app_dir}/remote/${action_id_without_key}`, {
@@ -222,33 +231,28 @@ export function form(id) {
 					if (form_result.type === 'result') {
 						({ issues: raw_issues = [], result } = devalue.parse(form_result.result, app.decoders));
 
-						if (issues.$) {
-							release_overrides(updates);
-						} else {
+						if (!issues.$) {
 							if (form_result.refreshes) {
-								refresh_queries(form_result.refreshes, updates);
+								apply_refreshes(form_result.refreshes);
 							} else {
 								void invalidateAll();
 							}
 						}
 					} else if (form_result.type === 'redirect') {
-						const refreshes = form_result.refreshes ?? '';
-						const invalidateAll = !refreshes && updates.length === 0;
-						if (!invalidateAll) {
-							refresh_queries(refreshes, updates);
+						const stringified_refreshes = form_result.refreshes ?? '';
+						if (stringified_refreshes) {
+							apply_refreshes(stringified_refreshes);
 						}
 						// Use internal version to allow redirects to external URLs
-						void _goto(form_result.location, { invalidateAll }, 0);
+						void _goto(form_result.location, { invalidateAll: !stringified_refreshes }, 0);
 					} else {
 						throw new HttpError(form_result.status ?? 500, form_result.error);
 					}
 				} catch (e) {
 					result = undefined;
-					release_overrides(updates);
 					throw e;
 				} finally {
-					// Decrement pending count when submission completes
-					pending_count--;
+					overrides?.forEach((fn) => fn());
 
 					void tick().then(() => {
 						if (entry) {
@@ -261,8 +265,22 @@ export function form(id) {
 				}
 			})();
 
+			let updates_called = false;
 			promise.updates = (...args) => {
-				updates = args;
+				if (updates_called) {
+					console.warn(
+						'Updates can only be sent once per form submission. Ignoring additional updates.'
+					);
+					return promise;
+				}
+				updates_called = true;
+
+				try {
+					({ refreshes, overrides } = categorize_updates(args));
+				} catch (error) {
+					updates_error = /** @type {Error} */ (error);
+				}
+
 				return promise;
 			};
 
@@ -286,7 +304,6 @@ export function form(id) {
 
 				if (method !== 'post') return;
 
-				// eslint-disable-next-line svelte/prefer-svelte-reactivity
 				const action = new URL(
 					// We can't do submitter.formAction directly because that property is always set
 					event.submitter?.hasAttribute('formaction')