From 7f19adec990bd4bf3e0687395ee10004493fa290 Mon Sep 17 00:00:00 2001
From: Kabir Shah <simplecooldude1@gmail.com>
Date: Mon, 3 Apr 2017 16:42:54 -0700
Subject: [PATCH] generate code that flattens shallow arrays instead of doing
 it during runtime

---
 benchmarks/dbmon/index.html |  2 +-
 dist/moon.js                | 43 ++++++++++++++++++++++---------------
 dist/moon.min.js            |  2 +-
 src/compiler/generator.js   | 18 ++++++++++++----
 src/directives/default.js   | 12 ++++++++++-
 src/util/vdom.js            | 13 +----------
 test/js/test.js             |  2 +-
 7 files changed, 55 insertions(+), 37 deletions(-)

diff --git a/benchmarks/dbmon/index.html b/benchmarks/dbmon/index.html
index 832d2da1..357f3c97 100644
--- a/benchmarks/dbmon/index.html
+++ b/benchmarks/dbmon/index.html
@@ -28,7 +28,7 @@
       </tbody>
     </table>
     -->
-    <div id="app"><table class="latest-data table table-striped"><tr m-for="db in {{databases}}"><td class=dbname>{{db.dbname}}<td class=query-count><span m-literal:class={{db.lastSample.countClassName}}>{{db.lastSample.nbQueries}}</span><td m-for="q in {{db.lastSample.topFiveQueries}}"m-literal:class="'Query ' + {{q.elapsedClassName}}">{{q.formatElapsed}}<div class="left popover"><div class=popover-content>{{q.query}}</div><div class=arrow></div></div></table></div>
+    <div id="app"><table class="latest-data table table-striped"><tr m-for="db in {{databases}}"><td class=dbname>{{db.dbname}}<td class=query-count><span class={{db.lastSample.countClassName}}>{{db.lastSample.nbQueries}}</span><td m-for="q in {{db.lastSample.topFiveQueries}}"m-literal:class="'Query ' + {{q.elapsedClassName}}">{{q.formatElapsed}}<div class="left popover"><div class=popover-content>{{q.query}}</div><div class=arrow></div></div></table></div>
 
     <script src="./ENV.js"></script>
     <script src="./lib/monitor.js"></script>
diff --git a/dist/moon.js b/dist/moon.js
index 05e62bc6..492bab10 100644
--- a/dist/moon.js
+++ b/dist/moon.js
@@ -455,7 +455,7 @@
      * @param {Object|String} children
      * @return {Object} Object usable in Virtual DOM (VNode)
      */
-    var h = function (tag, attrs, meta, nestedChildren) {
+    var h = function (tag, attrs, meta, children) {
       // Text Node
       if (tag === "#text") {
         // Tag => #text
@@ -464,17 +464,6 @@
         return createElement("#text", meta, { attrs: {} }, attrs, []);
       }
     
-      // Setup Children
-      var children = [];
-      for (var i = 0; i < nestedChildren.length; i++) {
-        var child = nestedChildren[i];
-        if (Array.isArray(child)) {
-          children = children.concat(child);
-        } else {
-          children.push(child);
-        }
-      }
-    
       // It's a Component
       if (components[tag]) {
         // Functional component
@@ -1240,9 +1229,10 @@
     /**
      * Generates Code for Props
      * @param {Object} vnode
+     * @param {Object} parentVNode
      * @return {String} generated code
      */
-    var generateProps = function (vnode) {
+    var generateProps = function (vnode, parentVNode) {
       var attrs = vnode.props.attrs;
       var generatedObject = "{attrs: {";
     
@@ -1251,7 +1241,7 @@
         for (var beforeAttr in attrs) {
           var beforeAttrName = attrs[beforeAttr].name;
           if (specialDirectives[beforeAttrName] && specialDirectives[beforeAttrName].beforeGenerate) {
-            specialDirectives[beforeAttrName].beforeGenerate(attrs[beforeAttr].value, attrs[beforeAttr].meta, vnode);
+            specialDirectives[beforeAttrName].beforeGenerate(attrs[beforeAttr].value, attrs[beforeAttr].meta, vnode, parentVNode);
           }
         }
     
@@ -1387,7 +1377,7 @@
       var call = 'h("' + vnode.type + '", ';
     
       // Generate Code for Props
-      call += generateProps(vnode) + ", ";
+      call += generateProps(vnode, parentVNode) + ", ";
     
       // Generate code for children recursively here (in case modified by special directives)
       var children = vnode.children.map(function (item) {
@@ -1403,7 +1393,15 @@
       call += generateMeta(vnode.meta);
     
       // Generate Code for Children
-      call += children.length ? ", [" + generateArray(children) + "]" : ", []";
+      if (children.length) {
+        if (vnode.deep) {
+          call += ', [].concat.apply([], [' + generateArray(children) + '])';
+        } else {
+          call += ', [' + generateArray(children) + ']';
+        }
+      } else {
+        call += ", []";
+      }
     
       // Close Call
       call += ")";
@@ -1451,6 +1449,7 @@
         if (el.type === "slot") {
           if (parentEl) {
             parentEl.meta.shouldRender = true;
+            parentEl.deep = true;
           }
           compiledCode = 'instance.$slots[\'' + (slotNameAttr && slotNameAttr.value || "default") + '\']';
         } else {
@@ -1883,17 +1882,27 @@
     };
     
     specialDirectives[Moon.config.prefix + "for"] = {
+      beforeGenerate: function (value, meta, vnode, parentVNode) {
+        // Setup Deep Flag to Flatten Array
+        parentVNode.deep = true;
+      },
       afterGenerate: function (value, meta, code, vnode) {
+        // Get Parts
         var parts = value.split(" in ");
+        // Aliases
         var aliases = parts[0].split(",");
-    
+        // The Iteratable
         var iteratable = compileTemplate(parts[1], false);
     
+        // Get any parameters
         var params = aliases.join(",");
+    
+        // Change any references to the parameters in children
         code.replace(new RegExp('instance\\.get\\("(' + aliases.join("|") + ')"\\)', 'g'), function (match, alias) {
           code = code.replace(new RegExp('instance.get\\("' + alias + '"\\)', "g"), alias);
         });
     
+        // Use the renderLoop runtime helper
         return 'instance.renderLoop(' + iteratable + ', function(' + params + ') { return ' + code + '; })';
       }
     };
diff --git a/dist/moon.min.js b/dist/moon.min.js
index 01e2ea53..e9556bdf 100644
--- a/dist/moon.min.js
+++ b/dist/moon.min.js
@@ -5,4 +5,4 @@
 * Free to use under the MIT license.
 * https://kingpixil.github.io/license
 */
-!function(e,t){"object"==typeof module&&module.exports?module.exports=t():e.Moon=t()}(this,function(){"use strict";function e(e){this.instance=e,this.cache={},this.signals={},this.dep={target:null,map:{}}}function t(t){this.$opts=t||{},this.$id=s++,this.$name=this.$opts.name||"root",this.$data=this.$opts.data||{},this.$render=this.$opts.render||y,this.$hooks=this.$opts.hooks||{},this.$methods=this.$opts.methods||{},this.$events={},this.$dom={},this.$observer=new e(this),this.$destroyed=!1,this.$initialRender=!0,this.$queued=!1,this.$opts.computed&&a(this,this.$opts.computed),this.init()}var r={},n={},i={},o={stop:"event.stopPropagation();",prevent:"event.preventDefault();",ctrl:"if(!event.ctrlKey) {return;};",shift:"if(!event.shiftKey) {return;};",alt:"if(!event.altKey) {return;};",enter:"if(event.keyCode !== 13) {return;};"},s=0,a=function(e,t){for(var r in t)!function(r){e.$observer.observe(r);var n={get:function(){var n=null;return e.$observer.cache[r]?n=e.$observer.cache[r]:(e.$observer.dep.target=r,n=t[r].get.call(e),e.$observer.dep.target=null,e.$observer.cache[r]=n),n}};t[r].set&&(n.set=function(n){return t[r].set.call(e,n)}),Object.defineProperty(e.$data,r,n)}(r)};e.prototype.observe=function(e){var t=this;this.signals[e]=function(){t.cache[e]=null}},e.prototype.notify=function(e){if(this.dep.map[e])for(var t=0;t<this.dep.map[e].length;t++)this.notify(this.dep.map[e][t]);this.signals[e]&&this.signals[e]()};var u=function(e){t.config.silent||console.log(e)},c=function(e){t.config.silent||console.error("[Moon] ERR: "+e)},p=function(e){e.$queued||e.$destroyed||(e.$queued=!0,setTimeout(function(){e.build(),g(e,"updated"),e.$queued=!1},0))},l=function(){return{shouldRender:!1,eventListeners:{}}},f=function(e){return e.replace(/\\/g,"\\\\").replace(/"/g,'\\"').replace(/\n/g,"\\n")},h=function(e,t,r,n){var i=null;r.replace(/\[(\w+)\]/g,function(e,t){r=r.replace(e,"."+t)});var o=r.split(".");for(i=0;i<o.length-1;i++){t=t[o[i]]}return t[o[i]]=n,o[0]},v=function(e){var t={};if(!e)return t;t.default=[];for(var r=0;r<e.length;r++){var n=e[r],i=n.props.attrs;i.slot?(t[i.slot]?t[i.slot].push(n):t[i.slot]=[n],delete i.slot):t.default.push(n)}return t},d=function(e,t){for(var r in t)e[r]=t[r];return e},m=function(e,t){var r={};for(var n in e)r[n]=e[n];for(var n in t)r[n]=t[n];return r},g=function(e,t){var r=e.$hooks[t];r&&r.call(e)},y=function(){},$=function(e){for(var t={},r=e.attributes,n=r.length;n--;)t[r[n].name]=r[n].value;return t},b=function(e,t,r){var n=t.meta.eventListeners;for(var i in n)for(var o=0;o<n[i].length;o++){var s=n[i][o];e.addEventListener(i,s)}},k=function(e,t){var r=null;if("#text"===e.type)r=document.createTextNode(e.val);else{if(r=e.meta.isSVG?document.createElementNS("http://www.w3.org/2000/svg",e.type):document.createElement(e.type),1===e.children.length&&"#text"===e.children[0].type)r.textContent=e.children[0].val,e.children[0].meta.el=r.firstChild;else for(var n=0;n<e.children.length;n++){var i=e.children[n],o=k(e.children[n],t);r.appendChild(o),i.meta.component&&P(o,i,i.meta.component)}b(r,e)}return S(r,{},e,e.props.attrs),e.meta.el=r,r},x=function(e,t,r){r.appendChild(e),t.meta.component&&P(e,t,t.meta.component)},_=function(e,t){e.__moon__&&e.__moon__.destroy(),t.removeChild(e)},E=function(e,t,r,n){e.__moon__&&e.__moon__.destroy(),n.replaceChild(t,e),r.meta.component&&P(t,r,r.meta.component)},A={SKIP:0,APPEND:1,REMOVE:2,REPLACE:3,TEXT:4,CHILDREN:5},C=function(e,t,r,n,i){return{type:e,val:t,props:r,children:i,meta:n||l()}},R=function(e,t,r){var n=r.opts.data||{};if(r.opts.props)for(var i=0;i<r.opts.props.length;i++){var o=r.opts.props[i];n[o]=e.attrs[o]}return r.opts.render(L,{data:n,slots:v(t)})},L=function(e,t,r,n){if("#text"===e)return C("#text",r,{attrs:{}},t,[]);for(var o=[],s=0;s<n.length;s++){var a=n[s];Array.isArray(a)?o=o.concat(a):o.push(a)}if(i[e]){if(i[e].opts.functional)return R(t,o,i[e]);r.component=i[e]}return C(e,"",t,r,o)},P=function(e,t,r){for(var n=new r.CTor,i=0;i<n.$props.length;i++){var o=n.$props[i];n.$data[o]=t.props.attrs[o]}return n.$slots=v(t.children),n.$el=e,n.build(),g(n,"mounted"),t.meta.el=n.$el,n.$el},S=function(e,t,n){var i=n.props.attrs,o=n.meta.isSVG;if(i)for(var s in i){var a=i[s],u=t[s];null!=u&&a===u||(o?e.setAttributeNS(null,s,a):e.setAttribute(s,a))}if(t)for(var c in t){var a=i[c],u=t[c];(null==a||r[c])&&(r[c]&&r[c](e,a,n),o?e.removeAttributeNS(null,c):e.removeAttribute(c))}if(n.props.dom)for(var p in n.props.dom){var l=n.props.dom[p];e[p]!==l&&(e[p]=l)}},w=function(e,t){if(e.__moon__){for(var r=e.__moon__,n=!1,i=0;i<r.$props.length;i++){var o=r.$props[i];r.$data[o]!==t.props.attrs[o]&&(r.$data[o]=t.props.attrs[o],n=!0)}t.children&&(r.$slots=v(t.children),n=!0),n&&r.build()}else P(e,t,t.meta.component)},G=function(e,t,r,n){var i=e?e.nodeName.toLowerCase():null;if(e){if(t){if(i!==t.type){var o=k(t,n);return E(e,o,t,r),o}if("#text"===t.type)return e&&"#text"===i?(e.textContent!==t.val&&(e.textContent=t.val),t.meta.el=e):E(e,k(t,n),t,r),e;if(t.meta.el=e,t.meta.component)return w(e,t),e;if(S(e,$(e),t),b(e,t),t.props.dom&&t.props.dom.innerHTML)return e;for(var s=0,a=e.firstChild,u=t.children[s];u||a;)G(a,u,e,n),u=t.children[++s],a=a?a.nextSibling:null;return e}return _(e,r),null}var o=k(t,n);return x(o,t,r),o},O=function(e,t,r,n){if(e===t)return A.SKIP;if(e){if(t){if(e.type!==t.type)return E(e.meta.el,k(t,n),t,r),A.REPLACE;if(t.meta.shouldRender&&"#text"===t.type){var i=e.meta.el;return"#text"===e.type?(t.val!==e.val&&(i.textContent=t.val),A.TEXT):(E(i,k(t,n),t,r),A.REPLACE)}if(t.meta.shouldRender){var o=e.meta.el;if(t.meta.component)return w(o,t),A.SKIP;if(S(o,e.props.attrs,t),e.props.attrs=t.props.attrs,t.props.dom&&t.props.dom.innerHTML)return A.SKIP;var s=t.children.length,a=e.children.length;if(0===s){if(0!==a)for(var u=null;u=o.firstChild;)_(u,o)}else for(var c=s>a?s:a,p=0;p<c;p++){var l=e.children[p],f=t.children[p],h=O(l,f,o,n);switch(h){case A.APPEND:e.children[a++]=f;break;case A.REMOVE:e.children.splice(p,1),a--;break;case A.REPLACE:e.children[p]=t.children[p];break;case A.TEXT:l.val=f.val}}return A.CHILDREN}return t.meta.el=e.meta.el,A.SKIP}return _(e.meta.el,r),A.REMOVE}return x(k(t,n),t,r),A.APPEND},T=function(e,t){var r={current:0,template:e,output:""};return N(r,t),r.output},N=function(e,t){for(var r=e.template,n=r.length;e.current<n;){var i=D(e,/\{\{/);if(i&&(e.output+=i),e.current===n)break;e.current+=2;var o=D(e,/\}\}/);if(e.current===n)break;if(o){var s="",a=null;(a=o.search(/\[|\.|\(/))!==-1&&(s=o.substring(a),o=o.substring(0,a)),e.output+=t?'" + instance.get("'+o+'")'+s+' + "':'instance.get("'+o+'")'+s}e.current+=2}},D=function(e,t){var r=e.template,n=r.substring(e.current),i=(n.length,n.search(t)),o="";switch(i){case-1:o=n;break;case 0:o="";break;default:o=n.substring(0,i)}return e.current+=o.length,o},M=function(e){var t={input:e,current:0,tokens:[]};return j(t),t.tokens},j=function(e){for(var t=e.input,r=t.length;e.current<r;)"<"===t.charAt(e.current)?"<!--"!==t.substr(e.current,4)?I(e):V(e):K(e)},K=function(e){var t=e.input,r=t.length,n=t.indexOf("<",e.current);if(n===-1)return e.tokens.push({type:"text",value:t.slice(e.current)}),void(e.current=r);n!==e.current&&(e.tokens.push({type:"text",value:t.slice(e.current,n)}),e.current=n)},V=function(e){var t=e.input,r=t.length;e.current+=4;var n=t.indexOf("-->",e.current);if(n===-1)return e.tokens.push({type:"comment",value:t.slice(e.current)}),void(e.current=r);e.tokens.push({type:"comment",value:t.slice(e.current,n)}),e.current=n+3},I=function(e){var t=e.input,r=(t.length,"/"===t.charAt(e.current+1));e.tokens.push({type:"tagStart",close:r}),e.current+=r?2:1;var n=H(e);q(e);var i="/"===t.charAt(e.current);e.tokens.push({type:"tagEnd",close:!1}),e.current+=i?2:1,i&&(e.tokens.push({type:"tagStart",close:!0}),e.tokens.push({type:"tag",value:n}),e.tokens.push({type:"attribute",value:{}}),e.tokens.push({type:"tagEnd",close:!1}))},H=function(e){for(var t=e.input,r=t.length,n=e.current;n<r;){var i=t.charAt(n);if("/"!==i&&">"!==i&&" "!==i)break;n++}for(var o=n;o<r;){var i=t.charAt(o);if("/"===i||">"===i||" "===i)break;o++}var s=t.slice(n,o);return e.tokens.push({type:"tag",value:s}),e.current=o,s},q=function(e){for(var t=e.input,r=t.length,n=e.current,i={},o=t.charAt(n),s=t.charAt(n+1),a=function(){n++,o=t.charAt(n),s=t.charAt(n+1)};n<r&&">"!==o&&("/"!==o||">"!==s);)if(" "!==o){for(var u="",c=!1;"="!==o&&n<r;){if(!(" "!==o&&">"!==o||"/"===o&&">"!==s)){c=!0;break}u+=o,a()}var p={name:u,value:"",meta:{}};if(c)i[u]=p;else{var l=" ";for(a(),"'"===o||'"'===o?(l=o,a()):p.value+=o;(o!==l&&">"!==o||"/"===o&&">"!==s)&&n<r;)p.value+=o,a();if(u.indexOf(":")!==-1){var f=u.split(":");p.name=f[0],p.meta.arg=f[1]}i[u]=p,a()}}else a();e.current=n,e.tokens.push({type:"attribute",value:i})},X=function(e){for(var t={type:"ROOT",children:[]},r={current:0,tokens:e};r.current<e.length;){var n=B(r);n&&t.children.push(n)}return t},F=["area","base","br","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"],J=["svg","animate","circle","clippath","cursor","defs","desc","ellipse","filter","font-face","foreignObject","g","glyph","image","line","marker","mask","missing-glyph","path","pattern","polygon","polyline","rect","switch","symbol","text","textpath","tspan","use","view"],z=function(e,t,r){return{type:e,props:t,children:r}},B=function(e){var t=e.tokens[e.current],r=e.tokens[e.current-1],n=e.tokens[e.current+1],i=e.tokens[e.current+2],o=e.tokens[e.current+3],s=function(o){e.current+=void 0===o?1:o,t=e.tokens[e.current],r=e.tokens[e.current-1],n=e.tokens[e.current+1],i=e.tokens[e.current+2]};if("text"===t.type)return s(),r.value;if("comment"===t.type)return void s();if("tagStart"===t.type&&!t.close&&!o.close){var a=z(n.value,i.value,[]);n.value;if(s(4),J.indexOf(a.type)!==-1&&(a.isSVG=!0),F.indexOf(a.type)!==-1)return a;e.current;if(t){for(;"tagStart"!==t.type||"tagStart"===t.type&&!t.close;){var u=B(e);if(u&&a.children.push(u),s(0),!t)break}s()}return a}s()},Q=function(e){var t=e.props.attrs,i="{attrs: {";if(t){for(var o in t){var s=t[o].name;n[s]&&n[s].beforeGenerate&&n[s].beforeGenerate(t[o].value,t[o].meta,e)}for(var a in t){var u=t[a].name;if(r[u]&&(e.meta.shouldRender=!0),n[u])n[u].afterGenerate&&(e.specialDirectivesAfter||(e.specialDirectivesAfter={}),e.specialDirectivesAfter[a]=t[a]),n[u].duringPropGenerate&&(i+=n[u].duringPropGenerate(t[a].value,t[a].meta,e)),e.meta.shouldRender=!0,delete t[a];else{var c=JSON.stringify(t[a].value),p=T(c,!0);c!==p&&(e.meta.shouldRender=!0),i+='"'+a+'": '+p+", "}}Object.keys(t).length?i=i.slice(0,-2)+"}":i+="}"}var l=e.props.dom;if(l){e.dynamic=!0,i+=", dom: {";for(var f in l)i+='"'+f+'": '+l[f]+", ";i=i.slice(0,-2)+"}"}return i+="}"},U=function(e){if(0===Object.keys(e).length)return"{}";var t="{";for(var r in e)t+='"'+r+'": ['+Y(e[r])+"], ";return t=t.slice(0,-2)+"}"},W=function(e){var t="{";for(var r in e)t+="eventListeners"===r?'"'+r+'": '+U(e[r])+", ":'"'+r+'": '+e[r]+", ";return t=t.slice(0,-2)+"}"},Y=function(e){for(var t="",r=0;r<e.length;r++)t+=e[r]+", ";return t=t.slice(0,-2)},Z=function(e,t){var r='h("'+e.type+'", ';r+=Q(e)+", ";var n=e.children.map(function(t){return ee(t,e)});return e.meta.shouldRender&&t&&(t.meta.shouldRender=!0),r+=W(e.meta),r+=n.length?", ["+Y(n)+"]":", []",r+=")"},ee=function(e,t){var r="";if("string"==typeof e){var i=f(e),o=T(i,!0),s=l();i!==o&&(t&&(t.meta.shouldRender=!0),s.shouldRender=!0),r+='h("#text", '+W(s)+', "'+o+'")'}else{e.meta||(e.meta=l()),e.isSVG&&(e.meta.isSVG=!0),e.props={attrs:e.props};var a=e.props.attrs.name,u="";if("slot"===e.type?(t&&(t.meta.shouldRender=!0),u="instance.$slots['"+(a&&a.value||"default")+"']"):u=Z(e,t),e.specialDirectivesAfter)for(var c in e.specialDirectivesAfter){var p=e.specialDirectivesAfter[c];u=n[p.name].afterGenerate(p.value,p.meta,u,e)}r+=u}return r},te=function(e){var t=e.children[0],r="var instance = this; return "+ee(t);try{return new Function("h",r)}catch(e){return c("Could not create render function"),y}},re=function(e){var t=M(e),r=X(t);return te(r)};return t.prototype.get=function(e){if(this.$observer.dep.target){var t=this.$observer.dep.target;this.$observer.dep.map[e]?this.$observer.dep.map[e].indexOf(t)===-1&&this.$observer.dep.map[e].push(t):this.$observer.dep.map[e]=[t]}return this.$data[e]},t.prototype.set=function(e,t){var r=h(0,this.$data,e,t);this.$observer.notify(r),p(this)},t.prototype.destroy=function(){this.removeEvents(),this.$el=null,this.$destroyed=!0,g(this,"destroyed")},t.prototype.callMethod=function(e,t){t=t||[],this.$methods[e].apply(this,t)},t.prototype.on=function(e,t){this.$events[e]?this.$events[e].push(t):this.$events[e]=[t]},t.prototype.off=function(e,t){var r=this.$events[e].indexOf(t);r!==-1&&this.$events[e].splice(r,1)},t.prototype.removeEvents=function(){for(var e in this.$events)this.$events[e]=[]},t.prototype.emit=function(e,t){if(t=t||{},t.type=e,this.$events["*"])for(var r=0;r<this.$events["*"].length;r++)this.$events["*"][r](t);for(var n=0;n<this.$events[e].length;n++)this.$events[e][n](t)},t.prototype.renderLoop=function(e,t){for(var r=new Array(e.length),n=0;n<e.length;n++)r[n]=t(e[n],n);return r},t.prototype.renderClass=function(e){if("string"==typeof e)return e;var t="";if(Array.isArray(e))for(var r=0;r<e.length;r++)t+=this.renderClass(e[r])+" ";else if("object"==typeof e)for(var n in e)e[n]&&(t+=n+" ");return t=t.slice(0,-1)},t.prototype.mount=function(e){this.$el=document.querySelector(e),this.$destroyed=!1,this.$el.__moon__=this,this.$template=this.$opts.template||this.$el.outerHTML,this.$render===y&&(this.$render=t.compile(this.$template)),this.build(),g(this,"mounted")},t.prototype.render=function(){return this.$render(L)},t.prototype.patch=function(e,t,r){if(e.meta&&e.meta.el)t.type!==e.type?(E(e.meta.el,k(t,this),r),this.$el=t.meta.el,this.$el.__moon__=this):O(e,t,r,this);else if(e instanceof Node){var n=G(e,t,r,this);n!==e&&(this.$el=t.meta.el,this.$el.__moon__=this)}this.$initialRender=!1},t.prototype.build=function(){var e=this.render(),t=null;this.$dom.meta?t=this.$dom:(t=this.$el,this.$dom=e),this.patch(t,e,this.$el.parentNode)},t.prototype.init=function(){u("======= Moon ======="),g(this,"init"),this.$opts.el&&this.mount(this.$opts.el)},t.config={silent:!0,prefix:"m-",keyCodes:function(e){for(var t in e)o[t]="if(event.keyCode !== "+e[t]+") {return;};"}},t.version="0.8.0",t.util={noop:y,error:c,log:u,merge:m,extend:d,h:L},t.use=function(e){e.init(t)},t.compile=function(e){return re(e)},t.nextTick=function(e){setTimeout(e,0)},t.directive=function(e,n){r[t.config.prefix+e]=n},t.component=function(e,r){function n(){t.call(this,r)}var o=this;return r.name?e=r.name:r.name=e,n.prototype=Object.create(o.prototype),n.prototype.constructor=n,n.prototype.init=function(){g(this,"init"),this.$destroyed=!1,this.$props=this.$opts.props||[],this.$template=this.$opts.template,this.$render===y&&(this.$render=t.compile(this.$template))},i[e]={CTor:n,opts:r},n},n[t.config.prefix+"if"]={afterGenerate:function(e,t,r,n){return"("+T(e,!1)+") ? "+r+" : null"}},n[t.config.prefix+"show"]={duringPropGenerate:function(e,t,r){return'"m-show": '+T(e,!1)+", "}},n[t.config.prefix+"for"]={afterGenerate:function(e,t,r,n){var i=e.split(" in "),o=i[0].split(","),s=T(i[1],!1),a=o.join(",");return r.replace(new RegExp('instance\\.get\\("('+o.join("|")+')"\\)',"g"),function(e,t){r=r.replace(new RegExp('instance.get\\("'+t+'"\\)',"g"),t)}),"instance.renderLoop("+s+", function("+a+") { return "+r+"; })"}},n[t.config.prefix+"on"]={beforeGenerate:function(e,t,r){var n=t.arg.split("."),i=n[0],s="event",a=T(e,!1),u=a.split("(");u.length>1&&(a=u.shift(),s=u.join("(").slice(0,-1));var c="";n.shift();for(var p=0;p<n.length;p++)c+=o[n[p]];var l="function(event) {"+c+'instance.callMethod("'+a+'", ['+s+"])}";r.meta.eventListeners[i]?r.meta.eventListeners[i].push(l):r.meta.eventListeners[i]=[l]}},n[t.config.prefix+"model"]={beforeGenerate:function(e,t,r){var n=T(e,!0),i="input",o="value";r.props.attrs.type&&"checkbox"===r.props.attrs.type.value&&(i="change",o="checked");var s='function(event) {instance.set("'+n+'", event.target.'+o+")}";r.meta.eventListeners[i]?r.meta.eventListeners[i].push(s):r.meta.eventListeners[i]=[s];var a=T("{{"+T(e,!1)+"}}",!1);r.props.dom||(r.props.dom={}),r.props.dom[o]=a}},n[t.config.prefix+"literal"]={duringPropGenerate:function(e,t,r){var n=t.arg;return r.props.attrs[n]={value:!0,meta:{}},"class"===n?'"class": instance.renderClass('+T(e,!1)+"), ":'"'+n+'": '+T(e,!1)+", "}},n[t.config.prefix+"html"]={beforeGenerate:function(e,t,r){r.props.dom||(r.props.dom={}),r.props.dom.innerHTML='"'+T(e,!0)+'"'}},n[t.config.prefix+"text"]={beforeGenerate:function(e,t,r){r.children=[e]}},r[t.config.prefix+"show"]=function(e,t,r){e.style.display=t?"":"none"},r[t.config.prefix+"mask"]=function(e,t,r){},t});
\ No newline at end of file
+!function(e,t){"object"==typeof module&&module.exports?module.exports=t():e.Moon=t()}(this,function(){"use strict";function e(e){this.instance=e,this.cache={},this.signals={},this.dep={target:null,map:{}}}function t(t){this.$opts=t||{},this.$id=s++,this.$name=this.$opts.name||"root",this.$data=this.$opts.data||{},this.$render=this.$opts.render||y,this.$hooks=this.$opts.hooks||{},this.$methods=this.$opts.methods||{},this.$events={},this.$dom={},this.$observer=new e(this),this.$destroyed=!1,this.$initialRender=!0,this.$queued=!1,this.$opts.computed&&a(this,this.$opts.computed),this.init()}var r={},n={},i={},o={stop:"event.stopPropagation();",prevent:"event.preventDefault();",ctrl:"if(!event.ctrlKey) {return;};",shift:"if(!event.shiftKey) {return;};",alt:"if(!event.altKey) {return;};",enter:"if(event.keyCode !== 13) {return;};"},s=0,a=function(e,t){for(var r in t)!function(r){e.$observer.observe(r);var n={get:function(){var n=null;return e.$observer.cache[r]?n=e.$observer.cache[r]:(e.$observer.dep.target=r,n=t[r].get.call(e),e.$observer.dep.target=null,e.$observer.cache[r]=n),n}};t[r].set&&(n.set=function(n){return t[r].set.call(e,n)}),Object.defineProperty(e.$data,r,n)}(r)};e.prototype.observe=function(e){var t=this;this.signals[e]=function(){t.cache[e]=null}},e.prototype.notify=function(e){if(this.dep.map[e])for(var t=0;t<this.dep.map[e].length;t++)this.notify(this.dep.map[e][t]);this.signals[e]&&this.signals[e]()};var u=function(e){t.config.silent||console.log(e)},c=function(e){t.config.silent||console.error("[Moon] ERR: "+e)},p=function(e){e.$queued||e.$destroyed||(e.$queued=!0,setTimeout(function(){e.build(),g(e,"updated"),e.$queued=!1},0))},l=function(){return{shouldRender:!1,eventListeners:{}}},f=function(e){return e.replace(/\\/g,"\\\\").replace(/"/g,'\\"').replace(/\n/g,"\\n")},h=function(e,t,r,n){var i=null;r.replace(/\[(\w+)\]/g,function(e,t){r=r.replace(e,"."+t)});var o=r.split(".");for(i=0;i<o.length-1;i++){t=t[o[i]]}return t[o[i]]=n,o[0]},v=function(e){var t={};if(!e)return t;t.default=[];for(var r=0;r<e.length;r++){var n=e[r],i=n.props.attrs;i.slot?(t[i.slot]?t[i.slot].push(n):t[i.slot]=[n],delete i.slot):t.default.push(n)}return t},d=function(e,t){for(var r in t)e[r]=t[r];return e},m=function(e,t){var r={};for(var n in e)r[n]=e[n];for(var n in t)r[n]=t[n];return r},g=function(e,t){var r=e.$hooks[t];r&&r.call(e)},y=function(){},$=function(e){for(var t={},r=e.attributes,n=r.length;n--;)t[r[n].name]=r[n].value;return t},b=function(e,t,r){var n=t.meta.eventListeners;for(var i in n)for(var o=0;o<n[i].length;o++){var s=n[i][o];e.addEventListener(i,s)}},k=function(e,t){var r=null;if("#text"===e.type)r=document.createTextNode(e.val);else{if(r=e.meta.isSVG?document.createElementNS("http://www.w3.org/2000/svg",e.type):document.createElement(e.type),1===e.children.length&&"#text"===e.children[0].type)r.textContent=e.children[0].val,e.children[0].meta.el=r.firstChild;else for(var n=0;n<e.children.length;n++){var i=e.children[n],o=k(e.children[n],t);r.appendChild(o),i.meta.component&&P(o,i,i.meta.component)}b(r,e)}return S(r,{},e,e.props.attrs),e.meta.el=r,r},x=function(e,t,r){r.appendChild(e),t.meta.component&&P(e,t,t.meta.component)},_=function(e,t){e.__moon__&&e.__moon__.destroy(),t.removeChild(e)},E=function(e,t,r,n){e.__moon__&&e.__moon__.destroy(),n.replaceChild(t,e),r.meta.component&&P(t,r,r.meta.component)},A={SKIP:0,APPEND:1,REMOVE:2,REPLACE:3,TEXT:4,CHILDREN:5},C=function(e,t,r,n,i){return{type:e,val:t,props:r,children:i,meta:n||l()}},R=function(e,t,r){var n=r.opts.data||{};if(r.opts.props)for(var i=0;i<r.opts.props.length;i++){var o=r.opts.props[i];n[o]=e.attrs[o]}return r.opts.render(L,{data:n,slots:v(t)})},L=function(e,t,r,n){if("#text"===e)return C("#text",r,{attrs:{}},t,[]);if(i[e]){if(i[e].opts.functional)return R(t,n,i[e]);r.component=i[e]}return C(e,"",t,r,n)},P=function(e,t,r){for(var n=new r.CTor,i=0;i<n.$props.length;i++){var o=n.$props[i];n.$data[o]=t.props.attrs[o]}return n.$slots=v(t.children),n.$el=e,n.build(),g(n,"mounted"),t.meta.el=n.$el,n.$el},S=function(e,t,n){var i=n.props.attrs,o=n.meta.isSVG;if(i)for(var s in i){var a=i[s],u=t[s];null!=u&&a===u||(o?e.setAttributeNS(null,s,a):e.setAttribute(s,a))}if(t)for(var c in t){var a=i[c],u=t[c];(null==a||r[c])&&(r[c]&&r[c](e,a,n),o?e.removeAttributeNS(null,c):e.removeAttribute(c))}if(n.props.dom)for(var p in n.props.dom){var l=n.props.dom[p];e[p]!==l&&(e[p]=l)}},w=function(e,t){if(e.__moon__){for(var r=e.__moon__,n=!1,i=0;i<r.$props.length;i++){var o=r.$props[i];r.$data[o]!==t.props.attrs[o]&&(r.$data[o]=t.props.attrs[o],n=!0)}t.children&&(r.$slots=v(t.children),n=!0),n&&r.build()}else P(e,t,t.meta.component)},G=function(e,t,r,n){var i=e?e.nodeName.toLowerCase():null;if(e){if(t){if(i!==t.type){var o=k(t,n);return E(e,o,t,r),o}if("#text"===t.type)return e&&"#text"===i?(e.textContent!==t.val&&(e.textContent=t.val),t.meta.el=e):E(e,k(t,n),t,r),e;if(t.meta.el=e,t.meta.component)return w(e,t),e;if(S(e,$(e),t),b(e,t),t.props.dom&&t.props.dom.innerHTML)return e;for(var s=0,a=e.firstChild,u=t.children[s];u||a;)G(a,u,e,n),u=t.children[++s],a=a?a.nextSibling:null;return e}return _(e,r),null}var o=k(t,n);return x(o,t,r),o},O=function(e,t,r,n){if(e===t)return A.SKIP;if(e){if(t){if(e.type!==t.type)return E(e.meta.el,k(t,n),t,r),A.REPLACE;if(t.meta.shouldRender&&"#text"===t.type){var i=e.meta.el;return"#text"===e.type?(t.val!==e.val&&(i.textContent=t.val),A.TEXT):(E(i,k(t,n),t,r),A.REPLACE)}if(t.meta.shouldRender){var o=e.meta.el;if(t.meta.component)return w(o,t),A.SKIP;if(S(o,e.props.attrs,t),e.props.attrs=t.props.attrs,t.props.dom&&t.props.dom.innerHTML)return A.SKIP;var s=t.children.length,a=e.children.length;if(0===s){if(0!==a)for(var u=null;u=o.firstChild;)_(u,o)}else for(var c=s>a?s:a,p=0;p<c;p++){var l=e.children[p],f=t.children[p],h=O(l,f,o,n);switch(h){case A.APPEND:e.children[a++]=f;break;case A.REMOVE:e.children.splice(p,1),a--;break;case A.REPLACE:e.children[p]=t.children[p];break;case A.TEXT:l.val=f.val}}return A.CHILDREN}return t.meta.el=e.meta.el,A.SKIP}return _(e.meta.el,r),A.REMOVE}return x(k(t,n),t,r),A.APPEND},T=function(e,t){var r={current:0,template:e,output:""};return N(r,t),r.output},N=function(e,t){for(var r=e.template,n=r.length;e.current<n;){var i=D(e,/\{\{/);if(i&&(e.output+=i),e.current===n)break;e.current+=2;var o=D(e,/\}\}/);if(e.current===n)break;if(o){var s="",a=null;(a=o.search(/\[|\.|\(/))!==-1&&(s=o.substring(a),o=o.substring(0,a)),e.output+=t?'" + instance.get("'+o+'")'+s+' + "':'instance.get("'+o+'")'+s}e.current+=2}},D=function(e,t){var r=e.template,n=r.substring(e.current),i=(n.length,n.search(t)),o="";switch(i){case-1:o=n;break;case 0:o="";break;default:o=n.substring(0,i)}return e.current+=o.length,o},M=function(e){var t={input:e,current:0,tokens:[]};return j(t),t.tokens},j=function(e){for(var t=e.input,r=t.length;e.current<r;)"<"===t.charAt(e.current)?"<!--"!==t.substr(e.current,4)?I(e):V(e):K(e)},K=function(e){var t=e.input,r=t.length,n=t.indexOf("<",e.current);if(n===-1)return e.tokens.push({type:"text",value:t.slice(e.current)}),void(e.current=r);n!==e.current&&(e.tokens.push({type:"text",value:t.slice(e.current,n)}),e.current=n)},V=function(e){var t=e.input,r=t.length;e.current+=4;var n=t.indexOf("-->",e.current);if(n===-1)return e.tokens.push({type:"comment",value:t.slice(e.current)}),void(e.current=r);e.tokens.push({type:"comment",value:t.slice(e.current,n)}),e.current=n+3},I=function(e){var t=e.input,r=(t.length,"/"===t.charAt(e.current+1));e.tokens.push({type:"tagStart",close:r}),e.current+=r?2:1;var n=H(e);q(e);var i="/"===t.charAt(e.current);e.tokens.push({type:"tagEnd",close:!1}),e.current+=i?2:1,i&&(e.tokens.push({type:"tagStart",close:!0}),e.tokens.push({type:"tag",value:n}),e.tokens.push({type:"attribute",value:{}}),e.tokens.push({type:"tagEnd",close:!1}))},H=function(e){for(var t=e.input,r=t.length,n=e.current;n<r;){var i=t.charAt(n);if("/"!==i&&">"!==i&&" "!==i)break;n++}for(var o=n;o<r;){var i=t.charAt(o);if("/"===i||">"===i||" "===i)break;o++}var s=t.slice(n,o);return e.tokens.push({type:"tag",value:s}),e.current=o,s},q=function(e){for(var t=e.input,r=t.length,n=e.current,i={},o=t.charAt(n),s=t.charAt(n+1),a=function(){n++,o=t.charAt(n),s=t.charAt(n+1)};n<r&&">"!==o&&("/"!==o||">"!==s);)if(" "!==o){for(var u="",c=!1;"="!==o&&n<r;){if(!(" "!==o&&">"!==o||"/"===o&&">"!==s)){c=!0;break}u+=o,a()}var p={name:u,value:"",meta:{}};if(c)i[u]=p;else{var l=" ";for(a(),"'"===o||'"'===o?(l=o,a()):p.value+=o;(o!==l&&">"!==o||"/"===o&&">"!==s)&&n<r;)p.value+=o,a();if(u.indexOf(":")!==-1){var f=u.split(":");p.name=f[0],p.meta.arg=f[1]}i[u]=p,a()}}else a();e.current=n,e.tokens.push({type:"attribute",value:i})},X=function(e){for(var t={type:"ROOT",children:[]},r={current:0,tokens:e};r.current<e.length;){var n=B(r);n&&t.children.push(n)}return t},F=["area","base","br","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"],J=["svg","animate","circle","clippath","cursor","defs","desc","ellipse","filter","font-face","foreignObject","g","glyph","image","line","marker","mask","missing-glyph","path","pattern","polygon","polyline","rect","switch","symbol","text","textpath","tspan","use","view"],z=function(e,t,r){return{type:e,props:t,children:r}},B=function(e){var t=e.tokens[e.current],r=e.tokens[e.current-1],n=e.tokens[e.current+1],i=e.tokens[e.current+2],o=e.tokens[e.current+3],s=function(o){e.current+=void 0===o?1:o,t=e.tokens[e.current],r=e.tokens[e.current-1],n=e.tokens[e.current+1],i=e.tokens[e.current+2]};if("text"===t.type)return s(),r.value;if("comment"===t.type)return void s();if("tagStart"===t.type&&!t.close&&!o.close){var a=z(n.value,i.value,[]);n.value;if(s(4),J.indexOf(a.type)!==-1&&(a.isSVG=!0),F.indexOf(a.type)!==-1)return a;e.current;if(t){for(;"tagStart"!==t.type||"tagStart"===t.type&&!t.close;){var u=B(e);if(u&&a.children.push(u),s(0),!t)break}s()}return a}s()},Q=function(e,t){var i=e.props.attrs,o="{attrs: {";if(i){for(var s in i){var a=i[s].name;n[a]&&n[a].beforeGenerate&&n[a].beforeGenerate(i[s].value,i[s].meta,e,t)}for(var u in i){var c=i[u].name;if(r[c]&&(e.meta.shouldRender=!0),n[c])n[c].afterGenerate&&(e.specialDirectivesAfter||(e.specialDirectivesAfter={}),e.specialDirectivesAfter[u]=i[u]),n[c].duringPropGenerate&&(o+=n[c].duringPropGenerate(i[u].value,i[u].meta,e)),e.meta.shouldRender=!0,delete i[u];else{var p=JSON.stringify(i[u].value),l=T(p,!0);p!==l&&(e.meta.shouldRender=!0),o+='"'+u+'": '+l+", "}}Object.keys(i).length?o=o.slice(0,-2)+"}":o+="}"}var f=e.props.dom;if(f){e.dynamic=!0,o+=", dom: {";for(var h in f)o+='"'+h+'": '+f[h]+", ";o=o.slice(0,-2)+"}"}return o+="}"},U=function(e){if(0===Object.keys(e).length)return"{}";var t="{";for(var r in e)t+='"'+r+'": ['+Y(e[r])+"], ";return t=t.slice(0,-2)+"}"},W=function(e){var t="{";for(var r in e)t+="eventListeners"===r?'"'+r+'": '+U(e[r])+", ":'"'+r+'": '+e[r]+", ";return t=t.slice(0,-2)+"}"},Y=function(e){for(var t="",r=0;r<e.length;r++)t+=e[r]+", ";return t=t.slice(0,-2)},Z=function(e,t){var r='h("'+e.type+'", ';r+=Q(e,t)+", ";var n=e.children.map(function(t){return ee(t,e)});return e.meta.shouldRender&&t&&(t.meta.shouldRender=!0),r+=W(e.meta),n.length?e.deep?r+=", [].concat.apply([], ["+Y(n)+"])":r+=", ["+Y(n)+"]":r+=", []",r+=")"},ee=function(e,t){var r="";if("string"==typeof e){var i=f(e),o=T(i,!0),s=l();i!==o&&(t&&(t.meta.shouldRender=!0),s.shouldRender=!0),r+='h("#text", '+W(s)+', "'+o+'")'}else{e.meta||(e.meta=l()),e.isSVG&&(e.meta.isSVG=!0),e.props={attrs:e.props};var a=e.props.attrs.name,u="";if("slot"===e.type?(t&&(t.meta.shouldRender=!0,t.deep=!0),u="instance.$slots['"+(a&&a.value||"default")+"']"):u=Z(e,t),e.specialDirectivesAfter)for(var c in e.specialDirectivesAfter){var p=e.specialDirectivesAfter[c];u=n[p.name].afterGenerate(p.value,p.meta,u,e)}r+=u}return r},te=function(e){var t=e.children[0],r="var instance = this; return "+ee(t);try{return new Function("h",r)}catch(e){return c("Could not create render function"),y}},re=function(e){var t=M(e),r=X(t);return te(r)};return t.prototype.get=function(e){if(this.$observer.dep.target){var t=this.$observer.dep.target;this.$observer.dep.map[e]?this.$observer.dep.map[e].indexOf(t)===-1&&this.$observer.dep.map[e].push(t):this.$observer.dep.map[e]=[t]}return this.$data[e]},t.prototype.set=function(e,t){var r=h(0,this.$data,e,t);this.$observer.notify(r),p(this)},t.prototype.destroy=function(){this.removeEvents(),this.$el=null,this.$destroyed=!0,g(this,"destroyed")},t.prototype.callMethod=function(e,t){t=t||[],this.$methods[e].apply(this,t)},t.prototype.on=function(e,t){this.$events[e]?this.$events[e].push(t):this.$events[e]=[t]},t.prototype.off=function(e,t){var r=this.$events[e].indexOf(t);r!==-1&&this.$events[e].splice(r,1)},t.prototype.removeEvents=function(){for(var e in this.$events)this.$events[e]=[]},t.prototype.emit=function(e,t){if(t=t||{},t.type=e,this.$events["*"])for(var r=0;r<this.$events["*"].length;r++)this.$events["*"][r](t);for(var n=0;n<this.$events[e].length;n++)this.$events[e][n](t)},t.prototype.renderLoop=function(e,t){for(var r=new Array(e.length),n=0;n<e.length;n++)r[n]=t(e[n],n);return r},t.prototype.renderClass=function(e){if("string"==typeof e)return e;var t="";if(Array.isArray(e))for(var r=0;r<e.length;r++)t+=this.renderClass(e[r])+" ";else if("object"==typeof e)for(var n in e)e[n]&&(t+=n+" ");return t=t.slice(0,-1)},t.prototype.mount=function(e){this.$el=document.querySelector(e),this.$destroyed=!1,this.$el.__moon__=this,this.$template=this.$opts.template||this.$el.outerHTML,this.$render===y&&(this.$render=t.compile(this.$template)),this.build(),g(this,"mounted")},t.prototype.render=function(){return this.$render(L)},t.prototype.patch=function(e,t,r){if(e.meta&&e.meta.el)t.type!==e.type?(E(e.meta.el,k(t,this),r),this.$el=t.meta.el,this.$el.__moon__=this):O(e,t,r,this);else if(e instanceof Node){var n=G(e,t,r,this);n!==e&&(this.$el=t.meta.el,this.$el.__moon__=this)}this.$initialRender=!1},t.prototype.build=function(){var e=this.render(),t=null;this.$dom.meta?t=this.$dom:(t=this.$el,this.$dom=e),this.patch(t,e,this.$el.parentNode)},t.prototype.init=function(){u("======= Moon ======="),g(this,"init"),this.$opts.el&&this.mount(this.$opts.el)},t.config={silent:!0,prefix:"m-",keyCodes:function(e){for(var t in e)o[t]="if(event.keyCode !== "+e[t]+") {return;};"}},t.version="0.8.0",t.util={noop:y,error:c,log:u,merge:m,extend:d,h:L},t.use=function(e){e.init(t)},t.compile=function(e){return re(e)},t.nextTick=function(e){setTimeout(e,0)},t.directive=function(e,n){r[t.config.prefix+e]=n},t.component=function(e,r){function n(){t.call(this,r)}var o=this;return r.name?e=r.name:r.name=e,n.prototype=Object.create(o.prototype),n.prototype.constructor=n,n.prototype.init=function(){g(this,"init"),this.$destroyed=!1,this.$props=this.$opts.props||[],this.$template=this.$opts.template,this.$render===y&&(this.$render=t.compile(this.$template))},i[e]={CTor:n,opts:r},n},n[t.config.prefix+"if"]={afterGenerate:function(e,t,r,n){return"("+T(e,!1)+") ? "+r+" : null"}},n[t.config.prefix+"show"]={duringPropGenerate:function(e,t,r){return'"m-show": '+T(e,!1)+", "}},n[t.config.prefix+"for"]={beforeGenerate:function(e,t,r,n){n.deep=!0},afterGenerate:function(e,t,r,n){var i=e.split(" in "),o=i[0].split(","),s=T(i[1],!1),a=o.join(",");return r.replace(new RegExp('instance\\.get\\("('+o.join("|")+')"\\)',"g"),function(e,t){r=r.replace(new RegExp('instance.get\\("'+t+'"\\)',"g"),t)}),"instance.renderLoop("+s+", function("+a+") { return "+r+"; })"}},n[t.config.prefix+"on"]={beforeGenerate:function(e,t,r){var n=t.arg.split("."),i=n[0],s="event",a=T(e,!1),u=a.split("(");u.length>1&&(a=u.shift(),s=u.join("(").slice(0,-1));var c="";n.shift();for(var p=0;p<n.length;p++)c+=o[n[p]];var l="function(event) {"+c+'instance.callMethod("'+a+'", ['+s+"])}";r.meta.eventListeners[i]?r.meta.eventListeners[i].push(l):r.meta.eventListeners[i]=[l]}},n[t.config.prefix+"model"]={beforeGenerate:function(e,t,r){var n=T(e,!0),i="input",o="value";r.props.attrs.type&&"checkbox"===r.props.attrs.type.value&&(i="change",o="checked");var s='function(event) {instance.set("'+n+'", event.target.'+o+")}";r.meta.eventListeners[i]?r.meta.eventListeners[i].push(s):r.meta.eventListeners[i]=[s];var a=T("{{"+T(e,!1)+"}}",!1);r.props.dom||(r.props.dom={}),r.props.dom[o]=a}},n[t.config.prefix+"literal"]={duringPropGenerate:function(e,t,r){var n=t.arg;return r.props.attrs[n]={value:!0,meta:{}},"class"===n?'"class": instance.renderClass('+T(e,!1)+"), ":'"'+n+'": '+T(e,!1)+", "}},n[t.config.prefix+"html"]={beforeGenerate:function(e,t,r){r.props.dom||(r.props.dom={}),r.props.dom.innerHTML='"'+T(e,!0)+'"'}},n[t.config.prefix+"text"]={beforeGenerate:function(e,t,r){r.children=[e]}},r[t.config.prefix+"show"]=function(e,t,r){e.style.display=t?"":"none"},r[t.config.prefix+"mask"]=function(e,t,r){},t});
\ No newline at end of file
diff --git a/src/compiler/generator.js b/src/compiler/generator.js
index 95794142..b94c7ccc 100644
--- a/src/compiler/generator.js
+++ b/src/compiler/generator.js
@@ -1,9 +1,10 @@
 /**
  * Generates Code for Props
  * @param {Object} vnode
+ * @param {Object} parentVNode
  * @return {String} generated code
  */
-const generateProps = function(vnode) {
+const generateProps = function(vnode, parentVNode) {
 	let attrs = vnode.props.attrs;
 	let generatedObject = "{attrs: {";
 
@@ -12,7 +13,7 @@ const generateProps = function(vnode) {
 		for(let beforeAttr in attrs) {
 			const beforeAttrName = attrs[beforeAttr].name;
 			if(specialDirectives[beforeAttrName] && specialDirectives[beforeAttrName].beforeGenerate) {
-				specialDirectives[beforeAttrName].beforeGenerate(attrs[beforeAttr].value, attrs[beforeAttr].meta, vnode);
+				specialDirectives[beforeAttrName].beforeGenerate(attrs[beforeAttr].value, attrs[beforeAttr].meta, vnode, parentVNode);
 			}
 		}
 
@@ -148,7 +149,7 @@ const createCall = function(vnode, parentVNode) {
 	let call = `h("${vnode.type}", `;
 
 	// Generate Code for Props
-	call += generateProps(vnode) + ", ";
+	call += generateProps(vnode, parentVNode) + ", ";
 
 	// Generate code for children recursively here (in case modified by special directives)
 	const children = vnode.children.map(function(item) {
@@ -164,7 +165,15 @@ const createCall = function(vnode, parentVNode) {
 	call += generateMeta(vnode.meta);
 
 	// Generate Code for Children
-	call += children.length ? ", [" + generateArray(children) + "]" : ", []";
+	if(children.length) {
+		if(vnode.deep) {
+			call += `, [].concat.apply([], [${generateArray(children)}])`
+		} else {
+			call += `, [${generateArray(children)}]`;
+		}
+	} else {
+		call += ", []";
+	}
 
 	// Close Call
 	call += ")";
@@ -212,6 +221,7 @@ const generateEl = function(el, parentEl) {
 		if(el.type === "slot") {
 			if(parentEl) {
 				parentEl.meta.shouldRender = true;
+				parentEl.deep = true;
 			}
 			compiledCode = `instance.$slots['${(slotNameAttr && slotNameAttr.value) || ("default")}']`;
 		} else {
diff --git a/src/directives/default.js b/src/directives/default.js
index f6d09113..19827517 100644
--- a/src/directives/default.js
+++ b/src/directives/default.js
@@ -13,17 +13,27 @@ specialDirectives[Moon.config.prefix + "show"] = {
 }
 
 specialDirectives[Moon.config.prefix + "for"] = {
+  beforeGenerate: function(value, meta, vnode, parentVNode) {
+    // Setup Deep Flag to Flatten Array
+    parentVNode.deep = true;
+  },
   afterGenerate: function(value, meta, code, vnode) {
+    // Get Parts
     const parts = value.split(" in ");
+    // Aliases
     const aliases = parts[0].split(",");
-
+    // The Iteratable
     const iteratable = compileTemplate(parts[1], false);
 
+    // Get any parameters
     const params = aliases.join(",");
+
+    // Change any references to the parameters in children
     code.replace(new RegExp(`instance\\.get\\("(${aliases.join("|")})"\\)`, 'g'), function(match, alias) {
       code = code.replace(new RegExp(`instance.get\\("${alias}"\\)`, "g"), alias);
     });
 
+    // Use the renderLoop runtime helper
     return `instance.renderLoop(${iteratable}, function(${params}) { return ${code}; })`;
   }
 }
diff --git a/src/util/vdom.js b/src/util/vdom.js
index 56ebe7b2..d0777eeb 100644
--- a/src/util/vdom.js
+++ b/src/util/vdom.js
@@ -59,7 +59,7 @@ const createFunctionalComponent = function(props, children, functionalComponent)
  * @param {Object|String} children
  * @return {Object} Object usable in Virtual DOM (VNode)
  */
-const h = function(tag, attrs, meta, nestedChildren) {
+const h = function(tag, attrs, meta, children) {
   // Text Node
   if(tag === "#text") {
     // Tag => #text
@@ -68,17 +68,6 @@ const h = function(tag, attrs, meta, nestedChildren) {
     return createElement("#text", meta, {attrs:{}}, attrs, []);
   }
 
-  // Setup Children
-  let children = [];
-  for(var i = 0; i < nestedChildren.length; i++) {
-    const child = nestedChildren[i];
-    if(Array.isArray(child)) {
-      children = children.concat(child);
-    } else {
-      children.push(child);
-    }
-  }
-
   // It's a Component
   if(components[tag]) {
     // Functional component
diff --git a/test/js/test.js b/test/js/test.js
index 8ce2423d..25a45fb7 100644
--- a/test/js/test.js
+++ b/test/js/test.js
@@ -601,7 +601,7 @@ describe('Functional Component', function() {
     Moon.component('slot-functional-component', {
       functional: true,
       render: function(h, ctx) {
-        return h("div", functionalComponentDivSlotProps, {shouldRender: true, eventListeners: {}}, [h("h1", {}, {shouldRender: true, eventListeners: {}}, [ctx.slots['default']]), h("h1", {}, {shouldRender: true, eventListeners: {}}, [ctx.slots.named])]);
+        return h("div", functionalComponentDivSlotProps, {shouldRender: true, eventListeners: {}}, [h("h1", {}, {shouldRender: true, eventListeners: {}}, ctx.slots['default']), h("h1", {}, {shouldRender: true, eventListeners: {}}, ctx.slots.named)]);
       }
     });
     var functionalApp = new Moon({