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

package/src/runtime/server/remote.js

@@ -1,12 +1,12 @@
 /** @import { ActionResult, RemoteForm, RequestEvent, SSRManifest } from '@sveltejs/kit' */
-/** @import { RemoteFormInternals, RemoteFunctionResponse, RemoteInternals, RequestState, SSROptions } from 'types' */
+/** @import { RemoteFormInternals, RemoteFunctionData, RemoteFunctionResponse, RemoteInternals, RequestState, SSROptions } from 'types' */
 
 import { json, error } from '@sveltejs/kit';
 import { HttpError, Redirect, SvelteKitError } from '@sveltejs/kit/internal';
 import { with_request_store, merge_tracing } from '@sveltejs/kit/internal/server';
 import { app_dir, base } from '$app/paths/internal/server';
 import { is_form_content_type } from '../../utils/http.js';
-import { parse_remote_arg, split_remote_key, stringify } from '../shared.js';
+import { create_remote_key, parse_remote_arg, split_remote_key, stringify } from '../shared.js';
 import { handle_error_and_jsonify } from './utils.js';
 import { normalize_error } from '../../utils/error.js';
 import { check_incorrect_fail_use } from './page/actions.js';
@@ -58,225 +58,233 @@ async function handle_remote_call_internal(event, state, options, manifest, id)
 	});
 
 	try {
-		if (internals.type === 'query_batch') {
-			if (event.request.method !== 'POST') {
-				throw new SvelteKitError(
-					405,
-					'Method Not Allowed',
-					`\`query.batch\` functions must be invoked via POST request, not ${event.request.method}`
+		/** @type {RemoteFunctionData} */
+		const data = {};
+
+		switch (internals.type) {
+			case 'query_live': {
+				if (event.request.method !== 'GET') {
+					throw new SvelteKitError(
+						405,
+						'Method Not Allowed',
+						`\`query.live\` functions must be invoked via GET request, not ${event.request.method}`
+					);
+				}
+
+				const payload = /** @type {string} */ (
+					new URL(event.request.url).searchParams.get('payload')
 				);
-			}
 
-			/** @type {{ payloads: string[] }} */
-			const { payloads } = await event.request.json();
+				const generator = internals.run(event, state, parse_remote_arg(payload, transport));
 
-			const args = await Promise.all(
-				payloads.map((payload) => parse_remote_arg(payload, transport))
-			);
+				const encoder = new TextEncoder();
 
-			const results = await with_request_store({ event, state }, () =>
-				internals.run(args, options)
-			);
+				/**
+				 * @param {ReadableStreamDefaultController} controller
+				 * @param {any} payload
+				 */
+				function send(controller, payload) {
+					controller.enqueue(encoder.encode('data: ' + JSON.stringify(payload) + '\n\n'));
+				}
 
-			return json(
-				/** @type {RemoteFunctionResponse} */ ({
-					type: 'result',
-					result: stringify(results, transport)
-				})
-			);
-		}
+				let closed = false;
 
-		if (internals.type === 'form') {
-			if (event.request.method !== 'POST') {
-				throw new SvelteKitError(
-					405,
-					'Method Not Allowed',
-					`\`form\` functions must be invoked via POST request, not ${event.request.method}`
-				);
-			}
+				/** @type {string | undefined} */
+				let result = undefined;
 
-			if (!is_form_content_type(event.request)) {
-				throw new SvelteKitError(
-					415,
-					'Unsupported Media Type',
-					`\`form\` functions expect form-encoded data — received ${event.request.headers.get(
-						'content-type'
-					)}`
-				);
-			}
+				async function cancel() {
+					if (closed) return;
+					closed = true;
+					await generator.return(undefined);
+				}
 
-			const { data, meta, form_data } = await deserialize_binary_form(event.request);
-			state.remote.requested = create_requested_map(meta.remote_refreshes);
+				event.request.signal.addEventListener('abort', cancel, { once: true });
 
-			// If this is a keyed form instance (created via form.for(key)), add the key to the form data (unless already set)
-			// Note that additional_args will only be set if the form is not enhanced, as enhanced forms transfer the key inside `data`.
-			if (additional_args && !('id' in data)) {
-				data.id = JSON.parse(decodeURIComponent(additional_args));
-			}
+				return new Response(
+					new ReadableStream({
+						async pull(controller) {
+							if (event.request.signal.aborted) {
+								await cancel();
+								controller.close();
+								return;
+							}
 
-			const fn = internals.fn;
-			const result = await with_request_store({ event, state }, () => fn(data, meta, form_data));
+							try {
+								while (true) {
+									const { value, done } = await generator.next();
+
+									if (done) {
+										await cancel();
+										controller.close();
+										return;
+									}
+
+									// only send changed data
+									if (result !== (result = stringify(value, transport))) {
+										send(controller, {
+											type: 'result',
+											result
+										});
+
+										return;
+									}
+								}
+							} catch (error) {
+								if (!event.request.signal.aborted) {
+									if (error instanceof Redirect) {
+										send(controller, {
+											type: 'redirect',
+											location: error.location
+										});
+									} else {
+										const status =
+											error instanceof HttpError || error instanceof SvelteKitError
+												? error.status
+												: 500;
+
+										send(controller, {
+											type: 'error',
+											error: await handle_error_and_jsonify(event, state, options, error),
+											status
+										});
+									}
+								}
 
-			return json(
-				/** @type {RemoteFunctionResponse} */ ({
-					type: 'result',
-					result: stringify(result, transport),
-					refreshes: result.issues
-						? undefined
-						: await serialize_singleflight(state.remote.refreshes),
-					reconnects: result.issues
-						? undefined
-						: await serialize_singleflight(state.remote.reconnects)
-				})
-			);
-		}
+								await cancel();
+								controller.close();
+							}
+						},
+						cancel
+					}),
+					{
+						headers: {
+							'cache-control': 'private, no-store',
+							'content-type': 'text/event-stream'
+						}
+					}
+				);
+			}
 
-		if (internals.type === 'command') {
-			/** @type {{ payload: string, refreshes?: string[] }} */
-			const { payload, refreshes } = await event.request.json();
-			state.remote.requested = create_requested_map(refreshes);
-			const arg = parse_remote_arg(payload, transport);
-			const data = await with_request_store({ event, state }, () => fn(arg));
+			case 'query_batch': {
+				if (event.request.method !== 'POST') {
+					throw new SvelteKitError(
+						405,
+						'Method Not Allowed',
+						`\`query.batch\` functions must be invoked via POST request, not ${event.request.method}`
+					);
+				}
 
-			return json(
-				/** @type {RemoteFunctionResponse} */ ({
-					type: 'result',
-					result: stringify(data, transport),
-					refreshes: await serialize_singleflight(state.remote.refreshes),
-					reconnects: await serialize_singleflight(state.remote.reconnects)
-				})
-			);
-		}
+				/** @type {{ payloads: string[] }} */
+				const { payloads } = await event.request.json();
 
-		if (internals.type === 'query_live') {
-			if (event.request.method !== 'GET') {
-				throw new SvelteKitError(
-					405,
-					'Method Not Allowed',
-					`\`query.live\` functions must be invoked via GET request, not ${event.request.method}`
+				const args = await Promise.all(
+					payloads.map((payload) => parse_remote_arg(payload, transport))
 				);
+
+				data._ = await with_request_store({ event, state }, () => internals.run(args, options));
+
+				break;
 			}
 
-			const payload = /** @type {string} */ (
-				new URL(event.request.url).searchParams.get('payload')
-			);
+			case 'form': {
+				if (event.request.method !== 'POST') {
+					throw new SvelteKitError(
+						405,
+						'Method Not Allowed',
+						`\`form\` functions must be invoked via POST request, not ${event.request.method}`
+					);
+				}
 
-			const generator = internals.run(event, state, parse_remote_arg(payload, transport));
+				if (!is_form_content_type(event.request)) {
+					throw new SvelteKitError(
+						415,
+						'Unsupported Media Type',
+						`\`form\` functions expect form-encoded data — received ${event.request.headers.get(
+							'content-type'
+						)}`
+					);
+				}
 
-			const encoder = new TextEncoder();
+				const { data: input, meta, form_data } = await deserialize_binary_form(event.request);
+				state.remote.requested = create_requested_map(meta.remote_refreshes);
 
-			/**
-			 * @param {ReadableStreamDefaultController} controller
-			 * @param {any} payload
-			 */
-			function send(controller, payload) {
-				controller.enqueue(encoder.encode('data: ' + JSON.stringify(payload) + '\n\n'));
-			}
+				// If this is a keyed form instance (created via form.for(key)), add the key to the form data (unless already set)
+				// Note that additional_args will only be set if the form is not enhanced, as enhanced forms transfer the key inside `data`.
+				if (additional_args && !('id' in input)) {
+					input.id = JSON.parse(decodeURIComponent(additional_args));
+				}
 
-			let closed = false;
+				const fn = internals.fn;
+				data._ = await with_request_store(
+					{ event, state: { ...state, is_in_remote_form_or_command: true } },
+					() => fn(input, meta, form_data)
+				);
 
-			/** @type {string | undefined} */
-			let result = undefined;
+				if (data._.issues) {
+					// special case — don't serialize refreshes/reconnects
+					return json(
+						/** @type {RemoteFunctionResponse} */ ({
+							type: 'result',
+							data: stringify(data, transport)
+						})
+					);
+				}
 
-			async function cancel() {
-				if (closed) return;
-				closed = true;
-				await generator.return(undefined);
+				break;
 			}
 
-			event.request.signal.addEventListener('abort', cancel, { once: true });
+			case 'command': {
+				/** @type {{ payload: string, refreshes?: string[] }} */
+				const { payload, refreshes } = await event.request.json();
+				state.remote.requested = create_requested_map(refreshes);
+				const arg = parse_remote_arg(payload, transport);
 
-			return new Response(
-				new ReadableStream({
-					async pull(controller) {
-						if (event.request.signal.aborted) {
-							await cancel();
-							controller.close();
-							return;
-						}
+				data._ = await with_request_store(
+					{ event, state: { ...state, is_in_remote_form_or_command: true } },
+					() => fn(arg)
+				);
 
-						try {
-							while (true) {
-								const { value, done } = await generator.next();
+				break;
+			}
 
-								if (done) {
-									await cancel();
-									controller.close();
-									return;
-								}
+			case 'prerender': {
+				data._ = await with_request_store({ event, state }, () =>
+					fn(parse_remote_arg(additional_args, transport))
+				);
 
-								// only send changed data
-								if (result !== (result = stringify(value, transport))) {
-									send(controller, {
-										type: 'result',
-										result
-									});
+				break;
+			}
 
-									return;
-								}
-							}
-						} catch (error) {
-							if (!event.request.signal.aborted) {
-								if (error instanceof Redirect) {
-									send(controller, {
-										type: 'redirect',
-										location: error.location
-									});
-								} else {
-									const status =
-										error instanceof HttpError || error instanceof SvelteKitError
-											? error.status
-											: 500;
-
-									send(controller, {
-										type: 'error',
-										error: await handle_error_and_jsonify(event, state, options, error),
-										status
-									});
-								}
-							}
+			case 'query': {
+				const payload = /** @type {string} */ (
+					// new URL(...) necessary because we're hiding the URL from the user in the event object
+					new URL(event.request.url).searchParams.get('payload')
+				);
 
-							await cancel();
-							controller.close();
-						}
-					},
-					cancel
-				}),
-				{
-					headers: {
-						'cache-control': 'private, no-store',
-						'content-type': 'text/event-stream'
-					}
-				}
-			);
+				data._ = await with_request_store({ event, state }, () =>
+					fn(parse_remote_arg(payload, transport))
+				);
+
+				break;
+			}
 		}
 
-		const payload =
-			internals.type === 'prerender'
-				? additional_args
-				: /** @type {string} */ (
-						// new URL(...) necessary because we're hiding the URL from the user in the event object
-						new URL(event.request.url).searchParams.get('payload')
-					);
-
-		const data = await with_request_store({ event, state }, () =>
-			fn(parse_remote_arg(payload, transport))
-		);
+		await collect_remote_data(data, event, state, options);
 
 		return json(
 			/** @type {RemoteFunctionResponse} */ ({
 				type: 'result',
-				result: stringify(data, transport)
+				data: stringify(data, transport)
 			})
 		);
 	} catch (error) {
 		if (error instanceof Redirect) {
+			const data = await collect_remote_data({ redirect: error.location }, event, state, options);
+
 			return json(
 				/** @type {RemoteFunctionResponse} */ ({
-					type: 'redirect',
-					location: error.location,
-					refreshes: await serialize_singleflight(state.remote.refreshes),
-					reconnects: await serialize_singleflight(state.remote.reconnects)
+					type: 'result',
+					data: stringify(data, transport)
 				})
 			);
 		}
@@ -300,35 +308,113 @@ async function handle_remote_call_internal(event, state, options, manifest, id)
 			}
 		);
 	}
+}
 
-	/** @param {Map<string, Promise<any>> | null} map */
-	async function serialize_singleflight(map) {
-		if (!map || map.size === 0) {
-			return undefined;
-		}
+/**
+ * Collects all the query/prerender data that was retrieved
+ * during the request and adds it to `data`
+ * @param {RemoteFunctionData} data
+ * @param {RequestEvent} event
+ * @param {RequestState} state
+ * @param {SSROptions} options
+ */
+export async function collect_remote_data(data, event, state, options) {
+	/**
+	 *
+	 * @param {unknown} error
+	 * @returns {Promise<[status: number, error: App.Error]>}
+	 */
+	async function convert_error(error) {
+		const status =
+			error instanceof HttpError || error instanceof SvelteKitError ? error.status : 500;
 
-		const results = await Promise.all(
-			Array.from(map, async ([key, promise]) => {
-				try {
-					return [key, { type: 'result', data: await promise }];
-				} catch (error) {
-					const status =
-						error instanceof HttpError || error instanceof SvelteKitError ? error.status : 500;
-
-					return [
-						key,
-						{
-							type: 'error',
-							status,
-							error: await handle_error_and_jsonify(event, state, options, error)
-						}
-					];
+		return [status, await handle_error_and_jsonify(event, state, options, error)];
+	}
+
+	/** @type {Promise<any>[]} */
+	const promises = [];
+
+	if (state.remote.explicit) {
+		for (const [remote_key, { internals, promise }] of state.remote.explicit) {
+			// there were explicit refreshes/reconnects (via `refresh()`/`set()`/`reconnect()`),
+			// so the client should apply these single-flight updates instead of calling `invalidateAll()`
+			data.r = true;
+
+			const type = /** @type {'p' | 'q' | 'l'} */ (
+				internals.type === 'query_live' ? 'l' : internals.type[0]
+			);
+
+			await promise.then(
+				(v) => {
+					((data[type] ??= {})[remote_key] ??= {}).v = v;
+				},
+				async (e) => {
+					if (e instanceof Redirect) {
+						// already handled elsewhere
+						return;
+					}
+
+					((data[type] ??= {})[remote_key] ??= {}).e = await convert_error(e);
 				}
-			})
-		);
+			);
+		}
+	}
+
+	await Promise.all(promises);
+
+	if (state.remote.implicit) {
+		for (const [internals, record] of state.remote.implicit) {
+			// Private (non-exported) remote functions have no `id` and must never be
+			// serialized into the response — otherwise their (potentially private) result
+			// would be shipped to the client under a malformed `undefined/...` key.
+			if (!internals.id) continue;
+
+			for (const key in record) {
+				// form outputs are registered under the client-side action id directly
+				const remote_key = internals.type === 'form' ? key : create_remote_key(internals.id, key);
 
-		return stringify(Object.fromEntries(results), transport);
+				const type = /** @type {'p' | 'q' | 'l' | 'f'} */ (
+					internals.type === 'query_live' ? 'l' : internals.type[0]
+				);
+
+				const promise = state.remote.data?.get(internals)?.[key] ?? record[key]();
+
+				// If the promise is still pending (e.g. the query was rendered in its loading
+				// state during SSR), omit it from the payload entirely so that the client
+				// fetches it itself — an entry without `v`/`e` would hydrate as `undefined`.
+				let resolved = true;
+
+				await Promise.race([
+					Promise.resolve(promise).then(
+						(v) => {
+							if (resolved) {
+								((data[type] ??= {})[remote_key] ??= {}).v = v;
+							}
+						},
+						(e) => {
+							if (e instanceof Redirect) {
+								// already handled elsewhere
+								return;
+							}
+
+							if (resolved) {
+								promises.push(
+									convert_error(e).then((e) => {
+										((data[type] ??= {})[remote_key] ??= {}).e = e;
+									})
+								);
+							}
+						}
+					),
+					Promise.resolve().then(() => (resolved = false))
+				]);
+			}
+		}
 	}
+
+	await Promise.all(promises);
+
+	return data;
 }
 
 /**
@@ -377,7 +463,10 @@ export async function handle_remote_form_post(event, state, manifest, id) {
  * @returns {Promise<ActionResult>}
  */
 async function handle_remote_form_post_internal(event, state, manifest, id) {
-	const [hash, name, action_id] = id.split('/');
+	// `hash` and `name` can never contain a `/`, but the JSON-stringified key of a
+	// keyed (`form.for(key)`) instance can — rejoin the remaining segments
+	const [hash, name, ...rest] = id.split('/');
+	const action_id = rest.join('/');
 	const remotes = manifest._.remotes;
 	const module = await remotes[hash]?.();
 
@@ -413,7 +502,10 @@ async function handle_remote_form_post_internal(event, state, manifest, id) {
 			data.id = JSON.parse(decodeURIComponent(action_id));
 		}
 
-		await with_request_store({ event, state }, () => fn(data, meta, form_data));
+		await with_request_store(
+			{ event, state: { ...state, is_in_remote_form_or_command: true } },
+			() => fn(data, meta, form_data)
+		);
 
 		// We don't want the data to appear on `let { form } = $props()`, which is why we're not returning it.
 		// It is instead available on `myForm.result`, setting of which happens within the remote `form` function.

package/src/runtime/server/respond.js

@@ -147,14 +147,16 @@ export async function internal_respond(request, options, manifest, state) {
 		},
 		remote: {
 			data: null,
+			explicit: null,
+			implicit: null,
 			forms: null,
-			refreshes: null,
 			requested: null,
-			reconnects: null,
 			batches: null,
 			live_iterators: null
 		},
 		is_in_remote_function: false,
+		is_in_remote_form_or_command: false,
+		is_in_remote_query: false,
 		is_in_render: false,
 		is_in_universal_load: false
 	};

package/src/types/global-private.d.ts

@@ -1,3 +1,5 @@
+import { RemoteFunctionData } from 'types';
+
 declare global {
 	const __SVELTEKIT_ADAPTER_NAME__: string;
 	const __SVELTEKIT_APP_DIR__: string;
@@ -40,9 +42,7 @@ declare global {
 		/** Public environment variables */
 		env?: Record<string, string>;
 		/** Serialized data from query/form/command functions */
-		query?: Record<string, any>;
-		/** Serialized data from prerender functions */
-		prerender?: Record<string, any>;
+		data?: RemoteFunctionData;
 		/** Create a placeholder promise */
 		defer?: (id: number) => Promise<any>;
 		/** Resolve a placeholder promise */