From b61a20291634e124f55ea444728c515b863c71d0 Mon Sep 17 00:00:00 2001
From: Kabir Shah <iamkbrsh@gmail.com>
Date: Sun, 7 Apr 2019 00:52:51 -0700
Subject: [PATCH] async executor

---
 packages/moon/dist/moon.js                    | 34 +++++++---
 packages/moon/dist/moon.min.js                |  2 +-
 packages/moon/src/compiler/executor.js        | 19 ++++--
 .../moon/src/compiler/generator/generator.js  |  2 +-
 packages/moon/src/index.js                    | 63 ++++++++++++-------
 5 files changed, 83 insertions(+), 37 deletions(-)

diff --git a/packages/moon/dist/moon.js b/packages/moon/dist/moon.js
index 985fff0d..f40e4c46 100644
--- a/packages/moon/dist/moon.js
+++ b/packages/moon/dist/moon.js
@@ -574,7 +574,7 @@
 				childrenCreate += instruction(instructions.appendElement, [childCode.createVar, elementVar]);
 				childrenUpdate += childCode.update;
 				childrenDestroy += childCode.destroy;
-				total += childCode.total;
+				total = childCode.total;
 			}
 
 			return {
@@ -659,14 +659,18 @@
 	 * done. It runs the instructions over multiple frames to allow the browser to
 	 * handle other high-priority events.
 	 *
+	 * @param {number} index
 	 * @param {number} start
+	 * @param {Object} data
 	 * @param {string} code
 	 * @param {Function} next
 	 */
 
 
-	function execute(start, data, code, next) {
-		main: for (var i = start; i < code.length;) {
+	function execute(index, start, data, code, next) {
+		var i = index;
+
+		while (i < code.length) {
 			switch (code.charCodeAt(i)) {
 				case instructions.createElement:
 					{
@@ -736,9 +740,16 @@
 				case instructions.returnVar:
 					{
 						next(executeGet(code.charCodeAt(++i), data));
-						break;
+						return;
 					}
 			}
+
+			if (performance.now() - start >= 8) {
+				requestAnimationFrame(function () {
+					execute(i, performance.now(), data, code, next);
+				});
+				break;
+			}
 		}
 	}
 
@@ -752,13 +763,14 @@
 	 * with the new element.
 	 *
 	 * @param {Function} [next]
+	 * @param {number} [start]
 	 */
 
-	function create(next) {
+	function create(next, start) {
 		var _this = this;
 
 		this.view.data();
-		execute(0, this, this.view.create, function (element) {
+		execute(0, start === undefined ? performance.now() : start, this, this.view.create, function (element) {
 			_this.emit("create", element);
 
 			if (next !== undefined) {
@@ -771,17 +783,18 @@
 	 *
 	 * @param {Object} data
 	 * @param {Function} [next]
+	 * @param {number} [start]
 	 */
 
 
-	function update(data, next) {
+	function update(data, next, start) {
 		var _this2 = this;
 
 		for (var key in data) {
 			this[key] = data[key];
 		}
 
-		execute(this.view.update, function () {
+		execute(0, start === undefined ? performance.now() : start, this, this.view.update, function () {
 			_this2.emit("update");
 
 			if (next !== undefined) {
@@ -793,13 +806,14 @@
 	 * Destroys the view over multiple frames and calls the given function.
 	 *
 	 * @param {Function} [next]
+	 * @param {number} [start]
 	 */
 
 
-	function destroy(next) {
+	function destroy(next, start) {
 		var _this3 = this;
 
-		execute(this.view.destroy, function () {
+		execute(0, start === undefined ? performance.now() : start, this, this.view.destroy, function () {
 			_this3.emit("destroy");
 
 			if (next !== undefined) {
diff --git a/packages/moon/dist/moon.min.js b/packages/moon/dist/moon.min.js
index e846db03..d30e3c89 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";var A=/<([\w\d-_]+)([^>]*?)(\/?)>/g,E=/\s*([\w\d-_]*)(?:=(?:("[^"]*"|'[^']*')|{([^{}]*)}))?/g;function t(e){e=e.trim();for(var t=[],r=0;r<e.length;){var n=e[r];if("<"===n){var a=e[r+1];if("/"===a){var o=e.indexOf(">",r+2),i=e.slice(r+2,o);0,t.push({type:"tagClose",value:i}),r=o+1;continue}if("!"===a&&"-"===e[r+2]&&"-"===e[r+3]){var s=e.indexOf("--\x3e",r+4);0,r=s+3;continue}A.lastIndex=r;var d=A.exec(e);0;for(var u=d[0],c=d[1],v=d[2],p=d[3],f={},h=void 0;null!==(h=E.exec(v));){var l=h[0],m=h[1],y=h[2],C=h[3];0===l.length?E.lastIndex+=1:f[m]=void 0===C?y:C}t.push({type:"tagOpen",value:c,attributes:f,closed:"/"===p}),r+=u.length}else if("{"===n){var g="";for(r+=1;r<e.length;r++){var x=e[r];if("}"===x)break;g+=x}t.push({type:"tagOpen",value:"text",attributes:{"":g},closed:!0}),r+=1}else{for(var b="";r<e.length;r++){var w=e[r];if("<"===w||"{"===w)break;b+=w}t.push({type:"tagOpen",value:"text",attributes:{"":'"'+b+'"'},closed:!0})}}return t}function c(e,t,r,n){this.message=e,this.start=t,this.end=r,this.next=n}function v(e,t,r){var n=r[e],a=r[t-1],o=t-e;if(0==o)return new c("",e,t);if(1==o)return"tagOpen"===n.type&&!0===n.closed?{type:n.value,attributes:n.attributes,children:[]}:new c("",e,t);if("tagOpen"!==n.type||"tagClose"!==a.type||n.value!==a.value)return new c("",e,t);var i=function e(t,r,n){var a;if(0==r-t)return[];for(var o=t+1;o<=r;o++){var i=v(t,o,n);if(i instanceof c)a=i;else{var s=e(o,r,n);if(!(s instanceof c)){for(var d=[i],u=0;u<s.length;u++)d.push(s[u]);return d}}}return new c("",t,r,a)}(e+1,t-1,r);return i instanceof c?new c("",e,t,i):{type:n.value,attributes:n.attributes,children:i}}function r(e){var t=v(0,e.length,e);return t}var C={createElement:0,updateElement:1,createText:2,updateText:3,destroyElement:4,appendElement:5,createComponent:6,updateComponent:7,destroyComponent:8,returnVar:9};function g(e,t){for(var r=String.fromCharCode(e),n=0;n<t.length;n++)r+=String.fromCharCode(t[n]);return r}function n(e){var t={},r=function e(t,r,n){var a=t.type;if("text"===a){var o=n++,i=t.attributes[""],s=r[i];return void 0===s&&(s=r[i]=n++),{create:g(C.createText,[o,s]),createVar:o,update:g(C.updateText,[s]),destroy:g(C.destroyElement,[o]),total:n}}if(a[0]===a[0].toLowerCase()){var d='"'+a+'"',u=function(e){var t="{";for(var r in e)t+='"'+r+'":'+e[r]+",";return t+"}"}(t.attributes),c=n++,v=r[d],p=r[u];void 0===v&&(v=r[d]=n++),void 0===p&&(p=r[u]=n++);for(var f="",h="",l="",m=0;m<t.children.length;m++){var y=e(t.children[m],r,n);f+=y.create,f+=g(C.appendElement,[y.createVar,c]),h+=y.update,l+=y.destroy,n+=y.total}return{create:g(C.createElement,[c,v,p])+f,createVar:c,update:g(C.updateElement,[c])+h,destroy:g(C.destroyElement,[c])+l,total:n}}}(e,t,0),n=r.create,a=r.createVar,o=r.update,i=r.destroy,s="";for(var d in t)s+="this.m"+t[d]+"="+d+";";return n+=g(C.returnVar,[a]),{data:new Function(s),create:n,update:o,destroy:i}}function d(e){return n(r(t(e)))}function m(e,t){return t["m"+e]}function y(e,t,r){r["m"+e]=t}function a(e,t,r,n){for(var a=e;a<r.length;)switch(r.charCodeAt(a)){case C.createElement:var o=r.charCodeAt(++a),i=document.createElement(m(r.charCodeAt(++a),t)),s=m(r.charCodeAt(++a),t);for(var d in s)i.setAttribute(d,s[d]);y(o,i,t),a+=1;break;case C.updateElement:var u=m(r.charCodeAt(++a),t),c=m(r.charCodeAt(++a),t);for(var v in c)u.setAttribute(v,c[v]);a+=1;break;case C.createText:y(r.charCodeAt(++a),document.createTextNode(m(r.charCodeAt(++a),t)),t),a+=1;break;case C.updateText:var p=m(r.charCodeAt(++a),t),f=m(r.charCodeAt(++a),t);p.textContent=f,a+=1;break;case C.destroyElement:var h=m(r.charCodeAt(++a),t);h.parentNode.destroyChild(h),a+=1;break;case C.appendElement:var l=m(r.charCodeAt(++a),t);m(r.charCodeAt(++a),t).appendChild(l),a+=1;break;case C.returnVar:n(m(r.charCodeAt(++a),t))}}var u={};function p(t){var r=this;this.view.data(),a(0,this,this.view.create,function(e){r.emit("create",e),void 0!==t&&t(e)})}function f(e,t){var r=this;for(var n in e)this[n]=e[n];a(this.view.update,function(){r.emit("update"),void 0!==t&&t()})}function h(e){var t=this;a(this.view.destroy,function(){t.emit("destroy"),void 0!==e&&e()})}function l(e,t){var r=this.events[e];void 0===r?this.events[e]=[t.bind(this)]:r.push(t.bind(this))}function x(e,t){if(void 0===e)this.events={};else if(void 0===t)this.events[e]=[];else{var r=this.events[e];r.splice(r.indexOf(t),1)}}function b(e,t){for(var r=this.events[e],n=0;n<r.length;n++)r[n](t)}function e(e){e.name=void 0===e.name?"Root":e.name;var t=e.view;"string"==typeof t&&(e.view=d(t));var r=e.onCreate,n=e.onUpdate,a=e.onDestroy;function o(e){for(var t in this.view.data=this.view.data.bind(this),e)this[t]=e[t]}delete e.onCreate,delete e.onUpdate,delete e.onDestroy,e.events={create:[],update:[],destroy:[]},void 0!==r&&e.events.create.push(r),void 0!==n&&e.events.update.push(n),void 0!==a&&e.events.destroy.push(a),(o.prototype=e).m=[],o.prototype.create=p,o.prototype.update=f,o.prototype.destroy=h,o.prototype.on=l,o.prototype.off=x,o.prototype.emit=b;var i=e.root;if(delete e.root,"string"==typeof i&&(i=document.querySelector(i)),void 0===i)return u[name]=o;var s=new o;return s.create(function(e){i.appendChild(e)}),s}return e.lex=t,e.parse=r,e.generate=n,e.compile=d,e.execute=a,e.components=u,e});
\ No newline at end of file
+!function(e,t){"undefined"==typeof module?e.Moon=t():module.exports=t()}(this,function(){"use strict";var A=/<([\w\d-_]+)([^>]*?)(\/?)>/g,E=/\s*([\w\d-_]*)(?:=(?:("[^"]*"|'[^']*')|{([^{}]*)}))?/g;function t(e){e=e.trim();for(var t=[],r=0;r<e.length;){var n=e[r];if("<"===n){var a=e[r+1];if("/"===a){var o=e.indexOf(">",r+2),i=e.slice(r+2,o);0,t.push({type:"tagClose",value:i}),r=o+1;continue}if("!"===a&&"-"===e[r+2]&&"-"===e[r+3]){var s=e.indexOf("--\x3e",r+4);0,r=s+3;continue}A.lastIndex=r;var d=A.exec(e);0;for(var u=d[0],c=d[1],v=d[2],p=d[3],f={},h=void 0;null!==(h=E.exec(v));){var l=h[0],m=h[1],y=h[2],C=h[3];0===l.length?E.lastIndex+=1:f[m]=void 0===C?y:C}t.push({type:"tagOpen",value:c,attributes:f,closed:"/"===p}),r+=u.length}else if("{"===n){var g="";for(r+=1;r<e.length;r++){var w=e[r];if("}"===w)break;g+=w}t.push({type:"tagOpen",value:"text",attributes:{"":g},closed:!0}),r+=1}else{for(var b="";r<e.length;r++){var x=e[r];if("<"===x||"{"===x)break;b+=x}t.push({type:"tagOpen",value:"text",attributes:{"":'"'+b+'"'},closed:!0})}}return t}function c(e,t,r,n){this.message=e,this.start=t,this.end=r,this.next=n}function v(e,t,r){var n=r[e],a=r[t-1],o=t-e;if(0==o)return new c("",e,t);if(1==o)return"tagOpen"===n.type&&!0===n.closed?{type:n.value,attributes:n.attributes,children:[]}:new c("",e,t);if("tagOpen"!==n.type||"tagClose"!==a.type||n.value!==a.value)return new c("",e,t);var i=function e(t,r,n){var a;if(0==r-t)return[];for(var o=t+1;o<=r;o++){var i=v(t,o,n);if(i instanceof c)a=i;else{var s=e(o,r,n);if(!(s instanceof c)){for(var d=[i],u=0;u<s.length;u++)d.push(s[u]);return d}}}return new c("",t,r,a)}(e+1,t-1,r);return i instanceof c?new c("",e,t,i):{type:n.value,attributes:n.attributes,children:i}}function r(e){var t=v(0,e.length,e);return t}var C={createElement:0,updateElement:1,createText:2,updateText:3,destroyElement:4,appendElement:5,createComponent:6,updateComponent:7,destroyComponent:8,returnVar:9};function g(e,t){for(var r=String.fromCharCode(e),n=0;n<t.length;n++)r+=String.fromCharCode(t[n]);return r}function n(e){var t={},r=function e(t,r,n){var a=t.type;if("text"===a){var o=n++,i=t.attributes[""],s=r[i];return void 0===s&&(s=r[i]=n++),{create:g(C.createText,[o,s]),createVar:o,update:g(C.updateText,[s]),destroy:g(C.destroyElement,[o]),total:n}}if(a[0]===a[0].toLowerCase()){var d='"'+a+'"',u=function(e){var t="{";for(var r in e)t+='"'+r+'":'+e[r]+",";return t+"}"}(t.attributes),c=n++,v=r[d],p=r[u];void 0===v&&(v=r[d]=n++),void 0===p&&(p=r[u]=n++);for(var f="",h="",l="",m=0;m<t.children.length;m++){var y=e(t.children[m],r,n);f+=y.create,f+=g(C.appendElement,[y.createVar,c]),h+=y.update,l+=y.destroy,n=y.total}return{create:g(C.createElement,[c,v,p])+f,createVar:c,update:g(C.updateElement,[c])+h,destroy:g(C.destroyElement,[c])+l,total:n}}}(e,t,0),n=r.create,a=r.createVar,o=r.update,i=r.destroy,s="";for(var d in t)s+="this.m"+t[d]+"="+d+";";return n+=g(C.returnVar,[a]),{data:new Function(s),create:n,update:o,destroy:i}}function d(e){return n(r(t(e)))}function y(e,t){return t["m"+e]}function w(e,t,r){r["m"+e]=t}function b(e,t,r,n,a){for(var o=e;o<n.length;){switch(n.charCodeAt(o)){case C.createElement:var i=n.charCodeAt(++o),s=document.createElement(y(n.charCodeAt(++o),r)),d=y(n.charCodeAt(++o),r);for(var u in d)s.setAttribute(u,d[u]);w(i,s,r),o+=1;break;case C.updateElement:var c=y(n.charCodeAt(++o),r),v=y(n.charCodeAt(++o),r);for(var p in v)c.setAttribute(p,v[p]);o+=1;break;case C.createText:w(n.charCodeAt(++o),document.createTextNode(y(n.charCodeAt(++o),r)),r),o+=1;break;case C.updateText:var f=y(n.charCodeAt(++o),r),h=y(n.charCodeAt(++o),r);f.textContent=h,o+=1;break;case C.destroyElement:var l=y(n.charCodeAt(++o),r);l.parentNode.destroyChild(l),o+=1;break;case C.appendElement:var m=y(n.charCodeAt(++o),r);y(n.charCodeAt(++o),r).appendChild(m),o+=1;break;case C.returnVar:return void a(y(n.charCodeAt(++o),r))}if(8<=performance.now()-t){requestAnimationFrame(function(){b(o,performance.now(),r,n,a)});break}}}var u={};function p(t,e){var r=this;this.view.data(),b(0,void 0===e?performance.now():e,this,this.view.create,function(e){r.emit("create",e),void 0!==t&&t(e)})}function f(e,t,r){var n=this;for(var a in e)this[a]=e[a];b(0,void 0===r?performance.now():r,this,this.view.update,function(){n.emit("update"),void 0!==t&&t()})}function h(e,t){var r=this;b(0,void 0===t?performance.now():t,this,this.view.destroy,function(){r.emit("destroy"),void 0!==e&&e()})}function l(e,t){var r=this.events[e];void 0===r?this.events[e]=[t.bind(this)]:r.push(t.bind(this))}function m(e,t){if(void 0===e)this.events={};else if(void 0===t)this.events[e]=[];else{var r=this.events[e];r.splice(r.indexOf(t),1)}}function x(e,t){for(var r=this.events[e],n=0;n<r.length;n++)r[n](t)}function e(e){e.name=void 0===e.name?"Root":e.name;var t=e.view;"string"==typeof t&&(e.view=d(t));var r=e.onCreate,n=e.onUpdate,a=e.onDestroy;function o(e){for(var t in this.view.data=this.view.data.bind(this),e)this[t]=e[t]}delete e.onCreate,delete e.onUpdate,delete e.onDestroy,e.events={create:[],update:[],destroy:[]},void 0!==r&&e.events.create.push(r),void 0!==n&&e.events.update.push(n),void 0!==a&&e.events.destroy.push(a),(o.prototype=e).m=[],o.prototype.create=p,o.prototype.update=f,o.prototype.destroy=h,o.prototype.on=l,o.prototype.off=m,o.prototype.emit=x;var i=e.root;if(delete e.root,"string"==typeof i&&(i=document.querySelector(i)),void 0===i)return u[name]=o;var s=new o;return s.create(function(e){i.appendChild(e)}),s}return e.lex=t,e.parse=r,e.generate=n,e.compile=d,e.execute=b,e.components=u,e});
\ No newline at end of file
diff --git a/packages/moon/src/compiler/executor.js b/packages/moon/src/compiler/executor.js
index c5af1554..7b11c48c 100644
--- a/packages/moon/src/compiler/executor.js
+++ b/packages/moon/src/compiler/executor.js
@@ -31,13 +31,16 @@ function executeSet(index, value, data) {
  * done. It runs the instructions over multiple frames to allow the browser to
  * handle other high-priority events.
  *
+ * @param {number} index
  * @param {number} start
+ * @param {Object} data
  * @param {string} code
  * @param {Function} next
  */
-export function execute(start, data, code, next) {
-	main:
-	for (let i = start; i < code.length;) {
+export function execute(index, start, data, code, next) {
+	let i = index;
+
+	while (i < code.length) {
 		switch (code.charCodeAt(i)) {
 			case instructions.createElement: {
 				const storage = code.charCodeAt(++i);
@@ -112,8 +115,16 @@ export function execute(start, data, code, next) {
 
 			case instructions.returnVar: {
 				next(executeGet(code.charCodeAt(++i), data));
-				break;
+				return;
 			}
 		}
+
+		if (performance.now() - start >= 8) {
+			requestAnimationFrame(() => {
+				execute(i, performance.now(), data, code, next);
+			});
+
+			break;
+		}
 	}
 }
diff --git a/packages/moon/src/compiler/generator/generator.js b/packages/moon/src/compiler/generator/generator.js
index ce8eb055..b9cf51eb 100644
--- a/packages/moon/src/compiler/generator/generator.js
+++ b/packages/moon/src/compiler/generator/generator.js
@@ -85,7 +85,7 @@ function generateAll(tree, data, total) {
 
 			childrenDestroy += childCode.destroy;
 
-			total += childCode.total;
+			total = childCode.total;
 		}
 
 		return {
diff --git a/packages/moon/src/index.js b/packages/moon/src/index.js
index 77e05fb6..b2a330c1 100644
--- a/packages/moon/src/index.js
+++ b/packages/moon/src/index.js
@@ -15,17 +15,24 @@ const components = {};
  * with the new element.
  *
  * @param {Function} [next]
+ * @param {number} [start]
  */
-function create(next) {
+function create(next, start) {
 	this.view.data();
 
-	execute(0, this, this.view.create, (element) => {
-		this.emit("create", element);
-
-		if (next !== undefined) {
-			next(element);
+	execute(
+		0,
+		start === undefined ? performance.now() : start,
+		this,
+		this.view.create,
+		(element) => {
+			this.emit("create", element);
+
+			if (next !== undefined) {
+				next(element);
+			}
 		}
-	});
+	);
 }
 
 /**
@@ -33,34 +40,48 @@ function create(next) {
  *
  * @param {Object} data
  * @param {Function} [next]
+ * @param {number} [start]
  */
-function update(data, next) {
+function update(data, next, start) {
 	for (let key in data) {
 		this[key] = data[key];
 	}
 
-	execute(this.view.update, () => {
-		this.emit("update");
-
-		if (next !== undefined) {
-			next();
+	execute(
+		0,
+		start === undefined ? performance.now() : start,
+		this,
+		this.view.update,
+		() => {
+			this.emit("update");
+
+			if (next !== undefined) {
+				next();
+			}
 		}
-	});
+	);
 }
 
 /**
  * Destroys the view over multiple frames and calls the given function.
  *
  * @param {Function} [next]
+ * @param {number} [start]
  */
-function destroy(next) {
-	execute(this.view.destroy, () => {
-		this.emit("destroy");
-
-		if (next !== undefined) {
-			next();
+function destroy(next, start) {
+	execute(
+		0,
+		start === undefined ? performance.now() : start,
+		this,
+		this.view.destroy,
+		() => {
+			this.emit("destroy");
+
+			if (next !== undefined) {
+				next();
+			}
 		}
-	});
+	);
 }
 
 /**