@sveltejs/kit 2.58.0 → 2.59.0

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

@@ -1,16 +1,15 @@
 /** @import { RemoteQueryFunction } from '@sveltejs/kit' */
-/** @import { RemoteFunctionResponse } from 'types' */
 import { app_dir, base } from '$app/paths/internal/client';
-import { app, goto, query_map, query_responses } from '../client.js';
+import { app, query_map, query_responses } from '../client.js';
 import {
 	get_remote_request_headers,
+	is_in_effect,
 	QUERY_FUNCTION_ID,
 	QUERY_OVERRIDE_KEY,
 	QUERY_RESOURCE_KEY,
 	remote_request
 } from './shared.svelte.js';
 import * as devalue from 'devalue';
-import { HttpError, Redirect } from '@sveltejs/kit/internal';
 import { DEV } from 'esm-env';
 import { noop } from '../../../utils/functions.js';
 import { with_resolvers } from '../../../utils/promise.js';
@@ -26,18 +25,6 @@ import { create_remote_key, stringify_remote_arg, unfriendly_hydratable } from '
  * }} RemoteQueryCacheEntry
  */
 
-/**
- * @returns {boolean} Returns `true` if we are in an effect
- */
-function is_in_effect() {
-	try {
-		$effect.pre(noop);
-		return true;
-	} catch {
-		return false;
-	}
-}
-
 /**
  * @param {string} id
  * @returns {RemoteQueryFunction<any, any>}
@@ -49,8 +36,7 @@ export function query(id) {
 
 		if (entries) {
 			for (const entry of entries.values()) {
-				// use optional chaining in case a prerender function was turned into a query
-				void entry.resource.refresh?.();
+				void entry.resource.refresh();
 			}
 		}
 	}
@@ -73,102 +59,6 @@ export function query(id) {
 	return wrapper;
 }
 
-/**
- * @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;
-}
-
 /**
  * The actual query instance. There should only ever be one active query instance per key.
  *
@@ -274,6 +164,11 @@ export class Query {
 				resolve(undefined);
 			})
 			.catch((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
 				const idx = this.#latest.indexOf(resolve);
 				if (idx === -1) return;
 
@@ -290,10 +185,14 @@ export class Query {
 	}
 
 	get then() {
+		// TODO this should be unnecessary but due to the bug described
+		// in #start, we need to do this in some circumstances
+		this.#start();
 		return this.#then;
 	}
 
 	get catch() {
+		this.#start();
 		this.#then;
 		return (/** @type {any} */ reject) => {
 			return this.#then(undefined, reject);
@@ -301,6 +200,7 @@ export class Query {
 	}
 
 	get finally() {
+		this.#start();
 		this.#then;
 		return (/** @type {any} */ fn) => {
 			return this.#then(
@@ -410,7 +310,7 @@ export class Query {
  * @template T
  * @implements {Promise<T>}
  */
-class QueryProxy {
+export class QueryProxy {
 	#id;
 	#key;
 	#payload;
@@ -545,7 +445,7 @@ class QueryProxy {
 	/** @type {Query<T>['withOverride']} */
 	withOverride(fn) {
 		const entry = this.#get_or_create_cache_entry();
-		const override = entry.resource.withOverride(fn);
+		const override = /** @type {Query<T>} */ (entry.resource).withOverride(fn);
 
 		const release = /** @type {(() => void) & { [QUERY_OVERRIDE_KEY]: string }} */ (
 			() => {

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

@@ -1,11 +1,12 @@
-/** @import { RemoteFunctionResponse, RemoteRefreshMap } from 'types' */
+/** @import { RemoteFunctionResponse, RemoteSingleflightMap, RemoteSingleflightEntry } from 'types' */
 /** @import { RemoteQueryUpdate } from '@sveltejs/kit' */
 import * as devalue from 'devalue';
-import { app, goto, query_map } from '../client.js';
+import { app, goto, live_query_map, query_map } from '../client.js';
 import { HttpError, Redirect } from '@sveltejs/kit/internal';
 import { untrack } from 'svelte';
 import { create_remote_key, split_remote_key } from '../../shared.js';
 import { navigating, page } from '../state.svelte.js';
+import { noop } from '../../../utils/functions.js';
 
 /** Indicates a query function, as opposed to a query instance */
 export const QUERY_FUNCTION_ID = Symbol('sveltekit.query_function_id');
@@ -14,6 +15,18 @@ export const QUERY_OVERRIDE_KEY = Symbol('sveltekit.query_override_key');
 /** Indicates a query instance */
 export const QUERY_RESOURCE_KEY = Symbol('sveltekit.query_resource_key');
 
+/**
+ * @returns {boolean} Returns `true` if we are in an effect
+ */
+export function is_in_effect() {
+	try {
+		$effect.pre(noop);
+		return true;
+	} catch {
+		return false;
+	}
+}
+
 /**
  * @returns {{ 'x-sveltekit-pathname': string, 'x-sveltekit-search': string }}
  */
@@ -49,16 +62,26 @@ export async function remote_request(url, headers) {
 
 	const result = /** @type {RemoteFunctionResponse} */ (await response.json());
 
-	if (result.type === 'redirect') {
-		await goto(result.location);
-		throw new Redirect(307, result.location);
+	const resolved = await handle_side_channel_response(result);
+
+	return resolved.result;
+}
+
+/**
+ * @param {RemoteFunctionResponse} response
+ * @returns {Promise<Extract<RemoteFunctionResponse, { type: 'result' }>>}
+ */
+export async function handle_side_channel_response(response) {
+	if (response.type === 'redirect') {
+		await goto(response.location);
+		throw new Redirect(307, response.location);
 	}
 
-	if (result.type === 'error') {
-		throw new HttpError(result.status ?? 500, result.error);
+	if (response.type === 'error') {
+		throw new HttpError(response.status ?? 500, response.error);
 	}
 
-	return result.result;
+	return response;
 }
 
 /**
@@ -81,10 +104,10 @@ export function categorize_updates(updates) {
 		if (typeof update === 'function') {
 			if (Object.hasOwn(update, QUERY_FUNCTION_ID)) {
 				// this is a query function (not instance), so we need to find all active instances
-				// of this functionand request that they be refreshed by the command handler
+				// of this function and request that they be refreshed/reconnected by the command handler
 				// @ts-expect-error
 				const id = /** @type {string} */ (update[QUERY_FUNCTION_ID]);
-				const entries = query_map.get(id);
+				const entries = query_map.get(id) ?? live_query_map.get(id);
 
 				if (entries) {
 					for (const payload of entries.keys()) {
@@ -112,6 +135,10 @@ export function categorize_updates(updates) {
 				overrides.push(/** @type {() => void} */ (update));
 				continue;
 			}
+
+			// this is just a regular function provided by some user integration, so we can just stash it in the overrides array
+			overrides.push(/** @type {() => void} */ (update));
+			continue;
 		}
 
 		if (
@@ -125,31 +152,57 @@ export function categorize_updates(updates) {
 			continue;
 		}
 
-		throw new Error('updates() expects a query function, query resource, or query override');
+		throw new Error(
+			'updates() expects a query or live query function, query resource, or query override'
+		);
 	}
 
 	return { overrides, refreshes };
 }
 
 /**
- * Apply refresh data from the server to the relevant queries
- *
- * @param {string} stringified_refreshes
+ * @template TResource
+ * @param {string} stringified_singleflight
+ * @param {Map<string, Map<string, { resource: TResource }>>} map
+ * @param {(resource: TResource, value: RemoteSingleflightEntry) => void} callback
  */
-export function apply_refreshes(stringified_refreshes) {
-	const refreshes = Object.entries(
-		/** @type {RemoteRefreshMap} */ (devalue.parse(stringified_refreshes, app.decoders))
+function apply_singleflight(stringified_singleflight, map, callback) {
+	const singleflight = /** @type {RemoteSingleflightMap} */ (
+		devalue.parse(stringified_singleflight, app.decoders)
 	);
 
-	for (const [key, value] of refreshes) {
+	for (const [key, value] of Object.entries(singleflight)) {
 		const parts = split_remote_key(key);
+		const entry = map.get(parts.id)?.get(parts.payload);
+		if (entry?.resource) {
+			callback(entry.resource, value);
+		}
+	}
+}
 
-		const entry = query_map.get(parts.id)?.get(parts.payload);
+/**
+ * Apply refresh data from the server to the relevant queries
+ *
+ * @param {string} stringified_refreshes
+ */
+export const apply_refreshes = (stringified_refreshes) => {
+	apply_singleflight(stringified_refreshes, query_map, (resource, value) => {
+		if (value.type === 'result') {
+			resource?.set(value.data);
+		} else {
+			resource?.fail(new HttpError(value.status ?? 500, value.error));
+		}
+	});
+};
 
+/** @param {string} stringified_reconnects */
+export const apply_reconnections = (stringified_reconnects) => {
+	apply_singleflight(stringified_reconnects, live_query_map, (resource, value) => {
 		if (value.type === 'result') {
-			entry?.resource.set(value.data);
+			resource?.set(value.data);
+			void resource?.reconnect();
 		} else {
-			entry?.resource.fail(new HttpError(value.status ?? 500, value.error));
+			resource?.fail(new HttpError(value.status ?? 500, value.error));
 		}
-	}
-}
+	});
+};

package/src/runtime/form-utils.js

@@ -4,9 +4,11 @@
 
 import { DEV } from 'esm-env';
 import * as devalue from 'devalue';
-import { text_decoder, text_encoder } from './utils.js';
+import { text_encoder } from './utils.js';
 import { SvelteKitError } from '@sveltejs/kit/internal';
 
+const decoder = new TextDecoder();
+
 /**
  * Sets a value in a nested object using a path string, mutating the original object
  * @param {Record<string, any>} object
@@ -250,7 +252,7 @@ export async function deserialize_binary_form(request) {
 		const file_offsets_buffer = await get_buffer(HEADER_BYTES + data_length, file_offsets_length);
 		if (!file_offsets_buffer) throw deserialize_error('file offset table too short');
 
-		const parsed_offsets = JSON.parse(text_decoder.decode(file_offsets_buffer));
+		const parsed_offsets = JSON.parse(decoder.decode(file_offsets_buffer));
 
 		if (
 			!Array.isArray(parsed_offsets) ||
@@ -265,7 +267,7 @@ export async function deserialize_binary_form(request) {
 
 	/** @type {Array<{ offset: number, size: number }>} */
 	const file_spans = [];
-	const [data, meta] = devalue.parse(text_decoder.decode(data_buffer), {
+	const [data, meta] = devalue.parse(decoder.decode(data_buffer), {
 		File: ([name, type, size, last_modified, index]) => {
 			if (
 				typeof name !== 'string' ||
@@ -458,7 +460,7 @@ class LazyFile {
 		});
 	}
 	async text() {
-		return text_decoder.decode(await this.arrayBuffer());
+		return decoder.decode(await this.arrayBuffer());
 	}
 }
 
@@ -664,7 +666,7 @@ export function create_field_proxy(target, get_input, set_input, get_issues, pat
 			if (prop === 'as') {
 				/**
 				 * @param {string} type
-				 * @param {string} [input_value]
+				 * @param {unknown} [input_value]
 				 */
 				const as_func = (type, input_value) => {
 					const is_array =
@@ -732,6 +734,23 @@ export function create_field_proxy(target, get_input, set_input, get_issues, pat
 							}
 						}
 
+						if (type === 'checkbox' && !is_array) {
+							return Object.defineProperties(base_props, {
+								defaultChecked: {
+									enumerable: true,
+									get() {
+										return input_value;
+									}
+								},
+								checked: {
+									enumerable: true,
+									get() {
+										return get_value() ?? input_value;
+									}
+								}
+							});
+						}
+
 						return Object.defineProperties(base_props, {
 							value: { value: input_value ?? 'on', enumerable: true },
 							checked: {
@@ -743,11 +762,7 @@ export function create_field_proxy(target, get_input, set_input, get_issues, pat
 										return value === input_value;
 									}
 
-									if (is_array) {
-										return (value ?? []).includes(input_value);
-									}
-
-									return value;
+									return (value ?? []).includes(input_value);
 								}
 							}
 						});
@@ -797,6 +812,12 @@ export function create_field_proxy(target, get_input, set_input, get_issues, pat
 
 					// Handle all other input types (text, number, etc.)
 					return Object.defineProperties(base_props, {
+						defaultValue: {
+							enumerable: true,
+							get() {
+								return input_value;
+							}
+						},
 						value: {
 							enumerable: true,
 							get() {

package/src/runtime/server/page/load_data.js

@@ -4,7 +4,7 @@ import { disable_search, make_trackable } from '../../../utils/url.js';
 import { validate_depends, validate_load_response } from '../../shared.js';
 import { with_request_store, merge_tracing } from '@sveltejs/kit/internal/server';
 import { record_span } from '../../telemetry/record_span.js';
-import { base64_encode, text_decoder } from '../../utils.js';
+import { base64_encode } from '../../utils.js';
 import { NULL_BODY_STATUS } from '../constants.js';
 import { get_node_type } from '../utils.js';
 
@@ -493,12 +493,14 @@ export function create_universal_fetch(event, state, fetched, csr, resolve_opts)
 async function stream_to_string(stream) {
 	let result = '';
 	const reader = stream.getReader();
+	const decoder = new TextDecoder();
 	while (true) {
 		const { done, value } = await reader.read();
 		if (done) {
+			result += decoder.decode();
 			break;
 		}
-		result += text_decoder.decode(value);
+		result += decoder.decode(value, { stream: true });
 	}
 	return result;
 }

package/src/runtime/server/page/render.js

@@ -529,7 +529,10 @@ export async function render_response({
 
 					const store = internals.type === 'prerender' ? prerender : query;
 
-					if (event_state.remote.refreshes?.[remote_key] !== undefined) {
+					if (
+						event_state.remote.refreshes?.has(remote_key) ||
+						event_state.remote.reconnects?.has(remote_key)
+					) {
 						// This entry was refreshed/set by a command or form action.
 						// Always await it so the mutation result is serialized.
 						store[remote_key] = await entry.data;

package/src/runtime/server/remote.js

@@ -121,7 +121,12 @@ async function handle_remote_call_internal(event, state, options, manifest, id)
 				/** @type {RemoteFunctionResponse} */ ({
 					type: 'result',
 					result: stringify(result, transport),
-					refreshes: result.issues ? undefined : await serialize_refreshes()
+					refreshes: result.issues
+						? undefined
+						: await serialize_singleflight(state.remote.refreshes),
+					reconnects: result.issues
+						? undefined
+						: await serialize_singleflight(state.remote.reconnects)
 				})
 			);
 		}
@@ -137,11 +142,115 @@ async function handle_remote_call_internal(event, state, options, manifest, id)
 				/** @type {RemoteFunctionResponse} */ ({
 					type: 'result',
 					result: stringify(data, transport),
-					refreshes: await serialize_refreshes()
+					refreshes: await serialize_singleflight(state.remote.refreshes),
+					reconnects: await serialize_singleflight(state.remote.reconnects)
 				})
 			);
 		}
 
+		if (internals.type === 'query_live') {
+			if (event.request.method !== 'GET') {
+				throw new SvelteKitError(
+					405,
+					'Method Not Allowed',
+					`\`query.live\` functions must be invoked via GET request, not ${event.request.method}`
+				);
+			}
+
+			const payload = /** @type {string} */ (
+				new URL(event.request.url).searchParams.get('payload')
+			);
+
+			const generator = internals.run(event, state, parse_remote_arg(payload, transport));
+
+			const encoder = new TextEncoder();
+
+			/**
+			 * @param {ReadableStreamDefaultController} controller
+			 * @param {any} payload
+			 */
+			function send(controller, payload) {
+				controller.enqueue(encoder.encode(JSON.stringify(payload) + '\n'));
+			}
+
+			let closed = false;
+
+			/** @type {string | undefined} */
+			let result = undefined;
+
+			async function cancel() {
+				if (closed) return;
+				closed = true;
+				await generator.return(undefined);
+			}
+
+			event.request.signal.addEventListener('abort', cancel, { once: true });
+
+			return new Response(
+				new ReadableStream({
+					async pull(controller) {
+						if (event.request.signal.aborted) {
+							await cancel();
+							controller.close();
+							return;
+						}
+
+						try {
+							while (true) {
+								const { value, done } = await generator.next();
+
+								if (done) {
+									await cancel();
+									controller.close();
+									return;
+								}
+
+								// only send changed data
+								if (result !== (result = stringify(value, transport))) {
+									send(controller, {
+										type: 'result',
+										result
+									});
+
+									return;
+								}
+							}
+						} catch (error) {
+							if (!event.request.signal.aborted) {
+								if (error instanceof Redirect) {
+									send(controller, {
+										type: 'redirect',
+										location: error.location
+									});
+								} else {
+									const status =
+										error instanceof HttpError || error instanceof SvelteKitError
+											? error.status
+											: 500;
+
+									send(controller, {
+										type: 'error',
+										error: await handle_error_and_jsonify(event, state, options, error),
+										status
+									});
+								}
+							}
+
+							await cancel();
+							controller.close();
+						}
+					},
+					cancel
+				}),
+				{
+					headers: {
+						'cache-control': 'private, no-store',
+						'content-type': 'application/x-ndjson'
+					}
+				}
+			);
+		}
+
 		const payload =
 			internals.type === 'prerender'
 				? additional_args
@@ -166,7 +275,8 @@ async function handle_remote_call_internal(event, state, options, manifest, id)
 				/** @type {RemoteFunctionResponse} */ ({
 					type: 'redirect',
 					location: error.location,
-					refreshes: await serialize_refreshes()
+					refreshes: await serialize_singleflight(state.remote.refreshes),
+					reconnects: await serialize_singleflight(state.remote.reconnects)
 				})
 			);
 		}
@@ -191,16 +301,14 @@ async function handle_remote_call_internal(event, state, options, manifest, id)
 		);
 	}
 
-	async function serialize_refreshes() {
-		const refreshes = state.remote.refreshes ?? {};
-
-		const entries = Object.entries(refreshes);
-		if (entries.length === 0) {
+	/** @param {Map<string, Promise<any>> | null} map */
+	async function serialize_singleflight(map) {
+		if (!map || map.size === 0) {
 			return undefined;
 		}
 
 		const results = await Promise.all(
-			entries.map(async ([key, promise]) => {
+			Array.from(map, async ([key, promise]) => {
 				try {
 					return [key, { type: 'result', data: await promise }];
 				} catch (error) {

package/src/runtime/server/respond.js

@@ -152,6 +152,7 @@ export async function internal_respond(request, options, manifest, state) {
 			forms: null,
 			/** A map of remote function key to corresponding single-flight-mutation promise */
 			refreshes: null,
+			reconnects: null,
 			/** A map of remote function ID to payloads requested for refreshing by the client */
 			requested: null
 		},

package/src/runtime/shared.js

@@ -1,6 +1,6 @@
 /** @import { Transport } from '@sveltejs/kit' */
 import * as devalue from 'devalue';
-import { base64_decode, base64_encode, text_decoder, text_encoder } from './utils.js';
+import { base64_decode, base64_encode, text_encoder } from './utils.js';
 import * as svelte from 'svelte';
 
 /**
@@ -273,7 +273,7 @@ export function stringify_remote_arg(value, transport, sort = true) {
 export function parse_remote_arg(string, transport) {
 	if (!string) return undefined;
 
-	const json_string = text_decoder.decode(
+	const json_string = new TextDecoder().decode(
 		// no need to add back `=` characters, atob can handle it
 		base64_decode(string.replaceAll('-', '+').replaceAll('_', '/'))
 	);

package/src/runtime/utils.js

@@ -1,7 +1,6 @@
 import { BROWSER } from 'esm-env';
 
 export const text_encoder = new TextEncoder();
-export const text_decoder = new TextDecoder();
 
 /**
  * Like node's path.relative, but without using node