diff --git a/packages/svelte/messages/compile-errors/template.md b/packages/svelte/messages/compile-errors/template.md index fe83777536..6316c49ffe 100644 --- a/packages/svelte/messages/compile-errors/template.md +++ b/packages/svelte/messages/compile-errors/template.md @@ -190,7 +190,7 @@ ## node_invalid_placement -> %thing% is invalid inside <%parent%> +> %thing% is invalid inside `<%parent%>` HTML has some restrictions where certain elements can appear. For example, a `
` is invalid. Some violations "only" result in invalid HTML, others result in the HTML being repaired by the browser, resulting in content shifting around. Some examples: diff --git a/packages/svelte/messages/compile-warnings/template.md b/packages/svelte/messages/compile-warnings/template.md index a6d07ea1d9..2cbad157cb 100644 --- a/packages/svelte/messages/compile-warnings/template.md +++ b/packages/svelte/messages/compile-warnings/template.md @@ -40,7 +40,7 @@ ## 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 +> %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 HTML has some restrictions where certain elements can appear. For example, a `
` is invalid. Some violations "only" result in invalid HTML, others result in the HTML being repaired by the browser, resulting in content shifting around. Some examples: diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js index 040356df25..e3e3eb76cd 100644 --- a/packages/svelte/src/compiler/errors.js +++ b/packages/svelte/src/compiler/errors.js @@ -978,14 +978,14 @@ export function mixed_event_handler_syntaxes(node, name) { } /** - * %thing% is invalid inside <%parent%> + * %thing% is invalid inside `<%parent%>` * @param {null | number | NodeLike} node * @param {string} thing * @param {string} parent * @returns {never} */ export function node_invalid_placement(node, thing, parent) { - e(node, "node_invalid_placement", `${thing} is invalid inside <${parent}>`); + e(node, "node_invalid_placement", `${thing} is invalid inside \`<${parent}>\``); } /** diff --git a/packages/svelte/src/compiler/phases/2-analyze/validation.js b/packages/svelte/src/compiler/phases/2-analyze/validation.js index 5dc893ced9..eda5ed42b0 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/validation.js +++ b/packages/svelte/src/compiler/phases/2-analyze/validation.js @@ -624,9 +624,13 @@ const validation = { ) { if (!is_tag_valid_with_parent(node.name, context.state.parent_element)) { if (only_warn) { - w.node_invalid_placement_ssr(node, `<${node.name}>`, context.state.parent_element); + w.node_invalid_placement_ssr( + node, + `\`<${node.name}>\``, + context.state.parent_element + ); } else { - e.node_invalid_placement(node, `<${node.name}>`, context.state.parent_element); + e.node_invalid_placement(node, `\`<${node.name}>\``, context.state.parent_element); } } @@ -635,9 +639,9 @@ const validation = { } else if (ancestor.type === 'RegularElement') { if (!is_tag_valid_with_ancestor(node.name, ancestor.name)) { if (only_warn) { - w.node_invalid_placement_ssr(node, `<${node.name}>`, ancestor.name); + w.node_invalid_placement_ssr(node, `\`<${node.name}>\``, ancestor.name); } else { - e.node_invalid_placement(node, `<${node.name}>`, ancestor.name); + e.node_invalid_placement(node, `\`<${node.name}>\``, ancestor.name); } } } else if ( @@ -830,7 +834,7 @@ const validation = { if (!node.parent) return; if (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); + e.node_invalid_placement(node, '`{expression}`', context.state.parent_element); } } } diff --git a/packages/svelte/src/compiler/warnings.js b/packages/svelte/src/compiler/warnings.js index d2c6b707dd..ca3eaf13f6 100644 --- a/packages/svelte/src/compiler/warnings.js +++ b/packages/svelte/src/compiler/warnings.js @@ -741,13 +741,13 @@ 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 + * %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 * @param {null | NodeLike} node * @param {string} thing * @param {string} parent */ 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`); + 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`); } /**