@sveltejs/kit 3.0.0-next.2 → 3.0.0-next.21

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 { HttpError, Redirect } from '@sveltejs/kit/internal';
+import { query_responses, handle_error } from '../../client.js';
+import { HttpError, Redirect, HandledHttpError } 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 HandledHttpError(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,14 +175,14 @@ 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;
 				}
 
 				if (error instanceof HttpError) {
-					// Server intentionally sent an error. Surface it and stop.
-					this.fail(error);
+					// Server or client intentionally produced an error. Surface it and stop.
+					await this.#fail(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 HandledHttpError(error));
+	}
+
 	get [Symbol.toStringTag]() {
 		return 'LiveQuery';
 	}

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

@@ -1,8 +1,10 @@
-import { app_dir, base } from '$app/paths/internal/client';
+/** @import { RemoteFunctionResponse } from 'types' */
+import { app_dir, base } from '#app/paths';
 import { app } from '../../client.js';
-import { get_remote_request_headers, handle_side_channel_response } from '../shared.svelte.js';
+import { notify_version } from '../../state.svelte.js';
+import { handle_side_channel_response } from '../shared.svelte.js';
 import * as devalue from 'devalue';
-import { HttpError } from '@sveltejs/kit/internal';
+import { HttpError, HandledHttpError } from '@sveltejs/kit/internal';
 import { noop } from '../../../../utils/functions.js';
 import { read_sse } from '../../sse.js';
 
@@ -23,25 +25,26 @@ export async function* create_live_iterator(
 	const url = `${base}/${app_dir}/remote/${id}${payload ? `?payload=${payload}` : ''}`;
 
 	const response = await fetch(url, {
-		headers: get_remote_request_headers(),
 		signal: controller.signal
 	});
 
+	// detect new deployments from the response header
+	notify_version(response.headers.get('x-sveltekit-version'));
+
 	if (!response.ok) {
-		const result = await response.json().catch(() => ({
-			type: 'error',
-			status: response.status,
-			error: response.statusText
-		}));
+		/** @type {RemoteFunctionResponse | undefined} */
+		const result = await response.json().catch(() => undefined);
 
-		throw new HttpError(result.status ?? response.status ?? 500, result.error);
+		throw result?.type === 'error'
+			? new HandledHttpError(result.error)
+			: new HttpError({ status: response.status, message: response.statusText });
 	}
 
 	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');
+		throw new HttpError({ status: 500, message: 'Invalid query.live response' });
 	}
 
 	if (!response.body) {
@@ -60,7 +63,7 @@ export async function* create_live_iterator(
 			}
 
 			await handle_side_channel_response(node);
-			throw new HttpError(500, 'Invalid query.live response');
+			throw new HttpError({ status: 500, message: 'Invalid query.live response' });
 		}
 	} finally {
 		try {

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

@@ -1,4 +1,4 @@
-import { app, live_query_map } from '../../client.js';
+import { live_query_map } from '../../client.js';
 import { pin_in_effect, pin_while_resolving, QUERY_RESOURCE_KEY } from '../shared.svelte.js';
 import { create_remote_key, stringify_remote_arg } from '../../../shared.js';
 import { LiveQuery } from './instance.svelte.js';
@@ -20,7 +20,7 @@ export class LiveQueryProxy {
 	 */
 	constructor(id, arg) {
 		this.#id = id;
-		this.#payload = stringify_remote_arg(arg, app.hooks.transport);
+		this.#payload = stringify_remote_arg(arg);
 		this.#key = create_remote_key(id, this.#payload);
 		Object.defineProperty(this, QUERY_RESOURCE_KEY, { value: this.#key });
 
@@ -74,16 +74,6 @@ export class LiveQueryProxy {
 		return this.#get_cached_query().done;
 	}
 
-	/**
-	 * @deprecated Use `for await (const value of liveQuery())` instead.
-	 * @returns {AsyncGenerator<T>}
-	 */
-	run() {
-		throw new Error(
-			'`.run()` has been removed from live queries. Use `for await (const value of liveQuery())` instead.'
-		);
-	}
-
 	reconnect() {
 		return this.#get_cached_query().reconnect();
 	}

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

@@ -1,11 +1,12 @@
-/** @import { RemoteFunctionResponse, RemoteSingleflightMap, RemoteSingleflightEntry } from 'types' */
-/** @import { RemoteQueryUpdate } from '@sveltejs/kit' */
+/** @import { RemoteFunctionResponse, RemoteFunctionData, RemoteFunctionDataNode } from 'types' */
+/** @import { RemoteQueryUpdate } from '@sveltejs/kit/remote' */
+/** @import { CacheEntry } from './cache.svelte.js' */
 import * as devalue from 'devalue';
-import { app, goto, live_query_map, query_map } from '../client.js';
-import { HttpError, Redirect } from '@sveltejs/kit/internal';
+import { app, _goto, live_query_map, query_map, query_responses } from '../client.js';
+import { HttpError, Redirect, HandledHttpError } 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 { navigating, page, notify_version } from '../state.svelte.js';
 
 /** Indicates a query function, as opposed to a query instance */
 export const QUERY_FUNCTION_ID = Symbol('sveltekit.query_function_id');
@@ -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 HandledHttpError(node.e);
+	}
+
+	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,25 +108,81 @@ 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);
+	const status = response.status;
+
+	// detect new deployments from the response header
+	notify_version(response.headers.get('x-sveltekit-version'));
 
 	if (!response.ok) {
-		throw new HttpError(500, 'Failed to execute remote function');
+		const result = await response.json().catch(() => undefined);
+
+		throw result?.type === 'error'
+			? new HandledHttpError({ status, ...result.error })
+			: new HttpError({ status, message: response.statusText });
 	}
 
 	const result = /** @type {RemoteFunctionResponse} */ (await response.json());
 
-	const resolved = await handle_side_channel_response(result);
+	if (result.type === 'error') {
+		throw new HandledHttpError(result.error);
+	}
+
+	const data = /** @type {RemoteFunctionData} */ (
+		result.data ? devalue.parse(result.data, app.decoders) : {}
+	);
+
+	/**
+	 * @param {string} key
+	 * @param {CacheEntry | undefined} entry
+	 * @param {any} result
+	 */
+	function refresh(key, entry, result) {
+		if (entry?.resource) {
+			if (result.e) {
+				entry.resource.fail(new HandledHttpError(result.e));
+			} 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);
 
-	return resolved.result;
+			refresh(key, entry, data.l[key]);
+
+			// `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;
 }
 
 /**
@@ -120,12 +191,13 @@ export async function remote_request(url, headers) {
  */
 export async function handle_side_channel_response(response) {
 	if (response.type === 'redirect') {
-		await goto(response.location);
+		// Use internal version to allow redirects to external URLs
+		await _goto(response.location);
 		throw new Redirect(307, response.location);
 	}
 
 	if (response.type === 'error') {
-		throw new HttpError(response.status ?? 500, response.error);
+		throw new HandledHttpError(response.error);
 	}
 
 	return response;
@@ -206,50 +278,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/snapshots.js

@@ -0,0 +1,147 @@
+import { BROWSER, DEV } from 'esm-env';
+import { onMount } from 'svelte';
+import * as storage from './session-storage.js';
+import { NAVIGATION_SNAPSHOT_KEY } from './constants.js';
+import { hash } from '../../utils/hash.js';
+import { parse, stringify } from '#app/internal/transport';
+
+/**
+ * @typedef {{ id: string; capture: () => any; restore: (value: any) => void; reset?: () => void }} SnapshotRegistration
+ */
+
+// Function snapshots use history indexes so shallow entries have distinct state.
+/** @type {Record<string, Record<string, string>>} */
+const navigation_snapshots = storage.get(NAVIGATION_SNAPSHOT_KEY) ?? {};
+
+/** @type {Set<SnapshotRegistration>} */
+const snapshot_registrations = new Set();
+
+/**
+ * The registrations mounted right now. Take before navigating and pass to
+ * `restore_navigation_snapshot` — only these are eligible for `reset`.
+ * @returns {Set<SnapshotRegistration>}
+ */
+export function current_registrations() {
+	return new Set(snapshot_registrations);
+}
+
+// injected by client.js: the live history index while the router is idle, null mid-navigation
+/** @type {() => number | null} */
+let get_idle_history_index = () => null;
+
+/** @param {() => number | null} fn */
+export function init_snapshots(fn) {
+	get_idle_history_index = fn;
+}
+
+/** @param {number} index */
+export function capture_navigation_snapshot(index) {
+	if (snapshot_registrations.size === 0) {
+		delete navigation_snapshots[index];
+		return;
+	}
+
+	navigation_snapshots[index] = Object.fromEntries(
+		Array.from(snapshot_registrations, ({ id, capture }) => [id, stringify(capture())])
+	);
+}
+
+/**
+ * @param {number} index
+ * @param {Set<SnapshotRegistration>} [reset_registrations]
+ */
+export function restore_navigation_snapshot(index, reset_registrations) {
+	const values = navigation_snapshots[index];
+
+	for (const registration of snapshot_registrations) {
+		if (values && Object.hasOwn(values, registration.id)) {
+			registration.restore(parse(values[registration.id]));
+		} else if (reset_registrations?.has(registration)) {
+			registration.reset?.();
+		}
+	}
+}
+
+/** @param {number} index */
+export function delete_navigation_snapshot(index) {
+	delete navigation_snapshots[index];
+}
+
+/** @param {number} index */
+export function persist_navigation_snapshots(index) {
+	capture_navigation_snapshot(index);
+	storage.set(NAVIGATION_SNAPSHOT_KEY, navigation_snapshots);
+}
+
+/**
+ * @param {string | undefined} stack
+ * @returns {string}
+ */
+function callsite_id(stack) {
+	let frames = stack?.split('\n') ?? [];
+	if (frames[0]?.trim() === 'Error') frames = frames.slice(1);
+
+	// only the callsite frame is stable: frames above it differ between hydration and
+	// re-mounting, and Vite query strings (stripped here) change on module invalidation
+	const frame = frames[1]?.replace(/\?[^)\s]*(?=:\d+:\d+\)?$)/, '');
+
+	if (!frame) {
+		throw new Error('Could not generate a snapshot id from the stack trace. Pass an `id` instead.');
+	}
+
+	return hash(frame);
+}
+
+/**
+ * A lifecycle function that captures state before navigating and restores it when traversing history.
+ *
+ * By default, the snapshot `id` is generated from the call site. Pass an explicit `id` to keep snapshots stable across deployments or distinguish multiple uses of a shared helper.
+ *
+ * The optional `reset` callback runs on navigations where there is no captured value to restore, such as when a new history entry is created. Captured values are serialized with the app's transport hook.
+ *
+ * `snapshot` must be called during a component initialization. It remains active as long as the component is mounted.
+ * @template T
+ * @param {{ id?: string; capture: () => T; restore: (value: T) => void; reset?: () => void }} options
+ * @returns {void}
+ */
+export function snapshot(options) {
+	if (!BROWSER) return;
+
+	let id = options.id;
+	if (id === undefined) {
+		// restore any lowered third-party limit, else every callsite collapses to one id
+		const limit = Error.stackTraceLimit;
+		const lowered = typeof limit === 'number' && limit < 3;
+		if (lowered) Error.stackTraceLimit = 3;
+		const stack = new Error().stack;
+		if (lowered) Error.stackTraceLimit = limit;
+
+		id = callsite_id(stack);
+	}
+
+	const registration = { ...options, id };
+
+	onMount(() => {
+		if (DEV && Array.from(snapshot_registrations).some((existing) => existing.id === id)) {
+			throw new Error(
+				options.id === undefined
+					? 'snapshot() was called multiple times from the same call site. Pass a unique `id` to distinguish the instances.'
+					: `A snapshot with id "${options.id}" is already registered. Pass a unique \`id\`.`
+			);
+		}
+
+		const index = get_idle_history_index();
+		if (index !== null) {
+			const values = navigation_snapshots[index];
+			if (values && Object.hasOwn(values, id)) {
+				registration.restore(parse(values[id]));
+			}
+		}
+
+		snapshot_registrations.add(registration);
+
+		return () => {
+			snapshot_registrations.delete(registration);
+		};
+	});
+}