@sveltejs/kit 1.7.1 → 1.8.0

package/src/runtime/client/client.js

@@ -25,8 +25,6 @@ import {
 } from './fetcher.js';
 import { parse } from './parse.js';
 
-import Root from '__GENERATED__/root.svelte';
-import { nodes, server_loads, dictionary, matchers, hooks } from '__CLIENT__/manifest.js';
 import { base } from '__sveltekit/paths';
 import { HttpError, Redirect } from '../control.js';
 import { stores } from './singletons.js';
@@ -36,16 +34,6 @@ import { INDEX_KEY, PRELOAD_PRIORITIES, SCROLL_KEY, SNAPSHOT_KEY } from './const
 import { validate_common_exports } from '../../utils/exports.js';
 import { compact } from '../../utils/array.js';
 
-const routes = parse(nodes, server_loads, dictionary, matchers);
-
-const default_layout_loader = nodes[0];
-const default_error_loader = nodes[1];
-
-// we import the root layout/error nodes eagerly, so that
-// connectivity errors after initialisation don't nuke the app
-default_layout_loader();
-default_error_loader();
-
 // We track the scroll position associated with each history entry in sessionStorage,
 // rather than on history.state itself, because when navigation is driven by
 // popstate it's too late to update the scroll position associated with the
@@ -64,12 +52,21 @@ function update_scroll_positions(index) {
 }
 
 /**
- * @param {{
- *   target: HTMLElement;
- * }} opts
+ * @param {import('./types').SvelteKitApp} app
+ * @param {HTMLElement} target
  * @returns {import('./types').Client}
  */
-export function create_client({ target }) {
+export function create_client(app, target) {
+	const routes = parse(app);
+
+	const default_layout_loader = app.nodes[0];
+	const default_error_loader = app.nodes[1];
+
+	// we import the root layout/error nodes eagerly, so that
+	// connectivity errors after initialisation don't nuke the app
+	default_layout_loader();
+	default_error_loader();
+
 	const container = __SVELTEKIT_EMBEDDED__ ? target : document.documentElement;
 	/** @type {Array<((url: URL) => boolean)>} */
 	const invalidated = [];
@@ -432,7 +429,7 @@ export function create_client({ target }) {
 
 		page = /** @type {import('types').Page} */ (result.props.page);
 
-		root = new Root({
+		root = new app.root({
 			target,
 			props: { ...result.props, stores, components },
 			hydrate: true
@@ -736,22 +733,8 @@ export function create_client({ target }) {
 	 * @returns {import('./types').DataNode | null}
 	 */
 	function create_data_node(node, previous) {
-		if (node?.type === 'data') {
-			return {
-				type: 'data',
-				data: node.data,
-				uses: {
-					dependencies: new Set(node.uses.dependencies ?? []),
-					params: new Set(node.uses.params ?? []),
-					parent: !!node.uses.parent,
-					route: !!node.uses.route,
-					url: !!node.uses.url
-				},
-				slash: node.slash
-			};
-		} else if (node?.type === 'skip') {
-			return previous ?? null;
-		}
+		if (node?.type === 'data') return node;
+		if (node?.type === 'skip') return previous ?? null;
 		return null;
 	}
 
@@ -774,7 +757,7 @@ export function create_client({ target }) {
 		errors.forEach((loader) => loader?.().catch(() => {}));
 		loaders.forEach((loader) => loader?.[1]().catch(() => {}));
 
-		/** @type {import('types').ServerData | null} */
+		/** @type {import('types').ServerNodesResponse | import('types').ServerRedirectNode | null} */
 		let server_data = null;
 
 		const url_changed = current.url ? id !== current.url.pathname + current.url.search : false;
@@ -981,7 +964,7 @@ export function create_client({ target }) {
 		/** @type {import('types').ServerDataNode | null} */
 		let server_data_node = null;
 
-		const default_layout_has_server_load = server_loads[0] === 0;
+		const default_layout_has_server_load = app.server_loads[0] === 0;
 
 		if (default_layout_has_server_load) {
 			// TODO post-https://github.com/sveltejs/kit/discussions/6124 we can use
@@ -1311,6 +1294,21 @@ export function create_client({ target }) {
 		after_navigate();
 	}
 
+	/**
+	 * @param {unknown} error
+	 * @param {import('types').NavigationEvent} event
+	 * @returns {import('types').MaybePromise<App.Error>}
+	 */
+	function handle_error(error, event) {
+		if (error instanceof HttpError) {
+			return error.body;
+		}
+		return (
+			app.hooks.handleError({ error, event }) ??
+			/** @type {any} */ ({ message: event.route.id != null ? 'Internal Error' : 'Not Found' })
+		);
+	}
+
 	return {
 		after_navigate: (fn) => {
 			onMount(() => {
@@ -1710,9 +1708,13 @@ export function create_client({ target }) {
 			try {
 				const branch_promises = node_ids.map(async (n, i) => {
 					const server_data_node = server_data_nodes[i];
+					// Type isn't completely accurate, we still need to deserialize uses
+					if (server_data_node?.uses) {
+						server_data_node.uses = deserialize_uses(server_data_node.uses);
+					}
 
 					return load_node({
-						loader: nodes[n],
+						loader: app.nodes[n],
 						url,
 						params,
 						route,
@@ -1760,7 +1762,7 @@ export function create_client({ target }) {
 /**
  * @param {URL} url
  * @param {boolean[]} invalid
- * @returns {Promise<import('types').ServerData>}
+ * @returns {Promise<import('types').ServerNodesResponse |import('types').ServerRedirectNode>}
  */
 async function load_data(url, invalid) {
 	const data_url = new URL(url);
@@ -1774,44 +1776,98 @@ async function load_data(url, invalid) {
 	);
 
 	const res = await native_fetch(data_url.href);
-	const data = await res.json();
 
 	if (!res.ok) {
 		// error message is a JSON-stringified string which devalue can't handle at the top level
 		// turn it into a HttpError to not call handleError on the client again (was already handled on the server)
-		throw new HttpError(res.status, data);
+		throw new HttpError(res.status, await res.json());
 	}
 
-	// revive devalue-flattened data
-	data.nodes?.forEach((/** @type {any} */ node) => {
-		if (node?.type === 'data') {
-			node.data = devalue.unflatten(node.data);
-			node.uses = {
-				dependencies: new Set(node.uses.dependencies ?? []),
-				params: new Set(node.uses.params ?? []),
-				parent: !!node.uses.parent,
-				route: !!node.uses.route,
-				url: !!node.uses.url
-			};
+	return new Promise(async (resolve) => {
+		/**
+		 * Map of deferred promises that will be resolved by a subsequent chunk of data
+		 * @type {Map<string, import('types').Deferred>}
+		 */
+		const deferreds = new Map();
+		const reader = /** @type {ReadableStream<Uint8Array>} */ (res.body).getReader();
+		const decoder = new TextDecoder();
+
+		/**
+		 * @param {any} data
+		 */
+		function deserialize(data) {
+			return devalue.unflatten(data, {
+				Promise: (id) => {
+					return new Promise((fulfil, reject) => {
+						deferreds.set(id, { fulfil, reject });
+					});
+				}
+			});
+		}
+
+		let text = '';
+
+		while (true) {
+			// Format follows ndjson (each line is a JSON object) or regular JSON spec
+			const { done, value } = await reader.read();
+			if (done && !text) break;
+
+			text += !value && text ? '\n' : decoder.decode(value); // no value -> final chunk -> add a new line to trigger the last parse
+
+			while (true) {
+				const split = text.indexOf('\n');
+				if (split === -1) {
+					break;
+				}
+
+				const node = JSON.parse(text.slice(0, split));
+				text = text.slice(split + 1);
+
+				if (node.type === 'redirect') {
+					return resolve(node);
+				}
+
+				if (node.type === 'data') {
+					// This is the first (and possibly only, if no pending promises) chunk
+					node.nodes?.forEach((/** @type {any} */ node) => {
+						if (node?.type === 'data') {
+							node.uses = deserialize_uses(node.uses);
+							node.data = deserialize(node.data);
+						}
+					});
+
+					resolve(node);
+				} else if (node.type === 'chunk') {
+					// This is a subsequent chunk containing deferred data
+					const { id, data, error } = node;
+					const deferred = /** @type {import('types').Deferred} */ (deferreds.get(id));
+					deferreds.delete(id);
+
+					if (error) {
+						deferred.reject(deserialize(error));
+					} else {
+						deferred.fulfil(deserialize(data));
+					}
+				}
+			}
 		}
 	});
 
-	return data;
+	// TODO edge case handling necessary? stream() read fails?
 }
 
 /**
- * @param {unknown} error
- * @param {import('types').NavigationEvent} event
- * @returns {import('../../../types/private.js').MaybePromise<App.Error>}
+ * @param {any} uses
+ * @return {import('types').Uses}
  */
-function handle_error(error, event) {
-	if (error instanceof HttpError) {
-		return error.body;
-	}
-	return (
-		hooks.handleError({ error, event }) ??
-		/** @type {any} */ ({ message: event.route.id != null ? 'Internal Error' : 'Not Found' })
-	);
+function deserialize_uses(uses) {
+	return {
+		dependencies: new Set(uses?.dependencies ?? []),
+		params: new Set(uses?.params ?? []),
+		parent: !!uses?.parent,
+		route: !!uses?.route,
+		url: !!uses?.url
+	};
 }
 
 function reset_focus() {

package/src/runtime/client/parse.js

@@ -1,13 +1,10 @@
 import { exec, parse_route_id } from '../../utils/routing.js';
 
 /**
- * @param {import('types').CSRPageNodeLoader[]} nodes
- * @param {number[]} server_loads
- * @param {typeof import('__CLIENT__/manifest.js').dictionary} dictionary
- * @param {Record<string, (param: string) => boolean>} matchers
+ * @param {import('./types').SvelteKitApp} app
  * @returns {import('types').CSRRoute[]}
  */
-export function parse(nodes, server_loads, dictionary, matchers) {
+export function parse({ nodes, server_loads, dictionary, matchers }) {
 	const layouts_with_server_load = new Set(server_loads);
 
 	return Object.entries(dictionary).map(([id, [leaf, layouts, errors]]) => {

package/src/runtime/client/start.js

@@ -1,31 +1,20 @@
 import { DEV } from 'esm-env';
 import { create_client } from './client.js';
 import { init } from './singletons.js';
-import { set_assets, set_version, set_public_env } from '../shared.js';
 
 /**
- * @param {{
- *   assets: string;
- *   env: Record<string, string>;
- *   hydrate: Parameters<import('./types').Client['_hydrate']>[0];
- *   target: HTMLElement;
- *   version: string;
- * }} opts
+ * @param {import('./types').SvelteKitApp} app
+ * @param {HTMLElement} target
+ * @param {Parameters<import('./types').Client['_hydrate']>[0]} [hydrate]
  */
-export async function start({ assets, env, hydrate, target, version }) {
-	set_public_env(env);
-	set_assets(assets);
-	set_version(version);
-
+export async function start(app, target, hydrate) {
 	if (DEV && target === document.body) {
 		console.warn(
 			`Placing %sveltekit.body% directly inside <body> is not recommended, as your app may break for users who have certain browser extensions installed.\n\nConsider wrapping it in an element:\n\n<div style="display: contents">\n  %sveltekit.body%\n</div>`
 		);
 	}
 
-	const client = create_client({
-		target
-	});
+	const client = create_client(app, target);
 
 	init({ client });
 

package/src/runtime/client/types.d.ts

@@ -9,7 +9,43 @@ import {
 	preloadData
 } from '$app/navigation';
 import { SvelteComponent } from 'svelte';
-import { CSRPageNode, CSRPageNodeLoader, CSRRoute, Page, TrailingSlash, Uses } from 'types';
+import {
+	ClientHooks,
+	CSRPageNode,
+	CSRPageNodeLoader,
+	CSRRoute,
+	Page,
+	ParamMatcher,
+	TrailingSlash,
+	Uses
+} from 'types';
+
+export interface SvelteKitApp {
+	/**
+	 * A list of all the error/layout/page nodes used in the app
+	 */
+	nodes: CSRPageNodeLoader[];
+
+	/**
+	 * A list of all layout node ids that have a server load function.
+	 * Pages are not present because it's shorter to encode it on the leaf itself.
+	 */
+	server_loads: number[];
+
+	/**
+	 * A map of `[routeId: string]: [leaf, layouts, errors]` tuples, which
+	 * is parsed into an array of routes on startup. The numbers refer to the indices in `nodes`.
+	 * If the leaf number is negative, it means it does use a server load function and the complement is the node index.
+	 * The route layout and error nodes are not referenced, they are always number 0 and 1 and always apply.
+	 */
+	dictionary: Record<string, [leaf: number, layouts: number[], errors?: number[]]>;
+
+	matchers: Record<string, ParamMatcher>;
+
+	hooks: ClientHooks;
+
+	root: typeof SvelteComponent;
+}
 
 export interface Client {
 	// public API, exposed via $app/navigation

package/src/runtime/client/utils.js

@@ -1,7 +1,7 @@
 import { BROWSER, DEV } from 'esm-env';
 import { writable } from 'svelte/store';
 import { assets } from '__sveltekit/paths';
-import { version } from '../shared.js';
+import { version } from '__sveltekit/environment';
 import { PRELOAD_PRIORITIES } from './constants.js';
 
 /* global __SVELTEKIT_APP_VERSION_FILE__, __SVELTEKIT_APP_VERSION_POLL_INTERVAL__ */

package/src/runtime/env/dynamic/private.js

@@ -1 +1 @@
-export { private_env as env } from '../../shared.js';
+export { private_env as env } from '../../shared-server.js';

package/src/runtime/env/dynamic/public.js

@@ -1 +1 @@
-export { public_env as env } from '../../shared.js';
+export { public_env as env } from '../../shared-server.js';

package/src/runtime/server/data/index.js

@@ -2,9 +2,11 @@ import { HttpError, Redirect } from '../../control.js';
 import { normalize_error } from '../../../utils/error.js';
 import { once } from '../../../utils/functions.js';
 import { load_server_data } from '../page/load_data.js';
-import { clarify_devalue_error, handle_error_and_jsonify, serialize_data_node } from '../utils.js';
+import { clarify_devalue_error, handle_error_and_jsonify, stringify_uses } from '../utils.js';
 import { normalize_path } from '../../../utils/url.js';
 import { text } from '../../../exports/index.js';
+import * as devalue from 'devalue';
+import { create_async_iterator } from '../../../utils/streaming.js';
 
 export const INVALIDATED_PARAM = 'x-sveltekit-invalidated';
 
@@ -58,6 +60,7 @@ export async function render_data(
 
 					// == because it could be undefined (in dev) or null (in build, because of JSON.stringify)
 					const node = n == undefined ? n : await manifest._.nodes[n]();
+					// load this. for the child, return as is. for the final result, stream things
 					return load_server_data({
 						event: new_event,
 						state,
@@ -114,33 +117,50 @@ export async function render_data(
 			)
 		);
 
-		try {
-			const stubs = nodes.slice(0, length).map(serialize_data_node);
+		const { data, chunks } = get_data_json(event, options, nodes);
 
-			const json = `{"type":"data","nodes":[${stubs.join(',')}]}`;
-			return json_response(json);
-		} catch (e) {
-			const error = /** @type {any} */ (e);
-			return json_response(JSON.stringify(clarify_devalue_error(event, error)), 500);
+		if (!chunks) {
+			// use a normal JSON response where possible, so we get `content-length`
+			// and can use browser JSON devtools for easier inspecting
+			return json_response(data);
 		}
+
+		return new Response(
+			new ReadableStream({
+				async start(controller) {
+					controller.enqueue(data);
+					for await (const chunk of chunks) {
+						controller.enqueue(chunk);
+					}
+					controller.close();
+				}
+			}),
+			{
+				headers: {
+					// text/plain isn't strictly correct, but it makes it easier to inspect
+					// the data, and doesn't affect how it is consumed by the client
+					'content-type': 'text/plain',
+					'cache-control': 'private, no-store'
+				}
+			}
+		);
 	} catch (e) {
 		const error = normalize_error(e);
 
 		if (error instanceof Redirect) {
 			return redirect_json_response(error);
 		} else {
-			// TODO make it clearer that this was an unexpected error
-			return json_response(JSON.stringify(await handle_error_and_jsonify(event, options, error)));
+			return json_response(await handle_error_and_jsonify(event, options, error), 500);
 		}
 	}
 }
 
 /**
- * @param {string} json
+ * @param {Record<string, any> | string} json
  * @param {number} [status]
  */
 function json_response(json, status = 200) {
-	return text(json, {
+	return text(typeof json === 'string' ? json : JSON.stringify(json), {
 		status,
 		headers: {
 			'content-type': 'application/json',
@@ -153,10 +173,90 @@ function json_response(json, status = 200) {
  * @param {Redirect} redirect
  */
 export function redirect_json_response(redirect) {
-	return json_response(
-		JSON.stringify({
-			type: 'redirect',
-			location: redirect.location
-		})
-	);
+	return json_response({
+		type: 'redirect',
+		location: redirect.location
+	});
+}
+
+/**
+ * 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').ServerDataSkippedNode | import('types').ServerDataNode | import('types').ServerErrorNode | null | undefined>} nodes
+ *  @returns {{ data: string, chunks: AsyncIterable<string> | null }}
+ */
+export function get_data_json(event, options, nodes) {
+	let promise_id = 1;
+	let count = 0;
+
+	const { iterator, push, done } = create_async_iterator();
+
+	const reducers = {
+		/** @param {any} thing */
+		Promise: (thing) => {
+			if (typeof thing?.then === 'function') {
+				const id = promise_id++;
+				count += 1;
+
+				/** @type {'data' | 'error'} */
+				let key = 'data';
+
+				thing
+					.catch(
+						/** @param {any} e */ async (e) => {
+							key = 'error';
+							return handle_error_and_jsonify(event, options, /** @type {any} */ (e));
+						}
+					)
+					.then(
+						/** @param {any} value */
+						async (value) => {
+							let str;
+							try {
+								str = devalue.stringify(value, reducers);
+							} catch (e) {
+								const error = await handle_error_and_jsonify(
+									event,
+									options,
+									new Error(`Failed to serialize promise while rendering ${event.route.id}`)
+								);
+
+								key = 'error';
+								str = devalue.stringify(error, reducers);
+							}
+
+							count -= 1;
+
+							push(`{"type":"chunk","id":${id},"${key}":${str}}\n`);
+							if (count === 0) done();
+						}
+					);
+
+				return id;
+			}
+		}
+	};
+
+	try {
+		const strings = nodes.map((node) => {
+			if (!node) return 'null';
+
+			if (node.type === 'error' || node.type === 'skip') {
+				return JSON.stringify(node);
+			}
+
+			return `{"type":"data","data":${devalue.stringify(node.data, reducers)},${stringify_uses(
+				node
+			)}${node.slash ? `,"slash":${JSON.stringify(node.slash)}` : ''}}`;
+		});
+
+		return {
+			data: `{"type":"data","nodes":[${strings.join(',')}]}\n`,
+			chunks: count > 0 ? iterator : null
+		};
+	} catch (e) {
+		throw new Error(clarify_devalue_error(event, /** @type {any} */ (e)));
+	}
 }

package/src/runtime/server/index.js

@@ -1,5 +1,5 @@
 import { respond } from './respond.js';
-import { set_private_env, set_public_env } from '../shared.js';
+import { set_private_env, set_public_env } from '../shared-server.js';
 import { options, get_hooks } from '__SERVER__/internal.js';
 
 export class Server {

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

@@ -3,12 +3,7 @@ import { compact } from '../../../utils/array.js';
 import { normalize_error } from '../../../utils/error.js';
 import { add_data_suffix } from '../../../utils/url.js';
 import { HttpError, Redirect } from '../../control.js';
-import {
-	redirect_response,
-	static_error_page,
-	handle_error_and_jsonify,
-	serialize_data_node
-} from '../utils.js';
+import { redirect_response, static_error_page, handle_error_and_jsonify } from '../utils.js';
 import {
 	handle_action_json_request,
 	handle_action_request,
@@ -19,6 +14,7 @@ import { load_data, load_server_data } from './load_data.js';
 import { render_response } from './render.js';
 import { respond_with_error } from './respond_with_error.js';
 import { get_option } from '../../../utils/options.js';
+import { get_data_json } from '../data/index.js';
 
 /**
  * @param {import('types').RequestEvent} event
@@ -290,13 +286,22 @@ export async function render_page(event, route, page, options, manifest, state,
 		}
 
 		if (state.prerendering && should_prerender_data) {
-			const body = `{"type":"data","nodes":[${branch
-				.map((node) => serialize_data_node(node?.server_data))
-				.join(',')}]}`;
+			// ndjson format
+			let { data, chunks } = get_data_json(
+				event,
+				options,
+				branch.map((node) => node?.server_data)
+			);
+
+			if (chunks) {
+				for await (const chunk of chunks) {
+					data += chunk;
+				}
+			}
 
 			state.prerendering.dependencies.set(data_pathname, {
-				response: text(body),
-				body
+				response: text(data),
+				body: data
 			});
 		}