skip comment nodes for placeChild (#4128)

preactjs · Dec 29, 2023 · 899e9d9 · 899e9d9
1 parent da9d488
commit 899e9d9
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/diff/children.js b/src/diff/children.js
@@ -367,7 +367,11 @@ function insert(parentVNode, oldDom, parentDom) {
 		oldDom = parentVNode._dom;
 	}
 
-	return oldDom && oldDom.nextSibling;
+	do {
+		oldDom = oldDom && oldDom.nextSibling;
+	} while (oldDom != null && oldDom.nodeType === 8);
+
+	return oldDom;
 }
 
 /**

diff --git a/test/browser/hydrate.test.js b/test/browser/hydrate.test.js
@@ -50,11 +50,11 @@ describe('hydrate()', () => {
 	beforeEach(() => {
 		scratch = setupScratch();
 		attributesSpy = spyOnElementAttributes();
+		clearLog();
 	});
 
 	afterEach(() => {
 		teardown(scratch);
-		clearLog();
 	});
 
 	it('should reuse existing DOM', () => {
@@ -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', () => {
@@ -458,5 +459,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()']);
 	});
 });