@sveltejs/kit 2.57.1 → 2.59.0

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

@@ -1,53 +1,133 @@
-/** @import { RemoteQueryFunction, RequestedResult } from '@sveltejs/kit' */
-/** @import { MaybePromise, RemoteQueryInternals } from 'types' */
+/** @import { RemoteLiveQuery, RemoteLiveQueryFunction, RemoteQuery, RemoteQueryFunction, RequestedResult, QueryRequestedResult, LiveQueryRequestedResult } from '@sveltejs/kit' */
+/** @import { MaybePromise, RemoteAnyQueryInternals } from 'types' */
 import { get_request_store } from '@sveltejs/kit/internal/server';
 import { create_remote_key, parse_remote_arg } from '../../../shared.js';
 import { noop } from '../../../../utils/functions.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
+ * of `{ arg, query }` entries for the refreshes requested by the client, up to
+ * the supplied `limit`. Each `query` is a `RemoteQuery` bound to the original
+ * client-side cache key, so `refresh()` / `set()` propagate correctly even when
+ * the query's schema transforms the input. `arg` is the *validated* argument,
+ * i.e. the value after the schema has run (so `InferOutput<Schema>` for queries
+ * declared with a Standard Schema).
+ *
+ * Arguments that fail validation or exceed `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();
+ * for (const { arg, query } of requested(getPost, 5)) {
+ * 	// `arg` is the validated argument; `query` is bound to the client's
+ * 	// cache key. It's safe to throw away this promise -- SvelteKit will
+ * 	// await it and forward any errors to the client.
+ * 	void query.refresh();
  * }
  * ```
  *
  * As a shorthand for the above, you can also call `refreshAll` on the result:
  *
+ * @example
  * ```ts
  * import { requested } from '$app/server';
  *
  * await requested(getPost, 5).refreshAll();
  * ```
  *
+ * Works with `query.batch` as well — refreshes for individual entries are
+ * collected into a single batched call.
+ *
+ * For live queries, the same applies, but with `reconnect` and `reconnectAll`.
+ *
+ * @template Input
+ * @template Output
+ * @template [Validated=Input]
+ * @overload
+ * @param {RemoteQueryFunction<Input, Output, Validated>} query
+ * @param {number} limit
+ * @returns {QueryRequestedResult<Validated, Output>}
+ */
+/**
+ * In the context of a remote `command` or `form` request, returns an iterable
+ * of `{ arg, query }` entries for the reconnects requested by the client, up to
+ * the supplied `limit`. Each `query` is a `RemoteLiveQuery` bound to the original
+ * client-side cache key, so `reconnect()` propagates correctly even when
+ * the query's schema transforms the input. `arg` is the *validated* argument.
+ *
+ * Arguments that fail validation or exceed `limit` are recorded as failures in
+ * the response to the client.
+ *
+ * @example
+ * ```ts
+ * import { requested } from '$app/server';
+ *
+ * for (const { query } of requested(getPost, 5)) {
+ * 	void query.reconnect();
+ * }
+ * ```
+ *
+ * As a shorthand, you can also call `reconnectAll` on the result:
+ *
+ * @example
+ * ```ts
+ * import { requested } from '$app/server';
+ *
+ * await requested(getPost, 5).reconnectAll();
+ * ```
+ *
+ * @template Input
+ * @template Output
+ * @template [Validated=Input]
+ * @overload
+ * @param {RemoteLiveQueryFunction<Input, Output, Validated>} query
+ * @param {number} limit
+ * @returns {LiveQueryRequestedResult<Validated, Output>}
+ */
+/**
  * @template Input
  * @template Output
- * @param {RemoteQueryFunction<Input, Output>} query
- * @param {number} [limit=Infinity]
- * @returns {RequestedResult<Input>}
+ * @template [Validated=Input]
+ * @param {RemoteQueryFunction<Input, Output, Validated> | RemoteLiveQueryFunction<Input, Output, Validated>} query
+ * @param {number} limit
+ * @returns {RequestedResult<Validated, Output>}
  */
-export function requested(query, limit = Infinity) {
+export function requested(query, limit) {
 	const { state } = get_request_store();
-	const internals = /** @type {RemoteQueryInternals | undefined} */ (/** @type {any} */ (query).__);
+	const internals = /** @type {RemoteAnyQueryInternals | undefined} */ (
+		/** @type {any} */ (query).__
+	);
 
-	if (!internals || internals.type !== 'query') {
-		throw new Error('requested(...) expects a query function created with query(...)');
+	if (
+		internals?.type !== 'query' &&
+		internals?.type !== 'query_batch' &&
+		internals?.type !== 'query_live'
+	) {
+		throw new Error(
+			'requested(...) expects a query function created with query(...), query.batch(...), or query.live(...)'
+		);
 	}
 
+	// narrow-stable alias so generator closures below don't lose the narrowing
+	const __ = internals;
+
 	const requested = state.remote.requested;
-	const payloads = requested?.get(internals.id) ?? [];
-	const refreshes = (state.remote.refreshes ??= {});
+	const payloads = requested?.get(__.id) ?? [];
+	// note: don't initialize these maps here -- they will be initialized by the
+	// command/form wrapper when we enter them, and if we initialize them here
+	// we will enable requested(...) in contexts where it shouldn't be allowed,
+	// such as load functions or other server functions
+	const refreshes = state.remote.refreshes;
+	const reconnects = state.remote.reconnects;
+	const store = __.type === 'query_live' ? reconnects : refreshes;
+
+	if (!store) {
+		throw new Error(
+			'requested(...) can only be called in the context of a command/form remote function'
+		);
+	}
 	const [selected, skipped] = split_limit(payloads, limit);
 
 	/**
@@ -58,34 +138,34 @@ export function requested(query, limit = Infinity) {
 		const promise = Promise.reject(error);
 		promise.catch(noop);
 
-		const key = create_remote_key(internals.id, payload);
-		refreshes[key] = promise;
+		const key = create_remote_key(__.id, payload);
+		store.set(key, promise);
 	};
 
 	for (const payload of skipped) {
 		record_failure(
 			payload,
 			new Error(
-				`Requested refresh was rejected because it exceeded requested(${internals.name}, ${limit}) limit`
+				`Requested refresh was rejected because it exceeded requested(${__.name}, ${limit}) limit`
 			)
 		);
 	}
 
-	return {
+	const result = {
 		*[Symbol.iterator]() {
 			for (const payload of selected) {
 				try {
 					const parsed = parse_remote_arg(payload, state.transport);
-					const validated = internals.validate(parsed);
+					const validated = __.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`
+							`requested(${__.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);
+					yield { arg: validated, query: __.bind(payload, validated) };
 				} catch (error) {
 					record_failure(payload, error);
 					continue;
@@ -96,20 +176,35 @@ export function requested(query, limit = Infinity) {
 			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);
+					const validated = await __.validate(parsed);
+					return { arg: validated, query: __.bind(payload, validated) };
 				} catch (error) {
 					record_failure(payload, error);
-					throw new Error(`Skipping ${internals.name}(${payload})`, { cause: error });
+					throw new Error(`Skipping ${__.name}(${payload})`, { cause: error });
 				}
 			});
 		},
 		async refreshAll() {
-			for await (const arg of this) {
-				void query(arg).refresh();
+			if (__.type === 'query_live') {
+				throw new Error('refreshAll() is invalid for live queries. Use reconnectAll() instead.');
+			}
+
+			for await (const { query } of result) {
+				void (/** @type {RemoteQuery<Output>} */ (query).refresh());
+			}
+		},
+		async reconnectAll() {
+			if (__.type !== 'query_live') {
+				throw new Error('reconnectAll() is invalid for regular queries. Use refreshAll() instead.');
+			}
+
+			for await (const { query } of result) {
+				void (/** @type {RemoteLiveQuery<Output>} */ (query).reconnect());
 			}
 		}
 	};
+
+	return /** @type {RequestedResult<Validated, Output>} */ (/** @type {unknown} */ (result));
 }
 
 /**
@@ -157,7 +252,7 @@ async function* race_all(array, fn) {
 			value: result
 		}));
 
-		promise.catch(noop);
+		promise.catch(() => pending.delete(promise));
 		pending.add(promise);
 	}
 

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

@@ -1,19 +1,14 @@
 /** @import { RequestEvent } from '@sveltejs/kit' */
-/** @import { ServerHooks, MaybePromise, RequestState, RemoteInternals, RequestStore } from 'types' */
+/** @import { ServerHooks, MaybePromise, RequestState, RemoteInternals, RequestStore, RemoteLiveQueryUserFunctionReturnType } from 'types' */
 import { parse } from 'devalue';
 import { error } from '@sveltejs/kit';
 import { with_request_store, get_request_store } from '@sveltejs/kit/internal/server';
 import { noop } from '../../../../utils/functions.js';
-import {
-	stringify_remote_arg,
-	create_remote_key,
-	stringify,
-	unfriendly_hydratable
-} from '../../../shared.js';
+import { create_remote_key, stringify, unfriendly_hydratable } from '../../../shared.js';
 
 /**
  * @param {any} validate_or_fn
- * @param {(arg?: any) => any} [maybe_fn]
+ * @param {((arg?: any) => any) | undefined} [maybe_fn]
  * @returns {(arg?: any) => MaybePromise<any>}
  */
 export function create_validator(validate_or_fn, maybe_fn) {
@@ -36,6 +31,7 @@ export function create_validator(validate_or_fn, maybe_fn) {
 		return async (arg) => {
 			// Get event before async validation to ensure it's available in server environments without AsyncLocalStorage, too
 			const { event, state } = get_request_store();
+
 			// access property and call method in one go to preserve potential this context
 			const result = await validate_or_fn['~standard'].validate(arg);
 
@@ -68,19 +64,18 @@ export function create_validator(validate_or_fn, maybe_fn) {
  *
  * @template {MaybePromise<any>} T
  * @param {RemoteInternals} internals
- * @param {any} arg
+ * @param {string} payload — the stringified raw argument (i.e. the cache key the client will use)
  * @param {RequestState} state
  * @param {() => Promise<T>} get_result
  * @returns {Promise<T>}
  */
-export async function get_response(internals, arg, state, get_result) {
+export async function get_response(internals, payload, 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(internals, state);
-	const key = stringify_remote_arg(arg, state.transport);
-	const entry = (cache[key] ??= {
+	const entry = (cache[payload] ??= {
 		serialize: false,
 		data: get_result()
 	});
@@ -88,7 +83,7 @@ export async function get_response(internals, arg, state, 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);
+		const remote_key = create_remote_key(internals.id, payload);
 
 		Promise.resolve(entry.data)
 			.then((value) => {
@@ -115,17 +110,13 @@ export function parse_remote_response(data, transport) {
 }
 
 /**
- * Like `with_event` but removes things from `event` you cannot see/call in remote functions, such as `setHeaders`.
- * @template T
  * @param {RequestEvent} event
  * @param {RequestState} state
  * @param {boolean} allow_cookies
- * @param {() => any} get_input
- * @param {(arg?: any) => T} fn
+ * @returns {RequestStore}
  */
-export async function run_remote_function(event, state, allow_cookies, get_input, fn) {
-	/** @type {RequestStore} */
-	const store = {
+function derive_remote_function_event(event, state, allow_cookies) {
+	return {
 		event: {
 			...event,
 			setHeaders: () => {
@@ -162,12 +153,90 @@ export async function run_remote_function(event, state, allow_cookies, get_input
 			is_in_remote_function: true
 		}
 	};
+}
+
+/**
+ * Like `with_event` but removes things from `event` you cannot see/call in remote functions, such as `setHeaders`.
+ * @template T
+ * @param {RequestEvent} event
+ * @param {RequestState} state
+ * @param {boolean} allow_cookies
+ * @param {() => any} get_input
+ * @param {(arg?: any) => T} fn
+ */
+export async function run_remote_function(event, state, allow_cookies, get_input, fn) {
+	const store = derive_remote_function_event(event, state, allow_cookies);
 
 	// In two parts, each with_event, so that runtimes without async local storage can still get the event at the start of the function
 	const input = await with_request_store(store, get_input);
 	return with_request_store(store, () => fn(input));
 }
 
+/**
+ * Like `with_event` but removes things from `event` you cannot see/call in remote functions, such as `setHeaders`.
+ * @template T
+ * @param {RequestEvent} event
+ * @param {RequestState} state
+ * @param {boolean} allow_cookies
+ * @param {() => any} get_input
+ * @param {(arg?: any) => RemoteLiveQueryUserFunctionReturnType<T>} fn
+ * @param {string} name
+ */
+export async function* run_remote_generator(event, state, allow_cookies, get_input, fn, name) {
+	const store = derive_remote_function_event(event, state, allow_cookies);
+
+	// In two parts, each with_event, so that runtimes without async local storage can still get the event at the start of the function / calls to next
+	const input = await with_request_store(store, get_input);
+	const source = await with_request_store(store, () => fn(input));
+	const iterator = to_iterator(source, name);
+	let done = false;
+
+	try {
+		while (true) {
+			// the code of a generator function is basically chopped apart at each
+			// yield, and each part is an invocation of `.next`. So, to provide
+			// access to the request context in generator functions, we have to
+			// provide it to every invocation of `.next`. (It's more obvious that
+			// this is necessary with plain iterators.)
+			const result = await with_request_store(store, () => iterator.next());
+			if (result.done) {
+				done = true;
+				return result.value;
+			}
+			yield result.value;
+		}
+	} finally {
+		if (!done && typeof iterator.return === 'function') {
+			await with_request_store(store, () => iterator.return?.(undefined));
+		}
+	}
+}
+
+/**
+ * @template T
+ * @param {Awaited<RemoteLiveQueryUserFunctionReturnType<T>>} source
+ * @param {string} name
+ * @returns {Iterator<T> | AsyncIterator<T>}
+ */
+function to_iterator(source, name) {
+	// intentionally using `in` because these could be inherited
+	if ('next' in source && typeof source.next === 'function') {
+		return source;
+	}
+
+	if (Symbol.asyncIterator in source && typeof source[Symbol.asyncIterator] === 'function') {
+		return source[Symbol.asyncIterator]();
+	}
+
+	if (Symbol.iterator in source && typeof source[Symbol.iterator] === 'function') {
+		return source[Symbol.iterator]();
+	}
+
+	throw new Error(
+		`query.live '${name}' must return an Iterator, Iterable, AsyncIterator or AsyncIterable`
+	);
+}
+
 /**
  * @param {RemoteInternals} internals
  * @param {RequestState} state

package/src/runtime/client/client.js

@@ -1,4 +1,5 @@
 /** @import { RemoteQueryCacheEntry } from './remote-functions/query.svelte.js' */
+/** @import { RemoteLiveQueryCacheEntry } from './remote-functions/query-live.svelte.js' */
 import { BROWSER, DEV } from 'esm-env';
 import * as svelte from 'svelte';
 import { HttpError, Redirect, SvelteKitError } from '@sveltejs/kit/internal';
@@ -44,6 +45,7 @@ import { compact } from '../../utils/array.js';
 import {
 	INVALIDATED_PARAM,
 	TRAILING_SLASH_PARAM,
+	create_remote_key,
 	validate_depends,
 	validate_load_response
 } from '../shared.js';
@@ -52,7 +54,7 @@ import { writable } from 'svelte/store';
 import { page, update, navigating } from './state.svelte.js';
 import { add_data_suffix, add_resolution_suffix } from '../pathname.js';
 import { noop_span } from '../telemetry/noop.js';
-import { text_decoder } from '../utils.js';
+import { read_ndjson } from './ndjson.js';
 
 export { load_css };
 const ICON_REL_ATTRIBUTES = new Set(['icon', 'shortcut icon', 'apple-touch-icon']);
@@ -305,6 +307,12 @@ export let pending_invalidate;
  */
 export const query_map = new Map();
 
+/**
+ * @type {Map<string, Map<string, RemoteLiveQueryCacheEntry<any>>>}
+ * A map of id -> payload -> live query internals for all active queries.
+ */
+export const live_query_map = new Map();
+
 /**
  * @param {import('./types.js').SvelteKitApp} _app
  * @param {HTMLElement} _target
@@ -409,12 +417,23 @@ async function _invalidate(include_load_functions = true, reset_page_state = tru
 	discard_load_cache();
 
 	// Rerun queries
+	/** @type {Map<string, Promise<void>>} */
+	const live_query_reconnects = new Map();
 	if (force_invalidation) {
-		query_map.forEach((entries) => {
-			entries.forEach(({ resource }) => {
-				void resource.refresh?.();
-			});
-		});
+		for (const entries of query_map.values()) {
+			for (const { resource } of entries.values()) {
+				void resource.refresh();
+			}
+		}
+
+		for (const [query_id, entries] of live_query_map) {
+			for (const [payload, { resource }] of entries) {
+				const key = create_remote_key(query_id, payload);
+				const promise = resource.reconnect();
+				promise.catch(noop);
+				live_query_reconnects.set(key, promise);
+			}
+		}
 	}
 
 	if (include_load_functions) {
@@ -443,12 +462,26 @@ async function _invalidate(include_load_functions = true, reset_page_state = tru
 		reset_invalidation();
 	}
 
+	// only wait for promises that are connected to queries that still exist
+	/** @type {Promise<any>[]} */
+	const promises = [];
+	for (const entries of query_map.values()) {
+		for (const { resource } of entries.values()) {
+			promises.push(resource);
+		}
+	}
+	for (const [query_id, entries] of live_query_map) {
+		for (const payload of entries.keys()) {
+			const key = create_remote_key(query_id, payload);
+			const promise = live_query_reconnects.get(key);
+			if (promise) {
+				promises.push(promise);
+			}
+		}
+	}
+
 	// Don't use allSettled yet because it's too new
-	await Promise.all(
-		[...query_map.values()].flatMap((entries) =>
-			[...entries.values()].map(({ resource }) => resource)
-		)
-	).catch(noop);
+	await Promise.all(promises).catch(noop);
 }
 
 function reset_invalidation() {
@@ -485,8 +518,10 @@ function persist_state() {
  * @param {{}} [nav_token]
  */
 export async function _goto(url, options, redirect_count, nav_token) {
-	/** @type {string[]} */
+	/** @type {Set<string>} */
 	let query_keys;
+	/** @type {Set<string>} */
+	let live_query_keys;
 
 	// Clear preload cache when invalidateAll is true to ensure fresh data
 	// after form submissions or explicit invalidations
@@ -506,12 +541,18 @@ export async function _goto(url, options, redirect_count, nav_token) {
 		accept: () => {
 			if (options.invalidateAll) {
 				force_invalidation = true;
-				query_keys = [];
-				query_map.forEach((entries, id) => {
+				query_keys = new Set();
+				for (const [id, entries] of query_map) {
 					for (const payload of entries.keys()) {
-						query_keys.push(id + '/' + payload);
+						query_keys.add(create_remote_key(id, payload));
 					}
-				});
+				}
+				live_query_keys = new Set();
+				for (const [id, entries] of live_query_map) {
+					for (const payload of entries.keys()) {
+						live_query_keys.add(create_remote_key(id, payload));
+					}
+				}
 			}
 
 			if (options.invalidate) {
@@ -527,13 +568,20 @@ export async function _goto(url, options, redirect_count, nav_token) {
 			.tick()
 			.then(svelte.tick)
 			.then(() => {
-				query_map.forEach((entries, id) => {
-					entries.forEach(({ resource }, payload) => {
-						if (query_keys?.includes(id + '/' + payload)) {
-							void resource.refresh?.();
+				for (const [id, entries] of query_map) {
+					for (const [payload, { resource }] of entries) {
+						if (query_keys?.has(create_remote_key(id, payload))) {
+							void resource.refresh();
 						}
-					});
-				});
+					}
+				}
+				for (const [id, entries] of live_query_map) {
+					for (const [payload, { resource }] of entries) {
+						if (live_query_keys?.has(create_remote_key(id, payload))) {
+							void resource.reconnect();
+						}
+					}
+				}
 			});
 	}
 }
@@ -3035,49 +3083,31 @@ async function load_data(url, invalid) {
 			});
 		}
 
-		let text = '';
-
-		while (true) {
-			// Format follows ndjson (each line is a JSON object) or regular JSON spec
-			const { done, value } = await reader.read();
-			if (done && !text) break;
-
-			text += !value && text ? '\n' : text_decoder.decode(value, { stream: true }); // no value -> final chunk -> add a new line to trigger the last parse
-
-			while (true) {
-				const split = text.indexOf('\n');
-				if (split === -1) {
-					break;
-				}
-
-				const node = JSON.parse(text.slice(0, split));
-				text = text.slice(split + 1);
+		for await (const node of read_ndjson(reader)) {
+			if (node.type === 'redirect') {
+				return resolve(node);
+			}
 
-				if (node.type === 'redirect') {
-					return resolve(node);
-				}
+			if (node.type === 'data') {
+				// This is the first (and possibly only, if no pending promises) chunk
+				node.nodes?.forEach((/** @type {any} */ node) => {
+					if (node?.type === 'data') {
+						node.uses = deserialize_uses(node.uses);
+						node.data = deserialize(node.data);
+					}
+				});
 
-				if (node.type === 'data') {
-					// This is the first (and possibly only, if no pending promises) chunk
-					node.nodes?.forEach((/** @type {any} */ node) => {
-						if (node?.type === 'data') {
-							node.uses = deserialize_uses(node.uses);
-							node.data = deserialize(node.data);
-						}
-					});
+				resolve(node);
+			} else if (node.type === 'chunk') {
+				// This is a subsequent chunk containing deferred data
+				const { id, data, error } = node;
+				const deferred = /** @type {import('types').Deferred} */ (deferreds.get(id));
+				deferreds.delete(id);
 
-					resolve(node);
-				} else if (node.type === 'chunk') {
-					// This is a subsequent chunk containing deferred data
-					const { id, data, error } = node;
-					const deferred = /** @type {import('types').Deferred} */ (deferreds.get(id));
-					deferreds.delete(id);
-
-					if (error) {
-						deferred.reject(deserialize(error));
-					} else {
-						deferred.fulfil(deserialize(data));
-					}
+				if (error) {
+					deferred.reject(deserialize(error));
+				} else {
+					deferred.fulfil(deserialize(data));
 				}
 			}
 		}