Merge bbc931e774 into ce89035ecb

.changeset/violet-berries-repair.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: report invalid placement for all elements that auto-close a `<p>`

packages/svelte/src/html-tree-validation.js

@@ -10,15 +10,22 @@ const autoclosing_children = {
 	// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt#technical_summary
 	dt: { descendant: ['dt', 'dd'], reset_by: ['dl'] },
 	dd: { descendant: ['dt', 'dd'], reset_by: ['dl'] },
+	// https://html.spec.whatwg.org/multipage/parsing.html#parsing-main-inbody
 	p: {
 		descendant: [
 			'address',
 			'article',
 			'aside',
 			'blockquote',
+			'center',
+			'details',
+			'dialog',
+			'dir',
 			'div',
 			'dl',
 			'fieldset',
+			'figcaption',
+			'figure',
 			'footer',
 			'form',
 			'h1',
@@ -36,7 +43,9 @@ const autoclosing_children = {
 			'ol',
 			'p',
 			'pre',
+			'search',
 			'section',
+			'summary',
 			'table',
 			'ul'
 		]

packages/svelte/tests/validator/samples/invalid-node-placement-9/input.svelte

@@ -0,0 +1,13 @@
+<p>
+	{#if foo}
+		<center>a</center>
+		<details>b</details>
+		<dialog>c</dialog>
+		<dir>d</dir>
+		<figure>e</figure>
+		<search>f</search>
+		<summary>g</summary>
+		<!-- svelte-ignore a11y_figcaption_parent -->
+		<figcaption>h</figcaption>
+	{/if}
+</p>

packages/svelte/tests/validator/samples/invalid-node-placement-9/warnings.json

@@ -0,0 +1,98 @@
+[
+	{
+		"code": "node_invalid_placement_ssr",
+		"message": "`<center>` cannot be a child of `<p>`. When rendering this component on the server, the resulting HTML will be modified by the browser (by moving, removing, or inserting elements), likely resulting in a `hydration_mismatch` warning",
+		"start": {
+			"line": 3,
+			"column": 2
+		},
+		"end": {
+			"line": 3,
+			"column": 20
+		}
+	},
+	{
+		"code": "node_invalid_placement_ssr",
+		"message": "`<details>` cannot be a child of `<p>`. When rendering this component on the server, the resulting HTML will be modified by the browser (by moving, removing, or inserting elements), likely resulting in a `hydration_mismatch` warning",
+		"start": {
+			"line": 4,
+			"column": 2
+		},
+		"end": {
+			"line": 4,
+			"column": 22
+		}
+	},
+	{
+		"code": "node_invalid_placement_ssr",
+		"message": "`<dialog>` cannot be a child of `<p>`. When rendering this component on the server, the resulting HTML will be modified by the browser (by moving, removing, or inserting elements), likely resulting in a `hydration_mismatch` warning",
+		"start": {
+			"line": 5,
+			"column": 2
+		},
+		"end": {
+			"line": 5,
+			"column": 20
+		}
+	},
+	{
+		"code": "node_invalid_placement_ssr",
+		"message": "`<dir>` cannot be a child of `<p>`. When rendering this component on the server, the resulting HTML will be modified by the browser (by moving, removing, or inserting elements), likely resulting in a `hydration_mismatch` warning",
+		"start": {
+			"line": 6,
+			"column": 2
+		},
+		"end": {
+			"line": 6,
+			"column": 14
+		}
+	},
+	{
+		"code": "node_invalid_placement_ssr",
+		"message": "`<figure>` cannot be a child of `<p>`. When rendering this component on the server, the resulting HTML will be modified by the browser (by moving, removing, or inserting elements), likely resulting in a `hydration_mismatch` warning",
+		"start": {
+			"line": 7,
+			"column": 2
+		},
+		"end": {
+			"line": 7,
+			"column": 20
+		}
+	},
+	{
+		"code": "node_invalid_placement_ssr",
+		"message": "`<search>` cannot be a child of `<p>`. When rendering this component on the server, the resulting HTML will be modified by the browser (by moving, removing, or inserting elements), likely resulting in a `hydration_mismatch` warning",
+		"start": {
+			"line": 8,
+			"column": 2
+		},
+		"end": {
+			"line": 8,
+			"column": 20
+		}
+	},
+	{
+		"code": "node_invalid_placement_ssr",
+		"message": "`<summary>` cannot be a child of `<p>`. When rendering this component on the server, the resulting HTML will be modified by the browser (by moving, removing, or inserting elements), likely resulting in a `hydration_mismatch` warning",
+		"start": {
+			"line": 9,
+			"column": 2
+		},
+		"end": {
+			"line": 9,
+			"column": 22
+		}
+	},
+	{
+		"code": "node_invalid_placement_ssr",
+		"message": "`<figcaption>` cannot be a child of `<p>`. When rendering this component on the server, the resulting HTML will be modified by the browser (by moving, removing, or inserting elements), likely resulting in a `hydration_mismatch` warning",
+		"start": {
+			"line": 11,
+			"column": 2
+		},
+		"end": {
+			"line": 11,
+			"column": 28
+		}
+	}
+]