@sveltejs/kit 2.53.3 → 2.54.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "2.53.3",
+  "version": "2.54.0",
   "description": "SvelteKit is the fastest way to build Svelte apps",
   "keywords": [
     "framework",
@@ -23,7 +23,7 @@
     "@types/cookie": "^0.6.0",
     "acorn": "^8.14.1",
     "cookie": "^0.6.0",
-    "devalue": "^5.6.3",
+    "devalue": "^5.6.4",
     "esm-env": "^1.2.2",
     "kleur": "^4.1.5",
     "magic-string": "^0.30.5",

package/src/core/config/options.js

@@ -133,23 +133,24 @@ const options = object(
 					server: boolean(false)
 				}),
 				remoteFunctions: boolean(false),
-				forkPreloads: boolean(false)
+				forkPreloads: boolean(false),
+				handleRenderingErrors: boolean(false)
 			}),
 
 			files: object({
-				src: deprecate(string('src')),
-				assets: deprecate(string('static')),
+				src: string('src'),
+				assets: string('static'),
 				hooks: object({
-					client: deprecate(string(null)),
-					server: deprecate(string(null)),
-					universal: deprecate(string(null))
+					client: string(null),
+					server: string(null),
+					universal: string(null)
 				}),
-				lib: deprecate(string(null)),
-				params: deprecate(string(null)),
-				routes: deprecate(string(null)),
-				serviceWorker: deprecate(string(null)),
-				appTemplate: deprecate(string(null)),
-				errorTemplate: deprecate(string(null))
+				lib: string(null),
+				params: string(null),
+				routes: string(null),
+				serviceWorker: string(null),
+				appTemplate: string(null),
+				errorTemplate: string(null)
 			}),
 
 			inlineStyleThreshold: number(0),

package/src/core/sync/sync.js

@@ -33,7 +33,7 @@ export function create(config) {
 
 	write_client_manifest(config.kit, manifest_data, `${output}/client`);
 	write_server(config, output);
-	write_root(manifest_data, output);
+	write_root(manifest_data, config, output);
 	write_all_types(config, manifest_data);
 	write_non_ambient(config.kit, manifest_data);
 

package/src/core/sync/write_root.js

@@ -2,11 +2,14 @@ import { dedent, isSvelte5Plus, write_if_changed } from './utils.js';
 
 /**
  * @param {import('types').ManifestData} manifest_data
+ * @param {import('types').ValidatedConfig} config
  * @param {string} output
  */
-export function write_root(manifest_data, output) {
+export function write_root(manifest_data, config, output) {
 	// TODO remove default layout altogether
 
+	const use_boundaries = config.kit.experimental.handleRenderingErrors && isSvelte5Plus();
+
 	const max_depth = Math.max(
 		...manifest_data.routes.map((route) =>
 			route.page ? route.page.layouts.filter(Boolean).length + 1 : 0
@@ -20,8 +23,38 @@ export function write_root(manifest_data, output) {
 	}
 
 	let l = max_depth;
+	/** @type {string} */
+	let pyramid;
 
-	let pyramid = dedent`
+	if (isSvelte5Plus() && use_boundaries) {
+		// with the @const we force the data[depth] access to be derived, which is important to not fire updates needlessly
+		// TODO in Svelte 5 we should rethink the client.js side, we can likely make data a $state and only update indexes that changed there, simplifying this a lot
+		pyramid = dedent`
+			{#snippet pyramid(depth)}
+				{@const Pyramid = constructors[depth]}
+				{#snippet failed(error)}
+					{@const ErrorPage = errors[depth]}
+					<ErrorPage {error} />
+				{/snippet}
+				<svelte:boundary failed={errors[depth] ? failed : undefined}>
+					{#if constructors[depth + 1]}
+						{@const d = data[depth]}
+						<!-- svelte-ignore binding_property_non_reactive -->
+						<Pyramid bind:this={components[depth]} data={d} {form} params={page.params}>
+							{@render pyramid(depth + 1)}
+						</Pyramid>
+					{:else}
+						{@const d = data[depth]}
+						<!-- svelte-ignore binding_property_non_reactive -->
+						<Pyramid bind:this={components[depth]} data={d} {form} params={page.params} {error} />
+					{/if}
+				</svelte:boundary>
+			{/snippet}
+
+			{@render pyramid(0)}
+		`;
+	} else {
+		pyramid = dedent`
 	${
 		isSvelte5Plus()
 			? `<!-- svelte-ignore binding_property_non_reactive -->
@@ -29,8 +62,8 @@ export function write_root(manifest_data, output) {
 			: `<svelte:component this={constructors[${l}]} bind:this={components[${l}]} data={data_${l}} {form} params={page.params} />`
 	}`;
 
-	while (l--) {
-		pyramid = dedent`
+		while (l--) {
+			pyramid = dedent`
 			{#if constructors[${l + 1}]}
 				${
 					isSvelte5Plus()
@@ -57,6 +90,7 @@ export function write_root(manifest_data, output) {
 
 			{/if}
 		`;
+		}
 	}
 
 	write_if_changed(
@@ -72,9 +106,10 @@ export function write_root(manifest_data, output) {
 				${
 					isSvelte5Plus()
 						? dedent`
-							let { stores, page, constructors, components = [], form, ${levels
+							let { stores, page, constructors, components = [], form, ${use_boundaries ? 'errors = [], error, ' : ''}${levels
 								.map((l) => `data_${l} = null`)
 								.join(', ')} } = $props();
+							${use_boundaries ? `let data = $derived({${levels.map((l) => `'${l}': data_${l}`).join(', ')}})` : ''}
 						`
 						: dedent`
 							export let stores;
@@ -108,7 +143,7 @@ export function write_root(manifest_data, output) {
 					isSvelte5Plus()
 						? dedent`
 							$effect(() => {
-								stores;page;constructors;components;form;${levels.map((l) => `data_${l}`).join(';')};
+								stores;page;constructors;components;form;${use_boundaries ? 'errors;error;' : ''}${levels.map((l) => `data_${l}`).join(';')};
 								stores.page.notify();
 							});
 						`

package/src/core/sync/write_server.js

@@ -50,6 +50,7 @@ export const options = {
 	root,
 	service_worker: ${has_service_worker},
 	service_worker_options: ${config.kit.serviceWorker.register ? s(config.kit.serviceWorker.options) : 'null'},
+	server_error_boundaries: ${s(!!config.kit.experimental.handleRenderingErrors)},
 	templates: {
 		app: ({ head, body, assets, nonce, env }) => ${s(template)
 			.replace('%sveltekit.head%', '" + head + "')

package/src/exports/index.js

@@ -276,7 +276,7 @@ export function isValidationError(e) {
  * @since 2.18.0
  */
 export function normalizeUrl(url) {
-	url = new URL(url, 'http://internal');
+	url = new URL(url, 'a://a');
 
 	const is_route_resolution = has_resolution_suffix(url.pathname);
 	const is_data_request = has_data_suffix(url.pathname);

package/src/exports/public.d.ts

@@ -513,79 +513,88 @@ export interface KitConfig {
 		 * @default false
 		 */
 		forkPreloads?: boolean;
+
+		/**
+		 * Whether to enable the experimental handling of rendering errors.
+		 * When enabled, `<svelte:boundary>` is used to wrap components at each level
+		 * where there's an `+error.svelte`, rendering the error page if the component fails.
+		 * In addition, error boundaries also work on the server and the error object goes through `handleError`.
+		 * @default false
+		 */
+		handleRenderingErrors?: boolean;
 	};
 	/**
 	 * Where to find various files within your project.
-	 * @deprecated
+	 * @deprecated this feature is still supported, but it's generally recommended to use [monorepos](https://levelup.video/tutorials/monorepos-with-pnpm) instead
 	 */
 	files?: {
 		/**
-		 * the location of your source code
-		 * @deprecated
+		 * The location of your source code.
+		 * @deprecated this feature is still supported, but it's generally recommended to use [monorepos](https://levelup.video/tutorials/monorepos-with-pnpm) instead
 		 * @default "src"
 		 * @since 2.28
 		 */
 		src?: string;
 		/**
-		 * a place to put static files that should have stable URLs and undergo no processing, such as `favicon.ico` or `manifest.json`
-		 * @deprecated
+		 * A place to put static files that should have stable URLs and undergo no processing, such as `favicon.ico` or `manifest.json`.
+		 * @deprecated this feature is still supported, but it's generally recommended to use [monorepos](https://levelup.video/tutorials/monorepos-with-pnpm) instead
 		 * @default "static"
 		 */
 		assets?: string;
 		hooks?: {
 			/**
 			 * The location of your client [hooks](https://svelte.dev/docs/kit/hooks).
-			 * @deprecated
+			 * @deprecated this feature is still supported, but it's generally recommended to use [monorepos](https://levelup.video/tutorials/monorepos-with-pnpm) instead
 			 * @default "src/hooks.client"
 			 */
 			client?: string;
 			/**
 			 * The location of your server [hooks](https://svelte.dev/docs/kit/hooks).
-			 * @deprecated
+			 * @deprecated this feature is still supported, but it's generally recommended to use [monorepos](https://levelup.video/tutorials/monorepos-with-pnpm) instead
 			 * @default "src/hooks.server"
 			 */
 			server?: string;
 			/**
 			 * The location of your universal [hooks](https://svelte.dev/docs/kit/hooks).
-			 * @deprecated
+			 * @deprecated this feature is still supported, but it's generally recommended to use [monorepos](https://levelup.video/tutorials/monorepos-with-pnpm) instead
 			 * @default "src/hooks"
 			 * @since 2.3.0
 			 */
 			universal?: string;
 		};
 		/**
-		 * your app's internal library, accessible throughout the codebase as `$lib`
-		 * @deprecated
+		 * Your app's internal library, accessible throughout the codebase as `$lib`.
+		 * @deprecated this feature is still supported, but it's generally recommended to use [monorepos](https://levelup.video/tutorials/monorepos-with-pnpm) instead
 		 * @default "src/lib"
 		 */
 		lib?: string;
 		/**
-		 * a directory containing [parameter matchers](https://svelte.dev/docs/kit/advanced-routing#Matching)
-		 * @deprecated
+		 * A directory containing [parameter matchers](https://svelte.dev/docs/kit/advanced-routing#Matching).
+		 * @deprecated this feature is still supported, but it's generally recommended to use [monorepos](https://levelup.video/tutorials/monorepos-with-pnpm) instead
 		 * @default "src/params"
 		 */
 		params?: string;
 		/**
-		 * the files that define the structure of your app (see [Routing](https://svelte.dev/docs/kit/routing))
-		 * @deprecated
+		 * The files that define the structure of your app (see [Routing](https://svelte.dev/docs/kit/routing)).
+		 * @deprecated this feature is still supported, but it's generally recommended to use [monorepos](https://levelup.video/tutorials/monorepos-with-pnpm) instead
 		 * @default "src/routes"
 		 */
 		routes?: string;
 		/**
-		 * the location of your service worker's entry point (see [Service workers](https://svelte.dev/docs/kit/service-workers))
-		 * @deprecated
+		 * The location of your service worker's entry point (see [Service workers](https://svelte.dev/docs/kit/service-workers)).
+		 * @deprecated this feature is still supported, but it's generally recommended to use [monorepos](https://levelup.video/tutorials/monorepos-with-pnpm) instead
 		 * @default "src/service-worker"
 		 */
 		serviceWorker?: string;
 		/**
-		 * the location of the template for HTML responses
-		 * @deprecated
+		 * The location of the template for HTML responses.
+		 * @deprecated this feature is still supported, but it's generally recommended to use [monorepos](https://levelup.video/tutorials/monorepos-with-pnpm) instead
 		 * @default "src/app.html"
 		 */
 		appTemplate?: string;
 		/**
-		 * the location of the template for fallback error responses
-		 * @deprecated
+		 * The location of the template for fallback error responses.
+		 * @deprecated this feature is still supported, but it's generally recommended to use [monorepos](https://levelup.video/tutorials/monorepos-with-pnpm) instead
 		 * @default "src/error.html"
 		 */
 		errorTemplate?: string;
@@ -1236,7 +1245,7 @@ export interface NavigationBase {
 	 */
 	to: NavigationTarget | null;
 	/**
-	 * Whether or not the navigation will result in the page being unloaded (i.e. not a client-side navigation)
+	 * Whether or not the navigation will result in the page being unloaded (i.e. not a client-side navigation).
 	 */
 	willUnload: boolean;
 	/**
@@ -1249,11 +1258,7 @@ export interface NavigationBase {
 export interface NavigationEnter extends NavigationBase {
 	/**
 	 * The type of navigation:
-	 * - `form`: The user submitted a `<form method="GET">`
-	 * - `leave`: The app is being left either because the tab is being closed or a navigation to a different document is occurring
-	 * - `link`: Navigation was triggered by a link click
-	 * - `goto`: Navigation was triggered by a `goto(...)` call or a redirect
-	 * - `popstate`: Navigation was triggered by back/forward navigation
+	 * - `enter`: The app has hydrated/started
 	 */
 	type: 'enter';
 
@@ -1268,16 +1273,29 @@ export interface NavigationEnter extends NavigationBase {
 	event?: undefined;
 }
 
-export interface NavigationExternal extends NavigationBase {
+export type NavigationExternal = NavigationGoto | NavigationLeave;
+
+export interface NavigationGoto extends NavigationBase {
 	/**
 	 * The type of navigation:
-	 * - `form`: The user submitted a `<form method="GET">`
-	 * - `leave`: The app is being left either because the tab is being closed or a navigation to a different document is occurring
-	 * - `link`: Navigation was triggered by a link click
 	 * - `goto`: Navigation was triggered by a `goto(...)` call or a redirect
-	 * - `popstate`: Navigation was triggered by back/forward navigation
 	 */
-	type: Exclude<NavigationType, 'enter' | 'popstate' | 'link' | 'form'>;
+	type: 'goto';
+
+	// TODO 3.0 remove this property, so that it only exists when type is 'popstate'
+	// (would possibly be a breaking change to do it prior to that)
+	/**
+	 * In case of a history back/forward navigation, the number of steps to go back/forward
+	 */
+	delta?: undefined;
+}
+
+export interface NavigationLeave extends NavigationBase {
+	/**
+	 * The type of navigation:
+	 * - `leave`: The app is being left either because the tab is being closed or a navigation to a different document is occurring
+	 */
+	type: 'leave';
 
 	// TODO 3.0 remove this property, so that it only exists when type is 'popstate'
 	// (would possibly be a breaking change to do it prior to that)
@@ -1291,10 +1309,6 @@ export interface NavigationFormSubmit extends NavigationBase {
 	/**
 	 * The type of navigation:
 	 * - `form`: The user submitted a `<form method="GET">`
-	 * - `leave`: The app is being left either because the tab is being closed or a navigation to a different document is occurring
-	 * - `link`: Navigation was triggered by a link click
-	 * - `goto`: Navigation was triggered by a `goto(...)` call or a redirect
-	 * - `popstate`: Navigation was triggered by back/forward navigation
 	 */
 	type: 'form';
 
@@ -1314,10 +1328,6 @@ export interface NavigationFormSubmit extends NavigationBase {
 export interface NavigationPopState extends NavigationBase {
 	/**
 	 * The type of navigation:
-	 * - `form`: The user submitted a `<form method="GET">`
-	 * - `leave`: The app is being left either because the tab is being closed or a navigation to a different document is occurring
-	 * - `link`: Navigation was triggered by a link click
-	 * - `goto`: Navigation was triggered by a `goto(...)` call or a redirect
 	 * - `popstate`: Navigation was triggered by back/forward navigation
 	 */
 	type: 'popstate';
@@ -1336,11 +1346,7 @@ export interface NavigationPopState extends NavigationBase {
 export interface NavigationLink extends NavigationBase {
 	/**
 	 * The type of navigation:
-	 * - `form`: The user submitted a `<form method="GET">`
-	 * - `leave`: The app is being left either because the tab is being closed or a navigation to a different document is occurring
 	 * - `link`: Navigation was triggered by a link click
-	 * - `goto`: Navigation was triggered by a `goto(...)` call or a redirect
-	 * - `popstate`: Navigation was triggered by back/forward navigation
 	 */
 	type: 'link';
 
@@ -1377,13 +1383,6 @@ export type BeforeNavigate = Navigation & {
  * The argument passed to [`onNavigate`](https://svelte.dev/docs/kit/$app-navigation#onNavigate) callbacks.
  */
 export type OnNavigate = Navigation & {
-	/**
-	 * The type of navigation:
-	 * - `form`: The user submitted a `<form method="GET">`
-	 * - `link`: Navigation was triggered by a link click
-	 * - `goto`: Navigation was triggered by a `goto(...)` call or a redirect
-	 * - `popstate`: Navigation was triggered by back/forward navigation
-	 */
 	type: Exclude<NavigationType, 'enter' | 'leave'>;
 	/**
 	 * Since `onNavigate` callbacks are called immediately before a client-side navigation, they will never be called with a navigation that unloads the page.
@@ -1395,14 +1394,6 @@ export type OnNavigate = Navigation & {
  * The argument passed to [`afterNavigate`](https://svelte.dev/docs/kit/$app-navigation#afterNavigate) callbacks.
  */
 export type AfterNavigate = (Navigation | NavigationEnter) & {
-	/**
-	 * The type of navigation:
-	 * - `enter`: The app has hydrated/started
-	 * - `form`: The user submitted a `<form method="GET">`
-	 * - `link`: Navigation was triggered by a link click
-	 * - `goto`: Navigation was triggered by a `goto(...)` call or a redirect
-	 * - `popstate`: Navigation was triggered by back/forward navigation
-	 */
 	type: Exclude<NavigationType, 'leave'>;
 	/**
 	 * Since `afterNavigate` callbacks are called after a navigation completes, they will never be called with a navigation that unloads the page.

package/src/exports/vite/build/build_server.js

@@ -107,7 +107,7 @@ export function build_server_nodes(
 		let fonts = [];
 
 		/** @type {Set<string>} */
-		let eager_assets = new Set();
+		const eager_assets = new Set();
 
 		if (node.component && client_manifest) {
 			exports.push(
@@ -215,7 +215,7 @@ export function build_server_nodes(
 					const filename = basename(file);
 					const dest = `${out}/server/stylesheets/${filename}.js`;
 
-					let css = /** @type {string} */ (stylesheets_to_inline.get(file));
+					const css = /** @type {string} */ (stylesheets_to_inline.get(file));
 
 					fs.writeFileSync(
 						dest,

package/src/exports/vite/build/build_service_worker.js

@@ -1,4 +1,5 @@
 import fs from 'node:fs';
+import process from 'node:process';
 import * as vite from 'vite';
 import { dedent } from '../../../core/sync/utils.js';
 import { s } from '../../../utils/misc.js';

package/src/exports/vite/index.js

@@ -367,7 +367,8 @@ async function kit({ svelte_config }) {
 				__SVELTEKIT_PATHS_RELATIVE__: s(kit.paths.relative),
 				__SVELTEKIT_CLIENT_ROUTING__: s(kit.router.resolution === 'client'),
 				__SVELTEKIT_HASH_ROUTING__: s(kit.router.type === 'hash'),
-				__SVELTEKIT_SERVER_TRACING_ENABLED__: s(kit.experimental.tracing.server)
+				__SVELTEKIT_SERVER_TRACING_ENABLED__: s(kit.experimental.tracing.server),
+				__SVELTEKIT_EXPERIMENTAL_USE_TRANSFORM_ERROR__: s(kit.experimental.handleRenderingErrors)
 			};
 
 			if (is_build) {
@@ -932,9 +933,7 @@ async function kit({ svelte_config }) {
 								assetFileNames: `${prefix}/assets/[name].[hash][extname]`,
 								hoistTransitiveImports: false,
 								sourcemapIgnoreList,
-								inlineDynamicImports: is_rolldown ? undefined : !split,
-								// @ts-ignore: only available in Vite 8
-								codeSplitting: is_rolldown ? split : undefined
+								inlineDynamicImports: is_rolldown ? undefined : !split
 							},
 							preserveEntrySignatures: 'strict',
 							onwarn(warning, handler) {
@@ -967,6 +966,13 @@ async function kit({ svelte_config }) {
 						}
 					}
 				};
+
+				// we must reference Vite 8 options conditionally. Otherwise, older Vite
+				// versions throw an error about unknown config options
+				if (is_rolldown && new_config?.build?.rollupOptions?.output) {
+					// @ts-ignore only available in Vite 8
+					new_config.build.rollupOptions.output.codeSplitting = split;
+				}
 			} else {
 				new_config = {
 					appType: 'custom',
@@ -974,7 +980,7 @@ async function kit({ svelte_config }) {
 					build: {
 						rollupOptions: {
 							// Vite dependency crawler needs an explicit JS entry point
-							// eventhough server otherwise works without it
+							// even though server otherwise works without it
 							input: `${runtime_directory}/client/entry.js`
 						}
 					},

package/src/runtime/app/paths/client.js

@@ -1,4 +1,4 @@
-/** @import { Asset, RouteId, Pathname, ResolvedPathname } from '$app/types' */
+/** @import { Asset, RouteId, RouteIdWithSearchOrHash, Pathname, PathnameWithSearchOrHash, ResolvedPathname } from '$app/types' */
 /** @import { ResolveArgs } from './types.js' */
 import { base, assets, hash_routing } from './internal/client.js';
 import { resolve_route } from '../../../utils/routing.js';
@@ -47,7 +47,7 @@ const pathname_prefix = hash_routing ? '#' : '';
  * ```
  * @since 2.26
  *
- * @template {RouteId | Pathname} T
+ * @template {RouteIdWithSearchOrHash | PathnameWithSearchOrHash} T
  * @param {ResolveArgs<T>} args
  * @returns {ResolvedPathname}
  */

package/src/runtime/app/paths/public.d.ts

@@ -1,4 +1,4 @@
-import { RouteId, Pathname, ResolvedPathname } from '$app/types';
+import { RouteIdWithSearchOrHash, PathnameWithSearchOrHash, ResolvedPathname } from '$app/types';
 import { ResolveArgs } from './types.js';
 
 export { resolve, asset, match } from './client.js';
@@ -24,6 +24,6 @@ export let assets: '' | `https://${string}` | `http://${string}` | '/_svelte_kit
 /**
  * @deprecated Use [`resolve(...)`](https://svelte.dev/docs/kit/$app-paths#resolve) instead
  */
-export function resolveRoute<T extends RouteId | Pathname>(
+export function resolveRoute<T extends RouteIdWithSearchOrHash | PathnameWithSearchOrHash>(
 	...args: ResolveArgs<T>
 ): ResolvedPathname;

package/src/runtime/app/paths/server.js

@@ -35,7 +35,7 @@ export async function match(url) {
 	const store = try_get_request_store();
 
 	if (typeof url === 'string') {
-		const origin = store?.event.url.origin ?? 'http://internal';
+		const origin = store?.event.url.origin ?? 'a://a';
 		url = new URL(url, origin);
 	}
 

package/src/runtime/app/paths/types.d.ts

@@ -1,7 +1,23 @@
-import { Pathname, RouteId, RouteParams } from '$app/types';
+import {
+	PathnameWithSearchOrHash,
+	RouteId,
+	RouteIdWithSearchOrHash,
+	RouteParams
+} from '$app/types';
 
-export type ResolveArgs<T extends RouteId | Pathname> = T extends RouteId
-	? RouteParams<T> extends Record<string, never>
-		? [route: T]
-		: [route: T, params: RouteParams<T>]
-	: [route: T];
+type StripSearchOrHash<T extends string> = T extends `${infer Pathname}?${string}`
+	? Pathname
+	: T extends `${infer Pathname}#${string}`
+		? Pathname
+		: T;
+
+export type ResolveArgs<T extends RouteIdWithSearchOrHash | PathnameWithSearchOrHash> =
+	T extends RouteId
+		? RouteParams<T> extends Record<string, never>
+			? [route: T]
+			: [route: T, params: RouteParams<T>]
+		: StripSearchOrHash<T> extends infer U extends RouteId
+			? RouteParams<U> extends Record<string, never>
+				? [route: T]
+				: [route: T, params: RouteParams<U>]
+			: [route: T];