@sveltejs/kit 3.0.0-next.2 → 3.0.0-next.21

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

@@ -1,8 +1,9 @@
+/** @import { Component } from 'svelte'; */
 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';
+import * as paths from '#app/paths';
+import { relative } from '$app/paths/internal/server';
 import { hash } from '../../../utils/hash.js';
 import { serialize_data } from './serialize_data.js';
 import { s } from '../../../utils/misc.js';
@@ -11,26 +12,24 @@ 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,
+	route_id_resolution_pathname
+} from '../../pathname.js';
 import { try_get_request_store, with_request_store } from '@sveltejs/kit/internal/server';
 import { text_encoder } from '../../utils.js';
-import {
-	count_non_ssi_comments,
-	create_replacer,
-	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 { count_non_ssi_comments, get_global_name } from '../utils.js';
+import { handle_error_and_jsonify } from '../errors.js';
 import * as env from '__sveltekit/env';
+import { collect_remote_data } from '../remote-functions.js';
+import Root from '../../components/root.svelte';
+import { render } from 'svelte/server';
+import { Props, RenderNode } from '../../props.svelte.js';
+import { has_custom_transporters, uneval } from '#app/internal/transport';
 
 // TODO rename this function/module
 
-const updated = {
-	...readable(false),
-	check: () => false
-};
-
 /**
  * Creates the HTML response.
  * @param {{
@@ -38,16 +37,15 @@ const updated = {
  *   fetched: Array<import('./types.js').Fetched>;
  *   options: import('types').SSROptions;
  *   manifest: import('@sveltejs/kit').SSRManifest;
- *   state: import('types').SSRState;
  *   page_config: { ssr: boolean; csr: boolean };
  *   status: number;
  *   error: App.Error | null;
- *   event: import('@sveltejs/kit').RequestEvent;
- *   event_state: import('types').RequestState;
+ *   event: import('$app/server').RequestEvent;
+ *   state: import('types').RequestState;
  *   resolve_opts: import('types').RequiredResolveOptions;
- *   action_result?: import('@sveltejs/kit').ActionResult;
+ *   action_result?: import('$app/forms').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({
@@ -55,20 +53,19 @@ export async function render_response({
 	fetched,
 	options,
 	manifest,
-	state,
 	page_config,
 	status,
 	error = null,
 	event,
-	event_state,
+	state,
 	resolve_opts,
 	action_result,
 	data_serializer,
 	error_components
 }) {
-	if (state.prerendering) {
+	if (state.prerendering || state.prerender_default === true) {
 		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 +75,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 +89,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 =
@@ -113,13 +111,18 @@ export async function render_response({
 	let base_expression = s(paths.base);
 
 	const csp = new Csp(options.csp, {
-		prerender: !!state.prerendering
+		prerender: !!(state.prerendering || state.prerender_default === true)
 	});
 
 	// if appropriate, use relative paths for greater portability
-	if (paths.relative) {
+	if (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('/') || '.';
 
@@ -136,52 +139,52 @@ 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;
-			}
-			props.errors = error_components;
-		}
-
-		let 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;
-		}
-
-		props.page = {
+		const page = {
 			error,
 			params: /** @type {Record<string, any>} */ (event.params),
 			route: event.route,
 			status,
 			url: event.url,
-			data,
+			data: {},
 			form: form_value,
+			shallow: null,
 			state: {}
 		};
 
+		const props = new Props({
+			page,
+			tree: new RenderNode(
+				// TODO tidy up
+				/** @type {Component} */ (await branch[0].node.component?.()),
+				/** @type {Component} */ (error_components?.[1])
+			),
+			form: form_value,
+			error: error ?? undefined
+		});
+
+		let current_node = props.tree;
+		let data = props.page.data;
+
+		for (let i = 0; i < branch.length; i += 1) {
+			const node = branch[i];
+
+			data = { ...data, ...node.data };
+
+			current_node.data = data;
+
+			if (i < branch.length - 1) {
+				current_node = current_node.child = new RenderNode(
+					// TODO tidy up
+					/** @type {Component} */ (await branch[i + 1].node.component?.()),
+					/** @type {Component} */ (error_components?.slice(0, i + 2).findLast((x) => x))
+				);
+			}
+		}
+
+		props.page.data = data;
+
+		const render_state = { ...state, is_in_render: true };
+
 		const render_opts = {
 			context: new Map([
 				[
@@ -193,15 +196,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 +243,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 +271,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 +284,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 +297,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');
 
@@ -321,6 +311,19 @@ export async function render_response({
 		head.add_style(style, attributes);
 	}
 
+	/**
+	 * see the `output.linkHeaderPreload` option for details on why we have multiple options here
+	 * @param {string} path
+	 * @param {string[]} attributes
+	 */
+	const add_preload = (path, attributes) => {
+		if (options.link_header_preload && !(state.prerendering || state.prerender_default === true)) {
+			link_headers.add(`<${encodeURI(path)}>; ${attributes.join('; ')}; nopush`);
+		} else {
+			head.add_link_tag(path, attributes);
+		}
+	};
+
 	for (const dep of stylesheets) {
 		const path = prefixed(dep);
 
@@ -345,18 +348,7 @@ export async function render_response({
 		if (resolve_opts.preload({ type: 'font', path })) {
 			const ext = dep.slice(dep.lastIndexOf('.') + 1);
 
-			if (options.link_header_preload && !state.prerendering) {
-				link_headers.add(
-					`<${encodeURI(path)}>; rel="preload"; as="font"; type="font/${ext}"; crossorigin; nopush`
-				);
-			} else {
-				head.add_link_tag(path, [
-					'rel="preload"',
-					'as="font"',
-					`type="font/${ext}"`,
-					'crossorigin'
-				]);
-			}
+			add_preload(path, ['rel="preload"', 'as="font"', `type="font/${ext}"`, 'crossorigin']);
 		}
 	}
 
@@ -366,58 +358,66 @@ export async function render_response({
 	if (page_config.ssr && page_config.csr) {
 		body += `\n\t\t\t${fetched
 			.map((item) =>
-				serialize_data(item, resolve_opts.filterSerializedResponseHeaders, !!state.prerendering)
+				serialize_data(
+					item,
+					resolve_opts.filterSerializedResponseHeaders,
+					!!(state.prerendering || state.prerender_default === true)
+				)
 			)
 			.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 || state.prerender_default === true);
 
-		if (client.uses_env_dynamic_public && state.prerendering) {
+		if (load_env_eagerly) {
 			modulepreloads.add(`${paths.app_dir}/env.js`);
 		}
 
 		if (!client.inline) {
-			const included_modulepreloads = Array.from(modulepreloads, (dep) => prefixed(dep)).filter(
-				(path) => resolve_opts.preload({ type: 'js', path })
-			);
+			for (const dep of modulepreloads) {
+				const path = prefixed(dep);
 
-			/** @type {(path: string) => void} */
-			let add_preload;
-
-			// see the kit.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`);
-			} else {
-				add_preload = (path) => head.add_link_tag(path, ['rel="modulepreload"']);
-			}
-
-			for (const path of included_modulepreloads) {
-				add_preload(path);
+				if (resolve_opts.preload({ type: 'js', path })) {
+					add_preload(path, ['rel="modulepreload"']);
+				}
 			}
 		}
 
 		// 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)
 			);
+
+			// Prerender a route-ID-keyed `/_app/routes/<id>/__route.js` module alongside the
+			// pathname-keyed one above, so that `preloadCode(id)` can resolve a route ID without
+			// hitting the server.
+			if (route && !state.prerendering.resolved_route_ids.has(route.id)) {
+				state.prerendering.resolved_route_ids.add(route.id);
+
+				const id_pathname = paths.base + route_id_resolution_pathname(route.id);
+
+				state.prerendering.dependencies.set(
+					id_pathname,
+					create_server_routing_response(route, null, new URL(id_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)}`);
@@ -436,11 +436,13 @@ export async function render_response({
 
 			let app_declaration = '';
 
-			if (Object.keys(options.hooks.transport).length > 0) {
+			if (has_custom_transporters) {
 				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))});`;
 				}
@@ -485,8 +487,7 @@ export async function render_response({
 			if (form_value) {
 				serialized.form = uneval_action_response(
 					form_value,
-					/** @type {string} */ (event.route.id),
-					options.hooks.transport
+					/** @type {string} */ (event.route.id)
 				);
 			}
 
@@ -501,13 +502,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 +522,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 remote_data = await collect_remote_data({}, event, state, options);
 
-			const replacer = create_replacer(options.hooks.transport);
-
-			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 = ${uneval(remote_data)};\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 +555,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)}`;
 			}
 
@@ -639,11 +576,8 @@ export async function render_response({
 					}`);
 		}
 
-		// we need to eagerly import the Vite client module in development to ensure
-		// that Vite global constant replacements are initialised before our code runs
 		const init_app = `
 				{
-					${DEV ? `import('${paths.base}/@vite/client')` : ''}
 					${blocks.join('\n\n\t\t\t\t\t')}
 				}
 			`;
@@ -659,14 +593,14 @@ export async function render_response({
 		'content-type': 'text/html'
 	});
 
-	if (state.prerendering) {
+	if (state.prerendering || state.prerender_default === true) {
 		// TODO read headers set with setHeaders and convert into http-equiv where possible
 		const csp_headers = csp.csp_provider.get_meta();
 		if (csp_headers) {
 			head.add_http_equiv(csp_headers);
 		}
 
-		if (state.prerendering.cache) {
+		if (state.prerendering?.cache) {
 			head.add_http_equiv(
 				`<meta http-equiv="cache-control" content="${state.prerendering.cache}">`
 			);