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

package/src/runtime/client/entry.js

@@ -1,3 +1,24 @@
-// we expose this as a separate entry point (rather than treating client.js as the entry point)
-// so that everything other than `start`/`load_css` can be treeshaken
-export { start, load_css } from './client.js';
+/* in development or if `bundleStrategy` is 'split', this file is used as the entry point */
+
+import { set_payload } from './payload.js';
+
+/** @type {Promise<typeof import('./client-entry.js')>} */
+let client;
+
+/** @param {import('types').SvelteKitPayload} payload */
+export function init(payload) {
+	set_payload(payload);
+	// Importing the client after setting the payload ensures that modules such as
+	// `$app/paths` can read it during initialization.
+	client ??= import('./client-entry.js');
+}
+
+/** @param {Parameters<import('./client-entry.js').start>} args */
+export async function start(...args) {
+	return (await client).start(...args);
+}
+
+/** @param {Parameters<import('./client-entry.js').load_css>} args */
+export async function load_css(...args) {
+	return (await client).load_css(...args);
+}

package/src/runtime/client/payload.js

@@ -0,0 +1,17 @@
+/** @import {SvelteKitPayload} from 'types'; */
+
+/**
+ * Code inside the SvelteKit client runtime should only use this, not the global,
+ * so that the file hashes stay stable between rebuilds as long as the SvelteKit runtime doesn't change
+ */
+export let payload = __SVELTEKIT_PAYLOAD__ ?? /** @type {SvelteKitPayload} */ ({});
+
+/** @param {SvelteKitPayload} value */
+export function set_payload(value) {
+	payload = value;
+}
+
+// this makes Vite inject its dev client code as this module's first dependency
+// so that global constant replacements are done before any other module evaluates.
+// For build, it's inert.
+import.meta.hot;

package/src/runtime/client/remote-functions/form.svelte.js

@@ -8,8 +8,8 @@ import {
 	query_responses,
 	_goto,
 	set_nearest_error_page,
-	invalidateAll,
-	handle_error
+	handle_error,
+	refreshAll
 } from '../client.js';
 import { tick } from 'svelte';
 import { categorize_updates, remote_request } from './shared.svelte.js';
@@ -227,14 +227,14 @@ export function form(id) {
 
 					// if the developer took control of updates via `.updates(...)` (even with
 					// no arguments), or the server performed explicit refreshes, don't invalidateAll
-					const should_invalidate = refreshes === null && !response.r;
+					const should_refresh = refreshes === null && !response.r;
 
 					if (response.redirect) {
 						// Use internal version to allow redirects to external URLs
 						void _goto(
 							response.redirect,
 							{
-								invalidateAll: should_invalidate
+								refreshAll: should_refresh
 							},
 							0
 						);
@@ -244,8 +244,8 @@ export function form(id) {
 					const succeeded = raw_issues.length === 0;
 
 					if (succeeded) {
-						if (should_invalidate) {
-							void invalidateAll();
+						if (should_refresh) {
+							void refreshAll();
 						}
 					} else {
 						if (DEV) {

package/src/runtime/client/types.d.ts

@@ -10,6 +10,7 @@ import {
 	Uses
 } from 'types';
 import { Page, ParamMatcher } from '@sveltejs/kit';
+import { RenderNode } from '../types.js';
 
 export interface SvelteKitApp {
 	/**
@@ -57,8 +58,6 @@ export interface SvelteKitApp {
 	 */
 	hash: boolean;
 
-	root: typeof SvelteComponent;
-
 	/**
 	 * Lazily loads the contents of src/error.html, used as a last-resort
 	 * error page when the root layout's load function throws during client-side rendering.
@@ -91,13 +90,10 @@ export type NavigationFinished = {
 	type: 'loaded';
 	state: NavigationState;
 	props: {
-		constructors: Array<typeof SvelteComponent>;
-		errors?: Array<typeof SvelteComponent | undefined>;
-		components?: SvelteComponent[];
 		page: Page;
 		form?: Record<string, any> | null;
 		error?: App.Error;
-		[key: `data_${number}`]: Record<string, any>;
+		tree: RenderNode;
 	};
 };
 

package/src/runtime/components/root.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { afterNavigate } from '$app/navigation';
+	import type { Page } from '@sveltejs/kit';
+	import type { RenderNode } from '../types.js';
+
+	interface Props {
+		page: Page;
+		tree: RenderNode;
+		components: any[];
+		resetters: Array<(() => void) | undefined>;
+		form?: any;
+		error?: App.Error;
+	}
+
+	const { page, components, resetters, tree, form, error }: Props = $props();
+
+	let mounted = $state(false);
+	let navigated = $state(false);
+	let title = $state('');
+
+	afterNavigate(() => {
+		if (mounted) {
+			navigated = true;
+			title = document.title || 'untitled page';
+		} else {
+			mounted = true;
+		}
+	});
+</script>
+
+{#snippet node(n: RenderNode, depth: number)}
+	{const Component = $derived(n.component)}
+	{const Error = $derived(n.error)}
+	{const data = $derived(n.data)}
+
+	<svelte:boundary onerror={(_, reset) => (resetters[depth] = reset)}>
+		{#if n.child}
+			<!-- svelte-ignore binding_property_non_reactive -->
+			<Component bind:this={components[depth]} {data} {form} params={page.params}>
+				{@render node(n.child, depth + 1)}
+			</Component>
+		{:else}
+			<!-- svelte-ignore binding_property_non_reactive -->
+			<Component bind:this={components[depth]} {data} {form} params={page.params} {error} />
+		{/if}
+
+		{#snippet failed(error)}
+			<Error {error} />
+		{/snippet}
+	</svelte:boundary>
+{/snippet}
+
+{@render node(tree, 0)}
+
+{#if mounted}
+	<div
+		id="svelte-announcer"
+		aria-live="assertive"
+		aria-atomic="true"
+		style="position: absolute; left: 0; top: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; width: 1px; height: 1px"
+	>
+		{#if navigated}
+			{title}
+		{/if}
+	</div>
+{/if}

package/src/runtime/form-utils.js

@@ -150,10 +150,7 @@ export async function deserialize_binary_form(request) {
 		throw deserialize_error('no body');
 	}
 
-	// TODO: remove this workaround once we upgrade to TS 6.0
-	const reader = /** @type {ReadableStreamDefaultReader<Uint8Array<ArrayBuffer>>} */ (
-		request.body.getReader()
-	);
+	const reader = request.body.getReader();
 
 	/** @type {Array<Promise<Uint8Array<ArrayBuffer> | undefined>>} */
 	const chunks = [];

package/src/runtime/server/cookie.js

@@ -12,10 +12,11 @@ import { text_encoder } from '../utils.js';
 const cookie_paths = {};
 
 /**
- * Cookies that are larger than this size (including the name and other
- * attributes) are discarded by browsers
+ * Cookies whose name and value combined are larger than this size are
+ * discarded by browsers. This is the limit codified for the name/value pair
+ * in RFC 6265bis: https://datatracker.ietf.org/doc/html/draft-ietf-httpbis-rfc6265bis-20#section-5.6-7.5.1
  */
-const MAX_COOKIE_SIZE = 4129;
+const MAX_COOKIE_SIZE = 4096;
 
 /**
  * Generates a unique key for a cookie based on its domain, path, and name in
@@ -124,7 +125,13 @@ export function get_cookies(request, url) {
 
 			// Add the most specific cookies to the result
 			for (const c of lookup.values()) {
-				cookies[c.name] = c.value;
+				// tombstones (deleted cookies) shadow request-header cookies,
+				// mirroring the behavior of `get()`
+				if (c.options.maxAge === 0) {
+					delete cookies[c.name];
+				} else {
+					cookies[c.name] = c.value;
+				}
 			}
 
 			return /** @type {Array<{ name: string; value: string }>} */ (
@@ -219,9 +226,12 @@ export function get_cookies(request, url) {
 		new_cookies.set(cookie_key, cookie);
 
 		if (DEV) {
-			const { encode, ...rest } = cookie.options;
-			const serialized = stringifySetCookie({ name, value, ...rest }, { encode });
-			if (text_encoder.encode(serialized).byteLength > MAX_COOKIE_SIZE) {
+			const size =
+				// only the name/value pair counts towards MAX_COOKIE_SIZE, not the other attributes
+				text_encoder.encode(name).byteLength +
+				text_encoder.encode((options.encode ?? encodeURIComponent)(value)).byteLength;
+
+			if (size > MAX_COOKIE_SIZE) {
 				throw new Error(`Cookie "${name}" is too large, and will be discarded by the browser`);
 			}
 

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

@@ -1,5 +1,6 @@
+/** @import { Component } from 'svelte' */
 /** @import { ActionResult, RequestEvent, SSRManifest } from '@sveltejs/kit' */
-/** @import { PageNodeIndexes, RequestState, RequiredResolveOptions, ServerDataNode, SSRComponent, SSRNode, SSROptions, SSRState } from 'types' */
+/** @import { PageNodeIndexes, RequestState, RequiredResolveOptions, ServerDataNode, SSRNode, SSROptions, SSRState } from 'types' */
 import { text } from '@sveltejs/kit';
 import { HttpError, Redirect } from '@sveltejs/kit/internal';
 import { compact } from '../../../utils/array.js';
@@ -316,13 +317,7 @@ export async function render_page(
 								},
 								status,
 								error,
-								error_components: await load_error_components(
-									options,
-									ssr,
-									error_branch,
-									page,
-									manifest
-								),
+								error_components: await load_error_components(ssr, error_branch, page, manifest),
 								branch: error_branch,
 								fetched,
 								data_serializer
@@ -374,7 +369,7 @@ export async function render_page(
 			action_result,
 			fetched,
 			data_serializer: !ssr ? server_data_serializer(event, event_state, options) : data_serializer,
-			error_components: await load_error_components(options, ssr, branch, page, manifest)
+			error_components: await load_error_components(ssr, branch, page, manifest)
 		});
 	} catch (e) {
 		// a remote function could have thrown a redirect during render
@@ -398,18 +393,16 @@ export async function render_page(
 }
 
 /**
- *
- * @param {SSROptions} options
  * @param {boolean} ssr
  * @param {Array<import('./types.js').Loaded | null>} branch
  * @param {PageNodeIndexes} page
  * @param {SSRManifest} manifest
  */
-async function load_error_components(options, ssr, branch, page, manifest) {
-	/** @type {Array<SSRComponent | undefined> | undefined} */
+async function load_error_components(ssr, branch, page, manifest) {
+	/** @type {Array<Component | undefined> | undefined} */
 	let error_components;
 
-	if (options.server_error_boundaries && ssr) {
+	if (ssr) {
 		let last_idx = -1;
 		error_components = await Promise.all(
 			// eslint-disable-next-line @typescript-eslint/await-thenable

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