@sveltejs/kit 3.0.0-next.7 → 3.0.0-next.9

package/src/runtime/server/page/render.js

@@ -1,5 +1,5 @@
+/** @import { RenderNode } from '../../types.js' */
 import * as devalue from 'devalue';
-import { readable, writable } from 'svelte/store';
 import { DEV } from 'esm-env';
 import { isRedirect, text } from '@sveltejs/kit';
 import * as paths from '$app/paths/internal/server';
@@ -22,14 +22,11 @@ import {
 } from '../utils.js';
 import * as env from '__sveltekit/env';
 import { collect_remote_data } from '../remote.js';
+import Root from '../../components/root.svelte';
+import { render } from 'svelte/server';
 
 // TODO rename this function/module
 
-const updated = {
-	...readable(false),
-	check: () => false
-};
-
 /**
  * Creates the HTML response.
  * @param {{
@@ -46,7 +43,7 @@ const updated = {
  *   resolve_opts: import('types').RequiredResolveOptions;
  *   action_result?: import('@sveltejs/kit').ActionResult;
  *   data_serializer: import('./types.js').ServerDataSerializer;
- *   error_components?: Array<import('types').SSRComponent | undefined>
+ *   error_components?: Array<import('svelte').Component | undefined>
  * }} opts
  */
 export async function render_response({
@@ -91,7 +88,8 @@ export async function render_response({
 	// TODO if we add a client entry point one day, we will need to include inline_styles with the entry, otherwise stylesheets will be linked even if they are below inlineStyleThreshold
 	const inline_styles = new Map();
 
-	/** @type {Awaited<ReturnType<typeof options.root.render>>} */
+	// TODO `svelte/server` should expose `RenderOutput`
+	/** @type {{ head: string, body: string, hashes: { script: string[] } }} */
 	let rendered;
 
 	const form_value =
@@ -142,49 +140,47 @@ export async function render_response({
 	if (page_config.ssr) {
 		/** @type {Record<string, any>} */
 		const props = {
-			stores: {
-				page: writable(null),
-				navigating: writable(null),
-				updated
-			},
-			constructors: await Promise.all(
-				branch.map(({ node }) => {
-					if (!node.component) {
-						// Can only be the leaf, layouts have a fallback component generated
-						throw new Error(`Missing +page.svelte component for route ${event.route.id}`);
-					}
-					return node.component();
-				})
-			),
-			form: form_value
-		};
-
-		if (error_components) {
-			if (error) {
-				props.error = error;
+			components: [],
+			resetters: [],
+			form: form_value,
+			tree: /** @type {RenderNode} */ ({}),
+			error,
+			page: {
+				error,
+				params: /** @type {Record<string, any>} */ (event.params),
+				route: event.route,
+				status,
+				url: event.url,
+				data: {},
+				form: form_value,
+				state: {}
 			}
-			props.errors = error_components;
-		}
+		};
 
-		let data = {};
+		let current_node = props.tree;
+		let data = props.page.data;
 
-		// props_n (instead of props[n]) makes it easy to avoid
-		// unnecessary updates for layout components
 		for (let i = 0; i < branch.length; i += 1) {
-			data = { ...data, ...branch[i].data };
-			props[`data_${i}`] = data;
+			const node = branch[i];
+
+			data = { ...data, ...node.data };
+
+			// TODO this is undefined sometimes... where does the default error component come from?
+			const error = error_components?.slice(0, i + 1).findLast((x) => x);
+
+			current_node.error = error;
+			current_node.component = await node.node.component?.();
+			current_node.data = data;
+
+			if (i < branch.length - 1) {
+				current_node.child = /** @type {import('../../types.js').RenderNode} */ ({});
+				current_node = current_node.child;
+			}
 		}
 
-		props.page = {
-			error,
-			params: /** @type {Record<string, any>} */ (event.params),
-			route: event.route,
-			status,
-			url: event.url,
-			data,
-			form: form_value,
-			state: {}
-		};
+		props.page.data = data;
+
+		const render_state = { ...event_state, is_in_render: true };
 
 		const render_opts = {
 			context: new Map([
@@ -197,15 +193,28 @@ export async function render_response({
 			]),
 			csp: csp.script_needs_nonce ? { nonce: csp.nonce } : { hash: csp.script_needs_hash },
 			transformError: error_components
-				? /** @param {unknown} e */ async (e) => {
+				? /** @param {unknown} e */ (e) => {
 						if (isRedirect(e)) {
 							throw e;
 						}
 
-						const transformed = await handle_error_and_jsonify(event, event_state, options, e);
-						props.page.error = props.error = error = transformed;
-						props.page.status = status = transformed.status;
-						return transformed;
+						const handled = handle_error_and_jsonify(event, render_state, options, e);
+
+						// TODO 4.0 make this an async function and await `handled`
+						if (handled instanceof Promise) {
+							return handled.then((e) => {
+								error = e;
+								props.page.error = error;
+								props.page.status = status = error.status;
+								return error;
+							});
+						}
+
+						error = handled;
+						props.page.error = error;
+						props.page.status = status = error.status;
+
+						return error;
 					}
 				: undefined
 		};
@@ -231,44 +240,27 @@ export async function render_response({
 				};
 			}
 
-			const state = { ...event_state, is_in_render: true };
-
-			rendered = await with_request_store({ event, state }, async () => {
-				// use relative paths during rendering, so that the resulting HTML is as
-				// portable as possible, but reset afterwards
-				if (paths.relative) paths.override({ base, assets });
-
+			rendered = await with_request_store({ event, state: render_state }, async () => {
 				// We have to invoke .then eagerly here in order to kick off rendering: it's only starting on access,
 				// and `await maybe_promise` would eagerly access the .then property but call its function only after a tick, which is too late
 				// for the paths.reset() below and for any eager getRequestEvent() calls during rendering without AsyncLocalStorage available.
-				// TODO use render from 'svelte/server' here
-				const rendered = options.root.render(props, render_opts).then((r) => r);
-
-				// we reset this synchronously, rather than after async rendering is complete,
-				// to avoid cross-talk between requests. This is a breaking change for
-				// anyone who opts into async SSR, since `base` and `assets` will no
-				// longer be relative to the current pathname.
-				// TODO 3.0 remove `base` and `assets` in favour of `resolve(...)` and `asset(...)`
-				paths.reset();
+				const rendered = render(Root, { ...render_opts, props });
 
-				// @ts-expect-error the legacy `render` API only returns html still, but the new API uses body
-				const { head, html: body, css, hashes } = await rendered;
+				const { head, body, hashes } = await rendered;
 
 				if (hashes) {
 					csp.add_script_hashes(hashes.script);
 				}
 
-				return { head, body, css, hashes };
+				return { head, body, hashes };
 			});
 		} finally {
 			if (DEV) {
 				globalThis.fetch = fetch;
 			}
-
-			paths.reset(); // just in case `options.root.render(...)` failed
 		}
 	} else {
-		rendered = { head: '', body: '', css: { code: '', map: null }, hashes: { script: [] } };
+		rendered = { head: '', body: '', hashes: { script: [] } };
 	}
 
 	for (const { node } of branch) {
@@ -412,7 +404,7 @@ export async function render_response({
 
 		const blocks = [];
 
-		const properties = [`base: ${base_expression}`];
+		const properties = [`base: ${base_expression}`, `version: ${s(__SVELTEKIT_APP_VERSION__)}`];
 
 		if (paths.assets) {
 			properties.push(`assets: ${s(paths.assets)}`);
@@ -435,7 +427,9 @@ export async function render_response({
 				if (client.inline) {
 					app_declaration = `const app = ${global}.app.app;`;
 				} else if (client.app) {
-					app_declaration = `const app = await import(${s(prefixed(client.app))});`;
+					app_declaration = `const kit = await import(${s(prefixed(client.start))});
+							kit.init(${global});
+							const app = await import(${s(prefixed(client.app))});`;
 				} else {
 					app_declaration = `const { app } = await import(${s(prefixed(client.start))});`;
 				}
@@ -529,10 +523,9 @@ export async function render_response({
 
 					${serialized_data}${global}.app.start(${args.join(', ')});`
 			: client.app
-				? `Promise.all([
-						import(${s(prefixed(client.start))}),
-						import(${s(prefixed(client.app))})
-					]).then(([kit, app]) => {
+				? `import(${s(prefixed(client.start))}).then(async (kit) => {
+						kit.init(${global});
+						const app = await import(${s(prefixed(client.app))});
 						${serialized_data}kit.start(app, ${args.join(', ')});
 					});`
 				: `import(${s(prefixed(client.start))}).then((app) => {

package/src/runtime/server/remote.js

@@ -361,7 +361,8 @@ export async function collect_remote_data(data, event, state, options) {
 	 * @returns {Promise<App.Error>}
 	 */
 	function convert_error(error) {
-		return handle_error_and_jsonify(event, state, options, error);
+		// TODO 4.0 remove the `Promise.resolve(...)`
+		return Promise.resolve(handle_error_and_jsonify(event, state, options, error));
 	}
 
 	/** @type {Promise<any>[]} */

package/src/runtime/server/respond.js

@@ -70,7 +70,7 @@ export async function internal_respond(request, options, manifest, state) {
 	const is_data_request = has_data_suffix(url.pathname);
 	const remote_id = get_remote_id(url);
 
-	if (!DEV) {
+	if (!__SVELTEKIT_DEV__) {
 		const request_origin = request.headers.get('origin');
 		const self_origin = get_self_origin(options.paths_origin, url.origin);
 

package/src/runtime/server/utils.js

@@ -98,9 +98,9 @@ export async function handle_fatal_error(event, state, options, error) {
  * @param {import('types').RequestState} state
  * @param {import('types').SSROptions} options
  * @param {any} error
- * @returns {Promise<App.Error>}
+ * @returns {App.Error | Promise<App.Error>}
  */
-export async function handle_error_and_jsonify(event, state, options, error) {
+export function handle_error_and_jsonify(event, state, options, error) {
 	if (error instanceof HttpError) {
 		// @ts-expect-error custom user errors may not have a message field if App.Error is overwritten
 		return { message: 'Unknown Error', ...error.body };
@@ -113,11 +113,34 @@ export async function handle_error_and_jsonify(event, state, options, error) {
 	const status = get_status(error);
 	const message = get_message(error);
 
-	const body = (await with_request_store({ event, state }, () =>
+	// TODO 4.0 await this, rather than handling the non-Promise case
+	const result = with_request_store({ event, state }, () =>
 		options.hooks.handleError({ error, event, status, message })
-	)) ?? { message };
+	) ?? { status, message };
+
+	if (result instanceof Promise) {
+		if (!__SVELTEKIT_SUPPORTS_ASYNC__ && state.is_in_render) {
+			console.warn(
+				`To use an async \`handleError\` hook to handle errors that occur during rendering, you must enable \`compilerOptions.experimental.async\` in the SvelteKit plugin of your Vite config. The returned error has been replaced with a generic object`
+			);
+
+			// we're discarding the result, but we still need to prevent an unhandled
+			// rejection if the user's async `handleError` hook rejects
+			result.catch(() => {});
+
+			return {
+				status,
+				message: 'Internal Error'
+			};
+		}
+
+		return result.then((body) => {
+			body ??= { status, message };
+			return { ...body, status: get_status(body, error) };
+		});
+	}
 
-	return { ...body, status: get_status(body, error) };
+	return { ...result, status: get_status(result, error) };
 }
 
 /**

package/src/runtime/types.d.ts

@@ -0,0 +1,8 @@
+import { Component } from 'svelte';
+
+export interface RenderNode {
+	component: Component;
+	error: Component;
+	data: Record<string, any>;
+	child?: RenderNode;
+}

package/src/types/global-private.d.ts

@@ -1,4 +1,4 @@
-import { RemoteFunctionData } from 'types';
+import { SvelteKitPayload } from 'types';
 
 declare global {
 	const __SVELTEKIT_ADAPTER_NAME__: string;
@@ -33,26 +33,20 @@ declare global {
 	 * Used for treeshaking universal load code from client bundles when no universal loads exist.
 	 */
 	const __SVELTEKIT_HAS_UNIVERSAL_LOAD__: boolean;
-	/** The `__sveltekit_abc123` object in the init `<script>` */
-	const __SVELTEKIT_PAYLOAD__: {
-		/** The basepath, usually relative to the current page */
-		base: string;
-		/** Path to externally-hosted assets */
-		assets?: string;
-		/** Public environment variables */
-		env?: Record<string, string>;
-		/** Serialized data from query/form/command functions */
-		data?: RemoteFunctionData;
-		/** Create a placeholder promise */
-		defer?: (id: number) => Promise<any>;
-		/** Resolve a placeholder promise */
-		resolve?: (data: { id: number; data: any; error: any }) => void;
-	};
+	/**
+	 * The `__sveltekit_abc123` object in the init `<script>`.
+	 * Should only be used when bundleStrategy !== 'inline' to avoid SvelteKit runtime changing on every build, preventing cacheability.
+	 */
+	const __SVELTEKIT_PAYLOAD__: SvelteKitPayload;
 	/**
 	 * The Vite `root` setting used to construct paths to nodes and components
 	 * for the SSR manifest during development
 	 */
 	const __SVELTEKIT_ROOT__: string;
+	/**
+	 * Whether the `experimental.async` flag is applied
+	 */
+	const __SVELTEKIT_SUPPORTS_ASYNC__: boolean;
 	/**
 	 * This makes the use of specific features visible at both dev and build time, in such a
 	 * way that we can error when they are not supported by the target platform.
@@ -68,7 +62,6 @@ declare global {
 	 * to throw an error if the feature would fail in production.
 	 */
 	var __SVELTEKIT_TRACK__: (label: string) => void;
-	var __SVELTEKIT_EXPERIMENTAL_USE_TRANSFORM_ERROR__: boolean;
 	var Bun: object;
 	var Deno: object;
 }

package/src/types/internal.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from 'svelte';
+import { Component } from 'svelte';
 import {
 	Config,
 	ServerLoad,
@@ -113,7 +113,7 @@ export interface BuildData {
 }
 
 export interface CSRPageNode {
-	component: typeof SvelteComponent;
+	component: Component;
 	universal: {
 		load?: Load;
 		trailingSlash?: TrailingSlash;
@@ -417,27 +417,7 @@ export interface ServerMetadata {
 	remotes: Map<string, Map<string, { type: RemoteInternals['type']; dynamic: boolean }>>;
 }
 
-// TODO get rid of this in favor us using just import('svelte').Component<any, any, any>
-export interface SSRComponent {
-	default: {
-		render(
-			props: Record<string, any>,
-			opts: { context: Map<any, any>; csp?: { nonce?: string; hash?: boolean } }
-		): Promise<{
-			body: string;
-			head: string;
-			css: {
-				code: string;
-				map: any; // TODO
-			};
-			hashes: {
-				script: Array<`sha256-${string}`>;
-			};
-		}>;
-	};
-}
-
-export type SSRComponentLoader = () => Promise<SSRComponent>;
+export type SSRComponentLoader = () => Promise<Component>;
 
 export interface UniversalNode {
 	/** Is `null` in case static analysis succeeds but the node is ssr=false */
@@ -476,7 +456,10 @@ export interface SSRNode {
 
 	/**
 	 * During development, all styles are inlined for the page to avoid FOUC.
-	 * But in production, this stores styles that are below the inline threshold
+	 * But in production, this stores styles that are below the inline threshold.
+	 * It returns a Promise during development because Vite needs to load the
+	 * modules on demand. But in production, the contents have been precomputed
+	 * during the build, so it can return synchronously.
 	 */
 	inline_styles?(): MaybePromise<
 		Record<string, string | ((assets: string, base: string) => string)>
@@ -501,10 +484,8 @@ export interface SSROptions {
 	hooks: ServerHooks;
 	link_header_preload: ValidatedConfig['kit']['output']['linkHeaderPreload'];
 	paths_origin: string | undefined;
-	root: SSRComponent['default'];
 	service_worker: boolean;
 	service_worker_options: RegistrationOptions;
-	server_error_boundaries: boolean;
 	templates: {
 		app(values: {
 			head: string;
@@ -764,5 +745,23 @@ export interface RequestStore {
 	state: RequestState;
 }
 
+/** Type of the `__sveltekit_abc123` object in the init `<script>` */
+export interface SvelteKitPayload {
+	/** The application version */
+	version: string;
+	/** The basepath, usually relative to the current page */
+	base: string;
+	/** Path to externally-hosted assets */
+	assets?: string;
+	/** Public environment variables */
+	env?: Record<string, string>;
+	/** Serialized data from query/form/command functions */
+	data?: RemoteFunctionData;
+	/** Create a placeholder promise */
+	defer?: (id: number) => Promise<any>;
+	/** Resolve a placeholder promise */
+	resolve?: (data: { id: number; data: any; error: any }) => void;
+}
+
 export * from '../exports/index.js';
 export * from './private.js';

package/src/utils/import.js

@@ -2,7 +2,12 @@ import fs from 'node:fs';
 import path from 'node:path';
 
 /**
- * Resolves a peer dependency relative to the current working directory. Duplicated with `packages/adapter-auto`
+ * Resolves a peer dependency relative to the current working directory.
+ *
+ * Mainly used to resolve the correct Vite package when an app's SvelteKit is a
+ * linked local repository.
+ *
+ * Duplicated with `packages/adapter-auto`
  * @param {string} dependency
  * @param {string} root
  */

package/src/utils/imports.js

@@ -0,0 +1,83 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+/**
+ * Reads the `imports` field from the package.json at the given directory.
+ * @param {string} cwd
+ * @returns {Record<string, string | Record<string, string>> | undefined}
+ */
+export function read_package_imports(cwd) {
+	const pkg_path = path.resolve(cwd, 'package.json');
+	if (fs.existsSync(pkg_path)) {
+		try {
+			return JSON.parse(fs.readFileSync(pkg_path, 'utf-8')).imports;
+		} catch {
+			// malformed package.json — ignore, the user will see other errors
+		}
+	}
+}
+
+/**
+ * Normalizes an import value to a string path, handling both string values
+ * and conditional export objects (using the `default` key).
+ * @param {string | Record<string, string>} value
+ * @returns {string | null}
+ */
+export function normalize_import_value(value) {
+	if (typeof value === 'string') {
+		return value.replace(/^\.\//, '');
+	}
+	if (value && typeof value === 'object' && typeof value.default === 'string') {
+		return value.default.replace(/^\.\//, '');
+	}
+	return null;
+}
+
+/**
+ * Returns the `#`-prefixed import keys from the package.json `imports` field.
+ * @param {string} cwd
+ * @returns {string[]}
+ */
+export function get_hash_import_keys(cwd) {
+	const imports = read_package_imports(cwd);
+	if (!imports) return [];
+	return Object.keys(imports).filter((key) => key.startsWith('#'));
+}
+
+/**
+ * Computes alias entries for `normalize_id` from the package.json `imports` field.
+ * Each entry maps a `#xx` alias to its absolute target path. Entries are sorted
+ * by path length descending so that longer/more-specific paths are matched first.
+ *
+ * @param {string} root
+ * @param {(p: string) => string} [normalize] - optional path normalizer (e.g. `vite.normalizePath`)
+ * @returns {Array<{ alias: string, path: string }>}
+ */
+export function get_import_aliases(root, normalize) {
+	const imports = read_package_imports(root);
+	if (!imports) return [];
+
+	/** @type {Array<{ alias: string, path: string }>} */
+	const aliases = [];
+
+	for (const [key, raw_value] of Object.entries(imports)) {
+		if (!key.startsWith('#')) continue;
+
+		const value = normalize_import_value(raw_value);
+		if (!value) continue;
+
+		// For `#xx/*` imports, the target directory is the value without `/*`
+		// For `#xx` imports, the target is the file itself
+		const target = value.endsWith('/*') ? value.slice(0, -2) : value;
+		if (target.includes('*')) continue; // not sure if this is even allowed in Node, anyway it's too niche/complex to support here
+		const abs = path.resolve(root, target);
+		const alias = key.endsWith('/*') ? key.slice(0, -2) : key;
+
+		aliases.push({ alias, path: normalize ? normalize(abs) : abs });
+	}
+
+	// Sort by path length descending so longer/more-specific paths match first
+	aliases.sort((a, b) => b.path.length - a.path.length);
+
+	return aliases;
+}

package/src/utils/routing.js

@@ -1,6 +1,6 @@
 import { BROWSER } from 'esm-env';
 
-const param_pattern = /^(\[)?(\.\.\.)?(\w+)(?:=(\w+))?(\])?$/;
+const param_pattern = /^(\[)?(\.\.\.)?([\w-]+)(?:=([\w-]+))?(\])?$/;
 
 const root_group_pattern = /^\/\((?:[^)]+)\)$/;
 
@@ -19,7 +19,7 @@ export function parse_route_id(id) {
 					`^${get_route_segments(id)
 						.map((segment) => {
 							// special case — /[...rest]/ could contain zero segments
-							const rest_match = /^\[\.\.\.(\w+)(?:=(\w+))?\]$/.exec(segment);
+							const rest_match = /^\[\.\.\.([\w-]+)(?:=([\w-]+))?\]$/.exec(segment);
 							if (rest_match) {
 								params.push({
 									name: rest_match[1],
@@ -31,7 +31,7 @@ export function parse_route_id(id) {
 								return '(?:/([^]*))?';
 							}
 							// special case — /[[optional]]/ could contain zero segments
-							const optional_match = /^\[\[(\w+)(?:=(\w+))?\]\]$/.exec(segment);
+							const optional_match = /^\[\[([\w-]+)(?:=([\w-]+))?\]\]$/.exec(segment);
 							if (optional_match) {
 								params.push({
 									name: optional_match[1],
@@ -72,7 +72,7 @@ export function parse_route_id(id) {
 										const match = /** @type {RegExpExecArray} */ (param_pattern.exec(content));
 										if (!BROWSER && !match) {
 											throw new Error(
-												`Invalid param: ${content}. Params and matcher names can only have underscores and alphanumeric characters.`
+												`Invalid param: ${content}. Params and matcher names can only have underscores, hyphens, and alphanumeric characters.`
 											);
 										}
 
@@ -103,7 +103,7 @@ export function parse_route_id(id) {
 	return { pattern, params };
 }
 
-const optional_param_regex = /\/\[\[\w+?(?:=\w+)?\]\]/;
+const optional_param_regex = /\/\[\[[\w-]+?(?:=[\w-]+)?\]\]/;
 
 /**
  * Removes optional params from a route ID.
@@ -260,7 +260,7 @@ function escape(str) {
 	);
 }
 
-const basic_param_pattern = /\[(\[)?(\.\.\.)?(\w+?)(?:=(\w+))?\]\]?/g;
+const basic_param_pattern = /\[(\[)?(\.\.\.)?([\w-]+?)(?:=([\w-]+))?\]\]?/g;
 
 /**
  * Populate a route ID with params to resolve a pathname.

package/src/version.js

@@ -1,4 +1,4 @@
 // generated during release, do not modify
 
 /** @type {string} */
-export const VERSION = '3.0.0-next.7';
+export const VERSION = '3.0.0-next.9';