compile arguments & events, consistent formatting

kbrsh · May 13, 2018 · c123582 · c123582
1 parent 8118cad
commit c123582
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 22 deletions.
diff --git a/dist/moon.js b/dist/moon.js
@@ -75,6 +75,7 @@
         continue;
       } else {
         var key = "";
+        var argument = "";
         var value = "";
         var expression = false;
 
@@ -87,6 +88,12 @@
           } else if (char === "=") {
             index += 1;
             break;
+          } else if (char === ":" && key[0] === "m" && key[1] === "-") {
+            argument += input[index + 1];
+            index += 2;
+          } else if (argument.length !== 0) {
+            argument += char;
+            index += 1;
           } else {
             key += char;
             index += 1;
@@ -126,6 +133,7 @@
         attributes.push({
           key: key,
           value: value,
+          argument: argument,
           expression: expression,
           dynamic: expression && parseTemplate(value, dependencies, locals)
         });
@@ -260,7 +268,7 @@
   var parse = function (input) {
     var length = input.length;
     var dependencies = [];
-    var locals = ["NaN", "false", "in", "null", "true", "typeof", "undefined"];
+    var locals = ["NaN", "event", "false", "in", "null", "true", "typeof", "undefined"];
 
     var root = {
       type: "m-fragment",
@@ -295,20 +303,37 @@
 
   var mapReduce = function (arr, fn) { return arr.reduce(function (result, current) { return result + fn(current); }, ""); };
 
+  var attributeValue = function (attribute) { return attribute.expression ? attribute.value : ("\"" + (attribute.value) + "\""); };
+
+  var generateCreateAttributes = function (element) { return mapReduce(element.attributes, function (attribute) {
+    var key = attribute.key;
+
+    switch (key) {
+      case "m-for":
+        break;
+      case "m-if":
+        break;
+      case "m-on":
+        return ("m[" + (element.index) + "].addEventListener(\"" + (attribute.argument) + "\", function(event){" + (attributeValue(attribute)) + "});");
+        break;
+      default:
+        return ("m[" + (element.index) + "].setAttribute(\"" + key + "\"," + (attributeValue(attribute)) + ");");
+    }
+  }); };
+
   var generateCreate = function (element) {
     switch (element.type) {
       case "m-fragment":
         return mapReduce(element.children, generateCreate);
         break;
       case "m-expression":
-        return ("m[" + (element.index) + "] = m.ct(" + (element.content) + ");");
+        return ("m[" + (element.index) + "]=m.ct(" + (element.content) + ");");
         break;
       case "m-text":
-        return ("m[" + (element.index) + "] = m.ct(\"" + (element.content) + "\");");
+        return ("m[" + (element.index) + "]=m.ct(\"" + (element.content) + "\");");
         break;
       default:
-        var elementPath = "m[" + (element.index) + "]";
-        return ("" + (mapReduce(element.children, generateCreate)) + elementPath + " = m.ce(\"" + (element.type) + "\");" + (mapReduce(element.attributes, function (attribute) { return (elementPath + ".setAttribute(\"" + (attribute.key) + "\", " + (attribute.expression ? attribute.value : ("\"" + (attribute.value) + "\"")) + ");"); })));
+        return ((mapReduce(element.children, generateCreate)) + "m[" + (element.index) + "]=m.ce(\"" + (element.type) + "\");" + (generateCreateAttributes(element)));
     }
   };
 
@@ -326,7 +351,7 @@
           generatedMount += mapReduce(element.children, function (child) { return generateMount(child, elementPath); });
         }
 
-        generatedMount += "m.ma(" + elementPath + ", " + parent + ");";
+        generatedMount += "m.ma(" + elementPath + "," + parent + ");";
     }
 
     return generatedMount;
@@ -335,20 +360,20 @@
   var generateUpdate = function (element) {
     switch (element.type) {
       case "m-expression":
-        return element.dynamic ? ("m.ut(m[" + (element.index) + "], " + (element.content) + ");") : "";
+        return element.dynamic ? ("m.ut(m[" + (element.index) + "]," + (element.content) + ");") : "";
         break;
       case "m-text":
         return "";
         break;
       default:
         var elementPath = "m[" + (element.index) + "]";
-        return mapReduce(element.attributes, function (attribute) { return attribute.dynamic ? (elementPath + ".setAttribute(\"" + (attribute.key) + "\", " + (attribute.value) + ");") : ""; }) + mapReduce(element.children, generateUpdate);
+        return mapReduce(element.attributes, function (attribute) { return attribute.dynamic ? (elementPath + ".setAttribute(\"" + (attribute.key) + "\"," + (attribute.value) + ");") : ""; }) + mapReduce(element.children, generateUpdate);
     }
   };
 
   var generate = function (tree) {
-    var prelude = "var m = this.m;" + mapReduce(tree.dependencies, function (dependency) { return ("var " + dependency + " = this.data." + dependency + ";"); });
-    return new Function(("return [function(){" + prelude + (generateCreate(tree)) + "},function(root){var m = this.m;" + (generateMount(tree, "root")) + "},function(){" + prelude + (generateUpdate(tree)) + "}]"))();
+    var prelude = "var m=this.m;" + mapReduce(tree.dependencies, function (dependency) { return ("var " + dependency + "=this.data." + dependency + ";"); });
+    return new Function(("return [function(){" + prelude + (generateCreate(tree)) + "},function(root){var m=this.m;" + (generateMount(tree, "root")) + "},function(){" + prelude + (generateUpdate(tree)) + "}]"))();
   };
 
   var compile = function (input) {

diff --git a/dist/moon.min.js b/dist/moon.min.js
diff --git a/src/compiler/generator/create.js b/src/compiler/generator/create.js
@@ -1,18 +1,33 @@
-import { mapReduce } from "./util";
+import { attributeValue, mapReduce } from "./util";
+
+const generateCreateAttributes = (element) => mapReduce(element.attributes, (attribute) => {
+  const key = attribute.key;
+
+  switch (key) {
+    case "m-for":
+      break;
+    case "m-if":
+      break;
+    case "m-on":
+      return `m[${element.index}].addEventListener("${attribute.argument}", function(event){${attributeValue(attribute)}});`;
+      break;
+    default:
+      return `m[${element.index}].setAttribute("${key}",${attributeValue(attribute)});`;
+  }
+});
 
 export const generateCreate = (element) => {
   switch (element.type) {
     case "m-fragment":
       return mapReduce(element.children, generateCreate);
       break;
     case "m-expression":
-      return `m[${element.index}] = m.ct(${element.content});`;
+      return `m[${element.index}]=m.ct(${element.content});`;
       break;
     case "m-text":
-      return `m[${element.index}] = m.ct("${element.content}");`;
+      return `m[${element.index}]=m.ct("${element.content}");`;
       break;
     default:
-      const elementPath = `m[${element.index}]`;
-      return `${mapReduce(element.children, generateCreate)}${elementPath} = m.ce("${element.type}");${mapReduce(element.attributes, (attribute) => `${elementPath}.setAttribute("${attribute.key}", ${attribute.expression ? attribute.value : `"${attribute.value}"`});`)}`;
+      return `${mapReduce(element.children, generateCreate)}m[${element.index}]=m.ce("${element.type}");${generateCreateAttributes(element)}`;
   }
 };
diff --git a/src/compiler/generator/generator.js b/src/compiler/generator/generator.js
@@ -4,6 +4,6 @@ import { generateMount } from "./mount";
 import { generateUpdate } from "./update";
 
 export const generate = (tree) => {
-  const prelude = "var m = this.m;" + mapReduce(tree.dependencies, (dependency) => `var ${dependency} = this.data.${dependency};`);
-  return new Function(`return [function(){${prelude}${generateCreate(tree)}},function(root){var m = this.m;${generateMount(tree, "root")}},function(){${prelude}${generateUpdate(tree)}}]`)();
+  const prelude = "var m=this.m;" + mapReduce(tree.dependencies, (dependency) => `var ${dependency}=this.data.${dependency};`);
+  return new Function(`return [function(){${prelude}${generateCreate(tree)}},function(root){var m=this.m;${generateMount(tree, "root")}},function(){${prelude}${generateUpdate(tree)}}]`)();
 };
diff --git a/src/compiler/generator/mount.js b/src/compiler/generator/mount.js
@@ -14,7 +14,7 @@ export const generateMount = (element, parent) => {
         generatedMount += mapReduce(element.children, (child) => generateMount(child, elementPath));
       }
 
-      generatedMount += `m.ma(${elementPath}, ${parent});`;
+      generatedMount += `m.ma(${elementPath},${parent});`;
   }
 
   return generatedMount;

diff --git a/src/compiler/generator/update.js b/src/compiler/generator/update.js
@@ -3,13 +3,13 @@ import { mapReduce } from "./util";
 export const generateUpdate = (element) => {
   switch (element.type) {
     case "m-expression":
-      return element.dynamic ? `m.ut(m[${element.index}], ${element.content});` : "";
+      return element.dynamic ? `m.ut(m[${element.index}],${element.content});` : "";
       break;
     case "m-text":
       return "";
       break;
     default:
       const elementPath = `m[${element.index}]`;
-      return mapReduce(element.attributes, (attribute) => attribute.dynamic ? `${elementPath}.setAttribute("${attribute.key}", ${attribute.value});` : "") + mapReduce(element.children, generateUpdate);
+      return mapReduce(element.attributes, (attribute) => attribute.dynamic ? `${elementPath}.setAttribute("${attribute.key}",${attribute.value});` : "") + mapReduce(element.children, generateUpdate);
   }
 };
diff --git a/src/compiler/generator/util.js b/src/compiler/generator/util.js
@@ -1 +1,3 @@
 export const mapReduce = (arr, fn) => arr.reduce((result, current) => result + fn(current), "");
+
+export const attributeValue = (attribute) => attribute.expression ? attribute.value : `"${attribute.value}"`;
diff --git a/src/compiler/parser/parser.js b/src/compiler/parser/parser.js
@@ -6,7 +6,7 @@ import { parseExpression } from "./expression";
 export const parse = (input) => {
   const length = input.length;
   let dependencies = [];
-  let locals = ["NaN", "false", "in", "null", "true", "typeof", "undefined"];
+  let locals = ["NaN", "event", "false", "in", "null", "true", "typeof", "undefined"];
 
   const root = {
     type: "m-fragment",

diff --git a/src/compiler/parser/tag.js b/src/compiler/parser/tag.js
@@ -14,6 +14,7 @@ const parseAttributes = (index, input, length, attributes, dependencies, locals)
       continue;
     } else {
       let key = "";
+      let argument = "";
       let value = "";
       let expression = false;
 
@@ -26,6 +27,12 @@ const parseAttributes = (index, input, length, attributes, dependencies, locals)
         } else if (char === "=") {
           index += 1;
           break;
+        } else if (char === ":" && key[0] === "m" && key[1] === "-") {
+          argument += input[index + 1];
+          index += 2;
+        } else if (argument.length !== 0) {
+          argument += char;
+          index += 1;
         } else {
           key += char;
           index += 1;
@@ -65,6 +72,7 @@ const parseAttributes = (index, input, length, attributes, dependencies, locals)
       attributes.push({
         key: key,
         value: value,
+        argument: argument,
         expression: expression,
         dynamic: expression && parseTemplate(value, dependencies, locals)
       });