Refactor diffing (#50)

Author: Vadim Demedes

.babelrc

@@ -0,0 +1,10 @@
+{
+	"plugins": [
+		[
+			"transform-react-jsx",
+			{
+				"pragma": "h"
+			}
+		]
+	]
+}

example.js

@@ -0,0 +1,34 @@
+'use strict';
+const {h, render, Component, Text} = require('.');
+
+class Counter extends Component {
+	constructor() {
+		super();
+
+		this.state = {
+			i: 0
+		};
+	}
+
+	render() {
+		return (
+			<Text green>
+				{this.state.i} tests passed
+			</Text>
+		);
+	}
+
+	componentDidMount() {
+		this.timer = setInterval(() => {
+			this.setState({
+				i: this.state.i + 1
+			});
+		}, 100);
+	}
+
+	componentWillUnmount() {
+		clearInterval(this.timer);
+	}
+}
+
+render(<Counter/>);

index.js

@@ -5,7 +5,6 @@ const logUpdate = require('log-update');
 const StringComponent = require('./lib/string-component');
 const Component = require('./lib/component');
 const renderToString = require('./lib/render-to-string');
-const callTree = require('./lib/call-tree');
 const diff = require('./lib/diff');
 const h = require('./lib/h');
 const Indent = require('./lib/components/indent');
@@ -19,19 +18,8 @@ exports.Text = Text;
 
 const noop = () => {};
 
-const unmount = tree => callTree(tree, 'unmount');
-const didMount = tree => callTree(tree, 'didMount');
-const didUpdate = tree => callTree(tree, 'didUpdate');
-
-const build = (nextTree, prevTree, onUpdate = noop, context = {}, autoLifecycle = true) => {
-	const reconciledTree = diff(prevTree, nextTree, onUpdate, context);
-
-	if (autoLifecycle) {
-		didMount(reconciledTree);
-		didUpdate(reconciledTree);
-	}
-
-	return reconciledTree;
+const build = (nextTree, prevTree, onUpdate = noop, context = {}) => {
+	return diff(prevTree, nextTree, onUpdate, context);
 };
 
 exports.build = build;
@@ -64,10 +52,8 @@ exports.render = (tree, options) => {
 	}
 
 	const update = () => {
-		const nextTree = build(tree, currentTree, onUpdate, context, false); // eslint-disable-line no-use-before-define
+		const nextTree = build(tree, currentTree, onUpdate, context); // eslint-disable-line no-use-before-define
 		log(renderToString(nextTree));
-		didMount(nextTree);
-		didUpdate(nextTree);
 
 		currentTree = nextTree;
 	};
@@ -123,7 +109,7 @@ exports.render = (tree, options) => {
 		}
 
 		isUnmounted = true;
-		unmount(currentTree);
+		build(null, currentTree, onUpdate, context); // eslint-disable-line no-use-before-define
 		log.done();
 
 		consoleMethods.forEach(method => console[method].restore());

lib/call-tree.js

@@ -54,6 +54,19 @@ class Component {
 		return this.render(this.props, this.state, this.context);
 	}
 
+	_componentWillUpdate(nextProps, nextState) {
+		this.componentWillUpdate(nextProps, nextState);
+		this.props = nextProps;
+		this.state = nextState;
+		this._pendingState = null;
+	}
+
+	_componentDidUpdate() {
+		this.componentDidUpdate();
+		this._stateUpdateCallbacks.forEach(cb => cb());
+		this._stateUpdateCallbacks = [];
+	}
+
 	_enqueueUpdate() {
 		enqueueUpdate(this._onUpdate);
 	}

lib/component.js

@@ -1,64 +1,165 @@
 'use strict';
 
-const isEqual = require('lodash.isequal');
-const {getInstance, getOrCreateInstance} = require('./instance');
+const PropTypes = require('prop-types');
+const isEqualShallow = require('is-equal-shallow');
 const VNode = require('./vnode');
 
-const diff = (prevNode, nextNode, onUpdate, context) => {
-	const prevInstance = getInstance(prevNode);
+const isClassComponent = component => component.isComponent;
+
+const checkPropTypes = (component, props) => {
+	if (process.env.NODE_ENV !== 'production' && typeof component.propTypes === 'object') {
+		const name = component.displayName || component.name;
+
+		PropTypes.checkPropTypes(component.propTypes, props, 'prop', name);
+	}
+};
+
+const getProps = vnode => Object.assign({}, vnode.component.defaultProps, vnode.props);
+
+const getNextState = vnode => {
+	if (isClassComponent(vnode.component)) {
+		return vnode.instance._pendingState || vnode.instance.state;
+	}
+
+	return null;
+};
+
+const mount = (vnode, context, onUpdate) => {
+	const props = getProps(vnode);
+	checkPropTypes(vnode.component, props);
+
+	if (isClassComponent(vnode.component)) {
+		vnode.createInstance(props);
+		vnode.instance._onUpdate = onUpdate;
+
+		const childContext = vnode.instance.getChildContext();
+		vnode.instance.context = Object.assign({}, context, childContext);
+		Object.assign(context, childContext);
+
+		vnode.instance.componentWillMount();
+
+		vnode.children = vnode.instance._render();
+	} else {
+		vnode.children = vnode.component(props, context);
+	}
+};
+
+const componentDidMount = vnode => {
+	if (isClassComponent(vnode.component)) {
+		vnode.instance.componentDidMount();
+
+		if (vnode.ref) {
+			vnode.ref(vnode.instance);
+		}
+	}
+};
+
+const shouldComponentUpdate = (vnode, nextProps, nextState) => {
+	if (isClassComponent(vnode.component)) {
+		return vnode.instance.shouldComponentUpdate(nextProps, nextState);
+	}
+
+	return !isEqualShallow(vnode.props, nextProps);
+};
+
+const componentWillReceiveProps = (vnode, nextProps) => {
+	vnode.props = nextProps;
 
+	if (isClassComponent(vnode.component)) {
+		vnode.instance.componentWillReceiveProps(nextProps);
+	}
+};
+
+const rerender = vnode => {
+	const nextProps = getProps(vnode);
+	checkPropTypes(vnode.component, nextProps);
+
+	if (isClassComponent(vnode.component)) {
+		vnode.instance._componentWillUpdate(nextProps, getNextState(vnode));
+		vnode.children = vnode.instance._render();
+		return;
+	}
+
+	vnode.children = vnode.component(nextProps, {});
+};
+
+const componentDidUpdate = vnode => {
+	if (isClassComponent(vnode.component)) {
+		vnode.instance._componentDidUpdate();
+	}
+};
+
+const componentWillUnmount = vnode => {
+	if (isClassComponent(vnode.component)) {
+		vnode.instance.componentWillUnmount();
+	}
+};
+
+const unmount = vnode => {
+	if (isClassComponent(vnode.component)) {
+		componentWillUnmount(vnode);
+		vnode.instance = null;
+	}
+
+	vnode.children.forEach(childVNode => {
+		diff(childVNode, null); // eslint-disable-line no-use-before-define
+	});
+
+	if (isClassComponent(vnode.component) && vnode.ref) {
+		vnode.ref(null);
+	}
+};
+
+const diff = (prevNode, nextNode, onUpdate, context) => {
 	if (typeof nextNode === 'number') {
 		if (prevNode instanceof VNode) {
-			prevInstance.unmount();
+			unmount(prevNode);
 		}
 
 		return String(nextNode);
 	}
 
 	if (!nextNode || typeof nextNode === 'boolean') {
 		if (prevNode instanceof VNode) {
-			prevInstance.unmount();
+			unmount(prevNode);
 		}
 
 		return null;
 	}
 
 	if (typeof nextNode === 'string') {
 		if (prevNode instanceof VNode) {
-			prevInstance.unmount();
+			unmount(prevNode);
 		}
 
 		return nextNode;
 	}
 
-	const nextInstance = getOrCreateInstance(nextNode);
-
-	nextInstance.context = context;
-	nextInstance.onUpdate = onUpdate;
+	let isUpdate = true;
 
 	if (!(prevNode instanceof VNode)) {
-		nextInstance.mount();
-		return nextNode;
+		mount(nextNode, context, onUpdate);
+		isUpdate = false;
 	}
 
-	if (prevNode.component !== nextNode.component) {
-		prevInstance.unmount();
-		nextInstance.mount();
-		return nextNode;
+	if (isUpdate && prevNode.component !== nextNode.component) {
+		unmount(prevNode);
+		mount(nextNode, context, onUpdate);
+		isUpdate = false;
 	}
 
-	const shouldUpdate = prevInstance.shouldComponentUpdate(nextNode.props);
-	const prevChildren = [].slice.call(prevNode.children);
+	const shouldUpdate = isUpdate && shouldComponentUpdate(prevNode, getProps(nextNode), getNextState(prevNode));
+	const prevChildren = isUpdate ? [].slice.call(prevNode.children) : [];
 
-	if (!isEqual(prevNode.props, nextNode.props)) {
-		prevInstance.props = nextNode.props;
+	if (isUpdate && !isEqualShallow(getProps(prevNode), getProps(nextNode))) {
+		componentWillReceiveProps(prevNode, getProps(nextNode));
 	}
 
 	if (shouldUpdate) {
-		prevInstance.rerender();
+		rerender(prevNode);
 	}
 
-	const nextChildren = prevNode.children;
+	const nextChildren = isUpdate ? prevNode.children : nextNode.children;
 
 	const length = Math.max(prevChildren.length, nextChildren.length);
 	const reconciledChildren = [];
@@ -68,9 +169,18 @@ const diff = (prevNode, nextNode, onUpdate, context) => {
 		reconciledChildren.push(childNode);
 	}
 
-	prevInstance.children = reconciledChildren;
+	if (isUpdate) {
+		prevNode.children = reconciledChildren;
+
+		if (shouldUpdate) {
+			componentDidUpdate(prevNode);
+		}
+	} else {
+		nextNode.children = reconciledChildren;
+		componentDidMount(nextNode);
+	}
 
-	return prevNode;
+	return isUpdate ? prevNode : nextNode;
 };
 
 module.exports = diff;