remove mount and add created hook

kbrsh · May 14, 2018 · 544ce31 · 544ce31
1 parent 7b3fa8e
commit 544ce31
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 77 deletions.
diff --git a/dist/moon.js b/dist/moon.js
@@ -321,42 +321,22 @@
     }
   }); };
 
-  var generateCreate = function (element) {
+  var generateCreate = function (element, parent) {
     switch (element.type) {
       case "m-fragment":
-        return mapReduce(element.children, generateCreate);
+        return mapReduce(element.children, function (child) { return generateCreate(child, parent); });
         break;
       case "m-expression":
-        return ("m[" + (element.index) + "]=m.ct(" + (element.content) + ");");
+        return ("m[" + (element.index) + "]=m.ct(" + (element.content) + ");m.ca(m[" + (element.index) + "]," + parent + ");");
         break;
       case "m-text":
-        return ("m[" + (element.index) + "]=m.ct(\"" + (element.content) + "\");");
+        return ("m[" + (element.index) + "]=m.ct(\"" + (element.content) + "\");m.ca(m[" + (element.index) + "]," + parent + ");");
         break;
       default:
-        return ((mapReduce(element.children, generateCreate)) + "m[" + (element.index) + "]=m.ce(\"" + (element.type) + "\");" + (generateCreateAttributes(element)));
+        return ("m[" + (element.index) + "]=m.ce(\"" + (element.type) + "\");" + (generateCreateAttributes(element)) + "m.ca(m[" + (element.index) + "], " + parent + ");" + (mapReduce(element.children, function (child) { return generateCreate(child, ("m[" + (element.index) + "]")); })));
     }
   };
 
-  var generateMount = function (element, parent) {
-    var generatedMount = "";
-
-    switch (element.type) {
-      case "m-fragment":
-        return mapReduce(element.children, function (child) { return generateMount(child, parent); });
-        break;
-      default:
-        var elementPath = "m[" + (element.index) + "]";
-
-        if (element.type !== "m-text" && element.type !== "m-expression") {
-          generatedMount += mapReduce(element.children, function (child) { return generateMount(child, elementPath); });
-        }
-
-        generatedMount += "m.ma(" + elementPath + "," + parent + ");";
-    }
-
-    return generatedMount;
-  };
-
   var generateUpdateAttributes = function (element) { return mapReduce(element.attributes, function (attribute) {
     if (attribute.dynamic) {
       var key = attribute.key;
@@ -392,7 +372,7 @@
 
   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)) + "}]"))();
+    return new Function(("return [function(root){" + prelude + (generateCreate(tree, "root")) + "},function(){" + prelude + (generateUpdate(tree)) + "}]"))();
   };
 
   var compile = function (input) {
@@ -403,8 +383,7 @@
 
   var createElement = function (type) { return document.createElement(type); };
   var createTextNode = function (content) { return document.createTextNode(content); };
-
-  var mountAppendChild = function (element, parent) {
+  var createAppendChild = function (element, parent) {
     parent.appendChild(element);
   };
 
@@ -417,7 +396,7 @@
     m.c = components;
     m.ce = createElement;
     m.ct = createTextNode;
-    m.ma = mountAppendChild;
+    m.ca = createAppendChild;
     m.ut = updateTextContent;
     return m;
   };
@@ -428,7 +407,7 @@
 
       var instance = this;
       setTimeout(function () {
-        instance.view[2]();
+        instance.view[1]();
         instance.queued = false;
       }, 0);
     }
@@ -452,7 +431,9 @@
     var handlers = data[type];
 
     if (handlers === undefined) {
-      data[type] = [handler];
+      data[type] = handler;
+    } else if (typeof handlers === "function") {
+      data[type] = [handlers, handler];
     } else {
       handlers.push(handler);
     }
@@ -462,15 +443,28 @@
     if (handler === undefined) {
       this.data[type] = [];
     } else {
-      var handlers = this.data[type];
-      handlers.splice(handlers.indexOf(handler), 1);
+      var data = this.data;
+      var handlers = data[type];
+
+      if (typeof handlers === "function") {
+        data[type] = undefined;
+      } else {
+        handlers.splice(handlers.indexOf(handler), 1);
+      }
     }
   };
 
   var emit = function(type, data) {
     var handlers = this.data[type];
-    for (var i = 0; i < handlers.length; i++) {
-      handlers[i](data);
+
+    if (handlers !== undefined) {
+      if (typeof handlers === "function") {
+        handlers(data);
+      } else {
+        for (var i = 0; i < handlers.length; i++) {
+          handlers[i](data);
+        }
+      }
     }
   };
 
@@ -526,8 +520,8 @@
     var rootComponent = component("m-root", options);
     var instance = new rootComponent();
 
-    instance.view[0]();
-    instance.view[1](root);
+    instance.view[0](root);
+    instance.emit("created");
 
     return instance;
   }

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
@@ -16,18 +16,18 @@ const generateCreateAttributes = (element) => mapReduce(element.attributes, (att
   }
 });
 
-export const generateCreate = (element) => {
+export const generateCreate = (element, parent) => {
   switch (element.type) {
     case "m-fragment":
-      return mapReduce(element.children, generateCreate);
+      return mapReduce(element.children, (child) => generateCreate(child, parent));
       break;
     case "m-expression":
-      return `m[${element.index}]=m.ct(${element.content});`;
+      return `m[${element.index}]=m.ct(${element.content});m.ca(m[${element.index}],${parent});`;
       break;
     case "m-text":
-      return `m[${element.index}]=m.ct("${element.content}");`;
+      return `m[${element.index}]=m.ct("${element.content}");m.ca(m[${element.index}],${parent});`;
       break;
     default:
-      return `${mapReduce(element.children, generateCreate)}m[${element.index}]=m.ce("${element.type}");${generateCreateAttributes(element)}`;
+      return `m[${element.index}]=m.ce("${element.type}");${generateCreateAttributes(element)}m.ca(m[${element.index}], ${parent});${mapReduce(element.children, (child) => generateCreate(child, `m[${element.index}]`))}`;
   }
 };
diff --git a/src/compiler/generator/generator.js b/src/compiler/generator/generator.js
@@ -1,9 +1,8 @@
 import { mapReduce } from "./util";
 import { generateCreate } from "./create";
-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)}}]`)();
+  return new Function(`return [function(root){${prelude}${generateCreate(tree, "root")}},function(){${prelude}${generateUpdate(tree)}}]`)();
 };
diff --git a/src/compiler/generator/mount.js b/src/compiler/generator/mount.js
diff --git a/src/component/component.js b/src/component/component.js
@@ -6,7 +6,7 @@ const build = function() {
 
     const instance = this;
     setTimeout(() => {
-      instance.view[2]();
+      instance.view[1]();
       instance.queued = false;
     }, 0);
   }
@@ -28,7 +28,9 @@ const on = function(type, handler) {
   let handlers = data[type];
 
   if (handlers === undefined) {
-    data[type] = [handler];
+    data[type] = handler;
+  } else if (typeof handlers === "function") {
+    data[type] = [handlers, handler];
   } else {
     handlers.push(handler);
   }
@@ -38,15 +40,28 @@ const off = function(type, handler) {
   if (handler === undefined) {
     this.data[type] = [];
   } else {
-    let handlers = this.data[type];
-    handlers.splice(handlers.indexOf(handler), 1);
+    let data = this.data;
+    let handlers = data[type];
+
+    if (typeof handlers === "function") {
+      data[type] = undefined;
+    } else {
+      handlers.splice(handlers.indexOf(handler), 1);
+    }
   }
 };
 
 const emit = function(type, data) {
   let handlers = this.data[type];
-  for (let i = 0; i < handlers.length; i++) {
-    handlers[i](data);
+
+  if (handlers !== undefined) {
+    if (typeof handlers === "function") {
+      handlers(data);
+    } else {
+      for (let i = 0; i < handlers.length; i++) {
+        handlers[i](data);
+      }
+    }
   }
 };
 

diff --git a/src/index.js b/src/index.js
@@ -31,8 +31,8 @@ export default function Moon(options) {
   const rootComponent = component("m-root", options);
   const instance = new rootComponent();
 
-  instance.view[0]();
-  instance.view[1](root);
+  instance.view[0](root);
+  instance.emit("created");
 
   return instance;
 }

diff --git a/src/util/m.js b/src/util/m.js
@@ -2,8 +2,7 @@ import { components } from "../component/components";
 
 const createElement = (type) => document.createElement(type);
 const createTextNode = (content) => document.createTextNode(content);
-
-const mountAppendChild = (element, parent) => {
+const createAppendChild = (element, parent) => {
   parent.appendChild(element);
 };
 
@@ -16,7 +15,7 @@ export const m = () => {
   m.c = components;
   m.ce = createElement;
   m.ct = createTextNode;
-  m.ma = mountAppendChild;
+  m.ca = createAppendChild;
   m.ut = updateTextContent;
   return m;
 };