remove custom prefix configuration option + make directive generation…

… faster
kbrsh · Apr 22, 2017 · 1ba2ec5 · 1ba2ec5
1 parent 2b6415b
commit 1ba2ec5
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 41 deletions.
diff --git a/dist/moon.js b/dist/moon.js
@@ -367,7 +367,7 @@
         // Create textnode
         el = document.createTextNode(vnode.val);
       } else {
-        el = vnode.meta.isSVG ? document.createElementNS('http://www.w3.org/2000/svg', vnode.type) : document.createElement(vnode.type);
+        el = vnode.meta.isSVG ? document.createElementNS("http://www.w3.org/2000/svg", vnode.type) : document.createElement(vnode.type);
         // Optimization: VNode only has one child that is text, and create it here
         if (vnode.children.length === 1 && vnode.children[0].type === "#text") {
           el.textContent = vnode.children[0].val;
@@ -379,7 +379,7 @@
             var childNode = createNodeFromVNode(vnode.children[i], instance);
             el.appendChild(childNode);
             // Component detected, mount it here
-            if (childVNode.meta.component) {
+            if (childVNode.meta.component !== undefined) {
               createComponentFromVNode(childNode, childVNode, childVNode.meta.component);
             }
           }
@@ -564,11 +564,16 @@
      */
     var createComponentFromVNode = function (node, vnode, component) {
       var componentInstance = new component.CTor();
+      var props = componentInstance.$props;
+      var data = componentInstance.$data;
+      var attrs = vnode.props.attrs;
+
       // Merge data with provided props
-      for (var i = 0; i < componentInstance.$props.length; i++) {
-        var prop = componentInstance.$props[i];
-        componentInstance.$data[prop] = vnode.props.attrs[prop];
+      for (var i = 0; i < props.length; i++) {
+        var prop = props[i];
+        data[prop] = attrs[prop];
       }
+
       componentInstance.$slots = getSlots(vnode.children);
       componentInstance.$el = node;
       componentInstance.build();
@@ -633,9 +638,13 @@
       }
 
       // Execute any directives
-      if (vnode.props.directives !== undefined) {
-        for (var directive in vnode.props.directives) {
-          directives[directive](node, vnode.props.directives[directive], vnode);
+      var vnodeDirectives = null;
+      if ((vnodeDirectives = vnode.props.directives) !== undefined) {
+        for (var directive in vnodeDirectives) {
+          var directiveFn = null;
+          if ((directiveFn = directives[directive]) !== undefined) {
+            directiveFn(node, vnodeDirectives[directive], vnode);
+          }
         }
       }
 
@@ -1412,7 +1421,7 @@
 
           // Remove special directive
           delete attrs[attr];
-        } else if (directives[attrName] !== undefined) {
+        } else if (attrName[0] + attrName[1] === "m-") {
           vnode.props.directives.push(attrInfo);
           vnode.meta.shouldRender = true;
         } else {
@@ -2048,7 +2057,6 @@
      */
     Moon.config = {
       silent: "development" === "production" || typeof console === 'undefined',
-      prefix: "m-",
       delimiters: ["{{", "}}"],
       keyCodes: function (keyCodes) {
         for (var keyCode in keyCodes) {
@@ -2106,7 +2114,7 @@
      * @param {Function} action
      */
     Moon.directive = function (name, action) {
-      directives[Moon.config.prefix + name] = action;
+      directives["m-" + name] = action;
     };
 
     /**
@@ -2152,13 +2160,13 @@
 
     /* ======= Default Directives ======= */
 
-    specialDirectives[Moon.config.prefix + "if"] = {
+    specialDirectives["m-if"] = {
       afterGenerate: function (value, meta, code, vnode) {
         return compileTemplateExpression(value) + ' ? ' + code + ' : h("#text", ' + generateMeta(defaultMetadata()) + ', "")';
       }
     };
 
-    specialDirectives[Moon.config.prefix + "for"] = {
+    specialDirectives["m-for"] = {
       beforeGenerate: function (value, meta, vnode, parentVNode) {
         // Setup Deep Flag to Flatten Array
         parentVNode.deep = true;
@@ -2182,7 +2190,7 @@
       }
     };
 
-    specialDirectives[Moon.config.prefix + "on"] = {
+    specialDirectives["m-on"] = {
       beforeGenerate: function (value, meta, vnode) {
         // Extract Event, Modifiers, and Parameters
         var methodToCall = value;
@@ -2216,7 +2224,7 @@
       }
     };
 
-    specialDirectives[Moon.config.prefix + "model"] = {
+    specialDirectives["m-model"] = {
       beforeGenerate: function (value, meta, vnode) {
         // Compile a string value for the keypath
         var keypath = compileTemplateExpression(value);
@@ -2251,7 +2259,7 @@
       }
     };
 
-    specialDirectives[Moon.config.prefix + "literal"] = {
+    specialDirectives["m-literal"] = {
       duringPropGenerate: function (value, meta, vnode) {
         var prop = meta.arg;
 
@@ -2265,7 +2273,7 @@
       }
     };
 
-    specialDirectives[Moon.config.prefix + "html"] = {
+    specialDirectives["m-html"] = {
       beforeGenerate: function (value, meta, vnode) {
         var dom = vnode.props.dom;
         if (dom === undefined) {
@@ -2275,9 +2283,9 @@
       }
     };
 
-    specialDirectives[Moon.config.prefix + "mask"] = {};
+    specialDirectives["m-mask"] = {};
 
-    directives[Moon.config.prefix + "show"] = function (el, val, vnode) {
+    directives["m-show"] = function (el, val, vnode) {
       el.style.display = val ? '' : 'none';
     };
     return Moon;

diff --git a/dist/moon.min.js b/dist/moon.min.js
diff --git a/src/compiler/generator.js b/src/compiler/generator.js
@@ -66,7 +66,7 @@ const generateProps = function(vnode, parentVNode) {
 
 			// Remove special directive
 			delete attrs[attr];
-		} else if(directives[attrName] !== undefined) {
+		} else if((attrName[0] + attrName[1]) === "m-") {
 			vnode.props.directives.push(attrInfo);
 			vnode.meta.shouldRender = true;
 		} else {

diff --git a/src/directives/default.js b/src/directives/default.js
@@ -1,12 +1,12 @@
 /* ======= Default Directives ======= */
 
-specialDirectives[Moon.config.prefix + "if"] = {
+specialDirectives["m-if"] = {
   afterGenerate: function(value, meta, code, vnode) {
     return `${compileTemplateExpression(value)} ? ${code} : h("#text", ${generateMeta(defaultMetadata())}, "")`;
   }
 }
 
-specialDirectives[Moon.config.prefix + "for"] = {
+specialDirectives["m-for"] = {
   beforeGenerate: function(value, meta, vnode, parentVNode) {
     // Setup Deep Flag to Flatten Array
     parentVNode.deep = true;
@@ -30,7 +30,7 @@ specialDirectives[Moon.config.prefix + "for"] = {
   }
 }
 
-specialDirectives[Moon.config.prefix + "on"] = {
+specialDirectives["m-on"] = {
   beforeGenerate: function(value, meta, vnode) {
     // Extract Event, Modifiers, and Parameters
     let methodToCall = value;
@@ -64,7 +64,7 @@ specialDirectives[Moon.config.prefix + "on"] = {
   }
 }
 
-specialDirectives[Moon.config.prefix + "model"] = {
+specialDirectives["m-model"] = {
   beforeGenerate: function(value, meta, vnode) {
     // Compile a string value for the keypath
     const keypath = compileTemplateExpression(value);
@@ -99,7 +99,7 @@ specialDirectives[Moon.config.prefix + "model"] = {
   }
 };
 
-specialDirectives[Moon.config.prefix + "literal"] = {
+specialDirectives["m-literal"] = {
   duringPropGenerate: function(value, meta, vnode) {
     const prop = meta.arg;
 
@@ -113,7 +113,7 @@ specialDirectives[Moon.config.prefix + "literal"] = {
   }
 };
 
-specialDirectives[Moon.config.prefix + "html"] = {
+specialDirectives["m-html"] = {
   beforeGenerate: function(value, meta, vnode) {
     const dom = vnode.props.dom;
     if(dom === undefined) {
@@ -123,10 +123,10 @@ specialDirectives[Moon.config.prefix + "html"] = {
   }
 }
 
-specialDirectives[Moon.config.prefix + "mask"] = {
+specialDirectives["m-mask"] = {
 
 }
 
-directives[Moon.config.prefix + "show"] = function(el, val, vnode) {
+directives["m-show"] = function(el, val, vnode) {
   el.style.display = (val ? '' : 'none');
 }
diff --git a/src/global/api.js b/src/global/api.js
@@ -5,7 +5,6 @@
  */
 Moon.config = {
   silent: ("__ENV__" === "production") || (typeof console === 'undefined'),
-  prefix: "m-",
   delimiters: ["{{", "}}"],
   keyCodes: function(keyCodes) {
     for(var keyCode in keyCodes) {
@@ -63,7 +62,7 @@ Moon.nextTick = function(task) {
  * @param {Function} action
  */
 Moon.directive = function(name, action) {
-  directives[Moon.config.prefix + name] = action;
+  directives["m-" + name] = action;
 }
 
 /**

diff --git a/src/util/dom.js b/src/util/dom.js
@@ -57,7 +57,7 @@ const createNodeFromVNode = function(vnode, instance) {
     // Create textnode
     el = document.createTextNode(vnode.val);
   } else {
-    el = vnode.meta.isSVG ? document.createElementNS('http://www.w3.org/2000/svg', vnode.type) : document.createElement(vnode.type);
+    el = vnode.meta.isSVG ? document.createElementNS("http://www.w3.org/2000/svg", vnode.type) : document.createElement(vnode.type);
     // Optimization: VNode only has one child that is text, and create it here
     if(vnode.children.length === 1 && vnode.children[0].type === "#text") {
       el.textContent = vnode.children[0].val;
@@ -69,7 +69,7 @@ const createNodeFromVNode = function(vnode, instance) {
         let childNode = createNodeFromVNode(vnode.children[i], instance);
         el.appendChild(childNode);
         // Component detected, mount it here
-        if(childVNode.meta.component) {
+        if(childVNode.meta.component !== undefined) {
           createComponentFromVNode(childNode, childVNode, childVNode.meta.component);
         }
       }

diff --git a/src/util/vdom.js b/src/util/vdom.js
@@ -110,12 +110,17 @@ const h = function(tag, attrs, meta, children) {
  * @return {Object} DOM Node
  */
 const createComponentFromVNode = function(node, vnode, component) {
-  let componentInstance = new component.CTor();
+  const componentInstance = new component.CTor();
+  const props = componentInstance.$props;
+  const data = componentInstance.$data;
+  const attrs = vnode.props.attrs;
+
   // Merge data with provided props
-  for(let i = 0; i < componentInstance.$props.length; i++) {
-    var prop = componentInstance.$props[i];
-    componentInstance.$data[prop] = vnode.props.attrs[prop];
+  for(let i = 0; i < props.length; i++) {
+    const prop = props[i];
+    data[prop] = attrs[prop];
   }
+
   componentInstance.$slots = getSlots(vnode.children);
   componentInstance.$el = node;
   componentInstance.build();
@@ -137,7 +142,7 @@ const diffEventListeners = function(node, oldVNode, vnode) {
   const oldEventListeners = oldVNode.meta.eventListeners;
   const eventListeners = vnode.meta.eventListeners;
 
-  for(let type in eventListeners) {
+  for(const type in eventListeners) {
     const oldEventListener = oldEventListeners[type];
     if(oldEventListener === undefined) {
       node.removeEventListener(type, oldEventListener);
@@ -180,9 +185,13 @@ const diffProps = function(node, nodeProps, vnode) {
   }
 
   // Execute any directives
-  if(vnode.props.directives !== undefined) {
-    for(let directive in vnode.props.directives) {
-      directives[directive](node, vnode.props.directives[directive], vnode);
+  let vnodeDirectives = null;
+  if((vnodeDirectives = vnode.props.directives) !== undefined) {
+    for(const directive in vnodeDirectives) {
+      let directiveFn = null;
+      if((directiveFn = directives[directive]) !== undefined) {
+        directiveFn(node, vnodeDirectives[directive], vnode);
+      }
     }
   }