From 194570dc70d38fac14991befa09191c6c858f7a0 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 3 Sep 2024 05:01:04 -0400
Subject: [PATCH] fix: error at compile time on unsupported TypeScript language
 features (#12982)

part of #11502 - to close it completely, we also need to look at using and possibly implement heuristics within bundler plugins to give more details

---------

Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
---
 .changeset/perfect-cooks-shop.md              |  5 ++
 .../svelte/messages/compile-errors/script.md  |  4 ++
 packages/svelte/src/compiler/errors.js        | 10 ++++
 .../phases/1-parse/remove_typescript_nodes.js | 49 +++++++++++++++++--
 .../samples/typescript/main.svelte            | 13 ++++-
 .../ts-unsupported-accessor/errors.json       | 14 ++++++
 .../ts-unsupported-accessor/input.svelte      |  5 ++
 .../ts-unsupported-decorator/errors.json      | 14 ++++++
 .../ts-unsupported-decorator/input.svelte     |  4 ++
 .../samples/ts-unsupported-enum/errors.json   | 14 ++++++
 .../samples/ts-unsupported-enum/input.svelte  |  5 ++
 .../ts-unsupported-modifier/errors.json       | 14 ++++++
 .../ts-unsupported-modifier/input.svelte      |  5 ++
 .../ts-unsupported-namespace/errors.json      | 14 ++++++
 .../ts-unsupported-namespace/input.svelte     |  5 ++
 packages/svelte/tests/validator/test.ts       | 18 +++++--
 16 files changed, 184 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/perfect-cooks-shop.md
 create mode 100644 packages/svelte/tests/validator/samples/ts-unsupported-accessor/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/ts-unsupported-accessor/input.svelte
 create mode 100644 packages/svelte/tests/validator/samples/ts-unsupported-decorator/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/ts-unsupported-decorator/input.svelte
 create mode 100644 packages/svelte/tests/validator/samples/ts-unsupported-enum/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/ts-unsupported-enum/input.svelte
 create mode 100644 packages/svelte/tests/validator/samples/ts-unsupported-modifier/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/ts-unsupported-modifier/input.svelte
 create mode 100644 packages/svelte/tests/validator/samples/ts-unsupported-namespace/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/ts-unsupported-namespace/input.svelte

diff --git a/.changeset/perfect-cooks-shop.md b/.changeset/perfect-cooks-shop.md
new file mode 100644
index 000000000000..b698e6a648c0
--- /dev/null
+++ b/.changeset/perfect-cooks-shop.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: error at compile time on unsupported TypeScript language features
diff --git a/packages/svelte/messages/compile-errors/script.md b/packages/svelte/messages/compile-errors/script.md
index 47dbac6eab70..7310749f1bb4 100644
--- a/packages/svelte/messages/compile-errors/script.md
+++ b/packages/svelte/messages/compile-errors/script.md
@@ -159,3 +159,7 @@
 > Cannot reference store value outside a `.svelte` file
 
 Using a `$` prefix to refer to the value of a store is only possible inside `.svelte` files, where Svelte can automatically create subscriptions when a component is mounted and unsubscribe when the component is unmounted. Consider migrating to runes instead.
+
+## typescript_invalid_feature
+
+> TypeScript language features like %feature% are not natively supported, and their use is generally discouraged. Outside of `<script>` tags, these features are not supported. For use within `<script>` tags, you will need to use a preprocessor to convert it to JavaScript before it gets passed to the Svelte compiler. If you are using `vitePreprocess`, make sure to specifically enable preprocessing script tags (`vitePreprocess({ script: true })`)
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index ae89f4902e88..c4714e2dbc62 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -434,6 +434,16 @@ export function store_invalid_subscription_module(node) {
 	e(node, "store_invalid_subscription_module", "Cannot reference store value outside a `.svelte` file");
 }
 
+/**
+ * TypeScript language features like %feature% are not natively supported, and their use is generally discouraged. Outside of `<script>` tags, these features are not supported. For use within `<script>` tags, you will need to use a preprocessor to convert it to JavaScript before it gets passed to the Svelte compiler. If you are using `vitePreprocess`, make sure to specifically enable preprocessing script tags (`vitePreprocess({ script: true })`)
+ * @param {null | number | NodeLike} node
+ * @param {string} feature
+ * @returns {never}
+ */
+export function typescript_invalid_feature(node, feature) {
+	e(node, "typescript_invalid_feature", `TypeScript language features like ${feature} are not natively supported, and their use is generally discouraged. Outside of \`<script>\` tags, these features are not supported. For use within \`<script>\` tags, you will need to use a preprocessor to convert it to JavaScript before it gets passed to the Svelte compiler. If you are using \`vitePreprocess\`, make sure to specifically enable preprocessing script tags (\`vitePreprocess({ script: true })\`)`);
+}
+
 /**
  * Declaration cannot be empty
  * @param {null | number | NodeLike} node
diff --git a/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js b/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js
index c712bc1ffd51..872b71a4dfd5 100644
--- a/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js
+++ b/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js
@@ -2,6 +2,7 @@
 /** @import { FunctionExpression, FunctionDeclaration } from 'estree' */
 import { walk } from 'zimmerframe';
 import * as b from '../../utils/builders.js';
+import * as e from '../../errors.js';
 
 /**
  * @param {FunctionExpression | FunctionDeclaration} node
@@ -16,6 +17,9 @@ function remove_this_param(node, context) {
 
 /** @type {Visitors<any, null>} */
 const visitors = {
+	Decorator(node) {
+		e.typescript_invalid_feature(node, 'decorators (related TSC proposal is not stage 4 yet)');
+	},
 	ImportDeclaration(node) {
 		if (node.importKind === 'type') return b.empty;
 
@@ -52,6 +56,14 @@ const visitors = {
 		if (node.exportKind === 'type') return b.empty;
 		return node;
 	},
+	PropertyDefinition(node) {
+		if (node.accessor) {
+			e.typescript_invalid_feature(
+				node,
+				'accessor fields (related TSC proposal is not stage 4 yet)'
+			);
+		}
+	},
 	TSAsExpression(node, context) {
 		return context.visit(node.expression);
 	},
@@ -73,10 +85,13 @@ const visitors = {
 	TSTypeParameterInstantiation() {
 		return b.empty;
 	},
-	TSEnumDeclaration() {
-		return b.empty;
+	TSEnumDeclaration(node) {
+		e.typescript_invalid_feature(node, 'enums');
 	},
-	TSParameterProperty(node) {
+	TSParameterProperty(node, context) {
+		if (node.accessibility && context.path.at(-2)?.kind === 'constructor') {
+			e.typescript_invalid_feature(node, 'accessibility modifiers on constructor parameters');
+		}
 		return node.parameter;
 	},
 	Identifier(node) {
@@ -89,7 +104,33 @@ const visitors = {
 		return node;
 	},
 	FunctionExpression: remove_this_param,
-	FunctionDeclaration: remove_this_param
+	FunctionDeclaration: remove_this_param,
+	TSDeclareFunction() {
+		return b.empty;
+	},
+	ClassDeclaration(node, context) {
+		if (node.declare) {
+			return b.empty;
+		}
+		return context.next();
+	},
+	VariableDeclaration(node, context) {
+		if (node.declare) {
+			return b.empty;
+		}
+		return context.next();
+	},
+	TSModuleDeclaration(node, context) {
+		if (!node.body) return b.empty;
+
+		// namespaces can contain non-type nodes
+		const cleaned = /** @type {any[]} */ (node.body.body).map((entry) => context.visit(entry));
+		if (cleaned.some((entry) => entry !== b.empty)) {
+			e.typescript_invalid_feature(node, 'namespaces with non-type nodes');
+		}
+
+		return b.empty;
+	}
 };
 
 /**
diff --git a/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte b/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte
index 549e0f91e5d1..d1c4f361babb 100644
--- a/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte
@@ -9,7 +9,18 @@
 	}
 
 	class Foo {
-		constructor(public readonly name: string) {}
+		constructor(readonly name: string) {}
+	}
+
+	declare const declared_const: number;
+	declare function declared_fn(): void;
+	declare class declared_class {
+		foo: number;
+	}
+
+	declare module 'foobar' {}
+	namespace SomeNamespace {
+		export type Foo = true
 	}
 
 	export type { Hello };
diff --git a/packages/svelte/tests/validator/samples/ts-unsupported-accessor/errors.json b/packages/svelte/tests/validator/samples/ts-unsupported-accessor/errors.json
new file mode 100644
index 000000000000..641a569f9ddf
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/ts-unsupported-accessor/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "typescript_invalid_feature",
+		"message": "TypeScript language features like accessor fields (related TSC proposal is not stage 4 yet) are not natively supported, and their use is generally discouraged. Outside of `<script>` tags, these features are not supported. For use within `<script>` tags, you will need to use a preprocessor to convert it to JavaScript before it gets passed to the Svelte compiler. If you are using `vitePreprocess`, make sure to specifically enable preprocessing script tags (`vitePreprocess({ script: true })`)",
+		"start": {
+			"line": 3,
+			"column": 2
+		},
+		"end": {
+			"line": 3,
+			"column": 17
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/ts-unsupported-accessor/input.svelte b/packages/svelte/tests/validator/samples/ts-unsupported-accessor/input.svelte
new file mode 100644
index 000000000000..7c983fae75f6
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/ts-unsupported-accessor/input.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	class Foo {
+		accessor y = 1;
+	}
+</script>
diff --git a/packages/svelte/tests/validator/samples/ts-unsupported-decorator/errors.json b/packages/svelte/tests/validator/samples/ts-unsupported-decorator/errors.json
new file mode 100644
index 000000000000..427cac76f693
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/ts-unsupported-decorator/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "typescript_invalid_feature",
+		"message": "TypeScript language features like decorators (related TSC proposal is not stage 4 yet) are not natively supported, and their use is generally discouraged. Outside of `<script>` tags, these features are not supported. For use within `<script>` tags, you will need to use a preprocessor to convert it to JavaScript before it gets passed to the Svelte compiler. If you are using `vitePreprocess`, make sure to specifically enable preprocessing script tags (`vitePreprocess({ script: true })`)",
+		"start": {
+			"line": 2,
+			"column": 4
+		},
+		"end": {
+			"line": 2,
+			"column": 10
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/ts-unsupported-decorator/input.svelte b/packages/svelte/tests/validator/samples/ts-unsupported-decorator/input.svelte
new file mode 100644
index 000000000000..ceb3a8775e58
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/ts-unsupported-decorator/input.svelte
@@ -0,0 +1,4 @@
+<script lang="ts">
+    @foo()
+	class Foo {}
+</script>
diff --git a/packages/svelte/tests/validator/samples/ts-unsupported-enum/errors.json b/packages/svelte/tests/validator/samples/ts-unsupported-enum/errors.json
new file mode 100644
index 000000000000..cd972dd86a95
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/ts-unsupported-enum/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "typescript_invalid_feature",
+		"message": "TypeScript language features like enums are not natively supported, and their use is generally discouraged. Outside of `<script>` tags, these features are not supported. For use within `<script>` tags, you will need to use a preprocessor to convert it to JavaScript before it gets passed to the Svelte compiler. If you are using `vitePreprocess`, make sure to specifically enable preprocessing script tags (`vitePreprocess({ script: true })`)",
+		"start": {
+			"line": 2,
+			"column": 1
+		},
+		"end": {
+			"line": 4,
+			"column": 2
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/ts-unsupported-enum/input.svelte b/packages/svelte/tests/validator/samples/ts-unsupported-enum/input.svelte
new file mode 100644
index 000000000000..15d6b41fb3fc
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/ts-unsupported-enum/input.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	enum Foo {
+		bar = 1
+	}
+</script>
diff --git a/packages/svelte/tests/validator/samples/ts-unsupported-modifier/errors.json b/packages/svelte/tests/validator/samples/ts-unsupported-modifier/errors.json
new file mode 100644
index 000000000000..803ebdf980a6
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/ts-unsupported-modifier/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "typescript_invalid_feature",
+		"message": "TypeScript language features like accessibility modifiers on constructor parameters are not natively supported, and their use is generally discouraged. Outside of `<script>` tags, these features are not supported. For use within `<script>` tags, you will need to use a preprocessor to convert it to JavaScript before it gets passed to the Svelte compiler. If you are using `vitePreprocess`, make sure to specifically enable preprocessing script tags (`vitePreprocess({ script: true })`)",
+		"start": {
+			"line": 3,
+			"column": 14
+		},
+		"end": {
+			"line": 3,
+			"column": 31
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/ts-unsupported-modifier/input.svelte b/packages/svelte/tests/validator/samples/ts-unsupported-modifier/input.svelte
new file mode 100644
index 000000000000..0ab6f362ed54
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/ts-unsupported-modifier/input.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	class Foo {
+		constructor(private x: number) {}
+	}
+</script>
diff --git a/packages/svelte/tests/validator/samples/ts-unsupported-namespace/errors.json b/packages/svelte/tests/validator/samples/ts-unsupported-namespace/errors.json
new file mode 100644
index 000000000000..c9f45d3a4199
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/ts-unsupported-namespace/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "typescript_invalid_feature",
+		"message": "TypeScript language features like namespaces with non-type nodes are not natively supported, and their use is generally discouraged. Outside of `<script>` tags, these features are not supported. For use within `<script>` tags, you will need to use a preprocessor to convert it to JavaScript before it gets passed to the Svelte compiler. If you are using `vitePreprocess`, make sure to specifically enable preprocessing script tags (`vitePreprocess({ script: true })`)",
+		"start": {
+			"line": 2,
+			"column": 1
+		},
+		"end": {
+			"line": 4,
+			"column": 2
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/ts-unsupported-namespace/input.svelte b/packages/svelte/tests/validator/samples/ts-unsupported-namespace/input.svelte
new file mode 100644
index 000000000000..abd62d9dda59
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/ts-unsupported-namespace/input.svelte
@@ -0,0 +1,5 @@
+<script module lang="ts">
+	namespace SomeNamespace {
+		export const foo = true;
+	}
+</script>
diff --git a/packages/svelte/tests/validator/test.ts b/packages/svelte/tests/validator/test.ts
index f419c6360d8f..1dcc5a58d5a5 100644
--- a/packages/svelte/tests/validator/test.ts
+++ b/packages/svelte/tests/validator/test.ts
@@ -53,10 +53,20 @@ const { test, run } = suite<ValidatorTest>(async (config, cwd) => {
 	const expected = expected_errors && expected_errors[0];
 
 	if (error && expected) {
-		assert.equal(error.code, expected.code);
-		assert.equal(error.message, expected.message);
-		assert.deepEqual({ line: error.start?.line, column: error.start?.column }, expected.start);
-		assert.deepEqual({ line: error.end?.line, column: error.end?.column }, expected.end);
+		assert.deepEqual(
+			{
+				code: error.code,
+				message: error.message,
+				start: { line: error.start?.line, column: error.start?.column },
+				end: { line: error.end?.line, column: error.end?.column }
+			},
+			{
+				code: expected.code,
+				message: expected.message,
+				start: expected.start,
+				end: expected.end
+			}
+		);
 	} else if (expected) {
 		throw new Error(`Expected an error: ${expected.message}`);
 	} else if (error) {