From b55f09fcf9f1af090896e5011b997543379cccdf Mon Sep 17 00:00:00 2001
From: Kabir Shah <iamkbrsh@gmail.com>
Date: Tue, 22 May 2018 22:07:54 -0700
Subject: [PATCH] clean up conditional implementation

---
 dist/moon.js                     | 25 +++++++++++++------------
 dist/moon.min.js                 |  2 +-
 src/compiler/generator/create.js | 25 +++++++++++++------------
 3 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/dist/moon.js b/dist/moon.js
index bc5e40d6..95ce09e0 100644
--- a/dist/moon.js
+++ b/dist/moon.js
@@ -355,45 +355,46 @@
   var insertBefore = function (element, reference, parent) { return ("m.ib(" + (getElement(element)) + "," + (getElement(reference)) + "," + (getElement(parent)) + ");"); };
 
   var generateCreate = function (element, index, parent, root, insert) {
-    var createCode;
+    var createCode, mountCode = "", mountElement = element.index;
 
     switch (element.type) {
       case "#if":
         var siblings = parent.children;
+        var ifReference = root.nextIndex++;
         var ifCreates = "";
         var ifBranches = "";
 
         for (var i = index; i < siblings.length;) {
           var sibling = siblings[i];
-          var siblingType = sibling.type;
-          var ifCreate = root.nextIndex++;
           var keyword = (void 0);
 
-          if (siblingType === "#if") {
+          if (sibling.type === "#if") {
             keyword = "if(" + (attributeValue(sibling.attributes[0])) + ")";
-          } else if (siblingType === "#elseif") {
+          } else if (sibling.type === "#elseif") {
             keyword = "else if(" + (attributeValue(sibling.attributes[0])) + ")";
-          } else if (siblingType === "#else") {
+          } else if (sibling.type === "#else") {
             keyword = "else";
           } else {
             break;
           }
 
-          ifCreates += setElement(ifCreate, ("function(){" + (mapReduce(sibling.children, function (child, index) { return generateCreate(child, index, parent, root, element.index); })) + "};"));
-          ifBranches += keyword + "{" + (getElement(ifCreate)) + "();}";
+          ifCreates += setElement(sibling.index, ("function(){" + (mapReduce(sibling.children, function (child, index) { return generateCreate(child, index, parent, root, ifReference); })) + "};"));
+          ifBranches += keyword + "{" + (getElement(sibling.index)) + "();}";
           siblings.splice(i, 1);
         }
 
-        createCode = ifCreates + ifBranches + setElement(element.index, createComment());
+        createCode = setElement(ifReference, createComment());
+        mountCode = ifCreates + ifBranches;
+        mountElement = ifReference;
         break;
       case "#text":
-        createCode = setElement(element.index, createTextNode(attributeValue(element.attributes[0])));
+        createCode = setElement(mountElement, createTextNode(attributeValue(element.attributes[0])));
         break;
       default:
-        createCode = setElement(element.index, createElement(element.type)) + mapReduce(element.attributes, function (attribute) { return attribute.key[0] === "@" ? addEventListener(element.index, attribute) : setAttribute(element.index, attribute); }) + mapReduce(element.children, function (child, index) { return generateCreate(child, index, element, root); });
+        createCode = setElement(mountElement, createElement(element.type)) + mapReduce(element.attributes, function (attribute) { return attribute.key[0] === "@" ? addEventListener(mountElement, attribute) : setAttribute(mountElement, attribute); }) + mapReduce(element.children, function (child, index) { return generateCreate(child, index, element, root); });
     }
 
-    return createCode + (insert === undefined ? appendChild(element.index, parent.index) : insertBefore(element.index, insert, parent.index));
+    return createCode + (insert === undefined ? appendChild(mountElement, parent.index) : insertBefore(mountElement, insert, parent.index)) + mountCode;
   };
 
   var generateUpdate = function (element, index, parent, root) {
diff --git a/dist/moon.min.js b/dist/moon.min.js
index bb8212cf..9bd4e8f5 100644
--- a/dist/moon.min.js
+++ b/dist/moon.min.js
@@ -4,4 +4,4 @@
  * Released under the MIT License
  * https://kbrsh.github.io/moon
  */
-!function(e,t){"undefined"==typeof module?e.Moon=t():module.exports=t()}(this,function(){"use strict";var u=/"[^"]*"|'[^']*'|\d+[a-zA-Z$_]\w*|\.[a-zA-Z$_]\w*|[a-zA-Z$_]\w*:|([a-zA-Z$_]\w*)/g,a=["NaN","event","false","in","m","null","this","true","typeof","undefined"],s=function(e,t){for(var n,i=!1;null!==(n=u.exec(e));){var r=n[1];void 0!==r&&-1===a.indexOf(r)&&"$"!==r[0]&&(i=!0,-1===t.indexOf(r)&&t.push(r))}return i},e={silent:!0},d=/\s+/,v=function(e,t,n,i,r){for(;e<n;){var u=t[e];if("/"===u||">"===u)break;if(d.test(u))e+=1;else{for(var a="",o="",c=!1;e<n;){if("/"===(u=t[e])||">"===u||d.test(u)){o=a;break}if("="===u){e+=1;break}a+=u,e+=1}if(0===o.length){var f=void 0;for('"'===(u=t[e])||"'"===u?(f=u,e+=1):"{"===u?(f="}",c=!0,e+=1):f=d;e<n&&"/"!==(u=t[e])&&">"!==u;){if("object"==typeof f&&f.test(u)||u===f){e+=1;break}o+=u,e+=1}}r.push({key:a,value:o,expression:c,dynamic:c&&s(o,i)})}}return e},o=function(e,t,n,i,r){for(var u={index:i[0].nextIndex++,type:"",attributes:[],children:[]};e<n;){var a=t[e];if(">"===a){var o=u.attributes;i.push(u);for(var c=0;c<o.length;){var f=o[c];"#"===f.key[0]?(u={index:i[0].nextIndex++,type:f.key,attributes:[{key:"",value:f.value,expression:f.expression,dynamic:f.dynamic}],children:[u]},o.splice(c,1)):c+=1}i[i.length-2].children.push(u),e+=1;break}if("/"===a&&">"===t[e+1]){i[i.length-1].children.push(u),e+=2;break}d.test(a)&&(e+=1)||"="===a?e=v(e,t,n,r,u.attributes):(u.type+=a,e+=1)}return e},c=function(e,t,n,i){for(;e<n;e++){var r=t[e];if(">"===r){e+=1;break}r}var u=i.pop();return u.type,e},f=function(e,t,n){for(;e<n;){var i=t[e],r=t[e+1],u=t[e+2];if("<"===i&&"!"===r&&"-"===u&&"-"===t[e+3])e=f(e+4,t,n);else{if("-"===i&&"-"===r&&">"===u){e+=3;break}e+=1}}return e},h=/(?:(?:&(?:amp|gt|lt|nbsp|quot);)|"|\\|\n)/g,l={"&amp;":"&","&gt;":">","&lt;":"<","&nbsp;":" ","&quot;":'\\"',"\\":"\\\\",'"':'\\"',"\n":"\\n"},p=function(e,t,n,i){for(var r="";e<n;e++){var u=t[e];if("<"===u||"{"===u)break;r+=u}return d.test(r)||i[i.length-1].children.push({index:i[0].nextIndex++,type:"#text",attributes:[{key:"",value:r.replace(h,function(e){return l[e]}),expression:!1,dynamic:!1}],children:[]}),e},m=function(e,t,n,i,r){for(var u="";e<n;e++){var a=t[e];if("}"===a){e+=1;break}u+=a}return i[i.length-1].children.push({index:i[0].nextIndex++,type:"#text",attributes:[{key:"",value:u,expression:!0,dynamic:s(u,r)}],children:[]}),e},b=function(e,t){for(var n="",i=0;i<e.length;i++)n+=t(e[i],i);return n},k=function(e){return"m["+e+"]"},g=function(e,t){return k(e)+"="+t},w=function(e){return e.expression?e.value:'"'+e.value+'"'},q=function(e,t){return"m.sa("+k(e)+',"'+t.key+'",'+w(t)+");"},I=function(i,e,n,r,t){var u,a,o,c,f,s;switch(i.type){case"#if":for(var d=n.children,v="",h="",l=e;l<d.length;){var p=d[l],m=p.type,x=r.nextIndex++,y=void 0;if("#if"===m)y="if("+w(p.attributes[0])+")";else if("#elseif"===m)y="else if("+w(p.attributes[0])+")";else{if("#else"!==m)break;y="else"}v+=g(x,"function(){"+b(p.children,function(e,t){return I(e,t,n,r,i.index)})+"};"),h+=y+"{"+k(x)+"();}",d.splice(l,1)}u=v+h+g(i.index,"m.cc();");break;case"#text":u=g(i.index,"m.ctn("+w(i.attributes[0])+");");break;default:u=g(i.index,'m.ce("'+i.type+'");')+b(i.attributes,function(e){return"@"===e.key[0]?(t=i.index,n=e,"m.ael("+k(t)+',"'+n.key.substring(1)+'",function($event){'+w(n)+"});"):q(i.index,e);var t,n})+b(i.children,function(e,t){return I(e,t,i,r)})}return u+(void 0===t?(f=i.index,s=n.index,"m.ac("+k(f)+","+k(s)+");"):(a=i.index,o=t,c=n.index,"m.ib("+k(a)+","+k(o)+","+k(c)+");"))},x=function(n,e,t,i){switch(n.type){case"#text":var r=n.attributes[0];return r.dynamic?(u=n.index,a=r.value,"m.stc("+k(u)+","+a+");"):"";default:return b(n.attributes,function(e){return"@"!==e.key[0]&&e.dynamic?q(n.index,e):""})+b(n.children,function(e,t){return x(e,t,n,i)})}var u,a},i=function(e,t,n,i){return r=e.index,u=n.index,"m.rc("+k(r)+","+k(u)+");";var r,u},y=function(e){return n=function(e){for(var t=e.length,n=[],i={index:0,nextIndex:1,type:"#root",attributes:[],children:[],dependencies:n},r=[i],u=0;u<t;){var a=e[u];u="<"===a?"!"===e[u+1]&&"-"===e[u+2]&&"-"===e[u+3]?f(u+4,e,t):"/"===e[u+1]?c(u+2,e,t,r):o(u+1,e,t,r,n):"{"===a?m(u+1,e,t,r,n):p(u,e,t,r)}return i}(e),t=b(n.dependencies,function(e){return"var "+e+"=this.data."+e+";"}),new Function("return [function(m){this.m[0]=m;m=this.m;"+t+b(n.children,function(e,t){return I(e,t,n,n)})+"},function(){var m=this.m;"+t+b(n.children,function(e,t){return x(e,t,n,n)})+"},function(){var m=this.m;"+b(n.children,function(e,t){return i(e,0,n)})+"m=[m[0]];}];")();var n,t},$={},A=function(e){return document.createElement(e)},z=function(e){return document.createTextNode(e)},C=function(){return document.createComment("")},Z=function(e,t,n){e.setAttribute(t,n)},_=function(e,t,n){e.addEventListener(t,n)},j=function(e,t){e.textContent=t},N=function(e,t){t.appendChild(e)},O=function(e,t){t.removeChild(e)},E=function(e,t,n){n.insertBefore(e,t)},T=function(e){this.view[0](e),this.emit("created")},B=function(e,t){if(void 0!==e)if("object"==typeof e)for(var n in e)this.data[n]=e[n];else this.data[e]=t;if(!1===this.queued){this.queued=!0;var i=this;setTimeout(function(){i.view[1](),i.queued=!1,i.emit("updated")},0)}},F=function(){this.view[2](),this.emit("destroyed")},L=function(e,t){var n=this.data,i=n[e];void 0===i?n[e]=t:"function"==typeof i?n[e]=[i,t]:i.push(t)},M=function(e,t){if(void 0===t)this.data[e]=[];else{var n=this.data,i=n[e];"function"==typeof i?n[e]=void 0:i.splice(i.indexOf(t),1)}},S=function(e,t){var n=this.data[e];if(void 0!==n)if("function"==typeof n)n(t);else for(var i=0;i<n.length;i++)n[i](t)},D=function(u,a){return function(){var e,t=this;this.name=u,this.queued=!1,this.view=a.view.map(function(e){return e.bind(t)}),this.m=((e=[]).c=$,e.ce=A,e.ctn=z,e.cc=C,e.sa=Z,e.ael=_,e.stc=j,e.ac=N,e.rc=O,e.ib=E,e);var n=this.data=a.data(),i=a.actions;for(var r in i)n[r]=i[r].bind(t);this.create=T,this.update=B,this.destroy=F,this.on=L,this.off=M,this.emit=S}};function t(e){var t=e.root;"string"==typeof t&&(t=document.querySelector(t));var n=e.view;"string"==typeof n&&(e.view=y(n));var i=e.data;void 0===i?e.data=function(){return{}}:"object"==typeof i&&(e.data=function(){return i}),void 0===e.actions&&(e.actions={});var r=new(D("#m",e));return r.create(t),r}return t.extend=function(e,t){var n=t.view;"string"==typeof n&&(t.view=y(n)),void 0===t.data&&(t.data=function(){return{}}),void 0===t.actions&&(t.actions={}),$[e]=D(e,t)},t.compile=y,t.config=e,t});
\ No newline at end of file
+!function(e,t){"undefined"==typeof module?e.Moon=t():module.exports=t()}(this,function(){"use strict";var u=/"[^"]*"|'[^']*'|\d+[a-zA-Z$_]\w*|\.[a-zA-Z$_]\w*|[a-zA-Z$_]\w*:|([a-zA-Z$_]\w*)/g,a=["NaN","event","false","in","m","null","this","true","typeof","undefined"],s=function(e,t){for(var n,i=!1;null!==(n=u.exec(e));){var r=n[1];void 0!==r&&-1===a.indexOf(r)&&"$"!==r[0]&&(i=!0,-1===t.indexOf(r)&&t.push(r))}return i},e={silent:!0},d=/\s+/,v=function(e,t,n,i,r){for(;e<n;){var u=t[e];if("/"===u||">"===u)break;if(d.test(u))e+=1;else{for(var a="",o="",c=!1;e<n;){if("/"===(u=t[e])||">"===u||d.test(u)){o=a;break}if("="===u){e+=1;break}a+=u,e+=1}if(0===o.length){var f=void 0;for('"'===(u=t[e])||"'"===u?(f=u,e+=1):"{"===u?(f="}",c=!0,e+=1):f=d;e<n&&"/"!==(u=t[e])&&">"!==u;){if("object"==typeof f&&f.test(u)||u===f){e+=1;break}o+=u,e+=1}}r.push({key:a,value:o,expression:c,dynamic:c&&s(o,i)})}}return e},o=function(e,t,n,i,r){for(var u={index:i[0].nextIndex++,type:"",attributes:[],children:[]};e<n;){var a=t[e];if(">"===a){var o=u.attributes;i.push(u);for(var c=0;c<o.length;){var f=o[c];"#"===f.key[0]?(u={index:i[0].nextIndex++,type:f.key,attributes:[{key:"",value:f.value,expression:f.expression,dynamic:f.dynamic}],children:[u]},o.splice(c,1)):c+=1}i[i.length-2].children.push(u),e+=1;break}if("/"===a&&">"===t[e+1]){i[i.length-1].children.push(u),e+=2;break}d.test(a)&&(e+=1)||"="===a?e=v(e,t,n,r,u.attributes):(u.type+=a,e+=1)}return e},c=function(e,t,n,i){for(;e<n;e++){var r=t[e];if(">"===r){e+=1;break}r}var u=i.pop();return u.type,e},f=function(e,t,n){for(;e<n;){var i=t[e],r=t[e+1],u=t[e+2];if("<"===i&&"!"===r&&"-"===u&&"-"===t[e+3])e=f(e+4,t,n);else{if("-"===i&&"-"===r&&">"===u){e+=3;break}e+=1}}return e},h=/(?:(?:&(?:amp|gt|lt|nbsp|quot);)|"|\\|\n)/g,l={"&amp;":"&","&gt;":">","&lt;":"<","&nbsp;":" ","&quot;":'\\"',"\\":"\\\\",'"':'\\"',"\n":"\\n"},p=function(e,t,n,i){for(var r="";e<n;e++){var u=t[e];if("<"===u||"{"===u)break;r+=u}return d.test(r)||i[i.length-1].children.push({index:i[0].nextIndex++,type:"#text",attributes:[{key:"",value:r.replace(h,function(e){return l[e]}),expression:!1,dynamic:!1}],children:[]}),e},m=function(e,t,n,i,r){for(var u="";e<n;e++){var a=t[e];if("}"===a){e+=1;break}u+=a}return i[i.length-1].children.push({index:i[0].nextIndex++,type:"#text",attributes:[{key:"",value:u,expression:!0,dynamic:s(u,r)}],children:[]}),e},k=function(e,t){for(var n="",i=0;i<e.length;i++)n+=t(e[i],i);return n},g=function(e){return"m["+e+"]"},w=function(e,t){return g(e)+"="+t},q=function(e){return e.expression?e.value:'"'+e.value+'"'},I=function(e,t){return"m.sa("+g(e)+',"'+t.key+'",'+q(t)+");"},$=function(n,e,i,r,t){var u,a,o,c,f,s,d="",v=n.index;switch(n.type){case"#if":for(var h=i.children,l=r.nextIndex++,p="",m="",x=e;x<h.length;){var y=h[x],b=void 0;if("#if"===y.type)b="if("+q(y.attributes[0])+")";else if("#elseif"===y.type)b="else if("+q(y.attributes[0])+")";else{if("#else"!==y.type)break;b="else"}p+=w(y.index,"function(){"+k(y.children,function(e,t){return $(e,t,i,r,l)})+"};"),m+=b+"{"+g(y.index)+"();}",h.splice(x,1)}u=w(l,"m.cc();"),d=p+m,v=l;break;case"#text":u=w(v,"m.ctn("+q(n.attributes[0])+");");break;default:u=w(v,'m.ce("'+n.type+'");')+k(n.attributes,function(e){return"@"===e.key[0]?(t=e,"m.ael("+g(v)+',"'+t.key.substring(1)+'",function($event){'+q(t)+"});"):I(v,e);var t})+k(n.children,function(e,t){return $(e,t,n,r)})}return u+(void 0===t?(f=v,s=i.index,"m.ac("+g(f)+","+g(s)+");"):(a=v,o=t,c=i.index,"m.ib("+g(a)+","+g(o)+","+g(c)+");"))+d},x=function(n,e,t,i){switch(n.type){case"#text":var r=n.attributes[0];return r.dynamic?(u=n.index,a=r.value,"m.stc("+g(u)+","+a+");"):"";default:return k(n.attributes,function(e){return"@"!==e.key[0]&&e.dynamic?I(n.index,e):""})+k(n.children,function(e,t){return x(e,t,n,i)})}var u,a},i=function(e,t,n,i){return r=e.index,u=n.index,"m.rc("+g(r)+","+g(u)+");";var r,u},y=function(e){return n=function(e){for(var t=e.length,n=[],i={index:0,nextIndex:1,type:"#root",attributes:[],children:[],dependencies:n},r=[i],u=0;u<t;){var a=e[u];u="<"===a?"!"===e[u+1]&&"-"===e[u+2]&&"-"===e[u+3]?f(u+4,e,t):"/"===e[u+1]?c(u+2,e,t,r):o(u+1,e,t,r,n):"{"===a?m(u+1,e,t,r,n):p(u,e,t,r)}return i}(e),t=k(n.dependencies,function(e){return"var "+e+"=this.data."+e+";"}),new Function("return [function(m){this.m[0]=m;m=this.m;"+t+k(n.children,function(e,t){return $(e,t,n,n)})+"},function(){var m=this.m;"+t+k(n.children,function(e,t){return x(e,t,n,n)})+"},function(){var m=this.m;"+k(n.children,function(e,t){return i(e,0,n)})+"m=[m[0]];}];")();var n,t},b={},A=function(e){return document.createElement(e)},z=function(e){return document.createTextNode(e)},C=function(){return document.createComment("")},Z=function(e,t,n){e.setAttribute(t,n)},_=function(e,t,n){e.addEventListener(t,n)},j=function(e,t){e.textContent=t},N=function(e,t){t.appendChild(e)},O=function(e,t){t.removeChild(e)},E=function(e,t,n){n.insertBefore(e,t)},T=function(e){this.view[0](e),this.emit("created")},B=function(e,t){if(void 0!==e)if("object"==typeof e)for(var n in e)this.data[n]=e[n];else this.data[e]=t;if(!1===this.queued){this.queued=!0;var i=this;setTimeout(function(){i.view[1](),i.queued=!1,i.emit("updated")},0)}},F=function(){this.view[2](),this.emit("destroyed")},L=function(e,t){var n=this.data,i=n[e];void 0===i?n[e]=t:"function"==typeof i?n[e]=[i,t]:i.push(t)},M=function(e,t){if(void 0===t)this.data[e]=[];else{var n=this.data,i=n[e];"function"==typeof i?n[e]=void 0:i.splice(i.indexOf(t),1)}},S=function(e,t){var n=this.data[e];if(void 0!==n)if("function"==typeof n)n(t);else for(var i=0;i<n.length;i++)n[i](t)},D=function(u,a){return function(){var e,t=this;this.name=u,this.queued=!1,this.view=a.view.map(function(e){return e.bind(t)}),this.m=((e=[]).c=b,e.ce=A,e.ctn=z,e.cc=C,e.sa=Z,e.ael=_,e.stc=j,e.ac=N,e.rc=O,e.ib=E,e);var n=this.data=a.data(),i=a.actions;for(var r in i)n[r]=i[r].bind(t);this.create=T,this.update=B,this.destroy=F,this.on=L,this.off=M,this.emit=S}};function t(e){var t=e.root;"string"==typeof t&&(t=document.querySelector(t));var n=e.view;"string"==typeof n&&(e.view=y(n));var i=e.data;void 0===i?e.data=function(){return{}}:"object"==typeof i&&(e.data=function(){return i}),void 0===e.actions&&(e.actions={});var r=new(D("#m",e));return r.create(t),r}return t.extend=function(e,t){var n=t.view;"string"==typeof n&&(t.view=y(n)),void 0===t.data&&(t.data=function(){return{}}),void 0===t.actions&&(t.actions={}),b[e]=D(e,t)},t.compile=y,t.config=e,t});
\ No newline at end of file
diff --git a/src/compiler/generator/create.js b/src/compiler/generator/create.js
index 0134d86b..0595acb9 100644
--- a/src/compiler/generator/create.js
+++ b/src/compiler/generator/create.js
@@ -1,43 +1,44 @@
 import { mapReduce, getElement, setElement, createElement, createTextNode, createComment, attributeValue, setAttribute, addEventListener, appendChild, insertBefore } from "./util";
 
 export const generateCreate = (element, index, parent, root, insert) => {
-  let createCode;
+  let createCode, mountCode = "", mountElement = element.index;
 
   switch (element.type) {
     case "#if":
       const siblings = parent.children;
+      const ifReference = root.nextIndex++;
       let ifCreates = "";
       let ifBranches = "";
 
       for (let i = index; i < siblings.length;) {
         const sibling = siblings[i];
-        const siblingType = sibling.type;
-        const ifCreate = root.nextIndex++;
         let keyword;
 
-        if (siblingType === "#if") {
+        if (sibling.type === "#if") {
           keyword = `if(${attributeValue(sibling.attributes[0])})`;
-        } else if (siblingType === "#elseif") {
+        } else if (sibling.type === "#elseif") {
           keyword = `else if(${attributeValue(sibling.attributes[0])})`;
-        } else if (siblingType === "#else") {
+        } else if (sibling.type === "#else") {
           keyword = "else";
         } else {
           break;
         }
 
-        ifCreates += setElement(ifCreate, `function(){${mapReduce(sibling.children, (child, index) => generateCreate(child, index, parent, root, element.index))}};`);
-        ifBranches += `${keyword}{${getElement(ifCreate)}();}`;
+        ifCreates += setElement(sibling.index, `function(){${mapReduce(sibling.children, (child, index) => generateCreate(child, index, parent, root, ifReference))}};`);
+        ifBranches += `${keyword}{${getElement(sibling.index)}();}`;
         siblings.splice(i, 1);
       }
 
-      createCode = ifCreates + ifBranches + setElement(element.index, createComment());
+      createCode = setElement(ifReference, createComment());
+      mountCode = ifCreates + ifBranches;
+      mountElement = ifReference;
       break;
     case "#text":
-      createCode = setElement(element.index, createTextNode(attributeValue(element.attributes[0])));
+      createCode = setElement(mountElement, createTextNode(attributeValue(element.attributes[0])));
       break;
     default:
-      createCode = setElement(element.index, createElement(element.type)) + mapReduce(element.attributes, (attribute) => attribute.key[0] === "@" ? addEventListener(element.index, attribute) : setAttribute(element.index, attribute)) + mapReduce(element.children, (child, index) => generateCreate(child, index, element, root));
+      createCode = setElement(mountElement, createElement(element.type)) + mapReduce(element.attributes, (attribute) => attribute.key[0] === "@" ? addEventListener(mountElement, attribute) : setAttribute(mountElement, attribute)) + mapReduce(element.children, (child, index) => generateCreate(child, index, element, root));
   }
 
-  return createCode + (insert === undefined ? appendChild(element.index, parent.index) : insertBefore(element.index, insert, parent.index));
+  return createCode + (insert === undefined ? appendChild(mountElement, parent.index) : insertBefore(mountElement, insert, parent.index)) + mountCode;
 };