Merge e62bd5c into 7345fe8

preactjs · Sep 3, 2019 · 50c5266 · 50c5266
2 parents 7345fe8 + e62bd5c
commit 50c5266
Show file tree

Hide file tree

Showing 3 changed files with 192 additions and 6 deletions.
diff --git a/src/component.js b/src/component.js
@@ -111,7 +111,7 @@ export function getDomSibling(vnode, childIndex) {
 			// Since updateParentDomPointers keeps _dom pointer correct,
 			// we can rely on _dom to tell us if this subtree contains a
 			// rendered DOM node, and what the first rendered DOM node is
-			return sibling._dom;
+			return sibling._component ? sibling._component.base : sibling._dom;
 		}
 	}
 
@@ -136,7 +136,6 @@ function updateParentDomPointers(vnode) {
 				break;
 			}
 		}
-
 		return updateParentDomPointers(vnode);
 	}
 }

diff --git a/src/diff/index.js b/src/diff/index.js
@@ -90,7 +90,7 @@ 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;
 					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');
+		});
 	});
 });