From 7e6c93803b39885ceb8dbc6ad5f7341545f5da7e Mon Sep 17 00:00:00 2001
From: Kabir Shah <iamkbrsh@gmail.com>
Date: Tue, 16 Apr 2019 00:20:49 -0700
Subject: [PATCH] complete async executor implementation

---
 packages/moon/dist/moon.js             | 158 +++++++++++++++++++------
 packages/moon/dist/moon.min.js         |   2 +-
 packages/moon/src/executor/executor.js | 142 +++++++++++++++++-----
 3 files changed, 233 insertions(+), 69 deletions(-)

diff --git a/packages/moon/dist/moon.js b/packages/moon/dist/moon.js
index 01aa96b9..61b13f48 100644
--- a/packages/moon/dist/moon.js
+++ b/packages/moon/dist/moon.js
@@ -636,36 +636,68 @@
 	 */
 
 	var patchTypes = {
-		setAttributes: 0,
-		appendElement: 1,
-		removeElement: 2,
-		replaceElement: 3
+		updateText: 0,
+		setAttributes: 1,
+		appendElement: 2,
+		removeElement: 3,
+		replaceElement: 4
 	};
 	/**
 	 * Creates a DOM element from a view node.
 	 *
 	 * @param {Object} node
-	 * @returns {Element} DOM element
+	 * @returns {Object} node to be used as an old node
 	 */
 
-	function executeCreateElement(node) {
-		if (node.type === types.element) {
-			var element = document.createElement(node.name);
+	function executeCreate(node) {
+		var nodeType = node.type;
+		var nodeName = node.name;
+		var nodeData = {};
+		var nodeChildren = [];
+		var nodeNode;
+
+		if (nodeType === types.element) {
+			nodeNode = document.createElement(node.name); // Set data and attributes.
+
 			var _data = node.data;
-			var children = _data.children;
 
 			for (var key in _data) {
-				element.setAttribute(key, _data[key]);
-			}
+				var value = _data[key];
+
+				if (key !== "children") {
+					nodeData[key] = value;
+					nodeNode.setAttribute(key, value);
+				}
+			} // Recursively append children.
+
+
+			var children = _data.children;
 
 			for (var i = 0; i < children.length; i++) {
-				element.appendChild(executeCreateElement(children[i]));
+				var child = executeCreate(children[i]);
+				nodeChildren.push(child);
+				nodeNode.appendChild(child.node);
 			}
-
-			return element;
 		} else {
-			return document.createTextNode(node.data[""]);
-		}
+			// Get text content using the default data key.
+			var textContent = node.data[""]; // Create a text node using the text content.
+
+			nodeNode = document.createTextNode(textContent); // Set only the default data key.
+
+			nodeData[""] = textContent;
+		} // Set the children of the new old node.
+
+
+		nodeData.children = nodeChildren; // Return a new node with copied properties of the original node. This is to
+		// prevent bugs from hoisting. When the new nodes are compared to the old
+		// ones, the old ones are modified, and the new ones are immutable.
+
+		return {
+			type: nodeType,
+			name: nodeName,
+			data: nodeData,
+			node: nodeNode
+		};
 	}
 	/**
 	 * Walks through the view and executes components.
@@ -683,7 +715,8 @@
 			var index = indexes.pop();
 
 			if (node.type === types.component) {
-				var nodeComponent = components[node.name](node.data);
+				// Execute the component to get the component view.
+				var nodeComponent = components[node.name](node.data); // Set the root view or current node to the new component view.
 
 				if (parent === null) {
 					setViewNew(nodeComponent);
@@ -691,8 +724,10 @@
 					node = parent.data.children[index] = nodeComponent;
 				}
 			} else if (parent === null) {
+				// If there is no parent, set the root new view to the current node.
 				setViewNew(node);
-			}
+			} // Execute the views of the children.
+
 
 			var children = node.data.children;
 
@@ -703,9 +738,12 @@
 			}
 
 			if (nodes.length === 0) {
+				// Move to the diff phase if there is nothing left to do.
 				executeDiff(viewOld, viewNew, []);
 				break;
 			} else if (performance.now() - executeStart >= 8) {
+				// If the current frame doesn't have sufficient time left to keep
+				// running then continue executing the view in the next frame.
 				requestAnimationFrame(function () {
 					executeStart = performance.now();
 					executeView(nodes, parents, indexes);
@@ -734,15 +772,28 @@
 			var _nodeNew = nodesNew.pop();
 
 			if (_nodeOld === _nodeNew) {
+				// If they have the same reference (hoisted) then skip diffing.
 				continue;
 			} else if (_nodeOld.name !== _nodeNew.name) {
+				// If they have different names, then replace the old node with the
+				// new one.
 				patches.push({
 					type: patchTypes.replaceElement,
 					nodeOld: _nodeOld,
 					nodeNew: _nodeNew,
 					nodeParent: null
 				});
+			} else if (_nodeOld.type === types.text) {
+				// If they both are text, then update the text content.
+				patches.push({
+					type: patchTypes.updateText,
+					nodeOld: _nodeOld,
+					nodeNew: _nodeNew,
+					parent: null
+				});
 			} else {
+				// If they both are normal elements, then set attributes and diff the
+				// children for appends, deletes, or recursive updates.
 				patches.push({
 					type: patchTypes.setAttributes,
 					nodeOld: _nodeOld,
@@ -796,9 +847,12 @@
 			}
 
 			if (nodesOld.length === 0) {
+				// Move to the patch phase if there is nothing left to do.
 				executePatch(patches);
 				break;
 			} else if (performance.now() - executeStart >= 8) {
+				// If the current frame doesn't have sufficient time left to keep
+				// running then continue diffing in the next frame.
 				requestAnimationFrame(function () {
 					executeStart = performance.now();
 					executeDiff(nodesOld, nodesNew, patches);
@@ -819,15 +873,32 @@
 			var patch = patches[i];
 
 			switch (patch.type) {
-				case patchTypes.setAttributes:
+				case patchTypes.updateText:
 					{
+						// Update text of a node with new text.
 						var nodeOld = patch.nodeOld;
-						var nodeOldNode = nodeOld.node;
-						var nodeNewData = patch.nodeNew.data;
-						nodeOld.data = nodeNewData;
+						var nodeNewText = patch.nodeNew.data[""];
+						nodeOld.data[""] = nodeNewText;
+						nodeOld.node.textContent = nodeNewText;
+						break;
+					}
+
+				case patchTypes.setAttributes:
+					{
+						// Set attributes of a node with new data.
+						var _nodeOld2 = patch.nodeOld;
+						var nodeOldData = _nodeOld2.data;
+						var nodeOldNode = _nodeOld2.node;
+						var nodeNewData = patch.nodeNew.data; // Mutate the old node with the new node's data and set attributes
+						// on the DOM node.
 
 						for (var key in nodeNewData) {
-							nodeOldNode.setAttribute(key, nodeNewData[key]);
+							var value = nodeNewData[key];
+
+							if (key !== "children") {
+								nodeOldData[key] = value;
+								nodeOldNode.setAttribute(key, value);
+							}
 						}
 
 						break;
@@ -835,22 +906,24 @@
 
 				case patchTypes.appendElement:
 					{
+						// Append a node. Creates a new old node because the old node must
+						// be mutable while the new nodes are mutable.
 						var nodeNew = patch.nodeNew;
 						var nodeParent = patch.nodeParent;
-						var nodeNewNode = executeCreateElement(nodeNew);
-						nodeParent.data.children.push({
-							type: nodeNew.type,
-							name: nodeNew.name,
-							data: nodeNew.data,
-							node: nodeNewNode
-						});
-						nodeParent.node.appendChild(nodeNewNode);
+						var nodeOldNew = executeCreate(nodeNew);
+						nodeParent.data.children.push(nodeOldNew);
+						nodeParent.node.appendChild(nodeOldNew.node);
 						break;
 					}
 
 				case patchTypes.removeElement:
 					{
-						var _nodeParent = patch.nodeParent;
+						// Remove a node from the parent.
+						var _nodeParent = patch.nodeParent; // Pops the last child because the patches still hold a reference
+						// to them. The diff phase can only create this patch when there
+						// are extra old children, and popping nodes off of the end is more
+						// efficient than removing at a specific index, especially because
+						// they are equivalent in this case.
 
 						_nodeParent.data.children.pop();
 
@@ -861,15 +934,22 @@
 
 				case patchTypes.replaceElement:
 					{
-						var _nodeOld2 = patch.nodeOld;
+						// Replaces an old node with a new node.
+						var _nodeOld3 = patch.nodeOld;
 						var _nodeNew2 = patch.nodeNew;
-						var _nodeOldNode = _nodeOld2.node;
-						_nodeOld2.type = _nodeNew2.type;
-						_nodeOld2.name = _nodeNew2.name;
-						_nodeOld2.data = _nodeNew2.data;
-						_nodeOld2.node = executeCreateElement(_nodeNew2);
 
-						_nodeOldNode.parentNode.replaceChild(_nodeOld2.node, _nodeOldNode);
+						var _nodeOldNew = executeCreate(_nodeNew2);
+
+						var _nodeOldNode = _nodeOld3.node; // Mutate the old node with the copied data from creating the new
+						// old node, replacing the old DOM node reference.
+
+						_nodeOld3.type = _nodeOldNew.type;
+						_nodeOld3.name = _nodeOldNew.name;
+						_nodeOld3.data = _nodeOldNew.data;
+						_nodeOld3.node = _nodeOldNew.node; // Replace the old node using the reference created before updating
+						// the old node.
+
+						_nodeOldNode.parentNode.replaceChild(_nodeOld3.node, _nodeOldNode);
 
 						break;
 					}
diff --git a/packages/moon/dist/moon.min.js b/packages/moon/dist/moon.min.js
index 15eeec40..91dcea70 100644
--- a/packages/moon/dist/moon.min.js
+++ b/packages/moon/dist/moon.min.js
@@ -4,4 +4,4 @@
  * Released under the MIT License
  * https://kbrsh.github.io/moon
  */
-!function(e,t){"undefined"==typeof module?e.Moon=t():module.exports=t()}(this,function(){"use strict";function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var p={element:0,text:1,component:2};var a,f,c,i,E=/<([\w\d-_]+)([^>]*?)(\/?)>/g,N=/\s*([\w\d-_:@]*)(?:=(?:("[^"]*"|'[^']*')|{([^{}]*)}))?/g;function t(e){e=e.trim();for(var t=[],n=0;n<e.length;){var r=e[n];if("<"===r){var a=e[n+1];if("/"===a){var o=e.indexOf(">",n+2),i=e.slice(n+2,o);0,t.push({type:"tagClose",value:i}),n=o+1;continue}if("!"===a&&"-"===e[n+2]&&"-"===e[n+3]){var u=e.indexOf("--\x3e",n+4);0,n=u+3;continue}E.lastIndex=n;var l=E.exec(e);0;for(var d=l[0],p=l[1],f=l[2],c=l[3],s={},v=void 0;null!==(v=N.exec(f));){var m=v[0],h=v[1],y=v[2],b=v[3];0===m.length?N.lastIndex+=1:s[h]=void 0===b?y:b}t.push({type:"tagOpen",value:p,attributes:s,closed:"/"===c}),n+=d.length}else if("{"===r){var g="";for(n+=1;n<e.length;n++){var w=e[n];if("}"===w)break;g+=w}t.push({type:"tagOpen",value:"text",attributes:{"":g},closed:!0}),n+=1}else{for(var x="";n<e.length;n++){var O=e[n];if("<"===O||"{"===O)break;x+=O}t.push({type:"tagOpen",value:"text",attributes:{"":'"'+x+'"'},closed:!0})}}return t}function s(e,t,n,r){this.message=e,this.start=t,this.end=n,this.next=r}function v(e,t,n){var r=n[e],a=n[t-1],o=t-e;if(0==o)return new s("",e,t);if(1==o)return"tagOpen"===r.type&&!0===r.closed?{type:r.value,attributes:r.attributes,children:[]}:new s("",e,t);if("tagOpen"!==r.type||"tagClose"!==a.type||r.value!==a.value)return new s("",e,t);var i=function e(t,n,r){var a;if(0==n-t)return[];for(var o=t+1;o<=n;o++){var i=v(t,o,r);if(i instanceof s)a=i;else{var u=e(o,n,r);if(!(u instanceof s)){for(var l=[i],d=0;d<u.length;d++)l.push(u[d]);return l}}}return new s("",t,n,a)}(e+1,t-1,n);return i instanceof s?new s("",e,t,i):{type:r.value,attributes:r.attributes,children:i}}function n(e){var t=v(0,e.length,e);return t}function u(e){var t,n=e.type;t="text"===n?p.text:n[0]===n[0].toLowerCase()?p.element:p.component;var r="{";for(var a in e.attributes)r+='"'+a+'":'+e.attributes[a]+",";r+="children:[";for(var o="",i=0;i<e.children.length;i++)r+=o+u(e.children[i]),o=",";return"{type:"+t+',name:"'+n+'",data:'+r+"]}}"}function l(e){return u(n(t(e)))}var h,m={};function y(e){c=e}var b={setAttributes:0,appendElement:1,removeElement:2,replaceElement:3};function g(e){if(e.type!==p.element)return document.createTextNode(e.data[""]);var t=document.createElement(e.name),n=e.data,r=n.children;for(var a in n)t.setAttribute(a,n[a]);for(var o=0;o<r.length;o++)t.appendChild(g(r[o]));return t}function w(e,t,n){for(var r=[e],a=[t];;){var o=r.pop(),i=a.pop();if(o!==i){if(o.name!==i.name)n.push({type:b.replaceElement,nodeOld:o,nodeNew:i,nodeParent:null});else{n.push({type:b.setAttributes,nodeOld:o,nodeNew:i,nodeParent:null});var u=o.data.children,l=i.data.children,d=u.length,p=l.length;if(d===p)for(var f=0;f<d;f++)r.push(u[f]),a.push(l[f]);else if(p<d){for(var c=0;c<p;c++)r.push(u[c]),a.push(l[c]);for(var s=p;s<d;s++)n.push({type:b.removeElement,nodeOld:u[s],nodeNew:null,nodeParent:o})}else{for(var v=0;v<d;v++)r.push(u[v]),a.push(l[v]);for(var m=d;m<p;m++)n.push({type:b.appendElement,nodeOld:null,nodeNew:l[m],nodeParent:o})}}if(0===r.length){x(n);break}if(8<=performance.now()-h){requestAnimationFrame(function(){h=performance.now(),w(r,a,n)});break}}}}function x(e){for(var t=0;t<e.length;t++){var n=e[t];switch(n.type){case b.setAttributes:var r=n.nodeOld,a=r.node,o=n.nodeNew.data;for(var i in r.data=o)a.setAttribute(i,o[i]);break;case b.appendElement:var u=n.nodeNew,l=n.nodeParent,d=g(u);l.data.children.push({type:u.type,name:u.name,data:u.data,node:d}),l.node.appendChild(d);break;case b.removeElement:var p=n.nodeParent;p.data.children.pop(),p.node.removeChild(n.nodeOld);break;case b.replaceElement:var f=n.nodeOld,c=n.nodeNew,s=f.node;f.type=c.type,f.name=c.name,f.data=c.data,f.node=g(c),s.parentNode.replaceChild(f.node,s)}}}function d(){h=performance.now(),function e(t,n,r){for(;;){var a=t.pop(),o=n.pop(),i=r.pop();if(a.type===p.component){var u=m[a.name](a.data);null===o?y(u):a=o.data.children[i]=u}else null===o&&y(a);for(var l=a.data.children,d=0;d<l.length;d++)t.push(l[d]),n.push(a),r.push(d);if(0===t.length){w(f,c,[]);break}if(8<=performance.now()-h){requestAnimationFrame(function(){h=performance.now(),e(t,n,r)});break}}}([i(a)],[null],[0])}function e(t){var e=function(e,t){return void 0===e?t:e}(t.name,"Root");delete t.name;var n=t.view;delete t.view,"string"==typeof n&&(n=new Function("data","return "+l(n)));var r="string"==typeof t.root?document.querySelector(t.root):t.root;delete t.root,void 0===r?m[e]=function(e){return n(function(e,t){var n={};for(var r in t)n[r]=t[r];for(var a in e)n[a]=e[a];return n}(e,t))}:(function(e){f=e}({type:p.element,name:r.tagName.toLowerCase(),data:{children:[]},node:r}),function(e){i=e}(n),function(e){a=e}(t),d())}return e.lex=t,e.parse=n,e.generate=u,e.compile=l,e.components=m,e.set=function(e){!function e(t,n){for(var r in n){var a=n[r];"object"===o(a)?e(t[r],a):t[r]=a}}(a,e),d()},e});
\ No newline at end of file
+!function(e,t){"undefined"==typeof module?e.Moon=t():module.exports=t()}(this,function(){"use strict";function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var m={element:0,text:1,component:2};var a,p,f,i,N=/<([\w\d-_]+)([^>]*?)(\/?)>/g,k=/\s*([\w\d-_:@]*)(?:=(?:("[^"]*"|'[^']*')|{([^{}]*)}))?/g;function t(e){e=e.trim();for(var t=[],n=0;n<e.length;){var r=e[n];if("<"===r){var a=e[n+1];if("/"===a){var o=e.indexOf(">",n+2),i=e.slice(n+2,o);0,t.push({type:"tagClose",value:i}),n=o+1;continue}if("!"===a&&"-"===e[n+2]&&"-"===e[n+3]){var l=e.indexOf("--\x3e",n+4);0,n=l+3;continue}N.lastIndex=n;var u=N.exec(e);0;for(var d=u[0],p=u[1],f=u[2],c=u[3],s={},v=void 0;null!==(v=k.exec(f));){var h=v[0],m=v[1],y=v[2],b=v[3];0===h.length?k.lastIndex+=1:s[m]=void 0===b?y:b}t.push({type:"tagOpen",value:p,attributes:s,closed:"/"===c}),n+=d.length}else if("{"===r){var g="";for(n+=1;n<e.length;n++){var w=e[n];if("}"===w)break;g+=w}t.push({type:"tagOpen",value:"text",attributes:{"":g},closed:!0}),n+=1}else{for(var x="";n<e.length;n++){var O=e[n];if("<"===O||"{"===O)break;x+=O}t.push({type:"tagOpen",value:"text",attributes:{"":'"'+x+'"'},closed:!0})}}return t}function c(e,t,n,r){this.message=e,this.start=t,this.end=n,this.next=r}function s(e,t,n){var r=n[e],a=n[t-1],o=t-e;if(0==o)return new c("",e,t);if(1==o)return"tagOpen"===r.type&&!0===r.closed?{type:r.value,attributes:r.attributes,children:[]}:new c("",e,t);if("tagOpen"!==r.type||"tagClose"!==a.type||r.value!==a.value)return new c("",e,t);var i=function e(t,n,r){var a;if(0==n-t)return[];for(var o=t+1;o<=n;o++){var i=s(t,o,r);if(i instanceof c)a=i;else{var l=e(o,n,r);if(!(l instanceof c)){for(var u=[i],d=0;d<l.length;d++)u.push(l[d]);return u}}}return new c("",t,n,a)}(e+1,t-1,n);return i instanceof c?new c("",e,t,i):{type:r.value,attributes:r.attributes,children:i}}function n(e){var t=s(0,e.length,e);return t}function l(e){var t,n=e.type;t="text"===n?m.text:n[0]===n[0].toLowerCase()?m.element:m.component;var r="{";for(var a in e.attributes)r+='"'+a+'":'+e.attributes[a]+",";r+="children:[";for(var o="",i=0;i<e.children.length;i++)r+=o+l(e.children[i]),o=",";return"{type:"+t+',name:"'+n+'",data:'+r+"]}}"}function u(e){return l(n(t(e)))}var y,v={};function h(e){f=e}var b={updateText:0,setAttributes:1,appendElement:2,removeElement:3,replaceElement:4};function g(e){var t,n=e.type,r=e.name,a={},o=[];if(n===m.element){t=document.createElement(e.name);var i=e.data;for(var l in i){var u=i[l];"children"!==l&&(a[l]=u,t.setAttribute(l,u))}for(var d=i.children,p=0;p<d.length;p++){var f=g(d[p]);o.push(f),t.appendChild(f.node)}}else{var c=e.data[""];t=document.createTextNode(c),a[""]=c}return a.children=o,{type:n,name:r,data:a,node:t}}function w(e,t,n){for(var r=[e],a=[t];;){var o=r.pop(),i=a.pop();if(o!==i){if(o.name!==i.name)n.push({type:b.replaceElement,nodeOld:o,nodeNew:i,nodeParent:null});else if(o.type===m.text)n.push({type:b.updateText,nodeOld:o,nodeNew:i,parent:null});else{n.push({type:b.setAttributes,nodeOld:o,nodeNew:i,nodeParent:null});var l=o.data.children,u=i.data.children,d=l.length,p=u.length;if(d===p)for(var f=0;f<d;f++)r.push(l[f]),a.push(u[f]);else if(p<d){for(var c=0;c<p;c++)r.push(l[c]),a.push(u[c]);for(var s=p;s<d;s++)n.push({type:b.removeElement,nodeOld:l[s],nodeNew:null,nodeParent:o})}else{for(var v=0;v<d;v++)r.push(l[v]),a.push(u[v]);for(var h=d;h<p;h++)n.push({type:b.appendElement,nodeOld:null,nodeNew:u[h],nodeParent:o})}}if(0===r.length){x(n);break}if(8<=performance.now()-y){requestAnimationFrame(function(){y=performance.now(),w(r,a,n)});break}}}}function x(e){for(var t=0;t<e.length;t++){var n=e[t];switch(n.type){case b.updateText:var r=n.nodeOld,a=n.nodeNew.data[""];r.data[""]=a,r.node.textContent=a;break;case b.setAttributes:var o=n.nodeOld,i=o.data,l=o.node,u=n.nodeNew.data;for(var d in u){var p=u[d];"children"!==d&&(i[d]=p,l.setAttribute(d,p))}break;case b.appendElement:var f=n.nodeNew,c=n.nodeParent,s=g(f);c.data.children.push(s),c.node.appendChild(s.node);break;case b.removeElement:var v=n.nodeParent;v.data.children.pop(),v.node.removeChild(n.nodeOld);break;case b.replaceElement:var h=n.nodeOld,m=g(n.nodeNew),y=h.node;h.type=m.type,h.name=m.name,h.data=m.data,h.node=m.node,y.parentNode.replaceChild(h.node,y)}}}function d(){y=performance.now(),function e(t,n,r){for(;;){var a=t.pop(),o=n.pop(),i=r.pop();if(a.type===m.component){var l=v[a.name](a.data);null===o?h(l):a=o.data.children[i]=l}else null===o&&h(a);for(var u=a.data.children,d=0;d<u.length;d++)t.push(u[d]),n.push(a),r.push(d);if(0===t.length){w(p,f,[]);break}if(8<=performance.now()-y){requestAnimationFrame(function(){y=performance.now(),e(t,n,r)});break}}}([i(a)],[null],[0])}function e(t){var e=function(e,t){return void 0===e?t:e}(t.name,"Root");delete t.name;var n=t.view;delete t.view,"string"==typeof n&&(n=new Function("data","return "+u(n)));var r="string"==typeof t.root?document.querySelector(t.root):t.root;delete t.root,void 0===r?v[e]=function(e){return n(function(e,t){var n={};for(var r in t)n[r]=t[r];for(var a in e)n[a]=e[a];return n}(e,t))}:(function(e){p=e}({type:m.element,name:r.tagName.toLowerCase(),data:{children:[]},node:r}),function(e){i=e}(n),function(e){a=e}(t),d())}return e.lex=t,e.parse=n,e.generate=l,e.compile=u,e.components=v,e.set=function(e){!function e(t,n){for(var r in n){var a=n[r];"object"===o(a)?e(t[r],a):t[r]=a}}(a,e),d()},e});
\ No newline at end of file
diff --git a/packages/moon/src/executor/executor.js b/packages/moon/src/executor/executor.js
index 4517cc0e..bb18c066 100644
--- a/packages/moon/src/executor/executor.js
+++ b/packages/moon/src/executor/executor.js
@@ -10,38 +10,73 @@ let executeStart;
  * Types of patches
  */
 const patchTypes = {
-	setAttributes: 0,
-	appendElement: 1,
-	removeElement: 2,
-	replaceElement: 3
+	updateText: 0,
+	setAttributes: 1,
+	appendElement: 2,
+	removeElement: 3,
+	replaceElement: 4
 };
 
 /**
  * Creates a DOM element from a view node.
  *
  * @param {Object} node
- * @returns {Element} DOM element
+ * @returns {Object} node to be used as an old node
  */
 function executeCreate(node) {
-	if (node.type === types.element) {
-		const element = document.createElement(node.name);
+	const nodeType = node.type;
+	const nodeName = node.name;
+	const nodeData = {};
+	const nodeChildren = [];
+	let nodeNode;
+
+	if (nodeType === types.element) {
+		nodeNode = document.createElement(node.name);
+
+		// Set data and attributes.
 		const data = node.data;
-		const children = data.children;
 
 		for (let key in data) {
+			const value = data[key];
+
 			if (key !== "children") {
-				element.setAttribute(key, data[key]);
+				nodeData[key] = value;
+				nodeNode.setAttribute(key, value);
 			}
 		}
 
+		// Recursively append children.
+		const children = data.children;
+
 		for (let i = 0; i < children.length; i++) {
-			element.appendChild(executeCreateElement(children[i]));
-		}
+			const child = executeCreate(children[i]);
 
-		return element;
+			nodeChildren.push(child);
+			nodeNode.appendChild(child.node);
+		}
 	} else {
-		return document.createTextNode(node.data[""]);
+		// Get text content using the default data key.
+		const textContent = node.data[""];
+
+		// Create a text node using the text content.
+		nodeNode = document.createTextNode(textContent);
+
+		// Set only the default data key.
+		nodeData[""] = textContent;
 	}
+
+	// Set the children of the new old node.
+	nodeData.children = nodeChildren;
+
+	// Return a new node with copied properties of the original node. This is to
+	// prevent bugs from hoisting. When the new nodes are compared to the old
+	// ones, the old ones are modified, and the new ones are immutable.
+	return {
+		type: nodeType,
+		name: nodeName,
+		data: nodeData,
+		node: nodeNode
+	};
 }
 
 /**
@@ -58,17 +93,21 @@ function executeView(nodes, parents, indexes) {
 		const index = indexes.pop();
 
 		if (node.type === types.component) {
+			// Execute the component to get the component view.
 			const nodeComponent = components[node.name](node.data);
 
+			// Set the root view or current node to the new component view.
 			if (parent === null) {
 				setViewNew(nodeComponent);
 			} else {
 				node = parent.data.children[index] = nodeComponent;
 			}
 		} else if (parent === null) {
+			// If there is no parent, set the root new view to the current node.
 			setViewNew(node);
 		}
 
+		// Execute the views of the children.
 		const children = node.data.children;
 
 		for (let i = 0; i < children.length; i++) {
@@ -78,10 +117,13 @@ function executeView(nodes, parents, indexes) {
 		}
 
 		if (nodes.length === 0) {
+			// Move to the diff phase if there is nothing left to do.
 			executeDiff(viewOld, viewNew, []);
 
 			break;
 		} else if (performance.now() - executeStart >= 8) {
+			// If the current frame doesn't have sufficient time left to keep
+			// running then continue executing the view in the next frame.
 			requestAnimationFrame(() => {
 				executeStart = performance.now();
 				executeView(nodes, parents, indexes);
@@ -109,15 +151,28 @@ function executeDiff(nodeOld, nodeNew, patches) {
 		const nodeNew = nodesNew.pop();
 
 		if (nodeOld === nodeNew) {
+			// If they have the same reference (hoisted) then skip diffing.
 			continue;
 		} else if (nodeOld.name !== nodeNew.name) {
+			// If they have different names, then replace the old node with the
+			// new one.
 			patches.push({
 				type: patchTypes.replaceElement,
 				nodeOld: nodeOld,
 				nodeNew: nodeNew,
 				nodeParent: null
 			});
+		} else if (nodeOld.type === types.text) {
+			// If they both are text, then update the text content.
+			patches.push({
+				type: patchTypes.updateText,
+				nodeOld: nodeOld,
+				nodeNew: nodeNew,
+				parent: null
+			});
 		} else {
+			// If they both are normal elements, then set attributes and diff the
+			// children for appends, deletes, or recursive updates.
 			patches.push({
 				type: patchTypes.setAttributes,
 				nodeOld: nodeOld,
@@ -173,10 +228,13 @@ function executeDiff(nodeOld, nodeNew, patches) {
 		}
 
 		if (nodesOld.length === 0) {
+			// Move to the patch phase if there is nothing left to do.
 			executePatch(patches);
 
 			break;
 		} else if (performance.now() - executeStart >= 8) {
+			// If the current frame doesn't have sufficient time left to keep
+			// running then continue diffing in the next frame.
 			requestAnimationFrame(() => {
 				executeStart = performance.now();
 				executeDiff(nodesOld, nodesNew, patches);
@@ -197,40 +255,60 @@ function executePatch(patches) {
 		const patch = patches[i];
 
 		switch (patch.type) {
+			case patchTypes.updateText: {
+				// Update text of a node with new text.
+				const nodeOld = patch.nodeOld;
+				const nodeNewText = patch.nodeNew.data[""];
+
+				nodeOld.data[""] = nodeNewText;
+				nodeOld.node.textContent = nodeNewText;
+
+				break;
+			}
+
 			case patchTypes.setAttributes: {
+				// Set attributes of a node with new data.
 				const nodeOld = patch.nodeOld;
+				const nodeOldData = nodeOld.data;
 				const nodeOldNode = nodeOld.node;
 				const nodeNewData = patch.nodeNew.data;
 
-				nodeOld.data = nodeNewData;
-
+				// Mutate the old node with the new node's data and set attributes
+				// on the DOM node.
 				for (let key in nodeNewData) {
-					nodeOldNode.setAttribute(key, nodeNewData[key]);
+					const value = nodeNewData[key];
+
+					if (key !== "children") {
+						nodeOldData[key] = value;
+						nodeOldNode.setAttribute(key, value);
+					}
 				}
 
 				break;
 			}
 
 			case patchTypes.appendElement: {
+				// Append a node. Creates a new old node because the old node must
+				// be mutable while the new nodes are mutable.
 				const nodeNew = patch.nodeNew;
 				const nodeParent = patch.nodeParent;
-				const nodeNewNode = executeCreateElement(nodeNew);
-
-				nodeParent.data.children.push({
-					type: nodeNew.type,
-					name: nodeNew.name,
-					data: nodeNew.data,
-					node: nodeNewNode
-				});
+				const nodeOldNew = executeCreate(nodeNew);
 
-				nodeParent.node.appendChild(nodeNewNode);
+				nodeParent.data.children.push(nodeOldNew);
+				nodeParent.node.appendChild(nodeOldNew.node);
 
 				break;
 			}
 
 			case patchTypes.removeElement: {
+				// Remove a node from the parent.
 				const nodeParent = patch.nodeParent;
 
+				// Pops the last child because the patches still hold a reference
+				// to them. The diff phase can only create this patch when there
+				// are extra old children, and popping nodes off of the end is more
+				// efficient than removing at a specific index, especially because
+				// they are equivalent in this case.
 				nodeParent.data.children.pop();
 				nodeParent.node.removeChild(patch.nodeOld);
 
@@ -238,15 +316,21 @@ function executePatch(patches) {
 			}
 
 			case patchTypes.replaceElement: {
+				// Replaces an old node with a new node.
 				const nodeOld = patch.nodeOld;
 				const nodeNew = patch.nodeNew;
+				const nodeOldNew = executeCreate(nodeNew);
 				const nodeOldNode = nodeOld.node;
 
-				nodeOld.type = nodeNew.type;
-				nodeOld.name = nodeNew.name;
-				nodeOld.data = nodeNew.data;
-				nodeOld.node = executeCreateElement(nodeNew);
+				// Mutate the old node with the copied data from creating the new
+				// old node, replacing the old DOM node reference.
+				nodeOld.type = nodeOldNew.type;
+				nodeOld.name = nodeOldNew.name;
+				nodeOld.data = nodeOldNew.data;
+				nodeOld.node = nodeOldNew.node;
 
+				// Replace the old node using the reference created before updating
+				// the old node.
 				nodeOldNode.parentNode.replaceChild(nodeOld.node, nodeOldNode);
 
 				break;