@sveltejs/kit 1.0.0-next.476 → 1.0.0-next.479

package/src/exports/vite/utils.js

@@ -1,27 +1,230 @@
-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';
 
-const illegal_imports = new Set([
-	'/@id/__x00__$env/dynamic/private', //dev
-	'\0$env/dynamic/private', // prod
-	'/@id/__x00__$env/static/private', // dev
-	'\0$env/static/private' // prod
-]);
+class IllegalModuleGuard {
+	/** @type {string} */
+	#lib_dir;
 
-/** @param {string} id */
-function is_illegal(id) {
-	if (illegal_imports.has(id)) return true;
+	/** @type {string} */
+	#server_dir;
 
-	// files outside the project root are ignored
-	if (!id.startsWith(normalizePath(process.cwd()))) return false;
+	/** @type {string} */
+	#node_modules_dir = normalizePath(path.resolve(process.cwd(), 'node_modules'));
 
-	// so are files inside node_modules
-	if (id.startsWith(normalizePath(node_modules_dir))) return false;
+	/** @type {string} */
+	#cwd = normalizePath(process.cwd());
 
-	return /.*\.server\..+/.test(path.basename(id));
+	/** @type {Set<string>} */
+	#illegal_imports = new Set([
+		'/@id/__x00__$env/dynamic/private', //dev
+		'\0$env/dynamic/private', // prod
+		'/@id/__x00__$env/static/private', // dev
+		'\0$env/static/private' // prod
+	]);
+
+	/** @type {Array<import('types').ImportNode>} */
+	#chain = [];
+
+	/**
+	 * @param {string} lib_dir
+	 */
+	constructor(lib_dir) {
+		this.#lib_dir = normalizePath(lib_dir);
+		this.#server_dir = normalizePath(path.resolve(lib_dir, 'server'));
+	}
+
+	/**
+	 * @param {import('types').ImportNode} node
+	 * @returns {void}
+	 */
+	assert_legal(node) {
+		this.#chain.push(node);
+		for (const child of node.children) {
+			if (this.#is_illegal(child.name)) {
+				this.#chain.push(child);
+				throw new Error(this.#format_illegal_import_chain(this.#chain));
+			}
+			this.assert_legal(child);
+		}
+		this.#chain.pop();
+	}
+
+	/**
+	 * `true` if the provided ID represents a server-only module, else `false`.
+	 * @param {string} module_id
+	 * @returns {boolean}
+	 */
+	#is_illegal(module_id) {
+		if (this.#is_kit_illegal(module_id) || this.#is_user_illegal(module_id)) return true;
+		return false;
+	}
+
+	/**
+	 * `true` if the provided ID represents a Kit-defined server-only module, else `false`.
+	 * @param {string} module_id
+	 * @returns {boolean}
+	 */
+	#is_kit_illegal(module_id) {
+		return this.#illegal_imports.has(module_id);
+	}
+
+	/**
+	 * `true` if the provided ID represents a user-defined server-only module, else `false`.
+	 * @param {string} module_id
+	 * @returns {boolean}
+	 */
+	#is_user_illegal(module_id) {
+		if (module_id.startsWith(this.#server_dir)) return true;
+
+		// files outside the project root are ignored
+		if (!module_id.startsWith(this.#cwd)) return false;
+
+		// so are files inside node_modules
+		if (module_id.startsWith(this.#node_modules_dir)) return false;
+
+		return /.*\.server\..+/.test(path.basename(module_id));
+	}
+
+	/**
+	 * @param {string} str
+	 * @param {number} times
+	 */
+	#repeat(str, times) {
+		return new Array(times + 1).join(str);
+	}
+
+	/**
+	 * Create a formatted error for an illegal import.
+	 * @param {Array<{name: string, dynamic: boolean}>} stack
+	 */
+	#format_illegal_import_chain(stack) {
+		const dev_virtual_prefix = '/@id/__x00__';
+		const prod_virtual_prefix = '\0';
+
+		stack = stack.map((file) => {
+			if (file.name.startsWith(dev_virtual_prefix)) {
+				return { ...file, name: file.name.replace(dev_virtual_prefix, '') };
+			}
+			if (file.name.startsWith(prod_virtual_prefix)) {
+				return { ...file, name: file.name.replace(prod_virtual_prefix, '') };
+			}
+			if (file.name.startsWith(this.#lib_dir)) {
+				return { ...file, name: file.name.replace(this.#lib_dir, '$lib') };
+			}
+
+			return { ...file, name: path.relative(process.cwd(), file.name) };
+		});
+
+		const pyramid = stack
+			.map(
+				(file, i) =>
+					`${this.#repeat(' ', i * 2)}- ${file.name} ${
+						file.dynamic ? '(imported by parent dynamically)' : ''
+					}`
+			)
+			.join('\n');
+
+		return `Cannot import ${stack.at(-1)?.name} into client-side code:\n${pyramid}`;
+	}
+}
+
+class RollupImportGraph {
+	/** @type {(id: string) => import('rollup').ModuleInfo | null} */
+	#node_getter;
+
+	/** @type {import('rollup').ModuleInfo} */
+	#module_info;
+
+	/** @type {string} */
+	name;
+
+	/** @type {boolean} */
+	dynamic;
+
+	/** @type {Set<string>} */
+	#seen;
+
+	/**
+	 * @param {(id: string) => import('rollup').ModuleInfo | null} node_getter
+	 * @param {import('rollup').ModuleInfo} node
+	 * @param {boolean} dynamic
+	 * @param {Set<string>} seen
+	 */
+	constructor(node_getter, node, dynamic = false, seen = new Set()) {
+		this.#node_getter = node_getter;
+		this.#module_info = node;
+		this.name = remove_query_from_path(normalizePath(node.id));
+		this.dynamic = dynamic;
+		this.#seen = seen;
+		void (/** @type {import('types').ImportNode} */ (this));
+	}
+
+	get children() {
+		return this.#children();
+	}
+
+	*#children() {
+		if (this.#seen.has(this.name)) return;
+		this.#seen.add(this.name);
+		for (const id of this.#module_info.importedIds) {
+			const child = this.#node_getter(id);
+			if (child === null) return;
+			yield new RollupImportGraph(this.#node_getter, child, false, this.#seen);
+		}
+		for (const id of this.#module_info.dynamicallyImportedIds) {
+			const child = this.#node_getter(id);
+			if (child === null) return;
+			yield new RollupImportGraph(this.#node_getter, child, true, this.#seen);
+		}
+	}
+}
+
+class ViteImportGraph {
+	/** @type {Set<string>} */
+	#module_types;
+
+	/** @type {import('vite').ModuleNode} */
+	#module_info;
+
+	/** @type {string} */
+	name;
+
+	/** @type {Set<string>} */
+	#seen;
+
+	/**
+	 * @param {Set<string>} module_types Module types to analyze, eg '.js', '.ts', etc.
+	 * @param {import('vite').ModuleNode} node
+	 * @param {Set<string>} seen
+	 */
+	constructor(module_types, node, seen = new Set()) {
+		this.#module_types = module_types;
+		this.#module_info = node;
+		this.name = remove_query_from_path(normalizePath(node.id ?? ''));
+		this.#seen = seen;
+		void (/** @type {import('types').ImportNode} */ (this));
+	}
+
+	get dynamic() {
+		return false;
+	}
+
+	get children() {
+		return this.#children();
+	}
+
+	*#children() {
+		if (this.#seen.has(this.name)) return;
+		this.#seen.add(this.name);
+		for (const child of this.#module_info.importedModules) {
+			if (!this.#module_types.has(path.extname(this.name))) {
+				continue;
+			}
+			yield new ViteImportGraph(this.#module_types, child, this.#seen);
+		}
+	}
 }
 
 /**
@@ -163,80 +366,6 @@ 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
- * @returns {string|null}
- */
-export function resolve_entry(entry) {
-	if (fs.existsSync(entry)) {
-		const stats = fs.statSync(entry);
-		if (stats.isDirectory()) {
-			return resolve_entry(path.join(entry, 'index'));
-		}
-
-		return entry;
-	} else {
-		const dir = path.dirname(entry);
-
-		if (fs.existsSync(dir)) {
-			const base = path.basename(entry);
-			const files = fs.readdirSync(dir);
-
-			const found = files.find((file) => file.replace(/\.[^.]+$/, '') === base);
-
-			if (found) return path.join(dir, found);
-		}
-	}
-
-	return null;
-}
-
-/**
- * @param {string} str
- * @param {number} times
- */
-function repeat(str, times) {
-	return new Array(times + 1).join(str);
-}
-
-/**
- * Create a formatted error for an illegal import.
- * @param {Array<{name: string, dynamic: boolean}>} stack
- * @param {string} lib_dir
- */
-function format_illegal_import_chain(stack, lib_dir) {
-	const dev_virtual_prefix = '/@id/__x00__';
-	const prod_virtual_prefix = '\0';
-
-	stack = stack.map((file) => {
-		if (file.name.startsWith(dev_virtual_prefix)) {
-			return { ...file, name: file.name.replace(dev_virtual_prefix, '') };
-		}
-		if (file.name.startsWith(prod_virtual_prefix)) {
-			return { ...file, name: file.name.replace(prod_virtual_prefix, '') };
-		}
-		if (file.name.startsWith(lib_dir)) {
-			return { ...file, name: file.name.replace(lib_dir, '$lib') };
-		}
-
-		return { ...file, name: path.relative(process.cwd(), file.name) };
-	});
-
-	const pyramid = stack
-		.map(
-			(file, i) =>
-				`${repeat(' ', i * 2)}- ${file.name} ${
-					file.dynamic ? '(imported by parent dynamically)' : ''
-				}`
-		)
-		.join('\n');
-
-	return `Cannot import ${stack.at(-1)?.name} into client-side code:\n${pyramid}`;
-}
-
-const node_modules_dir = path.resolve(process.cwd(), 'node_modules');
-
 /**
  * Load environment variables from process.env and .env files
  * @param {import('types').ValidatedKitConfig['env']} env_config
@@ -251,16 +380,6 @@ export function get_env(env_config, mode) {
 	};
 }
 
-/**
- * @param {(id: string) => import('rollup').ModuleInfo | null} node_getter
- * @param {import('rollup').ModuleInfo} node
- * @param {string} lib_dir
- */
-export function prevent_illegal_rollup_imports(node_getter, node, lib_dir) {
-	const chain = find_illegal_rollup_imports(node_getter, node, false);
-	if (chain) throw new Error(format_illegal_import_chain(chain, lib_dir));
-}
-
 const query_pattern = /\?.*$/s;
 
 /** @param {string} path */
@@ -268,37 +387,6 @@ function remove_query_from_path(path) {
 	return path.replace(query_pattern, '');
 }
 
-/**
- * @param {(id: string) => import('rollup').ModuleInfo | null} node_getter
- * @param {import('rollup').ModuleInfo} node
- * @param {boolean} dynamic
- * @param {Set<string>} seen
- * @returns {Array<import('types').ImportNode> | null}
- */
-const find_illegal_rollup_imports = (node_getter, node, dynamic, seen = new Set()) => {
-	const name = remove_query_from_path(normalizePath(node.id));
-	if (seen.has(name)) return null;
-	seen.add(name);
-
-	if (is_illegal(name)) {
-		return [{ name, dynamic }];
-	}
-
-	for (const id of node.importedIds) {
-		const child = node_getter(id);
-		const chain = child && find_illegal_rollup_imports(node_getter, child, false, seen);
-		if (chain) return [{ name, dynamic }, ...chain];
-	}
-
-	for (const id of node.dynamicallyImportedIds) {
-		const child = node_getter(id);
-		const chain = child && find_illegal_rollup_imports(node_getter, child, true, seen);
-		if (chain) return [{ name, dynamic }, ...chain];
-	}
-
-	return null;
-};
-
 /**
  * Vite does some weird things with import trees in dev
  * for example, a Tailwind app.css will appear to import
@@ -308,6 +396,7 @@ const find_illegal_rollup_imports = (node_getter, node, dynamic, seen = new Set(
  */
 const get_module_types = (config_module_types) => {
 	return new Set([
+		'',
 		'.ts',
 		'.js',
 		'.svelte',
@@ -324,38 +413,26 @@ const get_module_types = (config_module_types) => {
 
 /**
  * Throw an error if a private module is imported from a client-side node.
- * @param {import('vite').ModuleNode} node
+ * @param {(id: string) => import('rollup').ModuleInfo | null} node_getter
+ * @param {import('rollup').ModuleInfo} node
  * @param {string} lib_dir
- * @param {Iterable<string>} module_types File extensions to analyze in addition to the defaults: `.ts`, `.js`, etc.
+ * @returns {void}
  */
-export function prevent_illegal_vite_imports(node, lib_dir, module_types) {
-	const chain = find_illegal_vite_imports(node, get_module_types(module_types));
-	if (chain) throw new Error(format_illegal_import_chain(chain, lib_dir));
+export function prevent_illegal_rollup_imports(node_getter, node, lib_dir) {
+	const graph = new RollupImportGraph(node_getter, node);
+	const guard = new IllegalModuleGuard(lib_dir);
+	guard.assert_legal(graph);
 }
 
 /**
+ * Throw an error if a private module is imported from a client-side node.
  * @param {import('vite').ModuleNode} node
- * @param {Set<string>} module_types File extensions to analyze: `.ts`, `.js`, etc.
- * @param {Set<string>} seen
- * @returns {Array<import('types').ImportNode> | null}
+ * @param {string} lib_dir
+ * @param {Iterable<string>} module_types File extensions to analyze in addition to the defaults: `.ts`, `.js`, etc.
+ * @returns {void}
  */
-function find_illegal_vite_imports(node, module_types, seen = new Set()) {
-	if (!node.id) return null; // TODO when does this happen?
-	const name = remove_query_from_path(normalizePath(node.id));
-
-	if (path.extname(name) !== '' && (seen.has(name) || !module_types.has(path.extname(name)))) {
-		return null;
-	}
-	seen.add(name);
-
-	if (is_illegal(name)) {
-		return [{ name, dynamic: false }];
-	}
-
-	for (const child of node.importedModules) {
-		const chain = child && find_illegal_vite_imports(child, module_types, seen);
-		if (chain) return [{ name, dynamic: false }, ...chain];
-	}
-
-	return null;
+export function prevent_illegal_vite_imports(node, lib_dir, module_types) {
+	const graph = new ViteImportGraph(get_module_types(module_types), node);
+	const guard = new IllegalModuleGuard(lib_dir);
+	guard.assert_legal(graph);
 }

package/src/runtime/app/forms.js

@@ -16,46 +16,43 @@ const ssr = import.meta.env.SSR;
 export const applyAction = ssr ? guard('applyAction') : client.apply_action;
 
 /** @type {import('$app/forms').enhance} */
-export function enhance(element, submit = () => {}) {
+export function enhance(form, submit = () => {}) {
 	/**
 	 * @param {{
-	 *   element: HTMLFormElement | HTMLButtonElement | HTMLInputElement;
-	 *   form: HTMLFormElement;
+	 *   action: string;
 	 *   result: import('types').ActionResult;
 	 * }} opts
 	 */
-	const fallback_callback = async ({ element, form, result }) => {
+	const fallback_callback = async ({ action, result }) => {
 		if (result.type === 'success') {
 			await invalidateAll();
 		}
 
-		const action = element.formAction ?? form.action;
-
 		if (location.origin + location.pathname === action.split('?')[0]) {
 			applyAction(result);
 		}
 	};
 
-	const form =
-		element instanceof HTMLFormElement ? element : /** @type {HTMLFormElement} */ (element.form);
-	if (!form) throw new Error('Element is not associated with a form');
-
 	/** @param {SubmitEvent} event */
 	async function handle_submit(event) {
 		event.preventDefault();
 
-		const action = element.formAction ?? form.action;
-
+		// We can't do submitter.formAction directly because that property is always set
+		const action = event.submitter?.hasAttribute('formaction')
+			? /** @type {HTMLButtonElement | HTMLInputElement} */ (event.submitter).formAction
+			: form.action;
 		const data = new FormData(form);
+		const controller = new AbortController();
 
 		let cancelled = false;
 		const cancel = () => (cancelled = true);
 
 		const callback =
 			submit({
-				element,
-				data,
+				action,
 				cancel,
+				controller,
+				data,
 				form
 			}) ?? fallback_callback;
 		if (cancelled) return;
@@ -69,16 +66,18 @@ export function enhance(element, submit = () => {}) {
 				headers: {
 					accept: 'application/json'
 				},
-				body: data
+				body: data,
+				signal: controller.signal
 			});
 
 			result = await response.json();
 		} catch (error) {
+			if (/** @type {any} */ (error)?.name === 'AbortError') return;
 			result = { type: 'error', error };
 		}
 
 		callback({
-			element,
+			action,
 			data,
 			form,
 			// @ts-expect-error generic constraints stuff we don't care about

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

@@ -1,5 +1,5 @@
 declare module '__GENERATED__/client-manifest.js' {
-	import { CSRPageNodeLoader, ParamMatcher } from 'types';
+	import { CSRPageNodeLoader, ClientHooks, ParamMatcher } from 'types';
 
 	/**
 	 * A list of all the error/layout/page nodes used in the app
@@ -21,4 +21,6 @@ declare module '__GENERATED__/client-manifest.js' {
 	export const dictionary: Record<string, [leaf: number, layouts: number[], errors?: number[]]>;
 
 	export const matchers: Record<string, ParamMatcher>;
+
+	export const hooks: ClientHooks;
 }

package/src/runtime/client/client.js

@@ -4,10 +4,9 @@ import { make_trackable, decode_params, normalize_path } from '../../utils/url.j
 import { find_anchor, get_base_uri, scroll_state } from './utils.js';
 import { lock_fetch, unlock_fetch, initial_fetch, subsequent_fetch } from './fetcher.js';
 import { parse } from './parse.js';
-import { error } from '../../exports/index.js';
 
 import Root from '__GENERATED__/root.svelte';
-import { nodes, server_loads, dictionary, matchers } from '__GENERATED__/client-manifest.js';
+import { nodes, server_loads, dictionary, matchers, hooks } from '__GENERATED__/client-manifest.js';
 import { HttpError, Redirect } from '../control.js';
 import { stores } from './singletons.js';
 import { DATA_SUFFIX } from '../../constants.js';
@@ -386,7 +385,7 @@ export function create_client({ target, base, trailing_slash }) {
 	 *   params: Record<string, string>;
 	 *   branch: Array<import('./types').BranchNode | undefined>;
 	 *   status: number;
-	 *   error: HttpError | Error | null;
+	 *   error: App.PageError | null;
 	 *   route: import('types').CSRRoute | null;
 	 *   form?: Record<string, any> | null;
 	 * }} opts
@@ -756,12 +755,8 @@ export function create_client({ target, base, trailing_slash }) {
 			parent_changed = true;
 
 			if (server_data_node?.type === 'error') {
-				if (server_data_node.httperror) {
-					// reconstruct as an HttpError
-					throw error(server_data_node.httperror.status, server_data_node.httperror.message);
-				} else {
-					throw server_data_node.error;
-				}
+				// rethrow and catch below
+				throw server_data_node;
 			}
 
 			return load_node({
@@ -790,17 +785,29 @@ export function create_client({ target, base, trailing_slash }) {
 			if (loaders[i]) {
 				try {
 					branch.push(await branch_promises[i]);
-				} catch (e) {
-					const error = normalize_error(e);
-
-					if (error instanceof Redirect) {
+				} catch (err) {
+					if (err instanceof Redirect) {
 						return {
 							type: 'redirect',
-							location: error.location
+							location: err.location
 						};
 					}
 
-					const status = e instanceof HttpError ? e.status : 500;
+					let status = 500;
+					/** @type {App.PageError} */
+					let error;
+
+					if (server_data_nodes?.includes(/** @type {import('types').ServerErrorNode} */ (err))) {
+						// this is the server error rethrown above, reconstruct but don't invoke
+						// the client error handler; it should've already been handled on the server
+						status = /** @type {import('types').ServerErrorNode} */ (err).status ?? status;
+						error = /** @type {import('types').ServerErrorNode} */ (err).error;
+					} else if (err instanceof HttpError) {
+						status = err.status;
+						error = err.body;
+					} else {
+						error = handle_error(err, { params, url, routeId: route.id });
+					}
 
 					while (i--) {
 						if (errors[i]) {
@@ -920,7 +927,10 @@ export function create_client({ target, base, trailing_slash }) {
 			params,
 			branch: [root_layout, root_error],
 			status,
-			error,
+			error:
+				error instanceof HttpError
+					? error.body
+					: handle_error(error, { url, params, routeId: null }),
 			route: null
 		});
 	}
@@ -1395,7 +1405,7 @@ export function create_client({ target, base, trailing_slash }) {
 
 		_hydrate: async ({
 			status,
-			error: original_error, // TODO get rid of this
+			error,
 			node_ids,
 			params,
 			routeId,
@@ -1432,15 +1442,7 @@ export function create_client({ target, base, trailing_slash }) {
 					params,
 					branch: await Promise.all(branch_promises),
 					status,
-					error: /** @type {import('../server/page/types').SerializedHttpError} */ (original_error)
-						?.__is_http_error
-						? new HttpError(
-								/** @type {import('../server/page/types').SerializedHttpError} */ (
-									original_error
-								).status,
-								original_error.message
-						  )
-						: original_error,
+					error,
 					form,
 					route: routes.find((route) => route.id === routeId) ?? null
 				});
@@ -1498,6 +1500,15 @@ async function load_data(url, invalid) {
 	return server_data;
 }
 
+/**
+ * @param {unknown} error
+ * @param {import('types').NavigationEvent} event
+ * @returns {App.PageError}
+ */
+function handle_error(error, event) {
+	return hooks.handleError({ error, event }) ?? /** @type {any} */ ({ message: 'Internal Error' });
+}
+
 // TODO remove for 1.0
 const properties = [
 	'hash',

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

@@ -9,8 +9,6 @@ import {
 	prefetchRoutes
 } from '$app/navigation';
 import { CSRPageNode, CSRPageNodeLoader, CSRRoute, Uses } from 'types';
-import { HttpError } from '../control.js';
-import { SerializedHttpError } from '../server/page/types.js';
 
 export interface Client {
 	// public API, exposed via $app/navigation
@@ -27,7 +25,7 @@ export interface Client {
 	// private API
 	_hydrate: (opts: {
 		status: number;
-		error: Error | SerializedHttpError;
+		error: App.PageError;
 		node_ids: number[];
 		params: Record<string, string>;
 		routeId: string | null;
@@ -79,7 +77,7 @@ export interface DataNode {
 
 export interface NavigationState {
 	branch: Array<BranchNode | undefined>;
-	error: HttpError | Error | null;
+	error: App.PageError | null;
 	params: Record<string, string>;
 	route: CSRRoute | null;
 	session_id: number;