From 287aa85b33059ea539cf2712c667d6d8fc41a51f Mon Sep 17 00:00:00 2001
From: Kabir Shah <iamkbrsh@gmail.com>
Date: Sun, 28 Apr 2019 11:56:02 -0700
Subject: [PATCH] hoist static nodes

---
 packages/moon/dist/moon.js                    | 211 ++++++++++++++----
 packages/moon/dist/moon.min.js                |   2 +-
 .../src/compiler/generator/components/for.js  |  33 ++-
 .../src/compiler/generator/components/if.js   |  67 ++++--
 .../moon/src/compiler/generator/generator.js  | 105 +++++++--
 .../src/compiler/generator/util/globals.js    |  14 ++
 packages/moon/src/index.js                    |  15 +-
 packages/moon/src/util/globals.js             |   5 +
 packages/moon/src/util/util.js                |  10 +-
 9 files changed, 364 insertions(+), 98 deletions(-)

diff --git a/packages/moon/dist/moon.js b/packages/moon/dist/moon.js
index 98a22014..174a9044 100644
--- a/packages/moon/dist/moon.js
+++ b/packages/moon/dist/moon.js
@@ -52,12 +52,14 @@
 	function defaultObject(obj, fallback) {
 		var full = {};
 
-		for (var key in fallback) {
-			full[key] = fallback[key];
+		for (var key in obj) {
+			full[key] = obj[key];
 		}
 
-		for (var _key in obj) {
-			full[_key] = obj[_key];
+		for (var _key in fallback) {
+			if (!(_key in obj)) {
+				full[_key] = fallback[_key];
+			}
 		}
 
 		return full;
@@ -541,6 +543,11 @@
 	 * Global variable number
 	 */
 	var generateVariable;
+	/**
+	 * Global static variable number
+	 */
+
+	var generateStatic = 0;
 	/**
 	 * Set variable number to a new number.
 	 *
@@ -550,24 +557,59 @@
 	function setGenerateVariable(newGenerateVariable) {
 		generateVariable = newGenerateVariable;
 	}
+	/**
+	 * Set static variable number to a new number.
+	 *
+	 * @param {number} newGenerateStatic
+	 */
+
+	function setGenerateStatic(newGenerateStatic) {
+		generateStatic = newGenerateStatic;
+	}
 
 	/**
-	 * Generates view function code and prelude code for an `if` element.
+	 * Generates code for an `if`/`else-if`/`else` clause body.
+	 *
+	 * @param {number} variable
+	 * @param {Object} element
+	 * @param {Array} staticNodes
+	 * @returns {string} clause body
+	 */
+
+	function generateClause(variable, element, staticNodes) {
+		var generateBody = generateNode(element.children[0], element, 0, staticNodes);
+		var clause;
+
+		if (generateBody.isStatic) {
+			// If the clause is static, then use a static node in place of it.
+			clause = variable + "=m[" + generateStatic + "];";
+			staticNodes.push(generateBody);
+			setGenerateStatic(generateStatic + 1);
+		} else {
+			// If the clause is dynamic, then use the dynamic node.
+			clause = "" + generateBody.prelude + variable + "=" + generateBody.node + ";";
+		}
+
+		return clause;
+	}
+	/**
+	 * Generates code for a node from an `if` element.
 	 *
 	 * @param {Object} element
 	 * @param {Object} parent
 	 * @param {number} index
-	 * @returns {Object} View function code and prelude code
+	 * @param {Array} staticNodes
+	 * @returns {Object} Prelude code, view function code, and static status
 	 */
 
-	function generateNodeIf(element, parent, index) {
+
+	function generateNodeIf(element, parent, index, staticNodes) {
 		var variable = "m" + generateVariable;
 		var prelude = "";
 		var emptyElseClause = true;
 		setGenerateVariable(generateVariable + 1); // Generate the initial `if` clause.
 
-		var generateIf = generateNode(element.children[0], element, 0);
-		prelude += "var " + variable + ";if(" + element.attributes[""] + "){" + generateIf.prelude + variable + "=" + generateIf.node + ";}"; // Search for `else-if` and `else` clauses if there are siblings.
+		prelude += "var " + variable + ";if(" + element.attributes[""] + "){" + generateClause(variable, element, staticNodes) + "}"; // Search for `else-if` and `else` clauses if there are siblings.
 
 		if (parent !== null) {
 			var siblings = parent.children;
@@ -577,15 +619,13 @@
 
 				if (sibling.type === "else-if") {
 					// Generate the `else-if` clause.
-					var generateElseIf = generateNode(sibling.children[0], sibling, 0);
-					prelude += "else if(" + sibling.attributes[""] + "){" + generateElseIf.prelude + variable + "=" + generateElseIf.node + ";}"; // Remove the `else-if` clause so that it isn't generated
+					prelude += "else if(" + sibling.attributes[""] + "){" + generateClause(variable, sibling, staticNodes) + "}"; // Remove the `else-if` clause so that it isn't generated
 					// individually by the parent.
 
 					siblings.splice(i, 1);
 				} else if (sibling.type === "else") {
 					// Generate the `else` clause.
-					var generateElse = generateNode(sibling.children[0], sibling, 0);
-					prelude += "else{" + generateElse.prelude + variable + "=" + generateElse.node + ";}"; // Skip generating the empty `else` clause.
+					prelude += "else{" + generateClause(variable, sibling, staticNodes) + "}"; // Skip generating the empty `else` clause.
 
 					emptyElseClause = false; // Remove the `else` clause so that it isn't generated
 					// individually by the parent.
@@ -599,23 +639,31 @@
 
 
 		if (emptyElseClause) {
-			prelude += "else{" + variable + "={type:" + types.text + ",name:\"text\",data:{\"\":\"\",children:[]}};}";
+			prelude += "else{" + variable + "=m[" + generateStatic + "];}";
+			staticNodes.push({
+				prelude: "",
+				node: "{type:" + types.text + ",name:\"text\",data:{\"\":\"\",children:[]}}",
+				isStatic: true
+			});
+			setGenerateStatic(generateStatic + 1);
 		}
 
 		return {
 			prelude: prelude,
-			node: variable
+			node: variable,
+			isStatic: false
 		};
 	}
 
 	/**
-	 * Generates view function code and prelude code for a `for` element.
+	 * Generates code for a node from a `for` element.
 	 *
 	 * @param {Object} element
-	 * @returns {Object} View function code and prelude code
+	 * @param {Array} staticNodes
+	 * @returns {Object} Prelude code, view function code, and static status
 	 */
 
-	function generateNodeFor(element) {
+	function generateNodeFor(element, staticNodes) {
 		var variable = "m" + generateVariable;
 		var dataLocals = element.attributes[""].split(",");
 		var dataArray = element.attributes["of"];
@@ -624,8 +672,18 @@
 		var dataValue;
 		var prelude;
 		setGenerateVariable(generateVariable + 1);
-		var generateChild = generateNode(element.children[0], element, 0);
-		var body = "" + generateChild.prelude + variable + ".push(" + generateChild.node + ");";
+		var generateChild = generateNode(element.children[0], element, 0, staticNodes);
+		var body;
+
+		if (generateChild.isStatic) {
+			// If the body is static, then use a static node in place of it.
+			body = variable + ".push(m[" + generateStatic + "]);";
+			staticNodes.push(generateChild);
+			setGenerateStatic(generateStatic + 1);
+		} else {
+			// If the body is dynamic, then use the dynamic node in the loop body.
+			body = "" + generateChild.prelude + variable + ".push(" + generateChild.node + ");";
+		}
 
 		if (dataArray === undefined) {
 			// Generate a `for` loop over an object. The first local is the key and
@@ -651,27 +709,30 @@
 
 		return {
 			prelude: "var " + variable + "=[];" + prelude,
-			node: "{type:" + types.element + ",name:\"span\",data:{children:" + variable + "}}"
+			node: "{type:" + types.element + ",name:\"span\",data:{children:" + variable + "}}",
+			isStatic: false
 		};
 	}
 
 	/**
-	 * Generates view function code for a Moon node from an element.
+	 * Generates code for a node from an element.
 	 *
 	 * @param {Object} element
 	 * @param {Object} parent
 	 * @param {number} index
-	 * @returns {Object} View function code and prelude code
+	 * @param {Array} staticNodes
+	 * @returns {Object} Prelude code, view function code, and static status
 	 */
 
-	function generateNode(element, parent, index) {
+	function generateNode(element, parent, index, staticNodes) {
 		var name = element.type;
-		var type; // Generate the correct type number for the given name.
+		var type;
+		var isStatic = true; // Generate the correct type number for the given name.
 
 		if (name === "if") {
-			return generateNodeIf(element, parent, index);
+			return generateNodeIf(element, parent, index, staticNodes);
 		} else if (name === "for") {
-			return generateNodeFor(element);
+			return generateNodeFor(element, staticNodes);
 		} else if (name === "text") {
 			type = types.text;
 		} else if (name[0] === name[0].toLowerCase()) {
@@ -686,20 +747,51 @@
 		var separator = "";
 
 		for (var attribute in attributes) {
-			data += separator + "\"" + attribute + "\":" + attributes[attribute];
+			var attributeValue = attributes[attribute]; // Mark the current node as dynamic if any attributes are dynamic. Events
+			// are always treated as static.
+
+			if (attribute[0] !== "@" && attributeValue[0] !== "\"" && attributeValue[0] !== "'") {
+				isStatic = false;
+			}
+
+			data += separator + "\"" + attribute + "\":" + attributeValue;
 			separator = ",";
 		}
 
 		if (attributes.children === undefined) {
 			// Generate children if they are not in the element data.
 			var children = element.children;
+			var generateChildren = [];
 			data += separator + "children:[";
 			separator = "";
 
 			for (var i = 0; i < children.length; i++) {
-				var generateChild = generateNode(children[i], element, i);
-				prelude += generateChild.prelude;
-				data += separator + generateChild.node;
+				var generateChild = generateNode(children[i], element, i, staticNodes); // Mark the current node as dynamic if any child is dynamic.
+
+				if (!generateChild.isStatic) {
+					isStatic = false;
+				}
+
+				generateChildren.push(generateChild);
+			}
+
+			for (var _i = 0; _i < generateChildren.length; _i++) {
+				var _generateChild = generateChildren[_i];
+
+				if (isStatic || !_generateChild.isStatic) {
+					// If the whole current node is static or the current node and
+					// child node are dynamic, then append the child as a part of the
+					// node as usual.
+					prelude += _generateChild.prelude;
+					data += separator + _generateChild.node;
+				} else {
+					// If the whole current node is dynamic and the child node is
+					// static, then use a static node in place of the static child.
+					data += separator + ("m[" + generateStatic + "]");
+					staticNodes.push(_generateChild);
+					setGenerateStatic(generateStatic + 1);
+				}
+
 				separator = ",";
 			}
 
@@ -708,7 +800,8 @@
 
 		return {
 			prelude: prelude,
-			node: "{type:" + type + ",name:\"" + name + "\",data:" + data + "}}"
+			node: "{type:" + type + ",name:\"" + name + "\",data:" + data + "}}",
+			isStatic: isStatic
 		};
 	}
 	/**
@@ -725,15 +818,36 @@
 	 */
 
 	function generate(element) {
-		// Reset generator variable.
-		setGenerateVariable(0); // Generate the root node and get the prelude and node code.
+		// Store static nodes.
+		var staticNodes = []; // Reset generator variable.
+
+		setGenerateVariable(0); // Hold a reference to the next static node.
+
+		var staticRoot = generateStatic; // Generate the root node and get the prelude and node code.
 
-		var _generateNode = generateNode(element, null, 0),
+		var _generateNode = generateNode(element, null, 0, staticNodes),
 				prelude = _generateNode.prelude,
-				node = _generateNode.node; // Convert the code into a usable function body.
+				node = _generateNode.node,
+				isStatic = _generateNode.isStatic;
+
+		if (isStatic) {
+			// Account for a static root node.
+			setGenerateStatic(generateStatic + 1);
+			return "if(m[" + staticRoot + "]===undefined){" + prelude + "m[" + staticRoot + "]=" + node + ";}return m[" + staticRoot + "];";
+		} else if (staticNodes.length === 0) {
+			return prelude + "return " + node + ";";
+		} else {
+			// Generate static nodes only once at the start.
+			var staticCode = "if(m[" + staticRoot + "]===undefined){";
 
+			for (var i = 0; i < staticNodes.length; i++) {
+				var staticNode = staticNodes[i];
+				staticCode += staticNode.prelude + "m[" + (staticRoot + i) + "]=" + staticNode.node + ";";
+			}
 
-		return prelude + "return " + node + ";";
+			staticCode += "}";
+			return "" + staticCode + prelude + "return " + node + ";";
+		}
 	}
 
 	function compile(input) {
@@ -754,6 +868,11 @@
 	 */
 
 	var components = {};
+	/**
+	 * Global static component views
+	 */
+
+	var m = [];
 	/**
 	 * Set old view to a new object.
 	 *
@@ -1233,19 +1352,25 @@
 		}
 
 		if (typeof view === "string") {
-			view = new Function("data", compile(view));
+			view = new Function("m", "data", compile(view));
 		} // If a `root` option is given, start the root renderer, or else just return
 		// the component.
 
 
 		var root = typeof options.root === "string" ? document.querySelector(options.root) : options.root;
-		delete options.root;
+		delete options.root; // Create a wrapper view function that maps data to the compiled view
+		// function. The compiled view function takes `m`, which holds static nodes.
+		// The data is also processed so that `options` acts as a default.
+
+		var viewComponent = function viewComponent(data) {
+			return view(m, defaultObject(data, options));
+		};
 
 		if (root === undefined) {
-			components[name] = function (data) {
-				return view(defaultObject(data, options));
-			};
+			// Store it as a component if no `root` is given.
+			components[name] = viewComponent;
 		} else {
+			// Mount to the `root` element and begin execution if it is given.
 			setViewOld({
 				type: types.element,
 				name: root.tagName.toLowerCase(),
@@ -1254,7 +1379,7 @@
 				},
 				node: root
 			});
-			setViewCurrent(view);
+			setViewCurrent(viewComponent);
 			execute(options);
 		}
 	}
diff --git a/packages/moon/dist/moon.min.js b/packages/moon/dist/moon.min.js
index 38c213d6..7fb63adb 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,n){"undefined"==typeof module?e.Moon=n():module.exports=n()}(this,function(){"use strict";var c={element:0,text:1,component:2};var v,A=/^\s+$/,N=/<([\w\d-_]+)([^>]*?)(\/?)>/g,k=/\s*([\w\d-_:@]*)(?:=(?:("[^"]*"|'[^']*')|{([^{}]*)}))?/g,n=/"[^"]*"|'[^']*'|\d+[a-zA-Z$_]\w*|\.[a-zA-Z$_]\w*|[a-zA-Z$_]\w*:|([a-zA-Z$_]\w*)/g,t=["NaN","false","in","null","this","true","typeof","undefined","window"];function E(e){return e.replace(n,function(e,n){return void 0===n||"$"===n[0]||-1!==t.indexOf(n)?e:"data."+n})}function r(e){e=e.trim();for(var n=[],t=0;t<e.length;){var r=e[t];if("<"===r){var a=e[t+1];if("/"===a){var o=e.indexOf(">",t+2),i=e.slice(t+2,o);0,n.push({type:"tagClose",value:i}),t=o+1;continue}if("!"===a&&"-"===e[t+2]&&"-"===e[t+3]){var d=e.indexOf("--\x3e",t+4);0,t=d+3;continue}N.lastIndex=t;var l=N.exec(e);0;for(var u=l[0],p=l[1],f=l[2],s=l[3],v={},c=void 0;null!==(c=k.exec(f));){var h=c[0],m=c[1],g=c[2],w=c[3];0===h.length?k.lastIndex+=1:(v[m]=void 0===w?void 0===g?'""':g:E(w),"@"===m[0]&&(v[m]="function($event){"+v[m]+"}"))}n.push({type:"tagOpen",value:p,attributes:v,closed:"/"===s}),t+=u.length}else if("{"===r){var y="";for(t+=1;t<e.length;t++){var b=e[t];if("}"===b)break;y+=b}n.push({type:"tagOpen",value:"text",attributes:{"":E(y)},closed:!0}),t+=1}else{for(var x="";t<e.length;t++){var O=e[t];if("<"===O||"{"===O)break;x+=O}A.test(x)||n.push({type:"tagOpen",value:"text",attributes:{"":'"'+x+'"'},closed:!0})}}return n}function p(e,n,t,r){this.message=e,this.start=n,this.end=t,this.next=r}function f(e,n,t){var r=t[e],a=t[n-1],o=n-e;if(0==o)return new p("",e,n);if(1==o)return"tagOpen"===r.type&&!0===r.closed?{type:r.value,attributes:r.attributes,children:[]}:new p("",e,n);if("tagOpen"!==r.type||"tagClose"!==a.type||r.value!==a.value)return new p("",e,n);var i=function e(n,t,r){var a;if(0==t-n)return[];for(var o=n+1;o<=t;o++){var i=f(n,o,r);if(i instanceof p)a=i;else{var d=e(o,t,r);if(!(d instanceof p)){for(var l=[i],u=0;u<d.length;u++)l.push(d[u]);return l}}}return new p("",n,t,a)}(e+1,n-1,t);return i instanceof p?new p("",e,n,i):{type:r.value,attributes:r.attributes,children:i}}function a(e){var n=f(0,e.length,e);return n}function h(e){v=e}function m(e,n,t){var r,a=e.type;if("if"===a)return function(e,n,t){var r="m"+v,a="",o=!0;h(v+1);var i=m(e.children[0],e,0);if(a+="var "+r+";if("+e.attributes[""]+"){"+i.prelude+r+"="+i.node+";}",null!==n)for(var d=n.children,l=t+1;l<d.length;){var u=d[l];if("else-if"===u.type){var p=m(u.children[0],u,0);a+="else if("+u.attributes[""]+"){"+p.prelude+r+"="+p.node+";}",d.splice(l,1)}else{if("else"!==u.type)break;var f=m(u.children[0],u,0);a+="else{"+f.prelude+r+"="+f.node+";}",o=!1,d.splice(l,1)}}return o&&(a+="else{"+r+"={type:"+c.text+',name:"text",data:{"":"",children:[]}};}'),{prelude:a,node:r}}(e,n,t);if("for"===a)return function(e){var n,t,r="m"+v,a=e.attributes[""].split(","),o=e.attributes.of,i=e.attributes.in;h(v+1);var d=m(e.children[0],e,0),l=d.prelude+r+".push("+d.node+");";return t=void 0===o?"for(var "+(n=a[0])+" in "+i+"){"+(2===a.length?"var "+a[1]+"="+i+"["+n+"];":"")+l+"}":"for(var "+(n=2===a.length?a[1]:"i")+"=0;"+n+"<"+o+".length;"+n+"++){var "+a[0]+"="+o+"["+n+"];"+l+"}",{prelude:"var "+r+"=[];"+t,node:"{type:"+c.element+',name:"span",data:{children:'+r+"}}"}}(e);r="text"===a?c.text:a[0]===a[0].toLowerCase()?c.element:c.component;var o=e.attributes,i="",d="{",l="";for(var u in o)d+=l+'"'+u+'":'+o[u],l=",";if(void 0===o.children){var p=e.children;d+=l+"children:[",l="";for(var f=0;f<p.length;f++){var s=m(p[f],e,f);i+=s.prelude,d+=l+s.node,l=","}d+="]"}return{prelude:i,node:"{type:"+r+',name:"'+a+'",data:'+d+"}}"}}function o(e){h(0);var n=m(e,null,0);return n.prelude+"return "+n.node+";"}function i(e){return o(a(r(e)))}var u,s,d,w,l={},g={};function y(e){s=e}var b=[],x={updateText:0,setAttributes:1,appendElement:2,removeElement:3,replaceElement:4};function O(e){var n,t=e.type,r=e.name,a={},o=[];if(t===c.text){var i=e.data[""];n=document.createTextNode(i),a[""]=i}else{var d=e.data;for(var l in n=document.createElement(e.name),d){var u=d[l];"@"===l[0]?(a[l]=u,n.addEventListener(l.slice(1),u)):"children"!==l&&!1!==u&&(a[l]=u,n.setAttribute(l,u))}for(var p=d.children,f=0;f<p.length;f++){var s=O(p[f]);o.push(s),n.appendChild(s.node)}}return a.children=o,{type:t,name:r,data:a,node:n}}function C(e,n,t){for(;;){var r=e.pop(),a=n.pop();if(r!==a){if(r.name!==a.name)t.push({type:x.replaceElement,nodeOld:r,nodeNew:a,nodeParent:null});else if(r.type===c.text)t.push({type:x.updateText,nodeOld:r,nodeNew:a,parent:null});else{t.push({type:x.setAttributes,nodeOld:r,nodeNew:a,nodeParent:null});var o=r.data.children,i=a.data.children,d=o.length,l=i.length;if(d===l)for(var u=0;u<d;u++)e.push(o[u]),n.push(i[u]);else if(l<d){for(var p=0;p<l;p++)e.push(o[p]),n.push(i[p]);for(var f=l;f<d;f++)t.push({type:x.removeElement,nodeOld:o[f],nodeNew:null,nodeParent:r})}else{for(var s=0;s<d;s++)e.push(o[s]),n.push(i[s]);for(var v=d;v<l;v++)t.push({type:x.appendElement,nodeOld:null,nodeNew:i[v],nodeParent:r})}}if(0===e.length){$(t);break}if(16<=performance.now()-w){requestAnimationFrame(function(){w=performance.now(),C(e,n,t)});break}}}}function $(e){for(var n=0;n<e.length;n++){var t=e[n];switch(t.type){case x.updateText:var r=t.nodeOld,a=t.nodeNew.data[""];r.data[""]=a,r.node.textContent=a;break;case x.setAttributes:var o=t.nodeOld,i=o.data,d=o.node,l=t.nodeNew.data;for(var u in l){var p=l[u];"@"!==u[0]&&"children"!==u&&(!1===(i[u]=p)?d.removeAttribute(u):d.setAttribute(u,p))}break;case x.appendElement:var f=t.nodeNew,s=t.nodeParent,v=O(f);s.data.children.push(v),s.node.appendChild(v.node);break;case x.removeElement:var c=t.nodeParent;c.data.children.pop(),c.node.removeChild(t.nodeOld.node);break;case x.replaceElement:var h=t.nodeOld,m=O(t.nodeNew),g=h.node;h.type=m.type,h.name=m.name,h.data=m.data,h.node=m.node,g.parentNode.replaceChild(h.node,g)}}b.shift(),0!==b.length&&(16<=performance.now()-w?requestAnimationFrame(function(){w=performance.now(),P()}):P())}function P(){var e=b[0];for(var n in e)l[n]=e[n];!function e(n,t,r){for(;;){var a=n.pop(),o=t.pop(),i=r.pop();a.type===c.component?(a=g[a.name](a.data),null===o?y(a):o.data.children[i]=a):null===o&&y(a);for(var d=a.data.children,l=0;l<d.length;l++)n.push(d[l]),t.push(a),r.push(l);if(0===n.length){C([u],[s],[]);break}if(16<=performance.now()-w){requestAnimationFrame(function(){w=performance.now(),e(n,t,r)});break}}}([d(l)],[null],[0])}function _(e){b.push(e),1===b.length&&requestAnimationFrame(function(){w=performance.now(),P()})}function e(n){var e=function(e,n){return void 0===e?n:e}(n.name,"Root");delete n.name;var t=n.view;delete n.view,"string"==typeof t&&(t=new Function("data",i(t)));var r="string"==typeof n.root?document.querySelector(n.root):n.root;delete n.root,void 0===r?g[e]=function(e){return t(function(e,n){var t={};for(var r in n)t[r]=n[r];for(var a in e)t[a]=e[a];return t}(e,n))}:(function(e){u=e}({type:c.element,name:r.tagName.toLowerCase(),data:{children:[]},node:r}),function(e){d=e}(t),_(n))}return e.lex=r,e.parse=a,e.generate=o,e.compile=i,e.components=g,e.set=_,e});
\ No newline at end of file
+!function(e,t){"undefined"==typeof module?e.Moon=t():module.exports=t()}(this,function(){"use strict";var y={element:0,text:1,component:2};var b,A=/^\s+$/,N=/<([\w\d-_]+)([^>]*?)(\/?)>/g,k=/\s*([\w\d-_:@]*)(?:=(?:("[^"]*"|'[^']*')|{([^{}]*)}))?/g,t=/"[^"]*"|'[^']*'|\d+[a-zA-Z$_]\w*|\.[a-zA-Z$_]\w*|[a-zA-Z$_]\w*:|([a-zA-Z$_]\w*)/g,n=["NaN","false","in","null","this","true","typeof","undefined","window"];function E(e){return e.replace(t,function(e,t){return void 0===t||"$"===t[0]||-1!==n.indexOf(t)?e:"data."+t})}function r(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}N.lastIndex=n;var d=N.exec(e);0;for(var l=d[0],p=d[1],s=d[2],f=d[3],c={},v=void 0;null!==(v=k.exec(s));){var h=v[0],m=v[1],g=v[2],w=v[3];0===h.length?k.lastIndex+=1:(c[m]=void 0===w?void 0===g?'""':g:E(w),"@"===m[0]&&(c[m]="function($event){"+c[m]+"}"))}t.push({type:"tagOpen",value:p,attributes:c,closed:"/"===f}),n+=l.length}else if("{"===r){var y="";for(n+=1;n<e.length;n++){var b=e[n];if("}"===b)break;y+=b}t.push({type:"tagOpen",value:"text",attributes:{"":E(y)},closed:!0}),n+=1}else{for(var x="";n<e.length;n++){var O=e[n];if("<"===O||"{"===O)break;x+=O}A.test(x)||t.push({type:"tagOpen",value:"text",attributes:{"":'"'+x+'"'},closed:!0})}}return t}function p(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 p("",e,t);if(1==o)return"tagOpen"===r.type&&!0===r.closed?{type:r.value,attributes:r.attributes,children:[]}:new p("",e,t);if("tagOpen"!==r.type||"tagClose"!==a.type||r.value!==a.value)return new p("",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 p)a=i;else{var u=e(o,n,r);if(!(u instanceof p)){for(var d=[i],l=0;l<u.length;l++)d.push(u[l]);return d}}}return new p("",t,n,a)}(e+1,t-1,n);return i instanceof p?new p("",e,t,i):{type:r.value,attributes:r.attributes,children:i}}function a(e){var t=s(0,e.length,e);return t}var x=0;function O(e){b=e}function S(e){x=e}function C(e,t,n){var r,a=$(t.children[0],t,0,n);return a.isStatic?(r=e+"=m["+x+"];",n.push(a),S(x+1)):r=""+a.prelude+e+"="+a.node+";",r}function $(e,t,n,r){var a,o=e.type,i=!0;if("if"===o)return function(e,t,n,r){var a="m"+b,o="",i=!0;if(O(b+1),o+="var "+a+";if("+e.attributes[""]+"){"+C(a,e,r)+"}",null!==t)for(var u=t.children,d=n+1;d<u.length;){var l=u[d];if("else-if"===l.type)o+="else if("+l.attributes[""]+"){"+C(a,l,r)+"}",u.splice(d,1);else{if("else"!==l.type)break;o+="else{"+C(a,l,r)+"}",i=!1,u.splice(d,1)}}return i&&(o+="else{"+a+"=m["+x+"];}",r.push({prelude:"",node:"{type:"+y.text+',name:"text",data:{"":"",children:[]}}',isStatic:!0}),S(x+1)),{prelude:o,node:a,isStatic:!1}}(e,t,n,r);if("for"===o)return function(e,t){var n,r,a="m"+b,o=e.attributes[""].split(","),i=e.attributes.of,u=e.attributes.in;O(b+1);var d,l=$(e.children[0],e,0,t);return l.isStatic?(d=a+".push(m["+x+"]);",t.push(l),S(x+1)):d=l.prelude+a+".push("+l.node+");",r=void 0===i?"for(var "+(n=o[0])+" in "+u+"){"+(2===o.length?"var "+o[1]+"="+u+"["+n+"];":"")+d+"}":"for(var "+(n=2===o.length?o[1]:"i")+"=0;"+n+"<"+i+".length;"+n+"++){var "+o[0]+"="+i+"["+n+"];"+d+"}",{prelude:"var "+a+"=[];"+r,node:"{type:"+y.element+',name:"span",data:{children:'+a+"}}",isStatic:!1}}(e,r);a="text"===o?y.text:o[0]===o[0].toLowerCase()?y.element:y.component;var u=e.attributes,d="",l="{",p="";for(var s in u){var f=u[s];"@"!==s[0]&&'"'!==f[0]&&"'"!==f[0]&&(i=!1),l+=p+'"'+s+'":'+f,p=","}if(void 0===u.children){var c=e.children,v=[];l+=p+"children:[",p="";for(var h=0;h<c.length;h++){var m=$(c[h],e,h,r);m.isStatic||(i=!1),v.push(m)}for(var g=0;g<v.length;g++){var w=v[g];i||!w.isStatic?(d+=w.prelude,l+=p+w.node):(l+=p+"m["+x+"]",r.push(w),S(x+1)),p=","}l+="]"}return{prelude:d,node:"{type:"+a+',name:"'+o+'",data:'+l+"}}",isStatic:i}}function o(e){var t=[];O(0);var n=x,r=$(e,null,0,t),a=r.prelude,o=r.node;if(r.isStatic)return S(x+1),"if(m["+n+"]===undefined){"+a+"m["+n+"]="+o+";}return m["+n+"];";if(0===t.length)return a+"return "+o+";";for(var i="if(m["+n+"]===undefined){",u=0;u<t.length;u++){var d=t[u];i+=d.prelude+"m["+(n+u)+"]="+d.node+";"}return""+(i+="}")+a+"return "+o+";"}function i(e){return o(a(r(e)))}var l,f,u,w,d={},c={},v=[];function h(e){f=e}var P=[],_={updateText:0,setAttributes:1,appendElement:2,removeElement:3,replaceElement:4};function q(e){var t,n=e.type,r=e.name,a={},o=[];if(n===y.text){var i=e.data[""];t=document.createTextNode(i),a[""]=i}else{var u=e.data;for(var d in t=document.createElement(e.name),u){var l=u[d];"@"===d[0]?(a[d]=l,t.addEventListener(d.slice(1),l)):"children"!==d&&!1!==l&&(a[d]=l,t.setAttribute(d,l))}for(var p=u.children,s=0;s<p.length;s++){var f=q(p[s]);o.push(f),t.appendChild(f.node)}}return a.children=o,{type:n,name:r,data:a,node:t}}function m(e,t,n){for(;;){var r=e.pop(),a=t.pop();if(r!==a){if(r.name!==a.name)n.push({type:_.replaceElement,nodeOld:r,nodeNew:a,nodeParent:null});else if(r.type===y.text)n.push({type:_.updateText,nodeOld:r,nodeNew:a,parent:null});else{n.push({type:_.setAttributes,nodeOld:r,nodeNew:a,nodeParent:null});var o=r.data.children,i=a.data.children,u=o.length,d=i.length;if(u===d)for(var l=0;l<u;l++)e.push(o[l]),t.push(i[l]);else if(d<u){for(var p=0;p<d;p++)e.push(o[p]),t.push(i[p]);for(var s=d;s<u;s++)n.push({type:_.removeElement,nodeOld:o[s],nodeNew:null,nodeParent:r})}else{for(var f=0;f<u;f++)e.push(o[f]),t.push(i[f]);for(var c=u;c<d;c++)n.push({type:_.appendElement,nodeOld:null,nodeNew:i[c],nodeParent:r})}}if(0===e.length){g(n);break}if(16<=performance.now()-w){requestAnimationFrame(function(){w=performance.now(),m(e,t,n)});break}}}}function g(e){for(var t=0;t<e.length;t++){var n=e[t];switch(n.type){case _.updateText:var r=n.nodeOld,a=n.nodeNew.data[""];r.data[""]=a,r.node.textContent=a;break;case _.setAttributes:var o=n.nodeOld,i=o.data,u=o.node,d=n.nodeNew.data;for(var l in d){var p=d[l];"@"!==l[0]&&"children"!==l&&(!1===(i[l]=p)?u.removeAttribute(l):u.setAttribute(l,p))}break;case _.appendElement:var s=n.nodeNew,f=n.nodeParent,c=q(s);f.data.children.push(c),f.node.appendChild(c.node);break;case _.removeElement:var v=n.nodeParent;v.data.children.pop(),v.node.removeChild(n.nodeOld.node);break;case _.replaceElement:var h=n.nodeOld,m=q(n.nodeNew),g=h.node;h.type=m.type,h.name=m.name,h.data=m.data,h.node=m.node,g.parentNode.replaceChild(h.node,g)}}P.shift(),0!==P.length&&(16<=performance.now()-w?requestAnimationFrame(function(){w=performance.now(),F()}):F())}function F(){var e=P[0];for(var t in e)d[t]=e[t];!function e(t,n,r){for(;;){var a=t.pop(),o=n.pop(),i=r.pop();a.type===y.component?(a=c[a.name](a.data),null===o?h(a):o.data.children[i]=a):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){m([l],[f],[]);break}if(16<=performance.now()-w){requestAnimationFrame(function(){w=performance.now(),e(t,n,r)});break}}}([u(d)],[null],[0])}function z(e){P.push(e),1===P.length&&requestAnimationFrame(function(){w=performance.now(),F()})}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("m","data",i(n)));var r="string"==typeof t.root?document.querySelector(t.root):t.root;delete t.root;var a=function(e){return n(v,function(e,t){var n={};for(var r in e)n[r]=e[r];for(var a in t)a in e||(n[a]=t[a]);return n}(e,t))};void 0===r?c[e]=a:(function(e){l=e}({type:y.element,name:r.tagName.toLowerCase(),data:{children:[]},node:r}),function(e){u=e}(a),z(t))}return e.lex=r,e.parse=a,e.generate=o,e.compile=i,e.components=c,e.set=z,e});
\ No newline at end of file
diff --git a/packages/moon/src/compiler/generator/components/for.js b/packages/moon/src/compiler/generator/components/for.js
index 7ad593e4..5129e01b 100644
--- a/packages/moon/src/compiler/generator/components/for.js
+++ b/packages/moon/src/compiler/generator/components/for.js
@@ -1,14 +1,15 @@
 import { generateNode } from "../generator";
 import { types } from "../../../util/util";
-import { generateVariable, setGenerateVariable } from "../util/globals";
+import { generateStatic, generateVariable, setGenerateStatic, setGenerateVariable } from "../util/globals";
 
 /**
- * Generates view function code and prelude code for a `for` element.
+ * Generates code for a node from a `for` element.
  *
  * @param {Object} element
- * @returns {Object} View function code and prelude code
+ * @param {Array} staticNodes
+ * @returns {Object} Prelude code, view function code, and static status
  */
-export function generateNodeFor(element) {
+export function generateNodeFor(element, staticNodes) {
 	const variable = "m" + generateVariable;
 	const dataLocals = element.attributes[""].split(",");
 	const dataArray = element.attributes["of"];
@@ -19,8 +20,24 @@ export function generateNodeFor(element) {
 
 	setGenerateVariable(generateVariable + 1);
 
-	const generateChild = generateNode(element.children[0], element, 0);
-	const body = `${generateChild.prelude}${variable}.push(${generateChild.node});`;
+	const generateChild = generateNode(
+		element.children[0],
+		element,
+		0,
+		staticNodes
+	);
+	let body;
+
+	if (generateChild.isStatic) {
+		// If the body is static, then use a static node in place of it.
+		body = `${variable}.push(m[${generateStatic}]);`;
+
+		staticNodes.push(generateChild);
+		setGenerateStatic(generateStatic + 1);
+	} else {
+		// If the body is dynamic, then use the dynamic node in the loop body.
+		body = `${generateChild.prelude}${variable}.push(${generateChild.node});`;
+	}
 
 	if (dataArray === undefined) {
 		// Generate a `for` loop over an object. The first local is the key and
@@ -42,12 +59,12 @@ export function generateNodeFor(element) {
 		// the second is the key (index).
 		dataKey = dataLocals.length === 2 ? dataLocals[1] : "i";
 		dataValue = dataLocals[0];
-
 		prelude = `for(var ${dataKey}=0;${dataKey}<${dataArray}.length;${dataKey}++){var ${dataValue}=${dataArray}[${dataKey}];${body}}`;
 	}
 
 	return {
 		prelude: `var ${variable}=[];${prelude}`,
-		node: `{type:${types.element},name:"span",data:{children:${variable}}}`
+		node: `{type:${types.element},name:"span",data:{children:${variable}}}`,
+		isStatic: false
 	};
 }
diff --git a/packages/moon/src/compiler/generator/components/if.js b/packages/moon/src/compiler/generator/components/if.js
index d0032190..4202cfe0 100644
--- a/packages/moon/src/compiler/generator/components/if.js
+++ b/packages/moon/src/compiler/generator/components/if.js
@@ -1,16 +1,43 @@
 import { generateNode } from "../generator";
 import { types } from "../../../util/util";
-import { generateVariable, setGenerateVariable } from "../util/globals";
+import { generateStatic, generateVariable, setGenerateStatic, setGenerateVariable } from "../util/globals";
 
 /**
- * Generates view function code and prelude code for an `if` element.
+ * Generates code for an `if`/`else-if`/`else` clause body.
+ *
+ * @param {number} variable
+ * @param {Object} element
+ * @param {Array} staticNodes
+ * @returns {string} clause body
+ */
+function generateClause(variable, element, staticNodes) {
+	const generateBody = generateNode(element.children[0], element, 0, staticNodes);
+	let clause;
+
+	if (generateBody.isStatic) {
+		// If the clause is static, then use a static node in place of it.
+		clause = `${variable}=m[${generateStatic}];`;
+
+		staticNodes.push(generateBody);
+		setGenerateStatic(generateStatic + 1);
+	} else {
+		// If the clause is dynamic, then use the dynamic node.
+		clause = `${generateBody.prelude}${variable}=${generateBody.node};`;
+	}
+
+	return clause;
+}
+
+/**
+ * Generates code for a node from an `if` element.
  *
  * @param {Object} element
  * @param {Object} parent
  * @param {number} index
- * @returns {Object} View function code and prelude code
+ * @param {Array} staticNodes
+ * @returns {Object} Prelude code, view function code, and static status
  */
-export function generateNodeIf(element, parent, index) {
+export function generateNodeIf(element, parent, index, staticNodes) {
 	const variable = "m" + generateVariable;
 	let prelude = "";
 	let emptyElseClause = true;
@@ -18,9 +45,7 @@ export function generateNodeIf(element, parent, index) {
 	setGenerateVariable(generateVariable + 1);
 
 	// Generate the initial `if` clause.
-	const generateIf = generateNode(element.children[0], element, 0);
-
-	prelude += `var ${variable};if(${element.attributes[""]}){${generateIf.prelude}${variable}=${generateIf.node};}`;
+	prelude += `var ${variable};if(${element.attributes[""]}){${generateClause(variable, element, staticNodes)}}`;
 
 	// Search for `else-if` and `else` clauses if there are siblings.
 	if (parent !== null) {
@@ -31,26 +56,14 @@ export function generateNodeIf(element, parent, index) {
 
 			if (sibling.type === "else-if") {
 				// Generate the `else-if` clause.
-				const generateElseIf = generateNode(
-					sibling.children[0],
-					sibling,
-					0
-				);
-
-				prelude += `else if(${sibling.attributes[""]}){${generateElseIf.prelude}${variable}=${generateElseIf.node};}`;
+				prelude += `else if(${sibling.attributes[""]}){${generateClause(variable, sibling, staticNodes)}}`;
 
 				// Remove the `else-if` clause so that it isn't generated
 				// individually by the parent.
 				siblings.splice(i, 1);
 			} else if (sibling.type === "else") {
 				// Generate the `else` clause.
-				const generateElse = generateNode(
-					sibling.children[0],
-					sibling,
-					0
-				);
-
-				prelude += `else{${generateElse.prelude}${variable}=${generateElse.node};}`;
+				prelude += `else{${generateClause(variable, sibling, staticNodes)}}`;
 
 				// Skip generating the empty `else` clause.
 				emptyElseClause = false;
@@ -66,11 +79,19 @@ export function generateNodeIf(element, parent, index) {
 
 	// Generate an empty `else` clause represented by an empty text node.
 	if (emptyElseClause) {
-		prelude += `else{${variable}={type:${types.text},name:"text",data:{"":"",children:[]}};}`;
+		prelude += `else{${variable}=m[${generateStatic}];}`;
+
+		staticNodes.push({
+			prelude: "",
+			node: `{type:${types.text},name:"text",data:{"":"",children:[]}}`,
+			isStatic: true
+		});
+		setGenerateStatic(generateStatic + 1);
 	}
 
 	return {
 		prelude,
-		node: variable
+		node: variable,
+		isStatic: false
 	};
 }
diff --git a/packages/moon/src/compiler/generator/generator.js b/packages/moon/src/compiler/generator/generator.js
index ec0656ea..c8bdd788 100644
--- a/packages/moon/src/compiler/generator/generator.js
+++ b/packages/moon/src/compiler/generator/generator.js
@@ -1,25 +1,27 @@
 import { generateNodeIf } from "./components/if";
 import { generateNodeFor } from "./components/for";
-import { setGenerateVariable } from "./util/globals";
+import { generateStatic, setGenerateStatic, setGenerateVariable } from "./util/globals";
 import { types } from "../../util/util";
 
 /**
- * Generates view function code for a Moon node from an element.
+ * Generates code for a node from an element.
  *
  * @param {Object} element
  * @param {Object} parent
  * @param {number} index
- * @returns {Object} View function code and prelude code
+ * @param {Array} staticNodes
+ * @returns {Object} Prelude code, view function code, and static status
  */
-export function generateNode(element, parent, index) {
+export function generateNode(element, parent, index, staticNodes) {
 	const name = element.type;
 	let type;
+	let isStatic = true;
 
 	// Generate the correct type number for the given name.
 	if (name === "if") {
-		return generateNodeIf(element, parent, index);
+		return generateNodeIf(element, parent, index, staticNodes);
 	} else if (name === "for") {
-		return generateNodeFor(element);
+		return generateNodeFor(element, staticNodes);
 	} else if (name === "text") {
 		type = types.text;
 	} else if (name[0] === name[0].toLowerCase()) {
@@ -34,21 +36,63 @@ export function generateNode(element, parent, index) {
 	let separator = "";
 
 	for (let attribute in attributes) {
-		data += `${separator}"${attribute}":${attributes[attribute]}`;
+		const attributeValue = attributes[attribute];
+
+		// Mark the current node as dynamic if any attributes are dynamic. Events
+		// are always treated as static.
+		if (
+			attribute[0] !== "@" &&
+			attributeValue[0] !== "\"" &&
+			attributeValue[0] !== "'"
+		) {
+			isStatic = false;
+		}
+
+		data += `${separator}"${attribute}":${attributeValue}`;
 		separator = ",";
 	}
 
 	if (attributes.children === undefined) {
 		// Generate children if they are not in the element data.
 		const children = element.children;
-		data += separator + "children:[";
+		let generateChildren = [];
 
+		data += separator + "children:[";
 		separator = "";
+
 		for (let i = 0; i < children.length; i++) {
-			const generateChild = generateNode(children[i], element, i);
+			const generateChild = generateNode(
+				children[i],
+				element,
+				i,
+				staticNodes
+			);
+
+			// Mark the current node as dynamic if any child is dynamic.
+			if (!generateChild.isStatic) {
+				isStatic = false;
+			}
+
+			generateChildren.push(generateChild);
+		}
+
+		for (let i = 0; i < generateChildren.length; i++) {
+			const generateChild = generateChildren[i];
+
+			if (isStatic || !generateChild.isStatic) {
+				// If the whole current node is static or the current node and
+				// child node are dynamic, then append the child as a part of the
+				// node as usual.
+				prelude += generateChild.prelude;
+				data += separator + generateChild.node;
+			} else {
+				// If the whole current node is dynamic and the child node is
+				// static, then use a static node in place of the static child.
+				data += separator + `m[${generateStatic}]`;
 
-			prelude += generateChild.prelude;
-			data += separator + generateChild.node;
+				staticNodes.push(generateChild);
+				setGenerateStatic(generateStatic + 1);
+			}
 
 			separator = ",";
 		}
@@ -58,7 +102,8 @@ export function generateNode(element, parent, index) {
 
 	return {
 		prelude,
-		node: `{type:${type},name:"${name}",data:${data}}}`
+		node: `{type:${type},name:"${name}",data:${data}}}`,
+		isStatic
 	};
 }
 
@@ -75,12 +120,42 @@ export function generateNode(element, parent, index) {
  * @returns {string} View function code
  */
 export function generate(element) {
+	// Store static nodes.
+	const staticNodes = [];
+
 	// Reset generator variable.
 	setGenerateVariable(0);
 
+	// Hold a reference to the next static node.
+	const staticRoot = generateStatic;
+
 	// Generate the root node and get the prelude and node code.
-	const { prelude, node } = generateNode(element, null, 0);
+	const { prelude, node, isStatic } = generateNode(
+		element,
+		null,
+		0,
+		staticNodes
+	);
+
+	if (isStatic) {
+		// Account for a static root node.
+		setGenerateStatic(generateStatic + 1);
+
+		return `if(m[${staticRoot}]===undefined){${prelude}m[${staticRoot}]=${node};}return m[${staticRoot}];`;
+	} else if (staticNodes.length === 0) {
+		return `${prelude}return ${node};`;
+	} else {
+		// Generate static nodes only once at the start.
+		let staticCode = `if(m[${staticRoot}]===undefined){`;
 
-	// Convert the code into a usable function body.
-	return `${prelude}return ${node};`;
+		for (let i = 0; i < staticNodes.length; i++) {
+			const staticNode = staticNodes[i];
+
+			staticCode += `${staticNode.prelude}m[${staticRoot + i}]=${staticNode.node};`;
+		}
+
+		staticCode += "}";
+
+		return `${staticCode}${prelude}return ${node};`;
+	}
 }
diff --git a/packages/moon/src/compiler/generator/util/globals.js b/packages/moon/src/compiler/generator/util/globals.js
index e2212dc8..35525590 100644
--- a/packages/moon/src/compiler/generator/util/globals.js
+++ b/packages/moon/src/compiler/generator/util/globals.js
@@ -3,6 +3,11 @@
  */
 export let generateVariable;
 
+/**
+ * Global static variable number
+ */
+export let generateStatic = 0;
+
 /**
  * Set variable number to a new number.
  *
@@ -11,3 +16,12 @@ export let generateVariable;
 export function setGenerateVariable(newGenerateVariable) {
 	generateVariable = newGenerateVariable;
 }
+
+/**
+ * Set static variable number to a new number.
+ *
+ * @param {number} newGenerateStatic
+ */
+export function setGenerateStatic(newGenerateStatic) {
+	generateStatic = newGenerateStatic;
+}
diff --git a/packages/moon/src/index.js b/packages/moon/src/index.js
index bbdad1b8..f302d165 100644
--- a/packages/moon/src/index.js
+++ b/packages/moon/src/index.js
@@ -3,7 +3,7 @@ import { parse } from "./compiler/parser/parser";
 import { generate } from "./compiler/generator/generator";
 import { compile } from "./compiler/compiler";
 import { execute } from "./executor/executor";
-import { components, setViewCurrent, setViewOld } from "./util/globals";
+import { components, m, setViewCurrent, setViewOld } from "./util/globals";
 import { defaultObject, defaultValue, error, types } from "./util/util";
 
 /**
@@ -46,7 +46,7 @@ export default function Moon(options) {
 	}
 
 	if (typeof view === "string") {
-		view = new Function("data", compile(view));
+		view = new Function("m", "data", compile(view));
 	}
 
 	// If a `root` option is given, start the root renderer, or else just return
@@ -58,9 +58,16 @@ export default function Moon(options) {
 
 	delete options.root;
 
+	// Create a wrapper view function that maps data to the compiled view
+	// function. The compiled view function takes `m`, which holds static nodes.
+	// The data is also processed so that `options` acts as a default.
+	const viewComponent = (data) => view(m, defaultObject(data, options));
+
 	if (root === undefined) {
-		components[name] = (data) => view(defaultObject(data, options));
+		// Store it as a component if no `root` is given.
+		components[name] = viewComponent;
 	} else {
+		// Mount to the `root` element and begin execution if it is given.
 		setViewOld({
 			type: types.element,
 			name: root.tagName.toLowerCase(),
@@ -69,7 +76,7 @@ export default function Moon(options) {
 			},
 			node: root
 		});
-		setViewCurrent(view);
+		setViewCurrent(viewComponent);
 		execute(options);
 	}
 }
diff --git a/packages/moon/src/util/globals.js b/packages/moon/src/util/globals.js
index a0357d5a..c0d5c7c3 100644
--- a/packages/moon/src/util/globals.js
+++ b/packages/moon/src/util/globals.js
@@ -13,6 +13,11 @@ export let viewOld, viewNew, viewCurrent;
  */
 export const components = {};
 
+/**
+ * Global static component views
+ */
+export const m = [];
+
 /**
  * Set old view to a new object.
  *
diff --git a/packages/moon/src/util/util.js b/packages/moon/src/util/util.js
index e1371fbf..fbaee3e9 100644
--- a/packages/moon/src/util/util.js
+++ b/packages/moon/src/util/util.js
@@ -37,13 +37,15 @@ export function defaultValue(value, fallback) {
 export function defaultObject(obj, fallback) {
 	let full = {};
 
-	for (let key in fallback) {
-		full[key] = fallback[key];
-	}
-
 	for (let key in obj) {
 		full[key] = obj[key];
 	}
 
+	for (let key in fallback) {
+		if (!(key in obj)) {
+			full[key] = fallback[key];
+		}
+	}
+
 	return full;
 }