diff --git a/dist/moon.js b/dist/moon.js
index a77cb91d..cf7c5fef 100644
--- a/dist/moon.js
+++ b/dist/moon.js
@@ -1412,7 +1412,8 @@
         attrs: props
       };
     
-      var directives = {};
+      var hasDirectives = false;
+      var directiveProps = [];
     
       var hasSpecialDirectivesAfter = false;
       var specialDirectivesAfter = {};
@@ -1446,15 +1447,22 @@
     
             hasSpecialDirectivesAfter = true;
           }
-        } else if (_name[0] === "m" && _name[1] === "-") {} else {
+    
+          if ((duringPropGenerate = specialDirective.duringPropGenerate) !== undefined) {
+            duringPropGenerate(_prop, node, state);
+          }
+    
+          node.meta.shouldRender = true;
+        } else if (_name[0] === "m" && _name[1] === "-") {
+          directiveProps.push(_prop);
+          hasDirectives = true;
+          node.meta.shouldRender = true;
+        } else {
           var _value2 = _prop.value;
           var compiled = compileTemplate(_value2, state.dependencies, true);
     
           if (_value2 !== compiled) {
             node.meta.shouldRender = true;
-            if (parent !== undefined) {
-              parent.meta.shouldRender = true;
-            }
           }
     
           if (state.hasAttrs === false) {
@@ -1466,16 +1474,34 @@
       }
     
       if (state.hasAttrs === true) {
-        propsCode = propsCode.substring(0, propsCode.length - 2) + "}}, ";
+        propsCode = propsCode.substring(0, propsCode.length - 2) + "}";
         state.hasAttrs = false;
       } else {
-        propsCode += "}}, ";
+        propsCode += "}";
+      }
+    
+      if (hasDirectives === true) {
+        propsCode += ", directives: {";
+    
+        var directiveProp = null;
+        var directivePropValue = null;
+        for (var i = 0; i < directiveProps.length; i++) {
+          directiveProp = directiveProps[i];
+          directivePropValue = directiveProp.value;
+    
+          compileTemplateExpression(directivePropValue, state.dependencies);
+          propsCode += '"' + directiveProp.name + '": ' + directivePropValue;
+        }
+    
+        propsCode += "}";
       }
     
       if (hasSpecialDirectivesAfter === true) {
         state.specialDirectivesAfter = specialDirectivesAfter;
       }
     
+      propsCode += "}, ";
+    
       return propsCode;
     };
     
@@ -1487,13 +1513,13 @@
         eventListenersCode += '"' + type + '": [';
     
         for (var i = 0; i < handlers.length; i++) {
-          eventListenersCode += handlers[i];
+          eventListenersCode += handlers[i] + ', ';
         }
     
         eventListenersCode = eventListenersCode.substring(0, eventListenersCode.length - 2) + "], ";
       }
     
-      eventListenersCode = eventListenersCode.substring(0, eventListenersCode.length - 2) + "}";
+      eventListenersCode = eventListenersCode.substring(0, eventListenersCode.length - 2) + "}, ";
       return eventListenersCode;
     };
     
@@ -1531,7 +1557,6 @@
     
       var propsCode = generateProps(node, parent, state);
       var specialDirectivesAfter = state.specialDirectivesAfter;
-      state.specialDirectivesAfter = null;
     
       var children = node.children;
       var childrenLength = children.length;
@@ -1546,6 +1571,10 @@
         childrenCode = childrenCode.substring(0, childrenCode.length - 2) + "]";
       }
     
+      if (node.deep === true) {
+        childrenCode = '[].concat.apply([], ' + childrenCode + ')';
+      }
+    
       if (node.meta.shouldRender === true && parent !== undefined) {
         parent.meta.shouldRender = true;
       }
@@ -1595,6 +1624,7 @@
         return noop;
       }
     };
+    
     var compile = function (template) {
       var tokens = lex(template);
       var ast = parse(tokens);
@@ -2277,10 +2307,15 @@
     };
     
     specialDirectives["m-literal"] = {
-      duringPropGenerate: function (value, meta, vnode, dependencies) {
-        var prop = meta.arg;
-        compileTemplateExpression(value, dependencies);
-        if (prop === "class") {
+      duringPropGenerate: function (prop, vnode, state) {
+        var propName = prop.meta.arg;
+        compileTemplateExpression(prop.value, state.dependencies);
+    
+        if (state.hasAttrs === false) {
+          state.hasAttrs = true;
+        }
+    
+        if (propName === "class") {
           // Detected class, use runtime class render helper
           return '"class": Moon.renderClass(' + value + '), ';
         } else {
diff --git a/dist/moon.min.js b/dist/moon.min.js
index e0bc9c3c..6067ac97 100644
--- a/dist/moon.min.js
+++ b/dist/moon.min.js
@@ -4,4 +4,4 @@
  * Released under the MIT License
  * http://moonjs.ga
  */
-!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.setters={},this.clear={},this.target=null,this.map={}}function t(t){void 0===t&&(t={}),this.$options=t,k(this,"$name",t.name,"root");var n=t.data;this.$data=void 0===n?{}:"function"==typeof n?n():n,k(this,"$render",t.render,A),k(this,"$hooks",t.hooks,{});var r=t.methods;void 0!==r&&s(this,r),this.$events={},this.$dom={},this.$observer=new e(this),this.$destroyed=!0,this.$queued=!1;var i=t.computed;void 0!==i&&l(this,i),this.init()}var n={},r={},i={},o={stop:"event.stopPropagation();",prevent:"event.preventDefault();",ctrl:"if(event.ctrlKey === false) {return null;};",shift:"if(event.shiftKey === false) {return null;};",alt:"if(event.altKey === false) {return null;};",enter:"if(event.keyCode !== 13) {return null;};"},a={},s=function(e,t){for(var n in t)!function(t,n){e.$data[t]=function(){return n.apply(e,arguments)}}(n,t[n])},l=function(e,t){for(var n in t)!function(n){var r=e.$observer;r.observe(n),Object.defineProperty(e.$data,n,{get:function(){var i=null;return void 0===r.cache[n]?(r.target=n,i=t[n].get.call(e),r.target=null,r.cache[n]=i):i=r.cache[n],i},set:A});var i=null;void 0!==(i=t[n].set)&&(r.setters[n]=i)}(n)};e.prototype.observe=function(e){var t=this;this.clear[e]=function(){t.cache[e]=void 0}},e.prototype.notify=function(e,t){var n=null;if(void 0!==(n=this.map[e]))for(var r=0;r<n.length;r++)this.notify(n[r]);var i=null;void 0!==(i=this.clear[e])&&i()};var u=/\[(\w+)\]/g,c=/\n/g,v=/"/g,f=/\\/g,d=function(e){!1===t.config.silent&&console.log(e)},p=function(e){!1===t.config.silent&&console.error("[Moon] ERR: "+e)},h=function(e){!1===e.$queued&&!1===e.$destroyed&&(e.$queued=!0,setTimeout(function(){e.build(),g(e,"updated"),e.$queued=!1},0))},m=function(e,t,n,r){n=n.replace(u,".$1");for(var i=n.split("."),o=0;o<i.length-1;o++){t=t[i[o]]}return t[i[o]]=r,i[0]},g=function(e,t){var n=e.$hooks[t];void 0!==n&&n.call(e)},y=function(e){var t={};if(t.default=[],0===e.length)return t;for(var n=0;n<e.length;n++){var r=e[n],i=r.props.attrs,o="",a=null;void 0!==(o=i.slot)?(a=t[o],void 0===a?t[o]=[r]:a.push(r),delete i.slot):t.default.push(r)}return t},$=function(e,t){for(var n in t)e[n]=t[n];return e},b=function(e,t){var n={},r=null;for(r in e)n[r]=e[r];for(r in t)n[r]=t[r];return n},k=function(e,t,n,r){e[t]=void 0===n?r:n},x=function(e){return e.replace(f,"\\\\").replace(v,'\\"').replace(c,"\\n")},A=function(){},E=function(e){for(var t={},n=e.attributes,r=n.length;r--;)t[n[r].name]=n[r].value;return t},_=function(e,t){for(var n in t)!function(n){var r=function(e){for(var t=r.handlers,n=0;n<t.length;n++)t[n](e)};r.handlers=t[n],t[n]=r,e.addEventListener(n,r)}(n)},w=function(e){var t=null;if("#text"===e.type)t=document.createTextNode(e.val);else{if(t=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)t.textContent=e.children[0].val,e.children[0].meta.el=t.firstChild;else for(var n=0;n<e.children.length;n++){var r=e.children[n];C(w(r),r,t)}var i=null;void 0!==(i=e.meta.eventListeners)&&_(t,i)}return j(t,{},e,e.props.attrs),e.meta.el=t,t},C=function(e,t,n){n.appendChild(e);var r=null;void 0!==(r=t.meta.component)&&N(e,t,r)},L=function(e,t){var n=null;void 0!==(n=e.__moon__)&&n.destroy(),t.removeChild(e)},R=function(e,t,n,r){var i=null;void 0!==(i=e.__moon__)&&i.destroy(),r.replaceChild(t,e);var o=null;void 0!==(o=n.meta.component)&&N(t,n,o)},O={SKIP:0,APPEND:1,REMOVE:2,REPLACE:3,TEXT:4,CHILDREN:5},P=function(){return{shouldRender:!1}},M=function(e,t,n){var r=n.meta,i=r.eventListeners;void 0===i&&(i=r.eventListeners={});var o=i[e];void 0===o?i[e]=[t]:o.push(t)},T=function(e,t,n,r,i){return{type:e,val:t,props:n,children:i,meta:r||P()}},S=function(e,t,n){var r=n.options,i=e.attrs,o=r.data;void 0===o&&(o={});var a=r.props;if(void 0===a)o=i;else for(var s=0;s<a.length;s++){var l=a[s];o[l]=i[l]}return n.options.render(G,{data:o,slots:y(t)})},G=function(e,t,n,r){var o=null;if("#text"===e)return T("#text",n,{attrs:{}},t,[]);if(void 0!==(o=i[e])){if(!0===o.options.functional)return S(t,r,o);n.component=o}return T(e,"",t,n,r)},N=function(e,t,n){for(var r=new n.CTor,i=r.$props,o=r.$data,a=t.props.attrs,s=0;s<i.length;s++){var l=i[s];o[l]=a[l]}return r.$slots=y(t.children),r.$el=e,r.build(),g(r,"mounted"),t.meta.el=r.$el,r.$el},D=function(e,t,n){for(var r in t){var i=n[r];void 0===i?e.removeEventListener(r,i):n[r].handlers=t[r]}},j=function(e,t,r){var i=r.props.attrs;for(var o in i){var a=i[o],s=t[o];void 0===a&&!1===a&&null===a||void 0!==s&&!1!==s&&null!==s&&a===s||(10===o.length&&"xlink:href"===o?e.setAttributeNS("http://www.w3.org/1999/xlink","href",a):e.setAttribute(o,!0===a?"":a))}for(var l in t){var u=i[l];void 0!==u&&!1!==u&&null!==u||e.removeAttribute(l)}var c=null;if(void 0!==(c=r.props.directives))for(var v in c){var f=null;void 0!==(f=n[v])&&f(e,c[v],r)}var d=null;if(void 0!==(d=r.props.dom))for(var p in d){var h=d[p];e[p]!==h&&(e[p]=h)}},I=function(e,t){if(void 0===e.__moon__)N(e,t,t.meta.component);else{for(var n=e.__moon__,r=!1,i=n.$props,o=n.$data,a=t.props.attrs,s=0;s<i.length;s++){var l=i[s];o[l]!==a[l]&&(o[l]=a[l],r=!0)}0!==t.children.length&&(n.$slots=y(t.children),r=!0),!0===r&&n.build()}},K=function(e,t,n){var r=null!==e?e.nodeName.toLowerCase():null;if(null===e){var i=w(t);return C(i,t,n),i}if(null===t)return L(e,n),null;if(r!==t.type){var o=w(t);return R(e,o,t,n),o}if("#text"===t.type)return"#text"===r?(e.textContent!==t.val&&(e.textContent=t.val),t.meta.el=e):R(e,w(t),t,n),e;if(t.meta.el=e,void 0!==t.meta.component)return I(e,t),e;j(e,E(e),t);var a=null;void 0!==(a=t.meta.eventListeners)&&_(e,a);var s=t.props.dom;if(void 0!==s&&void 0!==s.innerHTML)return e;for(var l=t.children,u=l.length,c=0,v=e.firstChild,f=0!==u?l[0]:null;null!==f||null!==v;){var d=null!==v?v.nextSibling:null;K(v,f,e),f=++c<u?l[c]:null,v=d}return e},H=function(e,t,n){if(null===e)return C(w(t),t,n),O.APPEND;if(null===t)return L(e.meta.el,n),O.REMOVE;if(e===t)return O.SKIP;if(e.type!==t.type)return R(e.meta.el,w(t),t,n),O.REPLACE;if(!0===t.meta.shouldRender&&"#text"===t.type){var r=e.meta.el;return"#text"===e.type?(t.val!==e.val&&(r.textContent=t.val),O.TEXT):(R(r,w(t),t,n),O.REPLACE)}if(!0===t.meta.shouldRender){var i=e.meta.el;if(void 0!==t.meta.component)return I(i,t),O.SKIP;j(i,e.props.attrs,t),e.props.attrs=t.props.attrs;var o=null;void 0!==(o=t.meta.eventListeners)&&D(i,o,e.meta.eventListeners);var a=t.props.dom;if(void 0!==a&&void 0!==a.innerHTML)return O.SKIP;var s=t.children,l=e.children,u=s.length,c=l.length;if(0===u){if(0!==c){for(var v=null;null!==(v=i.firstChild);)L(v,i);e.children=[]}}else for(var f=u>c?u:c,d=0,p=0;d<f;d++,p++){var h=p<c?l[p]:null,m=d<u?s[d]:null,g=H(h,m,i);switch(g){case O.APPEND:l[c++]=m;break;case O.REMOVE:l.splice(p--,1),c--;break;case O.REPLACE:l[p]=s[d];break;case O.TEXT:h.val=m.val}}return O.CHILDREN}return t.meta.el=e.meta.el,O.SKIP},q=/\{\{/,V=/\s*\}\}/,z=/\s/,Z=/"[^"]*"|'[^']*'|\.\w*[a-zA-Z$_]\w*|\w*[a-zA-Z$_]\w*:|(\w*[a-zA-Z$_]\w*)/g,X=["true","false","undefined","null","NaN","typeof","in"],F=function(e,t,n){var r={current:0,template:e,output:"",dependencies:t};return B(r,n),r.output},B=function(e,t){for(var n=e.template,r=n.length;e.current<r;){var i=Q(e,q);if(i&&(e.output+=x(i)),e.current===r)break;e.current+=2,U(e);var o=Q(e,V);if(e.current===r)break;0!==o.length&&(J(o,e.dependencies),t&&(o='" + '+o+' + "'),e.output+=o),U(e),e.current+=2}},J=function(e,t){return e.replace(Z,function(e,n){void 0!==n&&-1===t.indexOf(n)&&-1===X.indexOf(n)&&t.push(n)}),t},Q=function(e,t){var n=e.template,r=n.substring(e.current),i=(r.length,r.search(t)),o="";switch(i){case-1:o=r;break;case 0:o="";break;default:o=r.substring(0,i)}return e.current+=o.length,o},U=function(e){for(var t=e.template,n=t[e.current];z.test(n);)n=t[++e.current]},W=/<\/?(?:[A-Za-z]+\w*)|<!--/,Y=function(e){var t={input:e,current:0,tokens:[]};return ee(t),t.tokens},ee=function(e){for(var t=e.input,n=t.length;e.current<n;)"<"===t.charAt(e.current)?"\x3c!--"!==t.substr(e.current,4)?re(e):ne(e):te(e)},te=function(e){var t=e.current,n=e.input,r=n.length,i=n.substring(t).search(W);if(-1===i)return e.tokens.push({type:"text",value:n.slice(t)}),void(e.current=r);0!==i&&(i+=t,e.tokens.push({type:"text",value:n.slice(t,i)}),e.current=i)},ne=function(e){var t=e.current,n=e.input,r=n.length;t+=4;var i=n.indexOf("--\x3e",t);-1===i?(e.tokens.push({type:"comment",value:n.slice(t)}),e.current=r):(e.tokens.push({type:"comment",value:n.slice(t,i)}),e.current=i+3)},re=function(e){var t=e.input,n=(t.length,"/"===t.charAt(e.current+1));e.current+=!0===n?2:1;var r=ie(e);oe(r,e);var i="/"===t.charAt(e.current);e.current+=!0===i?2:1,!0===n&&(r.closeStart=!0),!0===i&&(r.closeEnd=!0)},ie=function(e){for(var t=e.input,n=t.length,r=e.current,i="";r<n;){var o=t.charAt(r);if("/"===o||">"===o||" "===o)break;i+=o,r++}var a={type:"tag",value:i};return e.tokens.push(a),e.current=r,a},oe=function(e,t){for(var n=t.input,r=n.length,i=t.current,o=n.charAt(i),a=n.charAt(i+1),s=function(){i++,o=n.charAt(i),a=n.charAt(i+1)},l={};i<r&&">"!==o&&("/"!==o||">"!==a);)if(" "!==o){for(var u="",c=!1;i<r&&"="!==o;){if(" "===o||">"===o||"/"===o&&">"===a){c=!0;break}u+=o,s()}var v={name:u,value:"",meta:{}};if(!0!==c){s();var f=" ";for("'"!==o&&'"'!==o||(f=o,s());i<r&&o!==f;)v.value+=o,s();s();var d=u.indexOf(":");if(-1!==d){var p=u.split(":");v.name=p[0],v.meta.arg=p[1]}l[u]=v}else l[u]=v}else s();t.current=i,e.attributes=l},ae=function(e){for(var t={type:"ROOT",children:[]},n={current:0,tokens:e};n.current<e.length;){var r=ce(n);r&&t.children.push(r)}return t},se=["area","base","br","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"],le=["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"],ue=function(e,t,n){return{type:e,props:t,children:n}},ce=function(e){var t=e.tokens[e.current],n=e.tokens[e.current-1],r=e.tokens[e.current+1],i=function(i){e.current+=void 0===i?1:i,t=e.tokens[e.current],n=e.tokens[e.current-1],r=e.tokens[e.current+1]};if("text"===t.type)return i(),n.value;if("comment"===t.type)return i(),null;if("tag"===t.type){var o=t.value,a=t.closeStart,s=t.closeEnd,l=-1!==le.indexOf(o),u=-1!==se.indexOf(o)||!0===s,c=ue(o,t.attributes,[]);if(i(),l&&(c.isSVG=!0),!0===u)return c;if(!0===a)return null;if(void 0!==t){for(e.current;"tag"!==t.type||"tag"===t.type&&(void 0===t.closeStart&&void 0===t.closeEnd||t.value!==o);){var v=ce(e);if(null!==v&&c.children.push(v),i(0),void 0===t)break}i()}return c}i()},ve=function(e,t,n){var i=e.props;e.props={attrs:i};var o=!1,a={},s=null,l=null,u="{attrs: {",c=null;for(s in i){var v=i[s],f=v.name;void 0!==(l=r[f])&&void 0!==(c=l.beforeGenerate)&&c(v,e,t,n)}var d=null;for(s in i){var p=i[s],h=p.name;if(void 0!==(l=r[h]))void 0!==(d=l.afterGenerate)&&(a[h]={prop:p,afterGenerate:d},o=!0);else if("m"===h[0]&&"-"===h[1]);else{var m=p.value,g=F(m,n.dependencies,!0);m!==g&&(e.meta.shouldRender=!0,void 0!==t&&(t.meta.shouldRender=!0)),!1===n.hasAttrs&&(n.hasAttrs=!0),u+='"'+s+'": "'+g+'", '}}return!0===n.hasAttrs?(u=u.substring(0,u.length-2)+"}}, ",n.hasAttrs=!1):u+="}}, ",!0===o&&(n.specialDirectivesAfter=a),u},fe=function(e){var t='"eventListeners": {';for(var n in e){var r=e[n];t+='"'+n+'": [';for(var i=0;i<r.length;i++)t+=r[i];t=t.substring(0,t.length-2)+"], "}return t=t.substring(0,t.length-2)+"}"},de=function(e){var t="{";for(var n in e)t+="eventListeners"===n?fe(e[n]):'"'+n+'": '+e[n]+", ";return t=t.substring(0,t.length-2)+"}, "},pe=function(e,t,n){if("string"==typeof e){var r=F(e,n.dependencies,!0),i=P();return e!==r&&(i.shouldRender=!0,t.meta.shouldRender=!0),'h("#text", '+de(i)+'"'+r+'")'}var o='h("'+e.type+'", ',a=P();e.meta=a;var s=ve(e,t,n),l=n.specialDirectivesAfter;n.specialDirectivesAfter=null;var u=e.children,c=u.length,v="[";if(0===c)v+="]";else{for(var f=0;f<u.length;f++)v+=pe(u[f],e,n)+", ";v=v.substring(0,v.length-2)+"]"}if(!0===e.meta.shouldRender&&void 0!==t&&(t.meta.shouldRender=!0),o+=s,o+=de(a),o+=v,o+=")",null!==l){var d=void 0;for(var p in l)d=l[p],o=d.afterGenerate(d.prop,o,e,n);n.specialDirectivesAfter=null}return o},he=function(e){for(var t=e.children[0],n={hasAttrs:!1,specialDirectivesAfter:null,dependencies:[]},r=pe(t,void 0,n),i=n.dependencies,o="",a=0;a<i.length;a++){var s=i[a];o+="var "+s+' = instance.get("'+s+'"); '}var l="var instance = this; "+o+"return "+r+";";try{return new Function("h",l)}catch(e){return p("Could not create render function"),A}},me=function(e){var t=Y(e),n=ae(t);return he(n)};t.prototype.get=function(e){var t=this.$observer,n=null;return null!==(n=t.target)&&(void 0===t.map[e]?t.map[e]=[n]:-1===t.map[e].indexOf(n)&&t.map[e].push(n)),this.$data[e]},t.prototype.set=function(e,t){var n=this.$observer,r=m(0,this.$data,e,t),i=null;void 0!==(i=n.setters[r])&&i.call(this,t),n.notify(r,t),h(this)},t.prototype.destroy=function(){this.off(),this.$el=null,this.$destroyed=!0,g(this,"destroyed")},t.prototype.callMethod=function(e,t){t=t||[],this.$data[e].apply(this,t)},t.prototype.on=function(e,t){var n=this.$events[e];void 0===n?this.$events[e]=[t]:n.push(t)},t.prototype.off=function(e,t){if(void 0===e)this.$events={};else if(void 0===t)this.$events[e]=[];else{var n=this.$events[e],r=n.indexOf(t);n.splice(r,1)}},t.prototype.emit=function(e,t){var n=t||{};n.type=e;var r=this.$events[e],i=this.$events["*"],o=0;if(void 0!==r)for(o=0;o<r.length;o++)r[o](n);if(void 0!==i)for(o=0;o<i.length;o++)i[o](n)},t.prototype.mount=function(e){this.$el="string"==typeof e?document.querySelector(e):e,this.$destroyed=!1,this.$el.__moon__=this,k(this,"$template",this.$options.template,this.$el.outerHTML),this.$render===A&&(this.$render=t.compile(this.$template)),this.build(),g(this,"mounted")},t.prototype.render=function(){return this.$render(G)},t.prototype.patch=function(e,t,n){if(void 0!==e.meta)if(t.type!==e.type){var r=w(t);R(e.meta.el,r,t,n),r.__moon__=this,this.$el=r}else H(e,t,n);else if(e instanceof Node){var i=K(e,t,n);i!==e&&(this.$el=t.meta.el,this.$el.__moon__=this)}},t.prototype.build=function(){var e=this.render(),t=null;void 0!==this.$dom.meta?t=this.$dom:(t=this.$el,this.$dom=e),this.patch(t,e,this.$el.parentNode)},t.prototype.init=function(){d("======= Moon ======="),g(this,"init");var e=this.$options.el;void 0!==e&&this.mount(e)},t.config={silent:!0,keyCodes:function(e){$(a,e)}},t.version="0.10.0",t.util={noop:A,error:p,log:d,merge:b,extend:$,h:G},t.use=function(e,n){e.init(t,n)},t.compile=function(e){return me(e)},t.nextTick=function(e){setTimeout(e,0)},t.directive=function(e,t){n["m-"+e]=t},t.component=function(e,n){function r(){t.call(this,n)}var o=this;return void 0!==n.name?e=n.name:n.name=e,void 0!==n.data&&"function"!=typeof n.data&&p("In components, data must be a function returning an object"),r.prototype=Object.create(o.prototype),r.prototype.constructor=r,r.prototype.init=function(){g(this,"init");var e=this.$options;this.$destroyed=!1,k(this,"$props",e.props,[]);var n=e.template;this.$template=n,this.$render===A&&(this.$render=t.compile(n))},i[e]={CTor:r,options:n},r},t.renderClass=function(e){if("string"==typeof e)return e;var n="";if(Array.isArray(e))for(var r=0;r<e.length;r++)n+=t.renderClass(e[r])+" ";else if("object"==typeof e)for(var i in e)e[i]&&(n+=i+" ");return n=n.slice(0,-1)},t.renderLoop=function(e,t){var n=null;if(Array.isArray(e)){n=new Array(e.length);for(var r=0;r<e.length;r++)n[r]=t(e[r],r)}else if("object"==typeof e){n=[];for(var i in e)n.push(t(e[i],i))}else if("number"==typeof e){n=new Array(e);for(var o=0;o<e;o++)n[o]=t(o+1,o)}return n},t.renderEventModifier=function(e,t){return e===a[t]};var ge='h("#text", '+de(P())+'"")';return r["m-if"]={afterGenerate:function(e,t,n,r){var i=e.value;return J(i,r.dependencies),i+" ? "+t+" : "+ge}},r["m-for"]={beforeGenerate:function(e,t,n,r){n.deep=!0},afterGenerate:function(e,t,n,r){var i=e.value.split(" in "),o=i[0].split(","),a=i[1];J(a,r.dependencies);for(var s=o.join(","),l=0;l<o.length;l++){var u=dependencies.indexOf(o[l]);-1!==u&&dependencies.splice(u,1)}return"Moon.renderLoop("+a+", function("+s+") { return "+t+"; })"}},r["m-on"]={beforeGenerate:function(e,t,n,r){var i=e.value,a=e.meta,s=i,l=a.arg.split("."),u=l.shift(),c="event",v=s.split("(");v.length>1&&(s=v.shift(),c=v.join("(").slice(0,-1),J(c,r.dependencies));for(var f="",d=0;d<l.length;d++){var p=o[l[d]];f+=void 0===p?'if(Moon.renderEventModifier(event.keyCode, "'+l[d]+'") === false) {return null;};':p}M(u,"function(event) {"+f+'instance.callMethod("'+s+'", ['+c+"])}",t)}},r["m-model"]={beforeGenerate:function(e,t,n,r){var i=e.value,o=t.props.attrs;J(i,r.dependencies);var a="input",s="value",l=i,u=i,c="event.target."+s,v=o.type;if(void 0!==v){v=v.value;var f=!1;if("checkbox"===v||"radio"===v&&(f=!0))if(a="change",s="checked",!0===f){var d=o.value,p=void 0===d?"null":'"'+F(d.value,delimiters,escapedDelimiters,dependencies)+'"';l=l+" === "+p,c=p}else c="event.target."+s}var h=u.indexOf("["),m=u.indexOf("."),g=null,y=null,$=-1;-1===h&&-1===m||($=-1===h?m:-1===m?h:h<m?h:m,g=i.substring(0,$),y=i.substring($),u=g+y.replace(Z,function(e,t){return void 0!==t?'" + '+t+' + "':e})),M(a,'function(event) {instance.set("'+u+'", '+c+")}",t);var b=t.props.dom;void 0===b&&(t.props.dom=b={}),b[s]=l}},r["m-literal"]={duringPropGenerate:function(e,t,n,r){var i=t.arg;return J(e,r),"class"===i?'"class": Moon.renderClass('+e+"), ":'"'+i+'": '+e+", "}},r["m-html"]={beforeGenerate:function(e,t,n,r){var i=t.props.dom;void 0===i&&(t.props.dom=i={}),J(value,dependencies),i.innerHTML='("" + '+value+")"}},r["m-mask"]={},n["m-show"]=function(e,t,n){e.style.display=t?"":"none"},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.setters={},this.clear={},this.target=null,this.map={}}function t(t){void 0===t&&(t={}),this.$options=t,k(this,"$name",t.name,"root");var n=t.data;this.$data=void 0===n?{}:"function"==typeof n?n():n,k(this,"$render",t.render,A),k(this,"$hooks",t.hooks,{});var r=t.methods;void 0!==r&&l(this,r),this.$events={},this.$dom={},this.$observer=new e(this),this.$destroyed=!0,this.$queued=!1;var i=t.computed;void 0!==i&&s(this,i),this.init()}var n={},r={},i={},o={stop:"event.stopPropagation();",prevent:"event.preventDefault();",ctrl:"if(event.ctrlKey === false) {return null;};",shift:"if(event.shiftKey === false) {return null;};",alt:"if(event.altKey === false) {return null;};",enter:"if(event.keyCode !== 13) {return null;};"},a={},l=function(e,t){for(var n in t)!function(t,n){e.$data[t]=function(){return n.apply(e,arguments)}}(n,t[n])},s=function(e,t){for(var n in t)!function(n){var r=e.$observer;r.observe(n),Object.defineProperty(e.$data,n,{get:function(){var i=null;return void 0===r.cache[n]?(r.target=n,i=t[n].get.call(e),r.target=null,r.cache[n]=i):i=r.cache[n],i},set:A});var i=null;void 0!==(i=t[n].set)&&(r.setters[n]=i)}(n)};e.prototype.observe=function(e){var t=this;this.clear[e]=function(){t.cache[e]=void 0}},e.prototype.notify=function(e,t){var n=null;if(void 0!==(n=this.map[e]))for(var r=0;r<n.length;r++)this.notify(n[r]);var i=null;void 0!==(i=this.clear[e])&&i()};var u=/\[(\w+)\]/g,c=/\n/g,v=/"/g,f=/\\/g,d=function(e){!1===t.config.silent&&console.log(e)},p=function(e){!1===t.config.silent&&console.error("[Moon] ERR: "+e)},h=function(e){!1===e.$queued&&!1===e.$destroyed&&(e.$queued=!0,setTimeout(function(){e.build(),g(e,"updated"),e.$queued=!1},0))},m=function(e,t,n,r){n=n.replace(u,".$1");for(var i=n.split("."),o=0;o<i.length-1;o++){t=t[i[o]]}return t[i[o]]=r,i[0]},g=function(e,t){var n=e.$hooks[t];void 0!==n&&n.call(e)},y=function(e){var t={};if(t.default=[],0===e.length)return t;for(var n=0;n<e.length;n++){var r=e[n],i=r.props.attrs,o="",a=null;void 0!==(o=i.slot)?(a=t[o],void 0===a?t[o]=[r]:a.push(r),delete i.slot):t.default.push(r)}return t},$=function(e,t){for(var n in t)e[n]=t[n];return e},b=function(e,t){var n={},r=null;for(r in e)n[r]=e[r];for(r in t)n[r]=t[r];return n},k=function(e,t,n,r){e[t]=void 0===n?r:n},x=function(e){return e.replace(f,"\\\\").replace(v,'\\"').replace(c,"\\n")},A=function(){},E=function(e){for(var t={},n=e.attributes,r=n.length;r--;)t[n[r].name]=n[r].value;return t},_=function(e,t){for(var n in t)!function(n){var r=function(e){for(var t=r.handlers,n=0;n<t.length;n++)t[n](e)};r.handlers=t[n],t[n]=r,e.addEventListener(n,r)}(n)},w=function(e){var t=null;if("#text"===e.type)t=document.createTextNode(e.val);else{if(t=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)t.textContent=e.children[0].val,e.children[0].meta.el=t.firstChild;else for(var n=0;n<e.children.length;n++){var r=e.children[n];C(w(r),r,t)}var i=null;void 0!==(i=e.meta.eventListeners)&&_(t,i)}return j(t,{},e,e.props.attrs),e.meta.el=t,t},C=function(e,t,n){n.appendChild(e);var r=null;void 0!==(r=t.meta.component)&&N(e,t,r)},L=function(e,t){var n=null;void 0!==(n=e.__moon__)&&n.destroy(),t.removeChild(e)},R=function(e,t,n,r){var i=null;void 0!==(i=e.__moon__)&&i.destroy(),r.replaceChild(t,e);var o=null;void 0!==(o=n.meta.component)&&N(t,n,o)},O={SKIP:0,APPEND:1,REMOVE:2,REPLACE:3,TEXT:4,CHILDREN:5},P=function(){return{shouldRender:!1}},M=function(e,t,n){var r=n.meta,i=r.eventListeners;void 0===i&&(i=r.eventListeners={});var o=i[e];void 0===o?i[e]=[t]:o.push(t)},T=function(e,t,n,r,i){return{type:e,val:t,props:n,children:i,meta:r||P()}},G=function(e,t,n){var r=n.options,i=e.attrs,o=r.data;void 0===o&&(o={});var a=r.props;if(void 0===a)o=i;else for(var l=0;l<a.length;l++){var s=a[l];o[s]=i[s]}return n.options.render(S,{data:o,slots:y(t)})},S=function(e,t,n,r){var o=null;if("#text"===e)return T("#text",n,{attrs:{}},t,[]);if(void 0!==(o=i[e])){if(!0===o.options.functional)return G(t,r,o);n.component=o}return T(e,"",t,n,r)},N=function(e,t,n){for(var r=new n.CTor,i=r.$props,o=r.$data,a=t.props.attrs,l=0;l<i.length;l++){var s=i[l];o[s]=a[s]}return r.$slots=y(t.children),r.$el=e,r.build(),g(r,"mounted"),t.meta.el=r.$el,r.$el},D=function(e,t,n){for(var r in t){var i=n[r];void 0===i?e.removeEventListener(r,i):n[r].handlers=t[r]}},j=function(e,t,r){var i=r.props.attrs;for(var o in i){var a=i[o],l=t[o];void 0===a&&!1===a&&null===a||void 0!==l&&!1!==l&&null!==l&&a===l||(10===o.length&&"xlink:href"===o?e.setAttributeNS("http://www.w3.org/1999/xlink","href",a):e.setAttribute(o,!0===a?"":a))}for(var s in t){var u=i[s];void 0!==u&&!1!==u&&null!==u||e.removeAttribute(s)}var c=null;if(void 0!==(c=r.props.directives))for(var v in c){var f=null;void 0!==(f=n[v])&&f(e,c[v],r)}var d=null;if(void 0!==(d=r.props.dom))for(var p in d){var h=d[p];e[p]!==h&&(e[p]=h)}},I=function(e,t){if(void 0===e.__moon__)N(e,t,t.meta.component);else{for(var n=e.__moon__,r=!1,i=n.$props,o=n.$data,a=t.props.attrs,l=0;l<i.length;l++){var s=i[l];o[s]!==a[s]&&(o[s]=a[s],r=!0)}0!==t.children.length&&(n.$slots=y(t.children),r=!0),!0===r&&n.build()}},K=function(e,t,n){var r=null!==e?e.nodeName.toLowerCase():null;if(null===e){var i=w(t);return C(i,t,n),i}if(null===t)return L(e,n),null;if(r!==t.type){var o=w(t);return R(e,o,t,n),o}if("#text"===t.type)return"#text"===r?(e.textContent!==t.val&&(e.textContent=t.val),t.meta.el=e):R(e,w(t),t,n),e;if(t.meta.el=e,void 0!==t.meta.component)return I(e,t),e;j(e,E(e),t);var a=null;void 0!==(a=t.meta.eventListeners)&&_(e,a);var l=t.props.dom;if(void 0!==l&&void 0!==l.innerHTML)return e;for(var s=t.children,u=s.length,c=0,v=e.firstChild,f=0!==u?s[0]:null;null!==f||null!==v;){var d=null!==v?v.nextSibling:null;K(v,f,e),f=++c<u?s[c]:null,v=d}return e},H=function(e,t,n){if(null===e)return C(w(t),t,n),O.APPEND;if(null===t)return L(e.meta.el,n),O.REMOVE;if(e===t)return O.SKIP;if(e.type!==t.type)return R(e.meta.el,w(t),t,n),O.REPLACE;if(!0===t.meta.shouldRender&&"#text"===t.type){var r=e.meta.el;return"#text"===e.type?(t.val!==e.val&&(r.textContent=t.val),O.TEXT):(R(r,w(t),t,n),O.REPLACE)}if(!0===t.meta.shouldRender){var i=e.meta.el;if(void 0!==t.meta.component)return I(i,t),O.SKIP;j(i,e.props.attrs,t),e.props.attrs=t.props.attrs;var o=null;void 0!==(o=t.meta.eventListeners)&&D(i,o,e.meta.eventListeners);var a=t.props.dom;if(void 0!==a&&void 0!==a.innerHTML)return O.SKIP;var l=t.children,s=e.children,u=l.length,c=s.length;if(0===u){if(0!==c){for(var v=null;null!==(v=i.firstChild);)L(v,i);e.children=[]}}else for(var f=u>c?u:c,d=0,p=0;d<f;d++,p++){var h=p<c?s[p]:null,m=d<u?l[d]:null,g=H(h,m,i);switch(g){case O.APPEND:s[c++]=m;break;case O.REMOVE:s.splice(p--,1),c--;break;case O.REPLACE:s[p]=l[d];break;case O.TEXT:h.val=m.val}}return O.CHILDREN}return t.meta.el=e.meta.el,O.SKIP},q=/\{\{/,V=/\s*\}\}/,z=/\s/,Z=/"[^"]*"|'[^']*'|\.\w*[a-zA-Z$_]\w*|\w*[a-zA-Z$_]\w*:|(\w*[a-zA-Z$_]\w*)/g,X=["true","false","undefined","null","NaN","typeof","in"],F=function(e,t,n){var r={current:0,template:e,output:"",dependencies:t};return B(r,n),r.output},B=function(e,t){for(var n=e.template,r=n.length;e.current<r;){var i=Q(e,q);if(i&&(e.output+=x(i)),e.current===r)break;e.current+=2,U(e);var o=Q(e,V);if(e.current===r)break;0!==o.length&&(J(o,e.dependencies),t&&(o='" + '+o+' + "'),e.output+=o),U(e),e.current+=2}},J=function(e,t){return e.replace(Z,function(e,n){void 0!==n&&-1===t.indexOf(n)&&-1===X.indexOf(n)&&t.push(n)}),t},Q=function(e,t){var n=e.template,r=n.substring(e.current),i=(r.length,r.search(t)),o="";switch(i){case-1:o=r;break;case 0:o="";break;default:o=r.substring(0,i)}return e.current+=o.length,o},U=function(e){for(var t=e.template,n=t[e.current];z.test(n);)n=t[++e.current]},W=/<\/?(?:[A-Za-z]+\w*)|<!--/,Y=function(e){var t={input:e,current:0,tokens:[]};return ee(t),t.tokens},ee=function(e){for(var t=e.input,n=t.length;e.current<n;)"<"===t.charAt(e.current)?"\x3c!--"!==t.substr(e.current,4)?re(e):ne(e):te(e)},te=function(e){var t=e.current,n=e.input,r=n.length,i=n.substring(t).search(W);if(-1===i)return e.tokens.push({type:"text",value:n.slice(t)}),void(e.current=r);0!==i&&(i+=t,e.tokens.push({type:"text",value:n.slice(t,i)}),e.current=i)},ne=function(e){var t=e.current,n=e.input,r=n.length;t+=4;var i=n.indexOf("--\x3e",t);-1===i?(e.tokens.push({type:"comment",value:n.slice(t)}),e.current=r):(e.tokens.push({type:"comment",value:n.slice(t,i)}),e.current=i+3)},re=function(e){var t=e.input,n=(t.length,"/"===t.charAt(e.current+1));e.current+=!0===n?2:1;var r=ie(e);oe(r,e);var i="/"===t.charAt(e.current);e.current+=!0===i?2:1,!0===n&&(r.closeStart=!0),!0===i&&(r.closeEnd=!0)},ie=function(e){for(var t=e.input,n=t.length,r=e.current,i="";r<n;){var o=t.charAt(r);if("/"===o||">"===o||" "===o)break;i+=o,r++}var a={type:"tag",value:i};return e.tokens.push(a),e.current=r,a},oe=function(e,t){for(var n=t.input,r=n.length,i=t.current,o=n.charAt(i),a=n.charAt(i+1),l=function(){i++,o=n.charAt(i),a=n.charAt(i+1)},s={};i<r&&">"!==o&&("/"!==o||">"!==a);)if(" "!==o){for(var u="",c=!1;i<r&&"="!==o;){if(" "===o||">"===o||"/"===o&&">"===a){c=!0;break}u+=o,l()}var v={name:u,value:"",meta:{}};if(!0!==c){l();var f=" ";for("'"!==o&&'"'!==o||(f=o,l());i<r&&o!==f;)v.value+=o,l();l();var d=u.indexOf(":");if(-1!==d){var p=u.split(":");v.name=p[0],v.meta.arg=p[1]}s[u]=v}else s[u]=v}else l();t.current=i,e.attributes=s},ae=function(e){for(var t={type:"ROOT",children:[]},n={current:0,tokens:e};n.current<e.length;){var r=ce(n);r&&t.children.push(r)}return t},le=["area","base","br","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"],se=["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"],ue=function(e,t,n){return{type:e,props:t,children:n}},ce=function(e){var t=e.tokens[e.current],n=e.tokens[e.current-1],r=e.tokens[e.current+1],i=function(i){e.current+=void 0===i?1:i,t=e.tokens[e.current],n=e.tokens[e.current-1],r=e.tokens[e.current+1]};if("text"===t.type)return i(),n.value;if("comment"===t.type)return i(),null;if("tag"===t.type){var o=t.value,a=t.closeStart,l=t.closeEnd,s=-1!==se.indexOf(o),u=-1!==le.indexOf(o)||!0===l,c=ue(o,t.attributes,[]);if(i(),s&&(c.isSVG=!0),!0===u)return c;if(!0===a)return null;if(void 0!==t){for(e.current;"tag"!==t.type||"tag"===t.type&&(void 0===t.closeStart&&void 0===t.closeEnd||t.value!==o);){var v=ce(e);if(null!==v&&c.children.push(v),i(0),void 0===t)break}i()}return c}i()},ve=function(e,t,n){var i=e.props;e.props={attrs:i};var o=!1,a=[],l=!1,s={},u=null,c=null,v="{attrs: {",f=null;for(u in i){var d=i[u],p=d.name;void 0!==(c=r[p])&&void 0!==(f=c.beforeGenerate)&&f(d,e,t,n)}var h=null,m=null;for(u in i){var g=i[u],y=g.name;if(void 0!==(c=r[y]))void 0!==(h=c.afterGenerate)&&(s[y]={prop:g,afterGenerate:h},l=!0),void 0!==(m=c.duringPropGenerate)&&m(g,e,n),e.meta.shouldRender=!0;else if("m"===y[0]&&"-"===y[1])a.push(g),o=!0,e.meta.shouldRender=!0;else{var $=g.value,b=F($,n.dependencies,!0);$!==b&&(e.meta.shouldRender=!0),!1===n.hasAttrs&&(n.hasAttrs=!0),v+='"'+u+'": "'+b+'", '}}if(!0===n.hasAttrs?(v=v.substring(0,v.length-2)+"}",n.hasAttrs=!1):v+="}",!0===o){v+=", directives: {";for(var k=null,x=null,A=0;A<a.length;A++)k=a[A],x=k.value,J(x,n.dependencies),v+='"'+k.name+'": '+x;v+="}"}return!0===l&&(n.specialDirectivesAfter=s),v+="}, "},fe=function(e){var t='"eventListeners": {';for(var n in e){var r=e[n];t+='"'+n+'": [';for(var i=0;i<r.length;i++)t+=r[i]+", ";t=t.substring(0,t.length-2)+"], "}return t=t.substring(0,t.length-2)+"}, "},de=function(e){var t="{";for(var n in e)t+="eventListeners"===n?fe(e[n]):'"'+n+'": '+e[n]+", ";return t=t.substring(0,t.length-2)+"}, "},pe=function(e,t,n){if("string"==typeof e){var r=F(e,n.dependencies,!0),i=P();return e!==r&&(i.shouldRender=!0,t.meta.shouldRender=!0),'h("#text", '+de(i)+'"'+r+'")'}var o='h("'+e.type+'", ',a=P();e.meta=a;var l=ve(e,t,n),s=n.specialDirectivesAfter,u=e.children,c=u.length,v="[";if(0===c)v+="]";else{for(var f=0;f<u.length;f++)v+=pe(u[f],e,n)+", ";v=v.substring(0,v.length-2)+"]"}if(!0===e.deep&&(v="[].concat.apply([], "+v+")"),!0===e.meta.shouldRender&&void 0!==t&&(t.meta.shouldRender=!0),o+=l,o+=de(a),o+=v,o+=")",null!==s){var d=void 0;for(var p in s)d=s[p],o=d.afterGenerate(d.prop,o,e,n);n.specialDirectivesAfter=null}return o},he=function(e){for(var t=e.children[0],n={hasAttrs:!1,specialDirectivesAfter:null,dependencies:[]},r=pe(t,void 0,n),i=n.dependencies,o="",a=0;a<i.length;a++){var l=i[a];o+="var "+l+' = instance.get("'+l+'"); '}var s="var instance = this; "+o+"return "+r+";";try{return new Function("h",s)}catch(e){return p("Could not create render function"),A}},me=function(e){var t=Y(e),n=ae(t);return he(n)};t.prototype.get=function(e){var t=this.$observer,n=null;return null!==(n=t.target)&&(void 0===t.map[e]?t.map[e]=[n]:-1===t.map[e].indexOf(n)&&t.map[e].push(n)),this.$data[e]},t.prototype.set=function(e,t){var n=this.$observer,r=m(0,this.$data,e,t),i=null;void 0!==(i=n.setters[r])&&i.call(this,t),n.notify(r,t),h(this)},t.prototype.destroy=function(){this.off(),this.$el=null,this.$destroyed=!0,g(this,"destroyed")},t.prototype.callMethod=function(e,t){t=t||[],this.$data[e].apply(this,t)},t.prototype.on=function(e,t){var n=this.$events[e];void 0===n?this.$events[e]=[t]:n.push(t)},t.prototype.off=function(e,t){if(void 0===e)this.$events={};else if(void 0===t)this.$events[e]=[];else{var n=this.$events[e],r=n.indexOf(t);n.splice(r,1)}},t.prototype.emit=function(e,t){var n=t||{};n.type=e;var r=this.$events[e],i=this.$events["*"],o=0;if(void 0!==r)for(o=0;o<r.length;o++)r[o](n);if(void 0!==i)for(o=0;o<i.length;o++)i[o](n)},t.prototype.mount=function(e){this.$el="string"==typeof e?document.querySelector(e):e,this.$destroyed=!1,this.$el.__moon__=this,k(this,"$template",this.$options.template,this.$el.outerHTML),this.$render===A&&(this.$render=t.compile(this.$template)),this.build(),g(this,"mounted")},t.prototype.render=function(){return this.$render(S)},t.prototype.patch=function(e,t,n){if(void 0!==e.meta)if(t.type!==e.type){var r=w(t);R(e.meta.el,r,t,n),r.__moon__=this,this.$el=r}else H(e,t,n);else if(e instanceof Node){var i=K(e,t,n);i!==e&&(this.$el=t.meta.el,this.$el.__moon__=this)}},t.prototype.build=function(){var e=this.render(),t=null;void 0!==this.$dom.meta?t=this.$dom:(t=this.$el,this.$dom=e),this.patch(t,e,this.$el.parentNode)},t.prototype.init=function(){d("======= Moon ======="),g(this,"init");var e=this.$options.el;void 0!==e&&this.mount(e)},t.config={silent:!0,keyCodes:function(e){$(a,e)}},t.version="0.10.0",t.util={noop:A,error:p,log:d,merge:b,extend:$,h:S},t.use=function(e,n){e.init(t,n)},t.compile=function(e){return me(e)},t.nextTick=function(e){setTimeout(e,0)},t.directive=function(e,t){n["m-"+e]=t},t.component=function(e,n){function r(){t.call(this,n)}var o=this;return void 0!==n.name?e=n.name:n.name=e,void 0!==n.data&&"function"!=typeof n.data&&p("In components, data must be a function returning an object"),r.prototype=Object.create(o.prototype),r.prototype.constructor=r,r.prototype.init=function(){g(this,"init");var e=this.$options;this.$destroyed=!1,k(this,"$props",e.props,[]);var n=e.template;this.$template=n,this.$render===A&&(this.$render=t.compile(n))},i[e]={CTor:r,options:n},r},t.renderClass=function(e){if("string"==typeof e)return e;var n="";if(Array.isArray(e))for(var r=0;r<e.length;r++)n+=t.renderClass(e[r])+" ";else if("object"==typeof e)for(var i in e)e[i]&&(n+=i+" ");return n=n.slice(0,-1)},t.renderLoop=function(e,t){var n=null;if(Array.isArray(e)){n=new Array(e.length);for(var r=0;r<e.length;r++)n[r]=t(e[r],r)}else if("object"==typeof e){n=[];for(var i in e)n.push(t(e[i],i))}else if("number"==typeof e){n=new Array(e);for(var o=0;o<e;o++)n[o]=t(o+1,o)}return n},t.renderEventModifier=function(e,t){return e===a[t]};var ge='h("#text", '+de(P())+'"")';return r["m-if"]={afterGenerate:function(e,t,n,r){var i=e.value;return J(i,r.dependencies),i+" ? "+t+" : "+ge}},r["m-for"]={beforeGenerate:function(e,t,n,r){n.deep=!0},afterGenerate:function(e,t,n,r){var i=e.value.split(" in "),o=i[0].split(","),a=i[1];J(a,r.dependencies);for(var l=o.join(","),s=0;s<o.length;s++){var u=dependencies.indexOf(o[s]);-1!==u&&dependencies.splice(u,1)}return"Moon.renderLoop("+a+", function("+l+") { return "+t+"; })"}},r["m-on"]={beforeGenerate:function(e,t,n,r){var i=e.value,a=e.meta,l=i,s=a.arg.split("."),u=s.shift(),c="event",v=l.split("(");v.length>1&&(l=v.shift(),c=v.join("(").slice(0,-1),J(c,r.dependencies));for(var f="",d=0;d<s.length;d++){var p=o[s[d]];f+=void 0===p?'if(Moon.renderEventModifier(event.keyCode, "'+s[d]+'") === false) {return null;};':p}M(u,"function(event) {"+f+'instance.callMethod("'+l+'", ['+c+"])}",t)}},r["m-model"]={beforeGenerate:function(e,t,n,r){var i=e.value,o=t.props.attrs;J(i,r.dependencies);var a="input",l="value",s=i,u=i,c="event.target."+l,v=o.type;if(void 0!==v){v=v.value;var f=!1;if("checkbox"===v||"radio"===v&&(f=!0))if(a="change",l="checked",!0===f){var d=o.value,p=void 0===d?"null":'"'+F(d.value,delimiters,escapedDelimiters,dependencies)+'"';s=s+" === "+p,c=p}else c="event.target."+l}var h=u.indexOf("["),m=u.indexOf("."),g=null,y=null,$=-1;-1===h&&-1===m||($=-1===h?m:-1===m?h:h<m?h:m,g=i.substring(0,$),y=i.substring($),u=g+y.replace(Z,function(e,t){return void 0!==t?'" + '+t+' + "':e})),M(a,'function(event) {instance.set("'+u+'", '+c+")}",t);var b=t.props.dom;void 0===b&&(t.props.dom=b={}),b[l]=s}},r["m-literal"]={duringPropGenerate:function(e,t,n){var r=e.meta.arg;return J(e.value,n.dependencies),!1===n.hasAttrs&&(n.hasAttrs=!0),"class"===r?'"class": Moon.renderClass('+value+"), ":'"'+e+'": '+value+", "}},r["m-html"]={beforeGenerate:function(e,t,n,r){var i=t.props.dom;void 0===i&&(t.props.dom=i={}),J(value,dependencies),i.innerHTML='("" + '+value+")"}},r["m-mask"]={},n["m-show"]=function(e,t,n){e.style.display=t?"":"none"},t});
\ No newline at end of file
diff --git a/src/compiler/generator.js b/src/compiler/generator.js
index 7f2ddae5..dd7bdce7 100644
--- a/src/compiler/generator.js
+++ b/src/compiler/generator.js
@@ -5,7 +5,7 @@ const generateProps = function(node, parent, state) {
 	}
 
 	let hasDirectives = false;
-	let directives = {};
+	let directiveProps = [];
 
 	let hasSpecialDirectivesAfter = false;
 	let specialDirectivesAfter = {};
@@ -37,12 +37,18 @@ const generateProps = function(node, parent, state) {
 					afterGenerate: afterGenerate
 				};
 
-				node.meta.shouldRender = true;
 				hasSpecialDirectivesAfter = true;
 			}
-		} else if(name[0] === "m" && name[1] === "-") {
+
+			if((duringPropGenerate = specialDirective.duringPropGenerate) !== undefined) {
+				duringPropGenerate(prop, node, state);
+			}
+
 			node.meta.shouldRender = true;
+		} else if(name[0] === "m" && name[1] === "-") {
+			directiveProps.push(prop);
 			hasDirectives = true;
+			node.meta.shouldRender = true;
 		} else {
 			const value = prop.value;
 			const compiled = compileTemplate(value, state.dependencies, true);
@@ -60,16 +66,34 @@ const generateProps = function(node, parent, state) {
 	}
 
 	if(state.hasAttrs === true) {
-		propsCode = propsCode.substring(0, propsCode.length - 2) + "}}, ";
+		propsCode = propsCode.substring(0, propsCode.length - 2) + "}";
 		state.hasAttrs = false;
 	} else {
-		propsCode += "}}, ";
+		propsCode += "}";
+	}
+
+	if(hasDirectives === true) {
+		propsCode += ", directives: {";
+
+		let directiveProp = null;
+		let directivePropValue = null;
+		for(let i = 0; i < directiveProps.length; i++) {
+			directiveProp = directiveProps[i];
+			directivePropValue = directiveProp.value;
+
+			compileTemplateExpression(directivePropValue, state.dependencies);
+			propsCode += `"${directiveProp.name}": ${directivePropValue}`;
+		}
+
+		propsCode += "}";
 	}
 
 	if(hasSpecialDirectivesAfter === true) {
 		state.specialDirectivesAfter = specialDirectivesAfter;
 	}
 
+	propsCode += "}, ";
+
 	return propsCode;
 }
 
@@ -81,13 +105,13 @@ const generateEventlisteners = function(eventListeners) {
 		eventListenersCode += `"${type}": [`;
 
 		for(let i = 0; i < handlers.length; i++) {
-			eventListenersCode += handlers[i];
+			eventListenersCode += `${handlers[i]}, `;
 		}
 
 		eventListenersCode = eventListenersCode.substring(0, eventListenersCode.length - 2) + "], ";
 	}
 
-	eventListenersCode = eventListenersCode.substring(0, eventListenersCode.length - 2) + "}";
+	eventListenersCode = eventListenersCode.substring(0, eventListenersCode.length - 2) + "}, ";
 	return eventListenersCode;
 }
 
@@ -125,7 +149,6 @@ const generateNode = function(node, parent, state) {
 
 	const propsCode = generateProps(node, parent, state);
 	let specialDirectivesAfter = state.specialDirectivesAfter;
-	state.specialDirectivesAfter = null;
 
 	let children = node.children;
 	const childrenLength = children.length;
@@ -140,6 +163,10 @@ const generateNode = function(node, parent, state) {
 		childrenCode = childrenCode.substring(0, childrenCode.length - 2) + "]";
 	}
 
+	if(node.deep === true) {
+		childrenCode = `[].concat.apply([], ${childrenCode})`;
+	}
+
 	if(node.meta.shouldRender === true && parent !== undefined) {
 		parent.meta.shouldRender = true;
 	}
@@ -149,7 +176,6 @@ const generateNode = function(node, parent, state) {
 	call += childrenCode;
 	call += ")";
 
-	
 	if(specialDirectivesAfter !== null) {
 		let specialDirectiveAfter;
 		for(let specialDirectiveKey in specialDirectivesAfter) {
@@ -189,4 +215,4 @@ const generate = function(tree) {
     error("Could not create render function");
     return noop;
   }
-}
\ No newline at end of file
+}
diff --git a/src/directives/default.js b/src/directives/default.js
index df9f7292..f4fd7f3a 100644
--- a/src/directives/default.js
+++ b/src/directives/default.js
@@ -162,10 +162,15 @@ specialDirectives["m-model"] = {
 };
 
 specialDirectives["m-literal"] = {
-  duringPropGenerate: function(value, meta, vnode, dependencies) {
-    const prop = meta.arg;
-    compileTemplateExpression(value, dependencies);
-    if(prop === "class") {
+  duringPropGenerate: function(prop, vnode, state) {
+    const propName = prop.meta.arg;
+    compileTemplateExpression(prop.value, state.dependencies);
+
+    if(state.hasAttrs === false) {
+      state.hasAttrs = true;
+    }
+
+    if(propName === "class") {
       // Detected class, use runtime class render helper
       return `"class": Moon.renderClass(${value}), `;
     } else {
diff --git a/test/js/test.js b/test/js/test.js
index 72857e17..8756296b 100644
--- a/test/js/test.js
+++ b/test/js/test.js
@@ -33,835 +33,829 @@ var createTestElement = function(id, html) {
   return el;
 }
 
-describe('Initializing', function() {
-  createTestElement("initialize", "");
-  it('with new', function() {
-    expect(new Moon({el: "#initialize"}) instanceof Moon).to.equal(true);
+// Begin Tests
+describe('Instance', function() {
+  describe('Initializing', function() {
+    createTestElement("initialize", "");
+    it('with new', function() {
+      expect(new Moon({el: "#initialize"}) instanceof Moon).to.equal(true);
+    });
+  });
+
+  describe('Mount', function() {
+    var mountEl = createTestElement("mountEl", '{{msg}}');
+    createTestElement("mountStr", '{{msg}}');
+    var mountStrApp = new Moon({
+      el: "#mountStr",
+      data: {
+        msg: "Hello Moon!"
+      }
+    });
+    var mountElApp = new Moon({
+      el: mountEl,
+      data: {
+        msg: "Hello Moon!"
+      }
+    });
+    it('when mounted on a selector', function() {
+      Moon.nextTick(function() {
+        expect(document.getElementById("mountStr").innerHTML).to.equal("Hello Moon!");
+      });
+    });
+    it('when mounted on an element', function() {
+      Moon.nextTick(function() {
+        expect(mountEl.innerHTML).to.equal("Hello Moon!");
+      });
+    });
+  });
+
+  describe('Destroy', function() {
+    createTestElement("destroy", '{{msg}}');
+    var destroyApp = new Moon({
+      el: "#destroy",
+      data: {
+        msg: "Hello Moon!"
+      }
+    });
+    it('when destroyed', function() {
+      destroyApp.destroy();
+      destroyApp.set('msg', 'New Value!');
+      Moon.nextTick(function() {
+        expect(document.getElementById("destroy").innerHTML).to.not.equal("New Value!");
+      });
+    });
+  });
+});
+
+describe("Compiler", function() {
+  it("should compile whitespace in mustaches", function() {
+    var el = createTestElement("compilerMustacheWhitespace", '{{  msg   }}');
+    var app = new Moon({
+      el: "#compilerMustacheWhitespace",
+      data: {
+        msg: "Hello Moon!"
+      }
+    });
+    expect(el.innerHTML).to.equal("Hello Moon!");
+  });
+  it("should not compile comments", function() {
+    var el = createTestElement("compilerComment", '<!-- comment -->');
+    var compilerCommentApp = new Moon({
+      el: "#compilerComment"
+    });
+    expect(el.innerHTML).to.equal("");
+  });
+  it("should compile self closing elements", function() {
+    var el = createTestElement("compilerSelfClosing", '<self-closing/>');
+    var app = new Moon({
+      el: "#compilerSelfClosing",
+      template: "<div><self-closing/></div>"
+    });
+    expect(app.$dom.children[0].type).to.equal("self-closing");
+  });
+  it("should compile self closing elements without a slash and consume children", function() {
+    var el = createTestElement("compilerSelfClosingNoSlash", '');
+    var app = new Moon({
+      el: "#compilerSelfClosingNoSlash",
+      template: "<div><self-closing>hi</div>"
+    });
+    expect(app.$dom.children[0].children[0].val).to.equal("hi");
+  });
+  it("should ignore just closing elements", function() {
+    var el = createTestElement("compilerJustClosing", '');
+    var app = new Moon({
+      el: "#compilerJustClosing",
+      template: "<div></h1></div>"
+    });
+    expect(app.$dom.children[0]).to.equal(undefined);
+  });
+  it("should ignore just closing custom elements", function() {
+    var el = createTestElement("compilerJustClosingCustom", '');
+    var app = new Moon({
+      el: "#compilerJustClosingCustom",
+      template: "<div></custom></div>"
+    });
+    expect(app.$dom.children[0]).to.equal(undefined);
+  });
+  it("should compile only text", function() {
+    var el = createTestElement("compilerOnlyText", '');
+    var compilerCommentApp = new Moon({
+      el: "#compilerOnlyText",
+      template: "<div>text</div>"
+    });
+    expect(el.innerHTML).to.equal("text");
+  });
+  it("should double quotes in text", function() {
+    var el = createTestElement("compilerDoubleQuote", '"Hello Moon!"');
+    var compilerCommentApp = new Moon({
+      el: "#compilerDoubleQuote"
+    });
+    expect(el.innerHTML).to.equal('"Hello Moon!"');
+  });
+  it("should compile an unclosed comment", function() {
+    var el = createTestElement("compilerUnclosedComment", '');
+    var compilerCommentApp = new Moon({
+      el: "#compilerUnclosedComment",
+      template: "<div><!-- unclosed</div>"
+    });
+    expect(el.innerHTML).to.equal("");
+  });
+  it("should compile an unclosed tag", function() {
+    var el = createTestElement("compilerUnclosedTag", '');
+    var compilerUnclosedTagApp = new Moon({
+      el: "#compilerUnclosedTag",
+      template: "<div><h1>Moon</div>"
+    });
+    expect(el.firstChild.textContent).to.equal("Moon");
+  });
+});
+
+
+describe('Data', function() {
+  createTestElement("data", '{{msg}}');
+  createTestElement("data2", '{{msg.obj.nested}}');
+  createTestElement("data3", '{{msg.obj.nested}}');
+  var dataApp = new Moon({
+    el: "#data",
+    data: {
+      msg: "Hello Moon!"
+    }
+  });
+  var dataApp2 = new Moon({
+    el: "#data2",
+    data: {
+      msg: {
+        obj: {
+          nested: "Nested Object"
+        }
+      }
+    }
+  });
+  var dataApp3 = new Moon({
+    el: "#data3",
+    data: {
+      msg: {
+        obj: {
+
+        }
+      }
+    }
+  });
+  it('when initializing', function() {
+    expect(document.getElementById("data").innerHTML).to.equal("Hello Moon!");
+  });
+  it('when setting', function(done) {
+    dataApp.set('msg', 'New Value');
+    Moon.nextTick(function() {
+      expect(document.getElementById("data").innerHTML).to.equal("New Value");
+      done();
+    });
+  });
+  it('when setting new property', function(done) {
+    dataApp3.set('msg.obj.nested', 'Nested Value');
+    Moon.nextTick(function() {
+      expect(document.getElementById("data3").innerHTML).to.equal("Nested Value");
+      done();
+    });
+  });
+  // it('when setting via setter', function() {
+  //   dataApp.$data.msg = 'Second Value';
+  //   Moon.nextTick(function() {
+  //     expect(document.getElementById("data").innerHTML).to.equal("Second Value");
+  //   });
+  // });
+  // it('when setting nested object via setter', function() {
+  //   dataApp2.$data.msg.obj.nested = 'Nested Object';
+  //   Moon.nextTick(function() {
+  //     expect(document.getElementById("data2").innerHTML).to.equal("Nested Object");
+  //   });
+  // });
+  it('when setting new data property', function() {
+    dataApp3.set("msg.obj.nested", "New Nested");
+    Moon.nextTick(function() {
+      expect(document.getElementById("data3").innerHTML).to.equal("New Nested");
+    });
+  });
+  it('when getting', function() {
+    expect(dataApp.get('msg')).to.equal("New Value");
+  });
+});
+
+describe('Methods', function() {
+  createTestElement("method", '{{count}}');
+  var methodApp = new Moon({
+    el: "#method",
+    data: {
+      count: 0
+    },
+    methods: {
+      increment: function() {
+        methodApp.set('count', methodApp.get('count') + 1);
+      }
+    }
+  });
+  it('when calling a method', function() {
+    methodApp.callMethod('increment');
+    expect(methodApp.get('count')).to.equal(1);
+  });
+  it('should update DOM', function() {
+    methodApp.callMethod('increment');
+    Moon.nextTick(function() {
+      expect(document.getElementById("method").innerHTML).to.equal('2');
+    });
+  });
+});
+
+describe('Computed', function() {
+  var computedAppEl = createTestElement("computed", '<p>{{msg}}</p><p>{{reversed}}</p>');
+  var computedApp = new Moon({
+    el: "#computed",
+    data: {
+      msg: "Message"
+    },
+    computed: {
+      reversed: {
+        get: function() {
+          return this.get('msg').split("").reverse().join("");
+        }
+      }
+    }
+  });
+  it('should compute at initial render', function() {
+    expect(computedAppEl.childNodes[1].textContent).to.equal("egasseM");
+  });
+  it('should update when the message updates', function() {
+    computedApp.set('msg', 'New');
+    Moon.nextTick(function() {
+      expect(computedAppEl.childNodes[1].textContent).to.equal('weN');
+    });
+  });
+});
+
+describe("Directive", function() {
+  describe('Custom Directive', function() {
+    createTestElement("customDirective", '<span m-square="2" id="custom-directive-span"></span>');
+    Moon.directive("square", function(el, val, vdom) {
+      vdom.props.dom = {innerHTML: String(val*val)};
+    });
+    var customDirectiveApp = new Moon({
+      el: "#customDirective"
+    });
+    it('should execute', function() {
+      Moon.nextTick(function() {
+        expect(document.getElementById("custom-directive-span").innerHTML).to.equal("4");
+      });
+    });
+  });
+
+  describe('If Directive', function() {
+    createTestElement("if", '<p m-if="condition" id="if-condition">Condition True</p>');
+    var ifApp = new Moon({
+      el: "#if",
+      data: {
+        condition: true
+      }
+    });
+    it('should exist when true', function() {
+      expect(document.getElementById('if-condition').innerHTML).to.equal('Condition True');
+    });
+    it('should not exist when false', function() {
+      ifApp.set('condition', false);
+      Moon.nextTick(function() {
+        expect(document.getElementById('if-condition')).to.be['null'];
+      });
+    });
+    it('should not be present at runtime', function() {
+      expect(document.getElementById('if-condition').getAttribute("m-if")).to.be['null'];
+    });
+  });
+
+  describe('Show Directive', function() {
+    createTestElement("show", '<p m-show="condition" id="show-condition">Condition True</p>');
+    var showApp = new Moon({
+      el: "#show",
+      data: {
+        condition: true
+      }
+    });
+    it('should display when true', function() {
+      expect(document.getElementById('show-condition').style.display).to.equal('');
+    });
+    it('should not display when false', function() {
+      showApp.set('condition', false);
+      Moon.nextTick(function() {
+        expect(document.getElementById('show-condition').style.display).to.equal('none');
+      });
+    });
+    it('should not be present at runtime', function() {
+      expect(document.getElementById('show-condition').getAttribute("m-show")).to.be['null'];
+    });
+  });
+
+  describe('Model Directive', function() {
+    createTestElement("model", '<p id="model-msg">{{msg}}</p><input type="text" m-model="msg" id="model-msg-input"/>');
+    createTestElement("modelDynamic", '<p id="model-dynamic-msg">{{arr[index]}}</p><input type="text" m-model="arr[index]" id="model-dynamic-msg-input"/>');
+    createTestElement("modelCheckbox", '<p id="model-checkbox">{{checked}}</p><input type="checkbox" m-model="checked" id="model-checkbox-input"/>');
+    var modelApp = new Moon({
+      el: "#model",
+      data: {
+        msg: "Hello Moon!"
+      }
+    });
+    var modelDynamicApp = new Moon({
+      el: "#modelDynamic",
+      data: {
+        arr: ["Random", "Hello Moon!"],
+        index: 1
+      }
+    });
+    var modelCheckboxApp = new Moon({
+      el: "#modelCheckbox",
+      data: {
+        checked: true
+      }
+    });
+    it('should update value when initialized', function() {
+      expect(document.getElementById('model-msg').innerHTML).to.equal('Hello Moon!');
+      expect(document.getElementById('model-msg-input').value).to.equal('Hello Moon!');
+    });
+    it('should update value', function() {
+      document.getElementById('model-msg-input').value = "Changed";
+      var inputEvent = new CustomEvent('input');
+      document.getElementById('model-msg-input').dispatchEvent(inputEvent);
+      Moon.nextTick(function() {
+        expect(document.getElementById('model-msg').innerHTML).to.equal('Changed');
+      });
+    });
+    it('should update value of dynamic model when initialized', function() {
+      expect(document.getElementById('model-dynamic-msg').innerHTML).to.equal('Hello Moon!');
+      expect(document.getElementById('model-dynamic-msg-input').value).to.equal('Hello Moon!');
+    });
+    it('should update value of dynamic model', function() {
+      document.getElementById('model-dynamic-msg-input').value = "Changed";
+      var inputEvent = new CustomEvent('input');
+      document.getElementById('model-dynamic-msg-input').dispatchEvent(inputEvent);
+      Moon.nextTick(function() {
+        expect(document.getElementById('model-dynamic-msg').innerHTML).to.equal('Changed');
+      });
+    });
+    it('should update value of checkbox model when initialized', function() {
+      expect(document.getElementById('model-checkbox').innerHTML).to.equal('true');
+      expect(document.getElementById('model-checkbox-input').checked).to.equal(true);
+    });
+    it('should update value of checkbox model', function() {
+      document.getElementById('model-checkbox-input').checked = false;
+      var changeEvent = new CustomEvent('change');
+      document.getElementById('model-checkbox-input').dispatchEvent(changeEvent);
+      Moon.nextTick(function() {
+        expect(document.getElementById('model-checkbox').innerHTML).to.equal('false');
+      });
+    });
+    it('should not be present at runtime', function() {
+      expect(document.getElementById('model-msg-input').getAttribute("m-model")).to.be['null'];
+      expect(document.getElementById('model-dynamic-msg-input').getAttribute("m-model")).to.be['null'];
+    });
+  });
+
+  describe('On Directive', function() {
+    createTestElement("on", '<p id="on-count">{{count}}</p><button m-on:click="increment" id="on-increment-button">Increment</button><a id="on-modifier-link" href="https://kabir.ml" m-on:click.prevent="modifier">Link</a><button id="on-keycode-link" m-on:click.m="keycode"></button>');
+    var evt, modifier_active, keycode;
+    Moon.config.keyCodes({
+      m: 77
+    });
+    var onApp = new Moon({
+      el: "#on",
+      data: {
+        count: 0
+      },
+      methods: {
+        increment: function(e) {
+          onApp.set('count', onApp.get('count') + 1);
+          evt = e;
+        },
+        modifier: function(e) {
+          modifier_active = true;
+        },
+        keycode: function() {
+          keycode = true;
+        }
+      }
+    });
+    it('should call a method', function() {
+      document.getElementById("on-increment-button").click();
+      expect(onApp.get('count')).to.equal(1);
+    });
+    it('should update DOM', function() {
+      document.getElementById("on-increment-button").click();
+      Moon.nextTick(function() {
+        expect(document.getElementById("on-count").innerHTML).to.equal('2');
+      });
+    });
+    it('should pass an event object', function() {
+      expect(evt.target.tagName).to.equal('BUTTON');
+    });
+    it('should use modifiers', function() {
+      document.getElementById("on-modifier-link").click();
+      expect(modifier_active).to.be['true'];
+    });
+    it('should use custom keycodes', function() {
+      var e = document.createEvent('HTMLEvents');
+      e.initEvent("click", false, true);
+      e.keyCode = 77;
+      document.getElementById("on-keycode-link").dispatchEvent(e);
+      expect(keycode).to.be['true'];
+    });
+    it('should not be present at runtime', function() {
+      expect(document.getElementById('on-increment-button').getAttribute("m-on")).to.be['null'];
+    });
+  });
+
+  describe('For Directive', function() {
+    createTestElement("for", "<ul id='forList'><li m-for='item in items'>{{item}}</li></ul>");
+    var forApp = new Moon({
+      el: "#for",
+      data: {
+        items: [1, 2, 3, 4, 5]
+      }
+    });
+    it('should render a list', function() {
+      expect(document.getElementById('forList').childNodes.length).to.equal(5);
+    });
+    it('should update a list', function() {
+      var items = forApp.get("items");
+      items.push(6);
+      forApp.set("items", items);
+      Moon.nextTick(function() {
+        expect(document.getElementById('forList').childNodes.length).to.equal(6);
+      });
+    });
+    it('should not be present at runtime', function() {
+      expect(document.getElementById('forList').childNodes[0].getAttribute("m-for")).to.be['null'];
+    });
+  });
+
+  describe('Literal Directive', function() {
+    createTestElement("literal", '<span m-literal:class="(num+1).toString()" id="literal-directive-span"></span>');
+    createTestElement("literalClass", '<span m-literal:class="[\'1\', \'2\', \'3\']" id="literal-class-directive-span"></span>');
+    createTestElement("literalConditionalClass", '<span m-literal:class="{trueVal: trueVal, falseVal: falseVal}" id="literal-conditional-class-directive-span"></span>');
+    createTestElement("literalBooleanValue", '<span m-literal:disabled="condition" id="literal-boolean-value-directive-span"></span>');
+    var literalApp = new Moon({
+      el: "#literal",
+      data: {
+        num: 1
+      }
+    });
+    var literalClassApp = new Moon({
+      el: "#literalClass"
+    });
+    var literalConditionalClassApp = new Moon({
+      el: "#literalConditionalClass",
+      data: {
+        trueVal: true,
+        falseVal: false
+      }
+    });
+    var literalBooleanValueApp = new Moon({
+      el: "#literalBooleanValue",
+      data: {
+        condition: true
+      }
+    });
+    it('should treat the value as a literal expression', function() {
+      expect(document.getElementById("literal-directive-span").getAttribute("class")).to.equal("2");
+    });
+    it('should be able to handle an array of classes', function() {
+      expect(document.getElementById("literal-class-directive-span").getAttribute("class")).to.equal("1 2 3");
+    });
+    it('should be able to handle an object of conditional classes', function() {
+      expect(document.getElementById("literal-conditional-class-directive-span").getAttribute("class")).to.equal("trueVal");
+    });
+    it('should be able to handle a true boolean value', function() {
+      expect(document.getElementById("literal-boolean-value-directive-span").getAttribute("disabled")).to.equal("");
+    });
+    it('should be able to handle a false boolean value', function() {
+      literalBooleanValueApp.set('condition', false);
+      Moon.nextTick(function() {
+        expect(document.getElementById("literal-boolean-value-directive-span").getAttribute("disabled")).to.equal(null);
+      })
+    });
+    it('should not be present at runtime', function() {
+      expect(document.getElementById('literal-directive-span').getAttribute("m-literal")).to.be['null'];
+    });
+  });
+
+  describe('HTML Directive', function() {
+    createTestElement("html", '<span m-html="html" id="html-directive-span"></span>');
+    var htmlApp = new Moon({
+      el: "#html",
+      data: {
+        html: "<strong>Hello Moon!</strong>"
+      }
+    });
+    it('should fill DOM with a value', function() {
+      expect(document.getElementById("html-directive-span").innerHTML).to.equal("<strong>Hello Moon!</strong>");
+    });
+    it('should not be present at runtime', function() {
+      expect(document.getElementById('html-directive-span').getAttribute("m-html")).to.be['null'];
+    });
+  });
+
+  describe('Mask Directive', function() {
+    createTestElement("mask", '<span m-mask id="mask-directive-span">{{msg}}</span>');
+    var maskApp = new Moon({
+      el: "#mask",
+      data: {
+        msg: "Hello Moon!"
+      }
+    });
+    it('should not be present at runtime', function() {
+      expect(document.getElementById('mask-directive-span').getAttribute("m-mask")).to.be['null'];
+    });
+  });
+});
+
+describe('Plugin', function() {
+  createTestElement("plugin", '<span m-empty id="plugin-span">{{msg}}</span>');
+  var emptyPlugin = {
+    init: function(Moon) {
+      Moon.directive('empty', function(el, val, vdom) {
+        el.innerHTML = "";
+        vdom.children[0].val = "";
+      });
+    }
+  }
+  Moon.use(emptyPlugin);
+  var pluginApp = new Moon({
+    el: "#plugin",
+    data: {
+      msg: "Hello Moon!"
+    }
+  });
+  it('should execute', function() {
+    expect(document.getElementById("plugin-span").innerHTML).to.equal("");
+  });
+});
+
+describe('Template', function() {
+    createTestElement("template", '');
+    var templateApp = new Moon({
+      el: "#template",
+      template: "<div id='template'>{{msg}}</div>",
+      data: {
+        msg: "Hello Moon!"
+      }
+    });
+    it('should use provided template', function() {
+      expect(document.getElementById("template").innerHTML).to.equal("Hello Moon!");
+    });
+    it('should update', function() {
+      templateApp.set("msg", "Changed");
+      Moon.nextTick(function() {
+        expect(document.getElementById("template").innerHTML).to.equal("Changed");
+      });
+    });
+});
+
+describe('Custom Render', function() {
+    createTestElement("render", '');
+    var renderApp = new Moon({
+      el: "#render",
+      render: function(h) {
+        return h('div', {attrs: {id: "render"}}, {shouldRender: true}, [h("#text", {shouldRender: true}, this.get('msg'))])
+      },
+      data: {
+        msg: "Hello Moon!"
+      }
+    });
+    it('should use provided render function', function() {
+      expect(document.getElementById("render").innerHTML).to.equal("Hello Moon!");
+    });
+    it('should update', function() {
+      renderApp.set("msg", "Changed");
+      Moon.nextTick(function() {
+        expect(document.getElementById("render").innerHTML).to.equal("Changed");
+      });
+    });
+});
+
+describe('Functional Component', function() {
+    createTestElement("functional", '<functional-component someprop="{{parentMsg}}"></functional-component><slot-functional-component>Default Slot Content<span slot="named">Named Slot Content</span></slot-functional-component>');
+    var functionalComponentDivProps = {attrs: {}};
+    functionalComponentDivProps.attrs["class"] = "functionalComponent";
+    Moon.component('functional-component', {
+      functional: true,
+      props: ['someprop'],
+      render: function(h, ctx) {
+        return h("h1", functionalComponentDivProps, {shouldRender: true}, [h("#text", {shouldRender: true}, ctx.data.someprop)]);
+      }
+    });
+    var functionalComponentDivSlotProps = {attrs: {}};
+    functionalComponentDivSlotProps.attrs["class"] = "functionalSlotComponent";
+    Moon.component('slot-functional-component', {
+      functional: true,
+      render: function(h, ctx) {
+        return h("div", functionalComponentDivSlotProps, {shouldRender: true}, [h("h1", {}, {shouldRender: true}, ctx.slots['default']), h("h1", {}, {shouldRender: true}, ctx.slots.named)]);
+      }
+    });
+    var functionalApp = new Moon({
+      el: "#functional",
+      data: {
+        parentMsg: "Hello Moon!"
+      }
+    });
+    it('should render HTML', function() {
+      expect(document.getElementsByClassName("functionalComponent")).to.not.be.null;
+    });
+    it('should render with props', function() {
+      expect(document.getElementsByClassName("functionalComponent")[0].innerHTML).to.equal("Hello Moon!");
+    });
+    it('should render when updated', function() {
+      functionalApp.set('parentMsg', 'Changed');
+      Moon.nextTick(function() {
+        expect(document.getElementsByClassName("functionalComponent")[0].innerHTML).to.equal("Changed");
+      });
+    });
+
+    describe("Slots", function() {
+      it('should render the default slot', function() {
+        Moon.nextTick(function() {
+          expect(document.getElementsByClassName("functionalSlotComponent")[0].childNodes[0].innerHTML).to.equal("Default Slot Content");
+        });
+      });
+      it('should render a named slot', function() {
+        Moon.nextTick(function() {
+          expect(document.getElementsByClassName("functionalSlotComponent")[0].childNodes[1].innerHTML).to.equal("<span>Named Slot Content</span>");
+        });
+      });
+    });
+});
+
+describe('Component', function() {
+    createTestElement("component", '<my-component componentprop="{{parentMsg}}"></my-component>');
+    createTestElement("componentData", '<data-component></data-component>');
+    createTestElement("slotComponent", '<slot-component>{{parentMsg}}</slot-component>');
+    createTestElement("namedSlotComponent", '<named-slot-component><h1 slot="named-slot">{{parentMsg}}</h1></named-slot-component>');
+    var componentConstructor = Moon.component('my-component', {
+      props: ['componentprop', 'otherprop'],
+      template: "<div>{{componentprop}}</div>"
+    });
+
+    Moon.component('data-component', {
+      template: "<div>{{msg}}</div>",
+      data: function() {
+        return {
+          msg: "Hello Moon!"
+        }
+      }
+    })
+
+    Moon.component('slot-component', {
+      template: "<div><slot></slot></div>"
+    })
+
+    Moon.component('named-slot-component', {
+      template: "<div><slot name='named-slot'></slot></div>"
+    })
+
+    var componentDataApp = new Moon({
+      el: "#componentData"
+    });
+
+    var slotComponentApp = new Moon({
+      el: "#slotComponent",
+      data: {
+        parentMsg: "Hello Moon!"
+      }
+    });
+
+    var namedSlotComponentApp = new Moon({
+      el: "#namedSlotComponent",
+      data: {
+        parentMsg: "Hello Moon!"
+      }
+    });
+
+    it("should create a constructor", function() {
+      expect(new componentConstructor()).to.be.an.instanceof(Moon);
+    });
+    var componentApp = new Moon({
+      el: "#component",
+      data: {
+        parentMsg: "Hello Moon!"
+      }
+    });
+    it('should render HTML', function() {
+      expect(document.getElementById("component")).to.not.be.null;
+    });
+
+    it('should render data from within the component state', function() {
+      expect(document.getElementById("componentData").innerHTML).to.equal("<div>Hello Moon!</div>");
+    });
+
+    it('should render with props', function() {
+      expect(document.getElementById("component").innerHTML).to.equal("<div>Hello Moon!</div>");
+    });
+
+    it('should render when updated', function() {
+      componentApp.set('parentMsg', 'Changed');
+      Moon.nextTick(function() {
+        expect(document.getElementById("component").innerHTML).to.equal("<div>Changed</div>");
+      });
+    });
+
+    it('should render slots', function() {
+      expect(document.getElementById("slotComponent").innerHTML).to.equal("<div>Hello Moon!</div>");
+    });
+
+    it('should render slots when updated', function() {
+      slotComponentApp.set('parentMsg', 'Changed');
+      Moon.nextTick(function() {
+        expect(document.getElementById("slotComponent").innerHTML).to.equal("<div>Changed</div>");
+      });
+    });
+
+    it('should render named slots', function() {
+      expect(document.getElementById("namedSlotComponent").innerHTML).to.equal("<div><h1>Hello Moon!</h1></div>");
+    });
+
+    it('should render named slots when updated', function() {
+      namedSlotComponentApp.set('parentMsg', 'Changed');
+      Moon.nextTick(function() {
+        expect(document.getElementById("namedSlotComponent").innerHTML).to.equal("<div><h1>Changed</h1></div>");
+      });
+    });
+});
+
+describe("Events", function() {
+  var bus = new Moon();
+  var evt1 = false, evt1_2 = false, handler1, globalEvt = false;
+  describe("Handler", function() {
+    it("should create an event listener", function() {
+      handler1 = function() {
+        evt1 = true;
+      }
+      bus.on('evt1', handler1);
+      expect(bus.$events.evt1[0]).to.be.a("function");
+    });
+    it("should create multiple event listeners", function() {
+      bus.on('evt1', function() {
+        evt1_2 = true;
+      });
+      expect(bus.$events.evt1[1]).to.be.a("function");
+    });
+    it("should create a global event listener", function() {
+      bus.on('*', function() {
+        globalEvt = true;
+      });
+      expect(bus.$events["*"][0]).to.be.a("function");
+    });
+  });
+
+  describe("Emit", function() {
+    it("should invoke all handlers", function() {
+      bus.emit('evt1');
+      expect(evt1).to.be['true'];
+      expect(evt1_2).to.be['true'];
+    });
+    it("should call the global handler", function() {
+      expect(globalEvt).to.be['true'];
+    });
+  });
+
+  describe("Removing", function() {
+    it("should remove a handler", function() {
+      bus.off('evt1', handler1);
+      expect(bus.$events.evt1.length).to.equal(1);
+    });
+    it("should be able to remove all handlers", function() {
+      bus.off();
+      expect(bus.$events).to.deep.equal({});
+    });
+  });
+});
+
+describe("Optimization", function() {
+  it("should not rerender static nodes", function() {
+    createTestElement("staticOptimization", "<h1><h2><h3><h4><h5><h6>Static</h6></h5></h4></h3></h2></h1>");
+    var staticOptimizationApp = new Moon({
+      el: "#staticOptimization"
+    });
+    var tree = staticOptimizationApp.render();
+    var assertShouldRender = function(vnode) {
+      expect(vnode.meta.shouldRender).to.equal(false);
+      for(var i = 0; i < vnode.children.length; i++) {
+        assertShouldRender(vnode.children[i]);
+      }
+    }
+    assertShouldRender(tree);
+  });
+});
+
+describe("Utilities", function() {
+  it("should merge two objects", function() {
+    expect(Moon.util.extend({a: true, b: true}, {a: true, b: false, c: true})).to.deep.equal({a: true, b: false, c: true});
+  });
+  it("should extend an object", function() {
+    expect(Moon.util.extend({a: true, b: true}, {a: true, b: false, c: true})).to.deep.equal({a: true, b: false, c: true});
   });
 });
-// Begin Tests
-// describe('Instance', function() {
-//   describe('Initializing', function() {
-//     createTestElement("initialize", "");
-//     it('with new', function() {
-//       expect(new Moon({el: "#initialize"}) instanceof Moon).to.equal(true);
-//     });
-//   });
-//
-//   describe('Mount', function() {
-//     var mountEl = createTestElement("mountEl", '{{msg}}');
-//     createTestElement("mountStr", '{{msg}}');
-//     var mountStrApp = new Moon({
-//       el: "#mountStr",
-//       data: {
-//         msg: "Hello Moon!"
-//       }
-//     });
-//     var mountElApp = new Moon({
-//       el: mountEl,
-//       data: {
-//         msg: "Hello Moon!"
-//       }
-//     });
-//     it('when mounted on a selector', function() {
-//       Moon.nextTick(function() {
-//         expect(document.getElementById("mountStr").innerHTML).to.equal("Hello Moon!");
-//       });
-//     });
-//     it('when mounted on an element', function() {
-//       Moon.nextTick(function() {
-//         expect(mountEl.innerHTML).to.equal("Hello Moon!");
-//       });
-//     });
-//   });
-//
-//   describe('Destroy', function() {
-//     createTestElement("destroy", '{{msg}}');
-//     var destroyApp = new Moon({
-//       el: "#destroy",
-//       data: {
-//         msg: "Hello Moon!"
-//       }
-//     });
-//     it('when destroyed', function() {
-//       destroyApp.destroy();
-//       destroyApp.set('msg', 'New Value!');
-//       Moon.nextTick(function() {
-//         expect(document.getElementById("destroy").innerHTML).to.not.equal("New Value!");
-//       });
-//     });
-//   });
-// });
-//
-// describe("Compiler", function() {
-//   it("should compile whitespace in mustaches", function() {
-//     var el = createTestElement("compilerMustacheWhitespace", '{{  msg   }}');
-//     var app = new Moon({
-//       el: "#compilerMustacheWhitespace",
-//       data: {
-//         msg: "Hello Moon!"
-//       }
-//     });
-//     expect(el.innerHTML).to.equal("Hello Moon!");
-//   });
-//   it("should not compile comments", function() {
-//     var el = createTestElement("compilerComment", '<!-- comment -->');
-//     var compilerCommentApp = new Moon({
-//       el: "#compilerComment"
-//     });
-//     expect(el.innerHTML).to.equal("");
-//   });
-//   it("should compile self closing elements", function() {
-//     var el = createTestElement("compilerSelfClosing", '<self-closing/>');
-//     var app = new Moon({
-//       el: "#compilerSelfClosing",
-//       template: "<div><self-closing/></div>"
-//     });
-//     expect(app.$dom.children[0].type).to.equal("self-closing");
-//   });
-//   it("should compile self closing elements without a slash and consume children", function() {
-//     var el = createTestElement("compilerSelfClosingNoSlash", '');
-//     var app = new Moon({
-//       el: "#compilerSelfClosingNoSlash",
-//       template: "<div><self-closing>hi</div>"
-//     });
-//     expect(app.$dom.children[0].children[0].val).to.equal("hi");
-//   });
-//   it("should ignore just closing elements", function() {
-//     var el = createTestElement("compilerJustClosing", '');
-//     var app = new Moon({
-//       el: "#compilerJustClosing",
-//       template: "<div></h1></div>"
-//     });
-//     expect(app.$dom.children[0]).to.equal(undefined);
-//   });
-//   it("should ignore just closing custom elements", function() {
-//     var el = createTestElement("compilerJustClosingCustom", '');
-//     var app = new Moon({
-//       el: "#compilerJustClosingCustom",
-//       template: "<div></custom></div>"
-//     });
-//     expect(app.$dom.children[0]).to.equal(undefined);
-//   });
-//   it("should compile only text", function() {
-//     var el = createTestElement("compilerOnlyText", '');
-//     var compilerCommentApp = new Moon({
-//       el: "#compilerOnlyText",
-//       template: "<div>text</div>"
-//     });
-//     expect(el.innerHTML).to.equal("text");
-//   });
-//   it("should double quotes in text", function() {
-//     var el = createTestElement("compilerDoubleQuote", '"Hello Moon!"');
-//     var compilerCommentApp = new Moon({
-//       el: "#compilerDoubleQuote"
-//     });
-//     expect(el.innerHTML).to.equal('"Hello Moon!"');
-//   });
-//   it("should compile an unclosed comment", function() {
-//     var el = createTestElement("compilerUnclosedComment", '');
-//     var compilerCommentApp = new Moon({
-//       el: "#compilerUnclosedComment",
-//       template: "<div><!-- unclosed</div>"
-//     });
-//     expect(el.innerHTML).to.equal("");
-//   });
-//   it("should compile an unclosed tag", function() {
-//     var el = createTestElement("compilerUnclosedTag", '');
-//     var compilerUnclosedTagApp = new Moon({
-//       el: "#compilerUnclosedTag",
-//       template: "<div><h1>Moon</div>"
-//     });
-//     expect(el.firstChild.textContent).to.equal("Moon");
-//   });
-// });
-//
-//
-// describe('Data', function() {
-//   createTestElement("data", '{{msg}}');
-//   createTestElement("data2", '{{msg.obj.nested}}');
-//   createTestElement("data3", '{{msg.obj.nested}}');
-//   var dataApp = new Moon({
-//     el: "#data",
-//     data: {
-//       msg: "Hello Moon!"
-//     }
-//   });
-//   var dataApp2 = new Moon({
-//     el: "#data2",
-//     data: {
-//       msg: {
-//         obj: {
-//           nested: "Nested Object"
-//         }
-//       }
-//     }
-//   });
-//   var dataApp3 = new Moon({
-//     el: "#data3",
-//     data: {
-//       msg: {
-//         obj: {
-//
-//         }
-//       }
-//     }
-//   });
-//   it('when initializing', function() {
-//     expect(document.getElementById("data").innerHTML).to.equal("Hello Moon!");
-//   });
-//   it('when setting', function(done) {
-//     dataApp.set('msg', 'New Value');
-//     Moon.nextTick(function() {
-//       expect(document.getElementById("data").innerHTML).to.equal("New Value");
-//       done();
-//     });
-//   });
-//   it('when setting new property', function(done) {
-//     dataApp3.set('msg.obj.nested', 'Nested Value');
-//     Moon.nextTick(function() {
-//       expect(document.getElementById("data3").innerHTML).to.equal("Nested Value");
-//       done();
-//     });
-//   });
-//   // it('when setting via setter', function() {
-//   //   dataApp.$data.msg = 'Second Value';
-//   //   Moon.nextTick(function() {
-//   //     expect(document.getElementById("data").innerHTML).to.equal("Second Value");
-//   //   });
-//   // });
-//   // it('when setting nested object via setter', function() {
-//   //   dataApp2.$data.msg.obj.nested = 'Nested Object';
-//   //   Moon.nextTick(function() {
-//   //     expect(document.getElementById("data2").innerHTML).to.equal("Nested Object");
-//   //   });
-//   // });
-//   it('when setting new data property', function() {
-//     dataApp3.set("msg.obj.nested", "New Nested");
-//     Moon.nextTick(function() {
-//       expect(document.getElementById("data3").innerHTML).to.equal("New Nested");
-//     });
-//   });
-//   it('when getting', function() {
-//     expect(dataApp.get('msg')).to.equal("New Value");
-//   });
-// });
-//
-// describe('Methods', function() {
-//   createTestElement("method", '{{count}}');
-//   var methodApp = new Moon({
-//     el: "#method",
-//     data: {
-//       count: 0
-//     },
-//     methods: {
-//       increment: function() {
-//         methodApp.set('count', methodApp.get('count') + 1);
-//       }
-//     }
-//   });
-//   it('when calling a method', function() {
-//     methodApp.callMethod('increment');
-//     expect(methodApp.get('count')).to.equal(1);
-//   });
-//   it('should update DOM', function() {
-//     methodApp.callMethod('increment');
-//     Moon.nextTick(function() {
-//       expect(document.getElementById("method").innerHTML).to.equal('2');
-//     });
-//   });
-// });
-//
-// describe('Computed', function() {
-//   var computedAppEl = createTestElement("computed", '<p>{{msg}}</p><p>{{reversed}}</p>');
-//   var computedApp = new Moon({
-//     el: "#computed",
-//     data: {
-//       msg: "Message"
-//     },
-//     computed: {
-//       reversed: {
-//         get: function() {
-//           return this.get('msg').split("").reverse().join("");
-//         }
-//       }
-//     }
-//   });
-//   it('should compute at initial render', function() {
-//     expect(computedAppEl.childNodes[1].textContent).to.equal("egasseM");
-//   });
-//   it('should update when the message updates', function() {
-//     computedApp.set('msg', 'New');
-//     Moon.nextTick(function() {
-//       expect(computedAppEl.childNodes[1].textContent).to.equal('weN');
-//     });
-//   });
-// });
-//
-// describe("Directive", function() {
-//   describe('Custom Directive', function() {
-//     createTestElement("customDirective", '<span m-square="2" id="custom-directive-span"></span>');
-//     Moon.directive("square", function(el, val, vdom) {
-//       vdom.props.dom = {innerHTML: String(val*val)};
-//     });
-//     var customDirectiveApp = new Moon({
-//       el: "#customDirective"
-//     });
-//     it('should execute', function() {
-//       Moon.nextTick(function() {
-//         expect(document.getElementById("custom-directive-span").innerHTML).to.equal("4");
-//       });
-//     });
-//   });
-//
-//   describe('If Directive', function() {
-//     createTestElement("if", '<p m-if="condition" id="if-condition">Condition True</p>');
-//     var ifApp = new Moon({
-//       el: "#if",
-//       data: {
-//         condition: true
-//       }
-//     });
-//     it('should exist when true', function() {
-//       expect(document.getElementById('if-condition').innerHTML).to.equal('Condition True');
-//     });
-//     it('should not exist when false', function() {
-//       ifApp.set('condition', false);
-//       Moon.nextTick(function() {
-//         expect(document.getElementById('if-condition')).to.be['null'];
-//       });
-//     });
-//     it('should not be present at runtime', function() {
-//       expect(document.getElementById('if-condition').getAttribute("m-if")).to.be['null'];
-//     });
-//   });
-//
-//   describe('Show Directive', function() {
-//     createTestElement("show", '<p m-show="condition" id="show-condition">Condition True</p>');
-//     var showApp = new Moon({
-//       el: "#show",
-//       data: {
-//         condition: true
-//       }
-//     });
-//     it('should display when true', function() {
-//       expect(document.getElementById('show-condition').style.display).to.equal('');
-//     });
-//     it('should not display when false', function() {
-//       showApp.set('condition', false);
-//       Moon.nextTick(function() {
-//         expect(document.getElementById('show-condition').style.display).to.equal('none');
-//       });
-//     });
-//     it('should not be present at runtime', function() {
-//       expect(document.getElementById('show-condition').getAttribute("m-show")).to.be['null'];
-//     });
-//   });
-//
-//   describe('Model Directive', function() {
-//     createTestElement("model", '<p id="model-msg">{{msg}}</p><input type="text" m-model="msg" id="model-msg-input"/>');
-//     createTestElement("modelDynamic", '<p id="model-dynamic-msg">{{arr[index]}}</p><input type="text" m-model="arr[index]" id="model-dynamic-msg-input"/>');
-//     createTestElement("modelCheckbox", '<p id="model-checkbox">{{checked}}</p><input type="checkbox" m-model="checked" id="model-checkbox-input"/>');
-//     var modelApp = new Moon({
-//       el: "#model",
-//       data: {
-//         msg: "Hello Moon!"
-//       }
-//     });
-//     var modelDynamicApp = new Moon({
-//       el: "#modelDynamic",
-//       data: {
-//         arr: ["Random", "Hello Moon!"],
-//         index: 1
-//       }
-//     });
-//     var modelCheckboxApp = new Moon({
-//       el: "#modelCheckbox",
-//       data: {
-//         checked: true
-//       }
-//     });
-//     it('should update value when initialized', function() {
-//       expect(document.getElementById('model-msg').innerHTML).to.equal('Hello Moon!');
-//       expect(document.getElementById('model-msg-input').value).to.equal('Hello Moon!');
-//     });
-//     it('should update value', function() {
-//       document.getElementById('model-msg-input').value = "Changed";
-//       var inputEvent = new CustomEvent('input');
-//       document.getElementById('model-msg-input').dispatchEvent(inputEvent);
-//       Moon.nextTick(function() {
-//         expect(document.getElementById('model-msg').innerHTML).to.equal('Changed');
-//       });
-//     });
-//     it('should update value of dynamic model when initialized', function() {
-//       expect(document.getElementById('model-dynamic-msg').innerHTML).to.equal('Hello Moon!');
-//       expect(document.getElementById('model-dynamic-msg-input').value).to.equal('Hello Moon!');
-//     });
-//     it('should update value of dynamic model', function() {
-//       document.getElementById('model-dynamic-msg-input').value = "Changed";
-//       var inputEvent = new CustomEvent('input');
-//       document.getElementById('model-dynamic-msg-input').dispatchEvent(inputEvent);
-//       Moon.nextTick(function() {
-//         expect(document.getElementById('model-dynamic-msg').innerHTML).to.equal('Changed');
-//       });
-//     });
-//     it('should update value of checkbox model when initialized', function() {
-//       expect(document.getElementById('model-checkbox').innerHTML).to.equal('true');
-//       expect(document.getElementById('model-checkbox-input').checked).to.equal(true);
-//     });
-//     it('should update value of checkbox model', function() {
-//       document.getElementById('model-checkbox-input').checked = false;
-//       var changeEvent = new CustomEvent('change');
-//       document.getElementById('model-checkbox-input').dispatchEvent(changeEvent);
-//       Moon.nextTick(function() {
-//         expect(document.getElementById('model-checkbox').innerHTML).to.equal('false');
-//       });
-//     });
-//     it('should not be present at runtime', function() {
-//       expect(document.getElementById('model-msg-input').getAttribute("m-model")).to.be['null'];
-//       expect(document.getElementById('model-dynamic-msg-input').getAttribute("m-model")).to.be['null'];
-//     });
-//   });
-//
-//   describe('On Directive', function() {
-//     createTestElement("on", '<p id="on-count">{{count}}</p><button m-on:click="increment" id="on-increment-button">Increment</button><a id="on-modifier-link" href="https://kabir.ml" m-on:click.prevent="modifier">Link</a><button id="on-keycode-link" m-on:click.m="keycode"></button>');
-//     var evt, modifier_active, keycode;
-//     Moon.config.keyCodes({
-//       m: 77
-//     });
-//     var onApp = new Moon({
-//       el: "#on",
-//       data: {
-//         count: 0
-//       },
-//       methods: {
-//         increment: function(e) {
-//           onApp.set('count', onApp.get('count') + 1);
-//           evt = e;
-//         },
-//         modifier: function(e) {
-//           modifier_active = true;
-//         },
-//         keycode: function() {
-//           keycode = true;
-//         }
-//       }
-//     });
-//     it('should call a method', function() {
-//       document.getElementById("on-increment-button").click();
-//       expect(onApp.get('count')).to.equal(1);
-//     });
-//     it('should update DOM', function() {
-//       document.getElementById("on-increment-button").click();
-//       Moon.nextTick(function() {
-//         expect(document.getElementById("on-count").innerHTML).to.equal('2');
-//       });
-//     });
-//     it('should pass an event object', function() {
-//       expect(evt.target.tagName).to.equal('BUTTON');
-//     });
-//     it('should use modifiers', function() {
-//       document.getElementById("on-modifier-link").click();
-//       expect(modifier_active).to.be['true'];
-//     });
-//     it('should use custom keycodes', function() {
-//       var e = document.createEvent('HTMLEvents');
-//       e.initEvent("click", false, true);
-//       e.keyCode = 77;
-//       document.getElementById("on-keycode-link").dispatchEvent(e);
-//       expect(keycode).to.be['true'];
-//     });
-//     it('should not be present at runtime', function() {
-//       expect(document.getElementById('on-increment-button').getAttribute("m-on")).to.be['null'];
-//     });
-//   });
-//
-//   describe('For Directive', function() {
-//     createTestElement("for", "<ul id='forList'><li m-for='item in items'>{{item}}</li></ul>");
-//     var forApp = new Moon({
-//       el: "#for",
-//       data: {
-//         items: [1, 2, 3, 4, 5]
-//       }
-//     });
-//     it('should render a list', function() {
-//       expect(document.getElementById('forList').childNodes.length).to.equal(5);
-//     });
-//     it('should update a list', function() {
-//       var items = forApp.get("items");
-//       items.push(6);
-//       forApp.set("items", items);
-//       Moon.nextTick(function() {
-//         expect(document.getElementById('forList').childNodes.length).to.equal(6);
-//       });
-//     });
-//     it('should not be present at runtime', function() {
-//       expect(document.getElementById('forList').childNodes[0].getAttribute("m-for")).to.be['null'];
-//     });
-//   });
-//
-//   describe('Literal Directive', function() {
-//     createTestElement("literal", '<span m-literal:class="(num+1).toString()" id="literal-directive-span"></span>');
-//     createTestElement("literalClass", '<span m-literal:class="[\'1\', \'2\', \'3\']" id="literal-class-directive-span"></span>');
-//     createTestElement("literalConditionalClass", '<span m-literal:class="{trueVal: trueVal, falseVal: falseVal}" id="literal-conditional-class-directive-span"></span>');
-//     createTestElement("literalBooleanValue", '<span m-literal:disabled="condition" id="literal-boolean-value-directive-span"></span>');
-//     var literalApp = new Moon({
-//       el: "#literal",
-//       data: {
-//         num: 1
-//       }
-//     });
-//     var literalClassApp = new Moon({
-//       el: "#literalClass"
-//     });
-//     var literalConditionalClassApp = new Moon({
-//       el: "#literalConditionalClass",
-//       data: {
-//         trueVal: true,
-//         falseVal: false
-//       }
-//     });
-//     var literalBooleanValueApp = new Moon({
-//       el: "#literalBooleanValue",
-//       data: {
-//         condition: true
-//       }
-//     });
-//     it('should treat the value as a literal expression', function() {
-//       expect(document.getElementById("literal-directive-span").getAttribute("class")).to.equal("2");
-//     });
-//     it('should be able to handle an array of classes', function() {
-//       expect(document.getElementById("literal-class-directive-span").getAttribute("class")).to.equal("1 2 3");
-//     });
-//     it('should be able to handle an object of conditional classes', function() {
-//       expect(document.getElementById("literal-conditional-class-directive-span").getAttribute("class")).to.equal("trueVal");
-//     });
-//     it('should be able to handle a true boolean value', function() {
-//       expect(document.getElementById("literal-boolean-value-directive-span").getAttribute("disabled")).to.equal("");
-//     });
-//     it('should be able to handle a false boolean value', function() {
-//       literalBooleanValueApp.set('condition', false);
-//       Moon.nextTick(function() {
-//         expect(document.getElementById("literal-boolean-value-directive-span").getAttribute("disabled")).to.equal(null);
-//       })
-//     });
-//     it('should not be present at runtime', function() {
-//       expect(document.getElementById('literal-directive-span').getAttribute("m-literal")).to.be['null'];
-//     });
-//   });
-//
-//   describe('HTML Directive', function() {
-//     createTestElement("html", '<span m-html="html" id="html-directive-span"></span>');
-//     var htmlApp = new Moon({
-//       el: "#html",
-//       data: {
-//         html: "<strong>Hello Moon!</strong>"
-//       }
-//     });
-//     it('should fill DOM with a value', function() {
-//       expect(document.getElementById("html-directive-span").innerHTML).to.equal("<strong>Hello Moon!</strong>");
-//     });
-//     it('should not be present at runtime', function() {
-//       expect(document.getElementById('html-directive-span').getAttribute("m-html")).to.be['null'];
-//     });
-//   });
-//
-//   describe('Mask Directive', function() {
-//     createTestElement("mask", '<span m-mask id="mask-directive-span">{{msg}}</span>');
-//     var maskApp = new Moon({
-//       el: "#mask",
-//       data: {
-//         msg: "Hello Moon!"
-//       }
-//     });
-//     it('should not be present at runtime', function() {
-//       expect(document.getElementById('mask-directive-span').getAttribute("m-mask")).to.be['null'];
-//     });
-//   });
-// });
-//
-// describe('Plugin', function() {
-//   createTestElement("plugin", '<span m-empty id="plugin-span">{{msg}}</span>');
-//   var emptyPlugin = {
-//     init: function(Moon) {
-//       Moon.directive('empty', function(el, val, vdom) {
-//         el.innerHTML = "";
-//         vdom.children[0].val = "";
-//       });
-//     }
-//   }
-//   Moon.use(emptyPlugin);
-//   var pluginApp = new Moon({
-//     el: "#plugin",
-//     data: {
-//       msg: "Hello Moon!"
-//     }
-//   });
-//   it('should execute', function() {
-//     expect(document.getElementById("plugin-span").innerHTML).to.equal("");
-//   });
-// });
-//
-// describe('Template', function() {
-//     createTestElement("template", '');
-//     var templateApp = new Moon({
-//       el: "#template",
-//       template: "<div id='template'>{{msg}}</div>",
-//       data: {
-//         msg: "Hello Moon!"
-//       }
-//     });
-//     it('should use provided template', function() {
-//       expect(document.getElementById("template").innerHTML).to.equal("Hello Moon!");
-//     });
-//     it('should update', function() {
-//       templateApp.set("msg", "Changed");
-//       Moon.nextTick(function() {
-//         expect(document.getElementById("template").innerHTML).to.equal("Changed");
-//       });
-//     });
-// });
-//
-// describe('Custom Render', function() {
-//     createTestElement("render", '');
-//     var renderApp = new Moon({
-//       el: "#render",
-//       render: function(h) {
-//         return h('div', {attrs: {id: "render"}}, {shouldRender: true}, [h("#text", {shouldRender: true}, this.get('msg'))])
-//       },
-//       data: {
-//         msg: "Hello Moon!"
-//       }
-//     });
-//     it('should use provided render function', function() {
-//       expect(document.getElementById("render").innerHTML).to.equal("Hello Moon!");
-//     });
-//     it('should update', function() {
-//       renderApp.set("msg", "Changed");
-//       Moon.nextTick(function() {
-//         expect(document.getElementById("render").innerHTML).to.equal("Changed");
-//       });
-//     });
-// });
-//
-// describe('Functional Component', function() {
-//     createTestElement("functional", '<functional-component someprop="{{parentMsg}}"></functional-component><slot-functional-component>Default Slot Content<span slot="named">Named Slot Content</span></slot-functional-component>');
-//     var functionalComponentDivProps = {attrs: {}};
-//     functionalComponentDivProps.attrs["class"] = "functionalComponent";
-//     Moon.component('functional-component', {
-//       functional: true,
-//       props: ['someprop'],
-//       render: function(h, ctx) {
-//         return h("h1", functionalComponentDivProps, {shouldRender: true}, [h("#text", {shouldRender: true}, ctx.data.someprop)]);
-//       }
-//     });
-//     var functionalComponentDivSlotProps = {attrs: {}};
-//     functionalComponentDivSlotProps.attrs["class"] = "functionalSlotComponent";
-//     Moon.component('slot-functional-component', {
-//       functional: true,
-//       render: function(h, ctx) {
-//         return h("div", functionalComponentDivSlotProps, {shouldRender: true}, [h("h1", {}, {shouldRender: true}, ctx.slots['default']), h("h1", {}, {shouldRender: true}, ctx.slots.named)]);
-//       }
-//     });
-//     var functionalApp = new Moon({
-//       el: "#functional",
-//       data: {
-//         parentMsg: "Hello Moon!"
-//       }
-//     });
-//     it('should render HTML', function() {
-//       expect(document.getElementsByClassName("functionalComponent")).to.not.be.null;
-//     });
-//     it('should render with props', function() {
-//       expect(document.getElementsByClassName("functionalComponent")[0].innerHTML).to.equal("Hello Moon!");
-//     });
-//     it('should render when updated', function() {
-//       functionalApp.set('parentMsg', 'Changed');
-//       Moon.nextTick(function() {
-//         expect(document.getElementsByClassName("functionalComponent")[0].innerHTML).to.equal("Changed");
-//       });
-//     });
-//
-//     describe("Slots", function() {
-//       it('should render the default slot', function() {
-//         Moon.nextTick(function() {
-//           expect(document.getElementsByClassName("functionalSlotComponent")[0].childNodes[0].innerHTML).to.equal("Default Slot Content");
-//         });
-//       });
-//       it('should render a named slot', function() {
-//         Moon.nextTick(function() {
-//           expect(document.getElementsByClassName("functionalSlotComponent")[0].childNodes[1].innerHTML).to.equal("<span>Named Slot Content</span>");
-//         });
-//       });
-//     });
-// });
-//
-// describe('Component', function() {
-//     createTestElement("component", '<my-component componentprop="{{parentMsg}}"></my-component>');
-//     createTestElement("componentData", '<data-component></data-component>');
-//     createTestElement("slotComponent", '<slot-component>{{parentMsg}}</slot-component>');
-//     createTestElement("namedSlotComponent", '<named-slot-component><h1 slot="named-slot">{{parentMsg}}</h1></named-slot-component>');
-//     var componentConstructor = Moon.component('my-component', {
-//       props: ['componentprop', 'otherprop'],
-//       template: "<div>{{componentprop}}</div>"
-//     });
-//
-//     Moon.component('data-component', {
-//       template: "<div>{{msg}}</div>",
-//       data: function() {
-//         return {
-//           msg: "Hello Moon!"
-//         }
-//       }
-//     })
-//
-//     Moon.component('slot-component', {
-//       template: "<div><slot></slot></div>"
-//     })
-//
-//     Moon.component('named-slot-component', {
-//       template: "<div><slot name='named-slot'></slot></div>"
-//     })
-//
-//     var componentDataApp = new Moon({
-//       el: "#componentData"
-//     });
-//
-//     var slotComponentApp = new Moon({
-//       el: "#slotComponent",
-//       data: {
-//         parentMsg: "Hello Moon!"
-//       }
-//     });
-//
-//     var namedSlotComponentApp = new Moon({
-//       el: "#namedSlotComponent",
-//       data: {
-//         parentMsg: "Hello Moon!"
-//       }
-//     });
-//
-//     it("should create a constructor", function() {
-//       expect(new componentConstructor()).to.be.an.instanceof(Moon);
-//     });
-//     var componentApp = new Moon({
-//       el: "#component",
-//       data: {
-//         parentMsg: "Hello Moon!"
-//       }
-//     });
-//     it('should render HTML', function() {
-//       expect(document.getElementById("component")).to.not.be.null;
-//     });
-//
-//     it('should render data from within the component state', function() {
-//       expect(document.getElementById("componentData").innerHTML).to.equal("<div>Hello Moon!</div>");
-//     });
-//
-//     it('should render with props', function() {
-//       expect(document.getElementById("component").innerHTML).to.equal("<div>Hello Moon!</div>");
-//     });
-//
-//     it('should render when updated', function() {
-//       componentApp.set('parentMsg', 'Changed');
-//       Moon.nextTick(function() {
-//         expect(document.getElementById("component").innerHTML).to.equal("<div>Changed</div>");
-//       });
-//     });
-//
-//     it('should render slots', function() {
-//       expect(document.getElementById("slotComponent").innerHTML).to.equal("<div>Hello Moon!</div>");
-//     });
-//
-//     it('should render slots when updated', function() {
-//       slotComponentApp.set('parentMsg', 'Changed');
-//       Moon.nextTick(function() {
-//         expect(document.getElementById("slotComponent").innerHTML).to.equal("<div>Changed</div>");
-//       });
-//     });
-//
-//     it('should render named slots', function() {
-//       expect(document.getElementById("namedSlotComponent").innerHTML).to.equal("<div><h1>Hello Moon!</h1></div>");
-//     });
-//
-//     it('should render named slots when updated', function() {
-//       namedSlotComponentApp.set('parentMsg', 'Changed');
-//       Moon.nextTick(function() {
-//         expect(document.getElementById("namedSlotComponent").innerHTML).to.equal("<div><h1>Changed</h1></div>");
-//       });
-//     });
-// });
-//
-// describe("Events", function() {
-//   var bus = new Moon();
-//   var evt1 = false, evt1_2 = false, handler1, globalEvt = false;
-//   describe("Handler", function() {
-//     it("should create an event listener", function() {
-//       handler1 = function() {
-//         evt1 = true;
-//       }
-//       bus.on('evt1', handler1);
-//       expect(bus.$events.evt1[0]).to.be.a("function");
-//     });
-//     it("should create multiple event listeners", function() {
-//       bus.on('evt1', function() {
-//         evt1_2 = true;
-//       });
-//       expect(bus.$events.evt1[1]).to.be.a("function");
-//     });
-//     it("should create a global event listener", function() {
-//       bus.on('*', function() {
-//         globalEvt = true;
-//       });
-//       expect(bus.$events["*"][0]).to.be.a("function");
-//     });
-//   });
-//
-//   describe("Emit", function() {
-//     it("should invoke all handlers", function() {
-//       bus.emit('evt1');
-//       expect(evt1).to.be['true'];
-//       expect(evt1_2).to.be['true'];
-//     });
-//     it("should call the global handler", function() {
-//       expect(globalEvt).to.be['true'];
-//     });
-//   });
-//
-//   describe("Removing", function() {
-//     it("should remove a handler", function() {
-//       bus.off('evt1', handler1);
-//       expect(bus.$events.evt1.length).to.equal(1);
-//     });
-//     it("should be able to remove all handlers", function() {
-//       bus.off();
-//       expect(bus.$events).to.deep.equal({});
-//     });
-//   });
-// });
-//
-// describe("Optimization", function() {
-//   it("should not rerender static nodes", function() {
-//     createTestElement("staticOptimization", "<h1><h2><h3><h4><h5><h6>Static</h6></h5></h4></h3></h2></h1>");
-//     var staticOptimizationApp = new Moon({
-//       el: "#staticOptimization"
-//     });
-//     var tree = staticOptimizationApp.render();
-//     var assertShouldRender = function(vnode) {
-//       expect(vnode.meta.shouldRender).to.equal(false);
-//       for(var i = 0; i < vnode.children.length; i++) {
-//         assertShouldRender(vnode.children[i]);
-//       }
-//     }
-//     assertShouldRender(tree);
-//   });
-// });
-//
-// describe("Utilities", function() {
-//   it("should merge two objects", function() {
-//     expect(Moon.util.extend({a: true, b: true}, {a: true, b: false, c: true})).to.deep.equal({a: true, b: false, c: true});
-//   });
-//   it("should extend an object", function() {
-//     expect(Moon.util.extend({a: true, b: true}, {a: true, b: false, c: true})).to.deep.equal({a: true, b: false, c: true});
-//   });
-// });
diff --git a/test/karma.sauce.conf.js b/test/karma.sauce.conf.js
index c89b37c9..38525210 100644
--- a/test/karma.sauce.conf.js
+++ b/test/karma.sauce.conf.js
@@ -16,12 +16,6 @@ module.exports = function(config) {
       browserName: 'safari',
       version: '10'
     },
-    sl_ios_safari: {
-      base: 'SauceLabs',
-      browserName: 'iphone',
-      platform: 'OS X 10.9',
-      version: '10'
-    },
     sl_ie_11: {
       base: 'SauceLabs',
       browserName: 'internet explorer',