@sveltejs/kit 2.63.1 → 2.65.0

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/server/page/render.js

@@ -21,9 +21,9 @@ import {
 	get_global_name,
 	handle_error_and_jsonify
 } from '../utils.js';
-import { create_remote_key } from '../../shared.js';
 import { get_status } from '../../../utils/error.js';
 import * as env from '__sveltekit/env';
+import { collect_remote_data } from '../remote.js';
 
 // TODO rename this function/module
 
@@ -79,9 +79,9 @@ export async function render_response({
 
 	const { client } = manifest._;
 
-	const modulepreloads = new Set(client.imports);
-	const stylesheets = new Set(client.stylesheets);
-	const fonts = new Set(client.fonts);
+	const modulepreloads = new Set(client?.imports);
+	const stylesheets = new Set(client?.stylesheets);
+	const fonts = new Set(client?.fonts);
 
 	/**
 	 * The value of the Link header that is added to the response when not prerendering
@@ -282,7 +282,7 @@ export async function render_response({
 		for (const url of node.stylesheets) stylesheets.add(url);
 		for (const url of node.fonts) fonts.add(url);
 
-		if (node.inline_styles && !client.inline) {
+		if (node.inline_styles && !client?.inline) {
 			Object.entries(await node.inline_styles()).forEach(([filename, css]) => {
 				if (typeof css === 'string') {
 					inline_styles.set(filename, css);
@@ -308,7 +308,7 @@ export async function render_response({
 		return `${assets}/${path}`;
 	};
 
-	const style = client.inline
+	const style = client?.inline
 		? client.inline?.style
 		: Array.from(inline_styles.values()).join('\n');
 
@@ -365,8 +365,8 @@ export async function render_response({
 			.join('\n\t\t\t')}`;
 	}
 
-	if (page_config.csr) {
-		const route = manifest._.client.routes?.find((r) => r.id === event.route.id) ?? null;
+	if (page_config.csr && client) {
+		const route = client.routes?.find((r) => r.id === event.route.id) ?? null;
 
 		if (client.uses_env_dynamic_public && state.prerendering) {
 			modulepreloads.add(`${paths.app_dir}/env.js`);
@@ -390,12 +390,12 @@ export async function render_response({
 		}
 
 		// prerender a `/path/to/page/__route.js` module
-		if (manifest._.client.routes && state.prerendering && !state.prerendering.fallback) {
+		if (client.routes && state.prerendering && !state.prerendering.fallback) {
 			const pathname = add_resolution_suffix(event.url.pathname);
 
 			state.prerendering.dependencies.set(
 				pathname,
-				create_server_routing_response(route, event.params, new URL(pathname, event.url), manifest)
+				create_server_routing_response(route, event.params, new URL(pathname, event.url), client)
 			);
 		}
 
@@ -500,9 +500,9 @@ export async function render_response({
 				hydrate.push(`status: ${status}`);
 			}
 
-			if (manifest._.client.routes) {
+			if (client.routes) {
 				if (route) {
-					const stringified = generate_route_object(route, event.url, manifest).replaceAll(
+					const stringified = generate_route_object(route, event.url, client).replaceAll(
 						'\n',
 						'\n\t\t\t\t\t\t\t'
 					); // make output after it's put together with the rest more readable
@@ -516,87 +516,27 @@ export async function render_response({
 			args.push(`{\n${indent}\t${hydrate.join(`,\n${indent}\t`)}\n${indent}}`);
 		}
 
-		const { remote } = event_state;
-
-		let serialized_query_data = '';
-		let serialized_prerender_data = '';
-
-		if (remote.data) {
-			/** @type {Record<string, any>} */
-			const query = {};
-
-			/** @type {Record<string, any>} */
-			const prerender = {};
-
-			for (const [internals, cache] of remote.data) {
-				// remote functions without an `id` aren't exported, and thus
-				// cannot be called from the client
-				if (!internals.id) continue;
-
-				for (const key in cache) {
-					const entry = cache[key];
-
-					if (!entry.serialize) continue;
-
-					const remote_key = create_remote_key(internals.id, key);
-
-					const store = internals.type === 'prerender' ? prerender : query;
-
-					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;
-					} else {
-						// Don't block the response on pending remote data - if a query
-						// hasn't settled yet, it wasn't awaited in the template (or is behind a pending boundary).
-						const result = await Promise.race([
-							Promise.resolve(entry.data).then(
-								(v) => /** @type {const} */ ({ settled: true, value: v }),
-								(e) => /** @type {const} */ ({ settled: true, error: e })
-							),
-							new Promise((resolve) => {
-								queueMicrotask(() => resolve(/** @type {const} */ ({ settled: false })));
-							})
-						]);
-
-						if (result.settled) {
-							if ('error' in result) throw result.error;
-							store[remote_key] = result.value;
-						}
-					}
-				}
-			}
-
-			const replacer = create_replacer(options.hooks.transport);
-
-			if (Object.keys(query).length > 0) {
-				serialized_query_data = `${global}.query = ${devalue.uneval(query, replacer)};\n\n\t\t\t\t\t\t`;
-			}
-
-			if (Object.keys(prerender).length > 0) {
-				serialized_prerender_data = `${global}.prerender = ${devalue.uneval(prerender, replacer)};\n\n\t\t\t\t\t\t`;
-			}
-		}
+		const remote_data = await collect_remote_data({}, event, event_state, options);
 
-		const serialized_remote_data = `${serialized_query_data}${serialized_prerender_data}`;
+		const serialized_data =
+			Object.keys(remote_data).length > 0
+				? `${global}.data = ${devalue.uneval(remote_data, create_replacer(options.hooks.transport))};\n\n\t\t\t\t\t\t`
+				: '';
 
 		// `client.app` is a proxy for `bundleStrategy === 'split'`
 		const boot = client.inline
 			? `${client.inline.script}
 
-					${serialized_remote_data}${global}.app.start(${args.join(', ')});`
+					${serialized_data}${global}.app.start(${args.join(', ')});`
 			: client.app
 				? `Promise.all([
 						import(${s(prefixed(client.start))}),
 						import(${s(prefixed(client.app))})
 					]).then(([kit, app]) => {
-						${serialized_remote_data}kit.start(app, ${args.join(', ')});
+						${serialized_data}kit.start(app, ${args.join(', ')});
 					});`
 				: `import(${s(prefixed(client.start))}).then((app) => {
-						${serialized_remote_data}app.start(${args.join(', ')})
+						${serialized_data}app.start(${args.join(', ')})
 					});`;
 
 		if (load_env_eagerly) {

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

@@ -1,3 +1,4 @@
+/** @import { SSRManifest } from '@sveltejs/kit' */
 import { base, assets, relative } from '$app/paths/internal/server';
 import { text } from '@sveltejs/kit';
 import { s } from '../../../utils/misc.js';
@@ -7,15 +8,15 @@ import { get_relative_path } from '../../utils.js';
 /**
  * @param {import('types').SSRClientRoute} route
  * @param {URL} url
- * @param {import('@sveltejs/kit').SSRManifest} manifest
+ * @param {NonNullable<SSRManifest['_']['client']>} client
  * @returns {string}
  */
-export function generate_route_object(route, url, manifest) {
+export function generate_route_object(route, url, client) {
 	const { errors, layouts, leaf } = route;
 
 	const nodes = [...errors, ...layouts.map((l) => l?.[1]), leaf[1]]
 		.filter((n) => typeof n === 'number')
-		.map((n) => `'${n}': () => ${create_client_import(manifest._.client.nodes?.[n], url)}`)
+		.map((n) => `'${n}': () => ${create_client_import(client.nodes?.[n], url)}`)
 		.join(',\n\t\t');
 
 	// stringified version of
@@ -60,36 +61,40 @@ function create_client_import(import_path, url) {
 /**
  * @param {string} resolved_path
  * @param {URL} url
- * @param {import('@sveltejs/kit').SSRManifest} manifest
+ * @param {SSRManifest} manifest
  * @returns {Promise<Response>}
  */
 export async function resolve_route(resolved_path, url, manifest) {
-	if (!manifest._.client.routes) {
+	if (!manifest._.client?.routes) {
 		return text('Server-side route resolution disabled', { status: 400 });
 	}
 
 	const matchers = await manifest._.matchers();
 	const result = find_route(resolved_path, manifest._.client.routes, matchers);
 
-	return create_server_routing_response(result?.route ?? null, result?.params ?? {}, url, manifest)
-		.response;
+	return create_server_routing_response(
+		result?.route ?? null,
+		result?.params ?? {},
+		url,
+		manifest._.client
+	).response;
 }
 
 /**
  * @param {import('types').SSRClientRoute | null} route
  * @param {Partial<Record<string, string>>} params
  * @param {URL} url
- * @param {import('@sveltejs/kit').SSRManifest} manifest
+ * @param {NonNullable<SSRManifest['_']['client']>} client
  * @returns {{response: Response, body: string}}
  */
-export function create_server_routing_response(route, params, url, manifest) {
+export function create_server_routing_response(route, params, url, client) {
 	const headers = new Headers({
 		'content-type': 'application/javascript; charset=utf-8'
 	});
 
 	if (route) {
-		const csr_route = generate_route_object(route, url, manifest);
-		const body = `${create_css_import(route, url, manifest)}\nexport const route = ${csr_route}; export const params = ${JSON.stringify(params)};`;
+		const csr_route = generate_route_object(route, url, client);
+		const body = `${create_css_import(route, url, client)}\nexport const route = ${csr_route}; export const params = ${JSON.stringify(params)};`;
 
 		return { response: text(body, { headers }), body };
 	} else {
@@ -105,17 +110,17 @@ export function create_server_routing_response(route, params, url, manifest) {
  *
  * @param {import('types').SSRClientRoute} route
  * @param {URL} url
- * @param {import('@sveltejs/kit').SSRManifest} manifest
+ * @param {NonNullable<SSRManifest['_']['client']>} client
  * @returns {string}
  */
-function create_css_import(route, url, manifest) {
+function create_css_import(route, url, client) {
 	const { errors, layouts, leaf } = route;
 
 	let css = '';
 
 	for (const node of [...errors, ...layouts.map((l) => l?.[1]), leaf[1]]) {
 		if (typeof node !== 'number') continue;
-		const node_css = manifest._.client.css?.[node];
+		const node_css = client.css?.[node];
 		for (const css_path of node_css ?? []) {
 			css += `'${assets || base}/${css_path}',`;
 		}
@@ -123,5 +128,5 @@ function create_css_import(route, url, manifest) {
 
 	if (!css) return '';
 
-	return `${create_client_import(/** @type {string} */ (manifest._.client.start), url)}.then(x => x.load_css([${css}]));`;
+	return `${create_client_import(client.start, url)}.then(x => x.load_css([${css}]));`;
 }