@sveltejs/kit 1.0.0-next.421 → 1.0.0-next.424

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "1.0.0-next.421",
+  "version": "1.0.0-next.424",
   "repository": {
     "type": "git",
     "url": "https://github.com/sveltejs/kit",

package/src/core/sync/write_types.js

@@ -139,22 +139,34 @@ function get_groups(manifest_data, routes_dir) {
 		return group;
 	}
 
-	// first, sort nodes by path length (necessary for finding the nearest layout more efficiently)...
-	const nodes = [...manifest_data.nodes].sort(
-		(n1, n2) =>
+	// first, sort nodes (necessary for finding the nearest layout more efficiently)...
+	const nodes = [...manifest_data.nodes].sort((n1, n2) => {
+		// Sort by path length first...
+		const path_length_diff =
 			/** @type {string} */ (n1.component ?? n1.shared ?? n1.server).split('/').length -
-			/** @type {string} */ (n2.component ?? n2.shared ?? n2.server).split('/').length
-	);
+			/** @type {string} */ (n2.component ?? n2.shared ?? n2.server).split('/').length;
+
+		return (
+			path_length_diff ||
+			// ...on ties, sort named layouts first
+			(path.basename(n1.component || '').includes('-')
+				? -1
+				: path.basename(n2.component || '').includes('-')
+				? 1
+				: 0)
+		);
+	});
 
 	// ...then, populate `directories` with +page/+layout files...
 	for (let i = 0; i < nodes.length; i += 1) {
 		/** @type {Node} */
 		const node = { ...nodes[i] }; // shallow copy so we don't mutate the original when setting parent
 
+		const file_path = /** @type {string} */ (node.component ?? node.shared ?? node.server);
 		// skip default layout/error
-		if (!node?.component?.startsWith(routes_dir)) continue;
+		if (!file_path.startsWith(routes_dir)) continue;
 
-		const parts = /** @type {string} */ (node.component ?? node.shared ?? node.server).split('/');
+		const parts = file_path.split('/');
 
 		const file = /** @type {string} */ (parts.pop());
 		const dir = parts.join('/').slice(routes_dir.length + 1);
@@ -273,7 +285,7 @@ function write_types_for_dir(config, manifest_data, routes_dir, dir, groups, ts)
 		manifest_data.routes.forEach((route) => {
 			if (route.type === 'page' && route.id.startsWith(dir + '/')) {
 				// TODO this is O(n^2), see if we need to speed it up
-				for (const name of parse_route_id(route.id).names) {
+				for (const name of parse_route_id(route.id.slice(dir.length + 1)).names) {
 					layout_params.add(name);
 				}
 			}
@@ -414,7 +426,7 @@ function process_node(ts, node, outdir, params, groups) {
 			written_proxies.push(write(`${outdir}/proxy${basename}`, proxy.code));
 		}
 
-		server_data = get_data_type(node.server, 'load', 'null', proxy);
+		server_data = get_data_type(node.server, 'null', proxy);
 		server_load = `Kit.ServerLoad<${params}, ${get_parent_type('LayoutServerData')}, OutputData>`;
 
 		if (proxy) {
@@ -438,6 +450,8 @@ function process_node(ts, node, outdir, params, groups) {
 		server_data = 'null';
 	}
 
+	const parent_type = get_parent_type('LayoutData');
+
 	if (node.shared) {
 		const content = fs.readFileSync(node.shared, 'utf8');
 		const proxy = tweak_types(ts, content, shared_names);
@@ -445,29 +459,32 @@ function process_node(ts, node, outdir, params, groups) {
 			written_proxies.push(write(`${outdir}/proxy${path.basename(node.shared)}`, proxy.code));
 		}
 
-		data = get_data_type(node.shared, 'load', server_data, proxy);
-		load = `Kit.Load<${params}, ${server_data}, ${get_parent_type('LayoutData')}, OutputData>`;
+		const type = get_data_type(node.shared, `${parent_type} & ${server_data}`, proxy);
+
+		data = `Omit<${parent_type}, keyof ${type}> & ${type}`;
+		load = `Kit.Load<${params}, ${server_data}, ${parent_type}, OutputData>`;
+	} else if (server_data === 'null') {
+		data = parent_type;
 	} else {
-		data = server_data;
+		data = `Omit<${parent_type}, keyof ${server_data}> & ${server_data}`;
 	}
 
 	return { data, server_data, load, server_load, errors, written_proxies };
 
 	/**
 	 * @param {string} file_path
-	 * @param {string} method
 	 * @param {string} fallback
 	 * @param {Proxy} proxy
 	 */
-	function get_data_type(file_path, method, fallback, proxy) {
+	function get_data_type(file_path, fallback, proxy) {
 		if (proxy) {
-			if (proxy.exports.includes(method)) {
+			if (proxy.exports.includes('load')) {
 				// If the file wasn't tweaked, we can use the return type of the original file.
 				// The advantage is that type updates are reflected without saving.
 				const from = proxy.modified
 					? `./proxy${replace_ext_with_js(path.basename(file_path))}`
 					: path_to_original(outdir, file_path);
-				return `Kit.AwaitedProperties<Awaited<ReturnType<typeof import('${from}').${method}>>>`;
+				return `Kit.AwaitedProperties<Awaited<ReturnType<typeof import('${from}').load>>>`;
 			} else {
 				return fallback;
 			}
@@ -713,12 +730,12 @@ export function find_nearest_layout(routes_dir, nodes, start_idx) {
 	}
 
 	let common_path = path.dirname(start_file);
-	if (match[1] === 'layout' && !name) {
+	if (match[1] === 'layout' && !match[2] && !name) {
 		// We are a default layout, so we skip the current level
 		common_path = path.dirname(common_path);
 	}
 
-	for (let i = start_idx; i >= 0; i -= 1) {
+	for (let i = start_idx - 1; i >= 0; i -= 1) {
 		const node = nodes[i];
 		const file = /** @type {string} */ (node.component || node.shared || node.server);
 

package/src/runtime/client/client.js

@@ -268,7 +268,22 @@ export function create_client({ target, base, trailing_slash }) {
 				navigation_result.props.page.url = url;
 			}
 
-			root.$set(navigation_result.props);
+			if (import.meta.env.DEV) {
+				// Nasty hack to silence harmless warnings the user can do nothing about
+				const warn = console.warn;
+				console.warn = (...args) => {
+					if (
+						args.length !== 1 ||
+						!/<(Layout|Page)> was created with unknown prop '(data|errors)'/.test(args[0])
+					) {
+						warn(...args);
+					}
+				};
+				root.$set(navigation_result.props);
+				tick().then(() => (console.warn = warn));
+			} else {
+				root.$set(navigation_result.props);
+			}
 		} else {
 			initialize(navigation_result);
 		}
@@ -347,11 +362,30 @@ export function create_client({ target, base, trailing_slash }) {
 
 		page = result.props.page;
 
-		root = new Root({
-			target,
-			props: { ...result.props, stores },
-			hydrate: true
-		});
+		if (import.meta.env.DEV) {
+			// Nasty hack to silence harmless warnings the user can do nothing about
+			const warn = console.warn;
+			console.warn = (...args) => {
+				if (
+					args.length !== 1 ||
+					!/<(Layout|Page)> was created with unknown prop '(data|errors)'/.test(args[0])
+				) {
+					warn(...args);
+				}
+			};
+			root = new Root({
+				target,
+				props: { ...result.props, stores },
+				hydrate: true
+			});
+			console.warn = warn;
+		} else {
+			root = new Root({
+				target,
+				props: { ...result.props, stores },
+				hydrate: true
+			});
+		}
 
 		if (router_enabled) {
 			const navigation = { from: null, to: new URL(location.href) };
@@ -403,10 +437,10 @@ export function create_client({ target, base, trailing_slash }) {
 		let data = {};
 		let data_changed = false;
 		for (let i = 0; i < filtered.length; i += 1) {
-			Object.assign(data, filtered[i].data);
+			data = { ...data, ...filtered[i].data };
 			// Only set props if the node actually updated. This prevents needless rerenders.
-			if (!current.branch.some((node) => node === filtered[i])) {
-				result.props[`data_${i}`] = filtered[i].data;
+			if (data_changed || !current.branch.some((node) => node === filtered[i])) {
+				result.props[`data_${i}`] = data;
 				data_changed = true;
 			}
 		}

package/src/runtime/server/endpoint.js

@@ -1,3 +1,4 @@
+import { HttpError, Redirect } from '../../index/private.js';
 import { check_method_names, method_not_allowed } from './utils.js';
 
 /**
@@ -29,16 +30,29 @@ export async function render_endpoint(event, route) {
 		return method_not_allowed(mod, method);
 	}
 
-	const response = await handler(
-		/** @type {import('types').RequestEvent<Record<string, any>>} */ (event)
-	);
-
-	if (!(response instanceof Response)) {
-		return new Response(
-			`Invalid response from route ${event.url.pathname}: handler should return a Response object`,
-			{ status: 500 }
+	try {
+		const response = await handler(
+			/** @type {import('types').RequestEvent<Record<string, any>>} */ (event)
 		);
-	}
 
-	return response;
+		if (!(response instanceof Response)) {
+			return new Response(
+				`Invalid response from route ${event.url.pathname}: handler should return a Response object`,
+				{ status: 500 }
+			);
+		}
+
+		return response;
+	} catch (error) {
+		if (error instanceof HttpError) {
+			return new Response(error.message, { status: error.status });
+		} else if (error instanceof Redirect) {
+			return new Response(undefined, {
+				status: error.status,
+				headers: { Location: error.location }
+			});
+		} else {
+			throw error;
+		}
+	}
 }

package/src/runtime/server/index.js

@@ -118,6 +118,9 @@ export async function respond(request, options, state) {
 	/** @type {import('types').ResponseHeaders} */
 	const headers = {};
 
+	/** @type {string[]} */
+	const cookies = [];
+
 	/** @type {import('types').RequestEvent} */
 	const event = {
 		get clientAddress() {
@@ -141,16 +144,26 @@ export async function respond(request, options, state) {
 		setHeaders: (new_headers) => {
 			for (const key in new_headers) {
 				const lower = key.toLowerCase();
+				const value = new_headers[key];
 
-				if (lower in headers) {
-					throw new Error(`"${key}" header is already set`);
-				}
+				if (lower === 'set-cookie') {
+					const new_cookies = /** @type {string[]} */ (Array.isArray(value) ? value : [value]);
 
-				// TODO apply these headers to the response
-				headers[lower] = new_headers[key];
+					for (const cookie of new_cookies) {
+						if (cookies.includes(cookie)) {
+							throw new Error(`"${key}" header already has cookie with same value`);
+						}
 
-				if (state.prerendering && lower === 'cache-control') {
-					state.prerendering.cache = /** @type {string} */ (new_headers[key]);
+						cookies.push(cookie);
+					}
+				} else if (lower in headers) {
+					throw new Error(`"${key}" header is already set`);
+				} else {
+					headers[lower] = value;
+
+					if (state.prerendering && lower === 'cache-control') {
+						state.prerendering.cache = /** @type {string} */ (value);
+					}
 				}
 			}
 		},
@@ -254,6 +267,7 @@ export async function respond(request, options, state) {
 									return {
 										// TODO return `uses`, so we can reuse server data effectively
 										data: await load_server_data({
+											dev: options.dev,
 											event,
 											node,
 											parent: async () => {
@@ -312,19 +326,19 @@ export async function respond(request, options, state) {
 								: await render_page(event, route, options, state, resolve_opts);
 					}
 
-					for (const key in headers) {
-						const value = headers[key];
-						if (key === 'set-cookie') {
-							for (const cookie of Array.isArray(value) ? value : [value]) {
-								response.headers.append(key, /** @type {string} */ (cookie));
-							}
-						} else if (!is_data_request) {
-							// we only want to set cookies on __data.json requests, we don't
-							// want to cache stuff erroneously etc
+					if (!is_data_request) {
+						// we only want to set cookies on __data.json requests, we don't
+						// want to cache stuff erroneously etc
+						for (const key in headers) {
+							const value = headers[key];
 							response.headers.set(key, /** @type {string} */ (value));
 						}
 					}
 
+					for (const cookie of cookies) {
+						response.headers.append('set-cookie', cookie);
+					}
+
 					// respond with 304 if etag matches
 					if (response.status === 200 && response.headers.has('etag')) {
 						let if_none_match_value = request.headers.get('if-none-match');

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

@@ -36,7 +36,11 @@ export async function render_page(event, route, options, state, resolve_opts) {
 		'application/json'
 	]);
 
-	if (accept === 'application/json') {
+	if (
+		accept === 'application/json' &&
+		event.request.method !== 'GET' &&
+		event.request.method !== 'HEAD'
+	) {
 		const node = await options.manifest._.nodes[route.leaf]();
 		if (node.server) {
 			return handle_json_request(event, options, node.server);
@@ -157,6 +161,7 @@ export async function render_page(event, route, options, state, resolve_opts) {
 					}
 
 					return await load_server_data({
+						dev: options.dev,
 						event,
 						node,
 						parent: async () => {
@@ -346,8 +351,8 @@ function get_page_config(leaf, options) {
  * @param {import('types').SSRNode['server']} mod
  */
 export async function handle_json_request(event, options, mod) {
-	const method = /** @type {import('types').HttpMethod} */ (event.request.method);
-	const handler = mod[method === 'HEAD' || method === 'GET' ? 'load' : method];
+	const method = /** @type {'POST' | 'PUT' | 'PATCH' | 'DELETE'} */ (event.request.method);
+	const handler = mod[method];
 
 	if (!handler) {
 		return method_not_allowed(mod, method);
@@ -357,14 +362,6 @@ export async function handle_json_request(event, options, mod) {
 		// @ts-ignore
 		const result = await handler.call(null, event);
 
-		if (method === 'HEAD') {
-			return new Response();
-		}
-
-		if (method === 'GET') {
-			return json(result);
-		}
-
 		if (result?.errors) {
 			// @ts-ignore
 			return json({ errors: result.errors }, { status: result.status || 400 });

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

@@ -3,12 +3,13 @@ import { LoadURL, PrerenderingURL } from '../../../utils/url.js';
 /**
  * Calls the user's `load` function.
  * @param {{
+ *   dev: boolean;
  *   event: import('types').RequestEvent;
  *   node: import('types').SSRNode | undefined;
  *   parent: () => Promise<Record<string, any>>;
  * }} opts
  */
-export async function load_server_data({ event, node, parent }) {
+export async function load_server_data({ dev, event, node, parent }) {
 	if (!node?.server) return null;
 
 	const server_data = await node.server.load?.call(null, {
@@ -27,7 +28,13 @@ export async function load_server_data({ event, node, parent }) {
 		url: event.url
 	});
 
-	return server_data ? unwrap_promises(server_data) : null;
+	const result = server_data ? await unwrap_promises(server_data) : null;
+
+	if (dev) {
+		check_serializability(result, /** @type {string} */ (node.server_id), 'data');
+	}
+
+	return result;
 }
 
 /**
@@ -79,3 +86,42 @@ async function unwrap_promises(object) {
 
 	return unwrapped;
 }
+
+/**
+ * Check that the data can safely be serialized to JSON
+ * @param {any} value
+ * @param {string} id
+ * @param {string} path
+ */
+function check_serializability(value, id, path) {
+	const type = typeof value;
+
+	if (type === 'string' || type === 'boolean' || type === 'number' || type === 'undefined') {
+		// primitives are fine
+		return;
+	}
+
+	if (type === 'object') {
+		// nulls are fine...
+		if (!value) return;
+
+		// ...so are plain arrays...
+		if (Array.isArray(value)) {
+			value.forEach((child, i) => {
+				check_serializability(child, id, `${path}[${i}]`);
+			});
+			return;
+		}
+
+		// ...and objects
+		const tag = Object.prototype.toString.call(value);
+		if (tag === '[object Object]') {
+			for (const key in value) {
+				check_serializability(value[key], id, `${path}.${key}`);
+			}
+			return;
+		}
+	}
+
+	throw new Error(`${path} returned from 'load' in ${id} cannot be serialized as JSON`);
+}

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

@@ -83,18 +83,31 @@ export async function render_response({
 				navigating: writable(null),
 				updated
 			},
-			/** @type {import('types').Page} */
-			page: {
-				error,
-				params: /** @type {Record<string, any>} */ (event.params),
-				routeId: event.routeId,
-				status,
-				url: state.prerendering ? new PrerenderingURL(event.url) : event.url,
-				data: branch.reduce((acc, { data }) => (Object.assign(acc, data), acc), {})
-			},
 			components: await Promise.all(branch.map(({ node }) => node.component()))
 		};
 
+		let data = {};
+
+		// props_n (instead of props[n]) makes it easy to avoid
+		// unnecessary updates for layout components
+		for (let i = 0; i < branch.length; i += 1) {
+			data = { ...data, ...branch[i].data };
+			props[`data_${i}`] = data;
+		}
+
+		props.page = {
+			error,
+			params: /** @type {Record<string, any>} */ (event.params),
+			routeId: event.routeId,
+			status,
+			url: state.prerendering ? new PrerenderingURL(event.url) : event.url,
+			data
+		};
+
+		if (validation_errors) {
+			props.errors = validation_errors;
+		}
+
 		// TODO remove this for 1.0
 		/**
 		 * @param {string} property
@@ -112,16 +125,6 @@ export async function render_response({
 		print_error('path', 'pathname');
 		print_error('query', 'searchParams');
 
-		// props_n (instead of props[n]) makes it easy to avoid
-		// unnecessary updates for layout components
-		for (let i = 0; i < branch.length; i += 1) {
-			props[`data_${i}`] = branch[i].data;
-		}
-
-		if (validation_errors) {
-			props.errors = validation_errors;
-		}
-
 		rendered = options.root.render(props);
 
 		for (const { node } of branch) {

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

@@ -35,6 +35,7 @@ export async function respond_with_error({ event, options, state, status, error,
 			const default_layout = await options.manifest._.nodes[0](); // 0 is always the root layout
 
 			const server_data_promise = load_server_data({
+				dev: options.dev,
 				event,
 				node: default_layout,
 				parent: async () => ({})

package/src/vite/build/utils.js

@@ -123,6 +123,9 @@ export function get_default_build_config({ config, input, ssr, outDir }) {
 		resolve: {
 			alias: get_aliases(config.kit)
 		},
+		optimizeDeps: {
+			exclude: ['@sveltejs/kit']
+		},
 		ssr: {
 			noExternal: ['@sveltejs/kit']
 		},

package/src/vite/dev/index.js

@@ -119,6 +119,7 @@ export async function dev(vite, vite_config, svelte_config, illegal_imports) {
 						if (node.server) {
 							const { module } = await resolve(node.server);
 							result.server = module;
+							result.server_id = node.server;
 						}
 
 						// in dev we inline all styles to avoid FOUC. this gets populated lazily so that

package/src/vite/index.js

@@ -273,6 +273,9 @@ function kit() {
 					// under different IDs, which breaks a bunch of stuff
 					// https://github.com/vitejs/vite/pull/9296
 					external: ['@sveltejs/kit']
+				},
+				optimizeDeps: {
+					exclude: ['@sveltejs/kit']
 				}
 			};
 

package/src/vite/utils.js

@@ -2,6 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import { loadConfigFromFile, loadEnv, normalizePath } from 'vite';
 import { runtime_directory } from '../core/utils.js';
+import { posixify } from '../utils/filesystem.js';
 
 /**
  * @param {import('vite').ResolvedConfig} config
@@ -113,18 +114,22 @@ export function get_aliases(config) {
 	];
 
 	for (let [key, value] of Object.entries(config.alias)) {
+		value = posixify(value);
 		if (value.endsWith('/*')) {
 			value = value.slice(0, -2);
 		}
 		if (key.endsWith('/*')) {
 			// Doing just `{ find: key.slice(0, -2) ,..}` would mean `import .. from "key"` would also be matched, which we don't want
 			alias.push({
-				find: new RegExp(`^${key.slice(0, -2)}\\/(.+)$`),
+				find: new RegExp(`^${escape_for_regexp(key.slice(0, -2))}\\/(.+)$`),
 				replacement: `${path.resolve(value)}/$1`
 			});
 		} else if (key + '/*' in config.alias) {
 			// key and key/* both exist -> the replacement for key needs to happen _only_ on import .. from "key"
-			alias.push({ find: new RegExp(`^${key}$`), replacement: path.resolve(value) });
+			alias.push({
+				find: new RegExp(`^${escape_for_regexp(key)}$`),
+				replacement: path.resolve(value)
+			});
 		} else {
 			alias.push({ find: key, replacement: path.resolve(value) });
 		}
@@ -133,6 +138,13 @@ export function get_aliases(config) {
 	return alias;
 }
 
+/**
+ * @param {string} str
+ */
+function escape_for_regexp(str) {
+	return str.replace(/[.*+?^${}()|[\]\\]/g, (match) => '\\' + match);
+}
+
 /**
  * Given an entry point like [cwd]/src/hooks, returns a filename like [cwd]/src/hooks.js or [cwd]/src/hooks/index.js
  * @param {string} entry

package/types/index.d.ts

@@ -312,7 +312,7 @@ export interface Action<
 	Params extends Partial<Record<string, string>> = Partial<Record<string, string>>
 > {
 	(event: RequestEvent<Params>): MaybePromise<
-		| { status?: number; errors: Record<string, string>; location?: never }
+		| { status?: number; errors: Record<string, any>; location?: never }
 		| { status?: never; errors?: never; location: string }
 		| void
 	>;

package/types/internal.d.ts

@@ -221,6 +221,9 @@ export interface SSRNode {
 		PUT?: Action;
 		DELETE?: Action;
 	};
+
+	// store this in dev so we can print serialization errors
+	server_id?: string;
 }
 
 export type SSRNodeLoader = () => Promise<SSRNode>;