@sveltejs/kit 3.0.0-next.1 → 3.0.0-next.11

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

@@ -1,4 +1,5 @@
-import { query_responses } from '../../client.js';
+import { query_responses, handle_error } from '../../client.js';
+import { HttpError } from '@sveltejs/kit/internal';
 import { QUERY_OVERRIDE_KEY } from '../shared.svelte.js';
 import { noop } from '../../../../utils/functions.js';
 import { tick, untrack } from 'svelte';
@@ -36,7 +37,7 @@ export class Query {
 		return this.#overrides.reduce((v, r) => r(v), /** @type {T} */ (this.#raw));
 	});
 
-	/** @type {any} */
+	/** @type {App.Error | undefined} */
 	#error = $state.raw(undefined);
 
 	/** @type {Promise<T>['then']} */
@@ -63,6 +64,17 @@ export class Query {
 	constructor(key, fn) {
 		this.#key = key;
 		this.#fn = fn;
+
+		if (Object.hasOwn(query_responses, key)) {
+			const node = query_responses[key];
+			delete query_responses[key];
+
+			if (node.e) {
+				this.fail(new HttpError(node.e.status, node.e));
+			} else {
+				this.set(/** @type {T} */ (node.v));
+			}
+		}
 	}
 
 	#get_promise() {
@@ -70,12 +82,14 @@ export class Query {
 		return /** @type {Promise<T>} */ (this.#promise);
 	}
 
-	#start() {
+	start() {
 		// there is a really weird bug with untrack and writes and initializations
 		// every time you see this comment, try removing the `tick.then` here and see
 		// if all the tests still pass with the latest svelte version
 		// if they do, congrats, you can remove tick.then
-		void tick().then(() => this.#get_promise());
+		void tick()
+			.then(() => this.#get_promise())
+			.catch(noop);
 	}
 
 	#clear_pending() {
@@ -88,6 +102,11 @@ export class Query {
 
 		const { promise, resolve, reject } = Promise.withResolvers();
 
+		// the rejection is surfaced via `.error` / the `then` getter for awaiting
+		// consumers — a purely reactive consumer (`.current`) attaches no handler,
+		// so make sure the stored promise can never become an unhandled rejection
+		promise.catch(noop);
+
 		this.#latest.push(resolve);
 
 		Promise.resolve(this.#fn())
@@ -107,22 +126,33 @@ export class Query {
 
 				resolve(undefined);
 			})
-			.catch((e) => {
+			.catch(async (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
+				if (this.#latest.indexOf(resolve) === -1) return;
+
+				const error = await handle_error(e, {
+					params: {},
+					route: { id: null },
+					url: new URL(location.href)
+				});
+
+				// Re-check after the async `handle_error` gap: a later request may have
+				// resolved/rejected while we were awaiting and superseded this one, so
+				// recompute the index and bail out if this request is no longer current
 				const idx = this.#latest.indexOf(resolve);
 				if (idx === -1) return;
 
 				untrack(() => {
 					this.#latest.splice(0, idx).forEach((r) => r(undefined));
-					this.#error = e;
+					this.#error = error;
 					this.#loading = false;
 				});
 
-				reject(e);
+				reject(new HttpError(error.status, error)); // so that transformError doesn't transform it again
 			});
 
 		return promise;
@@ -131,12 +161,12 @@ 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();
+		this.start();
 		return this.#then;
 	}
 
 	get catch() {
-		this.#start();
+		this.start();
 		this.#then;
 		return (/** @type {any} */ reject) => {
 			return this.#then(undefined, reject);
@@ -144,7 +174,7 @@ export class Query {
 	}
 
 	get finally() {
-		this.#start();
+		this.start();
 		this.#then;
 		return (/** @type {any} */ fn) => {
 			return this.#then(
@@ -161,12 +191,12 @@ export class Query {
 	}
 
 	get current() {
-		this.#start();
+		this.start();
 		return this.#current;
 	}
 
 	get error() {
-		this.#start();
+		this.start();
 		return this.#error;
 	}
 
@@ -174,7 +204,7 @@ export class Query {
 	 * Returns true if the resource is loading or reloading.
 	 */
 	get loading() {
-		this.#start();
+		this.start();
 		return this.#loading;
 	}
 
@@ -182,7 +212,7 @@ export class Query {
 	 * Returns true once the resource has been loaded for the first time.
 	 */
 	get ready() {
-		this.#start();
+		this.start();
 		return this.#ready;
 	}
 
@@ -198,6 +228,10 @@ export class Query {
 	 * @param {T} value
 	 */
 	set(value) {
+		// normally consumed in the constructor, but make sure a leftover
+		// SSR record can never shadow the newly-set value
+		delete query_responses[this.#key];
+
 		this.#clear_pending();
 		this.#ready = true;
 		this.#loading = false;
@@ -206,13 +240,15 @@ export class Query {
 		this.#promise = Promise.resolve();
 	}
 
-	/**
-	 * @param {unknown} error
-	 */
+	/** @param {HttpError} error */
 	fail(error) {
+		// normally consumed in the constructor, but make sure a leftover
+		// SSR record can never shadow the newly-set error
+		delete query_responses[this.#key];
+
 		this.#clear_pending();
 		this.#loading = false;
-		this.#error = error;
+		this.#error = error.body;
 
 		const promise = Promise.reject(error);
 
@@ -242,6 +278,15 @@ export class Query {
 		return release;
 	}
 
+	/**
+	 * Reset ahead of a navigation that invalidates all, to force newly
+	 * rendered queries to get fresh data
+	 */
+	reset() {
+		this.#promise = null;
+		delete query_responses[this.#key];
+	}
+
 	get [Symbol.toStringTag]() {
 		return 'Query';
 	}

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

@@ -25,7 +25,7 @@ export class QueryProxy {
 	/**
 	 * @param {string} id
 	 * @param {any} arg
-	 * @param {(key: string, payload: string) => Promise<T>} fn
+	 * @param {(payload: string) => Promise<T>} fn
 	 */
 	constructor(id, arg, fn) {
 		this.#id = id;
@@ -41,7 +41,7 @@ export class QueryProxy {
 			this.#payload,
 			// IMPORTANT: This cannot close over `this` or it becomes impossible to
 			// garbage collect the QueryProxy and thus impossible to evict cache entries.
-			() => new Query(key, () => fn(key, payload))
+			() => new Query(key, () => fn(payload))
 		);
 
 		cache.ref(this, entry, this.#id, this.#payload);
@@ -98,7 +98,7 @@ export class QueryProxy {
 			this.#payload,
 			// IMPORTANT: This cannot close over `this` or it becomes impossible to
 			// garbage collect the QueryProxy and thus impossible to evict cache entries.
-			() => new Query(key_ref, () => fn_ref(key_ref, payload_ref))
+			() => new Query(key_ref, () => fn_ref(payload_ref))
 		);
 
 		const deref = cache.manual_ref(entry, this.#id, this.#payload);

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

@@ -1,12 +1,9 @@
 /** @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 { _goto } from '../client.js';
+import { get_remote_request_headers, QUERY_FUNCTION_ID, remote_request } from './shared.svelte.js';
 import { QueryProxy } from './query/proxy.js';
-import * as devalue from 'devalue';
-import { HttpError, Redirect } from '@sveltejs/kit/internal';
-import { hydratable } from 'svelte';
+import { HttpError } from '@sveltejs/kit/internal';
 
 /**
  * @param {string} id
@@ -18,84 +15,79 @@ export function query_batch(id) {
 
 	/** @type {RemoteQueryFunction<any, any>} */
 	const wrapper = (arg) => {
-		return new QueryProxy(id, arg, async (key, payload) => {
-			const serialized = await 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);
+		return new QueryProxy(id, arg, async (payload) => {
+			return await 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;
+				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()
-					};
+				// 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();
+				// 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
-							});
+					try {
+						const response = await remote_request(`${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');
-							}
+						if (response.redirect) {
+							// Use internal version to allow redirects to external URLs
+							await _goto(response.redirect, {}, 0);
 
-							const result = /** @type {RemoteFunctionResponse} */ (await response.json());
-							if (result.type === 'error') {
-								throw new HttpError(result.status ?? 500, result.error);
+							// settle all batched promises (with `undefined`, like a redirect
+							// from a non-batched query) so that callers don't hang forever
+							for (const resolvers of batched.values()) {
+								for (const { resolve } of resolvers) {
+									resolve(undefined);
+								}
 							}
 
-							if (result.type === 'redirect') {
-								await goto(result.location);
-								throw new Redirect(307, result.location);
-							}
+							return;
+						}
 
-							const results = devalue.parse(result.result, app.decoders);
+						const results = response._;
+						let i = 0;
 
-							// Resolve individual queries
-							// Maps guarantee insertion order so we can do it like this
-							let i = 0;
+						for (const resolvers of batched.values()) {
+							const result = results[i];
 
-							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);
-									}
+							for (const { resolve, reject } of resolvers) {
+								if (result.type === 'error') {
+									reject(new HttpError(result.error.status, result.error));
+								} else {
+									resolve(result.data);
 								}
-								i++;
 							}
-						} catch (error) {
-							// Reject all queries in the batch
-							for (const resolver of batched.values()) {
-								for (const { reject } of resolver) {
-									reject(error);
-								}
+							i++;
+						}
+					} catch (e) {
+						for (const resolvers of batched.values()) {
+							for (const { reject } of resolvers) {
+								reject(e);
 							}
 						}
-					}, 0);
-				});
+					}
+				}, 0);
 			});
-
-			return devalue.parse(serialized, app.decoders);
 		});
 	};
 

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

@@ -1,9 +1,8 @@
-import { app } from '../../client.js';
-import * as devalue from 'devalue';
+import { query_responses, handle_error } from '../../client.js';
 import { HttpError, Redirect } from '@sveltejs/kit/internal';
 import { noop, once } from '../../../../utils/functions.js';
 import { SharedIterator } from '../../../../utils/shared-iterator.js';
-import { hydratable, tick } from 'svelte';
+import { tick } from 'svelte';
 import { create_live_iterator } from './iterator.js';
 
 /**
@@ -25,7 +24,7 @@ export class LiveQuery {
 	#done = $state(false);
 	/** @type {T | undefined} */
 	#raw = $state.raw();
-	/** @type {any} */
+	/** @type {App.Error | undefined} */
 	#error = $state.raw(undefined);
 	/** @type {Promise<void>} */
 	#promise;
@@ -84,9 +83,25 @@ export class LiveQuery {
 		this.#resolve_first = resolve;
 		this.#reject_first = reject;
 
-		const serialized = hydratable(key, () => undefined);
-		if (serialized !== undefined) {
-			this.set(devalue.parse(serialized, app.decoders));
+		if (Object.hasOwn(query_responses, key)) {
+			const node = query_responses[key];
+			delete query_responses[key];
+
+			if (node.e) {
+				// the query failed during SSR — seed the failed state (mirroring `fail()`,
+				// minus its terminal `#done`), so the main loop still connects as usual
+				// and the query can recover
+				const error = new HttpError(node.e.status, node.e);
+				this.#loading = false;
+				this.#error = error.body;
+
+				promise.catch(noop);
+				this.#reject_first?.(error);
+				this.#resolve_first = null;
+				this.#reject_first = null;
+			} else {
+				this.set(node.v);
+			}
 		}
 	}
 
@@ -107,6 +122,7 @@ export class LiveQuery {
 
 		/** @type {PromiseWithResolvers<void>} */
 		const { promise: stopped, resolve: on_stop } = Promise.withResolvers();
+		let connected = false;
 
 		while (!this.#done) {
 			const controller = new AbortController();
@@ -119,16 +135,22 @@ export class LiveQuery {
 			const generator = create_live_iterator(this.#id, this.#payload, controller, () => {
 				this.#connected = true;
 				this.#attempt = 0;
+				connected = true;
 				on_connect();
 			});
 
 			try {
 				const { done, value } = await generator.next();
 
-				// TODO how much special handling does this need?
-				// should we even try to reconnect if this is the case?
-				if (done && !this.#ready) {
-					throw new Error('Live query completed before yielding a value');
+				if (done) {
+					if (!this.#ready) {
+						throw new Error('Live query completed before yielding a value');
+					}
+					// stream completed without yielding (e.g. the generator returned
+					// immediately on reconnect) — keep the last good value
+					this.#done = true;
+					this.#fan_out.done();
+					break;
 				}
 
 				this.set(value);
@@ -153,7 +175,7 @@ export class LiveQuery {
 
 				if (!this.#ready) {
 					// If we haven't successfully connected and received a value yet, surface the error
-					this.fail(error);
+					await this.#fail(error);
 					on_connect_failed(error);
 					break;
 				}
@@ -185,6 +207,12 @@ export class LiveQuery {
 		}
 
 		this.#interrupt = null;
+		// If the loop exited without ever successfully connecting, settle the
+		// reconnect handshake so callers (e.g. `invalidateAll()`) never await
+		// a forever-pending promise.
+		if (!connected) {
+			on_connect_failed(this.#error ?? new Error('Live query connection was interrupted'));
+		}
 		on_stop();
 	}
 
@@ -328,10 +356,13 @@ export class LiveQuery {
 		promise.catch(noop);
 		this.#done = false;
 		this.#attempt = 0;
-		// The previous fan-out may have been closed by `done()`/`fail()`. Future
-		// `for await` consumers need a fresh, open fan-out attached to the new
-		// `#main` lifetime.
-		this.#fan_out = new SharedIterator();
+		// Keep the existing fan-out open so active `for await` consumers
+		// continue receiving values from the new connection without interruption.
+		// Only replace it if it was already closed by a prior `done()`/`fail()`
+		// (e.g. reconnecting after a finite or hard-failed stream)
+		if (this.#fan_out.closed) {
+			this.#fan_out = new SharedIterator();
+		}
 		this.#main({ on_connect, on_connect_failed }).catch(noop);
 		await promise;
 	}
@@ -354,10 +385,10 @@ export class LiveQuery {
 		this.#fan_out.push(value);
 	}
 
-	/** @param {unknown} error */
+	/** @param {HttpError} error */
 	fail(error) {
 		this.#loading = false;
-		this.#error = error;
+		this.#error = error.body;
 		// `fail` is terminal — once a live query has hard-failed, the only way to start
 		// streaming again is via `reconnect()`. Mark it done and abort any in-flight
 		// request so that callers from outside the main loop (e.g. `apply_reconnections`)
@@ -366,6 +397,7 @@ export class LiveQuery {
 		void this.#interrupt?.();
 
 		if (this.#reject_first) {
+			this.#promise.catch(noop);
 			this.#reject_first(error);
 			this.#resolve_first = null;
 			this.#reject_first = null;
@@ -378,6 +410,16 @@ export class LiveQuery {
 		this.#fan_out.fail(error);
 	}
 
+	/** @param {unknown} e */
+	async #fail(e) {
+		const error = await handle_error(e, {
+			params: {},
+			route: { id: null },
+			url: new URL(location.href)
+		});
+		this.fail(new HttpError(error.status, error));
+	}
+
 	get [Symbol.toStringTag]() {
 		return 'LiveQuery';
 	}

package/src/runtime/client/remote-functions/query-live/iterator.js

@@ -4,21 +4,28 @@ import { get_remote_request_headers, handle_side_channel_response } from '../sha
 import * as devalue from 'devalue';
 import { HttpError } from '@sveltejs/kit/internal';
 import { noop } from '../../../../utils/functions.js';
-import { read_ndjson } from '../../ndjson.js';
+import { read_sse } from '../../sse.js';
 
 /**
- * @param {Response} response
- * @returns {Promise<ReadableStreamDefaultReader<Uint8Array>>}
+ * @template T
+ * @param {string} id
+ * @param {string} payload
+ * @param {AbortController} [controller]
+ * @param {() => void} [on_connect]
+ * @returns {AsyncGenerator<T>}
  */
-async function get_stream_reader(response) {
-	const content_type = response.headers.get('content-type') ?? '';
+export async function* create_live_iterator(
+	id,
+	payload,
+	controller = new AbortController(),
+	on_connect = noop
+) {
+	const url = `${base}/${app_dir}/remote/${id}${payload ? `?payload=${payload}` : ''}`;
 
-	if (response.ok && content_type.includes('application/json')) {
-		// we can end up here if we e.g. redirect in `handle`
-		const result = await response.json();
-		await handle_side_channel_response(result);
-		throw new HttpError(500, 'Invalid query.live response');
-	}
+	const response = await fetch(url, {
+		headers: get_remote_request_headers(),
+		signal: controller.signal
+	});
 
 	if (!response.ok) {
 		const result = await response.json().catch(() => ({
@@ -30,60 +37,34 @@ async function get_stream_reader(response) {
 		throw new HttpError(result.status ?? response.status ?? 500, result.error);
 	}
 
-	if (!response.body) {
-		throw new Error('Expected query.live response body to be a ReadableStream');
+	if (response.headers.get('content-type')?.includes('application/json')) {
+		// we can end up here if we e.g. redirect in `handle`
+		const result = await response.json();
+		await handle_side_channel_response(result);
+		throw new HttpError(500, 'Invalid query.live response');
 	}
 
-	return response.body.getReader();
-}
-
-/**
- * Yields deserialized results from a ReadableStream of newline-delimited JSON
- * @param {ReadableStreamDefaultReader<Uint8Array>} reader
- */
-async function* read_live_ndjson(reader) {
-	for await (const node of read_ndjson(reader)) {
-		if (node.type === 'result') {
-			yield devalue.parse(node.result, app.decoders);
-			continue;
-		}
-
-		await handle_side_channel_response(node);
-		throw new HttpError(500, 'Invalid query.live response');
+	if (!response.body) {
+		throw new Error('Expected query.live response body to be a ReadableStream');
 	}
-}
 
-/**
- * @template T
- * @param {string} id
- * @param {string} payload
- * @param {AbortController} [controller]
- * @param {() => void} [on_connect]
- * @returns {AsyncGenerator<T>}
- */
-export async function* create_live_iterator(
-	id,
-	payload,
-	controller = new AbortController(),
-	on_connect = noop
-) {
-	const url = `${base}/${app_dir}/remote/${id}${payload ? `?payload=${payload}` : ''}`;
-	/** @type {ReadableStreamDefaultReader<Uint8Array> | null} */
-	let reader = null;
+	const reader = response.body.getReader();
 
 	try {
-		const response = await fetch(url, {
-			headers: get_remote_request_headers(),
-			signal: controller.signal
-		});
-		reader = await get_stream_reader(response);
-
 		on_connect();
 
-		yield* read_live_ndjson(reader);
+		for await (const node of read_sse(reader)) {
+			if (node.type === 'result') {
+				yield devalue.parse(node.result, app.decoders);
+				continue;
+			}
+
+			await handle_side_channel_response(node);
+			throw new HttpError(500, 'Invalid query.live response');
+		}
 	} finally {
 		try {
-			await reader?.cancel();
+			await reader.cancel();
 		} catch {
 			// already closed
 		}