Optimize renders

src/diff/index.js

@@ -5,7 +5,7 @@ import {
 	RESET_MODE
 } from '../constants';
 import { BaseComponent, getDomSibling } from '../component';
-import { Fragment } from '../create-element';
+import { Fragment, createVNode } from '../create-element';
 import { diffChildren } from './children';
 import { setProperty } from './props';
 import { assign, isArray, removeNode, slice } from '../util';
@@ -510,12 +510,13 @@ function diffElementNodes(
 
 				// @ts-expect-error
 				dom.textContent = newChildren;
+				const vnode = createVNode(null, newChildren, null, null);
+				newVNode._children = [vnode];
+				// @ts-expect-error
+				vnode._dom = dom.firstChild;
 			}
 		} else {
 			if (oldHtml) dom.innerHTML = '';
-			if (typeof oldProps.children === 'string') {
-				dom.removeChild(dom.firstChild);
-			}
 
 			diffChildren(
 				dom,

test/browser/fragments.test.js

@@ -774,9 +774,9 @@ describe('Fragment', () => {
 		expect(scratch.innerHTML).to.equal(htmlForFalse);
 		expectDomLogToBe(
 			[
-				'<div>fooHellobeep.insertBefore(<div>beep, <div>foo)',
-				'<div>beepbarHello.appendChild(<div>bar)',
-				'<div>beepHellobar.insertBefore(<div>Hello, <div>bar)'
+				'<div>barHellobeep.insertBefore(<div>bar, <div>beep)',
+				'<div>Hellobarbeep.appendChild(<div>Hello)',
+				'<div>barbeepHello.appendChild(<div>bar)'
 			],
 			'rendering true to false'
 		);
@@ -788,8 +788,8 @@ describe('Fragment', () => {
 		expect(scratch.innerHTML).to.equal(htmlForTrue);
 		expectDomLogToBe(
 			[
-				'<div>beepHellofoo.insertBefore(<div>foo, <div>beep)',
-				'<div>foobeepHello.insertBefore(<div>Hello, <div>beep)'
+				'<div>beepHellofoo.appendChild(<div>Hello)',
+				'<div>boopfooHello.appendChild(<div>boop)'
 			],
 			'rendering false to true'
 		);
@@ -1351,9 +1351,7 @@ describe('Fragment', () => {
 		);
 		expectDomLogToBe([
 			'<ol>012345.insertBefore(<li>4, <li>0)',
-			'<ol>401235.insertBefore(<li>5, <li>0)',
-			'<ol>450123.insertBefore(<li>4, <li>0)',
-			'<ol>540123.insertBefore(<li>5, <li>0)'
+			'<ol>401235.insertBefore(<li>5, <li>0)'
 		]);
 
 		clearLog();
@@ -1547,9 +1545,9 @@ describe('Fragment', () => {
 		expectDomLogToBe(
 			[
 				'<div>boop.remove()',
-				'<div>fooHellobeep.insertBefore(<div>beep, <div>foo)',
-				'<div>beepbarHello.appendChild(<div>bar)',
-				'<div>beepHellobar.insertBefore(<div>Hello, <div>bar)'
+				'<div>barHellobeep.insertBefore(<div>bar, <div>beep)',
+				'<div>Hellobarbeep.appendChild(<div>Hello)',
+				'<div>barbeepHello.appendChild(<div>bar)'
 			],
 			'rendering from true to false'
 		);
@@ -1564,8 +1562,8 @@ describe('Fragment', () => {
 		);
 		expectDomLogToBe(
 			[
-				'<div>beepHellofoo.insertBefore(<div>foo, <div>beep)',
-				'<div>foobeepHello.insertBefore(<div>Hello, <div>beep)',
+				'<div>beepHellofoo.appendChild(<div>Hello)',
+				'<div>boopfooHello.appendChild(<div>boop)',
 				'<div>fooHelloboop.appendChild(<div>boop)'
 			],
 			'rendering from false to true'
@@ -1632,11 +1630,9 @@ describe('Fragment', () => {
 		);
 		expectDomLogToBe(
 			[
-				'<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)'
+				'<div>barHellobeepbeepbeep.insertBefore(<div>bar, <div>beep)',
+				'<div>Hellobarbeepbeepbeep.appendChild(<div>Hello)',
+				'<div>barbeepbeepbeepHello.appendChild(<div>bar)'
 			],
 			'rendering from true to false'
 		);
@@ -1651,10 +1647,9 @@ describe('Fragment', () => {
 		);
 		expectDomLogToBe(
 			[
-				'<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)'
+				'<div>beepbeepbeepHellofoo.appendChild(<div>Hello)',
+				'<div>beepbeepbeepfooHello.insertBefore(<div>foo, <div>beep)',
+				'<div>foobeepbeepbeepHello.insertBefore(<div>Hello, <div>beep)'
 			],
 			'rendering from false to true'
 		);
@@ -3061,10 +3056,6 @@ describe('Fragment', () => {
 		rerender();
 
 		expect(scratch.innerHTML).to.equal([div('A'), div(1), div(2)].join(''));
-		expectDomLogToBe([
-			'<div>B.remove()',
-			'<div>1A2.insertBefore(<div>A, <div>1)',
-			'<div>A11.insertBefore(<div>1, <div>1)'
-		]);
+		expectDomLogToBe(['<div>B.remove()', '<div>2A1.appendChild(<div>2)']);
 	});
 });

test/browser/keys.test.js

@@ -318,7 +318,7 @@ describe('keys', () => {
 		render(<List values={['b', 'a']} />, scratch);
 		expect(scratch.textContent).to.equal('ba');
 
-		expect(getLog()).to.deep.equal(['<ol>ab.insertBefore(<li>b, <li>a)']);
+		expect(getLog()).to.deep.equal(['<ol>ab.appendChild(<li>a)']);
 	});
 
 	it('should swap existing keyed children in the middle of a list efficiently', () => {
@@ -334,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>c, <li>b)'],
+			['<ol>abcd.insertBefore(<li>b, <li>d)'],
 			'initial swap'
 		);
 
@@ -363,11 +363,7 @@ describe('keys', () => {
 		render(<List values={values} />, scratch);
 		expect(scratch.textContent).to.equal('bcda', 'move to end');
 		expect(getLog()).to.deep.equal(
-			[
-				'<ol>abcd.insertBefore(<li>b, <li>a)',
-				'<ol>bacd.insertBefore(<li>c, <li>a)',
-				'<ol>bcad.insertBefore(<li>d, <li>a)'
-			],
+			['<ol>abcd.appendChild(<li>a)'],
 			'move to end'
 		);
 
@@ -409,11 +405,7 @@ describe('keys', () => {
 
 		render(<List values={values} />, scratch);
 		expect(scratch.textContent).to.equal('acdebf');
-		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)'
-		]);
+		expect(getLog()).to.deep.equal(['<ol>abcdef.insertBefore(<li>b, <li>f)']);
 	});
 
 	it('should reverse keyed children effectively', () => {
@@ -438,7 +430,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.insertBefore(<li>b, <li>a)'
+			'<ol>jihgfedcab.appendChild(<li>a)'
 		]);
 	});
 

test/browser/render.test.js

@@ -1662,12 +1662,9 @@ describe('render()', () => {
 			`<div>${b.map(n => `<div>${n}</div>`).join('')}</div>`
 		);
 		expect(getLog()).to.deep.equal([
-			'<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)'
+			'<div>0123456.insertBefore(<div>2, <div>6)',
+			'<div>0134526.appendChild(<div>4)',
+			'<div>0135264.appendChild(<div>0)'
 		]);
 		clearLog();