@sveltejs/vite-plugin-svelte 1.0.0-next.29 → 1.0.0-next.32

package/src/index.ts

@@ -17,6 +17,7 @@ import { ensureWatchedFile, setupWatchers } from './utils/watch';
 import { resolveViaPackageJsonSvelte } from './utils/resolve';
 import { addExtraPreprocessors } from './utils/preprocess';
 import { PartialResolvedId } from 'rollup';
+import { toRollupError } from './utils/error';
 
 export function svelte(inlineOptions?: Partial<Options>): Plugin {
 	if (process.env.DEBUG != null) {
@@ -94,11 +95,9 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin {
 			}
 		},
 
-		async resolveId(importee, importer, opts, _ssr) {
-			// @ts-expect-error anticipate vite deprecating forth parameter and rely on `opts.ssr` instead`
-			// see https://github.com/vitejs/vite/discussions/5109
-			const ssr: boolean = _ssr === true || opts.ssr;
-			const svelteRequest = requestParser(importee, !!ssr);
+		async resolveId(importee, importer, opts) {
+			const ssr = !!opts?.ssr;
+			const svelteRequest = requestParser(importee, ssr);
 			if (svelteRequest?.query.svelte) {
 				if (svelteRequest.query.type === 'style') {
 					// return cssId with root prefix so postcss pipeline of vite finds the directory correctly
@@ -149,10 +148,8 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin {
 		},
 
 		async transform(code, id, opts) {
-			// @ts-expect-error anticipate vite changing third parameter as options object
-			// see https://github.com/vitejs/vite/discussions/5109
-			const ssr: boolean = opts === true || opts?.ssr;
-			const svelteRequest = requestParser(id, !!ssr);
+			const ssr = !!opts?.ssr;
+			const svelteRequest = requestParser(id, ssr);
 			if (!svelteRequest) {
 				return;
 			}
@@ -169,7 +166,12 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin {
 				log.error('failed to transform tagged svelte request', svelteRequest);
 				throw new Error(`failed to transform tagged svelte request for id ${id}`);
 			}
-			const compileData = await compileSvelte(svelteRequest, code, options);
+			let compileData;
+			try {
+				compileData = await compileSvelte(svelteRequest, code, options);
+			} catch (e) {
+				throw toRollupError(e);
+			}
 			logCompilerWarnings(compileData.compiled.warnings, options);
 			cache.update(compileData);
 			if (compileData.dependencies?.length && options.server) {

package/src/utils/error.ts

@@ -0,0 +1,92 @@
+import { RollupError } from 'rollup';
+import { Warning } from './options';
+import { buildExtendedLogMessage } from './log';
+import { PartialMessage } from 'esbuild';
+
+/**
+ * convert an error thrown by svelte.compile to a RollupError so that vite displays it in a user friendly way
+ * @param error a svelte compiler error, which is a mix of Warning and an error
+ * @returns {RollupError} the converted error
+ */
+export function toRollupError(error: Warning & Error): RollupError {
+	const { filename, frame, start, code, name } = error;
+	const rollupError: RollupError = {
+		name, // needed otherwise sveltekit coalesce_to_error turns it into a string
+		id: filename,
+		message: buildExtendedLogMessage(error), // include filename:line:column so that it's clickable
+		frame: formatFrameForVite(frame),
+		code,
+		stack: ''
+	};
+	if (start) {
+		rollupError.loc = {
+			line: start.line,
+			column: start.column,
+			file: filename
+		};
+	}
+	return rollupError;
+}
+
+/**
+ * convert an error thrown by svelte.compile to an esbuild PartialMessage
+ * @param error a svelte compiler error, which is a mix of Warning and an error
+ * @returns {PartialMessage} the converted error
+ */
+export function toESBuildError(error: Warning & Error): PartialMessage {
+	const { filename, frame, start } = error;
+	const partialMessage: PartialMessage = {
+		text: buildExtendedLogMessage(error)
+	};
+	if (start) {
+		partialMessage.location = {
+			line: start.line,
+			column: start.column,
+			file: filename,
+			lineText: lineFromFrame(start.line, frame) // needed to get a meaningful error message on cli
+		};
+	}
+	return partialMessage;
+}
+
+/**
+ * extract line with number from codeframe
+ */
+function lineFromFrame(lineNo: number, frame?: string): string {
+	if (!frame) {
+		return '';
+	}
+	const lines = frame.split('\n');
+	const errorLine = lines.find((line) => line.trimStart().startsWith(`${lineNo}: `));
+	return errorLine ? errorLine.substring(errorLine.indexOf(': ') + 3) : '';
+}
+
+/**
+ * vite error overlay expects a specific format to show frames
+ * this reformats svelte frame (colon separated, less whitespace)
+ * to one that vite displays on overlay ( pipe separated, more whitespace)
+ * e.g.
+ * ```
+ * 1: foo
+ * 2: bar;
+ *       ^
+ * 3: baz
+ * ```
+ * to
+ * ```
+ *  1 | foo
+ *  2 | bar;
+ *         ^
+ *  3 | baz
+ * ```
+ * @see https://github.com/vitejs/vite/blob/96591bf9989529de839ba89958755eafe4c445ae/packages/vite/src/client/overlay.ts#L116
+ */
+function formatFrameForVite(frame?: string): string {
+	if (!frame) {
+		return '';
+	}
+	return frame
+		.split('\n')
+		.map((line) => (line.match(/^\s+\^/) ? '   ' + line : ' ' + line.replace(':', ' | ')))
+		.join('\n');
+}

package/src/utils/esbuild.ts

@@ -4,6 +4,7 @@ import { DepOptimizationOptions } from 'vite';
 import { Compiled } from './compile';
 import { log } from './log';
 import { CompileOptions, ResolvedOptions } from './options';
+import { toESBuildError } from './error';
 
 type EsbuildOptions = NonNullable<DepOptimizationOptions['esbuildOptions']>;
 type EsbuildPlugin = NonNullable<EsbuildOptions['plugins']>[number];
@@ -20,8 +21,12 @@ export function esbuildSveltePlugin(options: ResolvedOptions): EsbuildPlugin {
 
 			build.onLoad({ filter: svelteFilter }, async ({ path: filename }) => {
 				const code = await fs.readFile(filename, 'utf8');
-				const contents = await compileSvelte(options, { filename, code });
-				return { contents };
+				try {
+					const contents = await compileSvelte(options, { filename, code });
+					return { contents };
+				} catch (e) {
+					return { errors: [toESBuildError(e)] };
+				}
 			});
 		}
 	};

package/src/utils/log.ts

@@ -155,7 +155,7 @@ function warnBuild(w: Warning) {
 	log.warn.enabled && log.warn(buildExtendedLogMessage(w), w.frame);
 }
 
-function buildExtendedLogMessage(w: Warning) {
+export function buildExtendedLogMessage(w: Warning) {
 	const parts = [];
 	if (w.filename) {
 		parts.push(w.filename);

package/src/utils/options.ts

@@ -121,6 +121,7 @@ function mergeOptions(
 	viteConfig: UserConfig,
 	viteEnv: ConfigEnv
 ): ResolvedOptions {
+	// @ts-ignore
 	const merged = {
 		...defaultOptions,
 		...svelteConfig,
@@ -137,7 +138,9 @@ function mergeOptions(
 		root: viteConfig.root!,
 		isProduction: viteEnv.mode === 'production',
 		isBuild: viteEnv.command === 'build',
-		isServe: viteEnv.command === 'serve'
+		isServe: viteEnv.command === 'serve',
+		// @ts-expect-error we don't declare kit property of svelte config but read it once here to identify kit projects
+		isSvelteKit: !!svelteConfig?.kit
 	};
 	// configFile of svelteConfig contains the absolute path it was loaded from,
 	// prefer it over the possibly relative inline path
@@ -485,6 +488,7 @@ export interface ResolvedOptions extends Options {
 	isBuild: boolean;
 	isServe: boolean;
 	server?: ViteDevServer;
+	isSvelteKit?: boolean;
 }
 
 export type {

package/src/utils/resolve.ts

@@ -14,7 +14,13 @@ export function resolveViaPackageJsonSvelte(importee: string, importer?: string)
 }
 
 function isBareImport(importee: string): boolean {
-	if (!importee || importee[0] === '.' || importee[0] === '\0' || path.isAbsolute(importee)) {
+	if (
+		!importee ||
+		importee[0] === '.' ||
+		importee[0] === '\0' ||
+		importee.includes(':') ||
+		path.isAbsolute(importee)
+	) {
 		return false;
 	}
 	const parts = importee.split('/');

package/src/utils/watch.ts

@@ -17,7 +17,7 @@ export function setupWatchers(
 		return;
 	}
 	const { watcher, ws } = server;
-	const { configFile: viteConfigFile, root, server: serverConfig } = server.config;
+	const { root, server: serverConfig } = server.config;
 
 	const emitChangeEventOnDependants = (filename: string) => {
 		const dependants = cache.getDependants(filename);
@@ -42,12 +42,9 @@ export function setupWatchers(
 	};
 
 	const triggerViteRestart = (filename: string) => {
-		// vite restart is triggered by simulating a change to vite config. This requires that vite config exists
-		// also we do not restart in middleware-mode as it could be risky
-		if (!!viteConfigFile && !serverConfig.middlewareMode) {
-			log.info(`svelte config changed: restarting vite server. - file: ${filename}`);
-			watcher.emit('change', viteConfigFile);
-		} else {
+		if (serverConfig.middlewareMode || options.isSvelteKit) {
+			// in middlewareMode or for sveltekit we can't restart the server automatically
+			// show the user an overlay instead
 			const message =
 				'Svelte config change detected, restart your dev process to apply the changes.';
 			log.info(message, filename);
@@ -55,6 +52,9 @@ export function setupWatchers(
 				type: 'error',
 				err: { message, stack: '', plugin: 'vite-plugin-svelte', id: filename }
 			});
+		} else {
+			log.info(`svelte config changed: restarting vite server. - file: ${filename}`);
+			server.restart(!!options.experimental?.prebundleSvelteLibraries);
 		}
 	};