@sveltejs/kit 1.7.2 → 1.8.0

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

@@ -1,5 +1,6 @@
 import { disable_search, make_trackable } from '../../../utils/url.js';
 import { unwrap_promises } from '../../../utils/promises.js';
+import { DEV } from 'esm-env';
 
 /**
  * Calls the user's server `load` function.
@@ -14,6 +15,8 @@ import { unwrap_promises } from '../../../utils/promises.js';
 export async function load_server_data({ event, state, node, parent }) {
 	if (!node?.server) return null;
 
+	let done = false;
+
 	const uses = {
 		dependencies: new Set(),
 		params: new Set(),
@@ -23,6 +26,12 @@ export async function load_server_data({ event, state, node, parent }) {
 	};
 
 	const url = make_trackable(event.url, () => {
+		if (DEV && done && !uses.url) {
+			console.warn(
+				`${node.server_id}: Accessing URL properties in a promise handler after \`load(...)\` has returned will not cause the function to re-run when the URL changes`
+			);
+		}
+
 		uses.url = true;
 	});
 
@@ -34,6 +43,13 @@ export async function load_server_data({ event, state, node, parent }) {
 		...event,
 		fetch: (info, init) => {
 			const url = new URL(info instanceof Request ? info.url : info, event.url);
+
+			if (DEV && done && !uses.dependencies.has(url.href)) {
+				console.warn(
+					`${node.server_id}: Calling \`event.fetch(...)\` in a promise handler after \`load(...)\` has returned will not cause the function to re-run when the dependency is invalidated`
+				);
+			}
+
 			uses.dependencies.add(url.href);
 
 			return event.fetch(info, init);
@@ -42,25 +58,54 @@ export async function load_server_data({ event, state, node, parent }) {
 		depends: (...deps) => {
 			for (const dep of deps) {
 				const { href } = new URL(dep, event.url);
+
+				if (DEV && done && !uses.dependencies.has(href)) {
+					console.warn(
+						`${node.server_id}: Calling \`depends(...)\` in a promise handler after \`load(...)\` has returned will not cause the function to re-run when the dependency is invalidated`
+					);
+				}
+
 				uses.dependencies.add(href);
 			}
 		},
 		params: new Proxy(event.params, {
 			get: (target, key) => {
+				if (DEV && done && typeof key === 'string' && !uses.params.has(key)) {
+					console.warn(
+						`${node.server_id}: Accessing \`params.${String(
+							key
+						)}\` in a promise handler after \`load(...)\` has returned will not cause the function to re-run when the param changes`
+					);
+				}
+
 				uses.params.add(key);
 				return target[/** @type {string} */ (key)];
 			}
 		}),
 		parent: async () => {
+			if (DEV && done && !uses.parent) {
+				console.warn(
+					`${node.server_id}: Calling \`parent(...)\` in a promise handler after \`load(...)\` has returned will not cause the function to re-run when parent data changes`
+				);
+			}
+
 			uses.parent = true;
 			return parent();
 		},
-		route: {
-			get id() {
+		route: new Proxy(event.route, {
+			get: (target, key) => {
+				if (DEV && done && typeof key === 'string' && !uses.route) {
+					console.warn(
+						`${node.server_id}: Accessing \`route.${String(
+							key
+						)}\` in a promise handler after \`load(...)\` has returned will not cause the function to re-run when the route changes`
+					);
+				}
+
 				uses.route = true;
-				return event.route.id;
+				return target[/** @type {'id'} */ (key)];
 			}
-		},
+		}),
 		url
 	});
 
@@ -69,6 +114,8 @@ export async function load_server_data({ event, state, node, parent }) {
 		validate_load_response(data, /** @type {string} */ (event.route.id));
 	}
 
+	done = true;
+
 	return {
 		type: 'data',
 		data,
@@ -89,7 +136,7 @@ export async function load_server_data({ event, state, node, parent }) {
  *   state: import('types').SSRState;
  *   csr: boolean;
  * }} opts
- * @returns {Promise<Record<string, any> | null>}
+ * @returns {Promise<Record<string, any | Promise<any>> | null>}
  */
 export async function load_data({
 	event,
@@ -119,7 +166,10 @@ export async function load_data({
 	});
 
 	const data = result ? await unwrap_promises(result) : null;
-	validate_load_response(data, /** @type {string} */ (event.route.id));
+	if (__SVELTEKIT_DEV__) {
+		validate_load_response(data, /** @type {string} */ (event.route.id));
+	}
+
 	return data;
 }
 

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

@@ -7,9 +7,10 @@ import { serialize_data } from './serialize_data.js';
 import { s } from '../../../utils/misc.js';
 import { Csp } from './csp.js';
 import { uneval_action_response } from './actions.js';
-import { clarify_devalue_error } from '../utils.js';
-import { version, public_env } from '../../shared.js';
+import { clarify_devalue_error, stringify_uses, handle_error_and_jsonify } from '../utils.js';
+import { public_env } from '../../shared-server.js';
 import { text } from '../../../exports/index.js';
+import { create_async_iterator } from '../../../utils/streaming.js';
 
 // TODO rename this function/module
 
@@ -57,11 +58,11 @@ export async function render_response({
 		}
 	}
 
-	const { entry } = manifest._;
+	const { client } = manifest._;
 
-	const stylesheets = new Set(entry.stylesheets);
-	const modulepreloads = new Set(entry.imports);
-	const fonts = new Set(manifest._.entry.fonts);
+	const modulepreloads = new Set([...client.start.imports, ...client.app.imports]);
+	const stylesheets = new Set(client.app.stylesheets);
+	const fonts = new Set(client.app.fonts);
 
 	/** @type {Set<string>} */
 	const link_header_preloads = new Set();
@@ -141,17 +142,9 @@ export async function render_response({
 		}
 
 		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.fonts) {
-				node.fonts.forEach((url) => fonts.add(url));
-			}
+			for (const url of node.imports) modulepreloads.add(url);
+			for (const url of node.stylesheets) stylesheets.add(url);
+			for (const url of node.fonts) fonts.add(url);
 
 			if (node.inline_styles) {
 				Object.entries(await node.inline_styles()).forEach(([k, v]) => inline_styles.set(k, v));
@@ -161,34 +154,42 @@ export async function render_response({
 		rendered = { head: '', html: '', css: { code: '', map: null } };
 	}
 
-	let head = '';
-	let body = rendered.html;
-
-	const csp = new Csp(options.csp, {
-		prerender: !!state.prerendering
-	});
-
-	const target = hash(body);
-
 	/**
 	 * The prefix to use for static assets. Replaces `%sveltekit.assets%` in the template
 	 * @type {string}
 	 */
 	let resolved_assets;
 
+	/**
+	 * An expression that will evaluate in the client to determine the resolved asset path
+	 */
+	let asset_expression;
+
 	if (assets) {
 		// if an asset path is specified, use it
 		resolved_assets = assets;
+		asset_expression = s(assets);
 	} else if (state.prerendering?.fallback) {
 		// if we're creating a fallback page, asset paths need to be root-relative
 		resolved_assets = base;
+		asset_expression = s(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(base.length).split('/').slice(2);
 		resolved_assets = segments.length > 0 ? segments.map(() => '..').join('/') : '.';
+		asset_expression = `new URL(${s(
+			resolved_assets
+		)}, location.href).pathname.replace(/^\\\/$/, '')`;
 	}
 
+	let head = '';
+	let body = rendered.html;
+
+	const csp = new Csp(options.csp, {
+		prerender: !!state.prerendering
+	});
+
 	/** @param {string} path */
 	const prefixed = (path) => {
 		if (path.startsWith('/')) {
@@ -200,48 +201,6 @@ export async function render_response({
 		return `${resolved_assets}/${path}`;
 	};
 
-	const serialized = { data: '', form: 'null', error: 'null' };
-
-	try {
-		serialized.data = `[${branch
-			.map(({ server_data }) => {
-				if (server_data?.type === 'data') {
-					const data = devalue.uneval(server_data.data);
-
-					const uses = [];
-					if (server_data.uses.dependencies.size > 0) {
-						uses.push(`dependencies:${s(Array.from(server_data.uses.dependencies))}`);
-					}
-
-					if (server_data.uses.params.size > 0) {
-						uses.push(`params:${s(Array.from(server_data.uses.params))}`);
-					}
-
-					if (server_data.uses.parent) uses.push(`parent:1`);
-					if (server_data.uses.route) uses.push(`route:1`);
-					if (server_data.uses.url) uses.push(`url:1`);
-
-					return `{type:"data",data:${data},uses:{${uses.join(',')}}${
-						server_data.slash ? `,slash:${s(server_data.slash)}` : ''
-					}}`;
-				}
-
-				return s(server_data);
-			})
-			.join(',')}]`;
-	} catch (e) {
-		const error = /** @type {any} */ (e);
-		throw new Error(clarify_devalue_error(event, error));
-	}
-
-	if (form_value) {
-		serialized.form = uneval_action_response(form_value, /** @type {string} */ (event.route.id));
-	}
-
-	if (error) {
-		serialized.error = devalue.uneval(error);
-	}
-
 	if (inline_styles.size > 0) {
 		const content = Array.from(inline_styles.values()).join('\n');
 
@@ -289,18 +248,86 @@ export async function render_response({
 		}
 	}
 
+	const global = `__sveltekit_${options.version_hash}`;
+
+	const { data, chunks } = get_data(
+		event,
+		options,
+		branch.map((b) => b.server_data),
+		global
+	);
+
+	if (page_config.ssr && page_config.csr) {
+		body += `\n\t\t\t${fetched
+			.map((item) =>
+				serialize_data(item, resolve_opts.filterSerializedResponseHeaders, !!state.prerendering)
+			)
+			.join('\n\t\t\t')}`;
+	}
+
 	if (page_config.csr) {
-		const opts = [
-			`assets: ${s(assets)}`,
+		const included_modulepreloads = Array.from(modulepreloads, (dep) => prefixed(dep)).filter(
+			(path) => resolve_opts.preload({ type: 'js', path })
+		);
+
+		for (const path of included_modulepreloads) {
+			// we use modulepreload with the Link header for Chrome, along with
+			// <link rel="preload"> for Safari. This results in the fastest loading in
+			// the most used browsers, with no double-loading. Note that we need to use
+			// .mjs extensions for `preload` to behave like `modulepreload` in Chrome
+			link_header_preloads.add(`<${encodeURI(path)}>; rel="modulepreload"; nopush`);
+			head += `\n\t\t<link rel="preload" as="script" crossorigin="anonymous" href="${path}">`;
+		}
+
+		const blocks = [];
+
+		const properties = [
 			`env: ${s(public_env)}`,
-			`target: document.querySelector('[data-sveltekit-hydrate="${target}"]').parentNode`,
-			`version: ${s(version)}`
+			`assets: ${asset_expression}`,
+			`element: document.currentScript.parentElement`
 		];
 
+		if (chunks) {
+			blocks.push(`const deferred = new Map();`);
+
+			properties.push(`defer: (id) => new Promise((fulfil, reject) => {
+							deferred.set(id, { fulfil, reject });
+						})`);
+
+			properties.push(`resolve: ({ id, data, error }) => {
+							const { fulfil, reject } = deferred.get(id);
+							deferred.delete(id);
+
+							if (error) reject(error);
+							else fulfil(data);
+						}`);
+		}
+
+		blocks.push(`${global} = {
+						${properties.join(',\n\t\t\t\t\t\t')}
+					};`);
+
+		const args = [`app`, `${global}.element`];
+
 		if (page_config.ssr) {
+			const serialized = { form: 'null', error: 'null' };
+
+			blocks.push(`const data = ${data};`);
+
+			if (form_value) {
+				serialized.form = uneval_action_response(
+					form_value,
+					/** @type {string} */ (event.route.id)
+				);
+			}
+
+			if (error) {
+				serialized.error = devalue.uneval(error);
+			}
+
 			const hydrate = [
 				`node_ids: [${branch.map(({ node }) => node.index).join(', ')}]`,
-				`data: ${serialized.data}`,
+				`data`,
 				`form: ${serialized.form}`,
 				`error: ${serialized.error}`
 			];
@@ -313,67 +340,44 @@ export async function render_response({
 				hydrate.push(`params: ${devalue.uneval(event.params)}`, `route: ${s(event.route)}`);
 			}
 
-			opts.push(`hydrate: {\n\t\t\t\t\t${hydrate.join(',\n\t\t\t\t\t')}\n\t\t\t\t}`);
+			args.push(`{\n\t\t\t\t\t\t\t${hydrate.join(',\n\t\t\t\t\t\t\t')}\n\t\t\t\t\t\t}`);
 		}
 
-		// prettier-ignore
-		const init_app = `
-			import { start } from ${s(prefixed(entry.file))};
-
-			start({
-				${opts.join(',\n\t\t\t\t')}
-			});
-		`;
-
-		for (const dep of modulepreloads) {
-			const path = prefixed(dep);
-
-			if (resolve_opts.preload({ type: 'js', path })) {
-				link_header_preloads.add(`<${encodeURI(path)}>; rel="modulepreload"; nopush`);
-				if (state.prerendering) {
-					head += `\n\t\t<link rel="modulepreload" href="${path}">`;
-				}
-			}
+		blocks.push(`Promise.all([
+						import(${s(prefixed(client.start.file))}),
+						import(${s(prefixed(client.app.file))})
+					]).then(([kit, app]) => {
+						kit.start(${args.join(', ')});
+					});`);
+
+		if (options.service_worker) {
+			const opts = __SVELTEKIT_DEV__ ? `, { type: 'module' }` : '';
+
+			// we use an anonymous function instead of an arrow function to support
+			// older browsers (https://github.com/sveltejs/kit/pull/5417)
+			blocks.push(`if ('serviceWorker' in navigator) {
+						addEventListener('load', function () {
+							navigator.serviceWorker.register('${prefixed('service-worker.js')}'${opts});
+						});
+					}`);
 		}
 
-		const attributes = ['type="module"', `data-sveltekit-hydrate="${target}"`];
-
+		const init_app = `
+				{
+					${blocks.join('\n\n\t\t\t\t\t')}
+				}
+			`;
 		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>`;
+		body += `\n\t\t\t<script${
+			csp.script_needs_nonce ? ` nonce="${csp.nonce}"` : ''
+		}>${init_app}</script>\n\t\t`;
 	}
 
-	if (page_config.ssr && page_config.csr) {
-		body += `\n\t${fetched
-			.map((item) =>
-				serialize_data(item, resolve_opts.filterSerializedResponseHeaders, !!state.prerendering)
-			)
-			.join('\n\t')}`;
-	}
-
-	if (options.service_worker) {
-		const opts = __SVELTEKIT_DEV__ ? `, { type: 'module' }` : '';
-
-		// 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('${prefixed('service-worker.js')}'${opts});
-				});
-			}
-		`;
-
-		// 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>`;
-	}
+	const headers = new Headers({
+		'x-sveltekit-page': 'true',
+		'content-type': 'text/html'
+	});
 
 	if (state.prerendering) {
 		// TODO read headers set with setHeaders and convert into http-equiv where possible
@@ -391,6 +395,19 @@ export async function render_response({
 		if (http_equiv.length > 0) {
 			head = http_equiv.join('\n') + head;
 		}
+	} else {
+		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);
+		}
+
+		if (link_header_preloads.size) {
+			headers.set('link', Array.from(link_header_preloads).join(', '));
+		}
 	}
 
 	// add the content after the script/css links so the link elements are parsed first
@@ -411,39 +428,122 @@ export async function render_response({
 			done: true
 		})) || '';
 
-	if (DEV && page_config.csr) {
-		if (transformed.split('<!--').length < html.split('<!--').length) {
-			// the \u001B stuff is ANSI codes, so that we don't need to add a library to the runtime
-			// https://svelte.dev/repl/1b3f49696f0c44c881c34587f2537aa2
-			console.warn(
-				"\u001B[1m\u001B[31mRemoving comments in transformPageChunk can break Svelte's hydration\u001B[39m\u001B[22m"
-			);
+	if (!chunks) {
+		headers.set('etag', `"${hash(transformed)}"`);
+	}
+
+	if (DEV) {
+		if (page_config.csr) {
+			if (transformed.split('<!--').length < html.split('<!--').length) {
+				// the \u001B stuff is ANSI codes, so that we don't need to add a library to the runtime
+				// https://svelte.dev/repl/1b3f49696f0c44c881c34587f2537aa2
+				console.warn(
+					"\u001B[1m\u001B[31mRemoving comments in transformPageChunk can break Svelte's hydration\u001B[39m\u001B[22m"
+				);
+			}
+		} else {
+			if (chunks) {
+				console.warn(
+					'\u001B[1m\u001B[31mReturning promises from server `load` functions will only work if `csr === true`\u001B[39m\u001B[22m'
+				);
+			}
 		}
 	}
 
-	const headers = new Headers({
-		'x-sveltekit-page': 'true',
-		'content-type': 'text/html',
-		etag: `"${hash(transformed)}"`
-	});
+	return !chunks
+		? text(transformed, {
+				status,
+				headers
+		  })
+		: new Response(
+				new ReadableStream({
+					async start(controller) {
+						controller.enqueue(transformed);
+						for await (const chunk of chunks) {
+							controller.enqueue(chunk);
+						}
+						controller.close();
+					}
+				}),
+				{
+					headers: {
+						'content-type': 'text/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);
-		}
+/**
+ * If the serialized data contains promises, `chunks` will be an
+ * async iterable containing their resolutions
+ * @param {import('types').RequestEvent} event
+ * @param {import('types').SSROptions} options
+ * @param {Array<import('types').ServerDataNode | null>} nodes
+ * @param {string} global
+ * @returns {{ data: string, chunks: AsyncIterable<string> | null }}
+ */
+function get_data(event, options, nodes, global) {
+	let promise_id = 1;
+	let count = 0;
+
+	const { iterator, push, done } = create_async_iterator();
+
+	/** @param {any} thing */
+	function replacer(thing) {
+		if (typeof thing?.then === 'function') {
+			const id = promise_id++;
+			count += 1;
+
+			thing
+				.then(/** @param {any} data */ (data) => ({ data }))
+				.catch(
+					/** @param {any} error */ async (error) => ({
+						error: await handle_error_and_jsonify(event, options, error)
+					})
+				)
+				.then(
+					/**
+					 * @param {{data: any; error: any}} result
+					 */
+					async ({ data, error }) => {
+						count -= 1;
+
+						let str;
+						try {
+							str = devalue.uneval({ id, data, error }, replacer);
+						} catch (e) {
+							error = await handle_error_and_jsonify(
+								event,
+								options,
+								new Error(`Failed to serialize promise while rendering ${event.route.id}`)
+							);
+							data = undefined;
+							str = devalue.uneval({ id, data, error }, replacer);
+						}
+
+						push(`\n<script>${global}.resolve(${str})</script>`);
+						if (count === 0) done();
+					}
+				);
 
-		if (link_header_preloads.size) {
-			headers.set('link', Array.from(link_header_preloads).join(', '));
+			return `${global}.defer(${id})`;
 		}
 	}
 
-	return text(transformed, {
-		status,
-		headers
-	});
+	try {
+		const strings = nodes.map((node) => {
+			if (!node) return 'null';
+
+			return `{"type":"data","data":${devalue.uneval(node.data, replacer)},${stringify_uses(node)}${
+				node.slash ? `,"slash":${JSON.stringify(node.slash)}` : ''
+			}}`;
+		});
+
+		return {
+			data: `[${strings.join(',')}]`,
+			chunks: count > 0 ? iterator : null
+		};
+	} catch (e) {
+		throw new Error(clarify_devalue_error(event, /** @type {any} */ (e)));
+	}
 }

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

@@ -1,5 +1,5 @@
 import { CookieSerializeOptions } from 'cookie';
-import { SSRNode, CspDirectives } from 'types';
+import { SSRNode, CspDirectives, ServerDataNode } from 'types';
 
 export interface Fetched {
 	url: string;
@@ -13,7 +13,7 @@ export interface Fetched {
 export type Loaded = {
 	node: SSRNode;
 	data: Record<string, any> | null;
-	server_data: any;
+	server_data: ServerDataNode | null;
 };
 
 type CspMode = 'hash' | 'nonce' | 'auto';