@sveltejs/kit 1.0.0-next.45 → 1.0.0-next.452

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

@@ -0,0 +1,379 @@
+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 '../../control.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}`);
+
+	const serialized = { data: '', errors: 'null' };
+
+	try {
+		serialized.data = devalue(branch.map(({ server_data }) => server_data));
+	} catch (e) {
+		// If we're here, the data could not be serialized with devalue
+		// TODO if we wanted to get super fancy we could track down the origin of the `load`
+		// function, but it would mean passing more stuff around than we currently do
+		const error = /** @type {any} */ (e);
+		const match = /\[(\d+)\]\.data\.(.+)/.exec(error.path);
+		if (match) throw new Error(`${error.message} (data.${match[2]})`);
+		throw error;
+	}
+
+	if (validation_errors) {
+		try {
+			serialized.errors = devalue(validation_errors);
+		} catch (e) {
+			// If we're here, the data could not be serialized with devalue
+			const error = /** @type {any} */ (e);
+			if (error.path) throw new Error(`${error.message} (errors.${error.path})`);
+			throw error;
+		}
+	}
+
+	// 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)},
+				data: ${serialized.data},
+				errors: ${serialized.errors}
+			}` : '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 (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,94 @@
+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({
+				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 '../../control.js';
+
+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;
+}

package/src/runtime/server/utils.js

@@ -0,0 +1,137 @@
+import { devalue } from 'devalue';
+import { HttpError } from '../control.js';
+
+/** @param {any} body */
+export function is_pojo(body) {
+	if (typeof body !== 'object') return false;
+
+	if (body) {
+		if (body instanceof Uint8Array) return false;
+		if (body instanceof ReadableStream) return false;
+
+		// if body is a node Readable, throw an error
+		// TODO remove this for 1.0
+		if (body._readableState && typeof body.pipe === 'function') {
+			throw new Error('Node streams are no longer supported — use a ReadableStream instead');
+		}
+	}
+
+	return true;
+}
+
+/**
+ * Serialize an error into a JSON string through `error_to_pojo`.
+ * This is necessary because `JSON.stringify(error) === '{}'`
+ *
+ * @param {Error | HttpError} error
+ * @param {(error: Error) => string | undefined} get_stack
+ */
+export function serialize_error(error, get_stack) {
+	return JSON.stringify(error_to_pojo(error, get_stack));
+}
+
+/**
+ * Transform an error into a POJO, by copying its `name`, `message`
+ * and (in dev) `stack`, plus any custom properties, plus recursively
+ * serialized `cause` properties.
+ * Our own HttpError gets a meta property attached so we can identify it on the client.
+ *
+ * @param {HttpError | Error } error
+ * @param {(error: Error) => string | undefined} get_stack
+ */
+export function error_to_pojo(error, get_stack) {
+	if (error instanceof HttpError) {
+		return /** @type {import('./page/types').SerializedHttpError} */ ({
+			message: error.message,
+			status: error.status,
+			__is_http_error: true // TODO we should probably make this unnecessary
+		});
+	}
+
+	const {
+		name,
+		message,
+		stack,
+		// @ts-expect-error i guess typescript doesn't know about error.cause yet
+		cause,
+		...custom
+	} = error;
+
+	/** @type {Record<string, any>} */
+	const object = { name, message, stack: get_stack(error) };
+
+	if (cause) object.cause = error_to_pojo(cause, get_stack);
+
+	for (const key in custom) {
+		// @ts-expect-error
+		object[key] = custom[key];
+	}
+
+	return object;
+}
+
+// TODO: Remove for 1.0
+/** @param {Record<string, any>} mod */
+export function check_method_names(mod) {
+	['get', 'post', 'put', 'patch', 'del'].forEach((m) => {
+		if (m in mod) {
+			const replacement = m === 'del' ? 'DELETE' : m.toUpperCase();
+			throw Error(
+				`Endpoint method "${m}" has changed to "${replacement}". See https://github.com/sveltejs/kit/discussions/5359 for more information.`
+			);
+		}
+	});
+}
+
+/** @type {import('types').SSRErrorPage} */
+export const GENERIC_ERROR = {
+	id: '__error'
+};
+
+/**
+ * @param {Partial<Record<import('types').HttpMethod, any>>} mod
+ * @param {import('types').HttpMethod} method
+ */
+export function method_not_allowed(mod, method) {
+	return new Response(`${method} method not allowed`, {
+		status: 405,
+		headers: {
+			// https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/405
+			// "The server must generate an Allow header field in a 405 status code response"
+			allow: allowed_methods(mod).join(', ')
+		}
+	});
+}
+
+/** @param {Partial<Record<import('types').HttpMethod, any>>} mod */
+export function allowed_methods(mod) {
+	const allowed = [];
+
+	for (const method in ['GET', 'POST', 'PUT', 'PATCH', 'DELETE']) {
+		if (method in mod) allowed.push(method);
+	}
+
+	if (mod.GET || mod.HEAD) allowed.push('HEAD');
+
+	return allowed;
+}
+
+/** @param {any} data */
+export function data_response(data) {
+	try {
+		return new Response(`window.__sveltekit_data = ${devalue(data)}`, {
+			headers: {
+				'content-type': 'application/javascript'
+			}
+		});
+	} catch (e) {
+		const error = /** @type {any} */ (e);
+		const match = /\[(\d+)\]\.data\.(.+)/.exec(error.path);
+		const message = match ? `${error.message} (data.${match[2]})` : error.message;
+		return new Response(`throw new Error(${JSON.stringify(message)})`, {
+			headers: {
+				'content-type': 'application/javascript'
+			}
+		});
+	}
+}

package/src/utils/array.js

@@ -0,0 +1,9 @@
+/**
+ * Removes nullish values from an array.
+ *
+ * @template T
+ * @param {Array<T>} arr
+ */
+export function compact(arr) {
+	return arr.filter(/** @returns {val is NonNullable<T>} */ (val) => val != null);
+}

package/src/utils/error.js

@@ -0,0 +1,22 @@
+import { HttpError, Redirect } from '../runtime/control.js';
+
+/**
+ * @param {unknown} err
+ * @return {Error}
+ */
+export function coalesce_to_error(err) {
+	return err instanceof Error ||
+		(err && /** @type {any} */ (err).name && /** @type {any} */ (err).message)
+		? /** @type {Error} */ (err)
+		: new Error(JSON.stringify(err));
+}
+
+/**
+ * This is an identity function that exists to make TypeScript less
+ * paranoid about people throwing things that aren't errors, which
+ * frankly is not something we should care about
+ * @param {unknown} error
+ */
+export function normalize_error(error) {
+	return /** @type {Redirect | HttpError | Error} */ (error);
+}