@sveltejs/kit 3.0.0-next.11 → 3.0.0-next.13

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

@@ -1,5 +1,6 @@
-/** @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';
@@ -29,19 +30,21 @@ import {
 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 {ViteDevServer} vite
+ * @param {ResolvedConfig} vite_config
+ * @param {ValidatedConfig} svelte_config
+ * @param {() => RemoteChunk[]} get_remotes
  * @param {string} root The project root directory
+ * @param {(manifest_data: 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();
 
@@ -70,18 +73,23 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root) {
 
 	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);
+
+	/**
+	 * @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}`)
@@ -92,12 +100,12 @@ 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: /** @type {ErrorPayload['err']} */ ({
 					...err,
 					// these properties are non-enumerable and will
 					// not be serialized unless we explicitly include them
@@ -116,7 +124,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 };
@@ -125,6 +133,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,
@@ -135,13 +144,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',
@@ -203,7 +212,7 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root) {
 				),
 				nodes: manifest_data.nodes.map((node, index) => {
 					return async () => {
-						/** @type {import('types').SSRNode} */
+						/** @type {SSRNode} */
 						const result = {};
 						result.index = index;
 						result.universal_id = node.universal;
@@ -214,7 +223,7 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root) {
 						result.stylesheets = [];
 						result.fonts = [];
 
-						/** @type {import('vite').ModuleNode[]} */
+						/** @type {EnvironmentModuleNode[]} */
 						const module_nodes = [];
 
 						if (node.component) {
@@ -248,7 +257,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<EnvironmentModuleNode>} */
 							const deps = new Set();
 
 							for (const module_node of module_nodes) {
@@ -264,7 +273,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
@@ -285,7 +294,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 }))
 						])
 					);
 				},
@@ -314,7 +323,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(
@@ -334,48 +343,37 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root) {
 			return;
 		}
 
-		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
-		}
+		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;
+				}
 
-		if (error.stack) {
-			let end = 0;
+				const loc = match[1] ?? match[2];
+				const file = loc.replace(/:\d+:\d+$/, '');
 
-			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) {
+				if (fs.existsSync(file)) {
+					if (!file.includes('node_modules') && !file.includes(SRC_ROOT)) {
 						end = i + 1;
-						return line;
 					}
 
-					const loc = match[1] ?? match[2];
-					const file = loc.replace(/:\d+:\d+$/, '');
+					return line.replace(file, path.relative(process.cwd(), file));
+				}
 
-					if (fs.existsSync(file)) {
-						if (!file.includes('node_modules') && !file.includes(SRC_ROOT)) {
-							end = i + 1;
-						}
+				return line;
+			})
+			.slice(0, end)
+			.join('\n');
 
-						return line.replace(file, path.posix.relative(process.cwd(), file));
-					}
-
-					return line;
-				})
-				.slice(0, end)
-				.join('\n');
-
-			return error.stack;
-		}
+		return error.stack;
 	}
 
-	await update_manifest();
-
 	const params_file = resolve_entry(svelte_config.kit.files.params);
 
 	/**
@@ -386,6 +384,7 @@ 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) ||
 				remote_module_pattern.test(file) ||
 				// in contrast to server hooks, client hooks are written to the client manifest
@@ -413,6 +412,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;
@@ -427,7 +431,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' });
 			}
 		});
 	}
@@ -477,6 +481,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) =>
@@ -488,6 +495,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;
@@ -536,27 +548,36 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root) {
 					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(
+				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);
@@ -628,6 +649,7 @@ export async function dev(vite, vite_config, svelte_config, get_remotes, root) {
 				const error = coalesce_to_error(e);
 				res.statusCode = 500;
 				fix_stack_trace(error);
+				console.error(styleText(['bold', 'red'], String(error)));
 				res.end(error.stack || error.message); // handle `stackless` errors
 			}
 		});
@@ -648,17 +670,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);
@@ -668,23 +690,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)));
@@ -693,16 +712,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
@@ -723,3 +732,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);
+		}
+	}
+}