@sveltejs/kit 2.16.0 → 2.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "2.16.0",
+  "version": "2.17.0",
   "description": "SvelteKit is the fastest way to build Svelte apps",
   "keywords": [
     "framework",
@@ -41,8 +41,8 @@
     "svelte": "^5.2.9",
     "svelte-preprocess": "^6.0.0",
     "typescript": "^5.3.3",
-    "vite": "^6.0.1",
-    "vitest": "^2.1.6"
+    "vite": "^6.0.11",
+    "vitest": "^3.0.1"
   },
   "peerDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0",
@@ -96,6 +96,8 @@
     "test:integration": "pnpm -r --workspace-concurrency 1 --filter=\"./test/**\" test",
     "test:cross-platform:dev": "pnpm -r --workspace-concurrency 1 --filter=\"./test/**\" test:cross-platform:dev",
     "test:cross-platform:build": "pnpm test:unit && pnpm -r --workspace-concurrency 1 --filter=\"./test/**\" test:cross-platform:build",
+    "test:server-side-route-resolution:dev": "pnpm -r --workspace-concurrency 1 --filter=\"./test/**\" test:server-side-route-resolution:dev",
+    "test:server-side-route-resolution:build": "pnpm test:unit && pnpm -r --workspace-concurrency 1 --filter=\"./test/**\" test:server-side-route-resolution:build",
     "test:unit": "vitest --config kit.vitest.config.js run",
     "generate:version": "node scripts/generate-version.js",
     "generate:types": "node scripts/generate-dts.js"

package/src/core/adapt/builder.js

@@ -138,6 +138,7 @@ export function create_builder({
 						generateManifest: ({ relativePath }) =>
 							generate_manifest({
 								build_data,
+								prerendered: [],
 								relative_path: relativePath,
 								routes: Array.from(filtered)
 							})
@@ -185,6 +186,7 @@ export function create_builder({
 		generateManifest({ relativePath, routes: subset }) {
 			return generate_manifest({
 				build_data,
+				prerendered: prerendered.paths,
 				relative_path: relativePath,
 				routes: subset
 					? subset.map((route) => /** @type {import('types').RouteData} */ (lookup.get(route)))

package/src/core/config/index.js

@@ -115,5 +115,20 @@ export function validate_config(config) {
 		);
 	}
 
-	return options(config, 'config');
+	const validated = options(config, 'config');
+
+	if (validated.kit.router.resolution === 'server') {
+		if (validated.kit.router.type === 'hash') {
+			throw new Error(
+				"The `router.resolution` option cannot be 'server' if `router.type` is 'hash'"
+			);
+		}
+		if (validated.kit.output.bundleStrategy !== 'split') {
+			throw new Error(
+				"The `router.resolution` option cannot be 'server' if `output.bundleStrategy` is 'inline' or 'single'"
+			);
+		}
+	}
+
+	return validated;
 }

package/src/core/config/options.js

@@ -261,7 +261,8 @@ const options = object(
 			}),
 
 			router: object({
-				type: list(['pathname', 'hash'])
+				type: list(['pathname', 'hash']),
+				resolution: list(['client', 'server'])
 			}),
 
 			serviceWorker: object({

package/src/core/generate_manifest/index.js

@@ -8,27 +8,31 @@ import { compact } from '../../utils/array.js';
 import { join_relative } from '../../utils/filesystem.js';
 import { dedent } from '../sync/utils.js';
 import { find_server_assets } from './find_server_assets.js';
+import { uneval } from 'devalue';
 
 /**
  * Generates the data used to write the server-side manifest.js file. This data is used in the Vite
  * build process, to power routing, etc.
  * @param {{
  *   build_data: import('types').BuildData;
+ *   prerendered: string[];
  *   relative_path: string;
  *   routes: import('types').RouteData[];
  * }} opts
  */
-export function generate_manifest({ build_data, relative_path, routes }) {
+export function generate_manifest({ build_data, prerendered, relative_path, routes }) {
 	/**
 	 * @type {Map<any, number>} The new index of each node in the filtered nodes array
 	 */
 	const reindexed = new Map();
 	/**
 	 * All nodes actually used in the routes definition (prerendered routes are omitted).
-	 * Root layout/error is always included as they are needed for 404 and root errors.
+	 * If `routes` is empty, it means that this manifest is only used for server-side resolution
+	 * and the root layout/error is therefore not needed.
+	 * Else, root layout/error is always included as they are needed for 404 and root errors.
 	 * @type {Set<any>}
 	 */
-	const used_nodes = new Set([0, 1]);
+	const used_nodes = new Set(routes.length > 0 ? [0, 1] : []);
 
 	const server_assets = find_server_assets(build_data, routes);
 
@@ -57,7 +61,11 @@ export function generate_manifest({ build_data, relative_path, routes }) {
 		assets.push(build_data.service_worker);
 	}
 
-	const matchers = new Set();
+	// In case of server side route resolution, we need to include all matchers. Prerendered routes are not part
+	// of the server manifest, and they could reference matchers that then would not be included.
+	const matchers = new Set(
+		build_data.client?.nodes ? Object.keys(build_data.manifest_data.matchers) : undefined
+	);
 
 	/** @param {Array<number | undefined>} indexes */
 	function get_nodes(indexes) {
@@ -90,7 +98,7 @@ export function generate_manifest({ build_data, relative_path, routes }) {
 			assets: new Set(${s(assets)}),
 			mimeTypes: ${s(mime_types)},
 			_: {
-				client: ${s(build_data.client)},
+				client: ${uneval(build_data.client)},
 				nodes: [
 					${(node_paths).map(loader).join(',\n')}
 				],
@@ -113,6 +121,7 @@ export function generate_manifest({ build_data, relative_path, routes }) {
 						`;
 					}).filter(Boolean).join(',\n')}
 				],
+				prerendered_routes: new Set(${s(prerendered)}),
 				matchers: async () => {
 					${Array.from(
 						matchers,

package/src/core/postbuild/analyse.js

@@ -13,7 +13,7 @@ import { forked } from '../../utils/fork.js';
 import { installPolyfills } from '../../exports/node/polyfills.js';
 import { ENDPOINT_METHODS } from '../../constants.js';
 import { filter_private_env, filter_public_env } from '../../utils/env.js';
-import { resolve_route } from '../../utils/routing.js';
+import { has_server_load, resolve_route } from '../../utils/routing.js';
 import { get_page_config } from '../../utils/route_config.js';
 import { check_feature } from '../../utils/features.js';
 import { createReadableStream } from '@sveltejs/kit/node';
@@ -88,7 +88,7 @@ async function analyse({
 		}
 
 		metadata.nodes[node.index] = {
-			has_server_load: node.server?.load !== undefined || node.server?.trailingSlash !== undefined
+			has_server_load: has_server_load(node)
 		};
 	}
 

package/src/core/sync/write_client_manifest.js

@@ -10,9 +10,11 @@ import colors from 'kleur';
  * @param {import('types').ValidatedKitConfig} kit
  * @param {import('types').ManifestData} manifest_data
  * @param {string} output
- * @param {Array<{ has_server_load: boolean }>} [metadata]
+ * @param {import('types').ServerMetadata['nodes']} [metadata] If this is omitted, we have to assume that all routes with a `+layout/page.server.js` file have a server load function
  */
 export function write_client_manifest(kit, manifest_data, output, metadata) {
+	const client_routing = kit.router.resolution === 'client';
+
 	/**
 	 * Creates a module that exports a `CSRPageNode`
 	 * @param {import('types').PageNode} node
@@ -47,11 +49,14 @@ export function write_client_manifest(kit, manifest_data, output, metadata) {
 			write_if_changed(`${output}/nodes/${i}.js`, generate_node(node));
 			return `() => import('./nodes/${i}')`;
 		})
+		// If route resolution happens on the server, we only need the root layout and root error page
+		// upfront, the rest is loaded on demand as the user navigates the app
+		.slice(0, client_routing ? manifest_data.nodes.length : 2)
 		.join(',\n');
 
 	const layouts_with_server_load = new Set();
 
-	const dictionary = dedent`
+	let dictionary = dedent`
 		{
 			${manifest_data.routes
 				.map((route) => {
@@ -108,6 +113,13 @@ export function write_client_manifest(kit, manifest_data, output, metadata) {
 		}
 	`;
 
+	if (!client_routing) {
+		dictionary = '{}';
+		const root_layout = layouts_with_server_load.has(0);
+		layouts_with_server_load.clear();
+		if (root_layout) layouts_with_server_load.add(0);
+	}
+
 	const client_hooks_file = resolve_entry(kit.files.hooks.client);
 	const universal_hooks_file = resolve_entry(kit.files.hooks.universal);
 
@@ -123,6 +135,8 @@ export function write_client_manifest(kit, manifest_data, output, metadata) {
 		);
 	}
 
+	// Stringified version of
+	/** @type {import('../../runtime/client/types.js').SvelteKitApp} */
 	write_if_changed(
 		`${output}/app.js`,
 		dedent`
@@ -137,7 +151,7 @@ export function write_client_manifest(kit, manifest_data, output, metadata) {
 					: ''
 			}
 
-			export { matchers } from './matchers.js';
+			${client_routing ? "export { matchers } from './matchers.js';" : 'export const matchers = {};'}
 
 			export const nodes = [
 				${nodes}
@@ -158,7 +172,7 @@ export function write_client_manifest(kit, manifest_data, output, metadata) {
 
 			export const decoders = Object.fromEntries(Object.entries(hooks.transport).map(([k, v]) => [k, v.decode]));
 
-			export const hash = ${JSON.stringify(kit.router.type === 'hash')};
+			export const hash = ${s(kit.router.type === 'hash')};
 
 			export const decode = (type, value) => decoders[type](value);
 
@@ -166,21 +180,23 @@ export function write_client_manifest(kit, manifest_data, output, metadata) {
 		`
 	);
 
-	// write matchers to a separate module so that we don't
-	// need to worry about name conflicts
-	const imports = [];
-	const matchers = [];
+	if (client_routing) {
+		// write matchers to a separate module so that we don't
+		// need to worry about name conflicts
+		const imports = [];
+		const matchers = [];
 
-	for (const key in manifest_data.matchers) {
-		const src = manifest_data.matchers[key];
+		for (const key in manifest_data.matchers) {
+			const src = manifest_data.matchers[key];
 
-		imports.push(`import { match as ${key} } from ${s(relative_path(output, src))};`);
-		matchers.push(key);
-	}
+			imports.push(`import { match as ${key} } from ${s(relative_path(output, src))};`);
+			matchers.push(key);
+		}
 
-	const module = imports.length
-		? `${imports.join('\n')}\n\nexport const matchers = { ${matchers.join(', ')} };`
-		: 'export const matchers = {};';
+		const module = imports.length
+			? `${imports.join('\n')}\n\nexport const matchers = { ${matchers.join(', ')} };`
+			: 'export const matchers = {};';
 
-	write_if_changed(`${output}/matchers.js`, module);
+		write_if_changed(`${output}/matchers.js`, module);
+	}
 }

package/src/core/sync/write_server.js

@@ -35,7 +35,6 @@ import { set_manifest, set_read_implementation } from '__sveltekit/server';
 import { set_private_env, set_public_env, set_safe_public_env } from '${runtime_directory}/shared-server.js';
 
 export const options = {
-	app_dir: ${s(config.kit.appDir)},
 	app_template_contains_nonce: ${template.includes('%sveltekit.nonce%')},
 	csp: ${s(config.kit.csp)},
 	csrf_check_origin: ${s(config.kit.csrf.checkOrigin)},
@@ -118,6 +117,8 @@ export function write_server(config, output) {
 		return posixify(path.relative(`${output}/server`, file));
 	}
 
+	// Contains the stringified version of
+	/** @type {import('types').SSROptions} */
 	write_if_changed(
 		`${output}/server/internal.js`,
 		server_template({

package/src/exports/public.d.ts

@@ -659,6 +659,28 @@ export interface KitConfig {
 		 * @since 2.14.0
 		 */
 		type?: 'pathname' | 'hash';
+		/**
+		 * How to determine which route to load when navigating to a new page.
+		 *
+		 * By default, SvelteKit will serve a route manifest to the browser.
+		 * When navigating, this manifest is used (along with the `reroute` hook, if it exists) to determine which components to load and which `load` functions to run.
+		 * Because everything happens on the client, this decision can be made immediately. The drawback is that the manifest needs to be
+		 * loaded and parsed before the first navigation can happen, which may have an impact if your app contains many routes.
+		 *
+		 * Alternatively, SvelteKit can determine the route on the server. This means that for every navigation to a path that has not yet been visited, the server will be asked to determine the route.
+		 * This has several advantages:
+		 * - The client does not need to load the routing manifest upfront, which can lead to faster initial page loads
+		 * - The list of routes is hidden from public view
+		 * - The server has an opportunity to intercept each navigation (for example through a middleware), enabling (for example) A/B testing opaque to SvelteKit
+
+		 * The drawback is that for unvisited paths, resolution will take slightly longer (though this is mitigated by [preloading](https://svelte.dev/docs/kit/link-options#data-sveltekit-preload-data)).
+		 *
+		 * > [!NOTE] When using server-side route resolution and prerendering, the resolution is prerendered along with the route itself.
+		 *
+		 * @default "client"
+		 * @since 2.17.0
+		 */
+		resolution?: 'client' | 'server';
 	};
 	serviceWorker?: {
 		/**
@@ -1088,31 +1110,31 @@ export interface AfterNavigate extends Omit<Navigation, 'type'> {
 }
 
 /**
- * The shape of the `$page` store
+ * The shape of the [`page`](https://svelte.dev/docs/kit/$app-state#page) reactive object and the [`$page`](https://svelte.dev/docs/kit/$app-stores) store.
  */
 export interface Page<
 	Params extends Record<string, string> = Record<string, string>,
 	RouteId extends string | null = string | null
 > {
 	/**
-	 * The URL of the current page
+	 * The URL of the current page.
 	 */
 	url: URL;
 	/**
-	 * The parameters of the current page - e.g. for a route like `/blog/[slug]`, a `{ slug: string }` object
+	 * The parameters of the current page - e.g. for a route like `/blog/[slug]`, a `{ slug: string }` object.
 	 */
 	params: Params;
 	/**
-	 * Info about the current route
+	 * Info about the current route.
 	 */
 	route: {
 		/**
-		 * The ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`
+		 * The ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`.
 		 */
 		id: RouteId;
 	};
 	/**
-	 * Http status code of the current page
+	 * HTTP status code of the current page.
 	 */
 	status: number;
 	/**
@@ -1297,6 +1319,7 @@ export interface SSRManifest {
 		client: NonNullable<BuildData['client']>;
 		nodes: SSRNodeLoader[];
 		routes: SSRRoute[];
+		prerendered_routes: Set<string>;
 		matchers: () => Promise<Record<string, ParamMatcher>>;
 		/** A `[file]: size` map of all assets imported by server code */
 		server_assets: Record<string, number>;

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

@@ -47,7 +47,12 @@ export function build_server_nodes(out, kit, manifest_data, server_manifest, cli
 		css.filter(asset => client_stylesheets.has(asset.fileName))
 			.forEach((asset) => {
 				if (asset.source.length < kit.inlineStyleThreshold) {
+					// We know that the names for entry points are numbers.
 					const [index] = basename(asset.fileName).split('.');
+					// There can also be other CSS files from shared components
+					// for example, which we need to ignore here.
+					if (isNaN(+index)) return;
+
 					const server_stylesheet = server_stylesheets.get(+index);
 					const file = `${out}/server/stylesheets/${index}.js`;
 

package/src/exports/vite/dev/index.js

@@ -136,7 +136,34 @@ export async function dev(vite, vite_config, svelte_config) {
 					imports: [],
 					stylesheets: [],
 					fonts: [],
-					uses_env_dynamic_public: true
+					uses_env_dynamic_public: true,
+					nodes:
+						svelte_config.kit.router.resolution === 'client'
+							? undefined
+							: manifest_data.nodes.map((node, i) => {
+									if (node.component || node.universal) {
+										return `${svelte_config.kit.paths.base}${to_fs(svelte_config.kit.outDir)}/generated/client/nodes/${i}.js`;
+									}
+								}),
+					routes:
+						svelte_config.kit.router.resolution === 'client'
+							? undefined
+							: compact(
+									manifest_data.routes.map((route) => {
+										if (!route.page) return;
+
+										return {
+											id: route.id,
+											pattern: route.pattern,
+											params: route.params,
+											layouts: route.page.layouts.map((l) =>
+												l !== undefined ? [!!manifest_data.nodes[l].server, l] : undefined
+											),
+											errors: route.page.errors,
+											leaf: [!!manifest_data.nodes[route.page.leaf].server, route.page.leaf]
+										};
+									})
+								)
 				},
 				server_assets: new Proxy(
 					{},
@@ -222,6 +249,7 @@ export async function dev(vite, vite_config, svelte_config) {
 						return result;
 					};
 				}),
+				prerendered_routes: new Set(),
 				routes: compact(
 					manifest_data.routes.map((route) => {
 						if (!route.page && !route.endpoint) return null;

package/src/exports/vite/index.js

@@ -13,7 +13,7 @@ import { load_config } from '../../core/config/index.js';
 import { generate_manifest } from '../../core/generate_manifest/index.js';
 import { build_server_nodes } from './build/build_server.js';
 import { build_service_worker } from './build/build_service_worker.js';
-import { assets_base, find_deps } from './build/utils.js';
+import { assets_base, find_deps, resolve_symlinks } from './build/utils.js';
 import { dev } from './dev/index.js';
 import { is_illegal, module_guard } from './graph_analysis/index.js';
 import { preview } from './preview/index.js';
@@ -35,6 +35,7 @@ import {
 	sveltekit_server
 } from './module_ids.js';
 import { resolve_peer_dependency } from '../../utils/import.js';
+import { compact } from '../../utils/array.js';
 
 const cwd = process.cwd();
 
@@ -319,7 +320,8 @@ async function kit({ svelte_config }) {
 					__SVELTEKIT_APP_VERSION_FILE__: s(`${kit.appDir}/version.json`),
 					__SVELTEKIT_APP_VERSION_POLL_INTERVAL__: s(kit.version.pollInterval),
 					__SVELTEKIT_DEV__: 'false',
-					__SVELTEKIT_EMBEDDED__: kit.embedded ? 'true' : 'false'
+					__SVELTEKIT_EMBEDDED__: kit.embedded ? 'true' : 'false',
+					__SVELTEKIT_CLIENT_ROUTING__: kit.router.resolution === 'client' ? 'true' : 'false'
 				};
 
 				if (!secondary_build_started) {
@@ -329,7 +331,8 @@ async function kit({ svelte_config }) {
 				new_config.define = {
 					__SVELTEKIT_APP_VERSION_POLL_INTERVAL__: '0',
 					__SVELTEKIT_DEV__: 'true',
-					__SVELTEKIT_EMBEDDED__: kit.embedded ? 'true' : 'false'
+					__SVELTEKIT_EMBEDDED__: kit.embedded ? 'true' : 'false',
+					__SVELTEKIT_CLIENT_ROUTING__: kit.router.resolution === 'client' ? 'true' : 'false'
 				};
 
 				// These Kit dependencies are packaged as CommonJS, which means they must always be externalized.
@@ -421,15 +424,22 @@ async function kit({ svelte_config }) {
 
 					const illegal_module = strip_virtual_prefix(relative);
 
+					const error_prefix = `Cannot import ${illegal_module} into client-side code. This could leak sensitive information.`;
+					const error_suffix = `
+Tips:
+ - To resolve this error, ensure that no exports from ${illegal_module} are used, even transitively, in client-side code.
+ - If you're only using the import as a type, change it to \`import type\`.
+ - If you're not sure which module is causing this, try building your app -- it will create a more helpful error.`;
+
 					if (import_map.has(illegal_module)) {
 						const importer = path.relative(
 							cwd,
 							/** @type {string} */ (import_map.get(illegal_module))
 						);
-						throw new Error(`Cannot import ${illegal_module} into client-side code: ${importer}`);
+						throw new Error(`${error_prefix}\nImported by: ${importer}.${error_suffix}`);
 					}
 
-					throw new Error(`Cannot import ${illegal_module} into client-side code`);
+					throw new Error(`${error_prefix}${error_suffix}`);
 				}
 			}
 
@@ -472,12 +482,14 @@ async function kit({ svelte_config }) {
 						return dedent`
 							export const base = ${global}?.base ?? ${s(base)};
 							export const assets = ${global}?.assets ?? ${assets ? s(assets) : 'base'};
+							export const app_dir = ${s(kit.appDir)};
 						`;
 					}
 
 					return dedent`
 						export let base = ${s(base)};
 						export let assets = ${assets ? s(assets) : 'base'};
+						export const app_dir = ${s(kit.appDir)};
 
 						export const relative = ${svelte_config.kit.paths.relative};
 
@@ -788,6 +800,7 @@ async function kit({ svelte_config }) {
 					manifest_path,
 					`export const manifest = ${generate_manifest({
 						build_data,
+						prerendered: [],
 						relative_path: '.',
 						routes: manifest_data.routes
 					})};\n`
@@ -870,6 +883,37 @@ async function kit({ svelte_config }) {
 							(chunk) => chunk.type === 'chunk' && chunk.modules[env_dynamic_public]
 						)
 					};
+
+					// In case of server-side route resolution, we create a purpose-built route manifest that is
+					// similar to that on the client, with as much information computed upfront so that we
+					// don't need to include any code of the actual routes in the server bundle.
+					if (svelte_config.kit.router.resolution === 'server') {
+						build_data.client.nodes = manifest_data.nodes.map((node, i) => {
+							if (node.component || node.universal) {
+								return resolve_symlinks(
+									client_manifest,
+									`${kit.outDir}/generated/client-optimized/nodes/${i}.js`
+								).chunk.file;
+							}
+						});
+
+						build_data.client.routes = compact(
+							manifest_data.routes.map((route) => {
+								if (!route.page) return;
+
+								return {
+									id: route.id,
+									pattern: route.pattern,
+									params: route.params,
+									layouts: route.page.layouts.map((l) =>
+										l !== undefined ? [metadata.nodes[l].has_server_load, l] : undefined
+									),
+									errors: route.page.errors,
+									leaf: [metadata.nodes[route.page.leaf].has_server_load, route.page.leaf]
+								};
+							})
+						);
+					}
 				} else {
 					const start = deps_of(`${runtime_directory}/client/bundle.js`);
 
@@ -910,6 +954,7 @@ async function kit({ svelte_config }) {
 					manifest_path,
 					`export const manifest = ${generate_manifest({
 						build_data,
+						prerendered: [],
 						relative_path: '.',
 						routes: manifest_data.routes
 					})};\n`
@@ -941,6 +986,7 @@ async function kit({ svelte_config }) {
 					`${out}/server/manifest.js`,
 					`export const manifest = ${generate_manifest({
 						build_data,
+						prerendered: prerendered.paths,
 						relative_path: '.',
 						routes: manifest_data.routes.filter((route) => prerender_map.get(route.id) !== true)
 					})};\n`

package/src/runtime/app/state/index.js

@@ -32,6 +32,17 @@ import { BROWSER } from 'esm-env';
  * {/if}
  * ```
  *
+ * Changes to `page` are available exclusively with runes. (The legacy reactivity syntax will not reflect any changes)
+ *
+ * ```svelte
+ * <!--- file: +page.svelte --->
+ * <script>
+ * 	import { page } from '$app/state';
+ * 	const id = $derived(page.params.id); // This will correctly update id for usage on this page
+ * 	$: badId = page.params.id; // Do not use; will never update after initial load
+ * </script>
+ * ```
+ *
  * On the server, values can only be read during rendering (in other words _not_ in e.g. `load` functions). In the browser, the values can be read at any time.
  *
  * @type {import('@sveltejs/kit').Page}