olum 0.1.0 → 0.2.1

package/dist/olum.js

@@ -1,622 +1,165 @@
 /**
  * @name Olum.js
- * @version 0.1.0
+ * @version 0.2.1
  * @copyright 2021
  * @author Eissa Saber
  * @license MIT
  */
-((root, factory) => {
+(function (root, factory) {
   if (typeof module === "object" && module.exports) module.exports = factory();
   else if (typeof define === "function" && define.amd) define(factory);
-  else {
-    const ob = factory();
-    for(let key in ob) { root[key] = ob[key]; }
-  }
-})(typeof self !== "undefined" ? self : this, () => {
+  else root.Olum = factory();
+})(typeof self !== "undefined" ? self : this, function () {
   "use strict";
-  /**
-   * helpers for optimizing the code
-   */
-  const global = typeof self !== "undefined" ? self : this;
-  const isDebugging = false;
-  const debugStr = "Olum [warn]:";
-  const quotes = str => "“" + str + "”";
-  const devtoolHint = `${debugStr} ${quotes("devtool extension")} is not installed!
-  \nto install it please download ${quotes("devtool.js")} from the official repo
-  \n@ https://raw.githubusercontent.com/olumjs/olum-devtool/master/devtool.js
-  \nand save it in the root of your project`;
-  const isDev = () => !!["localhost", "127.0.0.1"].includes(location.hostname);
-  const isObj = obj => !!(obj !== null && typeof obj === "object");
-  const isFullArr = arr => !!(isObj(arr) && Array.isArray(arr) && arr.length);
-  const isFullObj = obj => !!(isObj(obj) && Array.isArray(Object.keys(obj)) && Object.keys(obj).length);
-  const isDef = val => !!(val !== undefined && val !== null);
-  const isTrue = val => !!(val === true);
-  const toNum = val => parseFloat(val.replace(/\D/g, ""));
-  const delItem = (arr, item) => (arr.length && arr.indexOf(item) > -1 ? arr.splice(arr.indexOf(item), 1) : null);
-  const hasProp = (obj, key) => !!obj.hasOwnProperty(key);
-  const delProp = (obj, key) => (hasProp(obj, key) ? delete obj[key] : null);
-  const isSame = (a, b) => !!(a === b);
-  const addProp = (obj, key, val) => {
-    Object.defineProperty(obj, key, {
-      value: val,
-      writable: true,
-      configurable: true,
-    });
-  };
-  const debugLib = (args, level = "log") => {
-    level = level == "err" ? "error" : level;
-    if (isDebugging) Array.isArray(args) ? console[level](...args) : console[level](args);
-  }
-  String.prototype.upper = function () {
-    return this.toUpperCase();
-  };
-  String.prototype.lower = function () {
-    return this.toLowerCase();
-  };
+  /* helpers */
+  var global = typeof self !== "undefined" ? self : this;
+  var debugStr = "Olum [warn]:";
+  var isDebugging = false;
 
-  /* Capitalize a string */
-  String.prototype.cap = function () {
-    return this.toLowerCase().split(" ").map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
-  };
-
-  /* For debuging purposes, works in dev mode */
-  const debug = (args, level = "log") => {
-    level = level == "err" ? "error" : level;
-    if (isDev()) Array.isArray(args) ? console[level](...args) : console[level](args);
+  function isDef(val) {
+    return (val !== undefined && val !== null);
   }
 
-  /**
-   * A shorthand for selecting nodes from dom
-   *
-   * @example $(".header") // returns 1st element
-   * @example $(".header", true) // returns array
-   * @example $(elm).get("li") // returns 1st li inside elm
-   * @example $(elm).get("li", true) // returns array of li inside elm
-   * @param {String} target can be class, id, tag or Element
-   * @param {Boolean} level (optional) boolean if omited it returns 1st element otherwise (true) returns array
-   */
-  const $ = (target, level, el = document) => {
-    if (typeof target == "string") {
-      const elms = [].slice.call(el.querySelectorAll(target));
-      if (isFullArr(elms)) {
-        if (level) return elms;
-        else return elms[0];
-      } else {
-        if (level) {
-          return [];
-        } else {
-          return null;
-        }
-      }
-    } else {
-      if (!Array.isArray(target) && !!target && target instanceof Element) target.get = (t, l) => $(t, l, target);
-      return target;
-    }
-  };
-
-  /**
-   * A shorthand for addEventListener() - removeEventListener()
-   */
-  function on(event, cb, propagation = false) {
-    return this.addEventListener(event, cb, propagation);
+  function isDev() {
+    return ["localhost", "127.0.0.1"].indexOf(global.location.hostname) !== -1;
   }
 
-  function off(event, cb, propagation = false) {
-    return this.removeEventListener(event, cb, propagation);
+  function isObj(obj) {
+    return (obj !== null && typeof obj === "object");
   }
-  Element.prototype.on = on;
-  Element.prototype.off = off;
-  Document.prototype.on = on;
-  Document.prototype.off = off;
-  global.on = on;
-  global.off = off;
-
-  /**
-   * Replace string with values
-   *
-   * @example setTemp(`<div>{{name}}</div>`, {name:"olumjs"})
-   */
-  const setTemp = (temp, obj, delimit = ["{{", "}}"]) => {
-    for (let key in obj) {
-      temp = temp.replace(new RegExp(`\\${delimit[0][0]}\\${delimit[0][1]}${key}\\${delimit[1][0]}\\${delimit[1][1]}`, "g"), obj[key]);
-    }
-    return temp;
-  }
-
-  /**
-   * Expand/Collapse element height
-   *
-   * @example elm.toggle(0.6)
-   * @Hint CSS must have `height: 0; overflow: hidden;`
-   */
-  Element.prototype.toggle = function (time = 0.3) {
-    this.style.transition = `height ${time}s ease-in-out`;
-    if (this.clientHeight == 0) {
-      this.style.height = "auto";
-      const h = this.clientHeight + "px";
-      this.style.height = "0";
-      setTimeout(() => this.style.height = h, 0);
-    } else this.style.height = "0";
-  };
-
-  // translations
-  class Localize {
-    key = "tolang";
-
-    constructor(dictionary, rtlLangs) {
-      this.dictionary = dictionary;
-      this.rtlLangs = rtlLangs;
-      this.init();
-    }
-
-    init() {
-      this.detect();
-      const _this = this;
-      String.prototype.trans = function trans() {
-        const str = this;
-        const locales = _this.dictionary;
-        const lang = _this.current();
-        const langObj = locales[lang];
-        const err = `"${str}" property is misspelled or missed at "src/locales/${lang}.js"`;
-        let translatedStr;
-  
-        if (typeof locales != "undefined" && typeof langObj != "undefined") {
-          for (let key in langObj) {
-            if (str === key) translatedStr = langObj[key];
-          }
-        } else {
-          debug("locales or langObj are not defined! @ String.prototype.trans", "warn");
-        }
-  
-        return translatedStr || err;
-      };
-      this.tolang();
-    };
-    
-    detect() {
-      const container = $("body");
-      if (container) {
-        if (this.rtlLangs.includes(this.current())) container.classList.add("RTL");
-        else container.classList.remove("RTL");
-      }
-    }
-
-    current() {
-      return localStorage.getItem(this.key) || "en";
-    }
-
-    tolang() {
-      document.on("click", e => {
-        if (e.target.hasAttribute(this.key)) {
-          // disable href in anchor
-          if (e.target.nodeName === "A") e.target.setAttribute("href", "javascript:void(0)");
-          // disable icons in links
-          [...e.target.children].forEach(icon => (icon.style.pointerEvents = "none"));
-          // update current lang
-          const lang = e.target.getAttribute(this.key);
-          localStorage.setItem(this.key, lang);
-          location.reload();
-        }
-      });
-    }
 
+  function isFullArr(arr) {
+    return !!(isObj(arr) && Array.isArray(arr) && arr.length);
   }
-  
-  /**
-   * @example origin.method(url, { body: {name:"olumjs"},"Content-Type": "application/json" }).then(console.log).catch(console.error)
-   */
-  class Origin {
-    constructor() {
-      if (!(this instanceof Origin)) console.error(`${debugStr} can't invoke ${quotes("Origin constructor")} without new keyword`);
-      this.xhr = new XMLHttpRequest();
-    }
 
-    setParams(data) {
-      if (isFullObj(data)) {
-        for (let key in data) {
-          if (key !== "body") this.xhr.setRequestHeader(key, data[key]);
-        }
-        if (hasProp(data, "body") && isFullObj(data.body)) {
-          return JSON.stringify(data.body);
-        }
-        return null;
-      }
-    }
-
-    onload(resolve, reject) {
-      return this.xhr.onreadystatechange = () => {
-        if (this.xhr.readyState === 4) {
-          if (this.xhr.status === 0 || (this.xhr.status >= 200 && this.xhr.status <= 299)) {
-            try {
-              resolve(JSON.parse(this.xhr.responseText));
-            } catch (err) {
-              resolve(this.xhr.responseText);
-            }
-          } else if (this.xhr.status >= 400 && this.xhr.status <= 599) {
-            reject(`${debugStr} couldn't reach the server`);
-          }
-        }
-      };
-    }
-
-    req(method, url, data = {}) {
-      return new Promise((resolve, reject) => {
-        this.xhr.open(method, url, true);
-        const form = this.setParams(data);
-        this.onload(resolve, reject);
-        this.xhr.onerror = () => reject(`${debugStr} network error`);
-        form !== null ? this.xhr.send(form) : this.xhr.send();
-      });
-    }
-
-    get = (url, data = {}) => this.req("GET", url, data);
-    post = (url, data = {}) => this.req("POST", url, data);
-    delete = (url, data = {}) => this.req("DELETE", url, data);
-    put = (url, data = {}) => this.req("PUT", url, data);
-    patch = (url, data = {}) => this.req("PATCH", url, data);
+  function isFullObj(obj) {
+    return !!(isObj(obj) && Array.isArray(Object.keys(obj)) && Object.keys(obj).length);
   }
 
-  /**
-   * @example new Olum({
-      mode: "history",
-      root: "/",
-      el: "#app",
-      prefix: "app",
-      routes: [{ path: "/", comp: Home }],
+  function addProp(obj, key, val) {
+    Object.defineProperty(obj, key, {
+      value: val,
+      writable: true,
+      configurable: true,
     });
-   */
-  class Olum {
-    isFrozen = false;
-    routes = [];
-    pushStateAPI = !!global.history.pushState;
-
-    constructor({
-      mode,
-      root,
-      el,
-      prefix,
-      err,
-      routes
-    }) {
-      if (!(this instanceof Olum)) console.error(`${debugStr} can't invoke ${quotes("Olum constructor")} without new keyword`);
-      this.setMode(mode);
-      this.setRoot(root);
-      this.setPrefix(prefix);
-      this.setErr(err);
-
-      if (!this.hasRootElm(el)) {
-        console.error(`${debugStr} couldn't find a value for ${quotes("el property")} @ router instance. \nmake sure it has the right selector e.g. el:"#app" \nand ${quotes("Root Element")} exists in dom e.g. <div id="app"></div>`);
-      } else if (!this.hasRoutes(routes)) {
-        console.error(`${debugStr} couldn't find ${quotes("routes property")} @ router instance or it's empty. \nmake sure that ${quotes("routes property")} has components \ne.g. routes = [{ path: "/", comp: Home }]`);
-      } else {
-        this.popStateEvent = new PopStateEvent("popstate");
-        this.viewLoaded = new CustomEvent("viewLoaded", { detail: {}, bubbles: true, cancelable: true, composed: false });
-        this.listen();
-      }
-    }
-
-    hasRootElm(el) {
-      const appMarkup = document.querySelector(el);
-
-      if (!!el && !!appMarkup) {
-        this.rootCompName = el.replace(/\#|\./, "").cap();
-        this.appMarkup = appMarkup;
-        return true;
-      }
-
-      return false;
-    }
-
-    hasRoutes(routes) {
-      if (!!routes && isFullArr(routes)) {
-        routes.forEach(route => this.addRoute(route.path, route.comp));
-        return true;
-      }
-      return false;
-    }
-
-    setPrefix(prefix) {
-      if (!!prefix) {
-        this.prefix = prefix;
-      } else {
-        this.prefix = null;
-        debug(`${debugStr} couldn't find ${quotes("prefix property")} @ router instance. \nfalling back to default component tag e.g. <ComponentName/>`, "warn");
-      }
-    }
-
-    setRoot(root) {
-      if (!!root) {
-        this.root = root;
-      } else {
-        this.root = "/";
-        debug(`${debugStr} couldn't find ${quotes("root property")} @ router instance. \nfalling back to default value: ${quotes("/")}`, "warn");
-      }
-    }
+  }
+  String.prototype.cap = function () {
+    return this.toLowerCase().split(" ").map(function (word) {
+      return word.charAt(0).toUpperCase() + word.slice(1);
+    }).join(" ");
+  };
 
-    setErr(err) {
-      if (!!err) {
-        this.err = this.resolve(err);
-      } else {
-        this.err = null;
-        debug(`${debugStr} couldn't find ${quotes("err property")} @ router instance. \nfalling back to default 404 page`, "warn");
-      }
-    }
+  function debug(args, level) {
+    if (!isDef(level)) level = "log";
+    level = level == "err" ? "error" : level;
+    if (isDebugging) Array.isArray(args) ? console[level].apply(console, args) : console[level](args);
+  }
 
-    setMode(mode) {
-      if (!!mode) {
-        if (this.pushStateAPI) this.mode = mode;
-        else {
-          this.mode = "hash"; // force hash
-          debug(`${debugStr} mode is set to ${quotes("hash")} \n${quotes("history")} is not supported!`, "warn");
-        }
+  function Olum(config) {
+    if (!(this instanceof Olum)) throw new Error("can't invoke 'Olum' without 'new' keyword");
+    var $this = this;
+    
+    // set defaults 
+    var rootElm = null;
+    var rootCompName = null;
+    var which = null;
+    var prefix = config && config.prefix ? config.prefix : null;
+
+    this.use = function (arg) {
+      if (arg) {
+        if (arg.name && typeof arg.name === "function" && arg.name() === "OlumRouter") which = { type: "router", cb: arg };
+        else which = { type: "component", cb: arg };
+        if (which) init();
+        else throw new Error(debugStr + " Root component or router are not defined!");
       } else {
-        this.mode = this.pushStateAPI ? "history" : "hash"; // default
-        debug(`${debugStr} couldn't find ${quotes("mode property")} @ router instance. \nfalling back to available default mode: ${quotes(this.mode)}`, "warn");
+        throw new Error(debugStr + " Missing component or router @use()");
       }
     }
 
-    addRoute(path, comp) {
-      this.routes.push({
-        path: this.resolve(path),
-        cb: () => this.inject(comp),
-      });
-    }
-
-    delRoute(path) {
-      this.routes.forEach(item => {
-        if (item.path === this.resolve(path)) delItem(this.routes, item);
-      });
-    }
-
-    flush() {
-      this.routes = [];
-    }
+    this.$ = function (selector) {
+      if (selector) {
+        var delimiter;
+        if (selector.indexOf(".") !== -1) delimiter = ".";
+        else if (selector.indexOf("#") !== -1) delimiter = "#";
 
-    resolve(path) {
-      const root = this.clear(this.root);
-      path = this.clear(path);
-      path = (this.root !== "/") ? ("/" + root + "/" + path) : ("/" + path);
-      path = path !== "/" ? path.replace(/\/$/g, "") : path;
-      return path;
-    }
-
-    clear(str) {
-      const regex = new RegExp(`^[\#\/]{1,}|\/$`, "g");
-      str = str.lower().trim().replace(regex, "");
-      return str;
-    }
-
-    freeze() {
-      this.isFrozen = true;
-    }
-    
-    unfreeze(){
-      this.isFrozen = false;
-    }
-
-    listen() {
-      global.on("popstate", () => {
-        debugLib(["Dispatched Popstate", this.routes]);
-        let current = this.getRoute();
-        const root = "/" + this.clear(this.root);
-        
-        // todo enhance this part 
-        current = (this.mode === "hash" && this.root !== "/") ? (current = root + current).replace(/\/$/, "") : current;
-
-        const route = this.routes.find(route => {
-          if (route.path === current) {
-            return route;
-          } else if (current === "" || current === "/" || current.includes("index.html")) {
-            return route.path === root;
-          }
-        });
-
-        if (isDef(route)) {
-          if (!this.isFrozen) route.cb(); // invokes inject(view)
-        } else {
-          if (isDef(this.err)) {
-            const err = this.routes.find(route => route.path === this.err);
-            if (isDef(err)) {
-              err.cb();
-            } else {
-              console.error(`${debugStr} unmached path of ${quotes("err property")} @ router instance.`);
-            }
-          } else {
-            this.appMarkup.innerHTML = "Not Found!";
-          }
-        }
-
-        debugLib({
-          current,
-          route
-        });
-
-      });
-
-      dispatchEvent(this.popStateEvent);
-    }
-
-    getRoute() {
-      let fragment = "";
-      if (this.mode === "history") {
-        fragment = this.clear(decodeURI(location.pathname));
-      } else if (this.mode === "hash") {
-        fragment = this.clear(decodeURI(location.hash));
-      }
-      return "/" + fragment;
-    }
-
-    navigate(path) {
-      this.unfreeze();
-      path = this.resolve(path);
-      if (this.mode === "history") {
-        global.history.pushState({}, "", path);
-        debugLib("Pushed to history");
-        dispatchEvent(this.popStateEvent);
-      } else if (this.mode === "hash") {
-        // todo enhance this part 
-        if (this.root === "/") {
-          location.href = `${location.href.replace(/\#.*/g, "")}#${path}`;
-        } else {
-          let root = this.clear(this.root);
-          root = root.replace(/\//g, `\\/`);
-          const rootRegex = new RegExp(`\\/${root}`, "g");
-          let _path = path.replace(rootRegex, "");
-          _path = "/" + _path.replace(/^\//g, "");
-          location.href = `${location.href.replace(/\#.*/g, "")}#${_path}`;
+        // start devtool
+        if (isDev()) {
+          rootCompName = selector.replace(/\#|\./, "").cap();
+          global.olumDevtool = { rootCompName: rootCompName, selector: selector };
         }
-      }
-
-    }
-
-    to() {
-      const links = $("[to]", true);
-      if (isFullArr(links)) {
-        links.forEach(link => {
-          // disable href in anchor
-          if (link.nodeName === "A") link.setAttribute("href", "javascript:void(0)");
-          // disable icons in links
-          [...link.children].forEach(icon => (icon.style.pointerEvents = "none"));
+        // end devtool
 
-          // onclick
-          link.on("click", e => {
-            const path = e.target.getAttribute("to");
-            const _path_ = this.resolve(path);
-            const current = this.getRoute();
-            if (isSame(_path_, current)) return; // stop routing | preserve history from duplicated routes
-            this.navigate(path); // navigate to clicked route
-          });
-        });
+        selector = selector.replace(/\#|\./, "");
+        rootElm =
+          delimiter === "." ? document.getElementsByClassName(selector)[0] :
+          delimiter === "#" ? document.getElementById(selector) :
+          document.getElementsByTagName(selector)[0];
+      } else {
+        throw new Error(debugStr + " Root Element is not found in DOM!");
       }
+      return this;
     }
 
-    active(path_b) {
-      const links = $("[to]", true);
-      if (isFullArr(links)) {
-        links.forEach(link => {
-          const path_a = this.resolve(link.getAttribute("to"));
-          if (path_a === path_b) {
-            link.classList.add("active");
-          } else {
-            link.classList.remove("active");
-          }
-        });
-      }
-    }
+    function buildTree(entry) {
+      var compsArr = [];
 
-    buildTree(entry) {
-      const compsArr = [];
-      const recursive = comp => {
-        if (hasProp(comp, "components") && isFullObj(comp.components)) {
-          for (let key in comp.components) {
-            const obj = {};
+      function recursive(comp) {
+        if (comp.hasOwnProperty("components") && isFullObj(comp.components)) {
+          for (var key in comp.components) {
+            var obj = {};
             addProp(obj, "parent", comp.name);
             addProp(obj, "child", {});
             addProp(obj.child, "name", key);
-            const instance = new comp.components[key]();
+            var instance = new comp.components[key]();
             addProp(obj.child, "data", instance.data());
             compsArr.push(obj);
 
-            if (hasProp(obj, "child") && hasProp(obj.child, "data")) {
-              const nextEntry = obj.child.data;
+            if (obj.hasOwnProperty("child") && obj.child.hasOwnProperty("data")) {
+              var nextEntry = obj.child.data;
               recursive(nextEntry);
             }
           }
         }
       };
       recursive(entry);
-      debugLib(["compsArr", compsArr]);
-
       return compsArr;
     }
 
-    inject(View) {
-      if (!View || typeof View != "function") {
-        console.error(`${debugStr} ${quotes("View argument")} is missing or it's not a constructor function! @ Olum.inject(View)`);
-      } else {
-        const view = new View();
-        const entry = view.data();
-        const compsArr = this.buildTree(entry);
-
-        const init = instance => {
-          // labeling components
-          const label = instance ? instance.label(entry, compsArr) : {
-            entry,
-            compsArr
-          };
-          // final component (View)
-          const viewObj = this.merge(label);
-          // css
-          this.buildStyles(viewObj.style);
-          // html
-          this.appMarkup.innerHTML = viewObj.template;
-          // js
-          setTimeout(() => {
-            this.active(this.getRoute()); // add active class to current route link tag
-            this.to(); // enables to attribute e.g. <a to="/">Home</a>
-            const scriptKeysArr = Object.keys(viewObj.script);
-            const recursive = (num = 0) => {
-              viewObj.script[scriptKeysArr[num]]();
-              if (num === scriptKeysArr.length - 1) {
-                if (isDef(this.viewLoaded)) {
-                  dispatchEvent(this.viewLoaded);
-                  debugLib("viewLoaded");
-                }
-              }
-              if (num + 1 <= scriptKeysArr.length - 1) recursive(num + 1);
-            };
-            recursive();
-          }, 0);
-        }
-
-        if (isDev()) {
-          import("/devtool.js").then(module => {
-            const Devtool = module.default;
-            const instance = new Devtool(this.appMarkup, this.rootCompName);
-            init(instance);
-          }).catch(() => debug(devtoolHint, "warn"));
-        } else {
-          init();
-        }
-
-      }
-    }
-
-    buildStyles(css) {
-      const id = "olum_style_tag";
-      let styleTag = document.getElementById(id);
+    function buildStyles(css) {
+      var id = "olum_style_tag";
+      var styleTag = document.getElementById(id);
       if (!styleTag) {
         styleTag = document.createElement("style");
         styleTag.id = id;
         document.head.append(styleTag);
       }
-      styleTag.innerHTML = css;
+      styleTag.innerHTML = css + "\n [to] * {pointer-events: none;}";
     }
 
-    merge({
-      entry,
-      compsArr
-    }) {
+    function merge(tree) {
+      var entry = tree.entry;
+      var compsArr = tree.compsArr;
+
       // parent (view) 
-      let template = entry.template || "";
-      let style = entry.style || "";
-      const script = {};
+      var template = entry.template || "";
+      var style = entry.style || "";
+      var script = {};
       !!(entry.render) ? (script[0] = entry.render) : null;
 
       // children 
       if (isFullArr(compsArr)) {
-        compsArr.forEach((comp, index) => {
-          const data = comp.child.data;
-          const html = data.template || "";
-          const css = data.style || "";
-          const js = data.render || null;
-          const name = this.prefix !== null ? this.prefix + "-" + data.name : data.name;
-          const regex = new RegExp(`<(${name}\\s{0,})\\/>`, "gi"); // detect components e.g. <App-AddTodo /> or <AddTodo />
+        for(var i = 0; i < compsArr.length; i++) {
+          var data = compsArr[i].child.data;
+          var html = data.template || "";
+          var css = data.style || "";
+          var js = data.render || null;
+          var name = prefix ? prefix + "-" + data.name : data.name;
+          var regex = new RegExp("<(" + name + "\\s{0,})\\/>", "gi"); // detect components e.g. <App-AddTodo /> or <AddTodo />
 
           template = template.replace(regex, html);
           style += css;
-          if (js !== null) script[index + 1] = js;
-        });
+          if (js !== null) script[i + 1] = js;
+        }
       }
 
       return {
@@ -625,44 +168,106 @@
         script,
       };
     }
+    
+    function labelView(root, arr) {
+      var compAttrRegex = /(olum-component=[\"\']([^\"|\']*)[\"\'])|(olum-component)/gi;
+      var openingSelfClosingTagRegex = /<[a-z]+(>|.*?[^?]>)/gi;
+      var greaterCharRegex = /\>/gi;
+      var compsArr = Array.from(arr);
+      var entry = root;
+
+      // children
+      for(var i = 0; i < compsArr.length; i++) {
+        var name = compsArr[i].child.data.name || "undefined";
+        if (compsArr[i].child && compsArr[i].child.data && compsArr[i].child.data.hasOwnProperty("template")) {
+          var data = compsArr[i].child.data;
+          // clean
+          data.template = data.template.replace(compAttrRegex, "");
+          // labeling
+          var compWrapper = data.template.match(openingSelfClosingTagRegex);
+          if (isFullArr(compWrapper)) {
+            data.template = data.template.replace(compWrapper[0], compWrapper[0].replace(greaterCharRegex, " olum-component='"+name+"'>"));
+          }
+        }
+      }
 
-  }
+      // parent (view)
+      if (entry.template) {
+        var name = entry.name || "undefined";
+        // clean
+        entry.template = entry.template.replace(compAttrRegex, "");
+        // labeling
+        var compWrapper = entry.template.match(openingSelfClosingTagRegex);
+        if (isFullArr(compWrapper)) {
+          entry.template = entry.template.replace(
+            compWrapper[0],
+            compWrapper[0].replace(greaterCharRegex, " olum-component='"+name+"' router-view='"+name+"'>")
+          );
+        }
+      }
 
-  /**
-   * @example const event = new Service("eventName");
-   * window.on(event.event, () => console.log("fired"));
-   * event.trigger()
-   */
-  class Service {
-    constructor(event) {
-      if (!(this instanceof Service)) console.error(`${debugStr} can't invoke ${quotes("Service constructor")} without new keyword`);
-      this.event = event;
-      this.init();
-      return this;
+      // root (placeholder)
+      rootElm.setAttribute("olum-component", rootCompName);
+  
+      return {
+        entry,
+        compsArr,
+      };
     }
 
-    init() {
-      this.serviceEvent = new CustomEvent(this.event, {
-        detail: {},
-        bubbles: true,
-        cancelable: true,
-        composed: false,
-      });
+    function useComponent() {
+      debug("use component");
+      var view = new which.cb();
+      var entry = view.data();
+      var compsArr = buildTree(entry);
+      // labeling components
+      var label = isDev() ? labelView(entry, compsArr) : { entry: entry, compsArr: compsArr };
+      // final component (View)      
+      var viewObj = merge(label);
+      // css
+      buildStyles(viewObj.style);
+      // html
+      rootElm.innerHTML = viewObj.template;
+      // js
+      setTimeout(function () {
+        for (var key in viewObj.script) {
+          viewObj.script[key]();
+        }
+      }, 0);
+    }
+    
+    function useRouter() {
+      debug("use OlumRouter");
+      var router = which.cb;
+      // share core functionalites with router
+      // props
+      router.__proto__.rootElm = rootElm;
+      // methods
+      router.__proto__.buildStyles = buildStyles;
+      router.__proto__.buildTree = buildTree;
+      router.__proto__.labelView = labelView;
+      router.__proto__.merge = merge;
+      
+      if (router.isReady) router.listen();
+    }
+    
+    function mount() {
+      debug({mount:"mount()",rootElm, which});
+      
+      if (which && which.type && which.cb) {
+        if (which.type === "router") useRouter();
+        else if (which.type === "component") useComponent();
+      } else {
+        throw new Error(debugStr + " Can't mount, Missing component or router @use()");
+      }
     }
 
-    trigger() {
-      if (isDef(this.serviceEvent)) dispatchEvent(this.serviceEvent);
+    function init() {
+      if (!rootElm) throw new Error(debugStr + " Root Element is not found in DOM!");
+      else mount();
     }
+    
   }
 
-  return {
-    Olum,
-    Service,
-    Origin,
-    $,
-    debug,
-    setTemp,
-    Localize
-  };
-
+  return Olum;
 });

package/dist/olum.min.js

@@ -1,8 +1,8 @@
 /**
 * @name Olum.js
-* @version 0.1.0
+* @version 0.2.1
 * @copyright 2021
 * @author Eissa Saber
 * @license MIT
 */
-"use strict";var _this2=void 0;function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(_getRequireWildcardCache=function(e){return e?n:t})(e)}function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!==_typeof(e)&&"function"!=typeof e)return{default:e};t=_getRequireWildcardCache(t);if(t&&t.has(e))return t.get(e);var n,r,o={},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&((r=i?Object.getOwnPropertyDescriptor(e,n):null)&&(r.get||r.set)?Object.defineProperty(o,n,r):o[n]=e[n]);return o.default=e,t&&t.set(e,o),o}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function _createClass(e,t,n){return t&&_defineProperties(e.prototype,t),n&&_defineProperties(e,n),e}function _defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function _toConsumableArray(e){return _arrayWithoutHoles(e)||_iterableToArray(e)||_unsupportedIterableToArray(e)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(e,t){if(e){if("string"==typeof e)return _arrayLikeToArray(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Map"===(n="Object"===n&&e.constructor?e.constructor.name:n)||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(e,t):void 0}}function _iterableToArray(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function _arrayWithoutHoles(e){if(Array.isArray(e))return _arrayLikeToArray(e)}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}!function(e,t){if("object"===("undefined"==typeof module?"undefined":_typeof(module))&&module.exports)module.exports=t();else if("function"==typeof define&&define.amd)define(t);else{var n,r=t();for(n in r)e[n]=r[n]}}("undefined"!=typeof self?self:void 0,function(){function i(){return!!["localhost","127.0.0.1"].includes(location.hostname)}function t(e){return!(null===e||"object"!==_typeof(e))}function o(e){return!!(t(e)&&Array.isArray(e)&&e.length)}function c(e){return!!(t(e)&&Array.isArray(Object.keys(e))&&Object.keys(e).length)}function s(e){return!(null==e)}function u(e,t){return!!e.hasOwnProperty(t)}function l(e,t,n){Object.defineProperty(e,t,{value:n,writable:!0,configurable:!0})}function h(e){var t="err"==(t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:"log")?"error":t}var f="undefined"!=typeof self?self:_this2,p="Olum [warn]:",d=function(e){return"“"+e+"”"},y="".concat(p," ").concat(d("devtool extension")," is not installed!\n  \nto install it please download ").concat(d("devtool.js")," from the official repo\n  \n@ https://raw.githubusercontent.com/olumjs/olum-devtool/master/devtool.js\n  \nand save it in the root of your project");String.prototype.upper=function(){return this.toUpperCase()},String.prototype.lower=function(){return this.toLowerCase()},String.prototype.cap=function(){return this.toLowerCase().split(" ").map(function(e){return e.charAt(0).toUpperCase()+e.slice(1)}).join(" ")};function v(e){var t,n="err"==(n=1<arguments.length&&void 0!==arguments[1]?arguments[1]:"log")?"error":n;i()&&(Array.isArray(e)?(t=console)[n].apply(t,_toConsumableArray(e)):console[n](e))}function m(n,e){var t=2<arguments.length&&void 0!==arguments[2]?arguments[2]:document;return"string"!=typeof n?(!Array.isArray(n)&&n&&n instanceof Element&&(n.get=function(e,t){return m(e,t,n)}),n):(t=[].slice.call(t.querySelectorAll(n)),o(t)?e?t:t[0]:e?[]:null)}function e(e,t){return this.addEventListener(e,t,2<arguments.length&&void 0!==arguments[2]&&arguments[2])}function n(e,t){return this.removeEventListener(e,t,2<arguments.length&&void 0!==arguments[2]&&arguments[2])}Element.prototype.on=e,Element.prototype.off=n,Document.prototype.on=e,Document.prototype.off=n,f.on=e,f.off=n;Element.prototype.toggle=function(){var e,t=this;this.style.transition="height ".concat(0<arguments.length&&void 0!==arguments[0]?arguments[0]:.3,"s ease-in-out"),0==this.clientHeight?(this.style.height="auto",e=this.clientHeight+"px",this.style.height="0",setTimeout(function(){return t.style.height=e},0)):this.style.height="0"};var r=function(){function n(e,t){_classCallCheck(this,n),_defineProperty(this,"key","tolang"),this.dictionary=e,this.rtlLangs=t,this.init()}return _createClass(n,[{key:"init",value:function(){this.detect();var i=this;String.prototype.trans=function(){var e,t=i.dictionary,n=i.current(),r=t[n],n='"'.concat(this,'" property is misspelled or missed at "src/locales/').concat(n,'.js"');if(void 0!==t&&void 0!==r)for(var o in r)this===o&&(e=r[o]);else v("locales or langObj are not defined! @ String.prototype.trans","warn");return e||n},this.tolang()}},{key:"detect",value:function(){var e=m("body");e&&(this.rtlLangs.includes(this.current())?e.classList.add("RTL"):e.classList.remove("RTL"))}},{key:"current",value:function(){return localStorage.getItem(this.key)||"en"}},{key:"tolang",value:function(){var t=this;document.on("click",function(e){e.target.hasAttribute(t.key)&&("A"===e.target.nodeName&&e.target.setAttribute("href","javascript:void(0)"),_toConsumableArray(e.target.children).forEach(function(e){return e.style.pointerEvents="none"}),e=e.target.getAttribute(t.key),localStorage.setItem(t.key,e),location.reload())})}}]),n}(),a=function(){function e(){var t=this;_classCallCheck(this,e),_defineProperty(this,"get",function(e){return t.req("GET",e,1<arguments.length&&void 0!==arguments[1]?arguments[1]:{})}),_defineProperty(this,"post",function(e){return t.req("POST",e,1<arguments.length&&void 0!==arguments[1]?arguments[1]:{})}),_defineProperty(this,"delete",function(e){return t.req("DELETE",e,1<arguments.length&&void 0!==arguments[1]?arguments[1]:{})}),_defineProperty(this,"put",function(e){return t.req("PUT",e,1<arguments.length&&void 0!==arguments[1]?arguments[1]:{})}),_defineProperty(this,"patch",function(e){return t.req("PATCH",e,1<arguments.length&&void 0!==arguments[1]?arguments[1]:{})}),this instanceof e||console.error("".concat(p," can't invoke ").concat(d("Origin constructor")," without new keyword")),this.xhr=new XMLHttpRequest}return _createClass(e,[{key:"setParams",value:function(e){if(c(e)){for(var t in e)"body"!==t&&this.xhr.setRequestHeader(t,e[t]);return u(e,"body")&&c(e.body)?JSON.stringify(e.body):null}}},{key:"onload",value:function(t,e){var n=this;return this.xhr.onreadystatechange=function(){if(4===n.xhr.readyState)if(0===n.xhr.status||200<=n.xhr.status&&n.xhr.status<=299)try{t(JSON.parse(n.xhr.responseText))}catch(e){t(n.xhr.responseText)}else 400<=n.xhr.status&&n.xhr.status<=599&&e("".concat(p," couldn't reach the server"))}}},{key:"req",value:function(r,o){var i=this,a=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{};return new Promise(function(e,t){i.xhr.open(r,o,!0);var n=i.setParams(a);i.onload(e,t),i.xhr.onerror=function(){return t("".concat(p," network error"))},null!==n?i.xhr.send(n):i.xhr.send()})}}]),e}();return{Olum:function(){function a(e){var t=e.mode,n=e.root,r=e.el,o=e.prefix,i=e.err,e=e.routes;_classCallCheck(this,a),_defineProperty(this,"isFrozen",!1),_defineProperty(this,"routes",[]),_defineProperty(this,"pushStateAPI",!!f.history.pushState),this instanceof a||console.error("".concat(p," can't invoke ").concat(d("Olum constructor")," without new keyword")),this.setMode(t),this.setRoot(n),this.setPrefix(o),this.setErr(i),this.hasRootElm(r)?this.hasRoutes(e)?(this.popStateEvent=new PopStateEvent("popstate"),this.viewLoaded=new CustomEvent("viewLoaded",{detail:{},bubbles:!0,cancelable:!0,composed:!1}),this.listen()):console.error("".concat(p," couldn't find ").concat(d("routes property")," @ router instance or it's empty. \nmake sure that ").concat(d("routes property"),' has components \ne.g. routes = [{ path: "/", comp: Home }]')):console.error("".concat(p," couldn't find a value for ").concat(d("el property"),' @ router instance. \nmake sure it has the right selector e.g. el:"#app" \nand ').concat(d("Root Element"),' exists in dom e.g. <div id="app"></div>'))}return _createClass(a,[{key:"hasRootElm",value:function(e){var t=document.querySelector(e);return!(!e||!t)&&(this.rootCompName=e.replace(/\#|\./,"").cap(),this.appMarkup=t,!0)}},{key:"hasRoutes",value:function(e){var t=this;return!(!e||!o(e))&&(e.forEach(function(e){return t.addRoute(e.path,e.comp)}),!0)}},{key:"setPrefix",value:function(e){e?this.prefix=e:(this.prefix=null,v("".concat(p," couldn't find ").concat(d("prefix property")," @ router instance. \nfalling back to default component tag e.g. <ComponentName/>"),"warn"))}},{key:"setRoot",value:function(e){e?this.root=e:(this.root="/",v("".concat(p," couldn't find ").concat(d("root property")," @ router instance. \nfalling back to default value: ").concat(d("/")),"warn"))}},{key:"setErr",value:function(e){e?this.err=this.resolve(e):(this.err=null,v("".concat(p," couldn't find ").concat(d("err property")," @ router instance. \nfalling back to default 404 page"),"warn"))}},{key:"setMode",value:function(e){e?this.pushStateAPI?this.mode=e:(this.mode="hash",v("".concat(p," mode is set to ").concat(d("hash")," \n").concat(d("history")," is not supported!"),"warn")):(this.mode=this.pushStateAPI?"history":"hash",v("".concat(p," couldn't find ").concat(d("mode property")," @ router instance. \nfalling back to available default mode: ").concat(d(this.mode)),"warn"))}},{key:"addRoute",value:function(e,t){var n=this;this.routes.push({path:this.resolve(e),cb:function(){return n.inject(t)}})}},{key:"delRoute",value:function(n){var r=this;this.routes.forEach(function(e){var t;e.path===r.resolve(n)&&(t=r.routes,e=e,t.length&&-1<t.indexOf(e)&&t.splice(t.indexOf(e),1))})}},{key:"flush",value:function(){this.routes=[]}},{key:"resolve",value:function(e){var t=this.clear(this.root);return e=this.clear(e),e="/"!==(e="/"!==this.root?"/"+t+"/"+e:"/"+e)?e.replace(/\/$/g,""):e}},{key:"clear",value:function(e){var t=new RegExp("^[#/]{1,}|/$","g");return e=e.lower().trim().replace(t,"")}},{key:"freeze",value:function(){this.isFrozen=!0}},{key:"unfreeze",value:function(){this.isFrozen=!1}},{key:"listen",value:function(){var o=this;f.on("popstate",function(){h(["Dispatched Popstate",o.routes]);var e,t=o.getRoute(),n="/"+o.clear(o.root),t="hash"===o.mode&&"/"!==o.root?(t=n+t).replace(/\/$/,""):t,r=o.routes.find(function(e){return e.path===t?e:""===t||"/"===t||t.includes("index.html")?e.path===n:void 0});s(r)?o.isFrozen||r.cb():s(o.err)?(e=o.routes.find(function(e){return e.path===o.err}),s(e)?e.cb():console.error("".concat(p," unmached path of ").concat(d("err property")," @ router instance."))):o.appMarkup.innerHTML="Not Found!",h({current:t,route:r})}),dispatchEvent(this.popStateEvent)}},{key:"getRoute",value:function(){var e="";return"history"===this.mode?e=this.clear(decodeURI(location.pathname)):"hash"===this.mode&&(e=this.clear(decodeURI(location.hash))),"/"+e}},{key:"navigate",value:function(e){var t;this.unfreeze(),e=this.resolve(e),"history"===this.mode?(f.history.pushState({},"",e),h("Pushed to history"),dispatchEvent(this.popStateEvent)):"hash"===this.mode&&("/"===this.root?location.href="".concat(location.href.replace(/\#.*/g,""),"#").concat(e):(t=(t=this.clear(this.root)).replace(/\//g,"\\/"),t=new RegExp("\\/".concat(t),"g"),t="/"+(t=e.replace(t,"")).replace(/^\//g,""),location.href="".concat(location.href.replace(/\#.*/g,""),"#").concat(t)))}},{key:"to",value:function(){var r=this,e=m("[to]",!0);o(e)&&e.forEach(function(e){"A"===e.nodeName&&e.setAttribute("href","javascript:void(0)"),_toConsumableArray(e.children).forEach(function(e){return e.style.pointerEvents="none"}),e.on("click",function(e){var t=e.target.getAttribute("to"),n=r.resolve(t),e=r.getRoute();n!==e&&r.navigate(t)})})}},{key:"active",value:function(t){var n=this,e=m("[to]",!0);o(e)&&e.forEach(function(e){n.resolve(e.getAttribute("to"))===t?e.classList.add("active"):e.classList.remove("active")})}},{key:"buildTree",value:function(e){var o=[];return function e(t){if(u(t,"components")&&c(t.components))for(var n in t.components){var r={};l(r,"parent",t.name),l(r,"child",{}),l(r.child,"name",n);n=new t.components[n];l(r.child,"data",n.data()),o.push(r),u(r,"child")&&u(r.child,"data")&&e(r.child.data)}}(e),h(["compsArr",o]),o}},{key:"inject",value:function(e){var t,n,r,o=this;e&&"function"==typeof e?(t=(new e).data(),n=this.buildTree(t),r=function(e){var e=e?e.label(t,n):{entry:t,compsArr:n},r=o.merge(e);o.buildStyles(r.style),o.appMarkup.innerHTML=r.template,setTimeout(function(){o.active(o.getRoute()),o.to();var n=Object.keys(r.script);(function e(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:0;r.script[n[t]](),t===n.length-1&&s(o.viewLoaded)&&(dispatchEvent(o.viewLoaded),h("viewLoaded")),t+1<=n.length-1&&e(t+1)})()},0)},i()?Promise.resolve().then(function(){return _interopRequireWildcard(require("/devtool.js"))}).then(function(e){e=new e.default(o.appMarkup,o.rootCompName);r(e)}).catch(function(){return v(y,"warn")}):r()):console.error("".concat(p," ").concat(d("View argument")," is missing or it's not a constructor function! @ Olum.inject(View)"))}},{key:"buildStyles",value:function(e){var t="olum_style_tag",n=document.getElementById(t);n||((n=document.createElement("style")).id=t,document.head.append(n)),n.innerHTML=e}},{key:"merge",value:function(e){var i=this,t=e.entry,e=e.compsArr,a=t.template||"",c=t.style||"",s={};return t.render&&(s[0]=t.render),o(e)&&e.forEach(function(e,t){var n=e.child.data,r=n.template||"",o=n.style||"",e=n.render||null,n=null!==i.prefix?i.prefix+"-"+n.name:n.name,n=new RegExp("<(".concat(n,"\\s{0,})\\/>"),"gi");a=a.replace(n,r),c+=o,null!==e&&(s[t+1]=e)}),{template:a,style:c,script:s}}}]),a}(),Service:function(){function t(e){return _classCallCheck(this,t),this instanceof t||console.error("".concat(p," can't invoke ").concat(d("Service constructor")," without new keyword")),this.event=e,this.init(),this}return _createClass(t,[{key:"init",value:function(){this.serviceEvent=new CustomEvent(this.event,{detail:{},bubbles:!0,cancelable:!0,composed:!1})}},{key:"trigger",value:function(){s(this.serviceEvent)&&dispatchEvent(this.serviceEvent)}}]),t}(),Origin:a,$:m,debug:v,setTemp:function(e,t){var n,r=2<arguments.length&&void 0!==arguments[2]?arguments[2]:["{{","}}"];for(n in t)e=e.replace(new RegExp("\\".concat(r[0][0],"\\").concat(r[0][1]).concat(n,"\\").concat(r[1][0],"\\").concat(r[1][1]),"g"),t[n]);return e},Localize:r}});
+!function(e,t){"object"==typeof module&&module.exports?module.exports=t():"function"==typeof define&&define.amd?define(t):e.Olum=t()}("undefined"!=typeof self?self:this,function(){"use strict";var n="undefined"!=typeof self?self:this,c="Olum [warn]:",o=!1;function u(){return-1!==["localhost","127.0.0.1"].indexOf(n.location.hostname)}function f(e){return null!==e&&"object"==typeof e}function d(e){return f(e)&&Array.isArray(e)&&e.length}function h(e,t,n){Object.defineProperty(e,t,{value:n,writable:!0,configurable:!0})}function y(e,t){t="err"==(t=null==t?"log":t)?"error":t,o&&(Array.isArray(e)?console[t].apply(console,e):console[t](e))}return String.prototype.cap=function(){return this.toLowerCase().split(" ").map(function(e){return e.charAt(0).toUpperCase()+e.slice(1)}).join(" ")},function e(t){if(!(this instanceof e))throw new Error("can't invoke 'Olum' without 'new' keyword");var m=null,p=null,o=null,s=t&&t.prefix?t.prefix:null;function r(e){var a=[];return function e(t){if(t.hasOwnProperty("components")&&f(r=t.components)&&Array.isArray(Object.keys(r))&&Object.keys(r).length)for(var n in t.components){var o={};h(o,"parent",t.name),h(o,"child",{}),h(o.child,"name",n),n=new t.components[n],h(o.child,"data",n.data()),a.push(o),o.hasOwnProperty("child")&&o.child.hasOwnProperty("data")&&e(o.child.data)}var r}(e),a}function a(e){var t="olum_style_tag",n=document.getElementById(t);n||((n=document.createElement("style")).id=t,document.head.append(n)),n.innerHTML=e+"\n [to] * {pointer-events: none;}"}function l(e){var t=e.entry,n=e.compsArr,o=t.template||"",r=t.style||"",a={};if(t.render&&(a[0]=t.render),d(n))for(var l=0;l<n.length;l++){var i=(m=n[l].child.data).template||"",c=m.style||"",u=m.render||null,m=s?s+"-"+m.name:m.name,m=new RegExp("<("+m+"\\s{0,})\\/>","gi"),o=o.replace(m,i);r+=c,null!==u&&(a[l+1]=u)}return{template:o,style:r,script:a}}function i(e,t){for(var n=/(olum-component=[\"\']([^\"|\']*)[\"\'])|(olum-component)/gi,o=/<[a-z]+(>|.*?[^?]>)/gi,r=/\>/gi,a=Array.from(t),e=e,l=0;l<a.length;l++){var i,c,u=a[l].child.data.name||"undefined";a[l].child&&a[l].child.data&&a[l].child.data.hasOwnProperty("template")&&((i=a[l].child.data).template=i.template.replace(n,""),d(c=i.template.match(o))&&(i.template=i.template.replace(c[0],c[0].replace(r," olum-component='"+u+"'>"))))}return e.template&&(u=e.name||"undefined",e.template=e.template.replace(n,""),d(c=e.template.match(o))&&(e.template=e.template.replace(c[0],c[0].replace(r," olum-component='"+u+"' router-view='"+u+"'>")))),m.setAttribute("olum-component",p),{entry:e,compsArr:a}}this.use=function(e){if(!e)throw new Error(c+" Missing component or router @use()");if(!(o=e.name&&"function"==typeof e.name&&"OlumRouter"===e.name()?{type:"router",cb:e}:{type:"component",cb:e}))throw new Error(c+" Root component or router are not defined!");!function(){if(!m)throw new Error(c+" Root Element is not found in DOM!");!function(){if(y({mount:"mount()",rootElm:m,which:o}),!(o&&o.type&&o.cb))throw new Error(c+" Can't mount, Missing component or router @use()");"router"===o.type?function(){y("use OlumRouter");var e=o.cb;e.__proto__.rootElm=m,e.__proto__.buildStyles=a,e.__proto__.buildTree=r,e.__proto__.labelView=i,e.__proto__.merge=l,e.isReady&&e.listen()}():"component"===o.type&&function(){y("use component");var e=(new o.cb).data(),t=r(e),n=l(u()?i(e,t):{entry:e,compsArr:t});a(n.style),m.innerHTML=n.template,setTimeout(function(){for(var e in n.script)n.script[e]()},0)}()}()}()},this.$=function(e){if(!e)throw new Error(c+" Root Element is not found in DOM!");var t;return-1!==e.indexOf(".")?t=".":-1!==e.indexOf("#")&&(t="#"),u()&&(p=e.replace(/\#|\./,"").cap(),n.olumDevtool={rootCompName:p,selector:e}),e=e.replace(/\#|\./,""),m="."===t?document.getElementsByClassName(e)[0]:"#"===t?document.getElementById(e):document.getElementsByTagName(e)[0],this}}});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "olum",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "The VanillaJS developer’s platform.",
   "main": "dist/olum.js",
   "directories": {