@sveltejs/kit 1.0.0-next.533 → 1.0.0-next.534

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "1.0.0-next.533",
+  "version": "1.0.0-next.534",
   "repository": {
     "type": "git",
     "url": "https://github.com/sveltejs/kit",
@@ -13,7 +13,7 @@
     "@sveltejs/vite-plugin-svelte": "^1.1.0",
     "@types/cookie": "^0.5.1",
     "cookie": "^0.5.0",
-    "devalue": "^4.1.0",
+    "devalue": "^4.2.0",
     "kleur": "^4.1.5",
     "magic-string": "^0.26.7",
     "mime": "^3.0.0",

package/src/core/sync/write_types/index.js

@@ -200,6 +200,8 @@ function update_types(config, routes, route, to_delete = new Set()) {
 			.join('; ')} }`
 	);
 
+	declarations.push(`type RouteId = '${route.id}';`);
+
 	// These could also be placed in our public types, but it would bloat them unnecessarily and we may want to change these in the future
 	if (route.layout || route.leaf) {
 		// If T extends the empty object, void is also allowed as a return type
@@ -249,17 +251,25 @@ function update_types(config, routes, route, to_delete = new Set()) {
 		}
 
 		if (route.leaf.server) {
-			exports.push(`export type Action = Kit.Action<RouteParams>`);
-			exports.push(`export type Actions = Kit.Actions<RouteParams>`);
+			exports.push(
+				`export type Action<OutputData extends Record<string, any> | void = Record<string, any> | void> = Kit.Action<RouteParams, OutputData, RouteId>`
+			);
+			exports.push(
+				`export type Actions<OutputData extends Record<string, any> | void = Record<string, any> | void> = Kit.Actions<RouteParams, OutputData, RouteId>`
+			);
 		}
 	}
 
 	if (route.layout) {
 		let all_pages_have_load = true;
 		const layout_params = new Set();
+		const ids = ['RouteId'];
+
 		route.layout.child_pages?.forEach((page) => {
 			const leaf = routes.get(page);
 			if (leaf) {
+				if (leaf.route.page) ids.push(`"${leaf.route.id}"`);
+
 				for (const name of leaf.route.names) {
 					layout_params.add(name);
 				}
@@ -280,6 +290,13 @@ function update_types(config, routes, route, to_delete = new Set()) {
 			}
 		});
 
+		if (route.id === '/') {
+			// root layout is used for fallback error page, where ID can be null
+			ids.push('null');
+		}
+
+		declarations.push(`type LayoutRouteId = ${ids.join(' | ')}`);
+
 		declarations.push(
 			`type LayoutParams = RouteParams & { ${Array.from(layout_params).map(
 				(param) => `${param}?: string`
@@ -306,11 +323,11 @@ function update_types(config, routes, route, to_delete = new Set()) {
 	}
 
 	if (route.endpoint) {
-		exports.push(`export type RequestHandler = Kit.RequestHandler<RouteParams>;`);
+		exports.push(`export type RequestHandler = Kit.RequestHandler<RouteParams, RouteId>;`);
 	}
 
 	if (route.leaf?.server || route.layout?.server || route.endpoint) {
-		exports.push(`export type RequestEvent = Kit.RequestEvent<RouteParams>;`);
+		exports.push(`export type RequestEvent = Kit.RequestEvent<RouteParams, RouteId>;`);
 	}
 
 	const output = [imports.join('\n'), declarations.join('\n'), exports.join('\n')]
@@ -336,6 +353,8 @@ function process_node(node, outdir, is_page, proxies, all_pages_have_load = true
 	const params = `${is_page ? 'Route' : 'Layout'}Params`;
 	const prefix = is_page ? 'Page' : 'Layout';
 
+	const route_id = is_page ? 'RouteId' : 'LayoutRouteId';
+
 	/** @type {string[]} */
 	const declarations = [];
 	/** @type {string[]} */
@@ -367,7 +386,7 @@ function process_node(node, outdir, is_page, proxies, all_pages_have_load = true
 				? `Partial<App.PageData> & Record<string, any> | void`
 				: `OutputDataShape<${parent_type}>`;
 		exports.push(
-			`export type ${prefix}ServerLoad<OutputData extends ${output_data_shape} = ${output_data_shape}> = Kit.ServerLoad<${params}, ${parent_type}, OutputData>;`
+			`export type ${prefix}ServerLoad<OutputData extends ${output_data_shape} = ${output_data_shape}> = Kit.ServerLoad<${params}, ${parent_type}, OutputData, ${route_id}>;`
 		);
 
 		exports.push(`export type ${prefix}ServerLoadEvent = Parameters<${prefix}ServerLoad>[0];`);
@@ -414,7 +433,7 @@ function process_node(node, outdir, is_page, proxies, all_pages_have_load = true
 				? `Partial<App.PageData> & Record<string, any> | void`
 				: `OutputDataShape<${parent_type}>`;
 		exports.push(
-			`export type ${prefix}Load<OutputData extends ${output_data_shape} = ${output_data_shape}> = Kit.Load<${params}, ${prefix}ServerData, ${parent_type}, OutputData>;`
+			`export type ${prefix}Load<OutputData extends ${output_data_shape} = ${output_data_shape}> = Kit.Load<${params}, ${prefix}ServerData, ${parent_type}, OutputData, ${route_id}>;`
 		);
 
 		exports.push(`export type ${prefix}LoadEvent = Parameters<${prefix}Load>[0];`);

package/src/exports/vite/build/build_server.js

@@ -74,7 +74,7 @@ export class Server {
 					get request() {
 						throw new Error('request in handleError has been replaced with event. See https://github.com/sveltejs/kit/pull/3384 for details');
 					}
-				}) ?? { message: event.routeId != null ? 'Internal Error' : 'Not Found' };
+				}) ?? { message: event.route.id != null ? 'Internal Error' : 'Not Found' };
 			},
 			hooks: null,
 			manifest,

package/src/exports/vite/dev/index.js

@@ -439,7 +439,7 @@ export async function dev(vite, vite_config, svelte_config) {
 											'request in handleError has been replaced with event. See https://github.com/sveltejs/kit/pull/3384 for details'
 										);
 									}
-								}) ?? { message: event.routeId != null ? 'Internal Error' : 'Not Found' }
+								}) ?? { message: event.route.id != null ? 'Internal Error' : 'Not Found' }
 							);
 						},
 						hooks,

package/src/runtime/client/client.js

@@ -163,16 +163,16 @@ export function create_client({ target, base, trailing_slash }) {
 
 	/**
 	 * @param {string | URL} url
-	 * @param {{ noscroll?: boolean; replaceState?: boolean; keepfocus?: boolean; state?: any; invalidateAll?: boolean }} opts
+	 * @param {{ noScroll?: boolean; replaceState?: boolean; keepFocus?: boolean; state?: any; invalidateAll?: boolean }} opts
 	 * @param {string[]} redirect_chain
 	 * @param {{}} [nav_token]
 	 */
 	async function goto(
 		url,
 		{
-			noscroll = false,
+			noScroll = false,
 			replaceState = false,
-			keepfocus = false,
+			keepFocus = false,
 			state = {},
 			invalidateAll = false
 		},
@@ -185,8 +185,8 @@ export function create_client({ target, base, trailing_slash }) {
 
 		return navigate({
 			url,
-			scroll: noscroll ? scroll_state() : null,
-			keepfocus,
+			scroll: noScroll ? scroll_state() : null,
+			keepfocus: keepFocus,
 			redirect_chain,
 			details: {
 				state,
@@ -232,8 +232,12 @@ export function create_client({ target, base, trailing_slash }) {
 		if (!navigation_result) {
 			navigation_result = await server_fallback(
 				url,
-				null,
-				handle_error(new Error(`Not found: ${url.pathname}`), { url, params: {}, routeId: null }),
+				{ id: null },
+				handle_error(new Error(`Not found: ${url.pathname}`), {
+					url,
+					params: {},
+					route: { id: null }
+				}),
 				404
 			);
 		}
@@ -249,9 +253,9 @@ export function create_client({ target, base, trailing_slash }) {
 			if (redirect_chain.length > 10 || redirect_chain.includes(url.pathname)) {
 				navigation_result = await load_root_error_page({
 					status: 500,
-					error: handle_error(new Error('Redirect loop'), { url, params: {}, routeId: null }),
+					error: handle_error(new Error('Redirect loop'), { url, params: {}, route: { id: null } }),
 					url,
-					routeId: null
+					route: { id: null }
 				});
 			} else {
 				goto(
@@ -382,7 +386,7 @@ export function create_client({ target, base, trailing_slash }) {
 			from: null,
 			to: add_url_properties('to', {
 				params: current.params,
-				routeId: current.route?.id ?? null,
+				route: { id: current.route?.id ?? null },
 				url: new URL(location.href)
 			}),
 			type: 'load'
@@ -464,7 +468,7 @@ export function create_client({ target, base, trailing_slash }) {
 			result.props.page = {
 				error,
 				params,
-				routeId: route && route.id,
+				route,
 				status,
 				url,
 				form,
@@ -502,12 +506,12 @@ export function create_client({ target, base, trailing_slash }) {
 	 * 	 parent: () => Promise<Record<string, any>>;
 	 *   url: URL;
 	 *   params: Record<string, string>;
-	 *   routeId: string | null;
+	 *   route: { id: string | null };
 	 * 	 server_data_node: import('./types').DataNode | null;
 	 * }} options
 	 * @returns {Promise<import('./types').BranchNode>}
 	 */
-	async function load_node({ loader, parent, url, params, routeId, server_data_node }) {
+	async function load_node({ loader, parent, url, params, route, server_data_node }) {
 		/** @type {Record<string, any> | null} */
 		let data = null;
 
@@ -516,6 +520,7 @@ export function create_client({ target, base, trailing_slash }) {
 			dependencies: new Set(),
 			params: new Set(),
 			parent: false,
+			route: false,
 			url: false
 		};
 
@@ -532,7 +537,12 @@ export function create_client({ target, base, trailing_slash }) {
 
 			/** @type {import('types').LoadEvent} */
 			const load_input = {
-				routeId,
+				route: {
+					get id() {
+						uses.route = true;
+						return route.id;
+					}
+				},
 				params: new Proxy(params, {
 					get: (target, key) => {
 						uses.params.add(/** @type {string} */ (key));
@@ -617,6 +627,12 @@ export function create_client({ target, base, trailing_slash }) {
 						);
 					},
 					enumerable: false
+				},
+				routeId: {
+					get() {
+						throw new Error('routeId has been replaced by route.id');
+					},
+					enumerable: false
 				}
 			});
 
@@ -643,17 +659,19 @@ export function create_client({ target, base, trailing_slash }) {
 	}
 
 	/**
-	 * @param {boolean} url_changed
 	 * @param {boolean} parent_changed
+	 * @param {boolean} route_changed
+	 * @param {boolean} url_changed
 	 * @param {import('types').Uses | undefined} uses
 	 * @param {Record<string, string>} params
 	 */
-	function has_changed(url_changed, parent_changed, uses, params) {
+	function has_changed(parent_changed, route_changed, url_changed, uses, params) {
 		if (force_invalidation) return true;
 
 		if (!uses) return false;
 
 		if (uses.parent && parent_changed) return true;
+		if (uses.route && route_changed) return true;
 		if (uses.url && url_changed) return true;
 
 		for (const param of uses.params) {
@@ -681,6 +699,7 @@ export function create_client({ target, base, trailing_slash }) {
 					dependencies: new Set(node.uses.dependencies ?? []),
 					params: new Set(node.uses.params ?? []),
 					parent: !!node.uses.parent,
+					route: !!node.uses.route,
 					url: !!node.uses.url
 				}
 			};
@@ -713,6 +732,7 @@ export function create_client({ target, base, trailing_slash }) {
 		let server_data = null;
 
 		const url_changed = current.url ? id !== current.url.pathname + current.url.search : false;
+		const route_changed = current.route ? id !== current.route.id : false;
 
 		const invalid_server_nodes = loaders.reduce((acc, loader, i) => {
 			const previous = current.branch[i];
@@ -720,7 +740,13 @@ export function create_client({ target, base, trailing_slash }) {
 			const invalid =
 				!!loader?.[0] &&
 				(previous?.loader !== loader[1] ||
-					has_changed(url_changed, acc.some(Boolean), previous.server?.uses, params));
+					has_changed(
+						acc.some(Boolean),
+						route_changed,
+						url_changed,
+						previous.server?.uses,
+						params
+					));
 
 			acc.push(invalid);
 			return acc;
@@ -732,9 +758,9 @@ export function create_client({ target, base, trailing_slash }) {
 			} catch (error) {
 				return load_root_error_page({
 					status: 500,
-					error: handle_error(error, { url, params, routeId: route.id }),
+					error: handle_error(error, { url, params, route: { id: route.id } }),
 					url,
-					routeId: route.id
+					route
 				});
 			}
 
@@ -759,7 +785,7 @@ export function create_client({ target, base, trailing_slash }) {
 			const valid =
 				(!server_data_node || server_data_node.type === 'skip') &&
 				loader[1] === previous?.loader &&
-				!has_changed(url_changed, parent_changed, previous.shared?.uses, params);
+				!has_changed(parent_changed, route_changed, url_changed, previous.shared?.uses, params);
 			if (valid) return previous;
 
 			parent_changed = true;
@@ -773,7 +799,7 @@ export function create_client({ target, base, trailing_slash }) {
 				loader: loader[1],
 				url,
 				params,
-				routeId: route.id,
+				route,
 				parent: async () => {
 					const data = {};
 					for (let j = 0; j < i; j += 1) {
@@ -821,7 +847,7 @@ export function create_client({ target, base, trailing_slash }) {
 						status = err.status;
 						error = err.body;
 					} else {
-						error = handle_error(err, { params, url, routeId: route.id });
+						error = handle_error(err, { params, url, route: { id: route.id } });
 					}
 
 					const error_load = await load_nearest_error_page(i, branch, errors);
@@ -837,7 +863,7 @@ export function create_client({ target, base, trailing_slash }) {
 					} else {
 						// if we get here, it's because the root `load` function failed,
 						// and we need to fall back to the server
-						return await server_fallback(url, route.id, error, status);
+						return await server_fallback(url, { id: route.id }, error, status);
 					}
 				}
 			} else {
@@ -893,11 +919,11 @@ export function create_client({ target, base, trailing_slash }) {
 	 *   status: number;
 	 *   error: App.Error;
 	 *   url: URL;
-	 *   routeId: string | null
+	 *   route: { id: string | null }
 	 * }} opts
 	 * @returns {Promise<import('./types').NavigationFinished>}
 	 */
-	async function load_root_error_page({ status, error, url, routeId }) {
+	async function load_root_error_page({ status, error, url, route }) {
 		/** @type {Record<string, string>} */
 		const params = {}; // error page does not have params
 
@@ -933,7 +959,7 @@ export function create_client({ target, base, trailing_slash }) {
 			loader: default_layout_loader,
 			url,
 			params,
-			routeId,
+			route,
 			parent: () => Promise.resolve({}),
 			server_data_node: create_data_node(server_data_node)
 		});
@@ -1023,12 +1049,12 @@ export function create_client({ target, base, trailing_slash }) {
 		const navigation = {
 			from: add_url_properties('from', {
 				params: current.params,
-				routeId: current.route?.id ?? null,
+				route: { id: current.route?.id ?? null },
 				url: current.url
 			}),
 			to: add_url_properties('to', {
 				params: intent?.params ?? null,
-				routeId: intent?.route.id ?? null,
+				route: { id: intent?.route?.id ?? null },
 				url
 			}),
 			type
@@ -1080,12 +1106,12 @@ export function create_client({ target, base, trailing_slash }) {
 	/**
 	 * Does a full page reload if it wouldn't result in an endless loop in the SPA case
 	 * @param {URL} url
-	 * @param {string | null} routeId
+	 * @param {{ id: string | null }} route
 	 * @param {App.Error} error
 	 * @param {number} status
 	 * @returns {Promise<import('./types').NavigationFinished>}
 	 */
-	async function server_fallback(url, routeId, error, status) {
+	async function server_fallback(url, route, error, status) {
 		if (url.origin === location.origin && url.pathname === location.pathname && !hydrated) {
 			// We would reload the same page we're currently on, which isn't hydrated,
 			// which means no SSR, which means we would end up in an endless loop
@@ -1093,7 +1119,7 @@ export function create_client({ target, base, trailing_slash }) {
 				status,
 				error,
 				url,
-				routeId
+				route
 			});
 		}
 		return await native_navigation(url);
@@ -1149,7 +1175,22 @@ export function create_client({ target, base, trailing_slash }) {
 			}
 		},
 
-		goto: (href, opts = {}) => goto(href, opts, []),
+		goto: (href, opts = {}) => {
+			// TODO remove for 1.0
+			if ('keepfocus' in opts) {
+				throw new Error(
+					'`keepfocus` has been renamed to `keepFocus` (note the difference in casing)'
+				);
+			}
+
+			if ('noscroll' in opts) {
+				throw new Error(
+					'`noscroll` has been renamed to `noScroll` (note the difference in casing)'
+				);
+			}
+
+			return goto(href, opts, []);
+		},
 
 		invalidate: (resource) => {
 			if (resource === undefined) {
@@ -1248,7 +1289,7 @@ export function create_client({ target, base, trailing_slash }) {
 				const navigation = {
 					from: add_url_properties('from', {
 						params: current.params,
-						routeId: current.route?.id ?? null,
+						route: { id: current.route?.id ?? null },
 						url: current.url
 					}),
 					to: null,
@@ -1437,15 +1478,7 @@ export function create_client({ target, base, trailing_slash }) {
 			});
 		},
 
-		_hydrate: async ({
-			status,
-			error,
-			node_ids,
-			params,
-			routeId,
-			data: server_data_nodes,
-			form
-		}) => {
+		_hydrate: async ({ status, error, node_ids, params, route, data: server_data_nodes, form }) => {
 			hydrated = true;
 
 			const url = new URL(location.href);
@@ -1461,7 +1494,7 @@ export function create_client({ target, base, trailing_slash }) {
 						loader: nodes[n],
 						url,
 						params,
-						routeId,
+						route,
 						parent: async () => {
 							const data = {};
 							for (let j = 0; j < i; j += 1) {
@@ -1480,7 +1513,7 @@ export function create_client({ target, base, trailing_slash }) {
 					status,
 					error,
 					form,
-					route: routes.find((route) => route.id === routeId) ?? null
+					route: routes.find(({ id }) => id === route.id) ?? null
 				});
 			} catch (error) {
 				if (error instanceof Redirect) {
@@ -1492,9 +1525,9 @@ export function create_client({ target, base, trailing_slash }) {
 
 				result = await load_root_error_page({
 					status: error instanceof HttpError ? error.status : 500,
-					error: handle_error(error, { url, params, routeId }),
+					error: handle_error(error, { url, params, route }),
 					url,
-					routeId
+					route
 				});
 			}
 
@@ -1517,14 +1550,28 @@ async function load_data(url, invalid) {
 			'x-sveltekit-invalidated': invalid.map((x) => (x ? '1' : '')).join(',')
 		}
 	});
-	const server_data = await res.text();
+	const data = await res.json();
 
 	if (!res.ok) {
 		// error message is a JSON-stringified string which devalue can't handle at the top level
-		throw new Error(JSON.parse(server_data));
+		throw new Error(data);
 	}
 
-	return devalue.parse(server_data);
+	// 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 data;
 }
 
 /**
@@ -1538,7 +1585,7 @@ function handle_error(error, event) {
 	}
 	return (
 		hooks.handleError({ error, event }) ??
-		/** @type {any} */ ({ message: event.routeId != null ? 'Internal Error' : 'Not Found' })
+		/** @type {any} */ ({ message: event.route.id != null ? 'Internal Error' : 'Not Found' })
 	);
 }
 
@@ -1574,6 +1621,15 @@ function add_url_properties(type, target) {
 		});
 	}
 
+	Object.defineProperty(target, 'routeId', {
+		get() {
+			throw new Error(
+				`The navigation shape changed - ${type}.routeId should now be ${type}.route.id`
+			);
+		},
+		enumerable: false
+	});
+
 	return target;
 }
 

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

@@ -28,7 +28,7 @@ export interface Client {
 		error: App.Error;
 		node_ids: number[];
 		params: Record<string, string>;
-		routeId: string | null;
+		route: { id: string | null };
 		data: Array<import('types').ServerDataNode | null>;
 		form: Record<string, any> | null;
 	}): Promise<void>;

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

@@ -1,8 +1,9 @@
+import * as devalue from 'devalue';
 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 { data_response, handle_error_and_jsonify } from '../utils.js';
+import { clarify_devalue_error, handle_error_and_jsonify, serialize_data_node } from '../utils.js';
 import { normalize_path, strip_data_suffix } from '../../../utils/url.js';
 
 /**
@@ -101,27 +102,42 @@ export async function render_data(event, route, options, state) {
 			)
 		);
 
-		/** @type {import('types').ServerData} */
-		const server_data = {
-			type: 'data',
-			nodes: nodes.slice(0, length)
-		};
+		try {
+			const stubs = nodes.slice(0, length).map(serialize_data_node);
 
-		return data_response(server_data, event);
+			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);
+		}
 	} catch (e) {
 		const error = normalize_error(e);
 
 		if (error instanceof Redirect) {
-			/** @type {import('types').ServerData} */
-			const server_data = {
-				type: 'redirect',
-				location: error.location
-			};
-
-			return data_response(server_data, event);
+			return json_response(
+				JSON.stringify({
+					type: 'redirect',
+					location: error.location
+				})
+			);
 		} else {
 			// TODO make it clearer that this was an unexpected error
-			return data_response(handle_error_and_jsonify(event, options, error), event);
+			return json_response(JSON.stringify(handle_error_and_jsonify(event, options, error)));
 		}
 	}
 }
+
+/**
+ * @param {string} json
+ * @param {number} [status]
+ */
+function json_response(json, status = 200) {
+	return new Response(json, {
+		status,
+		headers: {
+			'content-type': 'application/json',
+			'cache-control': 'private, no-store'
+		}
+	});
+}

package/src/runtime/server/endpoint.js

@@ -34,7 +34,7 @@ export async function render_endpoint(event, mod, state) {
 	if (state.prerendering && !prerender) {
 		if (state.initiator) {
 			// if request came from a prerendered page, bail
-			throw new Error(`${event.routeId} is not prerenderable`);
+			throw new Error(`${event.route.id} is not prerenderable`);
 		} else {
 			// if request came direct from the crawler, signal that
 			// this route cannot be prerendered, but don't bail

package/src/runtime/server/index.js

@@ -121,7 +121,7 @@ export async function respond(request, options, state) {
 		params,
 		platform: state.platform,
 		request,
-		routeId: route && route.id,
+		route: { id: route?.id ?? null },
 		setHeaders: (new_headers) => {
 			for (const key in new_headers) {
 				const lower = key.toLowerCase();
@@ -178,7 +178,8 @@ export async function respond(request, options, state) {
 		path: removed('path', 'url.pathname'),
 		query: removed('query', 'url.searchParams'),
 		body: body_getter,
-		rawBody: body_getter
+		rawBody: body_getter,
+		routeId: removed('routeId', 'route.id')
 	});
 
 	/** @type {import('types').RequiredResolveOptions} */
@@ -305,8 +306,8 @@ export async function respond(request, options, state) {
 					}
 					add_cookies_to_headers(response.headers, Object.values(new_cookies));
 
-					if (state.prerendering && event.routeId !== null) {
-						response.headers.set('x-sveltekit-routeid', encodeURI(event.routeId));
+					if (state.prerendering && event.route.id !== null) {
+						response.headers.set('x-sveltekit-routeid', encodeURI(event.route.id));
 					}
 
 					return response;

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

@@ -41,10 +41,10 @@ export async function handle_action_json_request(event, options, server) {
 		const data = await call_action(event, actions);
 
 		if (data instanceof ValidationError) {
-			check_serializability(data.data, /** @type {string} */ (event.routeId), 'data');
+			check_serializability(data.data, /** @type {string} */ (event.route.id), 'data');
 			return action_json({ type: 'invalid', status: data.status, data: data.data });
 		} else {
-			check_serializability(data, /** @type {string} */ (event.routeId), 'data');
+			check_serializability(data, /** @type {string} */ (event.route.id), 'data');
 			return action_json({
 				type: 'success',
 				status: data ? 200 : 204,

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

@@ -7,7 +7,8 @@ import {
 	get_option,
 	redirect_response,
 	static_error_page,
-	handle_error_and_jsonify
+	handle_error_and_jsonify,
+	serialize_data_node
 } from '../utils.js';
 import {
 	handle_action_json_request,
@@ -208,7 +209,7 @@ export async function render_page(event, route, page, options, state, resolve_op
 
 					if (err instanceof Redirect) {
 						if (state.prerendering && should_prerender_data) {
-							const body = devalue.stringify({
+							const body = JSON.stringify({
 								type: 'redirect',
 								location: err.location
 							});
@@ -263,10 +264,9 @@ export async function render_page(event, route, page, options, state, resolve_op
 		}
 
 		if (state.prerendering && should_prerender_data) {
-			const body = devalue.stringify({
-				type: 'data',
-				nodes: branch.map((branch_node) => branch_node?.server_data)
-			});
+			const body = `{"type":"data","nodes":[${branch
+				.map((node) => serialize_data_node(node?.server_data))
+				.join(',')}]}`;
 
 			state.prerendering.dependencies.set(data_pathname, {
 				response: new Response(body),

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

@@ -17,6 +17,7 @@ export async function load_server_data({ event, state, node, parent }) {
 		dependencies: new Set(),
 		params: new Set(),
 		parent: false,
+		route: false,
 		url: false
 	};
 
@@ -47,6 +48,12 @@ export async function load_server_data({ event, state, node, parent }) {
 			uses.parent = true;
 			return parent();
 		},
+		route: {
+			get id() {
+				uses.route = true;
+				return event.route.id;
+			}
+		},
 		url
 	});
 
@@ -55,12 +62,7 @@ export async function load_server_data({ event, state, node, parent }) {
 	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
-		}
+		uses
 	};
 }
 
@@ -99,7 +101,7 @@ export async function load_data({
 		url: event.url,
 		params: event.params,
 		data: server_data_node?.data ?? null,
-		routeId: event.routeId,
+		route: event.route,
 		fetch: async (input, init) => {
 			const response = await event.fetch(input, init);
 
@@ -199,7 +201,7 @@ export async function load_data({
 						const included = resolve_opts.filterSerializedResponseHeaders(lower, value);
 						if (!included) {
 							throw new Error(
-								`Failed to get response header "${lower}" — it must be included by the \`filterSerializedResponseHeaders\` option: https://kit.svelte.dev/docs/hooks#server-hooks-handle (at ${event.routeId})`
+								`Failed to get response header "${lower}" — it must be included by the \`filterSerializedResponseHeaders\` option: https://kit.svelte.dev/docs/hooks#server-hooks-handle (at ${event.route})`
 							);
 						}
 					}

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

@@ -4,6 +4,7 @@ import { hash } from '../../hash.js';
 import { serialize_data } from './serialize_data.js';
 import { s } from '../../../utils/misc.js';
 import { Csp } from './csp.js';
+import { clarify_devalue_error } from '../utils.js';
 
 // TODO rename this function/module
 
@@ -92,7 +93,7 @@ export async function render_response({
 		props.page = {
 			error,
 			params: /** @type {Record<string, any>} */ (event.params),
-			routeId: event.routeId,
+			route: event.route,
 			status,
 			url: event.url,
 			data,
@@ -170,33 +171,33 @@ export async function render_response({
 	const serialized = { data: '', form: 'null' };
 
 	try {
-		serialized.data = devalue.uneval(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(
-				`Data returned from \`load\` while rendering ${event.routeId} is not serializable: ${error.message} (data.${match[2]})`
-			);
-		}
+		serialized.data = `[${branch
+			.map(({ server_data }) => {
+				if (server_data?.type === 'data') {
+					const data = devalue.uneval(server_data.data);
 
-		const nonPojoError = /pojo/i.exec(error.message);
+					const uses = [];
+					if (server_data.uses.dependencies.size > 0) {
+						uses.push(`dependencies:${s(Array.from(server_data.uses.dependencies))}`);
+					}
 
-		if (nonPojoError) {
-			const constructorName = branch.find(({ server_data }) => server_data?.data?.constructor?.name)
-				?.server_data?.data?.constructor?.name;
+					if (server_data.uses.params.size > 0) {
+						uses.push(`params:${s(Array.from(server_data.uses.params))}`);
+					}
 
-			throw new Error(
-				`Data returned from \`load\` (while rendering ${event.routeId}) must be a plain object${
-					constructorName ? ` rather than an instance of ${constructorName}` : ''
-				}`
-			);
-		}
+					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`);
 
-		throw error;
+					return `{type:"data",data:${data},uses:{${uses.join(',')}}}`;
+				}
+
+				return s(server_data);
+			})
+			.join(',')}]`;
+	} catch (e) {
+		const error = /** @type {any} */ (e);
+		throw new Error(clarify_devalue_error(event, error));
 	}
 
 	if (form_value) {
@@ -249,7 +250,7 @@ export async function render_response({
 					error: ${devalue.uneval(error)},
 					node_ids: [${branch.map(({ node }) => node.index).join(', ')}],
 					params: ${devalue.uneval(event.params)},
-					routeId: ${s(event.routeId)},
+					route: ${s(event.route)},
 					data: ${serialized.data},
 					form: ${serialized.form}
 				}` : 'null'},

package/src/runtime/server/utils.js

@@ -67,28 +67,6 @@ export function allowed_methods(mod) {
 	return allowed;
 }
 
-/**
- * @param {any} data
- * @param {import('types').RequestEvent} event
- */
-export function data_response(data, event) {
-	const headers = {
-		'content-type': 'application/json',
-		'cache-control': 'private, no-store'
-	};
-
-	try {
-		return new Response(devalue.stringify(data), { headers });
-	} catch (e) {
-		const error = /** @type {any} */ (e);
-		const match = /\[(\d+)\]\.data\.(.+)/.exec(error.path);
-		const message = match
-			? `Data returned from \`load\` while rendering ${event.routeId} is not serializable: ${error.message} (data.${match[2]})`
-			: error.message;
-		return new Response(JSON.stringify(message), { headers, status: 500 });
-	}
-}
-
 /**
  * @template {'prerender' | 'ssr' | 'csr'} Option
  * @template {Option extends 'prerender' ? import('types').PrerenderOption : boolean} Value
@@ -179,3 +157,47 @@ export function redirect_response(status, location) {
 	});
 	return response;
 }
+
+/**
+ * @param {import('types').RequestEvent} event
+ * @param {Error & { path: string }} error
+ */
+export function clarify_devalue_error(event, error) {
+	if (error.path) {
+		return `Data returned from \`load\` while rendering ${event.route.id} is not serializable: ${error.message} (data${error.path})`;
+	}
+
+	if (error.path === '') {
+		return `Data returned from \`load\` while rendering ${event.route.id} is not a plain object`;
+	}
+
+	// belt and braces — this should never happen
+	return error.message;
+}
+
+/** @param {import('types').ServerDataNode | import('types').ServerDataSkippedNode | import('types').ServerErrorNode | null} node */
+export function serialize_data_node(node) {
+	if (!node) return 'null';
+
+	if (node.type === 'error' || node.type === 'skip') {
+		return JSON.stringify(node);
+	}
+
+	const stringified = devalue.stringify(node.data);
+
+	const uses = [];
+
+	if (node.uses.dependencies.size > 0) {
+		uses.push(`"dependencies":${JSON.stringify(Array.from(node.uses.dependencies))}`);
+	}
+
+	if (node.uses.params.size > 0) {
+		uses.push(`"params":${JSON.stringify(Array.from(node.uses.params))}`);
+	}
+
+	if (node.uses.parent) uses.push(`"parent":1`);
+	if (node.uses.route) uses.push(`"route":1`);
+	if (node.uses.url) uses.push(`"url":1`);
+
+	return `{"type":"data","data":${stringified},"uses":{${uses.join(',')}}}`;
+}

package/types/ambient.d.ts

@@ -194,11 +194,11 @@ declare module '$app/navigation' {
 			/**
 			 * If `true`, the browser will maintain its scroll position rather than scrolling to the top of the page after navigation
 			 */
-			noscroll?: boolean;
+			noScroll?: boolean;
 			/**
 			 * If `true`, the currently focused element will retain focus after navigation. Otherwise, focus will be reset to the body
 			 */
-			keepfocus?: boolean;
+			keepFocus?: boolean;
 			/**
 			 * The state of the new/updated history entry
 			 */

package/types/index.d.ts

@@ -265,16 +265,18 @@ export interface Load<
 	Params extends Partial<Record<string, string>> = Partial<Record<string, string>>,
 	InputData extends Record<string, unknown> | null = Record<string, any> | null,
 	ParentData extends Record<string, unknown> = Record<string, any>,
-	OutputData extends Record<string, unknown> | void = Record<string, any> | void
+	OutputData extends Record<string, unknown> | void = Record<string, any> | void,
+	RouteId extends string | null = string | null
 > {
-	(event: LoadEvent<Params, InputData, ParentData>): MaybePromise<OutputData>;
+	(event: LoadEvent<Params, InputData, ParentData, RouteId>): MaybePromise<OutputData>;
 }
 
 export interface LoadEvent<
 	Params extends Partial<Record<string, string>> = Partial<Record<string, string>>,
 	Data extends Record<string, unknown> | null = Record<string, any> | null,
-	ParentData extends Record<string, unknown> = Record<string, any>
-> extends NavigationEvent<Params> {
+	ParentData extends Record<string, unknown> = Record<string, any>,
+	RouteId extends string | null = string | null
+> extends NavigationEvent<Params, RouteId> {
 	/**
 	 * `fetch` is equivalent to the [native `fetch` web API](https://developer.mozilla.org/en-US/docs/Web/API/fetch), with a few additional features:
 	 *
@@ -364,16 +366,22 @@ export interface LoadEvent<
 }
 
 export interface NavigationEvent<
-	Params extends Partial<Record<string, string>> = Partial<Record<string, string>>
+	Params extends Partial<Record<string, string>> = Partial<Record<string, string>>,
+	RouteId extends string | null = string | null
 > {
 	/**
 	 * The parameters of the current page - e.g. for a route like `/blog/[slug]`, the `slug` parameter
 	 */
 	params: Params;
 	/**
-	 * The route ID of the current page - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`
+	 * Info about the current route
 	 */
-	routeId: string | null;
+	route: {
+		/**
+		 * The ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `blog/[slug]`
+		 */
+		id: RouteId;
+	};
 	/**
 	 * The URL of the current page
 	 */
@@ -382,7 +390,7 @@ export interface NavigationEvent<
 
 export interface NavigationTarget {
 	params: Record<string, string> | null;
-	routeId: string | null;
+	route: { id: string | null };
 	url: URL;
 }
 
@@ -398,7 +406,10 @@ export interface Navigation {
 /**
  * The shape of the `$page` store
  */
-export interface Page<Params extends Record<string, string> = Record<string, string>> {
+export interface Page<
+	Params extends Record<string, string> = Record<string, string>,
+	RouteId extends string | null = string | null
+> {
 	/**
 	 * The URL of the current page
 	 */
@@ -408,9 +419,14 @@ export interface Page<Params extends Record<string, string> = Record<string, str
 	 */
 	params: Params;
 	/**
-	 * The route ID of the current page - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`
+	 * Info about the current route
 	 */
-	routeId: string | null;
+	route: {
+		/**
+		 * The ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `blog/[slug]`
+		 */
+		id: RouteId;
+	};
 	/**
 	 * Http status code of the current page
 	 */
@@ -434,7 +450,8 @@ export interface ParamMatcher {
 }
 
 export interface RequestEvent<
-	Params extends Partial<Record<string, string>> = Partial<Record<string, string>>
+	Params extends Partial<Record<string, string>> = Partial<Record<string, string>>,
+	RouteId extends string | null = string | null
 > {
 	/**
 	 * Get or set cookies related to the current request
@@ -471,9 +488,14 @@ export interface RequestEvent<
 	 */
 	request: Request;
 	/**
-	 * The route ID of the current page - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`
+	 * Info about the current route
 	 */
-	routeId: string | null;
+	route: {
+		/**
+		 * The ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `blog/[slug]`
+		 */
+		id: RouteId;
+	};
 	/**
 	 * If you need to set headers for the response, you can do so using the this method. This is useful if you want the page to be cached, for example:
 	 *
@@ -509,9 +531,10 @@ export interface RequestEvent<
  * It receives `Params` as the first generic argument, which you can skip by using [generated types](https://kit.svelte.dev/docs/types#generated-types) instead.
  */
 export interface RequestHandler<
-	Params extends Partial<Record<string, string>> = Partial<Record<string, string>>
+	Params extends Partial<Record<string, string>> = Partial<Record<string, string>>,
+	RouteId extends string | null = string | null
 > {
-	(event: RequestEvent<Params>): MaybePromise<Response>;
+	(event: RequestEvent<Params, RouteId>): MaybePromise<Response>;
 }
 
 export interface ResolveOptions {
@@ -555,15 +578,17 @@ export interface SSRManifest {
 export interface ServerLoad<
 	Params extends Partial<Record<string, string>> = Partial<Record<string, string>>,
 	ParentData extends Record<string, any> = Record<string, any>,
-	OutputData extends Record<string, any> | void = Record<string, any> | void
+	OutputData extends Record<string, any> | void = Record<string, any> | void,
+	RouteId extends string | null = string | null
 > {
-	(event: ServerLoadEvent<Params, ParentData>): MaybePromise<OutputData>;
+	(event: ServerLoadEvent<Params, ParentData, RouteId>): MaybePromise<OutputData>;
 }
 
 export interface ServerLoadEvent<
 	Params extends Partial<Record<string, string>> = Partial<Record<string, string>>,
-	ParentData extends Record<string, any> = Record<string, any>
-> extends RequestEvent<Params> {
+	ParentData extends Record<string, any> = Record<string, any>,
+	RouteId extends string | null = string | null
+> extends RequestEvent<Params, RouteId> {
 	/**
 	 * `await parent()` returns data from parent `+layout.server.js` `load` functions.
 	 *
@@ -612,15 +637,17 @@ export interface ServerLoadEvent<
 
 export interface Action<
 	Params extends Partial<Record<string, string>> = Partial<Record<string, string>>,
-	OutputData extends Record<string, any> | void = Record<string, any> | void
+	OutputData extends Record<string, any> | void = Record<string, any> | void,
+	RouteId extends string | null = string | null
 > {
-	(event: RequestEvent<Params>): MaybePromise<OutputData>;
+	(event: RequestEvent<Params, RouteId>): MaybePromise<OutputData>;
 }
 
 export type Actions<
 	Params extends Partial<Record<string, string>> = Partial<Record<string, string>>,
-	OutputData extends Record<string, any> | void = Record<string, any> | void
-> = Record<string, Action<Params, OutputData>>;
+	OutputData extends Record<string, any> | void = Record<string, any> | void,
+	RouteId extends string | null = string | null
+> = Record<string, Action<Params, OutputData, RouteId>>;
 
 /**
  * When calling a form action via fetch, the response will be one of these shapes.

package/types/internal.d.ts

@@ -207,12 +207,7 @@ export type ServerData =
 export interface ServerDataNode {
 	type: 'data';
 	data: Record<string, any> | null;
-	uses: {
-		dependencies?: string[];
-		params?: string[];
-		parent?: number | void; // 1 or undefined
-		url?: number | void; // 1 or undefined
-	};
+	uses: Uses;
 }
 
 /**
@@ -362,6 +357,7 @@ export interface Uses {
 	dependencies: Set<string>;
 	params: Set<string>;
 	parent: boolean;
+	route: boolean;
 	url: boolean;
 }