fix: better error messages for invalid HTML trees (sveltejs#14445)

* fix: better error messages for invalid HTML trees closes sveltejs#13331 * fix test * more concise * tweak * tweak messages * adjust tests * tweak message slightly, so it doesn't sound like the bad element is the one we're currently encountering * put locations in generated message * tidy up * consistency * fix --------- Co-authored-by: Rich Harris <rich.harris@vercel.com>

Author: dummdidumm

.changeset/green-pumpkins-ring.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: better error messages for invalid HTML trees

documentation/docs/98-reference/.generated/compile-errors.md

@@ -487,12 +487,12 @@ A component cannot have a default export
 ### node_invalid_placement
 
 ```
-%thing% is invalid inside `<%parent%>`
+%message%. The browser will 'repair' the HTML (by moving, removing, or inserting elements) which breaks Svelte's assumptions about the structure of your components.
 ```
 
 HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
 
-- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` for example (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
+- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
 - `<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)
 - `<table><tr><td>cell</td></tr></table>` will result in `<table><tbody><tr><td>cell</td></tr></tbody></table>` (a `<tbody>` is auto-inserted)
 

documentation/docs/98-reference/.generated/compile-warnings.md

@@ -643,12 +643,12 @@ Svelte 5 components are no longer classes. Instantiate them using `mount` or `hy
 ### node_invalid_placement_ssr
 
 ```
-%thing% is invalid inside `<%parent%>`. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a `hydration_mismatch` warning
+%message%. 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
 ```
 
 HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
 
-- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` for example (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
+- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
 - `<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)
 - `<table><tr><td>cell</td></tr></table>` will result in `<table><tbody><tr><td>cell</td></tr></tbody></table>` (a `<tbody>` is auto-inserted)
 

packages/svelte/messages/compile-errors/template.md

@@ -190,11 +190,11 @@
 
 ## node_invalid_placement
 
-> %thing% is invalid inside `<%parent%>`
+> %message%. The browser will 'repair' the HTML (by moving, removing, or inserting elements) which breaks Svelte's assumptions about the structure of your components.
 
 HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
 
-- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` for example (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
+- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
 - `<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)
 - `<table><tr><td>cell</td></tr></table>` will result in `<table><tbody><tr><td>cell</td></tr></tbody></table>` (a `<tbody>` is auto-inserted)
 

packages/svelte/messages/compile-warnings/template.md

@@ -40,11 +40,11 @@
 
 ## node_invalid_placement_ssr
 
-> %thing% is invalid inside `<%parent%>`. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a `hydration_mismatch` warning
+> %message%. 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
 
 HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
 
-- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` for example (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
+- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
 - `<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)
 - `<table><tr><td>cell</td></tr></table>` will result in `<table><tbody><tr><td>cell</td></tr></tbody></table>` (a `<tbody>` is auto-inserted)
 

packages/svelte/src/compiler/errors.js

@@ -1043,14 +1043,13 @@ export function mixed_event_handler_syntaxes(node, name) {
 }
 
 /**
- * %thing% is invalid inside `<%parent%>`
+ * %message%. The browser will 'repair' the HTML (by moving, removing, or inserting elements) which breaks Svelte's assumptions about the structure of your components.
  * @param {null | number | NodeLike} node
- * @param {string} thing
- * @param {string} parent
+ * @param {string} message
  * @returns {never}
  */
-export function node_invalid_placement(node, thing, parent) {
-e(node, "node_invalid_placement", `${thing} is invalid inside \`<${parent}>\``);
+export function node_invalid_placement(node, message) {
+e(node, "node_invalid_placement", `${message}. The browser will 'repair' the HTML (by moving, removing, or inserting elements) which breaks Svelte's assumptions about the structure of your components.`);
 }
 
 /**

packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js

@@ -12,8 +12,9 @@ export function ExpressionTag(node, context) {
 const in_template = context.path.at(-1)?.type === 'Fragment';
 
 if (in_template && context.state.parent_element) {
-if (!is_tag_valid_with_parent('#text', context.state.parent_element)) {
-e.node_invalid_placement(node, '`{expression}`', context.state.parent_element);
+const message = is_tag_valid_with_parent('#text', context.state.parent_element);
+if (message) {
+e.node_invalid_placement(node, message);
 }
 }
 

packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js

@@ -114,15 +114,12 @@ export function RegularElement(node, context) {
 
 if (!past_parent) {
 if (ancestor.type === 'RegularElement' && ancestor.name === context.state.parent_element) {
-if (!is_tag_valid_with_parent(node.name, context.state.parent_element)) {
+const message = is_tag_valid_with_parent(node.name, context.state.parent_element);
+if (message) {
 if (only_warn) {
-w.node_invalid_placement_ssr(
-node,
-`\`<${node.name}>\``,
-context.state.parent_element
-);
+w.node_invalid_placement_ssr(node, message);
 } else {
-e.node_invalid_placement(node, `\`<${node.name}>\``, context.state.parent_element);
+e.node_invalid_placement(node, message);
 }
 }
 
@@ -131,11 +128,12 @@ export function RegularElement(node, context) {
 } else if (ancestor.type === 'RegularElement') {
 ancestors.push(ancestor.name);
 
-if (!is_tag_valid_with_ancestor(node.name, ancestors)) {
+const message = is_tag_valid_with_ancestor(node.name, ancestors);
+if (message) {
 if (only_warn) {
-w.node_invalid_placement_ssr(node, `\`<${node.name}>\``, ancestor.name);
+w.node_invalid_placement_ssr(node, message);
 } else {
-e.node_invalid_placement(node, `\`<${node.name}>\``, ancestor.name);
+e.node_invalid_placement(node, message);
 }
 }
 } else if (

packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js

@@ -12,8 +12,9 @@ export function Text(node, context) {
 const in_template = context.path.at(-1)?.type === 'Fragment';
 
 if (in_template && context.state.parent_element && regex_not_whitespace.test(node.data)) {
-if (!is_tag_valid_with_parent('#text', context.state.parent_element)) {
-e.node_invalid_placement(node, 'Text node', context.state.parent_element);
+const message = is_tag_valid_with_parent('#text', context.state.parent_element);
+if (message) {
+e.node_invalid_placement(node, message);
 }
 }
 }

packages/svelte/src/compiler/warnings.js

@@ -754,13 +754,12 @@ export function event_directive_deprecated(node, name) {
 }
 
 /**
- * %thing% is invalid inside `<%parent%>`. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a `hydration_mismatch` warning
+ * %message%. 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
  * @param {null | NodeLike} node
- * @param {string} thing
- * @param {string} parent
+ * @param {string} message
  */
-export function node_invalid_placement_ssr(node, thing, parent) {
-w(node, "node_invalid_placement_ssr", `${thing} is invalid inside \`<${parent}>\`. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a \`hydration_mismatch\` warning`);
+export function node_invalid_placement_ssr(node, message) {
+w(node, "node_invalid_placement_ssr", `${message}. 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`);
 }
 
 /**