Merge 8b47c11 into 50f7f75

src/diff/children.js

@@ -32,7 +32,6 @@ export function diffChildren(parentDom, newParentVNode, oldParentVNode, context,
 	let oldChildren = (oldParentVNode && oldParentVNode._children) || EMPTY_ARR;
 
 	let oldChildrenLength = oldChildren.length;
-	let oldChild;
 
 	// Only in very specific places should this logic be invoked (top level `render` and `diffElementNodes`).
 	// I'm using `EMPTY_OBJ` to signal when `diffChildren` is invoked in these situations. I can't use `null`
@@ -48,7 +47,6 @@ export function diffChildren(parentDom, newParentVNode, oldParentVNode, context,
 		else {
 			for (i = 0; !oldDom && i < oldChildrenLength; i++) {
 				oldDom = oldChildren[i] && oldChildren[i]._dom;
-				oldChild = oldChildren[i];
 			}
 		}
 	}
@@ -73,9 +71,6 @@ export function diffChildren(parentDom, newParentVNode, oldParentVNode, context,
 					oldVNode = oldChildren[j];
 					if (oldVNode && (oldVNode.key!=null ? (childVNode.key === oldVNode.key) : (childVNode.key==null && childVNode.type === oldVNode.type))) {
 						oldChildren[j] = undefined;
-						if (oldChildrenLength !== newChildren.length && oldVNode.type !== (oldChild && oldChild.type)) {
-							oldDom = oldVNode._dom;
-						}
 						break;
 					}
 					oldVNode = null;

test/_util/dom.js

@@ -32,3 +32,15 @@ export const li = contents => `<li>${contents}</li>`;
  * A helper to generate innerHTML validation strings containing inputs
  */
 export const input = () => `<input type="text">`;
+
+/**
+ * A helper to generate innerHTML validation strings containing inputs
+ * @param {string | number} contents The contents of the h1
+ */
+export const h1 = contents => `<h1>${contents}</h1>`;
+
+/**
+ * A helper to generate innerHTML validation strings containing inputs
+ * @param {string | number} contents The contents of the h2
+ */
+export const h2 = contents => `<h2>${contents}</h2>`;

test/browser/components.test.js

@@ -421,6 +421,78 @@ describe('Components', () => {
 		expect(scratch.innerHTML, 'switching to textnode 2').to.equal('asdf');
 	});
 
+	// Test for Issue developit/preact#1616
+	it('should maintain order when setting state (that inserts dom-elements)', () => {
+		let add, addTwice, reset;
+		const Entry = props => (
+			<div>{props.children}</div>
+		);
+
+		class App extends Component {
+			constructor(props) {
+				super(props);
+
+				this.state = { values: ['abc'] };
+
+				add = this.add = this.add.bind(this);
+				addTwice = this.addTwice = this.addTwice.bind(this);
+				reset = this.reset = this.reset.bind(this);
+			}
+
+			add() {
+				this.setState({ values: [...this.state.values, 'def'] });
+			}
+
+			addTwice() {
+				this.setState({ values: [...this.state.values, 'def', 'ghi'] });
+			}
+
+			reset() {
+				this.setState({ values: ['abc'] });
+			}
+
+			render() {
+				return (
+					<div>
+						{this.state.values.map(v => (
+							<Entry>
+								{v}
+							</Entry>
+						))}
+						<button>First Button</button>
+						<button>Second Button</button>
+						<button>Third Button</button>
+					</div>
+				);
+			}
+		}
+
+		render(<App />, scratch);
+		expect(scratch.firstChild.innerHTML).to.equal('<div>abc</div>' +
+			'<button>First Button</button><button>Second Button</button><button>Third Button</button>');
+
+		add();
+		rerender();
+		expect(scratch.firstChild.innerHTML).to.equal('<div>abc</div><div>def' +
+			'</div><button>First Button</button><button>Second Button</button><button>Third Button</button>');
+
+		add();
+		rerender();
+		expect(scratch.firstChild.innerHTML).to.equal('<div>abc</div><div>def</div><div>def' +
+			'</div><button>First Button</button><button>Second Button</button><button>Third Button</button>');
+
+		reset();
+		rerender();
+		expect(scratch.firstChild.innerHTML).to.equal('<div>abc</div>' +
+			'<button>First Button</button><button>Second Button</button><button>Third Button</button>');
+
+		addTwice();
+		rerender();
+		expect(scratch.firstChild.innerHTML).to.equal('<div>abc</div><div>def</div><div>ghi' +
+			'</div><button>First Button</button><button>Second Button</button><button>Third Button</button>');
+	});
+
+
 	// Test for Issue developit/preact#254
 	it('should not recycle common class children with different keys', () => {
 		let idx = 0;