Merge 70393e8d0e into 5895c637b0

.changeset/gentle-dots-dream.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+Improve error message when TypeScript syntax is used in snippet parameters without `lang="ts"`

packages/svelte/src/compiler/phases/1-parse/acorn.js

@@ -96,7 +96,7 @@ export function parse_expression_at(parser, source, index) {
 
 		return ast;
 	} catch (e) {
-		handle_parse_error(e);
+		handle_parse_error(e, source, parser.ts);
 	}
 }
 
@@ -166,10 +166,19 @@ const regex_position_indicator = / \(\d+:\d+\)$/;
 
 /**
  * @param {any} err
+ * @param {string} [source]
+ * @param {boolean} [typescript]
  * @returns {never}
  */
-function handle_parse_error(err) {
+function handle_parse_error(err, source, typescript) {
-	e.js_parse_error(err.pos, err.message.replace(regex_position_indicator, ''));
+	let message = /** @type {string} */ (err.message).replace(regex_position_indicator, '');
+	let pos = /** @type {number} */ (err.pos);
+
+	if (!typescript && source && source[pos] === ':') {
+		message += ` (did you forget to add \`lang="ts"\`?)`;
+	}
+
+	e.js_parse_error(pos, message);
 }
 
 /**

packages/svelte/src/compiler/phases/1-parse/read/expression.js

@@ -50,6 +50,22 @@ export default function read_expression(parser, opening_token, disallow_loose) {
 
 		parser.index = index;
 
+		if (!parser.ts) {
+			let j = parser.index;
+			while (j < parser.template.length && regex_whitespace.test(parser.template[j])) j++;
+
+			const remaining = parser.template.slice(j);
+
+			if (
+				remaining[0] === ':' ||
+				/^satisfies[\s(]/.test(remaining) ||
+				(remaining[0] === '!' && remaining[1] !== '=') ||
+				(/^as[\s(]/.test(remaining) && !disallow_loose)
+			) {
+				e.js_parse_error(j, `Unexpected token (did you forget to add \`lang="ts"\`?)`);
+			}
+		}
+
 		return /** @type {Expression} */ (remove_parens(node));
 	} catch (err) {
 		// If we are in an each loop we need the error to be thrown in cases like

packages/svelte/tests/compiler-errors/samples/snippet-ts-annotation-no-lang/_config.js

@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'js_parse_error',
+		message: 'Unexpected token (did you forget to add `lang="ts"`?)',
+		position: [18, 18]
+	}
+});

packages/svelte/tests/compiler-errors/samples/snippet-ts-annotation-no-lang/main.svelte

@@ -0,0 +1,3 @@
+{#snippet bar(text: string)}
+	{text}
+{/snippet}

packages/svelte/tests/compiler-errors/samples/ts-annotation-no-lang-as/_config.js

@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'js_parse_error',
+		message: 'Unexpected token (did you forget to add `lang="ts"`?)',
+		position: [3, 3]
+	}
+});

packages/svelte/tests/compiler-errors/samples/ts-annotation-no-lang-as/main.svelte

@@ -0,0 +1 @@
+{x as number}

packages/svelte/tests/compiler-errors/samples/ts-annotation-no-lang-attribute/_config.js

@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'js_parse_error',
+		message: 'Unexpected token (did you forget to add `lang="ts"`?)',
+		position: [14, 14]
+	}
+});

packages/svelte/tests/compiler-errors/samples/ts-annotation-no-lang-attribute/main.svelte

@@ -0,0 +1 @@
+<div class={x as Foo} />

packages/svelte/tests/compiler-errors/samples/ts-annotation-no-lang-colon/_config.js

@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'js_parse_error',
+		message: 'Unexpected token (did you forget to add `lang="ts"`?)',
+		position: [2, 2]
+	}
+});

packages/svelte/tests/compiler-errors/samples/ts-annotation-no-lang-colon/main.svelte

@@ -0,0 +1 @@
+{x: number}

packages/svelte/tests/compiler-errors/samples/ts-annotation-no-lang-non-null/_config.js

@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'js_parse_error',
+		message: 'Unexpected token (did you forget to add `lang="ts"`?)',
+		position: [2, 2]
+	}
+});

packages/svelte/tests/compiler-errors/samples/ts-annotation-no-lang-non-null/main.svelte

@@ -0,0 +1 @@
+{x!}

packages/svelte/tests/compiler-errors/samples/ts-annotation-no-lang-satisfies/_config.js

@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'js_parse_error',
+		message: 'Unexpected token (did you forget to add `lang="ts"`?)',
+		position: [3, 3]
+	}
+});

packages/svelte/tests/compiler-errors/samples/ts-annotation-no-lang-satisfies/main.svelte

@@ -0,0 +1 @@
+{x satisfies Foo}