@sveltejs/kit 3.0.0-next.1 → 3.0.0-next.10

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';
@@ -11,7 +11,7 @@ import { uneval_action_response } from './actions.js';
 import { SVELTE_KIT_ASSETS } from '../../../constants.js';
 import { SCHEME } from '../../../utils/url.js';
 import { create_server_routing_response, generate_route_object } from './server_routing.js';
-import { add_resolution_suffix } from '../../pathname.js';
+import { add_data_suffix, add_resolution_suffix } from '../../pathname.js';
 import { try_get_request_store, with_request_store } from '@sveltejs/kit/internal/server';
 import { text_encoder } from '../../utils.js';
 import {
@@ -20,17 +20,13 @@ import {
 	get_global_name,
 	handle_error_and_jsonify
 } from '../utils.js';
-import { create_remote_key } from '../../shared.js';
-import { get_status } from '../../../utils/error.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 {{
@@ -47,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({
@@ -68,7 +64,7 @@ export async function render_response({
 }) {
 	if (state.prerendering) {
 		if (options.csp.mode === 'nonce') {
-			throw new Error('Cannot use prerendering if config.kit.csp.mode === "nonce"');
+			throw new Error('Cannot use prerendering if config.csp.mode === "nonce"');
 		}
 
 		if (options.app_template_contains_nonce) {
@@ -78,9 +74,9 @@ export async function render_response({
 
 	const { client } = manifest._;
 
-	const modulepreloads = new Set(client.imports);
-	const stylesheets = new Set(client.stylesheets);
-	const fonts = new Set(client.fonts);
+	const modulepreloads = new Set(client?.imports);
+	const stylesheets = new Set(client?.stylesheets);
+	const fonts = new Set(client?.fonts);
 
 	/**
 	 * The value of the Link header that is added to the response when not prerendering
@@ -92,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 =
@@ -119,7 +116,12 @@ export async function render_response({
 	// if appropriate, use relative paths for greater portability
 	if (paths.relative) {
 		if (!state.prerendering?.fallback) {
-			const segments = event.url.pathname.slice(paths.base.length).split('/').slice(2);
+			// the relative path depth must reflect the URL the browser is actually at, which
+			// for a data request includes the `__data.json` suffix that was stripped during routing
+			const pathname = event.isDataRequest
+				? add_data_suffix(event.url.pathname)
+				: event.url.pathname;
+			const segments = pathname.slice(paths.base.length).split('/').slice(2);
 
 			base = segments.map(() => '..').join('/') || '.';
 
@@ -138,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([
@@ -193,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 = get_status(e);
-						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
 		};
@@ -227,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) {
@@ -281,7 +268,7 @@ export async function render_response({
 		for (const url of node.stylesheets) stylesheets.add(url);
 		for (const url of node.fonts) fonts.add(url);
 
-		if (node.inline_styles && !client.inline) {
+		if (node.inline_styles && !client?.inline) {
 			Object.entries(await node.inline_styles()).forEach(([filename, css]) => {
 				if (typeof css === 'string') {
 					inline_styles.set(filename, css);
@@ -294,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) => {
@@ -307,7 +294,7 @@ export async function render_response({
 		return `${assets}/${path}`;
 	};
 
-	const style = client.inline
+	const style = client?.inline
 		? client.inline?.style
 		: Array.from(inline_styles.values()).join('\n');
 
@@ -371,10 +358,16 @@ export async function render_response({
 			.join('\n\t\t\t')}`;
 	}
 
-	if (page_config.csr) {
-		const route = manifest._.client.routes?.find((r) => r.id === event.route.id) ?? null;
+	if (page_config.csr && client) {
+		const route = client.routes?.find((r) => r.id === event.route.id) ?? null;
+
+		// when serving a prerendered page in an app that uses runtime public env vars, we must
+		// import the env.js module so that it evaluates before any user code can evaluate.
+		// TODO revert to using top-level await once https://bugs.webkit.org/show_bug.cgi?id=242740 is fixed
+		// https://github.com/sveltejs/kit/pull/11601
+		const load_env_eagerly = client.uses_env_dynamic_public && !!state.prerendering;
 
-		if (client.uses_env_dynamic_public && state.prerendering) {
+		if (load_env_eagerly) {
 			modulepreloads.add(`${paths.app_dir}/env.js`);
 		}
 
@@ -386,7 +379,7 @@ export async function render_response({
 			/** @type {(path: string) => void} */
 			let add_preload;
 
-			// see the kit.output.preloadStrategy option for details on why we have multiple options here
+			// see the output.preloadStrategy option for details on why we have multiple options here
 			if (options.link_header_preload && !state.prerendering) {
 				add_preload = (path) =>
 					link_headers.add(`<${encodeURI(path)}>; rel="modulepreload"; nopush`);
@@ -400,24 +393,18 @@ export async function render_response({
 		}
 
 		// prerender a `/path/to/page/__route.js` module
-		if (manifest._.client.routes && state.prerendering && !state.prerendering.fallback) {
+		if (client.routes && state.prerendering && !state.prerendering.fallback) {
 			const pathname = add_resolution_suffix(event.url.pathname);
 
 			state.prerendering.dependencies.set(
 				pathname,
-				create_server_routing_response(route, event.params, new URL(pathname, event.url), manifest)
+				create_server_routing_response(route, event.params, new URL(pathname, event.url), client)
 			);
 		}
 
 		const blocks = [];
 
-		// when serving a prerendered page in an app that uses $app/env/public, we must
-		// import the env.js module so that it evaluates before any user code can evaluate.
-		// TODO revert to using top-level await once https://bugs.webkit.org/show_bug.cgi?id=242740 is fixed
-		// https://github.com/sveltejs/kit/pull/11601
-		const load_env_eagerly = client.uses_env_dynamic_public && state.prerendering; // TODO implement uses_env_dynamic_public
-
-		const properties = [`base: ${base_expression}`];
+		const properties = [`base: ${base_expression}`, `version: ${s(__SVELTEKIT_APP_VERSION__)}`];
 
 		if (paths.assets) {
 			properties.push(`assets: ${s(paths.assets)}`);
@@ -438,9 +425,11 @@ export async function render_response({
 
 			if (Object.keys(options.hooks.transport).length > 0) {
 				if (client.inline) {
-					app_declaration = `const app = __sveltekit_${options.version_hash}.app.app;`;
+					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))});`;
 				}
@@ -501,13 +490,13 @@ export async function render_response({
 				`error: ${serialized.error}`
 			];
 
-			if (status !== 200) {
+			if (status !== 200 && !error) {
 				hydrate.push(`status: ${status}`);
 			}
 
-			if (manifest._.client.routes) {
+			if (client.routes) {
 				if (route) {
-					const stringified = generate_route_object(route, event.url, manifest).replaceAll(
+					const stringified = generate_route_object(route, event.url, client).replaceAll(
 						'\n',
 						'\n\t\t\t\t\t\t\t'
 					); // make output after it's put together with the rest more readable
@@ -521,87 +510,26 @@ export async function render_response({
 			args.push(`{\n${indent}\t${hydrate.join(`,\n${indent}\t`)}\n${indent}}`);
 		}
 
-		const { remote } = event_state;
-
-		let serialized_query_data = '';
-		let serialized_prerender_data = '';
-
-		if (remote.data) {
-			/** @type {Record<string, any>} */
-			const query = {};
-
-			/** @type {Record<string, any>} */
-			const prerender = {};
-
-			for (const [internals, cache] of remote.data) {
-				// remote functions without an `id` aren't exported, and thus
-				// cannot be called from the client
-				if (!internals.id) continue;
-
-				for (const key in cache) {
-					const entry = cache[key];
-
-					if (!entry.serialize) continue;
-
-					const remote_key = create_remote_key(internals.id, key);
-
-					const store = internals.type === 'prerender' ? prerender : query;
-
-					if (
-						event_state.remote.refreshes?.has(remote_key) ||
-						event_state.remote.reconnects?.has(remote_key)
-					) {
-						// This entry was refreshed/set by a command or form action.
-						// Always await it so the mutation result is serialized.
-						store[remote_key] = await entry.data;
-					} else {
-						// Don't block the response on pending remote data - if a query
-						// hasn't settled yet, it wasn't awaited in the template (or is behind a pending boundary).
-						const result = await Promise.race([
-							Promise.resolve(entry.data).then(
-								(v) => /** @type {const} */ ({ settled: true, value: v }),
-								(e) => /** @type {const} */ ({ settled: true, error: e })
-							),
-							new Promise((resolve) => {
-								queueMicrotask(() => resolve(/** @type {const} */ ({ settled: false })));
-							})
-						]);
-
-						if (result.settled) {
-							if ('error' in result) throw result.error;
-							store[remote_key] = result.value;
-						}
-					}
-				}
-			}
-
-			const replacer = create_replacer(options.hooks.transport);
+		const remote_data = await collect_remote_data({}, event, event_state, options);
 
-			if (Object.keys(query).length > 0) {
-				serialized_query_data = `${global}.query = ${devalue.uneval(query, replacer)};\n\n\t\t\t\t\t\t`;
-			}
-
-			if (Object.keys(prerender).length > 0) {
-				serialized_prerender_data = `${global}.prerender = ${devalue.uneval(prerender, replacer)};\n\n\t\t\t\t\t\t`;
-			}
-		}
-
-		const serialized_remote_data = `${serialized_query_data}${serialized_prerender_data}`;
+		const serialized_data =
+			Object.keys(remote_data).length > 0
+				? `${global}.data = ${devalue.uneval(remote_data, create_replacer(options.hooks.transport))};\n\n\t\t\t\t\t\t`
+				: '';
 
 		// `client.app` is a proxy for `bundleStrategy === 'split'`
 		const boot = client.inline
 			? `${client.inline.script}
 
-					${serialized_remote_data}${global}.app.start(${args.join(', ')});`
+					${serialized_data}${global}.app.start(${args.join(', ')});`
 			: client.app
-				? `Promise.all([
-						import(${s(prefixed(client.start))}),
-						import(${s(prefixed(client.app))})
-					]).then(([kit, app]) => {
-						${serialized_remote_data}kit.start(app, ${args.join(', ')});
+				? `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) => {
-						${serialized_remote_data}app.start(${args.join(', ')})
+						${serialized_data}app.start(${args.join(', ')})
 					});`;
 
 		if (load_env_eagerly) {
@@ -615,12 +543,9 @@ export async function render_response({
 		}
 
 		if (options.service_worker) {
-			let opts = __SVELTEKIT_DEV__ ? ", { type: 'module' }" : '';
+			let opts = ", { type: 'module' }";
 			if (options.service_worker_options != null) {
-				const service_worker_options = { ...options.service_worker_options };
-				if (__SVELTEKIT_DEV__) {
-					service_worker_options.type = 'module';
-				}
+				const service_worker_options = { ...options.service_worker_options, type: 'module' };
 				opts = `, ${s(service_worker_options)}`;
 			}
 

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

@@ -2,7 +2,6 @@ import { Redirect } from '@sveltejs/kit/internal';
 import { render_response } from './render.js';
 import { load_data, load_server_data } from './load_data.js';
 import { handle_error_and_jsonify, static_error_page, redirect_response } from '../utils.js';
-import { get_status } from '../../../utils/error.js';
 import { PageNodes } from '../../../utils/page_nodes.js';
 import { server_data_serializer } from './data_serializer.js';
 
@@ -90,6 +89,8 @@ export async function respond_with_error({
 			);
 		}
 
+		const transformed = await handle_error_and_jsonify(event, event_state, options, error);
+
 		return await render_response({
 			options,
 			manifest,
@@ -98,8 +99,8 @@ export async function respond_with_error({
 				ssr,
 				csr
 			},
-			status,
-			error: await handle_error_and_jsonify(event, event_state, options, error),
+			status: transformed.status,
+			error: transformed,
 			branch,
 			error_components: [],
 			fetched,
@@ -115,10 +116,8 @@ export async function respond_with_error({
 			return redirect_response(e.status, e.location);
 		}
 
-		return static_error_page(
-			options,
-			get_status(e),
-			(await handle_error_and_jsonify(event, event_state, options, e)).message
-		);
+		const transformed = await handle_error_and_jsonify(event, event_state, options, e);
+
+		return static_error_page(options, transformed.status, transformed.message);
 	}
 }

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

@@ -1,3 +1,4 @@
+/** @import { SSRManifest } from '@sveltejs/kit' */
 import { base, assets, relative } from '$app/paths/internal/server';
 import { text } from '@sveltejs/kit';
 import { s } from '../../../utils/misc.js';
@@ -7,15 +8,15 @@ import { get_relative_path } from '../../utils.js';
 /**
  * @param {import('types').SSRClientRoute} route
  * @param {URL} url
- * @param {import('@sveltejs/kit').SSRManifest} manifest
+ * @param {NonNullable<SSRManifest['_']['client']>} client
  * @returns {string}
  */
-export function generate_route_object(route, url, manifest) {
+export function generate_route_object(route, url, client) {
 	const { errors, layouts, leaf } = route;
 
 	const nodes = [...errors, ...layouts.map((l) => l?.[1]), leaf[1]]
 		.filter((n) => typeof n === 'number')
-		.map((n) => `'${n}': () => ${create_client_import(manifest._.client.nodes?.[n], url)}`)
+		.map((n) => `'${n}': () => ${create_client_import(client.nodes?.[n], url)}`)
 		.join(',\n\t\t');
 
 	// stringified version of
@@ -60,36 +61,44 @@ function create_client_import(import_path, url) {
 /**
  * @param {string} resolved_path
  * @param {URL} url
- * @param {import('@sveltejs/kit').SSRManifest} manifest
+ * @param {SSRManifest} manifest
  * @returns {Promise<Response>}
  */
 export async function resolve_route(resolved_path, url, manifest) {
-	if (!manifest._.client.routes) {
+	if (!manifest._.client?.routes) {
 		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)
-		.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 });
+	}
 }
 
 /**
  * @param {import('types').SSRClientRoute | null} route
  * @param {Partial<Record<string, string>>} params
  * @param {URL} url
- * @param {import('@sveltejs/kit').SSRManifest} manifest
+ * @param {NonNullable<SSRManifest['_']['client']>} client
  * @returns {{response: Response, body: string}}
  */
-export function create_server_routing_response(route, params, url, manifest) {
+export function create_server_routing_response(route, params, url, client) {
 	const headers = new Headers({
 		'content-type': 'application/javascript; charset=utf-8'
 	});
 
 	if (route) {
-		const csr_route = generate_route_object(route, url, manifest);
-		const body = `${create_css_import(route, url, manifest)}\nexport const route = ${csr_route}; export const params = ${JSON.stringify(params)};`;
+		const csr_route = generate_route_object(route, url, client);
+		const body = `${create_css_import(route, url, client)}\nexport const route = ${csr_route}; export const params = ${JSON.stringify(params)};`;
 
 		return { response: text(body, { headers }), body };
 	} else {
@@ -105,17 +114,17 @@ export function create_server_routing_response(route, params, url, manifest) {
  *
  * @param {import('types').SSRClientRoute} route
  * @param {URL} url
- * @param {import('@sveltejs/kit').SSRManifest} manifest
+ * @param {NonNullable<SSRManifest['_']['client']>} client
  * @returns {string}
  */
-function create_css_import(route, url, manifest) {
+function create_css_import(route, url, client) {
 	const { errors, layouts, leaf } = route;
 
 	let css = '';
 
 	for (const node of [...errors, ...layouts.map((l) => l?.[1]), leaf[1]]) {
 		if (typeof node !== 'number') continue;
-		const node_css = manifest._.client.css?.[node];
+		const node_css = client.css?.[node];
 		for (const css_path of node_css ?? []) {
 			css += `'${assets || base}/${css_path}',`;
 		}
@@ -123,5 +132,5 @@ function create_css_import(route, url, manifest) {
 
 	if (!css) return '';
 
-	return `${create_client_import(/** @type {string} */ (manifest._.client.start), url)}.then(x => x.load_css([${css}]));`;
+	return `${create_client_import(client.start, url)}.then(x => x.load_css([${css}]));`;
 }