fix: add compiler error for invalid <p> contents (#10201)

* fix: add compiler error for invalid <p> contents

* add test

Author: trueadm

.changeset/empty-tools-share.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: add compiler error for invalid <p> contents

packages/svelte/src/compiler/phases/1-parse/utils/html.js

@@ -153,6 +153,36 @@ const disallowed_contents = {
 	th: new Set(['td', 'th', 'tr'])
 };
 
+export const disallowed_parapgraph_contents = [
+	'address',
+	'article',
+	'aside',
+	'blockquote',
+	'details',
+	'div',
+	'dl',
+	'fieldset',
+	'figcapture',
+	'figure',
+	'footer',
+	'form',
+	'h1',
+	'h2',
+	'h3',
+	'h4',
+	'h5',
+	'h6',
+	'header',
+	'hr',
+	'menu',
+	'nav',
+	'ol',
+	'pre',
+	'section',
+	'table',
+	'ul'
+];
+
 for (const interactive_element of interactive_elements) {
 	disallowed_contents[interactive_element] = interactive_elements;
 }

packages/svelte/src/compiler/phases/2-analyze/validation.js

@@ -7,7 +7,7 @@ import {
 } from '../../utils/ast.js';
 import { warn } from '../../warnings.js';
 import fuzzymatch from '../1-parse/utils/fuzzymatch.js';
-import { interactive_elements } from '../1-parse/utils/html.js';
+import { disallowed_parapgraph_contents, interactive_elements } from '../1-parse/utils/html.js';
 import { binding_properties } from '../bindings.js';
 import { ContentEditableBindings, EventModifiers, SVGElements } from '../constants.js';
 import { is_custom_element_node } from '../nodes.js';
@@ -544,6 +544,15 @@ export const validation = {
 			}
 		}
 
+		if (disallowed_parapgraph_contents.includes(node.name)) {
+			const path = context.path;
+			for (let parent of path) {
+				if (parent.type === 'RegularElement' && parent.name === 'p') {
+					error(node, 'invalid-node-placement', `<${node.name}>`, parent.name);
+				}
+			}
+		}
+
 		context.next({
 			...context.state,
 			parent_element: node.name

packages/svelte/tests/validator/samples/invalid-node-placement-2/errors.json

@@ -0,0 +1,14 @@
+[
+	{
+		"code": "invalid-node-placement",
+		"message": "<div> is invalid inside <p>",
+		"start": {
+			"line": 4,
+			"column": 3
+		},
+		"end": {
+			"line": 4,
+			"column": 17
+		}
+	}
+]

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

@@ -0,0 +1,7 @@
+<div>
+	<p>
+		<span>
+			<div>foo</div>
+		</span>
+	</p>
+</div>