@sveltejs/kit 1.0.0-next.44 → 1.0.0-next.442

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

@@ -0,0 +1,168 @@
+import { disable_search, make_trackable } from '../../../utils/url.js';
+
+/**
+ * Calls the user's `load` function.
+ * @param {{
+ *   dev: boolean;
+ *   event: import('types').RequestEvent;
+ *   state: import('types').SSRState;
+ *   node: import('types').SSRNode | undefined;
+ *   parent: () => Promise<Record<string, any>>;
+ * }} opts
+ * @returns {Promise<import('types').ServerDataNode | null>}
+ */
+export async function load_server_data({ dev, event, state, node, parent }) {
+	if (!node?.server) return null;
+
+	const uses = {
+		dependencies: new Set(),
+		params: new Set(),
+		parent: false,
+		url: false
+	};
+
+	const url = make_trackable(event.url, () => {
+		uses.url = true;
+	});
+
+	if (state.prerendering) {
+		disable_search(url);
+	}
+
+	const result = await node.server.load?.call(null, {
+		...event,
+		/** @param {string[]} deps */
+		depends: (...deps) => {
+			for (const dep of deps) {
+				const { href } = new URL(dep, event.url);
+				uses.dependencies.add(href);
+			}
+		},
+		params: new Proxy(event.params, {
+			get: (target, key) => {
+				uses.params.add(key);
+				return target[/** @type {string} */ (key)];
+			}
+		}),
+		parent: async () => {
+			uses.parent = true;
+			return parent();
+		},
+		url
+	});
+
+	const data = result ? await unwrap_promises(result) : null;
+
+	if (dev) {
+		check_serializability(data, /** @type {string} */ (node.server_id), 'data');
+	}
+
+	return {
+		type: 'data',
+		data,
+		uses: {
+			dependencies: uses.dependencies.size > 0 ? Array.from(uses.dependencies) : undefined,
+			params: uses.params.size > 0 ? Array.from(uses.params) : undefined,
+			parent: uses.parent ? 1 : undefined,
+			url: uses.url ? 1 : undefined
+		}
+	};
+}
+
+/**
+ * Calls the user's `load` function.
+ * @param {{
+ *   event: import('types').RequestEvent;
+ *   fetcher: typeof fetch;
+ *   node: import('types').SSRNode | undefined;
+ *   parent: () => Promise<Record<string, any>>;
+ *   server_data_promise: Promise<import('types').ServerDataNode | null>;
+ *   state: import('types').SSRState;
+ * }} opts
+ * @returns {Promise<Record<string, any> | null>}
+ */
+export async function load_data({ event, fetcher, node, parent, server_data_promise }) {
+	const server_data_node = await server_data_promise;
+
+	if (!node?.shared?.load) {
+		return server_data_node?.data ?? null;
+	}
+
+	const load_event = {
+		url: event.url,
+		params: event.params,
+		data: server_data_node?.data ?? null,
+		routeId: event.routeId,
+		fetch: fetcher,
+		setHeaders: event.setHeaders,
+		depends: () => {},
+		parent
+	};
+
+	// TODO remove this for 1.0
+	Object.defineProperties(load_event, {
+		session: {
+			get() {
+				throw new Error(
+					'session is no longer available. See https://github.com/sveltejs/kit/discussions/5883'
+				);
+			},
+			enumerable: false
+		}
+	});
+
+	const data = await node.shared.load.call(null, load_event);
+
+	return data ? unwrap_promises(data) : null;
+}
+
+/** @param {Record<string, any>} object */
+async function unwrap_promises(object) {
+	/** @type {Record<string, any>} */
+	const unwrapped = {};
+
+	for (const key in object) {
+		unwrapped[key] = await object[key];
+	}
+
+	return unwrapped;
+}
+
+/**
+ * Check that the data can safely be serialized to JSON
+ * @param {any} value
+ * @param {string} id
+ * @param {string} path
+ */
+function check_serializability(value, id, path) {
+	const type = typeof value;
+
+	if (type === 'string' || type === 'boolean' || type === 'number' || type === 'undefined') {
+		// primitives are fine
+		return;
+	}
+
+	if (type === 'object') {
+		// nulls are fine...
+		if (!value) return;
+
+		// ...so are plain arrays...
+		if (Array.isArray(value)) {
+			value.forEach((child, i) => {
+				check_serializability(child, id, `${path}[${i}]`);
+			});
+			return;
+		}
+
+		// ...and objects
+		const tag = Object.prototype.toString.call(value);
+		if (tag === '[object Object]') {
+			for (const key in value) {
+				check_serializability(value[key], id, `${path}.${key}`);
+			}
+			return;
+		}
+	}
+
+	throw new Error(`${path} returned from 'load' in ${id} cannot be serialized as JSON`);
+}

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

@@ -0,0 +1,361 @@
+import devalue from 'devalue';
+import { readable, writable } from 'svelte/store';
+import * as cookie from 'cookie';
+import { hash } from '../../hash.js';
+import { render_json_payload_script } from '../../../utils/escape.js';
+import { s } from '../../../utils/misc.js';
+import { Csp } from './csp.js';
+import { serialize_error } from '../utils.js';
+import { HttpError } from '../../../index/private.js';
+
+// TODO rename this function/module
+
+const updated = {
+	...readable(false),
+	check: () => false
+};
+
+/**
+ * Creates the HTML response.
+ * @param {{
+ *   branch: Array<import('./types').Loaded>;
+ *   fetched: Array<import('./types').Fetched>;
+ *   cookies: import('set-cookie-parser').Cookie[];
+ *   options: import('types').SSROptions;
+ *   state: import('types').SSRState;
+ *   page_config: { hydrate: boolean, router: boolean };
+ *   status: number;
+ *   error: HttpError | Error | null;
+ *   event: import('types').RequestEvent;
+ *   resolve_opts: import('types').RequiredResolveOptions;
+ *   validation_errors: Record<string, string> | undefined;
+ * }} opts
+ */
+export async function render_response({
+	branch,
+	fetched,
+	cookies,
+	options,
+	state,
+	page_config,
+	status,
+	error = null,
+	event,
+	resolve_opts,
+	validation_errors
+}) {
+	if (state.prerendering) {
+		if (options.csp.mode === 'nonce') {
+			throw new Error('Cannot use prerendering if config.kit.csp.mode === "nonce"');
+		}
+
+		if (options.template_contains_nonce) {
+			throw new Error('Cannot use prerendering if page template contains %sveltekit.nonce%');
+		}
+	}
+
+	const { entry } = options.manifest._;
+
+	const stylesheets = new Set(entry.stylesheets);
+	const modulepreloads = new Set(entry.imports);
+
+	/** @type {Set<string>} */
+	const link_header_preloads = new Set();
+
+	/** @type {Map<string, string>} */
+	// 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();
+
+	let rendered;
+
+	const stack = error instanceof HttpError ? undefined : error?.stack;
+
+	if (error && options.dev && !(error instanceof HttpError)) {
+		error.stack = options.get_stack(error);
+	}
+
+	if (resolve_opts.ssr) {
+		/** @type {Record<string, any>} */
+		const props = {
+			stores: {
+				page: writable(null),
+				navigating: writable(null),
+				updated
+			},
+			components: await Promise.all(branch.map(({ node }) => node.component()))
+		};
+
+		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 = {
+			error,
+			params: /** @type {Record<string, any>} */ (event.params),
+			routeId: event.routeId,
+			status,
+			url: event.url,
+			data
+		};
+
+		if (validation_errors) {
+			props.errors = validation_errors;
+		}
+
+		// TODO remove this for 1.0
+		/**
+		 * @param {string} property
+		 * @param {string} replacement
+		 */
+		const print_error = (property, replacement) => {
+			Object.defineProperty(props.page, property, {
+				get: () => {
+					throw new Error(`$page.${property} has been replaced by $page.url.${replacement}`);
+				}
+			});
+		};
+
+		print_error('origin', 'origin');
+		print_error('path', 'pathname');
+		print_error('query', 'searchParams');
+
+		rendered = options.root.render(props);
+
+		for (const { node } of branch) {
+			if (node.imports) {
+				node.imports.forEach((url) => modulepreloads.add(url));
+			}
+
+			if (node.stylesheets) {
+				node.stylesheets.forEach((url) => stylesheets.add(url));
+			}
+
+			if (node.inline_styles) {
+				Object.entries(await node.inline_styles()).forEach(([k, v]) => inline_styles.set(k, v));
+			}
+		}
+	} else {
+		rendered = { head: '', html: '', css: { code: '', map: null } };
+	}
+
+	let { head, html: body } = rendered;
+
+	const csp = new Csp(options.csp, {
+		dev: options.dev,
+		prerender: !!state.prerendering
+	});
+
+	const target = hash(body);
+
+	/**
+	 * The prefix to use for static assets. Replaces `%sveltekit.assets%` in the template
+	 * @type {string}
+	 */
+	let assets;
+
+	if (options.paths.assets) {
+		// if an asset path is specified, use it
+		assets = options.paths.assets;
+	} else if (state.prerendering?.fallback) {
+		// if we're creating a fallback page, asset paths need to be root-relative
+		assets = options.paths.base;
+	} else {
+		// otherwise we want asset paths to be relative to the page, so that they
+		// will work in odd contexts like IPFS, the internet archive, and so on
+		const segments = event.url.pathname.slice(options.paths.base.length).split('/').slice(2);
+		assets = segments.length > 0 ? segments.map(() => '..').join('/') : '.';
+	}
+
+	/** @param {string} path */
+	const prefixed = (path) => (path.startsWith('/') ? path : `${assets}/${path}`);
+
+	// prettier-ignore
+	const init_app = `
+		import { set_public_env, start } from ${s(prefixed(entry.file))};
+
+		set_public_env(${s(options.public_env)});
+
+		start({
+			target: document.querySelector('[data-sveltekit-hydrate="${target}"]').parentNode,
+			paths: ${s(options.paths)},
+			route: ${!!page_config.router},
+			spa: ${!resolve_opts.ssr},
+			trailing_slash: ${s(options.trailing_slash)},
+			hydrate: ${resolve_opts.ssr && page_config.hydrate ? `{
+				status: ${status},
+				error: ${error && serialize_error(error, e => e.stack)},
+				node_ids: [${branch.map(({ node }) => node.index).join(', ')}],
+				params: ${devalue(event.params)},
+				routeId: ${s(event.routeId)}
+			}` : 'null'}
+		});
+	`;
+
+	// we use an anonymous function instead of an arrow function to support
+	// older browsers (https://github.com/sveltejs/kit/pull/5417)
+	const init_service_worker = `
+		if ('serviceWorker' in navigator) {
+			addEventListener('load', function () {
+				navigator.serviceWorker.register('${options.service_worker}');
+			});
+		}
+	`;
+
+	if (inline_styles.size > 0) {
+		const content = Array.from(inline_styles.values()).join('\n');
+
+		const attributes = [];
+		if (options.dev) attributes.push(' data-sveltekit');
+		if (csp.style_needs_nonce) attributes.push(` nonce="${csp.nonce}"`);
+
+		csp.add_style(content);
+
+		head += `\n\t<style${attributes.join('')}>${content}</style>`;
+	}
+
+	for (const dep of stylesheets) {
+		const path = prefixed(dep);
+		const attributes = [];
+
+		if (csp.style_needs_nonce) {
+			attributes.push(`nonce="${csp.nonce}"`);
+		}
+
+		if (inline_styles.has(dep)) {
+			// don't load stylesheets that are already inlined
+			// include them in disabled state so that Vite can detect them and doesn't try to add them
+			attributes.push('disabled', 'media="(max-width: 0)"');
+		} else {
+			const preload_atts = ['rel="preload"', 'as="style"'].concat(attributes);
+			link_header_preloads.add(`<${encodeURI(path)}>; ${preload_atts.join(';')}; nopush`);
+		}
+
+		attributes.unshift('rel="stylesheet"');
+		head += `\n\t<link href="${path}" ${attributes.join(' ')}>`;
+	}
+
+	if (page_config.router || page_config.hydrate) {
+		for (const dep of modulepreloads) {
+			const path = prefixed(dep);
+			link_header_preloads.add(`<${encodeURI(path)}>; rel="modulepreload"; nopush`);
+			if (state.prerendering) {
+				head += `\n\t<link rel="modulepreload" href="${path}">`;
+			}
+		}
+
+		const attributes = ['type="module"', `data-sveltekit-hydrate="${target}"`];
+
+		csp.add_script(init_app);
+
+		if (csp.script_needs_nonce) {
+			attributes.push(`nonce="${csp.nonce}"`);
+		}
+
+		body += `\n\t\t<script ${attributes.join(' ')}>${init_app}</script>`;
+	}
+
+	if (resolve_opts.ssr && page_config.hydrate) {
+		/** @type {string[]} */
+		const serialized_data = [];
+
+		for (const { url, body, response } of fetched) {
+			serialized_data.push(
+				render_json_payload_script(
+					{ type: 'data', url, body: typeof body === 'string' ? hash(body) : undefined },
+					response
+				)
+			);
+		}
+
+		if (branch.some((node) => node.server_data)) {
+			serialized_data.push(
+				render_json_payload_script(
+					{ type: 'server_data' },
+					branch.map(({ server_data }) => server_data)
+				)
+			);
+		}
+
+		if (validation_errors) {
+			serialized_data.push(
+				render_json_payload_script({ type: 'validation_errors' }, validation_errors)
+			);
+		}
+
+		body += `\n\t${serialized_data.join('\n\t')}`;
+	}
+
+	if (options.service_worker) {
+		// always include service worker unless it's turned off explicitly
+		csp.add_script(init_service_worker);
+
+		head += `
+			<script${csp.script_needs_nonce ? ` nonce="${csp.nonce}"` : ''}>${init_service_worker}</script>`;
+	}
+
+	if (state.prerendering) {
+		// TODO read headers set with setHeaders and convert into http-equiv where possible
+		const http_equiv = [];
+
+		const csp_headers = csp.csp_provider.get_meta();
+		if (csp_headers) {
+			http_equiv.push(csp_headers);
+		}
+
+		if (state.prerendering.cache) {
+			http_equiv.push(`<meta http-equiv="cache-control" content="${state.prerendering.cache}">`);
+		}
+
+		if (http_equiv.length > 0) {
+			head = http_equiv.join('\n') + head;
+		}
+	}
+
+	// TODO flush chunks as early as we can
+	const html =
+		(await resolve_opts.transformPageChunk({
+			html: options.template({ head, body, assets, nonce: /** @type {string} */ (csp.nonce) }),
+			done: true
+		})) || '';
+
+	const headers = new Headers({
+		'content-type': 'text/html',
+		etag: `"${hash(html)}"`
+	});
+
+	if (!state.prerendering) {
+		const csp_header = csp.csp_provider.get_header();
+		if (csp_header) {
+			headers.set('content-security-policy', csp_header);
+		}
+		const report_only_header = csp.report_only_provider.get_header();
+		if (report_only_header) {
+			headers.set('content-security-policy-report-only', report_only_header);
+		}
+
+		for (const new_cookie of cookies) {
+			const { name, value, ...options } = new_cookie;
+			// @ts-expect-error
+			headers.append('set-cookie', cookie.serialize(name, value, options));
+		}
+
+		if (link_header_preloads.size) {
+			headers.set('link', Array.from(link_header_preloads).join(', '));
+		}
+	}
+
+	if (error && options.dev && !(error instanceof HttpError)) {
+		// reset stack, otherwise it may be 'fixed' a second time
+		error.stack = stack;
+	}
+
+	return new Response(html, {
+		status,
+		headers
+	});
+}

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

@@ -0,0 +1,95 @@
+import { render_response } from './render.js';
+import { load_data, load_server_data } from './load_data.js';
+import { coalesce_to_error } from '../../../utils/error.js';
+import { GENERIC_ERROR } from '../utils.js';
+import { create_fetch } from './fetch.js';
+
+/**
+ * @typedef {import('./types.js').Loaded} Loaded
+ * @typedef {import('types').SSROptions} SSROptions
+ * @typedef {import('types').SSRState} SSRState
+ */
+
+/**
+ * @param {{
+ *   event: import('types').RequestEvent;
+ *   options: SSROptions;
+ *   state: SSRState;
+ *   status: number;
+ *   error: Error;
+ *   resolve_opts: import('types').RequiredResolveOptions;
+ * }} opts
+ */
+export async function respond_with_error({ event, options, state, status, error, resolve_opts }) {
+	const { fetcher, fetched, cookies } = create_fetch({
+		event,
+		options,
+		state,
+		route: GENERIC_ERROR
+	});
+
+	try {
+		const branch = [];
+
+		if (resolve_opts.ssr) {
+			const default_layout = await options.manifest._.nodes[0](); // 0 is always the root layout
+
+			const server_data_promise = load_server_data({
+				dev: options.dev,
+				event,
+				state,
+				node: default_layout,
+				parent: async () => ({})
+			});
+
+			const server_data = await server_data_promise;
+
+			const data = await load_data({
+				event,
+				fetcher,
+				node: default_layout,
+				parent: async () => ({}),
+				server_data_promise,
+				state
+			});
+
+			branch.push(
+				{
+					node: default_layout,
+					server_data,
+					data
+				},
+				{
+					node: await options.manifest._.nodes[1](), // 1 is always the root error
+					data: null,
+					server_data: null
+				}
+			);
+		}
+
+		return await render_response({
+			options,
+			state,
+			page_config: {
+				hydrate: options.hydrate,
+				router: options.router
+			},
+			status,
+			error,
+			branch,
+			fetched,
+			cookies,
+			event,
+			resolve_opts,
+			validation_errors: undefined
+		});
+	} catch (err) {
+		const error = coalesce_to_error(err);
+
+		options.handle_error(error, event);
+
+		return new Response(error.stack, {
+			status: 500
+		});
+	}
+}

package/src/runtime/server/page/types.d.ts

@@ -0,0 +1,44 @@
+import { ResponseHeaders, SSRNode, CspDirectives } from 'types';
+import { HttpError } from '../../../index/private';
+
+export interface Fetched {
+	url: string;
+	body?: string | null;
+	response: {
+		status: number;
+		statusText: string;
+		headers: ResponseHeaders;
+		body: string;
+	};
+}
+
+export interface FetchState {
+	fetched: Fetched[];
+	cookies: string[];
+	new_cookies: string[];
+}
+
+export type Loaded = {
+	node: SSRNode;
+	data: Record<string, any> | null;
+	server_data: any;
+};
+
+type CspMode = 'hash' | 'nonce' | 'auto';
+
+export interface CspConfig {
+	mode: CspMode;
+	directives: CspDirectives;
+	reportOnly: CspDirectives;
+}
+
+export interface CspOpts {
+	dev: boolean;
+	prerender: boolean;
+}
+
+export interface SerializedHttpError extends Pick<HttpError, 'message' | 'status'> {
+	name: 'HttpError';
+	stack: '';
+	__is_http_error: true;
+}