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

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,78 @@ 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) {
+							await goto(response.redirect);
 
-							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.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 } 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';
 
 /**
@@ -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[0] ?? 500, node.e[1]);
+				this.#loading = false;
+				this.#error = error;
+
+				promise.catch(noop);
+				this.#reject_first?.(error);
+				this.#resolve_first = null;
+				this.#reject_first = null;
+			} else {
+				this.set(node.v);
+			}
 		}
 	}
 

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
 		}

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

@@ -1,7 +1,8 @@
-/** @import { RemoteFunctionResponse, RemoteSingleflightMap, RemoteSingleflightEntry } from 'types' */
+/** @import { RemoteFunctionResponse, RemoteFunctionData, RemoteFunctionDataNode } from 'types' */
 /** @import { RemoteQueryUpdate } from '@sveltejs/kit' */
+/** @import { CacheEntry } from './cache.svelte.js' */
 import * as devalue from 'devalue';
-import { app, goto, live_query_map, query_map } from '../client.js';
+import { app, goto, live_query_map, query_map, query_responses } from '../client.js';
 import { HttpError, Redirect } from '@sveltejs/kit/internal';
 import { untrack } from 'svelte';
 import { create_remote_key, split_remote_key } from '../../shared.js';
@@ -77,6 +78,20 @@ export function pin_while_resolving(cache_map, cache, id, payload, then) {
 /**
  * @returns {{ 'x-sveltekit-pathname': string, 'x-sveltekit-search': string }}
  */
+/**
+ * Unwraps a `RemoteFunctionDataNode` that was serialized during SSR,
+ * rethrowing serialized errors so the consuming resource ends up
+ * in the same failed state it had on the server
+ * @param {RemoteFunctionDataNode} node
+ */
+export function unwrap_node(node) {
+	if (node.e) {
+		throw new HttpError(node.e[0] ?? 500, node.e[1]);
+	}
+
+	return node.v;
+}
+
 export function get_remote_request_headers() {
 	// This will be the correct value of the current or soon-current url,
 	// even in forks because it's state-based - therefore not using window.location.
@@ -93,15 +108,10 @@ export function get_remote_request_headers() {
 
 /**
  * @param {string} url
- * @param {HeadersInit} headers
+ * @param {RequestInit} [init]
  */
-export async function remote_request(url, headers) {
-	const response = await fetch(url, {
-		headers: {
-			'Content-Type': 'application/json',
-			...headers
-		}
-	});
+export async function remote_request(url, init) {
+	const response = await fetch(url, init);
 
 	if (!response.ok) {
 		throw new HttpError(500, 'Failed to execute remote function');
@@ -109,9 +119,63 @@ export async function remote_request(url, headers) {
 
 	const result = /** @type {RemoteFunctionResponse} */ (await response.json());
 
-	const resolved = await handle_side_channel_response(result);
+	if (result.type === 'error') {
+		throw new HttpError(result.status ?? 500, result.error);
+	}
+
+	const data = /** @type {RemoteFunctionData} */ (
+		result.data ? devalue.parse(result.data, app.decoders) : {}
+	);
+
+	/**
+	 *
+	 * @param {string} key
+	 * @param {CacheEntry<any> | undefined} entry
+	 * @param {any} result
+	 */
+	function refresh(key, entry, result) {
+		if (entry?.resource) {
+			if (result.e) {
+				entry.resource.fail(new HttpError(result.e[0] ?? 500, result.e[1]));
+			} else {
+				entry.resource.set(result.v);
+			}
+		} else if (!result.e) {
+			// `query_responses` stores `{ v }`/`{ e }` nodes, not raw values.
+			// Errors are deliberately dropped here: they are responses to a specific
+			// refresh, not durable state a future resource should initialize with
+			query_responses[key] = result;
+		}
+	}
+
+	// update queries with refreshed data
+	if (data.q) {
+		for (const key in data.q) {
+			const parts = split_remote_key(key);
+			const entry = query_map.get(parts.id)?.get(parts.payload);
+
+			refresh(key, entry, data.q[key]);
+		}
+	}
+
+	// reconnect live queries
+	if (data.l) {
+		for (const key in data.l) {
+			const parts = split_remote_key(key);
+			const entry = live_query_map.get(parts.id)?.get(parts.payload);
+
+			refresh(key, entry, data.l[key]);
 
-	return resolved.result;
+			// `fail()` is terminal, so only reconnect on the success path —
+			// reconnecting after a hard failure would wipe the error state and
+			// restart the stream (see commit 63a3e83 regression).
+			if (!data.l[key].e) {
+				void entry?.resource.reconnect();
+			}
+		}
+	}
+
+	return data;
 }
 
 /**
@@ -206,50 +270,3 @@ export function categorize_updates(updates) {
 
 	return { overrides, refreshes };
 }
-
-/**
- * @template TResource
- * @param {string} stringified_singleflight
- * @param {Map<string, Map<string, { resource: TResource }>>} map
- * @param {(resource: TResource, value: RemoteSingleflightEntry) => void} callback
- */
-function apply_singleflight(stringified_singleflight, map, callback) {
-	const singleflight = /** @type {RemoteSingleflightMap} */ (
-		devalue.parse(stringified_singleflight, app.decoders)
-	);
-
-	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);
-		}
-	}
-}
-
-/**
- * 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') {
-			resource?.set(value.data);
-			void resource?.reconnect();
-		} else {
-			resource?.fail(new HttpError(value.status ?? 500, value.error));
-		}
-	});
-};

package/src/runtime/client/sse.js

@@ -0,0 +1,32 @@
+import { read_stream } from './stream.js';
+
+/**
+ * @param {string} block
+ * @returns {string | undefined}
+ */
+function parse_sse_event_data(block) {
+	const lines = block.split('\n');
+	let data = '';
+
+	for (const line of lines) {
+		if (line.startsWith('data:')) {
+			data += (data ? '\n' : '') + line.slice(5).trimStart();
+		}
+	}
+
+	return data || undefined;
+}
+
+/**
+ * Yields parsed JSON objects from a ReadableStream of Server-Sent Events.
+ * Each yielded value is the raw `JSON.parse`'d object from a `data:` field.
+ * @param {ReadableStreamDefaultReader<Uint8Array>} reader
+ */
+export async function* read_sse(reader) {
+	for await (const block of read_stream(reader, '\n\n')) {
+		const data = parse_sse_event_data(block);
+		if (data) {
+			yield JSON.parse(data);
+		}
+	}
+}

package/src/runtime/client/stream.js

@@ -0,0 +1,38 @@
+/**
+ * Reads from a stream, decoding it as text and yielding each block of content
+ * separated by `delimiter`. The trailing block (if any) is yielded once the
+ * stream closes.
+ * @param {ReadableStreamDefaultReader<Uint8Array>} reader
+ * @param {string} delimiter
+ */
+export async function* read_stream(reader, delimiter) {
+	let done = false;
+	let buffer = '';
+	const decoder = new TextDecoder();
+
+	while (true) {
+		let split = buffer.indexOf(delimiter);
+		while (split !== -1) {
+			yield buffer.slice(0, split);
+			buffer = buffer.slice(split + delimiter.length);
+			split = buffer.indexOf(delimiter);
+		}
+
+		if (done) {
+			if (buffer) {
+				yield buffer;
+			}
+			return;
+		}
+
+		const chunk = await reader.read();
+		done = chunk.done;
+		if (chunk.value) {
+			buffer += decoder.decode(chunk.value, { stream: true });
+		}
+
+		if (done) {
+			buffer += decoder.decode();
+		}
+	}
+}