Merge 573e9f2 into 7345fe8

preactjs · Sep 5, 2019 · a42df9b · a42df9b
2 parents 7345fe8 + 573e9f2
commit a42df9b
Show file tree

Hide file tree

Showing 2 changed files with 195 additions and 4 deletions.
diff --git a/src/diff/index.js b/src/diff/index.js
@@ -90,8 +90,12 @@ export function diff(parentDom, newVNode, oldVNode, context, isSvg, excessDomChi
 					c.state = c._nextState;
 					c._dirty = false;
 					c._vnode = newVNode;
-					newVNode._dom = oldDom!=null ? oldVNode._dom : null;
+					newVNode._dom = oldDom!=null ? oldDom!==oldVNode._dom ? oldDom : oldVNode._dom : null;
 					newVNode._children = oldVNode._children;
+					const c = newVNode._children;
+					for (tmp = c.length; tmp--; ) {
+						if (c[tmp]) c[tmp]._parent = newVNode;
+					}
 					break outer;
 				}
 

diff --git a/test/browser/lifecycles/shouldComponentUpdate.test.js b/test/browser/lifecycles/shouldComponentUpdate.test.js
@@ -1,5 +1,5 @@
 import { setupRerender } from 'preact/test-utils';
-import { createElement, render, Component } from '../../../src/index';
+import { createElement, render, Component, Fragment } from '../../../src/index';
 import { setupScratch, teardown } from '../../_util/helpers';
 
 /** @jsx createElement */
@@ -294,9 +294,9 @@ describe('Lifecycle methods', () => {
 		});
 
 		// issue #1864
-		it('should update dom pointers correctly', () => {
+		it('should update dom pointers correctly when returning an empty string', () => {
 			function Child({ showMe, counter }) {
-				return showMe ? <div>Counter: {counter}</div> : null;
+				return showMe ? <div>Counter: {counter}</div> : '';
 			}
 
 			class Parent extends Component {
@@ -362,5 +362,192 @@ describe('Lifecycle methods', () => {
 			rerender();
 			expect(scratch.textContent).to.equal('');
 		});
+
+		// issue #1864 second case
+		it('should update dom pointers correctly when returning a string', () => {
+			function Child({ showMe, counter }) {
+				return showMe ? <div>Counter: {counter}</div> : 'foo';
+			}
+
+			class Parent extends Component {
+				shouldComponentUpdate() {
+					return false;
+				}
+				render() {
+					return <Inner />;
+				}
+			}
+
+			let updateChild = () => null;
+			class Inner extends Component {
+				constructor(props) {
+					super(props);
+					this.state = { showMe: false };
+					updateChild = () => {
+						this.setState({ showMe: display = !display });
+					};
+				}
+				render() {
+					return <Child showMe={this.state.showMe} counter={0} />;
+				}
+			}
+
+			let display = false;
+			let updateApp = () => null;
+			class App extends Component {
+				constructor(props) {
+					super(props);
+					updateApp = () => this.setState({});
+				}
+				render() {
+					return (
+						<div>
+							<div />
+							<div />
+							<Parent />
+						</div>
+					);
+				}
+			}
+
+			render(<App />, scratch);
+			expect(scratch.textContent).to.equal('foo');
+
+			updateChild();
+			rerender();
+
+			expect(scratch.textContent).to.equal('Counter: 0');
+
+			updateApp();
+			rerender();
+
+			expect(scratch.textContent).to.equal('Counter: 0');
+
+			updateChild();
+			rerender();
+
+			expect(scratch.textContent).to.equal('foo');
+
+			updateApp();
+			rerender();
+			expect(scratch.textContent).to.equal('foo');
+		});
+
+		it('should correctly update nested chilreen', () => {
+			let hideThree, incrementThree;
+
+			class One extends Component {
+				shouldComponentUpdate() { return false; }
+				render(p) { return p.children; }
+			}
+
+			class Two extends Component {
+				constructor(props) {
+					super(props);
+					this.state = { hideMe: false };
+					hideThree = () => this.setState(s => ({ hideMe: !s.hideMe }));
+				}
+
+				shouldComponentUpdate(nextProps, nextState) { return this.state.hideMe !== nextState.hideMe; }
+
+				render(p, { hideMe }) {
+					return hideMe ? <Fragment /> : p.children;
+				}
+			}
+
+			class Three extends Component {
+				constructor(props) {
+					super(props);
+					this.state = { counter: 1 };
+					incrementThree = () => this.setState(s => ({ counter: s.counter + 1 }));
+				}
+
+				render(p, { counter }) { return <span>{counter}</span>; }
+			}
+
+			render(<One><Two><Three /></Two></One>, scratch);
+			expect(scratch.innerHTML).to.equal('<span>1</span>');
+
+			hideThree();
+			rerender();
+			expect(scratch.innerHTML).to.equal('');
+
+			hideThree();
+			rerender();
+			expect(scratch.innerHTML).to.equal('<span>1</span>');
+
+			incrementThree();
+			rerender();
+			expect(scratch.innerHTML).to.equal('<span>2</span>');
+		});
+
+		// issue #1864 third case
+		it('should update dom pointers correctly without siblings', () => {
+			function Child({ showMe, counter }) {
+				return showMe ? <div>Counter: {counter}</div> : 'foo';
+			}
+
+			class Parent extends Component {
+				shouldComponentUpdate() {
+					return false;
+				}
+				render() {
+					return <Inner />;
+				}
+			}
+
+			let updateChild = () => null;
+			class Inner extends Component {
+				constructor(props) {
+					super(props);
+					this.state = { showMe: false };
+					updateChild = () => {
+						this.setState({ showMe: display = !display });
+					};
+				}
+				render() {
+					return <Child showMe={this.state.showMe} counter={0} />;
+				}
+			}
+
+			let display = false;
+			let updateApp = () => null;
+			class App extends Component {
+				constructor(props) {
+					super(props);
+					updateApp = () => this.setState({});
+				}
+				render() {
+					return (
+						<div>
+							<Parent />
+						</div>
+					);
+				}
+			}
+
+			render(<App />, scratch);
+			expect(scratch.textContent).to.equal('foo');
+
+			updateChild();
+			rerender();
+
+			expect(scratch.textContent).to.equal('Counter: 0');
+
+			updateApp();
+			rerender();
+
+			expect(scratch.textContent).to.equal('Counter: 0');
+
+			updateChild();
+			rerender();
+
+			expect(scratch.textContent).to.equal('foo');
+
+			updateApp();
+			rerender();
+
+			expect(scratch.textContent).to.equal('foo');
+		});
 	});
 });