Merge branch 'master' into fix/effect_execution_order

preactjs · Apr 5, 2019 · fe735c3 · fe735c3
2 parents 01abe2a + 149376d
commit fe735c3
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 1 deletion.
diff --git a/src/create-element.js b/src/create-element.js
@@ -93,7 +93,9 @@ export function coerceToVNode(possibleVNode) {
 
 	// Clone vnode if it has already been used. ceviche/#57
 	if (possibleVNode._dom!=null) {
-		return createVNode(possibleVNode.type, possibleVNode.props, possibleVNode.text, possibleVNode.key, null);
+		let vnode = createVNode(possibleVNode.type, possibleVNode.props, possibleVNode.text, possibleVNode.key, null);
+		vnode._dom = possibleVNode._dom;
+		return vnode;
 	}
 
 	return possibleVNode;

diff --git a/src/diff/index.js b/src/diff/index.js
@@ -64,6 +64,7 @@ export function diff(dom, parentDom, newVNode, oldVNode, context, isSvg, excessD
 			if (oldVNode._component) {
 				c = newVNode._component = oldVNode._component;
 				clearProcessingException = c._processingException;
+				newVNode._dom = oldVNode._dom;
 			}
 			else {
 				// Instantiate the new component
@@ -108,6 +109,7 @@ export function diff(dom, parentDom, newVNode, oldVNode, context, isSvg, excessD
 				}
 
 				if (!force && c.shouldComponentUpdate!=null && c.shouldComponentUpdate(newVNode.props, s, cctx)===false) {
+					dom = newVNode._dom;
 					c.props = newVNode.props;
 					c.state = s;
 					c._dirty = false;

diff --git a/test/browser/components.test.js b/test/browser/components.test.js
@@ -1252,4 +1252,74 @@ describe('Components', () => {
 			expect(C3.prototype.componentWillMount, 'inject between, C3 w/ intermediary div').to.have.been.calledOnce;
 		});
 	});
+
+	it('should set component._vnode._dom when sCU returns false', () => {
+		let parent;
+		 class Parent extends Component {
+			 render() {
+				parent = this;
+				return <Child />;
+			}
+		}
+
+		let condition = false;
+
+		let child;
+		class Child extends Component {
+			shouldComponentUpdate() {
+				return false;
+			}
+			render() {
+				child = this;
+				if (!condition) return null;
+				return <div class="child" />;
+			}
+		}
+
+		let app;
+		class App extends Component {
+			render() {
+				app = this;
+				return <Parent />;
+			}
+		}
+
+		render(<App />, scratch);
+		expect(child._vnode._dom).to.equal(child.base);
+
+		app.forceUpdate();
+		expect(child._vnode._dom).to.equal(child.base);
+
+		parent.setState({});
+		condition = true;
+		child.forceUpdate();
+		expect(child._vnode._dom).to.equal(child.base);
+		rerender();
+
+		expect(child._vnode._dom).to.equal(child.base);
+
+		condition = false;
+		app.setState({});
+		child.forceUpdate();
+		rerender();
+		expect(child._vnode._dom).to.equal(child.base);
+	});
+
+	it('should update old dom on forceUpdate in a lifecycle', () => {
+		let i = 0;
+		class App extends Component {
+			componentWillReceiveProps() {
+				this.forceUpdate();
+			}
+			render() {
+				if (i++==0) return <div>foo</div>;
+				return <div>bar</div>;
+			}
+		}
+
+		render(<App />, scratch);
+		render(<App />, scratch);
+
+		expect(scratch.innerHTML).to.equal('<div>bar</div>');
+	});
 });