@sveltejs/kit 3.0.0-next.23 → 3.0.0-next.24

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

@@ -1,8 +1,7 @@
 /** @import { RequestEvent, Actions } from '@sveltejs/kit' */
 /** @import { ActionResult } from '$app/forms' */
-/** @import { SSROptions, SSRNode, ServerNode } from 'types' */
+/** @import { SSROptions, SSRNode, ServerNode, ServerActionResult } from 'types' */
 import { DEV } from 'esm-env';
-import { json } from '@sveltejs/kit';
 import { HttpError, Redirect, ActionFailure, SvelteKitError } from '@sveltejs/kit/internal';
 import { with_request_store, merge_tracing, record_span } from '@sveltejs/kit/internal/server';
 import { normalize_error } from '../../../utils/error.js';
@@ -28,98 +27,44 @@ export function is_action_json_request(event) {
  * @param {SSRNode['server'] | undefined} server
  */
 export async function handle_action_json_request(event, state, options, server) {
-	const actions = server?.actions;
-	const location = get_action_location(event.url);
-
-	if (!actions) {
-		const no_actions_error = new SvelteKitError(
-			405,
-			'Method Not Allowed',
-			`POST method not allowed. No form actions exist for ${DEV ? `the page at ${event.route.id}` : 'this page'}`
-		);
+	const result = await handle_action_request(event, state, server);
+	return action_result_json(event, state, options, result);
+}
 
-		const error = await handle_error_and_jsonify(event, state, options, no_actions_error);
+/**
+ * @param {RequestEvent} event
+ * @param {import('types').RequestState} state
+ * @param {SSROptions} options
+ * @param {ServerActionResult} result
+ * @returns {Promise<Response>}
+ */
+async function action_result_json(event, state, options, result) {
+	if (result.type === 'redirect') {
+		return action_json(result);
+	}
 
-		return action_json(
-			{
-				type: 'error',
-				error,
-				location
-			},
-			{
-				status: error.status,
-				headers: {
-					// https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/405
-					// "The server must generate an Allow header field in a 405 status code response"
-					allow: 'GET'
-				}
-			}
-		);
+	if (result.type === 'error') {
+		const error = await handle_error_and_jsonify(event, state, options, result.error);
+		return action_json({ ...result, error }, { status: error.status });
 	}
 
-	check_named_default_separate(actions);
+	if (result.type === 'success' && !result.data) {
+		return action_json({ ...result, status: 204, data: undefined });
+	}
 
 	try {
-		const data = await call_action(event, state, actions);
-
-		if (DEV) {
-			validate_action_return(data);
-		}
-
-		if (data instanceof ActionFailure) {
-			return action_json(
-				{
-					type: 'failure',
-					status: data.status,
-					location,
-					// @ts-expect-error we assign a string to what is supposed to be an object. That's ok
-					// because we don't use the object outside, and this way we have better code navigation
-					// through knowing where the related interface is used.
-					data: try_serialize(data.data, stringify, /** @type {string} */ (event.route.id))
-				},
-				{
-					status: data.status
-				}
-			);
-		} else if (data) {
-			return action_json({
-				type: 'success',
-				status: 200,
-				location,
-				// @ts-expect-error see comment above
-				data: try_serialize(data, stringify, /** @type {string} */ (event.route.id))
-			});
-		} else {
-			return action_json({
-				type: 'success',
-				status: 204,
-				location
-			});
-		}
-	} catch (e) {
-		const err = normalize_error(e);
-
-		if (err instanceof Redirect) {
-			return action_json_redirect(err);
-		}
-
-		const transformed = await handle_error_and_jsonify(
-			event,
-			state,
-			options,
-			check_incorrect_fail_use(err)
-		);
-
 		return action_json(
 			{
-				type: 'error',
-				error: transformed,
-				location
+				...result,
+				// @ts-expect-error we assign a string to what is supposed to be an object. That's ok
+				// because we don't use the object outside, and this way we have better code navigation
+				// through knowing where the related interface is used.
+				data: try_serialize(result.data, stringify, /** @type {string} */ (event.route.id))
 			},
-			{
-				status: transformed.status
-			}
+			{ status: result.status }
 		);
+	} catch (e) {
+		return action_result_json(event, state, options, action_error_result(e, result.location));
 	}
 }
 
@@ -140,12 +85,48 @@ export function get_action_location(url) {
 }
 
 /**
- * @param {HttpError | Error} error
+ * @param {RequestEvent} event
+ * @param {string} location
+ * @returns {Extract<ServerActionResult, { type: 'error' }>}
  */
-export function check_incorrect_fail_use(error) {
-	return error instanceof ActionFailure
-		? new Error('Cannot "throw fail()". Use "return fail()"')
-		: error;
+export function method_not_allowed_result(event, location) {
+	event.setHeaders({
+		// https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/405
+		// "The server must generate an Allow header field in a 405 status code response"
+		allow: 'GET'
+	});
+	return {
+		type: 'error',
+		location,
+		error: new SvelteKitError(
+			405,
+			'Method Not Allowed',
+			`POST method not allowed. No form actions exist for ${DEV ? `the page at ${event.route.id}` : 'this page'}`
+		)
+	};
+}
+
+/**
+ * @param {unknown} e
+ * @param {string} location
+ * @returns {Extract<ServerActionResult, { type: 'redirect' | 'error' }>}
+ */
+export function action_error_result(e, location) {
+	const err = normalize_error(e);
+
+	if (err instanceof Redirect) {
+		return {
+			type: 'redirect',
+			status: err.status,
+			location: err.location
+		};
+	}
+
+	return {
+		type: 'error',
+		location,
+		error: err
+	};
 }
 
 /**
@@ -164,7 +145,7 @@ export function action_json_redirect(redirect) {
  * @param {ResponseInit} [init]
  */
 function action_json(data, init) {
-	return with_version_header(json(data, init));
+	return with_version_header(Response.json(data, init));
 }
 
 /**
@@ -178,7 +159,7 @@ export function is_action_request(event) {
  * @param {RequestEvent} event
  * @param {import('types').RequestState} state
  * @param {SSRNode['server'] | undefined} server
- * @returns {Promise<ActionResult>}
+ * @returns {Promise<ServerActionResult>}
  */
 export async function handle_action_request(event, state, server) {
 	const actions = server?.actions;
@@ -186,21 +167,7 @@ export async function handle_action_request(event, state, server) {
 
 	if (!actions) {
 		// TODO should this be a different error altogether?
-		event.setHeaders({
-			// https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/405
-			// "The server must generate an Allow header field in a 405 status code response"
-			allow: 'GET'
-		});
-		return {
-			type: 'error',
-			location,
-			// 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',
-				`POST method not allowed. No form actions exist for ${DEV ? `the page at ${event.route.id}` : 'this page'}`
-			)
-		};
+		return method_not_allowed_result(event, location);
 	}
 
 	check_named_default_separate(actions);
@@ -229,22 +196,10 @@ export async function handle_action_request(event, state, server) {
 			};
 		}
 	} catch (e) {
-		const err = normalize_error(e);
-
-		if (err instanceof Redirect) {
-			return {
-				type: 'redirect',
-				status: err.status,
-				location: err.location
-			};
-		}
-
-		return {
-			type: 'error',
-			location,
-			// @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)
-		};
+		return action_error_result(
+			e instanceof ActionFailure ? new Error('Cannot "throw fail()". Use "return fail()"') : e,
+			location
+		);
 	}
 }
 

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

@@ -1,6 +1,4 @@
-/** @import { Component } from 'svelte' */
 /** @import { RequestEvent, SSRManifest } from '@sveltejs/kit' */
-/** @import { ActionResult } from '$app/forms' */
 /** @import { PageNodeIndexes, RequestState, RequiredResolveOptions, ServerDataNode, SSRNode, SSROptions } from 'types' */
 import { text } from '@sveltejs/kit';
 import { Redirect } from '@sveltejs/kit/internal';
@@ -8,6 +6,7 @@ import { compact } from '../../../utils/array.js';
 import { get_status, normalize_error } from '../../../utils/error.js';
 import { noop } from '../../../utils/functions.js';
 import { add_data_suffix } from '../../pathname.js';
+import { build_error_chain, nearest_error_pages } from '../../error-chain.js';
 import { redirect_response } from '../utils.js';
 import { static_error_page, handle_error_and_jsonify } from '../errors.js';
 import {
@@ -57,7 +56,7 @@ export async function render_page(event, state, page, options, manifest, nodes,
 
 		let status = 200;
 
-		/** @type {ActionResult | undefined} */
+		/** @type {import('types').ServerActionResult | undefined} */
 		let action_result = undefined;
 
 		if (is_action_request(event)) {
@@ -278,42 +277,36 @@ export async function render_page(event, state, page, options, manifest, nodes,
 					const error = await handle_error_and_jsonify(event, state, options, err);
 					const status = error.status;
 
-					while (i--) {
-						if (page.errors[i]) {
-							const index = /** @type {number} */ (page.errors[i]);
-							const node = await manifest._.nodes[index]();
-
-							let j = i;
-							while (!branch[j]) j -= 1;
-
-							data_serializer.set_max_nodes(j + 1);
-
-							const layouts = compact(branch.slice(0, j + 1));
-							const nodes = new PageNodes(layouts.map((layout) => layout.node));
-							const error_branch = layouts.concat({
-								node,
-								data: null,
-								server_data: null
-							});
-
-							return await render_response({
-								event,
-								state,
-								options,
-								manifest,
-								resolve_opts,
-								page_config: {
-									ssr: nodes.ssr(),
-									csr: nodes.csr()
-								},
-								status,
-								error,
-								error_components: await load_error_components(ssr, error_branch, page, manifest),
-								branch: error_branch,
-								fetched,
-								data_serializer
-							});
-						}
+					for (const { error: index, idx } of nearest_error_pages(i, branch, page.errors)) {
+						const node = await manifest._.nodes[index]();
+
+						data_serializer.set_max_nodes(idx);
+
+						const layouts = compact(branch.slice(0, idx));
+						const nodes = new PageNodes(layouts.map((layout) => layout.node));
+						const error_branch = layouts.concat({
+							node,
+							data: null,
+							server_data: null
+						});
+
+						return await render_response({
+							event,
+							state,
+							options,
+							manifest,
+							resolve_opts,
+							page_config: {
+								ssr: nodes.ssr(),
+								csr: nodes.csr()
+							},
+							status,
+							error,
+							error_components: await load_error_components(ssr, error_branch, page, manifest),
+							branch: error_branch,
+							fetched,
+							data_serializer
+						});
 					}
 
 					// if we're still here, it means the error happened in the root layout,
@@ -386,35 +379,10 @@ export async function render_page(event, state, page, options, manifest, nodes,
  * @param {PageNodeIndexes} page
  * @param {SSRManifest} manifest
  */
-async function load_error_components(ssr, branch, page, manifest) {
-	/** @type {Array<Component | undefined> | undefined} */
-	let error_components;
-
-	if (ssr) {
-		let last_idx = -1;
-		error_components = await Promise.all(
-			// eslint-disable-next-line @typescript-eslint/await-thenable
-			branch
-				.map((b, i) => {
-					if (i === 0) return undefined; // root layout wraps root error component, not the other way around
-					if (!b) return null;
-
-					i--;
-					// Find the closest error component up to the previous branch
-					while (i > last_idx + 1 && page.errors[i] === undefined) i -= 1;
-					last_idx = i;
-
-					const idx = page.errors[i];
-					if (idx == null) return undefined;
-
-					return manifest._.nodes[idx]?.()
-						.then((e) => e.component?.())
-						.catch(() => undefined);
-				})
-				// filter out indexes where there was no branch, but keep indexes where there was a branch but no error component
-				.filter((e) => e !== null)
-		);
-	}
+function load_error_components(ssr, branch, page, manifest) {
+	if (!ssr) return undefined;
 
-	return error_components;
+	return build_error_chain(branch, page.errors, (idx) =>
+		manifest._.nodes[idx]?.().then((e) => e.component?.())
+	);
 }

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

@@ -21,7 +21,7 @@ import { try_get_request_store, with_request_store } from '@sveltejs/kit/interna
 import { text_encoder } from '../../utils.js';
 import { count_non_ssi_comments, get_global_name } from '../utils.js';
 import { handle_error_and_jsonify } from '../errors.js';
-import * as env from '__sveltekit/env';
+import * as env from '<sveltekit:generated>/env/config.js';
 import { collect_remote_data } from '../remote-functions.js';
 import Root from '../../components/root.svelte';
 import { render } from 'svelte/server';
@@ -43,7 +43,7 @@ import { has_custom_transporters, uneval } from '#app/internal/transport';
  *   event: import('@sveltejs/kit').RequestEvent;
  *   state: import('types').RequestState;
  *   resolve_opts: import('types').RequiredResolveOptions;
- *   action_result?: import('$app/forms').ActionResult;
+ *   action_result?: import('types').ServerActionResult;
  *   data_serializer: import('./types.js').ServerDataSerializer;
  *   error_components?: Array<import('svelte').Component | undefined>
  * }} opts
@@ -77,7 +77,9 @@ export async function render_response({
 
 	const modulepreloads = new Set(client?.imports);
 	const stylesheets = new Set(client?.stylesheets);
-	const fonts = new Set(client?.fonts);
+
+	/** @type {Map<string, import('types').FontDependency>} */
+	const fonts = new Map(client?.fonts.map((font) => [font.file, font]));
 
 	/**
 	 * The value of the Link header that is added to the response when not prerendering
@@ -90,7 +92,7 @@ export async function render_response({
 	const inline_styles = new Map();
 
 	// TODO `svelte/server` should expose `RenderOutput`
-	/** @type {{ head: string, body: string, hashes: { script: string[] } }} */
+	/** @type {Omit<Awaited<ReturnType<typeof render>>, 'html'>} */
 	let rendered;
 
 	const form_value =
@@ -156,7 +158,7 @@ export async function render_response({
 			tree: new RenderNode(
 				// TODO tidy up
 				/** @type {Component} */ (await branch[0].node.component?.()),
-				/** @type {Component} */ (error_components?.[1])
+				undefined
 			),
 			form: form_value,
 			error: error ?? undefined
@@ -176,7 +178,7 @@ export async function render_response({
 				current_node = current_node.child = new RenderNode(
 					// TODO tidy up
 					/** @type {Component} */ (await branch[i + 1].node.component?.()),
-					/** @type {Component} */ (error_components?.slice(0, i + 2).findLast((x) => x))
+					error_components?.[i + 1]
 				);
 			}
 		}
@@ -244,19 +246,12 @@ export async function render_response({
 			}
 
 			rendered = await with_request_store({ event, state: render_state }, async () => {
-				// We have to invoke .then eagerly here in order to kick off rendering: it's only starting on access,
-				// and `await maybe_promise` would eagerly access the .then property but call its function only after a tick, which is too late
-				// for the paths.reset() below and for any eager getRequestEvent() calls during rendering without AsyncLocalStorage available.
-				const rendered = render(Root, { ...render_opts, props });
-
-				const { head, body, hashes } = await rendered;
-
-				if (hashes) {
-					csp.add_script_hashes(hashes.script);
-				}
-
-				return { head, body, hashes };
+				return render(Root, { ...render_opts, props });
 			});
+
+			if (rendered.hashes) {
+				csp.add_script_hashes(rendered.hashes.script);
+			}
 		} finally {
 			if (DEV) {
 				globalThis.fetch = fetch;
@@ -269,7 +264,7 @@ export async function render_response({
 	for (const { node } of branch) {
 		for (const url of node.imports) modulepreloads.add(url);
 		for (const url of node.stylesheets) stylesheets.add(url);
-		for (const url of node.fonts) fonts.add(url);
+		for (const font of node.fonts) fonts.set(font.file, font);
 
 		if (node.inline_styles && !client?.inline) {
 			Object.entries(await node.inline_styles()).forEach(([filename, css]) => {
@@ -342,11 +337,11 @@ export async function render_response({
 		head.add_stylesheet(path, attributes);
 	}
 
-	for (const dep of fonts) {
-		const path = prefixed(dep);
+	for (const { file, filename } of fonts.values()) {
+		const path = prefixed(file);
 
-		if (resolve_opts.preload({ type: 'font', path })) {
-			const ext = dep.slice(dep.lastIndexOf('.') + 1);
+		if (resolve_opts.preload({ type: 'font', path, filename })) {
+			const ext = file.slice(file.lastIndexOf('.') + 1);
 
 			add_preload(path, ['rel="preload"', 'as="font"', `type="font/${ext}"`, 'crossorigin']);
 		}

package/src/runtime/server/remote-functions.js

@@ -1,9 +1,8 @@
 /** @import { RequestEvent, SSRManifest } from '@sveltejs/kit' */
 /** @import { RemoteForm } from '$app/server' */
-/** @import { ActionResult } from '$app/forms' */
-/** @import { RemoteFormInternals, RemoteFunctionData, RemoteFunctionResponse, RemoteInternals, RequestState, SSROptions } from 'types' */
+/** @import { RemoteFormInternals, RemoteFunctionData, RemoteFunctionResponse, RemoteInternals, RequestState, ServerActionResult, SSROptions } from 'types' */
 
-import { json, error } from '@sveltejs/kit';
+import { error } from '@sveltejs/kit';
 import { Redirect, SvelteKitError } from '@sveltejs/kit/internal';
 import { with_request_store, merge_tracing, record_span } from '@sveltejs/kit/internal/server';
 import { app_dir, base } from '#app/paths';
@@ -11,9 +10,11 @@ import { is_form_content_type } from '../../utils/http.js';
 import { create_remote_key, parse_remote_arg, split_remote_key } from '../shared.js';
 import { stringify } from '#app/internal/transport';
 import { handle_error_and_jsonify } from './errors.js';
-import { normalize_error } from '../../utils/error.js';
-import { check_incorrect_fail_use, get_action_location } from './page/actions.js';
-import { DEV } from 'esm-env';
+import {
+	action_error_result,
+	get_action_location,
+	method_not_allowed_result
+} from './page/actions.js';
 import { deserialize_binary_form } from '../form-utils.js';
 import { with_version_header } from './utils.js';
 
@@ -262,7 +263,7 @@ async function handle_remote_call_internal(event, state, options, manifest, id)
 
 				if (data._.issues) {
 					// special case — don't serialize refreshes/reconnects
-					return json(
+					return Response.json(
 						/** @type {RemoteFunctionResponse} */ ({
 							type: 'result',
 							data: stringify(data)
@@ -310,7 +311,7 @@ async function handle_remote_call_internal(event, state, options, manifest, id)
 
 		await collect_remote_data(data, event, state, options);
 
-		return json(
+		return Response.json(
 			/** @type {RemoteFunctionResponse} */ ({
 				type: 'result',
 				data: stringify(data)
@@ -321,7 +322,7 @@ async function handle_remote_call_internal(event, state, options, manifest, id)
 		if (error instanceof Redirect) {
 			const data = await collect_remote_data({ redirect: error.location }, event, state, options);
 
-			return json(
+			return Response.json(
 				/** @type {RemoteFunctionResponse} */ ({
 					type: 'result',
 					data: stringify(data)
@@ -332,7 +333,7 @@ async function handle_remote_call_internal(event, state, options, manifest, id)
 
 		const transformed = await handle_error_and_jsonify(event, state, options, error);
 
-		return json(
+		return Response.json(
 			/** @type {RemoteFunctionResponse} */ ({
 				type: 'error',
 				error: transformed
@@ -531,7 +532,7 @@ export async function handle_remote_form_post(event, state, manifest, id) {
  * @param {RequestState} state
  * @param {SSRManifest} manifest
  * @param {string} id
- * @returns {Promise<ActionResult>}
+ * @returns {Promise<ServerActionResult>}
  */
 async function handle_remote_form_post_internal(event, state, manifest, id) {
 	const location = get_action_location(event.url);
@@ -547,21 +548,7 @@ async function handle_remote_form_post_internal(event, state, manifest, id) {
 	);
 
 	if (!form) {
-		event.setHeaders({
-			// https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/405
-			// "The server must generate an Allow header field in a 405 status code response"
-			allow: 'GET'
-		});
-		return {
-			type: 'error',
-			location,
-			// 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',
-				`POST method not allowed. No form actions exist for ${DEV ? `the page at ${event.route.id}` : 'this page'}`
-			)
-		};
+		return method_not_allowed_result(event, location);
 	}
 
 	if (action_id) {
@@ -591,22 +578,7 @@ async function handle_remote_form_post_internal(event, state, manifest, id) {
 			location
 		};
 	} catch (e) {
-		const err = normalize_error(e);
-
-		if (err instanceof Redirect) {
-			return {
-				type: 'redirect',
-				status: err.status,
-				location: err.location
-			};
-		}
-
-		return {
-			type: 'error',
-			location,
-			// @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)
-		};
+		return action_error_result(e, location);
 	}
 }
 

package/src/runtime/server/respond.js

@@ -1,6 +1,6 @@
 /** @import { SSRNode } from 'types' */
 import { DEV } from 'esm-env';
-import { json, text } from '@sveltejs/kit';
+import { text } from '@sveltejs/kit';
 import { Redirect, SvelteKitError } from '@sveltejs/kit/internal';
 import {
 	merge_tracing,
@@ -111,7 +111,7 @@ export async function internal_respond(request, options, manifest, state) {
 				})
 			) {
 				const message = 'Cross-site remote requests are forbidden';
-				return json({ message }, { status: 403 });
+				return Response.json({ message }, { status: 403 });
 			}
 		} else if (options.csrf_check_origin) {
 			const forbidden = is_csrf_forbidden({
@@ -126,7 +126,7 @@ export async function internal_respond(request, options, manifest, state) {
 				const opts = { status: 403 };
 
 				if (request.headers.get('accept') === 'application/json') {
-					return json({ message }, opts);
+					return Response.json({ message }, opts);
 				}
 
 				return text(message, opts);
@@ -754,6 +754,26 @@ export async function internal_respond(request, options, manifest, state) {
 			// if this request came direct from the user, rather than
 			// via our own `fetch`, render a 404 page
 			if (state.depth === 0) {
+				// Error-page data requests only invalidate the root layout.
+				if (
+					!state.prerendering &&
+					is_data_request &&
+					invalidated_data_nodes?.length === 1 &&
+					invalidated_data_nodes[0]
+				) {
+					return await render_data(
+						event,
+						state,
+						{ page: { layouts: [], leaf: 0 } },
+						options,
+						manifest,
+						invalidated_data_nodes,
+						// there is no route to take a trailing slash option from, and the
+						// SSR'd error page sees the pathname as-is
+						'ignore'
+					);
+				}
+
 				if (non_html_fetch_destinations.has(event.request.headers.get('sec-fetch-dest') ?? '')) {
 					return text('Not Found', {
 						status: 404,