@sveltejs/kit 2.50.1 → 2.51.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "2.50.1",
+  "version": "2.51.0",
   "description": "SvelteKit is the fastest way to build Svelte apps",
   "keywords": [
     "framework",
@@ -29,19 +29,19 @@
     "magic-string": "^0.30.5",
     "mrmime": "^2.0.0",
     "sade": "^1.8.1",
-    "set-cookie-parser": "^2.6.0",
+    "set-cookie-parser": "^3.0.0",
     "sirv": "^3.0.0"
   },
   "devDependencies": {
     "@opentelemetry/api": "^1.0.0",
-    "@playwright/test": "1.56.0",
+    "@playwright/test": "1.58.2",
     "@sveltejs/vite-plugin-svelte": "^6.0.0-next.3",
     "@types/connect": "^3.4.38",
     "@types/node": "^18.19.119",
     "@types/set-cookie-parser": "^2.4.7",
     "dts-buddy": "^0.6.2",
     "rollup": "^4.14.2",
-    "svelte": "^5.46.4",
+    "svelte": "^5.48.4",
     "svelte-preprocess": "^6.0.0",
     "typescript": "^5.3.3",
     "vite": "^6.3.5",

package/src/core/postbuild/crawl.js

@@ -1,4 +1,4 @@
-import { resolve } from '../../utils/url.js';
+import { resolve, decode_uri } from '../../utils/url.js';
 import { decode } from './entities.js';
 
 const DOCTYPE = 'DOCTYPE';
@@ -193,11 +193,11 @@ export function crawl(html, base) {
 				}
 
 				if (id) {
-					ids.push(id);
+					ids.push(decode_uri(id));
 				}
 
 				if (name && tag === 'A') {
-					ids.push(name);
+					ids.push(decode_uri(name));
 				}
 
 				if (src) {

package/src/core/sync/write_tsconfig.js

@@ -62,10 +62,8 @@ export function get_tsconfig(kit) {
 		config_relative('vite.config.js'),
 		config_relative('vite.config.ts')
 	]);
-	// TODO(v2): find a better way to include all src files. We can't just use routes/lib only because
-	// people might have other folders/files in src that they want included.
-	const src_includes = [kit.files.routes, kit.files.lib, path.resolve('src')].filter((dir) => {
-		const relative = path.relative(path.resolve('src'), dir);
+	const src_includes = [kit.files.routes, kit.files.lib, kit.files.src].filter((dir) => {
+		const relative = path.relative(kit.files.src, dir);
 		return !relative || relative.startsWith('..');
 	});
 	for (const dir of src_includes) {
@@ -76,10 +74,14 @@ export function get_tsconfig(kit) {
 
 	// Test folder is a special case - we advocate putting tests in a top-level test folder
 	// and it's not configurable (should we make it?)
-	const test_folder = project_relative('tests');
+	const test_folder = project_relative('test');
 	include.add(config_relative(`${test_folder}/**/*.js`));
 	include.add(config_relative(`${test_folder}/**/*.ts`));
 	include.add(config_relative(`${test_folder}/**/*.svelte`));
+	const tests_folder = project_relative('tests');
+	include.add(config_relative(`${tests_folder}/**/*.js`));
+	include.add(config_relative(`${tests_folder}/**/*.ts`));
+	include.add(config_relative(`${tests_folder}/**/*.svelte`));
 
 	const exclude = [config_relative('node_modules/**')];
 	// Add service worker to exclude list so that worker types references in it don't spill over into the rest of the app

package/src/exports/public.d.ts

@@ -1200,6 +1200,19 @@ export interface NavigationTarget<
 	 * The URL that is navigated to
 	 */
 	url: URL;
+	/**
+	 * The scroll position associated with this navigation.
+	 *
+	 * For the `from` target, this is the scroll position at the moment of navigation.
+	 *
+	 * For the `to` target, this represents the scroll position that will be or was restored:
+	 * - In `beforeNavigate` and `onNavigate`, this is only available for `popstate` navigations (back/forward button)
+	 *   and will be `null` for other navigation types, since the final scroll position isn't known
+	 *   ahead of time.
+	 * - In `afterNavigate`, this is always the scroll position that was applied after the navigation
+	 *   completed.
+	 */
+	scroll: { x: number; y: number } | null;
 }
 
 /**
@@ -1249,7 +1262,7 @@ export interface NavigationEnter extends NavigationBase {
 	delta?: undefined;
 
 	/**
-	 * Dispatched `Event` object when navigation occured by `popstate` or `link`.
+	 * Dispatched `Event` object when navigation occurred by `popstate` or `link`.
 	 */
 	event?: undefined;
 }

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

@@ -5,14 +5,43 @@ import { s } from '../../../utils/misc.js';
 import { normalizePath } from 'vite';
 import { basename, join } from 'node:path';
 import { create_node_analyser } from '../static_analysis/index.js';
+import { fix_css_urls } from '../../../utils/css.js';
 
+/**
+ * Regenerate server nodes after acquiring client manifest
+ * @overload
+ * @param {string} out
+ * @param {import('types').ValidatedKitConfig} kit
+ * @param {import('types').ManifestData} manifest_data
+ * @param {import('vite').Manifest} server_manifest
+ * @param {import('vite').Manifest} client_manifest
+ * @param {string} assets_path
+ * @param {import('vite').Rollup.RollupOutput['output']} client_chunks
+ * @param {import('types').RecursiveRequired<import('types').ValidatedConfig['kit']['output']>} output_config
+ * @param {Map<string, { page_options: Record<string, any> | null, children: string[] }>} static_exports
+ * @returns {Promise<void>}
+ */
+/**
+ * Build server nodes without client manifest for analysis phase
+ * @overload
+ * @param {string} out
+ * @param {import('types').ValidatedKitConfig} kit
+ * @param {import('types').ManifestData} manifest_data
+ * @param {import('vite').Manifest} server_manifest
+ * @param {null} client_manifest
+ * @param {null} assets_path
+ * @param {null} client_chunks
+ * @param {import('types').RecursiveRequired<import('types').ValidatedConfig['kit']['output']>} output_config
+ * @param {Map<string, { page_options: Record<string, any> | null, children: string[] }>} static_exports
+ * @returns {Promise<void>}
+ */
 /**
  * @param {string} out
  * @param {import('types').ValidatedKitConfig} kit
  * @param {import('types').ManifestData} manifest_data
  * @param {import('vite').Manifest} server_manifest
  * @param {import('vite').Manifest | null} client_manifest
- * @param {import('vite').Rollup.OutputBundle | null} server_bundle
+ * @param {string | null} assets_path
  * @param {import('vite').Rollup.RollupOutput['output'] | null} client_chunks
  * @param {import('types').RecursiveRequired<import('types').ValidatedConfig['kit']['output']>} output_config
  * @param {Map<string, { page_options: Record<string, any> | null, children: string[] }>} static_exports
@@ -23,7 +52,7 @@ export async function build_server_nodes(
 	manifest_data,
 	server_manifest,
 	client_manifest,
-	server_bundle,
+	assets_path,
 	client_chunks,
 	output_config,
 	static_exports
@@ -31,38 +60,59 @@ export async function build_server_nodes(
 	mkdirp(`${out}/server/nodes`);
 	mkdirp(`${out}/server/stylesheets`);
 
-	/** @type {Map<string, string>} */
+	/**
+	 * Stylesheet names and their contents which are below the inline threshold
+	 * @type {Map<string, string>}
+	 */
 	const stylesheets_to_inline = new Map();
 
-	if (server_bundle && client_chunks && kit.inlineStyleThreshold > 0) {
-		const client = get_stylesheets(client_chunks);
-		const server = get_stylesheets(Object.values(server_bundle));
+	/**
+	 * For CSS inlining, we either store a string or a function that returns the
+	 * styles with the correct relative URLs
+	 * @type {(css: string, eager_assets: Set<string>) => string}
+	 */
+	let prepare_css_for_inlining = (css) => s(css);
 
-		// map server stylesheet name to the client stylesheet name
-		for (const [id, client_stylesheet] of client.stylesheets_used) {
-			const server_stylesheet = server.stylesheets_used.get(id);
-			if (!server_stylesheet) {
+	if (client_chunks && kit.inlineStyleThreshold > 0 && output_config.bundleStrategy === 'split') {
+		for (const chunk of client_chunks) {
+			if (chunk.type !== 'asset' || !chunk.fileName.endsWith('.css')) {
 				continue;
 			}
-			client_stylesheet.forEach((file, i) => {
-				stylesheets_to_inline.set(file, server_stylesheet[i]);
-			});
-		}
 
-		// filter out stylesheets that should not be inlined
-		for (const [fileName, content] of client.stylesheet_content) {
-			if (content.length >= kit.inlineStyleThreshold) {
-				stylesheets_to_inline.delete(fileName);
+			const source = chunk.source.toString();
+			if (source.length < kit.inlineStyleThreshold) {
+				stylesheets_to_inline.set(chunk.fileName, source);
 			}
 		}
 
-		// map server stylesheet source to the client stylesheet name
-		for (const [client_file, server_file] of stylesheets_to_inline) {
-			const source = server.stylesheet_content.get(server_file);
-			if (!source) {
-				throw new Error(`Server stylesheet source not found for client stylesheet ${client_file}`);
-			}
-			stylesheets_to_inline.set(client_file, source);
+		// If the client CSS has URL references to assets, we need to adjust the
+		// relative path so that they are correct when inlined into the document.
+		// Although `paths.assets` is static, we need to pass in a fake path
+		// `/_svelte_kit_assets` at runtime when running `vite preview`
+		if (kit.paths.assets || kit.paths.relative) {
+			const static_assets = new Set(
+				manifest_data.assets.map((asset) => decodeURIComponent(asset.file))
+			);
+
+			const segments = /** @type {string} */ (assets_path).split('/');
+			const static_asset_prefix = segments.map(() => '..').join('/') + '/';
+
+			prepare_css_for_inlining = (css, eager_assets) => {
+				const transformed_css = fix_css_urls({
+					css,
+					vite_assets: eager_assets,
+					static_assets,
+					paths_assets: '${assets}',
+					base: '${base}',
+					static_asset_prefix
+				});
+
+				// only convert to a function if we have adjusted any URLs
+				if (css !== transformed_css) {
+					return `function css(assets, base) { return \`${s(transformed_css).slice(1, -1)}\`; }`;
+				}
+				return s(css);
+			};
 		}
 	}
 
@@ -96,6 +146,9 @@ export async function build_server_nodes(
 		/** @type {string[]} */
 		let fonts = [];
 
+		/** @type {Set<string>} */
+		let eager_assets = new Set();
+
 		if (node.component && client_manifest) {
 			exports.push(
 				'let component_cache;',
@@ -135,7 +188,7 @@ export async function build_server_nodes(
 			const entry_path = `${normalizePath(kit.outDir)}/generated/client-optimized/nodes/${i}.js`;
 			const entry = find_deps(client_manifest, entry_path, true);
 
-			// eagerly load client stylesheets and fonts imported by the SSR-ed page to avoid FOUC.
+			// Eagerly load client stylesheets and fonts imported by the SSR-ed page to avoid FOUC.
 			// However, if it is not used during SSR (not present in the server manifest),
 			// then it can be lazily loaded in the browser.
 
@@ -153,8 +206,6 @@ export async function build_server_nodes(
 
 			/** @type {Set<string>} */
 			const eager_css = new Set();
-			/** @type {Set<string>} */
-			const eager_assets = new Set();
 
 			entry.stylesheet_map.forEach((value, filepath) => {
 				// pages and layouts are renamed to node indexes when optimised for the client
@@ -180,27 +231,46 @@ export async function build_server_nodes(
 			`export const fonts = ${s(fonts)};`
 		);
 
-		/** @type {string[]} */
-		const inline_styles = [];
-
-		stylesheets.forEach((file, i) => {
-			if (stylesheets_to_inline.has(file)) {
-				const filename = basename(file);
-				const dest = `${out}/server/stylesheets/${filename}.js`;
-				const source = stylesheets_to_inline.get(file);
-				if (!source) {
-					throw new Error(`Server stylesheet source not found for client stylesheet ${file}`);
+		/**
+		 * Assets that have been processed by Vite (decoded and with the asset path stripped)
+		 * @type {Set<string>}
+		 */
+		let vite_assets = new Set();
+
+		// Keep track of Vite asset filenames so that we avoid touching unrelated ones
+		// when adjusting the inlined CSS
+		if (stylesheets_to_inline.size && assets_path && eager_assets.size) {
+			vite_assets = new Set(
+				Array.from(eager_assets).map((asset) => {
+					return decodeURIComponent(asset.replace(`${assets_path}/`, ''));
+				})
+			);
+		}
+
+		if (stylesheets_to_inline.size) {
+			/** @type {string[]} */
+			const inline_styles = [];
+
+			stylesheets.forEach((file, i) => {
+				if (stylesheets_to_inline.has(file)) {
+					const filename = basename(file);
+					const dest = `${out}/server/stylesheets/${filename}.js`;
+
+					let css = /** @type {string} */ (stylesheets_to_inline.get(file));
+
+					fs.writeFileSync(
+						dest,
+						`// ${filename}\nexport default ${prepare_css_for_inlining(css, vite_assets)};`
+					);
+					const name = `stylesheet_${i}`;
+					imports.push(`import ${name} from '../stylesheets/${filename}.js';`);
+					inline_styles.push(`\t${s(file)}: ${name}`);
 				}
-				fs.writeFileSync(dest, `// ${filename}\nexport default ${s(source)};`);
+			});
 
-				const name = `stylesheet_${i}`;
-				imports.push(`import ${name} from '../stylesheets/${filename}.js';`);
-				inline_styles.push(`\t${s(file)}: ${name}`);
+			if (inline_styles.length > 0) {
+				exports.push(`export const inline_styles = () => ({\n${inline_styles.join(',\n')}\n});`);
 			}
-		});
-
-		if (inline_styles.length > 0) {
-			exports.push(`export const inline_styles = () => ({\n${inline_styles.join(',\n')}\n});`);
 		}
 
 		fs.writeFileSync(
@@ -209,37 +279,3 @@ export async function build_server_nodes(
 		);
 	}
 }
-
-/**
- * @param {(import('vite').Rollup.OutputAsset | import('vite').Rollup.OutputChunk)[]} chunks
- */
-function get_stylesheets(chunks) {
-	/**
-	 * A map of module IDs and the stylesheets they use.
-	 * @type {Map<string, string[]>}
-	 */
-	const stylesheets_used = new Map();
-
-	/**
-	 * A map of stylesheet names and their content.
-	 * @type {Map<string, string>}
-	 */
-	const stylesheet_content = new Map();
-
-	for (const chunk of chunks) {
-		if (chunk.type === 'asset') {
-			if (chunk.fileName.endsWith('.css')) {
-				stylesheet_content.set(chunk.fileName, chunk.source.toString());
-			}
-			continue;
-		}
-
-		if (chunk.viteMetadata?.importedCss.size) {
-			const css = Array.from(chunk.viteMetadata.importedCss);
-			for (const id of chunk.moduleIds) {
-				stylesheets_used.set(id, css);
-			}
-		}
-	}
-	return { stylesheets_used, stylesheet_content };
-}

package/src/exports/vite/index.js

@@ -40,7 +40,7 @@ import {
 } from './module_ids.js';
 import { import_peer } from '../../utils/import.js';
 import { compact } from '../../utils/array.js';
-import { should_ignore } from './static_analysis/utils.js';
+import { should_ignore, has_children } from './static_analysis/utils.js';
 
 const cwd = posixify(process.cwd());
 
@@ -112,10 +112,8 @@ const warning_preprocessor = {
 		if (!filename) return;
 
 		const basename = path.basename(filename);
-		const has_children =
-			content.includes('<slot') || (isSvelte5Plus() && content.includes('{@render'));
 
-		if (basename.startsWith('+layout.') && !has_children) {
+		if (basename.startsWith('+layout.') && !has_children(content, isSvelte5Plus())) {
 			const message =
 				`\n${colors.bold().red(path.relative('.', filename))}\n` +
 				`\`<slot />\`${isSvelte5Plus() ? ' or `{@render ...}` tag' : ''}` +
@@ -1031,7 +1029,7 @@ async function kit({ svelte_config }) {
 		 */
 		writeBundle: {
 			sequential: true,
-			async handler(_options, bundle) {
+			async handler(_options) {
 				if (secondary_build_started) return; // only run this once
 
 				const verbose = vite_config.logLevel === 'info';
@@ -1271,7 +1269,7 @@ async function kit({ svelte_config }) {
 					manifest_data,
 					server_manifest,
 					client_manifest,
-					bundle,
+					assets_path,
 					client_chunks,
 					svelte_config.kit.output,
 					static_exports

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

@@ -1,3 +1,20 @@
+/**
+ * Check if content has children rendering (slot, @render, or children prop forwarding)
+ * @param {string} content - The markup content
+ * @param {boolean} is_svelte_5_plus - Whether the project uses Svelte 5+
+ * @returns {boolean}
+ */
+export function has_children(content, is_svelte_5_plus) {
+	return (
+		content.includes('<slot') ||
+		(is_svelte_5_plus &&
+			(content.includes('{@render') ||
+				// children may be forwarded to a child component as a prop
+				content.includes('{children}') ||
+				content.includes('children={')))
+	);
+}
+
 /**
  * Check if a match position is within a comment or a string
  * @param {string} content - The full content

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

@@ -1,6 +1,2 @@
-import { BROWSER, DEV } from 'esm-env';
+export { BROWSER as browser, DEV as dev } from 'esm-env';
 export { building, version } from '__sveltekit/environment';
-
-export const browser = BROWSER;
-
-export const dev = DEV;

package/src/runtime/app/server/remote/command.js

@@ -78,7 +78,9 @@ export function command(validate_or_fn, maybe_fn) {
 
 		state.refreshes ??= {};
 
-		const promise = Promise.resolve(run_remote_function(event, state, true, arg, validate, fn));
+		const promise = Promise.resolve(
+			run_remote_function(event, state, true, () => validate(arg), fn)
+		);
 
 		// @ts-expect-error
 		promise.updates = () => {

package/src/runtime/app/server/remote/form.js

@@ -145,8 +145,7 @@ export function form(validate_or_fn, maybe_fn) {
 							event,
 							state,
 							true,
-							data,
-							(d) => d,
+							() => data,
 							(data) => (!maybe_fn ? fn() : fn(data, issue))
 						);
 					} catch (e) {

package/src/runtime/app/server/remote/prerender.js

@@ -131,7 +131,7 @@ export function prerender(validate_or_fn, fn_or_options, maybe_options) {
 			}
 
 			const promise = get_response(__, arg, state, () =>
-				run_remote_function(event, state, false, arg, validate, fn)
+				run_remote_function(event, state, false, () => validate(arg), fn)
 			);
 
 			if (state.prerendering) {

package/src/runtime/app/server/remote/query.js

@@ -5,6 +5,8 @@ import { get_request_store } from '@sveltejs/kit/internal/server';
 import { create_remote_key, stringify_remote_arg } from '../../../shared.js';
 import { prerendering } from '__sveltekit/environment';
 import { create_validator, get_cache, get_response, run_remote_function } from './shared.js';
+import { handle_error_and_jsonify } from '../../../server/utils.js';
+import { HttpError, SvelteKitError } from '@sveltejs/kit/internal';
 
 /**
  * Creates a remote query. When called from the browser, the function will be invoked on the server via a `fetch` call.
@@ -73,7 +75,7 @@ export function query(validate_or_fn, maybe_fn) {
 		const { event, state } = get_request_store();
 
 		const get_remote_function_result = () =>
-			run_remote_function(event, state, false, arg, validate, fn);
+			run_remote_function(event, state, false, () => validate(arg), fn);
 
 		/** @type {Promise<any> & Partial<RemoteQuery<any>>} */
 		const promise = get_response(__, arg, state, get_remote_function_result);
@@ -137,7 +139,7 @@ export function query(validate_or_fn, maybe_fn) {
  */
 /*@__NO_SIDE_EFFECTS__*/
 function batch(validate_or_fn, maybe_fn) {
-	/** @type {(args?: Input[]) => (arg: Input, idx: number) => Output} */
+	/** @type {(args?: Input[]) => MaybePromise<(arg: Input, idx: number) => Output>} */
 	const fn = maybe_fn ?? validate_or_fn;
 
 	/** @type {(arg?: any) => MaybePromise<Input>} */
@@ -148,16 +150,34 @@ function batch(validate_or_fn, maybe_fn) {
 		type: 'query_batch',
 		id: '',
 		name: '',
-		run: (args) => {
+		run: async (args, options) => {
 			const { event, state } = get_request_store();
 
 			return run_remote_function(
 				event,
 				state,
 				false,
-				args,
-				(array) => Promise.all(array.map(validate)),
-				fn
+				async () => Promise.all(args.map(validate)),
+				async (/** @type {any[]} */ input) => {
+					const get_result = await fn(input);
+
+					return Promise.all(
+						input.map(async (arg, i) => {
+							try {
+								return { type: 'result', data: get_result(arg, i) };
+							} catch (error) {
+								return {
+									type: 'error',
+									error: await handle_error_and_jsonify(event, state, options, error),
+									status:
+										error instanceof HttpError || error instanceof SvelteKitError
+											? error.status
+											: 500
+								};
+							}
+						})
+					);
+				}
 			);
 		}
 	};
@@ -190,22 +210,23 @@ function batch(validate_or_fn, maybe_fn) {
 					batching = { args: [], resolvers: [] };
 
 					try {
-						const get_result = await run_remote_function(
+						return await run_remote_function(
 							event,
 							state,
 							false,
-							batched.args,
-							(array) => Promise.all(array.map(validate)),
-							fn
-						);
-
-						for (let i = 0; i < batched.resolvers.length; i++) {
-							try {
-								batched.resolvers[i].resolve(get_result(batched.args[i], i));
-							} catch (error) {
-								batched.resolvers[i].reject(error);
+							async () => Promise.all(batched.args.map(validate)),
+							async (input) => {
+								const get_result = await fn(input);
+
+								for (let i = 0; i < batched.resolvers.length; i++) {
+									try {
+										batched.resolvers[i].resolve(get_result(input[i], i));
+									} catch (error) {
+										batched.resolvers[i].reject(error);
+									}
+								}
 							}
-						}
+						);
 					} catch (error) {
 						for (const resolver of batched.resolvers) {
 							resolver.reject(error);

package/src/runtime/app/server/remote/shared.js

@@ -97,11 +97,10 @@ export function parse_remote_response(data, transport) {
  * @param {RequestEvent} event
  * @param {RequestState} state
  * @param {boolean} allow_cookies
- * @param {any} arg
- * @param {(arg: any) => any} validate
+ * @param {() => any} get_input
  * @param {(arg?: any) => T} fn
  */
-export async function run_remote_function(event, state, allow_cookies, arg, validate, fn) {
+export async function run_remote_function(event, state, allow_cookies, get_input, fn) {
 	/** @type {RequestStore} */
 	const store = {
 		event: {
@@ -142,8 +141,8 @@ export async function run_remote_function(event, state, allow_cookies, arg, vali
 	};
 
 	// In two parts, each with_event, so that runtimes without async local storage can still get the event at the start of the function
-	const validated = await with_request_store(store, () => validate(arg));
-	return with_request_store(store, () => fn(validated));
+	const input = await with_request_store(store, get_input);
+	return with_request_store(store, () => fn(input));
 }
 
 /**