@sveltejs/kit 1.0.0-next.445 → 1.0.0-next.448

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "1.0.0-next.445",
+  "version": "1.0.0-next.448",
   "repository": {
     "type": "git",
     "url": "https://github.com/sveltejs/kit",
@@ -12,7 +12,7 @@
   "dependencies": {
     "@sveltejs/vite-plugin-svelte": "^1.0.1",
     "cookie": "^0.5.0",
-    "devalue": "^2.0.1",
+    "devalue": "^3.1.2",
     "kleur": "^4.1.4",
     "magic-string": "^0.26.2",
     "mime": "^3.0.0",
@@ -36,7 +36,6 @@
     "rollup": "^2.75.7",
     "svelte": "^3.48.0",
     "svelte-preprocess": "^4.10.6",
-    "tiny-glob": "^0.2.9",
     "typescript": "^4.7.4",
     "uvu": "^0.5.3",
     "vite": "^3.0.9"
@@ -51,17 +50,16 @@
   "files": [
     "src",
     "!src/**/*.spec.js",
-    "!src/packaging/test",
     "!src/core/**/fixtures",
-    "!src/core/sync/create_manifest_data/test",
+    "!src/core/**/test",
     "types",
     "svelte-kit.js"
   ],
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "import": "./src/exports/index.js",
-      "types": "./types/index.d.ts"
+      "types": "./types/index.d.ts",
+      "import": "./src/exports/index.js"
     },
     "./node": {
       "import": "./src/exports/node/index.js"
@@ -78,7 +76,7 @@
   },
   "types": "types/index.d.ts",
   "engines": {
-    "node": ">=16.9"
+    "node": ">=16.14"
   },
   "scripts": {
     "build": "npm run types",
@@ -88,7 +86,7 @@
     "format": "npm run lint -- --write",
     "test": "npm run test:unit && npm run test:integration",
     "test:integration": "pnpm run -r --workspace-concurrency 1 --filter=\"./test/**\" test",
-    "test:unit": "uvu src \"(spec\\.js|test[\\\\/]index\\.js)\" -i packaging",
+    "test:unit": "uvu src \"(spec\\.js|test[\\\\/]index\\.js)\"",
     "types": "node scripts/extract-types.js",
     "postinstall": "node svelte-kit.js sync"
   }

package/src/{core/constants.js → constants.js}

@@ -3,3 +3,5 @@
 export const SVELTE_KIT_ASSETS = '/_svelte_kit_assets';
 
 export const GENERATED_COMMENT = '// this file is generated — do not edit it\n';
+
+export const DATA_SUFFIX = '/__data.js';

package/src/core/env.js

@@ -1,4 +1,4 @@
-import { GENERATED_COMMENT } from './constants.js';
+import { GENERATED_COMMENT } from '../constants.js';
 import { runtime_base } from './utils.js';
 
 /**

package/src/core/sync/write_ambient.js

@@ -1,6 +1,6 @@
 import path from 'path';
 import { get_env } from '../../exports/vite/utils.js';
-import { GENERATED_COMMENT } from '../constants.js';
+import { GENERATED_COMMENT } from '../../constants.js';
 import { create_types } from '../env.js';
 import { write_if_changed } from './utils.js';
 

package/src/core/sync/write_client_manifest.js

@@ -43,22 +43,29 @@ export function write_client_manifest(manifest_data, output) {
 		})
 		.join(',\n\t');
 
+	const layouts_with_server_load = new Set();
+
 	const dictionary = `{
 		${manifest_data.routes
 			.map((route) => {
 				if (route.page) {
 					const errors = route.page.errors.slice(1).map((n) => n ?? '');
-					const layouts = route.page.layouts.slice(1).map((n) => {
-						if (n == undefined) {
-							return '';
-						}
-						return get_node_id(manifest_data.nodes, n);
-					});
+					const layouts = route.page.layouts.slice(1).map((n) => n ?? '');
 
 					while (layouts.at(-1) === '') layouts.pop();
 					while (errors.at(-1) === '') errors.pop();
 
-					const array = [get_node_id(manifest_data.nodes, route.page.leaf)];
+					// Encode whether or not the route uses server data
+					// using the ones' complement, to save space
+					const array = [`${route.leaf?.server ? '~' : ''}${route.page.leaf}`];
+					// Encode whether or not the layout uses server data.
+					// It's a different method compared to pages because layouts
+					// are reused across pages, so we safe space by doing it this way.
+					route.page.layouts.forEach((layout) => {
+						if (layout != undefined && manifest_data.nodes[layout].server) {
+							layouts_with_server_load.add(layout);
+						}
+					});
 
 					// only include non-root layout/error nodes if they exist
 					if (layouts.length > 0 || errors.length > 0) array.push(`[${layouts.join(',')}]`);
@@ -77,21 +84,11 @@ export function write_client_manifest(manifest_data, output) {
 		trim(`
 			export { matchers } from './client-matchers.js';
 
-			export const nodes = [
-				${nodes}
-			];
+			export const nodes = [${nodes}];
+
+			export const server_loads = [${[...layouts_with_server_load].join(',')}];
 
 			export const dictionary = ${dictionary};
 		`)
 	);
 }
-
-/**
- * Encode whether or not the route uses the server data
- * using the ones' complement, to save space
- * @param {import('types').PageNode[]} nodes
- * @param {number} id
- */
-function get_node_id(nodes, id) {
-	return `${nodes[id].server ? '~' : ''}${id}`;
-}

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

@@ -8,7 +8,7 @@ import { installPolyfills } from '../../../exports/node/polyfills.js';
 import { coalesce_to_error } from '../../../utils/error.js';
 import { posixify } from '../../../utils/filesystem.js';
 import { load_template } from '../../../core/config/index.js';
-import { SVELTE_KIT_ASSETS } from '../../../core/constants.js';
+import { SVELTE_KIT_ASSETS } from '../../../constants.js';
 import * as sync from '../../../core/sync/sync.js';
 import { get_mime_lookup, runtime_base, runtime_prefix } from '../../../core/utils.js';
 import { get_env, prevent_illegal_vite_imports, resolve_entry } from '../utils.js';

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

@@ -4,7 +4,7 @@ import sirv from 'sirv';
 import { pathToFileURL } from 'url';
 import { getRequest, setResponse } from '../../../exports/node/index.js';
 import { installPolyfills } from '../../../exports/node/polyfills.js';
-import { SVELTE_KIT_ASSETS } from '../../../core/constants.js';
+import { SVELTE_KIT_ASSETS } from '../../../constants.js';
 import { loadEnv } from 'vite';
 
 /** @typedef {import('http').IncomingMessage} Req */

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

@@ -6,13 +6,19 @@ declare module '__GENERATED__/client-manifest.js' {
 	 */
 	export const 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.
+	 */
+	export const 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 number is negative, it means it does use a server load function and the complement is the node index.
+	 * 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.
 	 */
-	export const dictionary: Record<string, [leaf: number, layouts?: number[], errors?: number[]]>;
+	export const dictionary: Record<string, [leaf: number, layouts: number[], errors?: number[]]>;
 
 	export const matchers: Record<string, ParamMatcher>;
 }

package/src/runtime/client/client.js

@@ -7,14 +7,15 @@ import { parse } from './parse.js';
 import { error } from '../../exports/index.js';
 
 import Root from '__GENERATED__/root.svelte';
-import { nodes, dictionary, matchers } from '__GENERATED__/client-manifest.js';
+import { nodes, server_loads, dictionary, matchers } from '__GENERATED__/client-manifest.js';
 import { HttpError, Redirect } from '../control.js';
 import { stores } from './singletons.js';
+import { DATA_SUFFIX } from '../../constants.js';
 
 const SCROLL_KEY = 'sveltekit:scroll';
 const INDEX_KEY = 'sveltekit:index';
 
-const routes = parse(nodes, dictionary, matchers);
+const routes = parse(nodes, server_loads, dictionary, matchers);
 
 const default_layout_loader = nodes[0];
 const default_error_loader = nodes[1];
@@ -393,7 +394,7 @@ export function create_client({ target, base, trailing_slash }) {
 	 *   status: number;
 	 *   error: HttpError | Error | null;
 	 *   routeId: string | null;
-	 *   validation_errors?: string | undefined;
+	 *   validation_errors?: Record<string, any> | null;
 	 * }} opts
 	 */
 	async function get_navigation_result_from_branch({
@@ -715,24 +716,14 @@ export function create_client({ target, base, trailing_slash }) {
 
 		if (invalid_server_nodes.some(Boolean)) {
 			try {
-				const res = await native_fetch(
-					`${url.pathname}${url.pathname.endsWith('/') ? '' : '/'}__data.json${url.search}`,
-					{
-						headers: {
-							'x-sveltekit-invalidated': invalid_server_nodes.map((x) => (x ? '1' : '')).join(',')
-						}
-					}
-				);
-
-				server_data = /** @type {import('types').ServerData} */ (await res.json());
-
-				if (!res.ok) {
-					throw server_data;
-				}
-			} catch (e) {
-				// something went catastrophically wrong — bail and defer to the server
-				native_navigation(url);
-				return;
+				server_data = await load_data(url, invalid_server_nodes);
+			} catch (error) {
+				return load_root_error_page({
+					status: 500,
+					error: /** @type {Error} */ (error),
+					url,
+					routeId: route.id
+				});
 			}
 
 			if (server_data.type === 'redirect') {
@@ -882,19 +873,18 @@ export function create_client({ target, base, trailing_slash }) {
 		if (node.server) {
 			// TODO post-https://github.com/sveltejs/kit/discussions/6124 we can use
 			// existing root layout data
-			const res = await native_fetch(
-				`${url.pathname}${url.pathname.endsWith('/') ? '' : '/'}__data.json${url.search}`,
-				{
-					headers: {
-						'x-sveltekit-invalidated': '1'
-					}
-				}
-			);
+			try {
+				const server_data = await load_data(url, [true]);
 
-			const server_data_nodes = await res.json();
-			server_data_node = server_data_nodes?.[0] ?? null;
+				if (
+					server_data.type !== 'data' ||
+					(server_data.nodes[0] && server_data.nodes[0].type !== 'data')
+				) {
+					throw 0;
+				}
 
-			if (!res.ok || server_data_nodes?.type !== 'data') {
+				server_data_node = server_data.nodes[0] ?? null;
+			} catch {
 				// at this point we have no choice but to fall back to the server
 				native_navigation(url);
 
@@ -1298,32 +1288,24 @@ export function create_client({ target, base, trailing_slash }) {
 			});
 		},
 
-		_hydrate: async ({ status, error, node_ids, params, routeId }) => {
+		_hydrate: async ({
+			status,
+			error: original_error, // TODO get rid of this
+			node_ids,
+			params,
+			routeId,
+			data: server_data_nodes,
+			errors: validation_errors
+		}) => {
 			const url = new URL(location.href);
 
 			/** @type {import('./types').NavigationFinished | undefined} */
 			let result;
 
 			try {
-				/**
-				 * @param {string} type
-				 * @param {any} fallback
-				 */
-				const parse = (type, fallback) => {
-					const script = document.querySelector(`script[sveltekit\\:data-type="${type}"]`);
-					return script?.textContent ? JSON.parse(script.textContent) : fallback;
-				};
-				/**
-				 * @type {Array<import('types').ServerDataNode | null>}
-				 * On initial navigation, this will only consist of data nodes or `null`.
-				 * A possible error is passed through the `error` property, in which case
-				 * the last entry of `node_ids` is an error page and the last entry of
-				 * `server_data_nodes` is `null`.
-				 */
-				const server_data_nodes = parse('server_data', []);
-				const validation_errors = parse('validation_errors', undefined);
-
 				const branch_promises = node_ids.map(async (n, i) => {
+					const server_data_node = server_data_nodes[i];
+
 					return load_node({
 						loader: nodes[n],
 						url,
@@ -1336,7 +1318,7 @@ export function create_client({ target, base, trailing_slash }) {
 							}
 							return data;
 						},
-						server_data_node: create_data_node(server_data_nodes[i])
+						server_data_node: create_data_node(server_data_node)
 					});
 				});
 
@@ -1345,13 +1327,15 @@ export function create_client({ target, base, trailing_slash }) {
 					params,
 					branch: await Promise.all(branch_promises),
 					status,
-					error: /** @type {import('../server/page/types').SerializedHttpError} */ (error)
+					error: /** @type {import('../server/page/types').SerializedHttpError} */ (original_error)
 						?.__is_http_error
 						? new HttpError(
-								/** @type {import('../server/page/types').SerializedHttpError} */ (error).status,
-								error.message
+								/** @type {import('../server/page/types').SerializedHttpError} */ (
+									original_error
+								).status,
+								original_error.message
 						  )
-						: error,
+						: original_error,
 					validation_errors,
 					routeId
 				});
@@ -1377,3 +1361,34 @@ export function create_client({ target, base, trailing_slash }) {
 		}
 	};
 }
+
+let data_id = 1;
+
+/**
+ * @param {URL} url
+ * @param {boolean[]} invalid
+ * @returns {Promise<import('types').ServerData>}
+ */
+async function load_data(url, invalid) {
+	const data_url = new URL(url);
+	data_url.pathname = url.pathname.replace(/\/$/, '') + DATA_SUFFIX;
+	data_url.searchParams.set('__invalid', invalid.map((x) => (x ? 'y' : 'n')).join(''));
+	data_url.searchParams.set('__id', String(data_id++));
+
+	// The __data.js file is generated by the server and looks like
+	// `window.__sveltekit_data = ${devalue(data)}`. We do this instead
+	// of `export const data` because modules are cached indefinitely,
+	// and that would cause memory leaks.
+	//
+	// The data is read and deleted in the same tick as the promise
+	// resolves, so it's not vulnerable to race conditions
+	await import(/* @vite-ignore */ data_url.href);
+
+	// @ts-expect-error
+	const server_data = window.__sveltekit_data;
+
+	// @ts-expect-error
+	delete window.__sveltekit_data;
+
+	return server_data;
+}

package/src/runtime/client/parse.js

@@ -2,11 +2,14 @@ import { exec, parse_route_id } from '../../utils/routing.js';
 
 /**
  * @param {import('types').CSRPageNodeLoader[]} nodes
+ * @param {number[]} server_loads
  * @param {typeof import('__GENERATED__/client-manifest.js').dictionary} dictionary
  * @param {Record<string, (param: string) => boolean>} matchers
  * @returns {import('types').CSRRoute[]}
  */
-export function parse(nodes, 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]]) => {
 		const { pattern, names, types } = parse_route_id(id);
 
@@ -18,8 +21,8 @@ export function parse(nodes, dictionary, matchers) {
 				if (match) return exec(match, names, types, matchers);
 			},
 			errors: [1, ...(errors || [])].map((n) => nodes[n]),
-			layouts: [0, ...(layouts || [])].map(create_loader),
-			leaf: create_loader(leaf)
+			layouts: [0, ...(layouts || [])].map(create_layout_loader),
+			leaf: create_leaf_loader(leaf)
 		};
 
 		// bit of a hack, but ensures that layout/error node lists are the same
@@ -37,11 +40,21 @@ export function parse(nodes, dictionary, matchers) {
 	 * @param {number} id
 	 * @returns {[boolean, import('types').CSRPageNodeLoader]}
 	 */
-	function create_loader(id) {
+	function create_leaf_loader(id) {
 		// whether or not the route uses the server data is
 		// encoded using the ones' complement, to save space
 		const uses_server_data = id < 0;
 		if (uses_server_data) id = ~id;
 		return [uses_server_data, nodes[id]];
 	}
+
+	/**
+	 * @param {number | undefined} id
+	 * @returns {[boolean, import('types').CSRPageNodeLoader] | undefined}
+	 */
+	function create_layout_loader(id) {
+		// whether or not the layout uses the server data is
+		// encoded in the layouts array, to save space
+		return id === undefined ? id : [layouts_with_server_load.has(id), nodes[id]];
+	}
 }

package/src/runtime/client/start.js

@@ -20,6 +20,8 @@ export { set_public_env } from '../env-public.js';
  *     node_ids: number[];
  *     params: Record<string, string>;
  *     routeId: string | null;
+ *     data: Array<import('types').ServerDataNode | null>;
+ *     errors: Record<string, any> | null;
  *   };
  * }} opts
  */

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

@@ -27,6 +27,8 @@ export interface Client {
 		node_ids: number[];
 		params: Record<string, string>;
 		routeId: string | null;
+		data: Array<import('types').ServerDataNode | null>;
+		errors: Record<string, any> | null;
 	}) => Promise<void>;
 	_start_router: () => void;
 }

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

@@ -0,0 +1,146 @@
+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, error_to_pojo } from '../utils.js';
+import { normalize_path } from '../../../utils/url.js';
+import { DATA_SUFFIX } from '../../../constants.js';
+
+/**
+ * @param {import('types').RequestEvent} event
+ * @param {import('types').SSRRoute} route
+ * @param {import('types').SSROptions} options
+ * @param {import('types').SSRState} state
+ * @returns {Promise<Response>}
+ */
+export async function render_data(event, route, options, state) {
+	if (!route.page) {
+		// requesting /__data.js should fail for a +server.js
+		return new Response(undefined, {
+			status: 404
+		});
+	}
+
+	try {
+		const node_ids = [...route.page.layouts, route.page.leaf];
+
+		const invalidated =
+			event.url.searchParams
+				.get('__invalid')
+				?.split('')
+				.map((x) => x === 'y') ?? node_ids.map(() => true);
+
+		let aborted = false;
+
+		const url = new URL(event.url);
+		url.pathname = normalize_path(
+			url.pathname.slice(0, -DATA_SUFFIX.length),
+			options.trailing_slash
+		);
+
+		url.searchParams.delete('__invalid');
+		url.searchParams.delete('__id');
+
+		const new_event = { ...event, url };
+
+		const functions = node_ids.map((n, i) => {
+			return once(async () => {
+				try {
+					if (aborted) {
+						return /** @type {import('types').ServerDataSkippedNode} */ ({
+							type: 'skip'
+						});
+					}
+
+					// == because it could be undefined (in dev) or null (in build, because of JSON.stringify)
+					const node = n == undefined ? n : await options.manifest._.nodes[n]();
+					return load_server_data({
+						event: new_event,
+						state,
+						node,
+						parent: async () => {
+							/** @type {Record<string, any>} */
+							const data = {};
+							for (let j = 0; j < i; j += 1) {
+								const parent = /** @type {import('types').ServerDataNode | null} */ (
+									await functions[j]()
+								);
+
+								if (parent) {
+									Object.assign(data, parent.data);
+								}
+							}
+							return data;
+						}
+					});
+				} catch (e) {
+					aborted = true;
+					throw e;
+				}
+			});
+		});
+
+		const promises = functions.map(async (fn, i) => {
+			if (!invalidated[i]) {
+				return /** @type {import('types').ServerDataSkippedNode} */ ({
+					type: 'skip'
+				});
+			}
+
+			return fn();
+		});
+
+		let length = promises.length;
+		const nodes = await Promise.all(
+			promises.map((p, i) =>
+				p.catch((e) => {
+					const error = normalize_error(e);
+
+					if (error instanceof Redirect) {
+						throw error;
+					}
+
+					// Math.min because array isn't guaranteed to resolve in order
+					length = Math.min(length, i + 1);
+
+					if (error instanceof HttpError) {
+						return /** @type {import('types').ServerErrorNode} */ ({
+							type: 'error',
+							httperror: { ...error }
+						});
+					}
+
+					options.handle_error(error, event);
+
+					return /** @type {import('types').ServerErrorNode} */ ({
+						type: 'error',
+						error: error_to_pojo(error, options.get_stack)
+					});
+				})
+			)
+		);
+
+		/** @type {import('types').ServerData} */
+		const server_data = {
+			type: 'data',
+			nodes: nodes.slice(0, length)
+		};
+
+		return data_response(server_data);
+	} 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);
+		} else {
+			// TODO make it clearer that this was an unexpected error
+			return data_response(error_to_pojo(error, options.get_stack));
+		}
+	}
+}