@sveltejs/kit 3.0.0-next.0 → 3.0.0-next.10

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 { 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';
@@ -14,6 +14,13 @@ import { DEV } from 'esm-env';
 import { record_span } from '../telemetry/record_span.js';
 import { deserialize_binary_form } from '../form-utils.js';
 
+/**
+ * How long (in milliseconds) to wait after the last message was sent before
+ * sending a `: keep-alive` SSE comment, to prevent proxies/load balancers with
+ * an idle timeout from closing an otherwise-quiet `query.live` connection.
+ */
+const KEEP_ALIVE_INTERVAL = 30_000;
+
 /** @type {typeof handle_remote_call_internal} */
 export async function handle_remote_call(event, state, options, manifest, id) {
 	return record_span({
@@ -41,10 +48,10 @@ async function handle_remote_call_internal(event, state, options, manifest, id)
 	const [hash, name, additional_args] = id.split('/');
 	const remotes = manifest._.remotes;
 
-	if (!remotes[hash]) error(404);
+	if (!Object.hasOwn(remotes, hash)) error(404);
 
 	const module = await remotes[hash]();
-	const fn = module.default[name];
+	const fn = Object.hasOwn(module.default, name) ? module.default[name] : undefined;
 
 	if (!fn) error(404);
 
@@ -57,278 +64,400 @@ async function handle_remote_call_internal(event, state, options, manifest, id)
 		'sveltekit.remote.call.name': internals.name
 	});
 
+	/** @type {HeadersInit | undefined} */
+	const headers = state.prerendering ? undefined : { 'cache-control': 'private, no-store' };
+
 	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 encoder = new TextEncoder();
+
+				let closed = false;
+
+				/** @type {ReturnType<typeof setTimeout> | undefined} */
+				let keep_alive;
+
+				/**
+				 * (Re)schedule the keep-alive comment. Called whenever a message is sent, so
+				 * that a keep-alive is only emitted once `KEEP_ALIVE_INTERVAL` has elapsed
+				 * without any other activity.
+				 * @param {ReadableStreamDefaultController} controller
+				 */
+				function schedule_keep_alive(controller) {
+					clearTimeout(keep_alive);
+					keep_alive = setTimeout(() => {
+						if (closed || event.request.signal.aborted) return;
+						// SSE comments (lines starting with `:`) are ignored by the client
+						controller.enqueue(encoder.encode(': keep-alive\n\n'));
+						schedule_keep_alive(controller);
+					}, KEEP_ALIVE_INTERVAL);
+				}
 
-			const args = await Promise.all(
-				payloads.map((payload) => parse_remote_arg(payload, transport))
-			);
+				/**
+				 * @param {ReadableStreamDefaultController} controller
+				 * @param {any} payload
+				 */
+				function send(controller, payload) {
+					controller.enqueue(encoder.encode('data: ' + JSON.stringify(payload) + '\n\n'));
+					schedule_keep_alive(controller);
+				}
 
-			const results = await with_request_store({ event, state }, () =>
-				internals.run(args, options)
-			);
+				/** @type {string | undefined} */
+				let result = undefined;
 
-			return json(
-				/** @type {RemoteFunctionResponse} */ ({
-					type: 'result',
-					result: stringify(results, transport)
-				})
-			);
-		}
+				async function cancel() {
+					if (closed) return;
+					closed = true;
+					clearTimeout(keep_alive);
+					await generator.return(undefined);
+				}
+
+				event.request.signal.addEventListener('abort', cancel, { once: true });
+
+				return new Response(
+					new ReadableStream({
+						start(controller) {
+							schedule_keep_alive(controller);
+						},
+						async pull(controller) {
+							if (event.request.signal.aborted) {
+								await cancel();
+								controller.close();
+								return;
+							}
+
+							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 transformed = await handle_error_and_jsonify(
+											event,
+											state,
+											options,
+											error
+										);
+
+										send(controller, {
+											type: 'error',
+											error: transformed
+										});
+									}
+								}
 
-		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}`
+								await cancel();
+								controller.close();
+							}
+						},
+						cancel
+					}),
+					{
+						headers: {
+							'cache-control': 'private, no-store',
+							'content-type': 'text/event-stream'
+						}
+					}
 				);
 			}
 
-			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'
-					)}`
+			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}`
+					);
+				}
+
+				/** @type {{ payloads: string[] }} */
+				const { payloads } = await event.request.json();
+
+				const args = await Promise.all(
+					payloads.map((payload) => parse_remote_arg(payload, transport))
 				);
-			}
 
-			const { data, meta, form_data } = await deserialize_binary_form(event.request);
-			state.remote.requested = create_requested_map(meta.remote_refreshes);
+				data._ = await with_request_store({ event, state }, () => internals.run(args, options));
 
-			// 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));
+				break;
 			}
 
-			const fn = internals.fn;
-			const result = await with_request_store({ event, state }, () => fn(data, meta, form_data));
+			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}`
+					);
+				}
 
-			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)
-				})
-			);
-		}
+				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'
+						)}`
+					);
+				}
 
-		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));
+				const { data: input, meta, form_data } = await deserialize_binary_form(event.request);
+				state.remote.requested = create_requested_map(meta.remote_refreshes);
 
-			return json(
-				/** @type {RemoteFunctionResponse} */ ({
-					type: 'result',
-					result: stringify(data, transport),
-					refreshes: await serialize_singleflight(state.remote.refreshes),
-					reconnects: await serialize_singleflight(state.remote.reconnects)
-				})
-			);
-		}
+				// 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));
+				}
 
-		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 fn = internals.fn;
+				data._ = await with_request_store(
+					{ event, state: { ...state, is_in_remote_form_or_command: true } },
+					() => fn(input, meta, form_data)
 				);
-			}
-
-			const payload = /** @type {string} */ (
-				new URL(event.request.url).searchParams.get('payload')
-			);
 
-			const generator = internals.run(event, state, parse_remote_arg(payload, transport));
-
-			const encoder = new TextEncoder();
+				if (data._.issues) {
+					// special case — don't serialize refreshes/reconnects
+					return json(
+						/** @type {RemoteFunctionResponse} */ ({
+							type: 'result',
+							data: stringify(data, transport)
+						}),
+						{ headers }
+					);
+				}
 
-			/**
-			 * @param {ReadableStreamDefaultController} controller
-			 * @param {any} payload
-			 */
-			function send(controller, payload) {
-				controller.enqueue(encoder.encode(JSON.stringify(payload) + '\n'));
+				break;
 			}
 
-			let closed = false;
+			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);
 
-			/** @type {string | undefined} */
-			let result = undefined;
+				data._ = await with_request_store(
+					{ event, state: { ...state, is_in_remote_form_or_command: true } },
+					() => fn(arg)
+				);
 
-			async function cancel() {
-				if (closed) return;
-				closed = true;
-				await generator.return(undefined);
+				break;
 			}
 
-			event.request.signal.addEventListener('abort', cancel, { once: true });
-
-			return new Response(
-				new ReadableStream({
-					async pull(controller) {
-						if (event.request.signal.aborted) {
-							await cancel();
-							controller.close();
-							return;
-						}
-
-						try {
-							while (true) {
-								const { value, done } = await generator.next();
+			case 'prerender': {
+				data._ = await with_request_store({ event, state }, () =>
+					fn(parse_remote_arg(additional_args, transport))
+				);
 
-								if (done) {
-									await cancel();
-									controller.close();
-									return;
-								}
+				break;
+			}
 
-								// only send changed data
-								if (result !== (result = stringify(value, transport))) {
-									send(controller, {
-										type: 'result',
-										result
-									});
+			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')
+				);
 
-									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
-									});
-								}
-							}
+				data._ = await with_request_store({ event, state }, () =>
+					fn(parse_remote_arg(payload, transport))
+				);
 
-							await cancel();
-							controller.close();
-						}
-					},
-					cancel
-				}),
-				{
-					headers: {
-						'cache-control': 'private, no-store',
-						'content-type': 'application/x-ndjson'
-					}
-				}
-			);
+				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)
+			}),
+			{ headers }
 		);
 	} 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)
+				}),
+				{ headers }
 			);
 		}
 
-		const status =
-			error instanceof HttpError || error instanceof SvelteKitError ? error.status : 500;
+		const transformed = await handle_error_and_jsonify(event, state, options, error);
 
 		return json(
 			/** @type {RemoteFunctionResponse} */ ({
 				type: 'error',
-				error: await handle_error_and_jsonify(event, state, options, error),
-				status
+				error: transformed
 			}),
 			{
 				// By setting a non-200 during prerendering we fail the prerender process (unless handleHttpError handles it).
 				// Errors at runtime will be passed to the client and are handled there
-				status: state.prerendering ? status : undefined,
+				status: state.prerendering ? transformed.status : undefined,
 				headers: {
 					'cache-control': 'private, no-store'
 				}
 			}
 		);
 	}
+}
 
-	/** @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<App.Error>}
+	 */
+	function convert_error(error) {
+		// TODO 4.0 remove the `Promise.resolve(...)`
+		return Promise.resolve(handle_error_and_jsonify(event, state, options, error));
+	}
+
+	/** @type {Promise<any>[]} */
+	const promises = [];
+
+	if (state.remote.explicit) {
+		for (const [remote_key, { internals, fn }] 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 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)
+			const type = /** @type {'p' | 'q' | 'l'} */ (
+				internals.type === 'query_live' ? 'l' : internals.type[0]
+			);
+
+			// `fn` is deferred until now so the query runs after any state mutations
+			// in the command/form body. If the query was re-awaited in the meantime,
+			// `fn` returns the existing (fresh) cache entry rather than re-running.
+			// Kick off the query immediately and collect the promise so that multiple
+			// explicit refreshes run concurrently rather than serially.
+			const promise = fn();
+
+			promises.push(
+				promise.then(
+					(v) => {
+						((data[type] ??= {})[remote_key] ??= {}).v = v;
+					},
+					async (e) => {
+						if (e instanceof Redirect) {
+							// already handled elsewhere
+							return;
 						}
-					];
-				}
-			})
-		);
 
-		return stringify(Object.fromEntries(results), transport);
+						((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);
+
+				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,11 +506,16 @@ 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]?.();
+	const module = Object.hasOwn(remotes, hash) ? await remotes[hash]() : undefined;
 
-	let form = /** @type {RemoteForm<any, any>} */ (module?.default[name]);
+	let form = /** @type {RemoteForm<any, any>} */ (
+		module && Object.hasOwn(module.default, name) ? module.default[name] : undefined
+	);
 
 	if (!form) {
 		event.setHeaders({
@@ -391,6 +525,7 @@ async function handle_remote_form_post_internal(event, state, manifest, id) {
 		});
 		return {
 			type: 'error',
+			// We're lying a bit with the types here; this will be transformed into a proper App.Error object later
 			error: new SvelteKitError(
 				405,
 				'Method Not Allowed',
@@ -413,7 +548,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.
@@ -434,6 +572,7 @@ async function handle_remote_form_post_internal(event, state, manifest, id) {
 
 		return {
 			type: 'error',
+			// @ts-expect-error We're lying a bit with the types here; this will be transformed into a proper App.Error object later
 			error: check_incorrect_fail_use(err)
 		};
 	}