diff --git a/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts b/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts index 7810d8f099f6..a585e3463b85 100644 --- a/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts +++ b/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts @@ -58,7 +58,7 @@ export default class RawMustacheTagWrapper extends Tag { block.chunks.create.push(b`${html_tag} = new @HtmlTag(${is_svg ? 'true' : 'false'});`); if (this.renderer.options.hydratable) { - block.chunks.claim.push(b`${html_tag} = @claim_html_tag(${_parent_nodes}, ${is_svg ? 'true' : 'false'});`); + block.chunks.claim.push(b`${html_tag} = @claim_html_tag(${_parent_nodes}, ${init}, ${is_svg ? 'true' : 'false'});`); } block.chunks.hydrate.push(b`${html_tag}.a = ${update_anchor};`); block.chunks.mount.push(b`${html_tag}.m(${init}, ${parent_node || '#target'}, ${parent_node ? null : '#anchor'});`); diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index cadc1abbaafa..3fb565217d86 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -492,8 +492,7 @@ function find_comment(nodes, text, start) { return nodes.length; } - -export function claim_html_tag(nodes, is_svg: boolean) { +export function claim_html_tag(nodes, html: string, is_svg: boolean) { // find html opening tag const start_index = find_comment(nodes, 'HTML_TAG_START', 0); const end_index = find_comment(nodes, 'HTML_TAG_END', start_index); @@ -506,6 +505,17 @@ export function claim_html_tag(nodes, is_svg: boolean) { detach(html_tag_nodes[0]); detach(html_tag_nodes[html_tag_nodes.length - 1]); const claimed_nodes = html_tag_nodes.slice(1, html_tag_nodes.length - 1); + + let ssr_html = ''; + for (const n of claimed_nodes) { + ssr_html += n.outerHTML; + } + if (ssr_html !== html) { + for (const n of claimed_nodes) { + detach(n); + } + return new HtmlTagHydration(undefined, is_svg); + } for (const n of claimed_nodes) { n.claim_order = nodes.claim_info.total_claimed; nodes.claim_info.total_claimed += 1; diff --git a/test/hydration/samples/fix-html-2/_after.html b/test/hydration/samples/fix-html-2/_after.html new file mode 100644 index 000000000000..820fdc903848 --- /dev/null +++ b/test/hydration/samples/fix-html-2/_after.html @@ -0,0 +1,3 @@ +
zzzzzz
+Bye World
\ No newline at end of file diff --git a/test/hydration/samples/fix-html-2/_before.html b/test/hydration/samples/fix-html-2/_before.html new file mode 100644 index 000000000000..bffcf7484a07 --- /dev/null +++ b/test/hydration/samples/fix-html-2/_before.html @@ -0,0 +1,8 @@ +cccccc
+eeeeeeeeeee + +Bye World
\ No newline at end of file diff --git a/test/hydration/samples/fix-html-2/_config.js b/test/hydration/samples/fix-html-2/_config.js new file mode 100644 index 000000000000..107ea24d2b4b --- /dev/null +++ b/test/hydration/samples/fix-html-2/_config.js @@ -0,0 +1,15 @@ +export default { + snapshot(target) { + const p = target.querySelector('#p'); + + return { + p + }; + }, + + test(assert, target, snapshot) { + const p = target.querySelector('#p'); + + assert.equal(p, snapshot.p); + } +}; diff --git a/test/hydration/samples/fix-html-2/main.svelte b/test/hydration/samples/fix-html-2/main.svelte new file mode 100644 index 000000000000..145967837a61 --- /dev/null +++ b/test/hydration/samples/fix-html-2/main.svelte @@ -0,0 +1,10 @@ + + +Bye World
\ No newline at end of file diff --git a/test/hydration/samples/fix-html/_after.html b/test/hydration/samples/fix-html/_after.html new file mode 100644 index 000000000000..2064db7fc8f6 --- /dev/null +++ b/test/hydration/samples/fix-html/_after.html @@ -0,0 +1,3 @@ +zzzzzz
+Bye World
\ No newline at end of file diff --git a/test/hydration/samples/fix-html/_before.html b/test/hydration/samples/fix-html/_before.html new file mode 100644 index 000000000000..bffcf7484a07 --- /dev/null +++ b/test/hydration/samples/fix-html/_before.html @@ -0,0 +1,8 @@ +cccccc
+eeeeeeeeeee + +Bye World
\ No newline at end of file diff --git a/test/hydration/samples/fix-html/_config.js b/test/hydration/samples/fix-html/_config.js new file mode 100644 index 000000000000..5634828327ac --- /dev/null +++ b/test/hydration/samples/fix-html/_config.js @@ -0,0 +1,19 @@ +export default { + snapshot(target) { + const p = target.querySelector('#p'); + const h1 = target.querySelector('h1'); + + return { + p, + h1 + }; + }, + + test(assert, target, snapshot) { + const p = target.querySelector('#p'); + const h1 = target.querySelector('h1'); + + assert.equal(p, snapshot.p); + assert.equal(h1, snapshot.h1); + } +}; diff --git a/test/hydration/samples/fix-html/main.svelte b/test/hydration/samples/fix-html/main.svelte new file mode 100644 index 000000000000..72619ed3edb4 --- /dev/null +++ b/test/hydration/samples/fix-html/main.svelte @@ -0,0 +1,10 @@ + + +Bye World
\ No newline at end of file