do not reuse claimed nodes if the html does not match

Author: tanhauhau

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'});`);

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;

test/hydration/samples/fix-html-2/_after.html

@@ -0,0 +1,3 @@
+<h2>Hello World</h2>
+<div>xxxxxxx</div><span>yyyy<b>yyyy</b>yyyy</span><p>zzzzzz</p>
+<p id="p">Bye World</p>

test/hydration/samples/fix-html-2/_before.html

@@ -0,0 +1,8 @@
+<h1>Hello World</h1>
+<!-- HTML_TAG_START -->
+<div>aaaaaaa</div>
+<div>bbbbbbb</div>
+<p>cccccc</p>
+<span>eeee<b>eee</b>eeee</span>
+<!-- HTML_TAG_END -->
+<p id="p">Bye World</p>

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);
+	}
+};

test/hydration/samples/fix-html-2/main.svelte

@@ -0,0 +1,10 @@
+<script>
+  const content = `<div>xxxxxxx</div>
+<span>yyyy<b>yyyy</b>yyyy</span>
+<p>zzzzzz</p>
+  `;
+</script>
+
+<h2>Hello World</h2>
+{@html content}
+<p id="p">Bye World</p>

test/hydration/samples/fix-html/_after.html

@@ -0,0 +1,3 @@
+<h1>Hello World</h1>
+<div>xxxxxxx</div><span>yyyy<b>yyyy</b>yyyy</span><p>zzzzzz</p>
+<p id="p">Bye World</p>

test/hydration/samples/fix-html/_before.html

@@ -0,0 +1,8 @@
+<h1>Hello World</h1>
+<!-- HTML_TAG_START -->
+<div>aaaaaaa</div>
+<div>bbbbbbb</div>
+<p>cccccc</p>
+<span>eeee<b>eee</b>eeee</span>
+<!-- HTML_TAG_END -->
+<p id="p">Bye World</p>

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);
+	}
+};

test/hydration/samples/fix-html/main.svelte

@@ -0,0 +1,10 @@
+<script>
+  const content = `<div>xxxxxxx</div>
+<span>yyyy<b>yyyy</b>yyyy</span>
+<p>zzzzzz</p>
+  `;
+</script>
+
+<h1>Hello World</h1>
+{@html content}
+<p id="p">Bye World</p>