Ignore HTML comments during hydration

preactjs · Mar 12, 2023 · 11addc8 · 11addc8
1 parent 31e65f4
commit 11addc8
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/src/diff/children.js b/src/diff/children.js
@@ -328,6 +328,12 @@ function placeChild(
 		oldDom = newDom.nextSibling;
 	}
 
+	// Skip over comment nodes. Will be removed right after calling diffChildren
+	// in diff so that the vnode tree matches the DOM tree again.
+	while (oldDom !== null && oldDom.nodeType === 8) {
+		oldDom = oldDom.nextSibling;
+	}
+
 	return oldDom;
 }
 

diff --git a/test/browser/hydrate.test.js b/test/browser/hydrate.test.js
@@ -92,6 +92,7 @@ describe('hydrate()', () => {
 			scratch
 		);
 		expect(scratch.innerHTML).to.equal('<p><i>0</i><b>1</b></p>');
+		expect(getLog()).to.deep.equal(['Comment.remove()']);
 	});
 
 	it('should reuse existing DOM when given components', () => {
@@ -462,5 +463,13 @@ describe('hydrate()', () => {
 		scratch.innerHTML = '<p>hello <!-- c -->foo</p>';
 		hydrate(<p>hello {'foo'}</p>, scratch);
 		expect(scratch.innerHTML).to.equal('<p>hello foo</p>');
+		expect(getLog()).to.deep.equal(['Comment.remove()']);
+	});
+
+	it('should skip over multiple comment nodes', () => {
+		scratch.innerHTML = '<p>hello <!-- a --><!-- b -->foo</p>';
+		hydrate(<p>hello {'foo'}</p>, scratch);
+		expect(scratch.innerHTML).to.equal('<p>hello foo</p>');
+		expect(getLog()).to.deep.equal(['Comment.remove()', 'Comment.remove()']);
 	});
 });