@sveltejs/kit 2.58.0 → 2.59.0

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

@@ -1,5 +1,5 @@
 /** @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';
@@ -8,7 +8,7 @@ import { create_remote_key, stringify, unfriendly_hydratable } from '../../../sh
 
 /**
  * @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) {
@@ -31,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);
 
@@ -109,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: () => {
@@ -156,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));
 				}
 			}
 		}

package/src/runtime/client/ndjson.js

@@ -0,0 +1,42 @@
+/**
+ * Yields parsed JSON objects from a ReadableStream of newline-delimited JSON.
+ * Each yielded value is the raw `JSON.parse`'d object — callers handle deserialization.
+ * @param {ReadableStreamDefaultReader<Uint8Array>} reader
+ */
+export async function* read_ndjson(reader) {
+	let done = false;
+	let buffer = '';
+	const decoder = new TextDecoder();
+
+	while (true) {
+		let split = buffer.indexOf('\n');
+		while (split !== -1) {
+			const line = buffer.slice(0, split).trim();
+			buffer = buffer.slice(split + 1);
+
+			if (line) {
+				yield JSON.parse(line);
+			}
+
+			split = buffer.indexOf('\n');
+		}
+
+		if (done) {
+			const line = buffer.trim();
+			if (line) {
+				yield JSON.parse(line);
+			}
+			return;
+		}
+
+		const chunk = await reader.read();
+		done = chunk.done;
+		if (chunk.value) {
+			buffer += decoder.decode(chunk.value, { stream: true });
+		}
+
+		if (done) {
+			buffer += decoder.decode();
+		}
+	}
+}

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

@@ -8,7 +8,8 @@ import { stringify_remote_arg } from '../../shared.js';
 import {
 	get_remote_request_headers,
 	apply_refreshes,
-	categorize_updates
+	categorize_updates,
+	apply_reconnections
 } from './shared.svelte.js';
 
 /**
@@ -79,6 +80,10 @@ export function command(id) {
 						apply_refreshes(result.refreshes);
 					}
 
+					if (result.reconnects) {
+						apply_reconnections(result.reconnects);
+					}
+
 					return devalue.parse(result.result, app.decoders);
 				}
 			} finally {

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

@@ -7,7 +7,7 @@ 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 { tick } from 'svelte';
-import { apply_refreshes, categorize_updates } from './shared.svelte.js';
+import { apply_refreshes, categorize_updates, apply_reconnections } from './shared.svelte.js';
 import { createAttachmentKey } from 'svelte/attachments';
 import {
 	convert_formdata,
@@ -156,7 +156,6 @@ export function form(id) {
 			}
 
 			try {
-				// eslint-disable-next-line @typescript-eslint/await-thenable -- `callback` is typed as returning `void` to allow returning e.g. `Promise<boolean>`
 				await callback({
 					form,
 					data,
@@ -235,21 +234,39 @@ export function form(id) {
 						const succeeded = raw_issues.length === 0;
 
 						if (succeeded) {
-							if (form_result.refreshes) {
-								apply_refreshes(form_result.refreshes);
-							} else {
+							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);
+								}
 							}
 						}
 
 						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);
 						}
+
+						if (stringified_reconnects) {
+							apply_reconnections(stringified_reconnects);
+						}
+
 						// Use internal version to allow redirects to external URLs
-						void _goto(form_result.location, { invalidateAll: !stringified_refreshes }, 0);
+						void _goto(
+							form_result.location,
+							{
+								invalidateAll:
+									refreshes === null && !stringified_refreshes && !stringified_reconnects
+							},
+							0
+						);
 						return true;
 					} else {
 						throw new HttpError(form_result.status ?? 500, form_result.error);

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

@@ -1,4 +1,6 @@
 export { command } from './command.svelte.js';
 export { form } from './form.svelte.js';
 export { prerender } from './prerender.svelte.js';
-export { query, query_batch } from './query.svelte.js';
+export { query } from './query.svelte.js';
+export { query_batch } from './query-batch.svelte.js';
+export { query_live } from './query-live.svelte.js';

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

@@ -0,0 +1,105 @@
+/** @import { RemoteQueryFunction } from '@sveltejs/kit' */
+/** @import { RemoteFunctionResponse } from 'types' */
+import { app_dir, base } from '$app/paths/internal/client';
+import { app, goto } from '../client.js';
+import { get_remote_request_headers, QUERY_FUNCTION_ID } from './shared.svelte.js';
+import { QueryProxy } from './query.svelte.js';
+import * as devalue from 'devalue';
+import { HttpError, Redirect } from '@sveltejs/kit/internal';
+import { unfriendly_hydratable } from '../../shared.js';
+
+/**
+ * @param {string} id
+ * @returns {RemoteQueryFunction<any, any>}
+ */
+export function query_batch(id) {
+	/** @type {Map<string, Array<{resolve: (value: any) => void, reject: (error: any) => void}>>} */
+	let batching = new Map();
+
+	/** @type {RemoteQueryFunction<any, any>} */
+	const wrapper = (arg) => {
+		return new QueryProxy(id, arg, async (key, payload) => {
+			const serialized = await unfriendly_hydratable(key, () => {
+				return new Promise((resolve, reject) => {
+					// create_remote_function caches identical calls, but in case a refresh to the same query is called multiple times this function
+					// is invoked multiple times with the same payload, so we need to deduplicate here
+					const entry = batching.get(payload) ?? [];
+					entry.push({ resolve, reject });
+					batching.set(payload, entry);
+
+					if (batching.size > 1) return;
+
+					// Do this here, after await Svelte' reactivity context is gone.
+					// TODO is it possible to have batches of the same key
+					// but in different forks/async contexts and in the same macrotask?
+					// If so this would potentially be buggy
+					const headers = {
+						'Content-Type': 'application/json',
+						...get_remote_request_headers()
+					};
+
+					// Wait for the next macrotask - don't use microtask as Svelte runtime uses these to collect changes and flush them,
+					// and flushes could reveal more queries that should be batched.
+					setTimeout(async () => {
+						const batched = batching;
+						batching = new Map();
+
+						try {
+							const response = await fetch(`${base}/${app_dir}/remote/${id}`, {
+								method: 'POST',
+								body: JSON.stringify({
+									payloads: Array.from(batched.keys())
+								}),
+								headers
+							});
+
+							if (!response.ok) {
+								throw new Error('Failed to execute batch query');
+							}
+
+							const result = /** @type {RemoteFunctionResponse} */ (await response.json());
+							if (result.type === 'error') {
+								throw new HttpError(result.status ?? 500, result.error);
+							}
+
+							if (result.type === 'redirect') {
+								await goto(result.location);
+								throw new Redirect(307, result.location);
+							}
+
+							const results = devalue.parse(result.result, app.decoders);
+
+							// Resolve individual queries
+							// Maps guarantee insertion order so we can do it like this
+							let i = 0;
+
+							for (const resolvers of batched.values()) {
+								for (const { resolve, reject } of resolvers) {
+									if (results[i].type === 'error') {
+										reject(new HttpError(results[i].status, results[i].error));
+									} else {
+										resolve(results[i].data);
+									}
+								}
+								i++;
+							}
+						} catch (error) {
+							// Reject all queries in the batch
+							for (const resolver of batched.values()) {
+								for (const { reject } of resolver) {
+									reject(error);
+								}
+							}
+						}
+					}, 0);
+				});
+			});
+
+			return devalue.parse(serialized, app.decoders);
+		});
+	};
+
+	Object.defineProperty(wrapper, QUERY_FUNCTION_ID, { value: id });
+
+	return wrapper;
+}