@sveltejs/kit 3.0.0-next.2 → 3.0.0-next.20

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

@@ -1,40 +1,53 @@
-/** @import { RequestEvent } from '@sveltejs/kit' */
-/** @import { PrerenderOption, UniversalNode } from 'types' */
+/** @import { RequestEvent, SSRManifest } from '@sveltejs/kit' */
+/** @import { EnvironmentModuleNode, ErrorPayload, ResolvedConfig, ViteDevServer } from 'vite' */
+/** @import { ManifestData, PrerenderOption, RemoteChunk, ServerModule, SSRNode, UniversalNode, ValidatedConfig } from 'types' */
+import process from 'node:process';
 import fs from 'node:fs';
 import path from 'node:path';
 import { URL } from 'node:url';
 import { AsyncLocalStorage } from 'node:async_hooks';
 import { styleText } from 'node:util';
 import sirv from 'sirv';
-import { isCSSRequest, loadEnv, buildErrorMessage } from 'vite';
 import { createReadableStream, getRequest, setResponse } from '../../../exports/node/index.js';
 import { coalesce_to_error } from '../../../utils/error.js';
 import { resolve_entry } from '../../../utils/filesystem.js';
+import { load_and_validate_params } from '../../../utils/params.js';
 import { from_fs, to_fs } from '../../../utils/vite.js';
 import { posixify } from '../../../utils/os.js';
 import { load_error_page } from '../../../core/config/index.js';
-import { SVELTE_KIT_ASSETS } from '../../../constants.js';
+import { SRC_ROOT, SVELTE_KIT_ASSETS } from '../../../constants.js';
 import * as sync from '../../../core/sync/sync.js';
 import { get_mime_lookup, get_runtime_base } from '../../../core/utils.js';
+import '../../../utils/mime.js'; // extend mrmime with additional types (affects sirv too)
 import { compact } from '../../../utils/array.js';
-import { is_chrome_devtools_request, not_found } from '../utils.js';
+import { is_chrome_devtools_request, is_remote_module, not_found } from '../utils.js';
 import { SCHEME } from '../../../utils/url.js';
 import { check_feature } from '../../../utils/features.js';
 import { escape_html } from '../../../utils/escape.js';
+import { get_runner } from '../../../runner.js';
 
 // vite-specifc queries that we should skip handling for css urls
 const vite_css_query_regex = /(?:\?|&)(?:raw|url|inline)(?:&|$)/;
 
 /**
- * @param {import('vite').ViteDevServer} vite
- * @param {import('vite').ResolvedConfig} vite_config
- * @param {import('types').ValidatedConfig} svelte_config
- * @param {() => Array<{ hash: string, file: string }>} get_remotes
+ * @param {typeof import('vite')} vite the peer resolved vite module
+ * @param {ViteDevServer} vite_dev_server
+ * @param {ResolvedConfig} vite_config
+ * @param {ValidatedConfig} svelte_config
+ * @param {() => RemoteChunk[]} get_remotes
  * @param {string} root The project root directory
- * @param {import('@sveltejs/kit').Adapter | undefined} adapter
+ * @param {(manifest_data: ManifestData) => void} set_manifest_data
  * @return {Promise<Promise<() => void>>}
  */
-export async function dev(vite, vite_config, svelte_config, get_remotes, root, adapter) {
+export async function dev(
+	vite,
+	vite_dev_server,
+	vite_config,
+	svelte_config,
+	get_remotes,
+	root,
+	set_manifest_data
+) {
 	/** @type {AsyncLocalStorage<{ event: RequestEvent, config: any, prerender: PrerenderOption }>} */
 	const async_local_storage = new AsyncLocalStorage();
 
@@ -42,7 +55,12 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root, a
 		const context = async_local_storage.getStore();
 		if (!context || context.prerender === true) return;
 
-		check_feature(/** @type {string} */ (context.event.route.id), context.config, label, adapter);
+		check_feature(
+			/** @type {string} */ (context.event.route.id),
+			context.config,
+			label,
+			svelte_config.kit.adapter
+		);
 	};
 
 	const fetch = globalThis.fetch;
@@ -58,30 +76,39 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root, a
 
 	sync.init(svelte_config, root);
 
-	/** @type {import('types').ManifestData} */
+	/** @type {ManifestData} */
 	let manifest_data;
-	/** @type {import('@sveltejs/kit').SSRManifest} */
+	/** @type {SSRManifest} */
 	let manifest;
 
 	/** @type {Error | null} */
 	let manifest_error = null;
 
-	/** @param {string} url */
+	const runner = get_runner(vite, vite_dev_server);
+
+	/**
+	 * @param {string} url
+	 * @returns {Promise<Record<string, any>>}
+	 */
 	async function loud_ssr_load_module(url) {
 		try {
-			return await vite.ssrLoadModule(url, { fixStacktrace: true });
+			return await runner.import(url);
 		} catch (/** @type {any} */ err) {
-			const msg = buildErrorMessage(err, [
+			const msg = vite.buildErrorMessage(err, [
 				styleText('red', `Internal server error: ${err.message}`)
 			]);
 
-			if (!vite.config.logger.hasErrorLogged(err)) {
-				vite.config.logger.error(msg, { error: err });
+			if (!vite_dev_server.config.logger.hasErrorLogged(err)) {
+				vite_dev_server.config.logger.error(msg, { error: err });
 			}
 
-			vite.ws.send({
+			// TODO this is inadequate — it doesn't reliably show the overlay on every page load,
+			// and when it does appear it may immediately vanish. `vite.hot.send` broadcasts
+			// to all connected clients, even ones that are unaffected by the error.
+			// we need a more considered approach
+			vite_dev_server.hot.send({
 				type: 'error',
-				err: /** @type {import('vite').ErrorPayload['err']} */ ({
+				err: /** @type {ErrorPayload['err']} */ ({
 					...err,
 					// these properties are non-enumerable and will
 					// not be serialized unless we explicitly include them
@@ -100,25 +127,33 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root, a
 
 		const module = await loud_ssr_load_module(url);
 
-		const module_node = await vite.moduleGraph.getModuleByUrl(url);
+		const module_node = await vite_dev_server.environments.ssr.moduleGraph.getModuleByUrl(url);
 		if (!module_node) throw new Error(`Could not find node for ${url}`);
 
 		return { module, module_node, url };
 	}
 
-	function update_manifest() {
+	async function update_manifest() {
 		try {
 			({ manifest_data } = sync.create(svelte_config, root));
+			set_manifest_data(manifest_data);
+
+			await load_and_validate_params({
+				routes: manifest_data.routes,
+				params_path: manifest_data.params,
+				root,
+				load: (file) => loud_ssr_load_module(file)
+			});
 
 			if (manifest_error) {
 				manifest_error = null;
-				vite.ws.send({ type: 'full-reload' });
+				vite_dev_server.hot.send({ type: 'full-reload' });
 			}
 		} catch (error) {
 			manifest_error = /** @type {Error} */ (error);
 
 			console.error(styleText(['bold', 'red'], manifest_error.message));
-			vite.ws.send({
+			vite_dev_server.hot.send({
 				type: 'error',
 				err: {
 					message: manifest_error.message ?? 'Invalid routes',
@@ -180,8 +215,7 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root, a
 				),
 				nodes: manifest_data.nodes.map((node, index) => {
 					return async () => {
-						/** @type {import('types').SSRNode} */
-						const result = {};
+						const result = /** @type {SSRNode} */ ({});
 						result.index = index;
 						result.universal_id = node.universal;
 						result.server_id = node.server;
@@ -191,7 +225,7 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root, a
 						result.stylesheets = [];
 						result.fonts = [];
 
-						/** @type {import('vite').ModuleNode[]} */
+						/** @type {EnvironmentModuleNode[]} */
 						const module_nodes = [];
 
 						if (node.component) {
@@ -225,23 +259,23 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root, a
 						// in dev we inline all styles to avoid FOUC. this gets populated lazily so that
 						// components/stylesheets loaded via import() during `load` are included
 						result.inline_styles = async () => {
-							/** @type {Set<import('vite').ModuleNode | import('vite').EnvironmentModuleNode>} */
+							/** @type {Set<EnvironmentModuleNode>} */
 							const deps = new Set();
 
 							for (const module_node of module_nodes) {
-								await find_deps(vite, module_node, deps);
+								await find_deps(vite_dev_server, module_node, deps);
 							}
 
 							/** @type {Record<string, string>} */
 							const styles = {};
 
 							for (const dep of deps) {
-								if (isCSSRequest(dep.url) && !vite_css_query_regex.test(dep.url)) {
+								if (vite.isCSSRequest(dep.url) && !vite_css_query_regex.test(dep.url)) {
 									const inlineCssUrl = dep.url.includes('?')
 										? dep.url.replace('?', '?inline&')
 										: dep.url + '?inline';
 									try {
-										const mod = await vite.ssrLoadModule(inlineCssUrl);
+										const mod = await runner.import(inlineCssUrl);
 										styles[dep.url] = mod.default;
 									} catch {
 										// this can happen with dynamically imported modules, I think
@@ -262,7 +296,7 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root, a
 					return Object.fromEntries(
 						get_remotes().map((remote) => [
 							remote.hash,
-							() => vite.ssrLoadModule(remote.file).then((module) => ({ default: module }))
+							() => runner.import(remote.file).then((module) => ({ default: module }))
 						])
 					);
 				},
@@ -288,22 +322,18 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root, a
 					})
 				),
 				matchers: async () => {
-					/** @type {Record<string, import('@sveltejs/kit').ParamMatcher>} */
-					const matchers = {};
-
-					for (const key in manifest_data.matchers) {
-						const file = manifest_data.matchers[key];
-						const url = path.resolve(root, file);
-						const module = await vite.ssrLoadModule(url, { fixStacktrace: true });
-
-						if (module.match) {
-							matchers[key] = module.match;
-						} else {
-							throw new Error(`${file} does not export a \`match\` function`);
-						}
+					if (!manifest_data.params) return {};
+
+					const url = path.resolve(root, manifest_data.params);
+					const module = await runner.import(url);
+
+					if (!module.params) {
+						throw new Error(
+							`${manifest_data.params} does not export \`params\` from \`defineParams\``
+						);
 					}
 
-					return matchers;
+					return module.params;
 				}
 			}
 		};
@@ -311,27 +341,59 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root, a
 
 	/** @param {Error} error */
 	function fix_stack_trace(error) {
-		try {
-			vite.ssrFixStacktrace(error);
-		} catch {
-			// ssrFixStacktrace can fail on StackBlitz web containers and we don't know why
-			// by ignoring it the line numbers are wrong, but at least we can show the error
+		if (!error.stack) {
+			return;
 		}
-		return error.stack?.replaceAll('\0', ''); // remove null bytes from e.g. virtual module IDs, or the response will fail
+
+		let prelude = '';
+		let start = -1;
+		let end = 0;
+
+		const lines = error.stack
+			.replaceAll('\0', '') // remove null bytes from e.g. virtual module IDs, or the response will fail
+			.split('\n')
+			.map((line, i) => {
+				const match = /^ {4}at (?:[^(]+ \((.+)\)|(.+))$/.exec(line);
+				if (!match) {
+					prelude += line + '\n';
+					end = i + 1;
+					return line;
+				}
+
+				const loc = match[1] ?? match[2];
+				const file = loc.replace(/:\d+:\d+$/, '');
+
+				if (fs.existsSync(file)) {
+					if (!file.includes('node_modules') && !file.includes(SRC_ROOT)) {
+						if (start === -1) start = i;
+						end = i + 1;
+					}
+
+					return line.replace(file, path.relative(process.cwd(), file));
+				}
+
+				return line;
+			})
+			// if no user-code frame was found, keep only the prelude (message/header)
+			// lines and drop everything else so the message isn't duplicated
+			.slice(start === -1 ? end : start, end);
+
+		return (error.stack = prelude + lines.join('\n'));
 	}
 
-	update_manifest();
+	const params_file = resolve_entry(svelte_config.kit.files.params);
 
 	/**
 	 * @param {string} event
 	 * @param {(file: string) => void} cb
 	 */
 	const watch = (event, cb) => {
-		vite.watcher.on(event, (file) => {
+		vite_dev_server.watcher.on(event, (file) => {
 			if (
 				file.startsWith(svelte_config.kit.files.routes + path.sep) ||
-				file.startsWith(svelte_config.kit.files.params + path.sep) ||
-				svelte_config.kit.moduleExtensions.some((ext) => file.endsWith(`.remote${ext}`)) ||
+				file.startsWith(svelte_config.kit.files.assets + path.sep) ||
+				(params_file && file === params_file) ||
+				is_remote_module(file) ||
 				// in contrast to server hooks, client hooks are written to the client manifest
 				// and therefore need rebuilding when they are added/removed
 				file.startsWith(svelte_config.kit.files.hooks.client)
@@ -351,19 +413,21 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root, a
 		}, 100);
 	};
 
-	// flag to skip watchers if server is already restarting
-	let restarting = false;
-
 	// Debounce add/unlink events because in case of folder deletion or moves
 	// they fire in rapid succession, causing needless invocations.
 	// These watchers only run for routes, param matchers, and client hooks.
 	watch('add', () => debounce(update_manifest));
 	watch('unlink', () => debounce(update_manifest));
 	watch('change', (file) => {
+		// `manifest_data` is populated lazily on the first request (see `update_manifest`
+		// call in the middleware below), so it may still be undefined if a file changes
+		// before the dev server has served a request. In that case there's nothing to
+		// update — the manifest will be created from scratch on the first request.
+		if (!manifest_data) return;
 		// Don't run for a single file if the whole manifest is about to get updated
 		// Unless it's a file where the trailing slash page option might have changed
-		if (timeout || restarting || !/\+(page|layout|server).*$/.test(file)) return;
-		sync.update(svelte_config, manifest_data, file, root);
+		if (timeout || !/\+(page|layout|server).*$/.test(file)) return;
+		if (!sync.update(svelte_config, manifest_data, file, root)) debounce(update_manifest);
 	});
 
 	const { appTemplate, errorTemplate, serviceWorker, hooks } = svelte_config.kit.files;
@@ -372,14 +436,14 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root, a
 	// kit defaults to src/app.html, so unless user changed that to index.html
 	// send the vite client a full-reload event without path being set
 	if (appTemplate !== 'index.html') {
-		vite.watcher.on('change', (file) => {
-			if (file === appTemplate && !restarting) {
-				vite.ws.send({ type: 'full-reload' });
+		vite_dev_server.watcher.on('change', (file) => {
+			if (file === appTemplate) {
+				vite_dev_server.hot.send({ type: 'full-reload' });
 			}
 		});
 	}
 
-	vite.watcher.on('all', (_, file) => {
+	vite_dev_server.watcher.on('all', (_, file) => {
 		if (
 			file === appTemplate ||
 			file === errorTemplate ||
@@ -390,30 +454,16 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root, a
 		}
 	});
 
-	vite.watcher.on('change', async (file) => {
-		// changing the svelte config requires restarting the dev server
-		// the config is only read on start and passed on to vite-plugin-svelte
-		// which needs up-to-date values to operate correctly
-		if (file.match(/[/\\]svelte\.config\.[jt]s$/)) {
-			console.log(`svelte config changed, restarting vite dev-server. changed file: ${file}`);
-			restarting = true;
-			await vite.restart();
-		}
-	});
-
 	const assets = svelte_config.kit.paths.assets ? SVELTE_KIT_ASSETS : svelte_config.kit.paths.base;
 	const asset_server = sirv(svelte_config.kit.files.assets, {
 		dev: true,
 		etag: true,
 		maxAge: 0,
-		extensions: [],
-		setHeaders: (res) => {
-			res.setHeader('access-control-allow-origin', '*');
-		}
+		extensions: []
 	});
 
-	vite.middlewares.use((req, res, next) => {
-		const base = `${vite.config.server.https ? 'https' : 'http'}://${
+	vite_dev_server.middlewares.use((req, res, next) => {
+		const base = `${vite_dev_server.config.server.https ? 'https' : 'http'}://${
 			req.headers[':authority'] || req.headers.host
 		}`;
 
@@ -435,25 +485,33 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root, a
 		next();
 	});
 
-	const env = loadEnv(vite_config.mode, svelte_config.kit.env.dir, '');
-	const emulator = await adapter?.emulate?.();
+	const env = vite.loadEnv(vite_config.mode, svelte_config.kit.env.dir, '');
+	const emulator = await svelte_config.kit.adapter?.emulate?.();
+
+	/** @type {Promise<void> | undefined} */
+	let init_manifest;
 
 	return () => {
-		const serve_static_middleware = vite.middlewares.stack.find(
+		const serve_static_middleware = vite_dev_server.middlewares.stack.find(
 			(middleware) =>
 				/** @type {Function} */ (middleware.handle).name === 'viteServeStaticMiddleware'
 		);
 
 		// Vite will give a 403 on URLs like /test, /static, and /package.json preventing us from
 		// serving routes with those names. See https://github.com/vitejs/vite/issues/7363
-		remove_static_middlewares(vite.middlewares);
+		remove_static_middlewares(vite_dev_server.middlewares);
+
+		vite_dev_server.middlewares.use(async (req, res) => {
+			// Vite throws a Cannot read properties of undefined (reading 'wrapDynamicImport')
+			// if you try to run ssr.runner.import before the server has started so
+			// we do it inside here to avoid that
+			await (init_manifest ??= update_manifest());
 
-		vite.middlewares.use(async (req, res) => {
 			// Vite's base middleware strips out the base path. Restore it
 			const original_url = req.url;
 			req.url = req.originalUrl;
 			try {
-				const base = `${vite.config.server.https ? 'https' : 'http'}://${
+				const base = `${vite_dev_server.config.server.https ? 'https' : 'http'}://${
 					req.headers[':authority'] || req.headers.host
 				}`;
 
@@ -497,27 +555,36 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root, a
 					return;
 				}
 
+				// resolve the instrumentation file per request so that changes to it
+				// are picked up on new requests
 				const resolved_instrumentation = resolve_entry(
 					path.join(svelte_config.kit.files.src, 'instrumentation.server')
 				);
 
 				if (resolved_instrumentation) {
-					await vite.ssrLoadModule(resolved_instrumentation);
+					if (
+						svelte_config.kit.adapter &&
+						!svelte_config.kit.adapter.supports?.instrumentation?.()
+					) {
+						throw new Error(
+							`${resolved_instrumentation} is unsupported in ${svelte_config.kit.adapter.name}.`
+						);
+					}
+
+					await runner.import(resolved_instrumentation);
 				}
 
 				// we have to import `Server` before calling `set_assets`
-				const { Server } = /** @type {import('types').ServerModule} */ (
-					await vite.ssrLoadModule(`${get_runtime_base(root)}/server/index.js`, {
-						fixStacktrace: true
-					})
+				const { Server } = /** @type {ServerModule} */ (
+					await runner.import(`${get_runtime_base(root)}/server/index.js`)
 				);
 
-				const { set_fix_stack_trace } = await vite.ssrLoadModule(
-					`${get_runtime_base(root)}/shared-server.js`
+				const { set_fix_stack_trace, log_response } = await runner.import(
+					`${get_runtime_base(root)}/server/internal.js`
 				);
 				set_fix_stack_trace(fix_stack_trace);
 
-				const { set_assets } = await vite.ssrLoadModule('$app/paths/internal/server');
+				const { set_assets } = await runner.import('$app/paths/internal/server');
 				set_assets(assets);
 
 				const server = new Server(manifest);
@@ -527,7 +594,7 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root, a
 					read: (file) => createReadableStream(from_fs(file))
 				});
 
-				const request = await getRequest({
+				const request = getRequest({
 					base,
 					request: req
 				});
@@ -578,15 +645,19 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root, a
 				if (rendered.status === 404) {
 					// @ts-expect-error
 					serve_static_middleware.handle(req, res, () => {
-						void setResponse(res, rendered);
+						log_response(rendered.status, request);
+						setResponse(res, rendered);
 					});
 				} else {
-					void setResponse(res, rendered);
+					log_response(rendered.status, request);
+					setResponse(res, rendered);
 				}
 			} catch (e) {
 				const error = coalesce_to_error(e);
 				res.statusCode = 500;
-				res.end(fix_stack_trace(error) || error.message); // handle `stackless` errors
+				fix_stack_trace(error);
+				console.error(styleText(['bold', 'red'], String(error)));
+				res.end(error.stack || error.message); // handle `stackless` errors
 			}
 		});
 	};
@@ -606,17 +677,17 @@ function remove_static_middlewares(server) {
 }
 
 /**
- * @param {import('vite').ViteDevServer} vite
- * @param {import('vite').ModuleNode | import('vite').EnvironmentModuleNode} node
- * @param {Set<import('vite').ModuleNode | import('vite').EnvironmentModuleNode>} deps
+ * @param {ViteDevServer} vite
+ * @param {EnvironmentModuleNode} node
+ * @param {Set<EnvironmentModuleNode>} deps
  */
 async function find_deps(vite, node, deps) {
-	// since `ssrTransformResult.deps` contains URLs instead of `ModuleNode`s, this process is asynchronous.
+	// since `transformResult.deps` contains URLs instead of `ModuleNode`s, this process is asynchronous.
 	// instead of using `await`, we resolve all branches in parallel.
 	/** @type {Promise<void>[]} */
 	const branches = [];
 
-	/** @param {import('vite').ModuleNode | import('vite').EnvironmentModuleNode} node */
+	/** @param {EnvironmentModuleNode} node */
 	async function add(node) {
 		if (!deps.has(node)) {
 			deps.add(node);
@@ -626,23 +697,20 @@ async function find_deps(vite, node, deps) {
 
 	/** @param {string} url */
 	async function add_by_url(url) {
-		const node = await get_server_module_by_url(vite, url);
+		const node = await vite.environments.ssr.moduleGraph.getModuleByUrl(url);
 
 		if (node) {
 			await add(node);
 		}
 	}
 
-	const transform_result =
-		/** @type {import('vite').ModuleNode} */ (node).ssrTransformResult || node.transformResult;
-
-	if (transform_result) {
-		if (transform_result.deps) {
-			transform_result.deps.forEach((url) => branches.push(add_by_url(url)));
+	if (node.transformResult) {
+		if (node.transformResult.deps) {
+			node.transformResult.deps.forEach((url) => branches.push(add_by_url(url)));
 		}
 
-		if (transform_result.dynamicDeps) {
-			transform_result.dynamicDeps.forEach((url) => branches.push(add_by_url(url)));
+		if (node.transformResult.dynamicDeps) {
+			node.transformResult.dynamicDeps.forEach((url) => branches.push(add_by_url(url)));
 		}
 	} else {
 		node.importedModules.forEach((node) => branches.push(add(node)));
@@ -651,16 +719,6 @@ async function find_deps(vite, node, deps) {
 	await Promise.all(branches);
 }
 
-/**
- * @param {import('vite').ViteDevServer} vite
- * @param {string} url
- */
-function get_server_module_by_url(vite, url) {
-	return vite.environments
-		? vite.environments.ssr.moduleGraph.getModuleByUrl(url)
-		: vite.moduleGraph.getModuleByUrl(url, true);
-}
-
 /**
  * Determine if a file is being requested with the correct case,
  * to ensure consistent behaviour between dev and prod and across
@@ -681,3 +739,19 @@ function has_correct_case(file, assets) {
 
 	return false;
 }
+
+/**
+ * Invalidates a module in all environments.
+ * @param {ViteDevServer} server
+ * @param {string} id
+ * @returns {void}
+ */
+export function invalidate_module(server, id) {
+	for (const environment in server.environments) {
+		const module = server.environments[environment].moduleGraph.getModuleById(id);
+		if (module) {
+			server.environments[environment].moduleGraph.invalidateModule(module);
+			void server.environments[environment].reloadModule(module);
+		}
+	}
+}