diff --git a/.changeset/cool-gifts-sniff.md b/.changeset/cool-gifts-sniff.md new file mode 100644 index 000000000000..ab9680309f81 --- /dev/null +++ b/.changeset/cool-gifts-sniff.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: relax html parent validation diff --git a/packages/svelte/src/html-tree-validation.js b/packages/svelte/src/html-tree-validation.js index da5567f56ac4..0ebf45e166c2 100644 --- a/packages/svelte/src/html-tree-validation.js +++ b/packages/svelte/src/html-tree-validation.js @@ -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); } } diff --git a/packages/svelte/src/internal/server/dev.js b/packages/svelte/src/internal/server/dev.js index 61c7c6d5e887..145b37479b3f 100644 --- a/packages/svelte/src/internal/server/dev.js +++ b/packages/svelte/src/internal/server/dev.js @@ -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; diff --git a/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/_config.js b/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/_config.js index f7327d1608e2..d815d10fc73e 100644 --- a/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/_config.js @@ -5,7 +5,7 @@ export default test({ dev: true }, - html: `

foo

hello`, + html: `

foo

`, recover: true, @@ -13,8 +13,7 @@ export default test({ errors: [ 'node_invalid_placement_ssr: `

` (main.svelte:6:0) cannot contain `

` (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: `
` (main.svelte:9:0) cannot contain `` (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: `` (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: `` (main.svelte:9:0) cannot contain `` (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: [ diff --git a/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/main.svelte b/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/main.svelte index 92ccc7283f69..84af67115573 100644 --- a/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/main.svelte +++ b/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/main.svelte @@ -9,4 +9,3 @@
-hello