more elegant solution to m-show and custom directives

kbrsh · Apr 5, 2017 · 5380d31 · 5380d31
1 parent 9ca9fb4
commit 5380d31
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 17 deletions.
diff --git a/dist/moon.js b/dist/moon.js
@@ -1205,7 +1205,7 @@
       var generatedObject = "{attrs: {";
 
       // Array of all directives (to be generated later)
-      var allDirectives = [];
+      vnode.props.directives = [];
 
       if (attrs) {
         // Invoke any special directives that need to change values before code generation
@@ -1222,10 +1222,7 @@
           var attrName = attrs[attr].name;
 
           // If it is a directive, mark it as dynamic
-          if (directives[attrName]) {
-            allDirectives.push(attrs[attr]);
-            vnode.meta.shouldRender = true;
-          } else if (specialDirectives[attrName]) {
+          if (specialDirectives[attrName]) {
             // Generate Special Directives
             // Special directive found that generates code after initial generation, push it to its known special directives to run afterGenerate later
             if (specialDirectives[attrName].afterGenerate) {
@@ -1245,6 +1242,9 @@
 
             // Remove special directive
             delete attrs[attr];
+          } else if (directives[attrName]) {
+            vnode.props.directives.push(attrs[attr]);
+            vnode.meta.shouldRender = true;
           } else {
             var normalizedProp = JSON.stringify(attrs[attr].value);
             var compiledProp = compileTemplate(normalizedProp, true);
@@ -1274,12 +1274,16 @@
       }
 
       // Check for Directives
+      var allDirectives = vnode.props.directives;
       if (allDirectives.length !== 0) {
         generatedObject += ", directives: {";
+
         for (var i = 0; i < allDirectives.length; i++) {
           var directiveInfo = allDirectives[i];
-          generatedObject += '"' + directiveInfo.name + '": ' + JSON.stringify(directiveInfo.value) + ', ';
+          var normalizedValue = directiveInfo.literal ? directiveInfo.value : JSON.stringify(directiveInfo.value);
+          generatedObject += '"' + directiveInfo.name + '": ' + normalizedValue + ', ';
         }
+
         generatedObject = generatedObject.slice(0, -2) + "}";
       }
 
@@ -1861,8 +1865,18 @@
     };
 
     specialDirectives[Moon.config.prefix + "show"] = {
-      duringPropGenerate: function (value, meta, vnode) {
-        return '"m-show": ' + compileTemplate(value, false) + ', ';
+      beforeGenerate: function (value, meta, vnode, parentVNode) {
+        var runTimeShowDirective = {
+          name: Moon.config.prefix + "show",
+          value: compileTemplate(value, false),
+          literal: true
+        };
+
+        if (!vnode.props.directives) {
+          vnode.props.directives = [runTimeShowDirective];
+        } else {
+          vnode.props.directives.push(runTimeShowDirective);
+        }
       }
     };
 

diff --git a/dist/moon.min.js b/dist/moon.min.js
diff --git a/src/compiler/generator.js b/src/compiler/generator.js
@@ -9,7 +9,7 @@ const generateProps = function(vnode, parentVNode) {
 	let generatedObject = "{attrs: {";
 
 	// Array of all directives (to be generated later)
-	let allDirectives = [];
+	vnode.props.directives = [];
 
 	if(attrs) {
 		// Invoke any special directives that need to change values before code generation
@@ -26,10 +26,7 @@ const generateProps = function(vnode, parentVNode) {
 			const attrName = attrs[attr].name;
 
 			// If it is a directive, mark it as dynamic
-			if(directives[attrName]) {
-				allDirectives.push(attrs[attr]);
-				vnode.meta.shouldRender = true;
-			} else if(specialDirectives[attrName]) {
+			if(specialDirectives[attrName]) {
 				// Generate Special Directives
 				// Special directive found that generates code after initial generation, push it to its known special directives to run afterGenerate later
 				if(specialDirectives[attrName].afterGenerate) {
@@ -49,6 +46,9 @@ const generateProps = function(vnode, parentVNode) {
 
 				// Remove special directive
 				delete attrs[attr];
+			} else if(directives[attrName]) {
+				vnode.props.directives.push(attrs[attr]);
+				vnode.meta.shouldRender = true;
 			} else {
 				const normalizedProp = JSON.stringify(attrs[attr].value);
 				const compiledProp = compileTemplate(normalizedProp, true);
@@ -78,12 +78,16 @@ const generateProps = function(vnode, parentVNode) {
 	}
 
 	// Check for Directives
+	let allDirectives = vnode.props.directives;
 	if(allDirectives.length !== 0) {
 		generatedObject += ", directives: {";
+
 		for(var i = 0; i < allDirectives.length; i++) {
 			let directiveInfo = allDirectives[i];
-			generatedObject += `"${directiveInfo.name}": ${JSON.stringify(directiveInfo.value)}, `;
+			const normalizedValue = directiveInfo.literal ? directiveInfo.value : JSON.stringify(directiveInfo.value);
+			generatedObject += `"${directiveInfo.name}": ${normalizedValue}, `;
 		}
+
 		generatedObject = generatedObject.slice(0, -2) + "}";
 	}
 

diff --git a/src/directives/default.js b/src/directives/default.js
@@ -7,8 +7,18 @@ specialDirectives[Moon.config.prefix + "if"] = {
 }
 
 specialDirectives[Moon.config.prefix + "show"] = {
-  duringPropGenerate: function(value, meta, vnode) {
-    return `"m-show": ${compileTemplate(value, false)}, `;
+  beforeGenerate: function(value, meta, vnode, parentVNode) {
+    const runTimeShowDirective = {
+      name: Moon.config.prefix + "show",
+      value: compileTemplate(value, false),
+      literal: true
+    }
+
+    if(!vnode.props.directives) {
+      vnode.props.directives = [runTimeShowDirective];
+    } else {
+      vnode.props.directives.push(runTimeShowDirective);
+    }
   }
 }