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

package/src/runtime/form-utils.js

@@ -4,6 +4,7 @@
 import { DEV } from 'esm-env';
 import * as devalue from 'devalue';
 import { text_encoder } from './utils.js';
+import { noop } from '../utils/functions.js';
 import { SvelteKitError } from '@sveltejs/kit/internal';
 
 const decoder = new TextDecoder();
@@ -26,6 +27,9 @@ export function set_nested_value(object, path_string, value) {
 	deep_set(object, split_path(path_string), value);
 }
 
+/** Pass this to set_nested_value to delete the last part of the given path */
+export const DELETE_KEY = {};
+
 /**
  * Convert `FormData` into a POJO
  * @param {FormData} data
@@ -146,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 = [];
@@ -320,7 +321,7 @@ export async function deserialize_binary_form(request) {
 			const chunk = await get_chunk(chunks.length);
 			has_more = !!chunk;
 		}
-	})();
+	})().catch(noop); // prevent unhandled rejection potentially crashing the process
 
 	return { data, meta, form_data: null };
 }
@@ -504,6 +505,10 @@ export function deep_set(object, keys, value) {
 		}
 
 		if (!exists) {
+			if (value === DELETE_KEY) {
+				// don't create the nested structure if we want to delete the key anyway
+				return;
+			}
 			current[key] = is_array ? [] : {};
 		}
 
@@ -512,7 +517,12 @@ export function deep_set(object, keys, value) {
 
 	const final_key = keys[keys.length - 1];
 	check_prototype_pollution(final_key);
-	current[final_key] = value;
+
+	if (value === DELETE_KEY) {
+		delete current[final_key];
+	} else {
+		current[final_key] = value;
+	}
 }
 
 /**

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/index.js

@@ -27,7 +27,7 @@ export class Server {
 		this.#manifest = manifest;
 
 		// Since AsyncLocalStorage is not working in webcontainers, we don't reset `sync_store`
-		// in `src/exports/internal/event.js` and handle only one request at a time.
+		// in `src/exports/internal/server/event.js` and handle only one request at a time.
 		if (IN_WEBCONTAINER) {
 			const respond = this.respond.bind(this);
 

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/load_data.js

@@ -377,7 +377,7 @@ export function create_universal_fetch(event, state, fetched, csr, resolve_opts)
 						}
 
 						void push_fetched(base64_encode(result), true);
-					})();
+					})().catch(noop); // prevent unhandled rejection potentially crashing the process
 
 					return (teed_body = b);
 				}

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 {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,53 +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 });
-
-				const maybe_promise = options.root.render(props, render_opts);
+			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.
-				const rendered =
-					options.async && 'then' in maybe_promise
-						? /** @type {ReturnType<typeof options.root.render> & Promise<any>} */ (
-								maybe_promise
-							).then((r) => r)
-						: maybe_promise;
-
-				// TODO 3.0 remove options.async
-				if (options.async) {
-					// 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 });
 
-				const { head, html, css, hashes } = /** @type {ReturnType<typeof options.root.render>} */ (
-					options.async ? await rendered : rendered
-				);
+				const { head, body, hashes } = await rendered;
 
 				if (hashes) {
 					csp.add_script_hashes(hashes.script);
 				}
 
-				return { head, html, css, hashes };
+				return { head, body, hashes };
 			});
 		} finally {
 			if (DEV) {
 				globalThis.fetch = fetch;
 			}
-
-			paths.reset(); // just in case `options.root.render(...)` failed
 		}
 	} else {
-		rendered = { head: '', html: '', css: { code: '', map: null }, hashes: { script: [] } };
+		rendered = { head: '', body: '', hashes: { script: [] } };
 	}
 
 	for (const { node } of branch) {
@@ -298,7 +281,7 @@ export async function render_response({
 	}
 
 	const head = new Head(rendered.head);
-	let body = rendered.html;
+	let body = rendered.body;
 
 	/** @param {string} path */
 	const prefixed = (path) => {
@@ -421,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)}`);
@@ -444,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))});`;
 				}
@@ -538,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/page/server_routing.js

@@ -69,15 +69,19 @@ export async function resolve_route(resolved_path, url, manifest) {
 		return text('Server-side route resolution disabled', { status: 400 });
 	}
 
-	const matchers = await manifest._.matchers();
-	const result = find_route(resolved_path, manifest._.client.routes, matchers);
-
-	return create_server_routing_response(
-		result?.route ?? null,
-		result?.params ?? {},
-		url,
-		manifest._.client
-	).response;
+	try {
+		const matchers = await manifest._.matchers();
+		const result = find_route(resolved_path, manifest._.client.routes, matchers);
+
+		return create_server_routing_response(
+			result?.route ?? null,
+			result?.params ?? {},
+			url,
+			manifest._.client
+		).response;
+	} catch {
+		return text('Error resolving route', { status: 500 });
+	}
 }
 
 /**

package/src/runtime/server/remote.js

@@ -361,14 +361,15 @@ 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>[]} */
 	const promises = [];
 
 	if (state.remote.explicit) {
-		for (const [remote_key, { internals, promise }] of state.remote.explicit) {
+		for (const [remote_key, { internals, fn }] of state.remote.explicit) {
 			// there were explicit refreshes/reconnects (via `refresh()`/`set()`/`reconnect()`),
 			// so the client should apply these single-flight updates instead of calling `invalidateAll()`
 			data.r = true;
@@ -377,18 +378,27 @@ export async function collect_remote_data(data, event, state, options) {
 				internals.type === 'query_live' ? 'l' : internals.type[0]
 			);
 
-			await promise.then(
-				(v) => {
-					((data[type] ??= {})[remote_key] ??= {}).v = v;
-				},
-				async (e) => {
-					if (e instanceof Redirect) {
-						// already handled elsewhere
-						return;
-					}
+			// `fn` is deferred until now so the query runs after any state mutations
+			// in the command/form body. If the query was re-awaited in the meantime,
+			// `fn` returns the existing (fresh) cache entry rather than re-running.
+			// Kick off the query immediately and collect the promise so that multiple
+			// explicit refreshes run concurrently rather than serially.
+			const promise = fn();
+
+			promises.push(
+				promise.then(
+					(v) => {
+						((data[type] ??= {})[remote_key] ??= {}).v = v;
+					},
+					async (e) => {
+						if (e instanceof Redirect) {
+							// already handled elsewhere
+							return;
+						}
 
-					((data[type] ??= {})[remote_key] ??= {}).e = await convert_error(e);
-				}
+						((data[type] ??= {})[remote_key] ??= {}).e = await convert_error(e);
+					}
+				)
 			);
 		}
 	}

package/src/runtime/server/respond.js

@@ -336,14 +336,17 @@ export async function internal_respond(request, options, manifest, state) {
 	}
 
 	if (!state.prerendering?.fallback) {
-		// TODO this could theoretically break — should probably be inside a try-catch
-		const matchers = await manifest._.matchers();
-		const result = find_route(resolved_path, manifest._.routes, matchers);
-
-		if (result) {
-			route = result.route;
-			event.route = { id: route.id };
-			event.params = result.params;
+		try {
+			const matchers = await manifest._.matchers();
+			const result = find_route(resolved_path, manifest._.routes, matchers);
+
+			if (result) {
+				route = result.route;
+				event.route = { id: route.id };
+				event.params = result.params;
+			}
+		} catch (e) {
+			return await handle_fatal_error(event, event_state, options, e);
 		}
 	}
 

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/telemetry/otel.js

@@ -15,7 +15,7 @@ if (__SVELTEKIT_SERVER_TRACING_ENABLED__) {
 		})
 		.catch(() => {
 			throw new Error(
-				'Tracing is enabled (see the SvelteKit plugin `experimental.instrumentation.server` option in your vite.config.js), but `@opentelemetry/api` is not available. This error will likely resolve itself when you set up your tracing instrumentation in `instrumentation.server.js`. For more information, see https://svelte.dev/docs/kit/observability#opentelemetry-api'
+				'Tracing is enabled (see the SvelteKit plugin `tracing.server` option in your vite.config.js), but `@opentelemetry/api` is not available. This error will likely resolve itself when you set up your tracing instrumentation in `instrumentation.server.js`. For more information, see https://svelte.dev/docs/kit/observability#opentelemetry-api'
 			);
 		});
 }

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/ambient.d.ts

@@ -32,23 +32,27 @@ declare namespace App {
 	/**
 	 * The interface that defines `event.locals`, which can be accessed in server [hooks](https://svelte.dev/docs/kit/hooks) (`handle`, and `handleError`), server-only `load` functions, and `+server.js` files.
 	 */
+	// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 	export interface Locals {}
 
 	/**
-	 * Defines the common shape of the [page.data state](https://svelte.dev/docs/kit/$app-state#page) and [$page.data store](https://svelte.dev/docs/kit/$app-stores#page) - that is, the data that is shared between all pages.
+	 * Defines the common shape of the [page.data state](https://svelte.dev/docs/kit/$app-state#page) - that is, the data that is shared between all pages.
 	 * The `Load` and `ServerLoad` functions in `./$types` will be narrowed accordingly.
 	 * Use optional properties for data that is only present on specific pages. Do not add an index signature (`[key: string]: any`).
 	 */
+	// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 	export interface PageData {}
 
 	/**
 	 * The shape of the `page.state` object, which can be manipulated using the [`pushState`](https://svelte.dev/docs/kit/$app-navigation#pushState) and [`replaceState`](https://svelte.dev/docs/kit/$app-navigation#replaceState) functions from `$app/navigation`.
 	 */
+	// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 	export interface PageState {}
 
 	/**
 	 * If your adapter provides [platform-specific context](https://svelte.dev/docs/kit/adapters#Platform-specific-context) via `event.platform`, you can specify it here.
 	 */
+	// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 	export interface Platform {}
 }