@sveltejs/kit 2.54.0 → 2.56.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "2.54.0",
+  "version": "2.56.0",
   "description": "SvelteKit is the fastest way to build Svelte apps",
   "keywords": [
     "framework",
@@ -40,8 +40,7 @@
     "@types/set-cookie-parser": "^2.4.7",
     "dts-buddy": "^0.7.0",
     "rollup": "^4.59.0",
-    "svelte": "^5.53.5",
-    "svelte-preprocess": "^6.0.0",
+    "svelte": "^5.53.12",
     "typescript": "^5.3.3",
     "vite": "^6.3.5",
     "vitest": "^4.0.0"
@@ -50,7 +49,7 @@
     "@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0 || ^6.0.0-next.0 || ^7.0.0",
     "@opentelemetry/api": "^1.0.0",
     "svelte": "^4.0.0 || ^5.0.0-next.0",
-    "typescript": "^5.3.3",
+    "typescript": "^5.3.3 || ^6.0.0",
     "vite": "^5.0.3 || ^6.0.0 || ^7.0.0-beta.0 || ^8.0.0"
   },
   "peerDependenciesMeta": {

package/src/core/postbuild/analyse.js

@@ -163,12 +163,12 @@ async function analyse({
 		const exports = new Map();
 
 		for (const name in functions) {
-			const info = /** @type {import('types').RemoteInfo} */ (functions[name].__);
-			const type = info.type;
+			const internals = /** @type {import('types').RemoteInternals} */ (functions[name].__);
+			const type = internals.type;
 
 			exports.set(name, {
 				type,
-				dynamic: type !== 'prerender' || info.dynamic
+				dynamic: type !== 'prerender' || internals.dynamic
 			});
 		}
 

package/src/core/postbuild/prerender.js

@@ -496,7 +496,7 @@ async function prerender({ hash, out, manifest_path, metadata, verbose, env }) {
 	internal.set_manifest(manifest);
 	internal.set_read_implementation((file) => createReadableStream(`${out}/server/${file}`));
 
-	/** @type {Array<import('types').RemoteInfo & { type: 'prerender'}>} */
+	/** @type {Array<import('types').RemotePrerenderInternals>} */
 	const prerender_functions = [];
 
 	for (const loader of Object.values(manifest._.remotes)) {
@@ -549,13 +549,16 @@ async function prerender({ hash, out, manifest_path, metadata, verbose, env }) {
 	}
 
 	const transport = (await internal.get_hooks()).transport ?? {};
-	for (const info of prerender_functions) {
-		if (info.has_arg) {
-			for (const arg of (await info.inputs?.()) ?? []) {
-				void enqueue(null, remote_prefix + info.id + '/' + stringify_remote_arg(arg, transport));
+	for (const internals of prerender_functions) {
+		if (internals.has_arg) {
+			for (const arg of (await internals.inputs?.()) ?? []) {
+				void enqueue(
+					null,
+					remote_prefix + internals.id + '/' + stringify_remote_arg(arg, transport)
+				);
 			}
 		} else {
-			void enqueue(null, remote_prefix + info.id);
+			void enqueue(null, remote_prefix + internals.id);
 		}
 	}
 

package/src/core/sync/write_non_ambient.js

@@ -1,5 +1,6 @@
 import path from 'node:path';
 import { GENERATED_COMMENT } from '../../constants.js';
+import { posixify } from '../../utils/filesystem.js';
 import { write_if_changed } from './utils.js';
 import { s } from '../../utils/misc.js';
 import { get_route_segments } from '../../utils/routing.js';
@@ -24,25 +25,25 @@ function get_pathnames_for_trailing_slash(pathname, route) {
 		return [pathname];
 	}
 
-	/** @type {({ trailingSlash?: import('types').TrailingSlash } | null)[]} */
-	const routes = [];
-
-	if (route.leaf) routes.push(route.leaf.page_options ?? null);
-	if (route.endpoint) routes.push(route.endpoint.page_options);
-
 	/** @type {Set<string>} */
 	const pathnames = new Set();
 
-	for (const page_options of routes) {
-		if (page_options === null || page_options.trailingSlash === 'ignore') {
+	/**
+	 * @param {{ trailingSlash?: import('types').TrailingSlash } | null | undefined} page_options
+	 */
+	const add_pathnames = (page_options) => {
+		if (page_options === null || page_options?.trailingSlash === 'ignore') {
 			pathnames.add(pathname);
 			pathnames.add(pathname + '/');
-		} else if (page_options.trailingSlash === 'always') {
+		} else if (page_options?.trailingSlash === 'always') {
 			pathnames.add(pathname + '/');
 		} else {
 			pathnames.add(pathname);
 		}
-	}
+	};
+
+	if (route.leaf) add_pathnames(route.leaf.page_options ?? null);
+	if (route.endpoint) add_pathnames(route.endpoint.page_options);
 
 	return Array.from(pathnames);
 }
@@ -81,8 +82,66 @@ export {};
 /**
  * Generate app types interface extension
  * @param {import('types').ManifestData} manifest_data
+ * @param {import('types').ValidatedKitConfig} config
  */
-function generate_app_types(manifest_data) {
+function generate_app_types(manifest_data, config) {
+	/** @param {string} matcher */
+	const path_to_matcher = (matcher) =>
+		posixify(path.relative(config.outDir, path.join(config.files.params, matcher + '.js')));
+
+	/** @type {Map<string, string>} */
+	const matcher_types = new Map();
+
+	/** @param {string | undefined} matcher */
+	const get_matcher_type = (matcher) => {
+		if (!matcher) return 'string';
+
+		let type = matcher_types.get(matcher);
+		if (!type) {
+			type = `MatcherParam<typeof import('${path_to_matcher(matcher)}').match>`;
+			matcher_types.set(matcher, type);
+		}
+
+		return type;
+	};
+
+	/** @param {Set<string> | null} matchers */
+	const get_matchers_type = (matchers) => {
+		if (matchers === null) return 'string';
+
+		return Array.from(matchers)
+			.map((matcher) => get_matcher_type(matcher))
+			.join(' | ');
+	};
+
+	/** @type {Set<string>} */
+	const route_ids = new Set(manifest_data.routes.map((route) => route.id));
+
+	/**
+	 * @param {string} id
+	 * @returns {string[]}
+	 */
+	const get_ancestor_route_ids = (id) => {
+		/** @type {string[]} */
+		const ancestors = [];
+
+		if (route_ids.has('/')) {
+			ancestors.push('/');
+		}
+
+		let current = '';
+		for (const segment of id.slice(1).split('/')) {
+			if (!segment) continue;
+
+			current += '/' + segment;
+			if (route_ids.has(current)) {
+				ancestors.push(current);
+			}
+		}
+
+		return ancestors;
+	};
+
 	/** @type {Set<string>} */
 	const pathnames = new Set();
 
@@ -92,49 +151,96 @@ function generate_app_types(manifest_data) {
 	/** @type {string[]} */
 	const layouts = [];
 
+	/** @type {Map<string, Map<string, { optional: boolean, matchers: Set<string> | null }>>} */
+	const layout_params_by_route = new Map(
+		manifest_data.routes.map((route) => [
+			route.id,
+			new Map(
+				route.params.map((p) => [
+					p.name,
+					{ optional: p.optional, matchers: p.matcher ? new Set([p.matcher]) : null }
+				])
+			)
+		])
+	);
+
 	for (const route of manifest_data.routes) {
+		const ancestors = get_ancestor_route_ids(route.id);
+
+		for (const ancestor_id of ancestors) {
+			const ancestor_params = layout_params_by_route.get(ancestor_id);
+			if (!ancestor_params) continue;
+
+			for (const p of route.params) {
+				const matcher = p.matcher ?? null;
+				const entry = ancestor_params.get(p.name);
+				if (!entry) {
+					ancestor_params.set(p.name, {
+						optional: true,
+						matchers: matcher === null ? null : new Set([matcher])
+					});
+					continue;
+				}
+
+				if (entry.matchers === null) continue;
+
+				if (matcher === null) {
+					entry.matchers = null;
+					continue;
+				}
+
+				entry.matchers.add(matcher);
+			}
+		}
+	}
+
+	for (const route of manifest_data.routes) {
+		const pathname = remove_group_segments(route.id);
+		let normalized_pathname = pathname;
+
+		/** @type {(path: string) => string} */
+		let serialise = s;
+
 		if (route.params.length > 0) {
-			const params = route.params.map((p) => `${p.name}${p.optional ? '?:' : ':'} string`);
+			const params = route.params.map((p) => {
+				const type = get_matcher_type(p.matcher);
+				return `${p.name}${p.optional ? '?:' : ':'} ${type}`;
+			});
 			const route_type = `${s(route.id)}: { ${params.join('; ')} }`;
 
 			dynamic_routes.push(route_type);
 
-			const pathname = remove_group_segments(route.id);
-			const replaced_pathname = replace_required_params(replace_optional_params(pathname));
+			normalized_pathname = replace_required_params(replace_optional_params(pathname));
+			serialise = (p) => `\`${p}\` & {}`;
+		}
 
-			for (const p of get_pathnames_for_trailing_slash(replaced_pathname, route)) {
-				pathnames.add(`\`${p}\` & {}`);
-			}
-		} else {
-			const pathname = remove_group_segments(route.id);
-			for (const p of get_pathnames_for_trailing_slash(pathname, route)) {
-				pathnames.add(s(p));
-			}
+		for (const p of get_pathnames_for_trailing_slash(normalized_pathname, route)) {
+			pathnames.add(serialise(p));
 		}
 
-		/** @type {Map<string, boolean>} */
-		const child_params = new Map(route.params.map((p) => [p.name, p.optional]));
+		let layout_type = 'Record<string, never>';
 
-		for (const child of manifest_data.routes.filter((r) => r.id.startsWith(route.id))) {
-			for (const p of child.params) {
-				if (!child_params.has(p.name)) {
-					child_params.set(p.name, true); // always optional
-				}
-			}
-		}
+		const layout_params = layout_params_by_route.get(route.id);
+		if (layout_params) {
+			const params = Array.from(layout_params)
+				.map(([name, { optional, matchers }]) => {
+					const type = get_matchers_type(matchers);
+					return `${name}${optional ? '?:' : ':'} ${type}`;
+				})
+				.join('; ');
 
-		const layout_params = Array.from(child_params)
-			.map(([name, optional]) => `${name}${optional ? '?:' : ':'} string`)
-			.join('; ');
+			if (params.length > 0) layout_type = `{ ${params} }`;
+		}
 
-		const layout_type = `${s(route.id)}: ${layout_params.length > 0 ? `{ ${layout_params} }` : 'Record<string, never>'}`;
-		layouts.push(layout_type);
+		layouts.push(`${s(route.id)}: ${layout_type}`);
 	}
 
 	const assets = manifest_data.assets.map((asset) => s('/' + asset.file));
 
 	return [
 		'declare module "$app/types" {',
+		'\ttype MatcherParam<M> = M extends (param : string) => param is (infer U extends string) ? U : string;',
+		'',
 		'\texport interface AppTypes {',
 		`\t\tRouteId(): ${manifest_data.routes.map((r) => s(r.id)).join(' | ')};`,
 		`\t\tRouteParams(): {\n\t\t\t${dynamic_routes.join(';\n\t\t\t')}\n\t\t};`,
@@ -153,7 +259,7 @@ function generate_app_types(manifest_data) {
  * @param {import('types').ManifestData} manifest_data
  */
 export function write_non_ambient(config, manifest_data) {
-	const app_types = generate_app_types(manifest_data);
+	const app_types = generate_app_types(manifest_data, config);
 	const content = [template, app_types].join('\n\n');
 
 	write_if_changed(path.join(config.outDir, 'non-ambient.d.ts'), content);

package/src/core/sync/write_tsconfig.js

@@ -121,7 +121,8 @@ export function get_tsconfig(kit) {
 			moduleResolution: 'bundler',
 			module: 'esnext',
 			noEmit: true, // prevent tsconfig error "overwriting input files" - Vite handles the build and ignores this
-			target: 'esnext'
+			target: 'esnext',
+			types: ['node']
 		},
 		include: [...include],
 		exclude
@@ -165,6 +166,7 @@ function validate_user_config(cwd, out, config) {
 	if (extends_framework_config) {
 		const { paths, baseUrl } = options;
 
+		// TODO: baseUrl will be removed in TypeScript 7.0
 		if (baseUrl || paths) {
 			console.warn(
 				colors

package/src/core/sync/write_types/index.js

@@ -199,11 +199,7 @@ function update_types(config, routes, route, to_delete = new Set()) {
 
 	// returns the predicate of a matcher's type guard - or string if there is no type guard
 	declarations.push(
-		// TS complains on infer U, which seems weird, therefore ts-ignore it
-		[
-			'// @ts-ignore',
-			'type MatcherParam<M> = M extends (param : string) => param is infer U ? U extends string ? U : string : string;'
-		].join('\n')
+		'type MatcherParam<M> = M extends (param : string) => param is (infer U extends string) ? U : string;'
 	);
 
 	declarations.push(

package/src/exports/internal/remote-functions.js

@@ -1,6 +1,6 @@
-/** @import { RemoteInfo } from 'types' */
+/** @import { RemoteInternals } from 'types' */
 
-/** @type {RemoteInfo['type'][]} */
+/** @type {RemoteInternals['type'][]} */
 const types = ['command', 'form', 'prerender', 'query', 'query_batch'];
 
 /**

package/src/exports/public.d.ts

@@ -1452,6 +1452,22 @@ export interface Page<
  */
 export type ParamMatcher = (param: string) => boolean;
 
+export type RequestedResult<T> = Iterable<T> &
+	AsyncIterable<T> & {
+		/**
+		 * Call `refresh` on all queries selected by this `requested` invocation.
+		 * This is identical to:
+		 * ```ts
+		 * import { requested } from '$app/server';
+		 *
+		 * for await (const arg of requested(query, ...) {
+		 *   void query(arg).refresh();
+		 * }
+		 * ```
+		 */
+		refreshAll: () => Promise<void>;
+	};
+
 export interface RequestEvent<
 	Params extends AppLayoutParams<'/'> = AppLayoutParams<'/'>,
 	RouteId extends AppRouteId | null = AppRouteId | null
@@ -1914,10 +1930,12 @@ export type RemoteFormFieldValue = string | string[] | number | boolean | File |
 type AsArgs<Type extends keyof InputTypeMap, Value> = Type extends 'checkbox'
 	? Value extends string[]
 		? [type: Type, value: Value[number] | (string & {})]
-		: [type: Type]
+		: [type: Type] | [type: Type, value: Value | (string & {})]
 	: Type extends 'radio' | 'submit' | 'hidden'
 		? [type: Type, value: Value | (string & {})]
-		: [type: Type];
+		: Type extends 'file' | 'file multiple'
+			? [type: Type]
+			: [type: Type] | [type: Type, value: Value | (string & {})];
 
 /**
  * Form field accessor type that provides name(), value(), and issues() methods
@@ -2058,7 +2076,7 @@ export type RemoteForm<Input extends RemoteFormInput | void, Output> = {
 			form: HTMLFormElement;
 			data: Input;
 			submit: () => Promise<void> & {
-				updates: (...queries: Array<RemoteQuery<any> | RemoteQueryOverride>) => Promise<void>;
+				updates: (...updates: RemoteQueryUpdate[]) => Promise<void>;
 			};
 		}) => void | Promise<void>
 	): {
@@ -2102,14 +2120,19 @@ export type RemoteForm<Input extends RemoteFormInput | void, Output> = {
  * The return value of a remote `command` function. See [Remote functions](https://svelte.dev/docs/kit/remote-functions#command) for full documentation.
  */
 export type RemoteCommand<Input, Output> = {
-	(arg: undefined extends Input ? Input | void : Input): Promise<Awaited<Output>> & {
-		updates(...queries: Array<RemoteQuery<any> | RemoteQueryOverride>): Promise<Awaited<Output>>;
+	(arg: undefined extends Input ? Input | void : Input): Promise<Output> & {
+		updates(...updates: RemoteQueryUpdate[]): Promise<Output>;
 	};
 	/** The number of pending command executions */
 	get pending(): number;
 };
 
-export type RemoteResource<T> = Promise<Awaited<T>> & {
+export type RemoteQueryUpdate =
+	| RemoteQuery<any>
+	| RemoteQueryFunction<any, any>
+	| RemoteQueryOverride;
+
+export type RemoteResource<T> = Promise<T> & {
 	/** The error in case the query fails. Most often this is a [`HttpError`](https://svelte.dev/docs/kit/@sveltejs-kit#HttpError) but it isn't guaranteed to be. */
 	get error(): any;
 	/** `true` before the first result is available and during refreshes */
@@ -2122,12 +2145,18 @@ export type RemoteResource<T> = Promise<Awaited<T>> & {
 		  }
 		| {
 				/** The current value of the query. Undefined until `ready` is `true` */
-				get current(): Awaited<T>;
+				get current(): T;
 				ready: true;
 		  }
 	);
 
 export type RemoteQuery<T> = RemoteResource<T> & {
+	/**
+	 * Returns a plain promise with the result.
+	 * Unlike awaiting the resource directly, this can only be used _outside_ render
+	 * (i.e. in load functions, event handlers and so on)
+	 */
+	run(): Promise<T>;
 	/**
 	 * On the client, this function will update the value of the query without re-fetching it.
 	 *
@@ -2161,13 +2190,10 @@ export type RemoteQuery<T> = RemoteResource<T> & {
 	 * </form>
 	 * ```
 	 */
-	withOverride(update: (current: Awaited<T>) => Awaited<T>): RemoteQueryOverride;
+	withOverride(update: (current: T) => T): RemoteQueryOverride;
 };
 
-export interface RemoteQueryOverride {
-	_key: string;
-	release(): void;
-}
+export type RemoteQueryOverride = () => void;
 
 /**
  * The return value of a remote `prerender` function. See [Remote functions](https://svelte.dev/docs/kit/remote-functions#prerender) for full documentation.

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

@@ -1,10 +1,17 @@
 import fs from 'node:fs';
 import { mkdirp } from '../../../utils/filesystem.js';
-import { create_function_as_string, filter_fonts, find_deps, resolve_symlinks } from './utils.js';
+import {
+	create_function_as_string,
+	filter_fonts,
+	find_deps,
+	generate_placeholder,
+	resolve_symlinks
+} from './utils.js';
 import { s } from '../../../utils/misc.js';
 import { normalizePath } from 'vite';
 import { basename } from 'node:path';
 import { fix_css_urls } from '../../../utils/css.js';
+import { escape_for_interpolation } from '../../../utils/escape.js';
 
 /**
  * @param {string} out
@@ -67,18 +74,31 @@ export function build_server_nodes(
 			const static_asset_prefix = segments.map(() => '..').join('/') + '/';
 
 			prepare_css_for_inlining = (css, eager_assets) => {
+				const assets_placeholder = generate_placeholder(css, 'ASSETS');
+				const base_placeholder = generate_placeholder(css, 'BASE');
+
 				const transformed_css = fix_css_urls({
 					css,
 					vite_assets: eager_assets,
 					static_assets,
-					paths_assets: '${assets}',
-					base: '${base}',
+					paths_assets: assets_placeholder,
+					base: base_placeholder,
 					static_asset_prefix
 				});
 
 				// only convert to a function if we have adjusted any URLs
 				if (css !== transformed_css) {
-					return create_function_as_string('css', ['assets', 'base'], transformed_css);
+					const escaped = escape_for_interpolation(transformed_css, [
+						{
+							placeholder: assets_placeholder,
+							replacement: '${assets}'
+						},
+						{
+							placeholder: base_placeholder,
+							replacement: '${base}'
+						}
+					]);
+					return create_function_as_string('css', ['assets', 'base'], escaped);
 				}
 
 				return s(css);

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

@@ -8,7 +8,7 @@ import { create_static_module } from '../../../core/env.js';
 import { env_static_public, service_worker } from '../module_ids.js';
 
 // @ts-ignore `vite.rolldownVersion` only exists in `rolldown-vite`
-const isRolldown = !!vite.rolldownVersion;
+const is_rolldown = !!vite.rolldownVersion;
 
 /**
  * @param {string} out
@@ -98,7 +98,8 @@ export async function build_service_worker(
 		}
 	};
 
-	await vite.build({
+	/** @type {import('vite').InlineConfig} */
+	const config = {
 		build: {
 			modulePreload: false,
 			rollupOptions: {
@@ -107,9 +108,9 @@ export async function build_service_worker(
 				},
 				output: {
 					// .mjs so that esbuild doesn't incorrectly inject `export` https://github.com/vitejs/vite/issues/15379
-					entryFileNames: `service-worker.${isRolldown ? 'js' : 'mjs'}`,
+					entryFileNames: `service-worker.${is_rolldown ? 'js' : 'mjs'}`,
 					assetFileNames: `${kit.appDir}/immutable/assets/[name].[hash][extname]`,
-					inlineDynamicImports: true
+					inlineDynamicImports: !is_rolldown
 				}
 			},
 			outDir: `${out}/client`,
@@ -130,10 +131,19 @@ export async function build_service_worker(
 				};
 			}
 		}
-	});
+	};
+
+	// we must reference Vite 8 options conditionally. Otherwise, older Vite
+	// versions throw an error about unknown config options
+	if (is_rolldown && config?.build?.rollupOptions?.output) {
+		// @ts-ignore only available in Vite 8
+		config.build.rollupOptions.output.codeSplitting = true;
+	}
+
+	await vite.build(config);
 
 	// rename .mjs to .js to avoid incorrect MIME types with ancient webservers
-	if (!isRolldown) {
+	if (!is_rolldown) {
 		fs.renameSync(`${out}/client/service-worker.mjs`, `${out}/client/service-worker.js`);
 	}
 }

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

@@ -1,7 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import { normalizePath } from 'vite';
-import { s } from '../../../utils/misc.js';
 
 /**
  * Adds transitive JS and CSS dependencies to the js and css inputs.
@@ -137,11 +136,27 @@ export function assets_base(config) {
  * @param {string} name The name of the function
  * @param {string[]} placeholder_names The names of the placeholders in the string
  * @param {string} str A string with placeholders such as "Hello ${arg0}".
- * 										 It must have backticks and dollar signs escaped.
+ * 										 It must have backslashes, backticks and dollar signs already escaped.
  * @returns {string} The function written as a string
  */
 export function create_function_as_string(name, placeholder_names, str) {
-	str = s(str).slice(1, -1);
 	const args = placeholder_names ? placeholder_names.join(', ') : '';
 	return `function ${name}(${args}) { return \`${str}\`; }`;
 }
+
+/**
+ * Guarantees that the generated placeholder is not already present in the content.
+ * @param {string} content
+ * @param {string} key
+ * @returns {string}
+ */
+export function generate_placeholder(content, key) {
+	let id = 1;
+	let placeholder = `__SVELTEKIT_${key}_${id}__`;
+
+	while (content.includes(placeholder)) {
+		placeholder = `__SVELTEKIT_${key}_${++id}__`;
+	}
+
+	return placeholder;
+}