From d7f5f59a4fe300894058e654640a87d83923e7ad Mon Sep 17 00:00:00 2001
From: Jeremiasz Major <jrh.mjr@gmail.com>
Date: Fri, 19 Apr 2024 16:08:19 +0200
Subject: [PATCH 1/2] warn on self-closing non-void special elements

---
 .../compiler/phases/2-analyze/validation.js   | 22 +++++++++++-
 packages/svelte/src/compiler/warnings.js      |  2 +-
 .../invalid-self-closing-tag/input.svelte     | 30 ++++++++++++++--
 .../invalid-self-closing-tag/warnings.json    | 36 +++++++++++++++----
 4 files changed, 79 insertions(+), 11 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/2-analyze/validation.js b/packages/svelte/src/compiler/phases/2-analyze/validation.js
index 0f6f1bf6dd30..6b01f3430950 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/validation.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/validation.js
@@ -676,11 +676,21 @@ const validation = {
 			error(node, 'invalid-style-directive-modifier');
 		}
 	},
-	SvelteHead(node) {
+	SvelteHead(node, context) {
 		const attribute = node.attributes[0];
 		if (attribute) {
 			error(attribute, 'illegal-svelte-head-attribute');
 		}
+
+		if (context.state.analysis.source[node.end - 2] === '/') {
+			warn(
+				context.state.analysis.warnings,
+				node,
+				context.path,
+				'invalid-self-closing-tag',
+				node.name
+			);
+		}
 	},
 	SvelteElement(node, context) {
 		validate_element(node, context);
@@ -704,6 +714,16 @@ const validation = {
 				error(attribute, 'invalid-svelte-fragment-attribute');
 			}
 		}
+
+		if (context.state.analysis.source[node.end - 2] === '/') {
+			warn(
+				context.state.analysis.warnings,
+				node,
+				context.path,
+				'invalid-self-closing-tag',
+				node.name
+			);
+		}
 	},
 	SlotElement(node) {
 		for (const attribute of node.attributes) {
diff --git a/packages/svelte/src/compiler/warnings.js b/packages/svelte/src/compiler/warnings.js
index fc5897aa9300..d81cd5728453 100644
--- a/packages/svelte/src/compiler/warnings.js
+++ b/packages/svelte/src/compiler/warnings.js
@@ -253,7 +253,7 @@ const options = {
 const misc = {
 	/** @param {string} name */
 	'invalid-self-closing-tag': (name) =>
-		`Self-closing HTML tags for non-void elements are ambiguous — use <${name} ...></${name}> rather than <${name} ... />`
+		`Self-closing tags for non-void elements are ambiguous — use <${name} ...></${name}> rather than <${name} ... />`
 };
 
 /** @satisfies {Warnings} */
diff --git a/packages/svelte/tests/validator/samples/invalid-self-closing-tag/input.svelte b/packages/svelte/tests/validator/samples/invalid-self-closing-tag/input.svelte
index 8b09b6f9a3e3..bbfe9cfd7909 100644
--- a/packages/svelte/tests/validator/samples/invalid-self-closing-tag/input.svelte
+++ b/packages/svelte/tests/validator/samples/invalid-self-closing-tag/input.svelte
@@ -1,7 +1,31 @@
-<!-- valid -->
-<link />
+<!-- valid - foreign namespace -->
 <svg><g /></svg>
 
-<!-- invalid -->
+<!-- not reported - void tags -->
+<link />
+<br/>
+<svelte:options />
+<svelte:window on:event={() => null} />
+<svelte:document on:event={() => null} />
+<svelte:body on:event={() => null} />
+
+<!-- not reported - deprecated -->
+<slot />
+
+<!-- not reported - components -->
+{#if true}
+	<svelte:self />
+{/if}
+<Foo />
+<svelte:component this={"foo"} />
+
+<!-- not reported - `this` can be bound to both void and non-void tags -->
+<svelte:element this="dif" />
+
+<!-- invalid and reported -->
 <div />
 <my-thing />
+<svelte:head />
+<Foo>
+	<svelte:fragment slot="footer" />
+</Foo>
diff --git a/packages/svelte/tests/validator/samples/invalid-self-closing-tag/warnings.json b/packages/svelte/tests/validator/samples/invalid-self-closing-tag/warnings.json
index 772140c44ec6..9a9182364e58 100644
--- a/packages/svelte/tests/validator/samples/invalid-self-closing-tag/warnings.json
+++ b/packages/svelte/tests/validator/samples/invalid-self-closing-tag/warnings.json
@@ -1,26 +1,50 @@
 [
 	{
 		"code": "invalid-self-closing-tag",
-		"message": "Self-closing HTML tags for non-void elements are ambiguous — use <div ...></div> rather than <div ... />",
+		"message": "Self-closing tags for non-void elements are ambiguous — use <div ...></div> rather than <div ... />",
 		"start": {
-			"line": 6,
+			"line": 26,
 			"column": 0
 		},
 		"end": {
-			"line": 6,
+			"line": 26,
 			"column": 7
 		}
 	},
 	{
 		"code": "invalid-self-closing-tag",
-		"message": "Self-closing HTML tags for non-void elements are ambiguous — use <my-thing ...></my-thing> rather than <my-thing ... />",
+		"message": "Self-closing tags for non-void elements are ambiguous — use <my-thing ...></my-thing> rather than <my-thing ... />",
 		"start": {
-			"line": 7,
+			"line": 27,
 			"column": 0
 		},
 		"end": {
-			"line": 7,
+			"line": 27,
 			"column": 12
 		}
+	},
+	{
+		"code": "invalid-self-closing-tag",
+		"message": "Self-closing tags for non-void elements are ambiguous — use <svelte:head ...></svelte:head> rather than <svelte:head ... />",
+		"start": {
+			"line": 28,
+			"column": 0
+		},
+		"end": {
+			"line": 28,
+			"column": 15
+		}
+	},
+	{
+		"code": "invalid-self-closing-tag",
+		"message": "Self-closing tags for non-void elements are ambiguous — use <svelte:fragment ...></svelte:fragment> rather than <svelte:fragment ... />",
+		"start": {
+			"line": 30,
+			"column": 1
+		},
+		"end": {
+			"line": 30,
+			"column": 34
+		}
 	}
 ]

From 6ae0a93a3a5244179bcbb9ceb72d7f79acff2994 Mon Sep 17 00:00:00 2001
From: Jeremiasz Major <jrh.mjr@gmail.com>
Date: Fri, 19 Apr 2024 17:01:25 +0200
Subject: [PATCH 2/2] add changeset

---
 .changeset/gentle-hairs-confess.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/gentle-hairs-confess.md

diff --git a/.changeset/gentle-hairs-confess.md b/.changeset/gentle-hairs-confess.md
new file mode 100644
index 000000000000..44e88e7c202a
--- /dev/null
+++ b/.changeset/gentle-hairs-confess.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+breaking: warn on self-closing non-void special elements