@sveltejs/kit 2.57.1 → 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;
@@ -500,53 +400,24 @@ class QueryProxy {
 		};
 	}
 
-	#get_cached_query() {
-		// TODO iterate on error messages
-		if (!this.#tracking) {
-			throw new Error(
-				'This query was not created in a reactive context and is limited to calling `.run`, `.refresh`, and `.set`.'
-			);
-		}
-
-		if (!this.#active) {
-			throw new Error(
-				'This query instance is no longer active and can no longer be used for reactive state access. ' +
-					'This typically means you created the query in a tracking context and stashed it somewhere outside of a tracking context.'
-			);
-		}
-
-		const cached = query_map.get(this.#id)?.get(this.#payload);
-
-		if (!cached) {
-			// The only case where `this.#active` can be `true` is when we've added an entry to `query_map`, and the
-			// only way that entry can get removed is if this instance (and all others) have been deactivated.
-			// So if we get here, someone (us, check git blame and point fingers) did `entry.count -= 1` improperly.
-			throw new Error(
-				'No cached query found. This should be impossible. Please file a bug report.'
-			);
-		}
-
-		return cached.resource;
-	}
-
 	#safe_get_cached_query() {
 		return query_map.get(this.#id)?.get(this.#payload)?.resource;
 	}
 
 	get current() {
-		return this.#get_cached_query().current;
+		return this.#safe_get_cached_query()?.current;
 	}
 
 	get error() {
-		return this.#get_cached_query().error;
+		return this.#safe_get_cached_query()?.error;
 	}
 
 	get loading() {
-		return this.#get_cached_query().loading;
+		return this.#safe_get_cached_query()?.loading ?? false;
 	}
 
 	get ready() {
-		return this.#get_cached_query().ready;
+		return this.#safe_get_cached_query()?.ready ?? false;
 	}
 
 	run() {
@@ -574,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 }} */ (
 			() => {
@@ -588,6 +459,35 @@ class QueryProxy {
 		return release;
 	}
 
+	#get_cached_query() {
+		// TODO iterate on error messages
+		if (!this.#tracking) {
+			throw new Error(
+				'This query was not created in a reactive context and cannot be awaited. Use `.run()` to execute the query instead.'
+			);
+		}
+
+		if (!this.#active) {
+			throw new Error(
+				'This query instance is no longer active and can no longer be awaited. ' +
+					'This typically means you created the query in a tracking context and stashed it somewhere outside of a tracking context.'
+			);
+		}
+
+		const cached = query_map.get(this.#id)?.get(this.#payload);
+
+		if (!cached) {
+			// The only case where `this.#active` can be `true` is when we've added an entry to `query_map`, and the
+			// only way that entry can get removed is if this instance (and all others) have been deactivated.
+			// So if we get here, someone (us, check git blame and point fingers) did `entry.count -= 1` improperly.
+			throw new Error(
+				'No cached query found. This should be impossible. Please file a bug report.'
+			);
+		}
+
+		return cached.resource;
+	}
+
 	/** @type {Query<T>['then']} */
 	get then() {
 		const cached = this.#get_cached_query();

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());
 	}
 }
 
@@ -503,8 +505,8 @@ export function deep_set(object, keys, value) {
 		check_prototype_pollution(key);
 
 		const is_array = /^\d+$/.test(keys[i + 1]);
-		const exists = Object.hasOwn(current, key);
-		const inner = current[key];
+		const inner = Object.hasOwn(current, key) ? current[key] : undefined;
+		const exists = inner != null;
 
 		if (exists && is_array !== Array.isArray(inner)) {
 			throw new Error(`Invalid array key ${keys[i + 1]}`);
@@ -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/index.js

@@ -1,3 +1,5 @@
+/** @import { ActionResult, RequestEvent, SSRManifest } from '@sveltejs/kit' */
+/** @import { PageNodeIndexes, RequestState, RequiredResolveOptions, ServerDataNode, SSRComponent, SSRNode, SSROptions, SSRState } from 'types' */
 import { text } from '@sveltejs/kit';
 import { HttpError, Redirect } from '@sveltejs/kit/internal';
 import { compact } from '../../../utils/array.js';
@@ -25,14 +27,14 @@ import { PageNodes } from '../../../utils/page_nodes.js';
 const MAX_DEPTH = 10;
 
 /**
- * @param {import('@sveltejs/kit').RequestEvent} event
- * @param {import('types').RequestState} event_state
- * @param {import('types').PageNodeIndexes} page
- * @param {import('types').SSROptions} options
- * @param {import('@sveltejs/kit').SSRManifest} manifest
- * @param {import('types').SSRState} state
+ * @param {RequestEvent} event
+ * @param {RequestState} event_state
+ * @param {PageNodeIndexes} page
+ * @param {SSROptions} options
+ * @param {SSRManifest} manifest
+ * @param {SSRState} state
  * @param {import('../../../utils/page_nodes.js').PageNodes} nodes
- * @param {import('types').RequiredResolveOptions} resolve_opts
+ * @param {RequiredResolveOptions} resolve_opts
  * @returns {Promise<Response>}
  */
 export async function render_page(
@@ -58,11 +60,11 @@ export async function render_page(
 	}
 
 	try {
-		const leaf_node = /** @type {import('types').SSRNode} */ (nodes.page());
+		const leaf_node = /** @type {SSRNode} */ (nodes.page());
 
 		let status = 200;
 
-		/** @type {import('@sveltejs/kit').ActionResult | undefined} */
+		/** @type {ActionResult | undefined} */
 		let action_result = undefined;
 
 		if (is_action_request(event)) {
@@ -135,7 +137,15 @@ export async function render_page(
 			}
 
 			return await render_response({
-				branch: [],
+				// provide nodes without running load functions so that the styles and
+				// fonts are linked in the head before CSR takes over
+				branch: compact(nodes.data).map((node) => {
+					return {
+						node,
+						data: null,
+						server_data: null
+					};
+				}),
 				fetched,
 				page_config: {
 					ssr: false,
@@ -165,7 +175,7 @@ export async function render_page(
 				? server_data_serializer_json(event, event_state, options)
 				: null;
 
-		/** @type {Array<Promise<import('types').ServerDataNode | null>>} */
+		/** @type {Array<Promise<ServerDataNode | null>>} */
 		const server_promises = nodes.data.map((node, i) => {
 			if (load_error) {
 				// if an error happens immediately, don't bother with the rest of the nodes
@@ -359,7 +369,7 @@ export async function render_page(
 			},
 			status,
 			error: null,
-			branch: !ssr ? [] : compact(branch),
+			branch: compact(branch),
 			action_result,
 			fetched,
 			data_serializer: !ssr ? server_data_serializer(event, event_state, options) : data_serializer,
@@ -388,14 +398,14 @@ export async function render_page(
 
 /**
  *
- * @param {import('types').SSROptions} options
+ * @param {SSROptions} options
  * @param {boolean} ssr
  * @param {Array<import('./types.js').Loaded | null>} branch
- * @param {import('types').PageNodeIndexes} page
- * @param {import('@sveltejs/kit').SSRManifest} manifest
+ * @param {PageNodeIndexes} page
+ * @param {SSRManifest} manifest
  */
 async function load_error_components(options, ssr, branch, page, manifest) {
-	/** @type {Array<import('types').SSRComponent | undefined> | undefined} */
+	/** @type {Array<SSRComponent | undefined> | undefined} */
 	let error_components;
 
 	if (options.server_error_boundaries && ssr) {

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;
 }