fix: relax parent validation

This reverts #13255 / #13158, and helps with the validation error part of #14120

The revert is justified because people should be free to render a component in isolation and then append it somewhere where they know the rendered output is valid. If someone renders a tag at the top level that is invalid without a certain parent (which itself is an edge case), then the likelihood that this is done on purpose is much higher than that it's done by accident.
pull/14442/head
Simon Holthausen 2 years ago
parent 4f0dde5207
commit c1d2881a65

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: relax html parent validation

@ -167,25 +167,23 @@ export function is_tag_valid_with_ancestor(tag, ancestors) {
* Returns false if the tag is not allowed inside the parent tag such that it will result
* in the browser repairing the HTML, which will likely result in an error during hydration.
* @param {string} tag
* @param {string | null} parent_tag
* @param {string} parent_tag
* @returns {boolean}
*/
export function is_tag_valid_with_parent(tag, parent_tag) {
if (tag.includes('-') || parent_tag?.includes('-')) return true; // custom elements can be anything
if (parent_tag !== null) {
const disallowed = disallowed_children[parent_tag];
const disallowed = disallowed_children[parent_tag];
if (disallowed) {
if ('direct' in disallowed && disallowed.direct.includes(tag)) {
return false;
}
if ('descendant' in disallowed && disallowed.descendant.includes(tag)) {
return false;
}
if ('only' in disallowed && disallowed.only) {
return disallowed.only.includes(tag);
}
if (disallowed) {
if ('direct' in disallowed && disallowed.direct.includes(tag)) {
return false;
}
if ('descendant' in disallowed && disallowed.descendant.includes(tag)) {
return false;
}
if ('only' in disallowed && disallowed.only) {
return disallowed.only.includes(tag);
}
}

@ -34,14 +34,12 @@ function stringify(element) {
/**
* @param {Payload} payload
* @param {Element | null} parent
* @param {Element} parent
* @param {Element} child
*/
function print_error(payload, parent, child) {
var message =
(parent === null
? `node_invalid_placement_ssr: ${stringify(child)} needs a valid parent element\n\n`
: `node_invalid_placement_ssr: ${stringify(parent)} cannot contain ${stringify(child)}\n\n`) +
`node_invalid_placement_ssr: ${stringify(parent)} cannot contain ${stringify(child)}\n\n` +
'This can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.';
if ((seen ??= new Set()).has(message)) return;
@ -85,8 +83,6 @@ export function push_element(payload, tag, line, column) {
}
ancestor = ancestor.parent;
}
} else if (!is_tag_valid_with_parent(tag, null)) {
print_error(payload, null, child);
}
parent = child;

@ -5,7 +5,7 @@ export default test({
dev: true
},
html: `<p></p><h1>foo</h1><p></p><form></form> hello`,
html: `<p></p><h1>foo</h1><p></p><form></form>`,
recover: true,
@ -13,8 +13,7 @@ export default test({
errors: [
'node_invalid_placement_ssr: `<p>` (main.svelte:6:0) cannot contain `<h1>` (h1.svelte:1:0)\n\nThis can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.',
'node_invalid_placement_ssr: `<form>` (main.svelte:9:0) cannot contain `<form>` (form.svelte:1:0)\n\nThis can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.',
'node_invalid_placement_ssr: `<td>` (main.svelte:12:0) needs a valid parent element\n\nThis can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.'
'node_invalid_placement_ssr: `<form>` (main.svelte:9:0) cannot contain `<form>` (form.svelte:1:0)\n\nThis can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.'
],
warnings: [

Loading…
Cancel
Save