@sveltejs/kit 3.0.0-next.10 → 3.0.0-next.12

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

@@ -1,5 +1,6 @@
 /** @import { RequestEvent } from '@sveltejs/kit' */
 /** @import { PrerenderOption, UniversalNode } from 'types' */
+import process from 'node:process';
 import fs from 'node:fs';
 import path from 'node:path';
 import { URL } from 'node:url';
@@ -14,15 +15,21 @@ 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,
+	log_response,
+	not_found,
+	remote_module_pattern
+} 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)(?:&|$)/;
@@ -33,9 +40,10 @@ const vite_css_query_regex = /(?:\?|&)(?:raw|url|inline)(?:&|$)/;
  * @param {import('types').ValidatedConfig} svelte_config
  * @param {() => Array<{ hash: string, file: string }>} get_remotes
  * @param {string} root The project root directory
+ * @param {(manifest_data: import('types').ManifestData) => void} set_manifest_data
  * @return {Promise<Promise<() => void>>}
  */
-export async function dev(vite, vite_config, svelte_config, get_remotes, root) {
+export async function dev(vite, vite_config, svelte_config, get_remotes, root, set_manifest_data) {
 	/** @type {AsyncLocalStorage<{ event: RequestEvent, config: any, prerender: PrerenderOption }>} */
 	const async_local_storage = new AsyncLocalStorage();
 
@@ -72,10 +80,15 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root) {
 	/** @type {Error | null} */
 	let manifest_error = null;
 
-	/** @param {string} url */
+	const runner = get_runner(vite);
+
+	/**
+	 * @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, [
 				styleText('red', `Internal server error: ${err.message}`)
@@ -86,10 +99,10 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root) {
 			}
 
 			// 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.ws.send` broadcasts
+			// 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.ws.send({
+			vite.hot.send({
 				type: 'error',
 				err: /** @type {import('vite').ErrorPayload['err']} */ ({
 					...err,
@@ -110,7 +123,7 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root) {
 
 		const module = await loud_ssr_load_module(url);
 
-		const module_node = await vite.moduleGraph.getModuleByUrl(url);
+		const module_node = await vite.environments.ssr.moduleGraph.getModuleByUrl(url);
 		if (!module_node) throw new Error(`Could not find node for ${url}`);
 
 		return { module, module_node, url };
@@ -119,6 +132,7 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root) {
 	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,
@@ -129,13 +143,13 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root) {
 
 			if (manifest_error) {
 				manifest_error = null;
-				vite.ws.send({ type: 'full-reload' });
+				vite.hot.send({ type: 'full-reload' });
 			}
 		} catch (error) {
 			manifest_error = /** @type {Error} */ (error);
 
 			console.error(styleText(['bold', 'red'], manifest_error.message));
-			vite.ws.send({
+			vite.hot.send({
 				type: 'error',
 				err: {
 					message: manifest_error.message ?? 'Invalid routes',
@@ -208,7 +222,7 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root) {
 						result.stylesheets = [];
 						result.fonts = [];
 
-						/** @type {import('vite').ModuleNode[]} */
+						/** @type {import('vite').EnvironmentModuleNode[]} */
 						const module_nodes = [];
 
 						if (node.component) {
@@ -242,7 +256,7 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root) {
 						// 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<import('vite').EnvironmentModuleNode>} */
 							const deps = new Set();
 
 							for (const module_node of module_nodes) {
@@ -258,7 +272,7 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root) {
 										? 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
@@ -279,7 +293,7 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root) {
 					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 }))
 						])
 					);
 				},
@@ -308,7 +322,7 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root) {
 					if (!manifest_data.params) return {};
 
 					const url = path.resolve(root, manifest_data.params);
-					const module = await vite.ssrLoadModule(url, { fixStacktrace: true });
+					const module = await runner.import(url);
 
 					if (!module.params) {
 						throw new Error(
@@ -324,16 +338,40 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root) {
 
 	/** @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
-	}
 
-	await update_manifest();
+		let end = 0;
+
+		error.stack = 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) {
+					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)) {
+						end = i + 1;
+					}
+
+					return line.replace(file, path.relative(process.cwd(), file));
+				}
+
+				return line;
+			})
+			.slice(0, end)
+			.join('\n');
+
+		return error.stack;
+	}
 
 	const params_file = resolve_entry(svelte_config.kit.files.params);
 
@@ -345,8 +383,9 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root) {
 		vite.watcher.on(event, (file) => {
 			if (
 				file.startsWith(svelte_config.kit.files.routes + path.sep) ||
+				file.startsWith(svelte_config.kit.files.assets + path.sep) ||
 				(params_file && file === params_file) ||
-				svelte_config.kit.moduleExtensions.some((ext) => file.endsWith(`.remote${ext}`)) ||
+				remote_module_pattern.test(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)
@@ -372,6 +411,11 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root) {
 	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 || !/\+(page|layout|server).*$/.test(file)) return;
@@ -386,7 +430,7 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root) {
 	if (appTemplate !== 'index.html') {
 		vite.watcher.on('change', (file) => {
 			if (file === appTemplate) {
-				vite.ws.send({ type: 'full-reload' });
+				vite.hot.send({ type: 'full-reload' });
 			}
 		});
 	}
@@ -436,6 +480,9 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root) {
 	const env = 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(
 			(middleware) =>
@@ -447,6 +494,11 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root) {
 		remove_static_middlewares(vite.middlewares);
 
 		vite.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's base middleware strips out the base path. Restore it
 			const original_url = req.url;
 			req.url = req.originalUrl;
@@ -500,22 +552,20 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root) {
 				);
 
 				if (resolved_instrumentation) {
-					await vite.ssrLoadModule(resolved_instrumentation);
+					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
-					})
+					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 } = 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);
@@ -576,15 +626,18 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root) {
 				if (rendered.status === 404) {
 					// @ts-expect-error
 					serve_static_middleware.handle(req, res, () => {
+						log_response(rendered.status, request);
 						setResponse(res, rendered);
 					});
 				} else {
+					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);
+				res.end(error.stack || error.message); // handle `stackless` errors
 			}
 		});
 	};
@@ -605,16 +658,16 @@ 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 {import('vite').EnvironmentModuleNode} node
+ * @param {Set<import('vite').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 {import('vite').EnvironmentModuleNode} node */
 	async function add(node) {
 		if (!deps.has(node)) {
 			deps.add(node);
@@ -624,23 +677,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)));
@@ -649,16 +699,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
@@ -679,3 +719,19 @@ function has_correct_case(file, assets) {
 
 	return false;
 }
+
+/**
+ * Invalidates a module in all environments.
+ * @param {import('vite').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);
+		}
+	}
+}