@sveltejs/kit 2.56.0 → 2.57.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "2.56.0",
+  "version": "2.57.0",
   "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/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
@@ -200,7 +201,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 */
@@ -2075,10 +2082,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;
@@ -2172,7 +2179,7 @@ export type RemoteQuery<T> = RemoteResource<T> & {
 	 */
 	refresh(): Promise<void>;
 	/**
-	 * Temporarily override the value of a query. This is used with the `updates` method of a [command](https://svelte.dev/docs/kit/remote-functions#command-Updating-queries) or [enhanced form submission](https://svelte.dev/docs/kit/remote-functions#form-enhance) to provide optimistic updates.
+	 * Temporarily override a query's value during a [single-flight mutation](https://svelte.dev/docs/kit/remote-functions#Single-flight-mutations) to provide optimistic updates.
 	 *
 	 * ```svelte
 	 * <script>

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);
 				}