feat: improve compile error (#757)

* feat: improve compile error

* chore: improve error message

Author: bluwy

.changeset/grumpy-emus-destroy.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+Improve compile error messages

packages/vite-plugin-svelte/src/preprocess.js

@@ -13,7 +13,7 @@ export const lang_sep = '.vite-preprocess.';
 /** @type {import('./index.d.ts').vitePreprocess} */
 export function vitePreprocess(opts) {
 	/** @type {import('svelte/types/compiler/preprocess').PreprocessorGroup} */
-	const preprocessor = {};
+	const preprocessor = { name: 'vite-preprocess' };
 	if (opts?.script !== false) {
 		preprocessor.script = viteScript().script;
 	}

packages/vite-plugin-svelte/src/utils/compile.js

@@ -6,6 +6,7 @@ import { log } from './log.js';
 
 import { createInjectScopeEverythingRulePreprocessorGroup } from './preprocess.js';
 import { mapToRelative } from './sourcemaps.js';
+import { enhanceCompileError } from './error.js';
 
 const scriptLangRE = /<script [^>]*lang=["']?([^"' >]+)["']?[^>]*>/;
 
@@ -119,7 +120,14 @@ export const _createCompileSvelte = (makeHot) => {
 			: compileOptions;
 
 		const endStat = stats?.start(filename);
-		const compiled = compile(finalCode, finalCompileOptions);
+		/** @type {import('svelte/types/compiler/interfaces').CompileResult} */
+		let compiled;
+		try {
+			compiled = compile(finalCode, finalCompileOptions);
+		} catch (e) {
+			enhanceCompileError(e, code, preprocessors);
+			throw e;
+		}
 
 		if (endStat) {
 			endStat();

packages/vite-plugin-svelte/src/utils/error.js

@@ -100,3 +100,79 @@ function formatFrameForVite(frame) {
 		.map((line) => (line.match(/^\s+\^/) ? '   ' + line : ' ' + line.replace(':', ' | ')))
 		.join('\n');
 }
+
+/**
+ * @param {import('svelte/types/compiler/interfaces').Warning & Error} err a svelte compiler error, which is a mix of Warning and an error
+ * @param {string} originalCode
+ * @param {import('../index.js').Arrayable<import('svelte/types/compiler/preprocess').PreprocessorGroup>} [preprocessors]
+ */
+export function enhanceCompileError(err, originalCode, preprocessors) {
+	preprocessors = arraify(preprocessors ?? []);
+
+	/** @type {string[]} */
+	const additionalMessages = [];
+
+	// Handle incorrect TypeScript usage
+	if (err.code === 'parse-error') {
+		// Reference from Svelte: https://github.com/sveltejs/svelte/blob/800f6c076be5dd87dd4d2e9d66c59b973d54d84b/packages/svelte/src/compiler/preprocess/index.js#L262
+		const scriptRe = /<script(\s[^]*?)?(?:>([^]*?)<\/script>|\/>)/gi;
+		const errIndex = err.pos ?? -1;
+
+		let m;
+		while ((m = scriptRe.exec(originalCode))) {
+			const matchStart = m.index;
+			const matchEnd = matchStart + m[0].length;
+			const isErrorInScript = matchStart <= errIndex && errIndex <= matchEnd;
+			if (isErrorInScript) {
+				// Warn missing lang="ts"
+				const hasLangTs = m[1]?.includes('lang="ts"');
+				if (!hasLangTs) {
+					additionalMessages.push('Did you forget to add lang="ts" to your script tag?');
+				}
+				// Warn missing script preprocessor
+				if (preprocessors.every((p) => p.script == null)) {
+					const preprocessorType = hasLangTs ? 'TypeScript' : 'script';
+					additionalMessages.push(
+						`Did you forget to add a ${preprocessorType} preprocessor? See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/preprocess.md for more information.`
+					);
+				}
+			}
+		}
+	}
+
+	// Handle incorrect CSS preprocessor usage
+	if (err.code === 'css-syntax-error') {
+		const styleRe = /<style(\s[^]*?)?(?:>([^]*?)<\/style>|\/>)/gi;
+
+		let m;
+		while ((m = styleRe.exec(originalCode))) {
+			// Warn missing lang attribute
+			if (!m[1]?.includes('lang=')) {
+				additionalMessages.push('Did you forget to add a lang attribute to your style tag?');
+			}
+			// Warn missing style preprocessor
+			if (
+				preprocessors.every((p) => p.style == null || p.name === 'inject-scope-everything-rule')
+			) {
+				const preprocessorType = m[1]?.match(/lang="(.+?)"/)?.[1] ?? 'style';
+				additionalMessages.push(
+					`Did you forget to add a ${preprocessorType} preprocessor? See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/preprocess.md for more information.`
+				);
+			}
+		}
+	}
+
+	if (additionalMessages.length) {
+		err.message += '\n\n- ' + additionalMessages.join('\n- ');
+	}
+
+	return err;
+}
+
+/**
+ * @param {T | T[]} value
+ * @template T
+ */
+function arraify(value) {
+	return Array.isArray(value) ? value : [value];
+}

packages/vite-plugin-svelte/src/utils/preprocess.js

@@ -12,6 +12,7 @@ import path from 'node:path';
  */
 export function createInjectScopeEverythingRulePreprocessorGroup() {
 	return {
+		name: 'inject-scope-everything-rule',
 		style({ content, filename }) {
 			const s = new MagicString(content);
 			s.append(' *{}');