From cd0f32b8434b5d13b7501731b61dfe526af98bef Mon Sep 17 00:00:00 2001
From: jdecroock <decroockjovi@gmail.com>
Date: Thu, 3 Oct 2024 09:34:44 +0200
Subject: [PATCH] Revive single text-child hot path

---
 src/diff/index.js                 |  20 +++-
 test/browser/fragments.test.js    | 167 ++++++++----------------------
 test/browser/hydrate.test.js      |   2 -
 test/browser/keys.test.js         |  35 +++----
 test/browser/placeholders.test.js |   2 -
 test/browser/render.test.js       |  20 ++--
 6 files changed, 88 insertions(+), 158 deletions(-)

diff --git a/src/diff/index.js b/src/diff/index.js
index 7188631160..936a75804d 100644
--- a/src/diff/index.js
+++ b/src/diff/index.js
@@ -489,7 +489,6 @@ function diffElementNodes(
 			}
 		}
 
-		// If the new vnode didn't have dangerouslySetInnerHTML, diff its children
 		if (newHtml) {
 			// Avoid re-applying the same '__html' if it did not changed between re-render
 			if (
@@ -502,8 +501,27 @@ function diffElementNodes(
 			}
 
 			newVNode._children = [];
+		} else if (typeof newChildren === 'string') {
+			if (newChildren !== oldProps.children) {
+				// Unmount any previous children
+				if (oldVNode._children) {
+					while ((i = oldVNode._children.pop())) {
+						// Setting textContent on the dom element will unmount all DOM nodes
+						// of the previous children, so we don't need to remove DOM in this
+						// call to unmount
+						unmount(i, oldVNode, true);
+					}
+				}
+
+				dom.textContent = newChildren;
+			}
 		} else {
 			if (oldHtml) dom.innerHTML = '';
+			// Previous render was a single text child. New children are not so let's
+			// unmount the previous text child
+			if (typeof oldProps.children === 'string') {
+				dom.removeChild(dom.firstChild);
+			}
 
 			diffChildren(
 				dom,
diff --git a/test/browser/fragments.test.js b/test/browser/fragments.test.js
index 7eb0b0924d..ed788c1a01 100644
--- a/test/browser/fragments.test.js
+++ b/test/browser/fragments.test.js
@@ -82,10 +82,7 @@ describe('Fragment', () => {
 		);
 
 		expect(scratch.innerHTML).to.equal('<span>foo</span>');
-		expectDomLogToBe([
-			'<span>.appendChild(#text)',
-			'<div>.appendChild(<span>foo)'
-		]);
+		expectDomLogToBe(['<div>.appendChild(<span>foo)']);
 	});
 
 	it('should render multiple children via noop renderer', () => {
@@ -236,7 +233,6 @@ describe('Fragment', () => {
 		expect(scratch.innerHTML).to.equal(div([div(1), span(2), span(2)]));
 		expectDomLogToBe([
 			'<span>1.remove()',
-			'<div>.appendChild(#text)',
 			'<div>22.insertBefore(<div>1, <span>2)'
 		]);
 	});
@@ -356,11 +352,7 @@ describe('Fragment', () => {
 
 		expect(ops).to.deep.equal([]);
 		expect(scratch.innerHTML).to.equal('<div>Hello</div>');
-		expectDomLogToBe([
-			'<div>Hello.remove()',
-			'<div>.appendChild(#text)',
-			'<div>.appendChild(<div>Hello)'
-		]);
+		expectDomLogToBe(['<div>Hello.remove()', '<div>.appendChild(<div>Hello)']);
 
 		clearLog();
 		render(<Foo condition={true} />, scratch);
@@ -369,7 +361,6 @@ describe('Fragment', () => {
 		expect(scratch.innerHTML).to.equal('<div>Hello</div>');
 		expectDomLogToBe([
 			'<div>Hello.remove()',
-			'<div>.appendChild(#text)',
 			// Re-append the Stateful DOM since it has been re-parented
 			'<div>.appendChild(<div>Hello)'
 		]);
@@ -395,22 +386,14 @@ describe('Fragment', () => {
 
 		expect(ops).to.deep.equal([]);
 		expect(scratch.innerHTML).to.equal('<div>Hello</div>');
-		expectDomLogToBe([
-			'<div>Hello.remove()',
-			'<div>.appendChild(#text)',
-			'<div>.appendChild(<div>Hello)'
-		]);
+		expectDomLogToBe(['<div>Hello.remove()', '<div>.appendChild(<div>Hello)']);
 
 		clearLog();
 		render(<Foo condition={true} />, scratch);
 
 		expect(ops).to.deep.equal([]);
 		expect(scratch.innerHTML).to.equal('<div>Hello</div>');
-		expectDomLogToBe([
-			'<div>Hello.remove()',
-			'<div>.appendChild(#text)',
-			'<div>.appendChild(<div>Hello)'
-		]);
+		expectDomLogToBe(['<div>Hello.remove()', '<div>.appendChild(<div>Hello)']);
 	});
 
 	it('should just render children for fragments', () => {
@@ -791,9 +774,9 @@ describe('Fragment', () => {
 		expect(scratch.innerHTML).to.equal(htmlForFalse);
 		expectDomLogToBe(
 			[
-				'<div>barHellobeep.insertBefore(<div>bar, <div>beep)',
-				'<div>Hellobarbeep.appendChild(<div>Hello)',
-				'<div>barbeepHello.appendChild(<div>bar)'
+				'<div>fooHellobeep.insertBefore(<div>beep, <div>foo)',
+				'<div>beepbarHello.appendChild(<div>bar)',
+				'<div>beepHellobar.insertBefore(<div>Hello, <div>bar)'
 			],
 			'rendering true to false'
 		);
@@ -805,8 +788,8 @@ describe('Fragment', () => {
 		expect(scratch.innerHTML).to.equal(htmlForTrue);
 		expectDomLogToBe(
 			[
-				'<div>beepHellofoo.appendChild(<div>Hello)',
-				'<div>boopfooHello.appendChild(<div>boop)'
+				'<div>beepHellofoo.insertBefore(<div>foo, <div>beep)',
+				'<div>foobeepHello.insertBefore(<div>Hello, <div>beep)'
 			],
 			'rendering false to true'
 		);
@@ -845,9 +828,7 @@ describe('Fragment', () => {
 		expectDomLogToBe([
 			'<span>1.remove()',
 			'<div>Hello.remove()',
-			'<span>.appendChild(#text)',
 			'<div>2.insertBefore(<span>1, <span>2)',
-			'<div>.appendChild(#text)',
 			'<div>12.insertBefore(<div>Hello, <span>2)'
 		]);
 
@@ -859,9 +840,7 @@ describe('Fragment', () => {
 		expectDomLogToBe([
 			'<span>1.remove()',
 			'<div>Hello.remove()',
-			'<span>.appendChild(#text)',
 			'<div>2.insertBefore(<span>1, <span>2)',
-			'<div>.appendChild(#text)',
 			'<div>12.insertBefore(<div>Hello, <span>2)'
 		]);
 	});
@@ -1234,13 +1213,9 @@ describe('Fragment', () => {
 		expect(scratch.innerHTML).to.equal(html, 'initial render of true');
 		expectDomLogToBe(
 			[
-				'<li>.appendChild(#text)',
 				'<ol>.appendChild(<li>0)',
-				'<li>.appendChild(#text)',
 				'<ol>0.appendChild(<li>1)',
-				'<li>.appendChild(#text)',
 				'<ol>01.appendChild(<li>2)',
-				'<li>.appendChild(#text)',
 				'<ol>012.appendChild(<li>3)',
 				'<div>.appendChild(<ol>0123)'
 			],
@@ -1282,15 +1257,10 @@ describe('Fragment', () => {
 		expect(scratch.innerHTML).to.equal(htmlForTrue, 'initial render of true');
 		expectDomLogToBe(
 			[
-				'<li>.appendChild(#text)',
 				'<ol>.appendChild(<li>0)',
-				'<li>.appendChild(#text)',
 				'<ol>0.appendChild(<li>1)',
-				'<li>.appendChild(#text)',
 				'<ol>01.appendChild(<li>2)',
-				'<li>.appendChild(#text)',
 				'<ol>012.appendChild(<li>3)',
-				'<li>.appendChild(#text)',
 				'<ol>0123.appendChild(<li>4)',
 				'<div>.appendChild(<ol>01234)'
 			],
@@ -1316,15 +1286,14 @@ describe('Fragment', () => {
 		);
 		expectDomLogToBe(
 			[
-				'<li>.appendChild(#text)',
 				'<ol>034.insertBefore(<li>1, <li>3)',
-				'<li>.appendChild(#text)',
 				'<ol>0134.insertBefore(<li>2, <li>3)'
 			],
 			'rendering from false to true'
 		);
 	});
 
+	// TODO
 	it('should support moving Fragments between beginning and end', () => {
 		const Foo = ({ condition }) => (
 			<ol>
@@ -1382,7 +1351,9 @@ describe('Fragment', () => {
 		);
 		expectDomLogToBe([
 			'<ol>012345.insertBefore(<li>4, <li>0)',
-			'<ol>401235.insertBefore(<li>5, <li>0)'
+			'<ol>401235.insertBefore(<li>5, <li>0)',
+			'<ol>450123.insertBefore(<li>4, <li>0)',
+			'<ol>540123.insertBefore(<li>5, <li>0)'
 		]);
 
 		clearLog();
@@ -1392,8 +1363,10 @@ describe('Fragment', () => {
 			'rendering from false to true'
 		);
 		expectDomLogToBe([
-			'<ol>450123.appendChild(<li>4)',
-			'<ol>501234.appendChild(<li>5)'
+			'<ol>450123.insertBefore(<li>0, <li>4)',
+			'<ol>045123.insertBefore(<li>1, <li>4)',
+			'<ol>014523.insertBefore(<li>2, <li>4)',
+			'<ol>012453.insertBefore(<li>3, <li>4)'
 		]);
 	});
 
@@ -1436,9 +1409,7 @@ describe('Fragment', () => {
 			'<li>0.remove()',
 			'<li>1.remove()',
 			// Mount 3 & 4
-			'<li>.appendChild(#text)',
 			'<ol>22.appendChild(<li>3)',
-			'<li>.appendChild(#text)',
 			'<ol>223.appendChild(<li>4)'
 		]);
 
@@ -1453,9 +1424,7 @@ describe('Fragment', () => {
 			'<li>3.remove()',
 			'<li>4.remove()',
 			// Insert 0 and 1
-			'<li>.appendChild(#text)',
 			'<ol>22.insertBefore(<li>0, <li>2)',
-			'<li>.appendChild(#text)',
 			'<ol>022.insertBefore(<li>1, <li>2)'
 		]);
 	});
@@ -1507,9 +1476,7 @@ describe('Fragment', () => {
 			'<li>0.remove()',
 			'<li>1.remove()',
 			// Mount 4 & 5
-			'<li>.appendChild(#text)',
 			'<ol>23.appendChild(<li>4)',
-			'<li>.appendChild(#text)',
 			'<ol>234.appendChild(<li>5)'
 		]);
 
@@ -1524,9 +1491,7 @@ describe('Fragment', () => {
 			'<li>4.remove()',
 			'<li>5.remove()',
 			// Insert 0 and 1 back into the DOM
-			'<li>.appendChild(#text)',
 			'<ol>23.insertBefore(<li>0, <li>2)',
-			'<li>.appendChild(#text)',
 			'<ol>023.insertBefore(<li>1, <li>2)'
 		]);
 	});
@@ -1582,9 +1547,9 @@ describe('Fragment', () => {
 		expectDomLogToBe(
 			[
 				'<div>boop.remove()',
-				'<div>barHellobeep.insertBefore(<div>bar, <div>beep)',
-				'<div>Hellobarbeep.appendChild(<div>Hello)',
-				'<div>barbeepHello.appendChild(<div>bar)'
+				'<div>fooHellobeep.insertBefore(<div>beep, <div>foo)',
+				'<div>beepbarHello.appendChild(<div>bar)',
+				'<div>beepHellobar.insertBefore(<div>Hello, <div>bar)'
 			],
 			'rendering from true to false'
 		);
@@ -1599,9 +1564,8 @@ describe('Fragment', () => {
 		);
 		expectDomLogToBe(
 			[
-				'<div>beepHellofoo.appendChild(<div>Hello)',
-				'<div>boopfooHello.appendChild(<div>boop)',
-				'<div>.appendChild(#text)',
+				'<div>beepHellofoo.insertBefore(<div>foo, <div>beep)',
+				'<div>foobeepHello.insertBefore(<div>Hello, <div>beep)',
 				'<div>fooHelloboop.appendChild(<div>boop)'
 			],
 			'rendering from false to true'
@@ -1668,9 +1632,11 @@ describe('Fragment', () => {
 		);
 		expectDomLogToBe(
 			[
-				'<div>barHellobeepbeepbeep.insertBefore(<div>bar, <div>beep)',
-				'<div>Hellobarbeepbeepbeep.appendChild(<div>Hello)',
-				'<div>barbeepbeepbeepHello.appendChild(<div>bar)'
+				'<div>fooHellobeepboopboop.insertBefore(<div>beep, <div>foo)',
+				'<div>beepfooHellobeepboop.insertBefore(<div>beep, <div>foo)',
+				'<div>beepbeepfooHellobeep.insertBefore(<div>beep, <div>foo)',
+				'<div>beepbeepbeepbarHello.appendChild(<div>bar)',
+				'<div>beepbeepbeepHellobar.insertBefore(<div>Hello, <div>bar)'
 			],
 			'rendering from true to false'
 		);
@@ -1685,9 +1651,10 @@ describe('Fragment', () => {
 		);
 		expectDomLogToBe(
 			[
-				'<div>beepbeepbeepHellofoo.appendChild(<div>Hello)',
-				'<div>beepbeepbeepfooHello.insertBefore(<div>foo, <div>beep)',
-				'<div>foobeepbeepbeepHello.insertBefore(<div>Hello, <div>beep)'
+				'<div>beepbeepbeepHellofoo.insertBefore(<div>foo, <div>beep)',
+				'<div>foobeepbeepbeepHello.insertBefore(<div>Hello, <div>beep)',
+				'<div>fooHellobeepbeepbeep.insertBefore(<div>foo, <div>beep)',
+				'<div>Hellofoobeepbeepbeep.insertBefore(<div>Hello, <div>beep)'
 			],
 			'rendering from false to true'
 		);
@@ -1778,9 +1745,7 @@ describe('Fragment', () => {
 			[
 				'<div>2.remove()',
 				'#text.remove()',
-				'<div>.appendChild(#text)',
 				'<div>.appendChild(<div>3)',
-				'<div>.appendChild(#text)',
 				'<div>3.appendChild(<div>4)'
 			],
 			'rendering from true to false'
@@ -1791,13 +1756,7 @@ describe('Fragment', () => {
 
 		expect(scratch.innerHTML).to.equal(htmlForTrue);
 		expectDomLogToBe(
-			[
-				'<div>3.remove()',
-				'<div>4.remove()',
-				'<div>.appendChild(#text)',
-				'<div>.appendChild(#text)',
-				'<div>1.appendChild(<div>2)'
-			],
+			['<div>1.appendChild(<div>2)'],
 			'rendering from false to true'
 		);
 	});
@@ -1851,17 +1810,11 @@ describe('Fragment', () => {
 		expect(scratch.innerHTML).to.equal(htmlForTrue, 'initial render of true');
 		expectDomLogToBe(
 			[
-				'<li>.appendChild(#text)',
 				'<ol>.appendChild(<li>0)',
-				'<li>.appendChild(#text)',
 				'<ol>0.appendChild(<li>1)',
-				'<li>.appendChild(#text)',
 				'<ol>01.appendChild(<li>2)',
-				'<li>.appendChild(#text)',
 				'<ol>012.appendChild(<li>3)',
-				'<li>.appendChild(#text)',
 				'<ol>0123.appendChild(<li>4)',
-				'<li>.appendChild(#text)',
 				'<ol>01234.appendChild(<li>5)',
 				'<div>.appendChild(<ol>012345)'
 			],
@@ -1887,9 +1840,7 @@ describe('Fragment', () => {
 		);
 		expectDomLogToBe(
 			[
-				'<li>.appendChild(#text)',
 				'<ol>0145.insertBefore(<li>2, <li>4)',
-				'<li>.appendChild(#text)',
 				'<ol>01245.insertBefore(<li>3, <li>4)'
 			],
 			'rendering from false to true'
@@ -2013,11 +1964,8 @@ describe('Fragment', () => {
 
 		expect(scratch.textContent).to.equal('ABC');
 		expectDomLogToBe([
-			'<div>.appendChild(#text)',
 			'<div>.appendChild(<div>A)',
-			'<div>.appendChild(#text)',
 			'<div>A.appendChild(<div>B)',
-			'<div>.appendChild(#text)',
 			'<div>AB.appendChild(<div>C)'
 		]);
 	});
@@ -2057,7 +2005,6 @@ describe('Fragment', () => {
 		);
 		expectDomLogToBe([
 			'<div>B1.remove()',
-			'<section>.appendChild(#text)',
 			'<div>AC.insertBefore(<section>B2, <div>C)'
 		]);
 	});
@@ -2108,9 +2055,7 @@ describe('Fragment', () => {
 		expectDomLogToBe([
 			'<div>B1.remove()',
 			'<div>B2.remove()',
-			'<section>.appendChild(#text)',
 			'<div>AC.insertBefore(<section>B3, <div>C)',
-			'<section>.appendChild(#text)',
 			'<div>AB3C.insertBefore(<section>B4, <div>C)'
 		]);
 	});
@@ -2146,10 +2091,7 @@ describe('Fragment', () => {
 		expect(scratch.innerHTML).to.eql(
 			`<div><div>A</div><div>B</div><div>C</div></div>`
 		);
-		expectDomLogToBe([
-			'<div>.appendChild(#text)',
-			'<div>AC.insertBefore(<div>B, <div>C)'
-		]);
+		expectDomLogToBe(['<div>AC.insertBefore(<div>B, <div>C)']);
 	});
 
 	it('should insert in-between Fragments', () => {
@@ -2184,9 +2126,7 @@ describe('Fragment', () => {
 			`<div><div>A</div><div>B1</div><div>B2</div><div>C</div></div>`
 		);
 		expectDomLogToBe([
-			'<div>.appendChild(#text)',
 			'<div>AC.insertBefore(<div>B1, <div>C)',
-			'<div>.appendChild(#text)',
 			'<div>AB1C.insertBefore(<div>B2, <div>C)'
 		]);
 	});
@@ -2224,10 +2164,7 @@ describe('Fragment', () => {
 		expect(scratch.innerHTML).to.eql(
 			`<div><div>A</div><div>B</div><div>C</div></div>`
 		);
-		expectDomLogToBe([
-			'<div>.appendChild(#text)',
-			'<div>AC.insertBefore(<div>B, <div>C)'
-		]);
+		expectDomLogToBe(['<div>AC.insertBefore(<div>B, <div>C)']);
 	});
 
 	it('should insert Fragment in-between null children', () => {
@@ -2269,9 +2206,7 @@ describe('Fragment', () => {
 			`<div><div>A</div><div>B1</div><div>B2</div><div>C</div></div>`
 		);
 		expectDomLogToBe([
-			'<div>.appendChild(#text)',
 			'<div>AC.insertBefore(<div>B1, <div>C)',
-			'<div>.appendChild(#text)',
 			'<div>AB1C.insertBefore(<div>B2, <div>C)'
 		]);
 	});
@@ -2313,10 +2248,7 @@ describe('Fragment', () => {
 		expect(scratch.innerHTML).to.eql(
 			`<div><div>A</div><div>B</div><div>C</div></div>`
 		);
-		expectDomLogToBe([
-			'<div>.appendChild(#text)',
-			'<div>AC.insertBefore(<div>B, <div>C)'
-		]);
+		expectDomLogToBe(['<div>AC.insertBefore(<div>B, <div>C)']);
 	});
 
 	it('should insert Fragment in-between nested null children', () => {
@@ -2362,9 +2294,7 @@ describe('Fragment', () => {
 			`<div><div>A</div><div>B1</div><div>B2</div><div>C</div></div>`
 		);
 		expectDomLogToBe([
-			'<div>.appendChild(#text)',
 			'<div>AC.insertBefore(<div>B1, <div>C)',
-			'<div>.appendChild(#text)',
 			'<div>AB1C.insertBefore(<div>B2, <div>C)'
 		]);
 	});
@@ -2425,7 +2355,6 @@ describe('Fragment', () => {
 		expect(scratch.innerHTML).to.eql(`<div><span>A2</span><div>C</div></div>`);
 		expectDomLogToBe([
 			'<div>A.remove()',
-			'<span>.appendChild(#text)',
 			'<div>C.insertBefore(<span>A2, <div>C)'
 		]);
 	});
@@ -2493,9 +2422,7 @@ describe('Fragment', () => {
 		expectDomLogToBe([
 			'<div>A1.remove()',
 			'<div>A2.remove()',
-			'<span>.appendChild(#text)',
 			'<div>C.insertBefore(<span>A3, <div>C)',
-			'<span>.appendChild(#text)',
 			'<div>A3C.insertBefore(<span>A4, <div>C)'
 		]);
 	});
@@ -2558,10 +2485,7 @@ describe('Fragment', () => {
 			div([div('A'), div('B'), div('C')]),
 			'updateB'
 		);
-		expectDomLogToBe([
-			'<div>.appendChild(#text)',
-			'<div>AC.insertBefore(<div>B, <div>C)'
-		]);
+		expectDomLogToBe(['<div>AC.insertBefore(<div>B, <div>C)']);
 
 		clearLog();
 		updateA();
@@ -2573,7 +2497,6 @@ describe('Fragment', () => {
 		);
 		expectDomLogToBe([
 			'<div>A.remove()',
-			'<span>.appendChild(#text)',
 			'<div>BC.insertBefore(<span>A2, <div>B)'
 		]);
 	});
@@ -2631,9 +2554,7 @@ describe('Fragment', () => {
 		expectDomLogToBe([
 			'<div>A1.remove()',
 			'<div>A2.remove()',
-			'<span>.appendChild(#text)',
 			'<div>.appendChild(<span>A3)',
-			'<span>.appendChild(#text)',
 			'<div>A3.appendChild(<span>A4)'
 		]);
 
@@ -2645,10 +2566,7 @@ describe('Fragment', () => {
 			[span('A3'), span('A4'), div('B')].join(''),
 			'updateB'
 		);
-		expectDomLogToBe([
-			'<div>.appendChild(#text)',
-			'<div>A3A4.appendChild(<div>B)'
-		]);
+		expectDomLogToBe(['<div>A3A4.appendChild(<div>B)']);
 	});
 
 	it('should properly place conditional elements around strictly equal vnodes', () => {
@@ -2705,7 +2623,6 @@ describe('Fragment', () => {
 		expect(scratch.innerHTML).to.equal(top);
 		expectDomLogToBe([
 			'<div>bottom panel.remove()',
-			'<div>.appendChild(#text)',
 			'<div>NavigationContent.insertBefore(<div>top panel, <div>Navigation)'
 		]);
 
@@ -2715,7 +2632,6 @@ describe('Fragment', () => {
 		expect(scratch.innerHTML).to.equal(bottom);
 		expectDomLogToBe([
 			'<div>top panel.remove()',
-			'<div>.appendChild(#text)',
 			'<div>NavigationContent.appendChild(<div>bottom panel)'
 		]);
 
@@ -2725,7 +2641,6 @@ describe('Fragment', () => {
 		expect(scratch.innerHTML).to.equal(top);
 		expectDomLogToBe([
 			'<div>bottom panel.remove()',
-			'<div>.appendChild(#text)',
 			'<div>NavigationContent.insertBefore(<div>top panel, <div>Navigation)'
 		]);
 	});
@@ -2944,7 +2859,6 @@ describe('Fragment', () => {
 		expectDomLogToBe([
 			'<div>2.remove()',
 			'<div>3.remove()',
-			'<div>.appendChild(#text)',
 			'<div>1AB.insertBefore(<div>4, <div>A)'
 		]);
 	});
@@ -3043,7 +2957,6 @@ describe('Fragment', () => {
 			'<div>1.remove()',
 			'<div>2.remove()',
 			'<div>3.remove()',
-			'<span>.appendChild(#text)',
 			'<div>AB.insertBefore(<span>1, <div>A)'
 		]);
 	});
@@ -3148,6 +3061,10 @@ describe('Fragment', () => {
 		rerender();
 
 		expect(scratch.innerHTML).to.equal([div('A'), div(1), div(2)].join(''));
-		expectDomLogToBe(['<div>B.remove()', '<div>2A1.appendChild(<div>2)']);
+		expectDomLogToBe([
+			'<div>B.remove()',
+			'<div>1A2.insertBefore(<div>A, <div>1)',
+			'<div>A11.insertBefore(<div>1, <div>1)'
+		]);
 	});
 });
diff --git a/test/browser/hydrate.test.js b/test/browser/hydrate.test.js
index 814a5d681d..75c520cdea 100644
--- a/test/browser/hydrate.test.js
+++ b/test/browser/hydrate.test.js
@@ -179,9 +179,7 @@ describe('hydrate()', () => {
 
 		expect(scratch.innerHTML).to.equal(ul([li('1'), li('2'), li('3')]));
 		expect(getLog()).to.deep.equal([
-			'<li>.appendChild(#text)',
 			'<ul>1.appendChild(<li>2)',
-			'<li>.appendChild(#text)',
 			'<ul>12.appendChild(<li>3)'
 		]);
 	});
diff --git a/test/browser/keys.test.js b/test/browser/keys.test.js
index 8d5a185b91..178c90e2f2 100644
--- a/test/browser/keys.test.js
+++ b/test/browser/keys.test.js
@@ -200,10 +200,7 @@ describe('keys', () => {
 
 		render(<List values={values} />, scratch);
 		expect(scratch.textContent).to.equal('abc');
-		expect(getLog()).to.deep.equal([
-			'<li>.appendChild(#text)',
-			'<ol>ab.appendChild(<li>c)'
-		]);
+		expect(getLog()).to.deep.equal(['<ol>ab.appendChild(<li>c)']);
 	});
 
 	it('should remove keyed elements from the end', () => {
@@ -231,10 +228,7 @@ describe('keys', () => {
 
 		render(<List values={values} />, scratch);
 		expect(scratch.textContent).to.equal('abc');
-		expect(getLog()).to.deep.equal([
-			'<li>.appendChild(#text)',
-			'<ol>bc.insertBefore(<li>a, <li>b)'
-		]);
+		expect(getLog()).to.deep.equal(['<ol>bc.insertBefore(<li>a, <li>b)']);
 	});
 
 	it('should remove keyed elements from the beginning', () => {
@@ -262,10 +256,7 @@ describe('keys', () => {
 
 		render(<List values={values} />, scratch);
 		expect(scratch.textContent).to.equal('abc');
-		expect(getLog()).to.deep.equal([
-			'<li>.appendChild(#text)',
-			'<ol>ac.insertBefore(<li>b, <li>c)'
-		]);
+		expect(getLog()).to.deep.equal(['<ol>ac.insertBefore(<li>b, <li>c)']);
 	});
 
 	it('should remove keyed children from the middle', () => {
@@ -327,7 +318,7 @@ describe('keys', () => {
 		render(<List values={['b', 'a']} />, scratch);
 		expect(scratch.textContent).to.equal('ba');
 
-		expect(getLog()).to.deep.equal(['<ol>ab.appendChild(<li>a)']);
+		expect(getLog()).to.deep.equal(['<ol>ab.insertBefore(<li>b, <li>a)']);
 	});
 
 	it('should swap existing keyed children in the middle of a list efficiently', () => {
@@ -343,7 +334,7 @@ describe('keys', () => {
 		render(<List values={values} />, scratch);
 		expect(scratch.textContent).to.equal('acbd', 'initial swap');
 		expect(getLog()).to.deep.equal(
-			['<ol>abcd.insertBefore(<li>b, <li>d)'],
+			['<ol>abcd.insertBefore(<li>c, <li>b)'],
 			'initial swap'
 		);
 
@@ -354,7 +345,7 @@ describe('keys', () => {
 		render(<List values={values} />, scratch);
 		expect(scratch.textContent).to.equal('abcd', 'swap back');
 		expect(getLog()).to.deep.equal(
-			['<ol>acbd.insertBefore(<li>c, <li>d)'],
+			['<ol>acbd.insertBefore(<li>b, <li>c)'],
 			'swap back'
 		);
 	});
@@ -372,7 +363,11 @@ describe('keys', () => {
 		render(<List values={values} />, scratch);
 		expect(scratch.textContent).to.equal('bcda', 'move to end');
 		expect(getLog()).to.deep.equal(
-			['<ol>abcd.appendChild(<li>a)'],
+			[
+				'<ol>abcd.insertBefore(<li>b, <li>a)',
+				'<ol>bacd.insertBefore(<li>c, <li>a)',
+				'<ol>bcad.insertBefore(<li>d, <li>a)'
+			],
 			'move to end'
 		);
 
@@ -414,7 +409,11 @@ describe('keys', () => {
 
 		render(<List values={values} />, scratch);
 		expect(scratch.textContent).to.equal('acdebf');
-		expect(getLog()).to.deep.equal(['<ol>abcdef.insertBefore(<li>b, <li>f)']);
+		expect(getLog()).to.deep.equal([
+			'<ol>abcdef.insertBefore(<li>c, <li>b)',
+			'<ol>acbdef.insertBefore(<li>d, <li>b)',
+			'<ol>acdbef.insertBefore(<li>e, <li>b)'
+		]);
 	});
 
 	it('should reverse keyed children effectively', () => {
@@ -439,7 +438,7 @@ describe('keys', () => {
 			'<ol>jihgfabcde.insertBefore(<li>e, <li>a)',
 			'<ol>jihgfeabcd.insertBefore(<li>d, <li>a)',
 			'<ol>jihgfedabc.insertBefore(<li>c, <li>a)',
-			'<ol>jihgfedcab.appendChild(<li>a)'
+			'<ol>jihgfedcab.insertBefore(<li>b, <li>a)'
 		]);
 	});
 
diff --git a/test/browser/placeholders.test.js b/test/browser/placeholders.test.js
index 0fbdb6f181..4dd5f3b502 100644
--- a/test/browser/placeholders.test.js
+++ b/test/browser/placeholders.test.js
@@ -248,9 +248,7 @@ describe('null placeholders', () => {
 			div([div(1), div('Nullable'), div(3), div('Nullable2')])
 		);
 		expect(getLog()).to.deep.equal([
-			'<div>.appendChild(#text)',
 			'<div>13.appendChild(<div>Nullable2)',
-			'<div>.appendChild(#text)',
 			'<div>13Nullable2.insertBefore(<div>Nullable, <div>3)'
 		]);
 	});
diff --git a/test/browser/render.test.js b/test/browser/render.test.js
index 172023b3df..d02327d31b 100644
--- a/test/browser/render.test.js
+++ b/test/browser/render.test.js
@@ -1662,9 +1662,12 @@ describe('render()', () => {
 			`<div>${b.map(n => `<div>${n}</div>`).join('')}</div>`
 		);
 		expect(getLog()).to.deep.equal([
-			'<div>0123456.insertBefore(<div>2, <div>6)',
-			'<div>0134526.appendChild(<div>4)',
-			'<div>0135264.appendChild(<div>0)'
+			'<div>0123456.insertBefore(<div>1, <div>0)',
+			'<div>1023456.insertBefore(<div>3, <div>0)',
+			'<div>1302456.insertBefore(<div>5, <div>0)',
+			'<div>1350246.insertBefore(<div>2, <div>0)',
+			'<div>1352046.insertBefore(<div>6, <div>0)',
+			'<div>1352604.insertBefore(<div>4, <div>0)'
 		]);
 		clearLog();
 
@@ -1673,15 +1676,12 @@ describe('render()', () => {
 			`<div>${c.map(n => `<div>${n}</div>`).join('')}</div>`
 		);
 		expect(getLog()).to.deep.equal([
-			'<div>.appendChild(#text)',
 			'<div>1352640.insertBefore(<div>11, <div>1)',
-			'<div>111352640.insertBefore(<div>1, <div>5)',
-			'<div>113152640.insertBefore(<div>6, <div>0)',
-			'<div>113152460.insertBefore(<div>2, <div>0)',
-			'<div>113154620.insertBefore(<div>5, <div>0)',
-			'<div>.appendChild(#text)',
+			'<div>111352640.insertBefore(<div>3, <div>1)',
+			'<div>113152640.insertBefore(<div>4, <div>5)',
+			'<div>113145260.insertBefore(<div>6, <div>5)',
+			'<div>113146520.insertBefore(<div>2, <div>5)',
 			'<div>113146250.appendChild(<div>9)',
-			'<div>.appendChild(#text)',
 			'<div>1131462509.appendChild(<div>10)'
 		]);
 		clearLog();