graciously handle array shuffling (#4413)

* graciously handle array shuffling * Update test/browser/render.test.js * Update test/browser/render.test.js * easier to read
preactjs · Jun 25, 2024 · 92e86e9 · 92e86e9
1 parent 4c20c23
commit 92e86e9
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 9 deletions.
diff --git a/src/diff/children.js b/src/diff/children.js
@@ -302,20 +302,26 @@ function constructNewChildrenArray(newParentVNode, renderResult, oldChildren) {
 				childVNode._flags |= INSERT_VNODE;
 			}
 		} else if (matchingIndex !== skewedIndex) {
-			if (matchingIndex === skewedIndex + 1) {
+			if (matchingIndex == skewedIndex - 1) {
+				skew = matchingIndex - skewedIndex;
+			} else if (matchingIndex == skewedIndex + 1) {
 				skew++;
 			} else if (matchingIndex > skewedIndex) {
+				// Our matched DOM-node is further in the list of children than
+				// where it's at now.
+
+				// When the remaining old children is bigger than the new-children
+				// minus our skewed index we know we are dealing with a shrinking list
+				// we have to increase our skew with the matchedIndex - the skewed index
 				if (remainingOldChildren > newChildrenLength - skewedIndex) {
 					skew += matchingIndex - skewedIndex;
 				} else {
+					// If we have matched all the children just decrease the skew
 					skew--;
 				}
 			} else if (matchingIndex < skewedIndex) {
-				if (matchingIndex == skewedIndex - 1) {
-					skew = matchingIndex - skewedIndex;
-				}
-			} else {
-				skew = 0;
+				// When our new position is in front of our old position than we increase the skew
+				skew++;
 			}
 
 			// Move this VNode's DOM if the original index (matchingIndex) doesn't

diff --git a/test/browser/render.test.js b/test/browser/render.test.js
@@ -474,17 +474,17 @@ describe('render()', () => {
 
 	it('should support popover auto', () => {
 		render(<div popover="auto" />, scratch);
-		expect(scratch.innerHTML).to.equal("<div popover=\"auto\"></div>");
+		expect(scratch.innerHTML).to.equal('<div popover="auto"></div>');
 	});
 
 	it('should support popover true boolean', () => {
 		render(<div popover />, scratch);
-		expect(scratch.innerHTML).to.equal("<div popover=\"\"></div>");
+		expect(scratch.innerHTML).to.equal('<div popover=""></div>');
 	});
 
 	it('should support popover false boolean', () => {
 		render(<div popover={false} />, scratch);
-		expect(scratch.innerHTML).to.equal("<div></div>");
+		expect(scratch.innerHTML).to.equal('<div></div>');
 	});
 
 	// Test for preactjs/preact#4340
@@ -1625,4 +1625,68 @@ describe('render()', () => {
 			'<div><div>One</div><div>Six</div><div>Seven</div></div>'
 		);
 	});
+
+	it('handles shuffled child-ordering', function () {
+		const App = ({ items }) => (
+			<div>
+				{items.map(key => (
+					<div key={key}>{key}</div>
+				))}
+			</div>
+		);
+		const a = ['0', '1', '2', '3', '4', '5', '6'];
+		const b = ['1', '3', '5', '2', '6', '4', '0'];
+		const c = ['11', '3', '1', '4', '6', '2', '5', '0', '9', '10'];
+		render(<App items={a} />, scratch);
+		clearLog();
+		expect(scratch.innerHTML).to.equal(
+			`<div>${a.map(n => `<div>${n}</div>`).join('')}</div>`
+		);
+
+		render(<App items={b} />, scratch);
+		expect(scratch.innerHTML).to.equal(
+			`<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)'
+		]);
+		clearLog();
+
+		render(<App items={c} />, scratch);
+		expect(scratch.innerHTML).to.equal(
+			`<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>113146250.appendChild(<div>9)',
+			'<div>.appendChild(#text)',
+			'<div>1131462509.appendChild(<div>10)'
+		]);
+		clearLog();
+
+		render(<App items={a} />, scratch);
+		expect(scratch.innerHTML).to.equal(
+			`<div>${a.map(n => `<div>${n}</div>`).join('')}</div>`
+		);
+		expect(getLog()).to.deep.equal([
+			'<div>11.remove()',
+			'<div>9.remove()',
+			'<div>10.remove()',
+			'<div>3146250.appendChild(<div>1)',
+			'<div>3462501.appendChild(<div>2)',
+			'<div>3465012.appendChild(<div>3)',
+			'<div>4650123.appendChild(<div>4)',
+			'<div>6501234.appendChild(<div>5)',
+			'<div>6012345.appendChild(<div>6)'
+		]);
+		clearLog();
+	});
 });