@sveltejs/kit 2.56.1 → 2.57.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "2.56.1",
+  "version": "2.57.1",
   "description": "SvelteKit is the fastest way to build Svelte apps",
   "keywords": [
     "framework",
@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@opentelemetry/api": "^1.0.0",
-    "@playwright/test": "1.58.2",
+    "@playwright/test": "^1.59.1",
     "@sveltejs/vite-plugin-svelte": "^6.0.0-next.3",
     "@types/connect": "^3.4.38",
     "@types/node": "^18.19.119",

package/src/core/config/index.js

@@ -3,6 +3,7 @@ import path from 'node:path';
 import process from 'node:process';
 import * as url from 'node:url';
 import options from './options.js';
+import { resolve_entry } from '../../utils/filesystem.js';
 
 /**
  * Loads the template (src/app.html by default) and validates that it has the
@@ -96,7 +97,7 @@ export async function load_config({ cwd = process.cwd() } = {}) {
  * @returns {import('types').ValidatedConfig}
  */
 function process_config(config, { cwd = process.cwd() } = {}) {
-	const validated = validate_config(config);
+	const validated = validate_config(config, cwd);
 
 	validated.kit.outDir = path.resolve(cwd, validated.kit.outDir);
 
@@ -116,15 +117,17 @@ function process_config(config, { cwd = process.cwd() } = {}) {
 
 /**
  * @param {import('@sveltejs/kit').Config} config
+ * @param {string} [cwd]
  * @returns {import('types').ValidatedConfig}
  */
-export function validate_config(config) {
+export function validate_config(config, cwd = process.cwd()) {
 	if (typeof config !== 'object') {
 		throw new Error(
 			'The Svelte config file must have a configuration object as its default export. See https://svelte.dev/docs/kit/configuration'
 		);
 	}
 
+	/** @type {import('types').ValidatedConfig} */
 	const validated = options(config, 'config');
 	const files = validated.kit.files;
 
@@ -151,5 +154,22 @@ export function validate_config(config) {
 		}
 	}
 
+	if (validated.kit.csp?.directives?.['require-trusted-types-for']?.includes('script')) {
+		if (!validated.kit.csp?.directives?.['trusted-types']?.includes('svelte-trusted-html')) {
+			throw new Error(
+				"The `csp.directives['trusted-types']` option must include 'svelte-trusted-html'"
+			);
+		}
+		if (
+			validated.kit.serviceWorker?.register &&
+			resolve_entry(path.resolve(cwd, validated.kit.files.serviceWorker)) &&
+			!validated.kit.csp?.directives?.['trusted-types']?.includes('sveltekit-trusted-url')
+		) {
+			throw new Error(
+				"The `csp.directives['trusted-types']` option must include 'sveltekit-trusted-url' when `serviceWorker.register` is true"
+			);
+		}
+	}
+
 	return validated;
 }

package/src/core/config/options.js

@@ -1,7 +1,8 @@
+/** @import { Validator } from './types.js' */
+
 import process from 'node:process';
 import colors from 'kleur';
-
-/** @typedef {import('./types.js').Validator} Validator */
+import { supportsTrustedTypes } from '../sync/utils.js';
 
 const directives = object({
 	'child-src': string_array(),
@@ -28,8 +29,14 @@ const directives = object({
 	'navigate-to': string_array(),
 	'report-uri': string_array(),
 	'report-to': string_array(),
-	'require-trusted-types-for': string_array(),
-	'trusted-types': string_array(),
+	'require-trusted-types-for': validate(undefined, (input, keypath) => {
+		assert_trusted_types_supported(keypath);
+		return string_array()(input, keypath);
+	}),
+	'trusted-types': validate(undefined, (input, keypath) => {
+		assert_trusted_types_supported(keypath);
+		return string_array()(input, keypath);
+	}),
 	'upgrade-insecure-requests': boolean(false),
 	'require-sri-for': string_array(),
 	'block-all-mixed-content': boolean(false),
@@ -486,4 +493,13 @@ function assert_string(input, keypath) {
 	}
 }
 
+/** @param {string} keypath */
+function assert_trusted_types_supported(keypath) {
+	if (!supportsTrustedTypes()) {
+		throw new Error(
+			`${keypath} is not supported by your version of Svelte. Please upgrade to Svelte 5.51.0 or later to use this directive.`
+		);
+	}
+}
+
 export default options;

package/src/core/postbuild/prerender.js

@@ -3,6 +3,7 @@ import { dirname, join } from 'node:path';
 import { pathToFileURL } from 'node:url';
 import { installPolyfills } from '../../exports/node/polyfills.js';
 import { mkdirp, posixify, walk } from '../../utils/filesystem.js';
+import { noop } from '../../utils/functions.js';
 import { decode_uri, is_root_relative, resolve } from '../../utils/url.js';
 import { escape_html } from '../../utils/escape.js';
 import { logger } from '../utils.js';
@@ -69,7 +70,7 @@ async function prerender({ hash, out, manifest_path, metadata, verbose, env }) {
 					log.error(format(details));
 				};
 			case 'ignore':
-				return () => {};
+				return noop;
 			default:
 				// @ts-expect-error TS thinks T might be of a different kind, but it's not
 				return (details) => input({ ...details, message: format(details) });

package/src/core/sync/utils.js

@@ -6,6 +6,8 @@ import { import_peer } from '../../utils/import.js';
 /** @type {{ VERSION: string }} */
 const { VERSION } = await import_peer('svelte/compiler');
 
+const [MAJOR, MINOR] = VERSION.split('.').map(Number);
+
 /** @type {Map<string, string>} */
 const previous_contents = new Map();
 
@@ -74,5 +76,10 @@ export function dedent(strings, ...values) {
 }
 
 export function isSvelte5Plus() {
-	return Number(VERSION[0]) >= 5;
+	return MAJOR >= 5;
+}
+
+// TODO 3.0 remove this once we can bump the peerDep range
+export function supportsTrustedTypes() {
+	return (MAJOR === 5 && MINOR >= 51) || MAJOR > 5;
 }

package/src/core/utils.js

@@ -4,6 +4,7 @@ import process from 'node:process';
 import { fileURLToPath } from 'node:url';
 import colors from 'kleur';
 import { posixify, to_fs } from '../utils/filesystem.js';
+import { noop } from '../utils/functions.js';
 
 /**
  * Resolved path of the `runtime` directory
@@ -24,8 +25,6 @@ export const runtime_base = runtime_directory.startsWith(process.cwd())
 	? `/${path.relative('.', runtime_directory)}`
 	: to_fs(runtime_directory);
 
-function noop() {}
-
 /** @param {{ verbose: boolean }} opts */
 export function logger({ verbose }) {
 	/** @type {import('types').Logger} */

package/src/exports/index.js

@@ -106,7 +106,7 @@ export function isHttpError(e, status) {
  * @param {300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number)} status The [HTTP status code](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#redirection_messages). Must be in the range 300-308.
  * @param {string | URL} location The location to redirect to.
  * @throws {Redirect} This error instructs SvelteKit to redirect to the specified location.
- * @throws {Error} If the provided status is invalid.
+ * @throws {Error} If the provided status is invalid or the location cannot be used as a header value.
  * @return {never}
  */
 export function redirect(status, location) {

package/src/exports/internal/index.js

@@ -27,6 +27,15 @@ export class Redirect {
 	 * @param {string} location
 	 */
 	constructor(status, location) {
+		try {
+			new Headers({ location });
+		} catch {
+			throw new Error(
+				`Invalid redirect location ${JSON.stringify(location)}: ` +
+					'this string contains characters that cannot be used in HTTP headers'
+			);
+		}
+
 		this.status = status;
 		this.location = location;
 	}

package/src/exports/node/index.js

@@ -2,6 +2,7 @@ import { createReadStream } from 'node:fs';
 import { Readable } from 'node:stream';
 import * as set_cookie_parser from 'set-cookie-parser';
 import { SvelteKitError } from '../internal/index.js';
+import { noop } from '../../utils/functions.js';
 
 /**
  * @param {import('http').IncomingMessage} req
@@ -15,10 +16,11 @@ function get_raw_body(req, body_size_limit) {
 	}
 
 	const content_length = Number(h['content-length']);
+	const has_content_length = Number.isFinite(content_length);
 
 	// check if no request body
 	if (
-		(req.httpVersionMajor === 1 && isNaN(content_length) && h['transfer-encoding'] == null) ||
+		(req.httpVersionMajor === 1 && !has_content_length && h['transfer-encoding'] == null) ||
 		content_length === 0
 	) {
 		return null;
@@ -35,7 +37,7 @@ function get_raw_body(req, body_size_limit) {
 
 	return new ReadableStream({
 		start(controller) {
-			if (body_size_limit !== undefined && content_length > body_size_limit) {
+			if (body_size_limit !== undefined && has_content_length && content_length > body_size_limit) {
 				let message = `Content-length of ${content_length} exceeds limit of ${body_size_limit} bytes.`;
 
 				if (body_size_limit === 0) {
@@ -64,11 +66,22 @@ function get_raw_body(req, body_size_limit) {
 				if (cancelled) return;
 
 				size += chunk.length;
-				if (size > content_length) {
+
+				if (body_size_limit !== undefined && size > body_size_limit) {
+					cancelled = true;
+
+					const message = `request body size exceeded BODY_SIZE_LIMIT of ${body_size_limit}`;
+
+					const error = new SvelteKitError(413, 'Payload Too Large', message);
+					controller.error(error);
+
+					return;
+				}
+
+				if (has_content_length && size > content_length) {
 					cancelled = true;
 
-					const constraint = content_length ? 'content-length' : 'BODY_SIZE_LIMIT';
-					const message = `request body size exceeded ${constraint} of ${content_length}`;
+					const message = `request body size exceeded content-length of ${content_length}`;
 
 					const error = new SvelteKitError(413, 'Payload Too Large', message);
 					controller.error(error);
@@ -200,7 +213,7 @@ export async function setResponse(res, response) {
 
 		// If the reader has already been interrupted with an error earlier,
 		// then it will appear here, it is useless, but it needs to be catch.
-		reader.cancel(error).catch(() => {});
+		reader.cancel(error).catch(noop);
 		if (error) res.destroy(error);
 	};
 

package/src/exports/public.d.ts

@@ -1893,28 +1893,35 @@ type InputElementProps<T extends keyof InputTypeMap> = T extends 'checkbox' | 'r
 				get files(): FileList | null;
 				set files(v: FileList | null);
 			}
-		: T extends 'select' | 'select multiple'
+		: T extends 'select'
 			? {
 					name: string;
-					multiple: T extends 'select' ? false : true;
 					'aria-invalid': boolean | 'false' | 'true' | undefined;
-					get value(): string | number;
-					set value(v: string | number);
+					get value(): string;
+					set value(v: string);
 				}
-			: T extends 'text'
+			: T extends 'select multiple'
 				? {
 						name: string;
+						multiple: true;
 						'aria-invalid': boolean | 'false' | 'true' | undefined;
-						get value(): string | number;
-						set value(v: string | number);
+						get value(): string[];
+						set value(v: string[]);
 					}
-				: {
-						name: string;
-						type: T;
-						'aria-invalid': boolean | 'false' | 'true' | undefined;
-						get value(): string | number;
-						set value(v: string | number);
-					};
+				: T extends 'text'
+					? {
+							name: string;
+							'aria-invalid': boolean | 'false' | 'true' | undefined;
+							get value(): string | number;
+							set value(v: string | number);
+						}
+					: {
+							name: string;
+							type: T;
+							'aria-invalid': boolean | 'false' | 'true' | undefined;
+							get value(): string | number;
+							set value(v: string | number);
+						};
 
 type RemoteFormFieldMethods<T> = {
 	/** The values that will be submitted */
@@ -1925,6 +1932,15 @@ type RemoteFormFieldMethods<T> = {
 	issues(): RemoteFormIssue[] | undefined;
 };
 
+// These two types use "T extends unknown ? .. : .." to distribute over unions.
+// Example: if "type T = A | b" then "keyof T" only contains keys that both A and B have, with "KeysOfUnion<T>" we get the keys of both A and B
+type KeysOfUnion<T> = T extends unknown ? keyof T : never;
+type ValueOfUnionKey<T, K extends PropertyKey> = T extends unknown
+	? K extends keyof T
+		? T[K]
+		: never
+	: never;
+
 export type RemoteFormFieldValue = string | string[] | number | boolean | File | File[];
 
 type AsArgs<Type extends keyof InputTypeMap, Value> = Type extends 'checkbox'
@@ -1997,14 +2013,15 @@ export type RemoteFormFields<T> =
 		? RecursiveFormFields
 		: NonNullable<T> extends string | number | boolean | File
 			? RemoteFormField<NonNullable<T>>
-			: T extends string[] | File[]
+			: // [T] is used to prevent distributing over union, only the last condition should distribute over unions
+				[T] extends [string[] | File[]]
 				? RemoteFormField<T> & { [K in number]: RemoteFormField<T[number]> }
-				: T extends Array<infer U>
+				: [T] extends [Array<infer U>]
 					? RemoteFormFieldContainer<T> & {
 							[K in number]: RemoteFormFields<U>;
 						}
 					: RemoteFormFieldContainer<T> & {
-							[K in keyof T]-?: RemoteFormFields<T[K]>;
+							[K in KeysOfUnion<T>]-?: RemoteFormFields<ValueOfUnionKey<T, K>>;
 						};
 
 // By breaking this out into its own type, we avoid the TS recursion depth limit
@@ -2075,10 +2092,10 @@ export type RemoteForm<Input extends RemoteFormInput | void, Output> = {
 		callback: (opts: {
 			form: HTMLFormElement;
 			data: Input;
-			submit: () => Promise<void> & {
-				updates: (...updates: RemoteQueryUpdate[]) => Promise<void>;
+			submit: () => Promise<boolean> & {
+				updates: (...updates: RemoteQueryUpdate[]) => Promise<boolean>;
 			};
-		}) => void | Promise<void>
+		}) => void
 	): {
 		method: 'POST';
 		action: string;

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

@@ -110,7 +110,7 @@ export async function build_service_worker(
 					// .mjs so that esbuild doesn't incorrectly inject `export` https://github.com/vitejs/vite/issues/15379
 					entryFileNames: `service-worker.${is_rolldown ? 'js' : 'mjs'}`,
 					assetFileNames: `${kit.appDir}/immutable/assets/[name].[hash][extname]`,
-					inlineDynamicImports: !is_rolldown
+					inlineDynamicImports: !is_rolldown ? true : undefined
 				}
 			},
 			outDir: `${out}/client`,

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

@@ -0,0 +1,126 @@
+/** @import { ServerMetadata } from 'types' */
+/** @import { Rollup } from 'vite' */
+
+import fs from 'node:fs';
+import path from 'node:path';
+import { Parser } from 'acorn';
+import MagicString from 'magic-string';
+import { posixify } from '../../../utils/filesystem.js';
+import { import_peer } from '../../../utils/import.js';
+
+/**
+ * @param {string} out
+ * @param {Array<{ hash: string, file: string }>} remotes
+ * @param {ServerMetadata} metadata
+ * @param {string} cwd
+ * @param {Rollup.OutputBundle} server_bundle
+ * @param {NonNullable<import('vitest/config').ViteUserConfig['build']>['sourcemap']} sourcemap
+ */
+export async function treeshake_prerendered_remotes(
+	out,
+	remotes,
+	metadata,
+	cwd,
+	server_bundle,
+	sourcemap
+) {
+	if (remotes.length === 0) return;
+
+	const vite = /** @type {typeof import('vite')} */ (await import_peer('vite'));
+
+	for (const remote of remotes) {
+		const exports_map = metadata.remotes.get(remote.hash);
+		if (!exports_map) continue;
+
+		/** @type {string[]} */
+		const dynamic = [];
+		/** @type {string[]} */
+		const prerendered = [];
+
+		for (const [name, value] of exports_map) {
+			(value.dynamic ? dynamic : prerendered).push(name);
+		}
+
+		if (prerendered.length === 0) continue; // nothing to treeshake
+
+		// remove file extension
+		const remote_filename = path.basename(remote.file).split('.').slice(0, -1).join('.');
+
+		const remote_chunk = Object.values(server_bundle).find((chunk) => {
+			return chunk.name === remote_filename;
+		});
+
+		if (!remote_chunk) continue;
+
+		const chunk_path = posixify(path.relative(cwd, `${out}/server/${remote_chunk.fileName}`));
+
+		const code = fs.readFileSync(chunk_path, 'utf-8');
+		const parsed = Parser.parse(code, { sourceType: 'module', ecmaVersion: 'latest' });
+		const modified_code = new MagicString(code);
+
+		for (const fn of prerendered) {
+			for (const node of parsed.body) {
+				const declaration =
+					node.type === 'ExportNamedDeclaration'
+						? node.declaration
+						: node.type === 'VariableDeclaration'
+							? node
+							: null;
+
+				if (!declaration || declaration.type !== 'VariableDeclaration') continue;
+
+				for (const declarator of declaration.declarations) {
+					if (declarator.id.type === 'Identifier' && declarator.id.name === fn) {
+						modified_code.overwrite(
+							node.start,
+							node.end,
+							`const ${fn} = prerender('unchecked', () => { throw new Error('Unexpectedly called prerender function. Did you forget to set { dynamic: true } ?') });`
+						);
+					}
+				}
+			}
+		}
+
+		for (const node of parsed.body) {
+			if (node.type === 'ExportDefaultDeclaration') {
+				modified_code.remove(node.start, node.end);
+			}
+		}
+
+		const stubbed = modified_code.toString();
+		fs.writeFileSync(chunk_path, stubbed);
+
+		const bundle = /** @type {import('vite').Rollup.RollupOutput} */ (
+			await vite.build({
+				configFile: false,
+				build: {
+					write: false,
+					ssr: true,
+					target: 'esnext',
+					sourcemap,
+					rollupOptions: {
+						// avoid resolving imports
+						external: (id) => !id.endsWith(chunk_path),
+						input: {
+							treeshaken: chunk_path
+						}
+					}
+				}
+			})
+		);
+
+		const chunk = bundle.output.find(
+			(output) => output.type === 'chunk' && output.name === 'treeshaken'
+		);
+		if (chunk && chunk.type === 'chunk') {
+			fs.writeFileSync(chunk_path, chunk.code);
+
+			const chunk_sourcemap = bundle.output.find(
+				(output) => output.type === 'asset' && output.fileName === chunk.fileName + '.map'
+			);
+			if (chunk_sourcemap && chunk_sourcemap.type === 'asset') {
+				fs.writeFileSync(chunk_path + '.map', chunk_sourcemap.source);
+			}
+		}
+	}
+}

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

@@ -1,3 +1,5 @@
+/** @import { RequestEvent } from '@sveltejs/kit' */
+/** @import { PrerenderOption, UniversalNode } from 'types' */
 import fs from 'node:fs';
 import path from 'node:path';
 import process from 'node:process';
@@ -15,7 +17,7 @@ import { SVELTE_KIT_ASSETS } from '../../../constants.js';
 import * as sync from '../../../core/sync/sync.js';
 import { get_mime_lookup, runtime_base } from '../../../core/utils.js';
 import { compact } from '../../../utils/array.js';
-import { not_found } from '../utils.js';
+import { is_chrome_devtools_request, not_found } from '../utils.js';
 import { SCHEME } from '../../../utils/url.js';
 import { check_feature } from '../../../utils/features.js';
 import { escape_html } from '../../../utils/escape.js';
@@ -34,13 +36,19 @@ const vite_css_query_regex = /(?:\?|&)(?:raw|url|inline)(?:&|$)/;
 export async function dev(vite, vite_config, svelte_config, get_remotes) {
 	installPolyfills();
 
+	/** @type {AsyncLocalStorage<{ event: RequestEvent, config: any, prerender: PrerenderOption }>} */
 	const async_local_storage = new AsyncLocalStorage();
 
 	globalThis.__SVELTEKIT_TRACK__ = (label) => {
 		const context = async_local_storage.getStore();
 		if (!context || context.prerender === true) return;
 
-		check_feature(context.event.route.id, context.config, label, svelte_config.kit.adapter);
+		check_feature(
+			/** @type {string} */ (context.event.route.id),
+			context.config,
+			label,
+			svelte_config.kit.adapter
+		);
 	};
 
 	const fetch = globalThis.fetch;
@@ -68,7 +76,8 @@ export async function dev(vite, vite_config, svelte_config, get_remotes) {
 	async function loud_ssr_load_module(url) {
 		try {
 			return await vite.ssrLoadModule(url, { fixStacktrace: true });
-		} catch (/** @type {any} */ err) {
+		} catch (/** @type {unknown} */ e) {
+			const err = /** @type {import('rollup').RollupError} */ (e);
 			const msg = buildErrorMessage(err, [colors.red(`Internal server error: ${err.message}`)]);
 
 			if (!vite.config.logger.hasErrorLogged(err)) {
@@ -77,13 +86,13 @@ export async function dev(vite, vite_config, svelte_config, get_remotes) {
 
 			vite.ws.send({
 				type: 'error',
-				err: {
+				err: /** @type {import('vite').ErrorPayload['err']} */ ({
 					...err,
 					// these properties are non-enumerable and will
 					// not be serialized unless we explicitly include them
 					message: err.message,
-					stack: err.stack
-				}
+					stack: err.stack ?? ''
+				})
 			});
 
 			throw err;
@@ -204,7 +213,7 @@ export async function dev(vite, vite_config, svelte_config, get_remotes) {
 
 						if (node.universal) {
 							if (node.page_options?.ssr === false) {
-								result.universal = node.page_options;
+								result.universal = /** @type {UniversalNode} */ (node.page_options);
 							} else {
 								// TODO: explain why the file was loaded on the server if we fail to load it
 								const { module, module_node } = await resolve(node.universal);
@@ -437,7 +446,7 @@ export async function dev(vite, vite_config, svelte_config, get_remotes) {
 	return () => {
 		const serve_static_middleware = vite.middlewares.stack.find(
 			(middleware) =>
-				/** @type {function} */ (middleware.handle).name === 'viteServeStaticMiddleware'
+				/** @type {Function} */ (middleware.handle).name === 'viteServeStaticMiddleware'
 		);
 
 		// Vite will give a 403 on URLs like /test, /static, and /package.json preventing us from
@@ -467,6 +476,10 @@ export async function dev(vite, vite_config, svelte_config, get_remotes) {
 					return;
 				}
 
+				if (is_chrome_devtools_request(decoded, res)) {
+					return;
+				}
+
 				if (!decoded.startsWith(svelte_config.kit.paths.base)) {
 					return not_found(req, res, svelte_config.kit.paths.base);
 				}