cradova 2.0.0 → 2.1.0

package/dist/index.js

@@ -1,1522 +1,407 @@
-// lib/utils/init.ts
-var Init = function() {
-  const Wrapper = document.createElement("div");
-  Wrapper.setAttribute("data-cra-id", "cradova-app-wrapper");
-  document.body.appendChild(Wrapper);
-};
+/*
+============================================================================="
 
-// lib/utils/fns.ts
-var isNode = (node) => typeof node === "object" && typeof node.nodeType === "number";
-var cradovaAftermountEvent = new CustomEvent("cradova-aftermount");
-function uuid() {
-  let t = Date.now ? +Date.now() : +new Date();
-  return "cradova-id-xxxxxxxxxx".replace(/[x]/g, function(e) {
-    const r = (t + 16 * Math.random()) % 16 | 0;
-    return ("x" === e ? r : 7 & r | 8).toString(16);
-  });
-}
-function css(identifier, properties) {
-  if (typeof identifier === "string" && typeof properties === "undefined") {
-    let styTag = document.querySelector("style");
-    if (styTag !== null) {
-      identifier += styTag.textContent;
-      styTag.textContent = identifier;
-      return;
-    }
-    styTag = document.createElement("style");
-    styTag.textContent = identifier;
-    document.head.appendChild(styTag);
-    return;
-  }
-  if (!properties) {
-    return;
-  }
-  const styS = "" + identifier + `{
-`;
-  const styE = `}
-`;
-  let style2 = "", totalStyle = "";
-  for (const [k, v] of Object.entries(properties)) {
-    style2 += "" + k + ": " + v + `;
-`;
-  }
-  let styleTag = document.querySelector("style");
-  if (styleTag !== null) {
-    totalStyle += styleTag.innerHTML;
-    totalStyle += styS + style2 + styE;
-    styleTag.innerHTML = totalStyle;
-    return;
-  }
-  styleTag = document.createElement("style");
-  totalStyle += styleTag.innerHTML + `
+    ██████╗   ██████╗    █████═╗   ███████╗    ███████╗    ██╗   ██╗  █████╗
+   ██╔════╝   ██╔══██╗  ██╔═╗██║   █      ██  ██╔═════╝█   ██║   ██║  ██╔═╗██
+   ██║        ██████╔╝  ███████║   █      ██  ██║     ██   ██║   ██║  ██████╗
+   ██║        ██╔══██╗  ██║  ██║   █      ██  ██║     ██   ╚██╗ ██╔╝  ██║  ██╗
+   ╚██████╗   ██║  ██║  ██║  ██║   ███████╔╝   ████████      ╚███╔╝   ██║  ██║
+    ╚═════╝   ╚═╝  ╚═╝  ╚═╝  ╚═╝   ╚══════╝     ╚════╝        ╚══╝    ╚═╝  ╚═╝
 
-`;
-  totalStyle += styS + style2 + styE;
-  styleTag.innerHTML = totalStyle;
-  document.head.appendChild(styleTag);
-}
-function assert(condition, ...callback) {
-  if (condition) {
-    return callback;
-  }
-  return "";
-}
-function assertOr(condition, ifTrue, ifFalse) {
-  if (condition) {
-    return ifTrue;
-  }
-  return ifFalse;
-}
-var Ref = class {
-  constructor(component) {
-    this.stateID = uuid();
-    this.effects = [];
-    this.effectuate = null;
-    this.rendered = false;
-    this.published = false;
-    this.hasFirstStateUpdateRun = false;
-    this.preRendered = null;
-    this.component = component.bind(this);
-  }
-  preRender(data2) {
-    const chtml = this.component(data2);
-    if (chtml instanceof HTMLElement) {
-      chtml.setAttribute("data-cra-id", this.stateID);
-      this.preRendered = chtml;
-    } else {
-      this.preRendered = chtml({ stateID: this.stateID });
-    }
-    if (typeof this.preRendered === "undefined") {
-      throw new Error(
-        " \u2718  Cradova err :  Invalid component type for cradova Ref, got  -  " + this.preRendered
-      );
-    }
-  }
-  destroyPreRendered() {
-    this.preRendered = null;
-  }
-  render(data2, stash) {
-    this.effects = [];
-    this.rendered = false;
-    this.hasFirstStateUpdateRun = false;
-    let element = null;
-    if (!this.preRendered) {
-      const chtml = this.component(data2);
-      if (chtml instanceof HTMLElement) {
-        chtml.setAttribute("data-cra-id", this.stateID);
-        element = chtml;
-      } else {
-        element = chtml({ stateID: this.stateID });
-      }
-      if (typeof element === "undefined") {
-        throw new Error(
-          " \u2718  Cradova err :  Invalid component type for cradova Ref, got  -  " + element
-        );
-      }
-    }
-    if (stash) {
-      this.stash = data2;
-    }
-    const av = async () => {
-      await this.effector.apply(this);
-      window.removeEventListener("cradova-aftermount", av);
-    };
-    if (!this.published) {
-      this.published = true;
-      window.addEventListener("cradova-aftermount", av);
-    } else {
-      this.effector();
-    }
-    if (!element) {
-      element = this.preRendered;
-    }
-    return element;
-  }
-  instance() {
-    return dispatch(this.stateID, {
-      cradovaDispatchTrackBreak: true
-    });
-  }
-  effect(fn) {
-    if (!this.rendered) {
-      this.effects.push(fn.bind(this));
-    }
-  }
-  async effector() {
-    if (!this.rendered) {
-      for (const effect of this.effects) {
-        await effect.apply(this);
-      }
-    }
-    if (!this.hasFirstStateUpdateRun && this.effectuate) {
-      await this.effectuate();
-    }
-    this.rendered = true;
-    this.hasFirstStateUpdateRun = true;
-  }
-  updateState(data2, stash) {
-    if (!this) {
-      console.error(
-        " \u2718  Cradova err:  Ref.updateState has is passed out of scope"
-      );
-      return;
-    }
-    if (!this.rendered) {
-      async function updateState(data3) {
-        await this.Activate(data3);
-      }
-      this.effectuate = updateState.bind(this, data2);
-    } else {
-      (async () => {
-        await this.Activate(data2);
-      })();
-    }
-    if (stash) {
-      this.stash = data2;
-    }
-  }
-  async Activate(data2) {
-    if (!data2) {
-      return;
-    }
-    const guy = dispatch(this.stateID, {
-      cradovaDispatchTrackBreak: true
-    });
-    if (!guy) {
-      return;
-    }
-    const chtml = this.component(data2);
-    let element;
-    if (chtml instanceof HTMLElement) {
-      chtml.setAttribute("data-cra-id", this.stateID);
-      element = chtml;
-    } else {
-      element = chtml({ stateID: this.stateID });
-    }
-    try {
-      guy.insertAdjacentElement("beforebegin", element);
-      if (guy.parentElement) {
-        guy.parentElement.removeChild(guy);
-      } else {
-        guy.remove();
-      }
-    } catch (e0) {
-      console.error(e0);
-    }
-  }
-  remove() {
-    dispatch(this.stateID, { remove: true });
-  }
-};
-var frag = function(children) {
-  const par = document.createDocumentFragment();
-  for (let i2 = 0; i2 < children.length; i2++) {
-    let a2 = children[i2];
-    if (typeof a2 === "function") {
-      a2 = a2();
-      if (typeof a2 === "function") {
-        a2 = a2();
-      }
-      if (isNode(a2) || a2 instanceof String) {
-        par.appendChild(a2);
-      } else {
-        console.error(" \u2718  Cradova err:   wrong element type" + a2);
-        throw new TypeError(" \u2718  Cradova err:   invalid element");
-      }
-    }
-  }
-  return par;
-};
+=============================================================================
+=============================================================================
+  
+  Cradova FrameWork
+  @version 2.1.0
+  License: Apache V2
+  
+  -----------------------------------------------------------------------------
 
-// lib/utils/track.ts
-function cradovaDispatchTrack(nodes, state) {
-  for (let i2 = 0; i2 < nodes.length; i2++) {
-    const element = nodes[i2];
-    if (!element) {
-      continue;
-    }
-    if (typeof state === "object" && !Array.isArray(state)) {
-      for (const key in state) {
-        if (key === "style") {
-          for (const [k, v] of Object.entries(state[key])) {
-            if (typeof element.style[k] !== "undefined" && k !== "src") {
-              element.style[k] = v;
-            } else {
-              throw new Error(
-                "\u2718  Cradova err : " + k + " is not a valid css style property"
-              );
+  Apache License
+  Version 2.0, January 2004
+  http://www.apache.org/licenses/
+  
+  Copyright 2022 Friday Candour. All Rights Reserved.
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  http://www.apache.org/licenses/LICENSE-2.0
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  -----------------------------------------------------------------------------
+*/
+// importing cradova scripts
+import { Init } from "./utils/init";
+import { dispatch } from "./utils/track";
+import { simpleStore } from "./utils/simplestore";
+import { frag, isNode } from "./utils/fns";
+// import doc from "./utils/document";
+// importing types declarations
+("use strict");
+const make = function (txx) {
+    if (!txx) {
+        return {
+            tag: "div",
+        };
+    }
+    let tag;
+    let innerValue = "";
+    if (txx.includes("|")) {
+        const tc = txx.split("|");
+        innerValue = tc[1];
+        txx = tc[0] && tc[0];
+    }
+    const itemsPurifier = () => {
+        if (!txx.includes("#")) {
+            txx = txx.split(".");
+            tag = txx[0];
+            if (tag) {
+                txx.shift();
             }
-          }
-          continue;
-        }
-        if (typeof element.style[key] !== "undefined" && key !== "src") {
-          element.style[key] = state[key];
-          continue;
-        }
-        if (typeof element[key] === "function") {
-          element[key].apply(element);
-          continue;
-        }
-        if (key === "text") {
-          element.innerText = state[key];
-          continue;
-        }
-        if (key === "class" && typeof state[key] === "string" && state[key] !== "") {
-          const classes = state[key].split(" ");
-          for (let i3 = 0; i3 < classes.length; i3++) {
-            if (classes[i3]) {
-              element.classList.add(classes[i3]);
+            else {
+                tag = "div";
             }
-          }
-          continue;
-        }
-        if (key === "remove") {
-          if (element.parentElement) {
-            element.parentElement?.removeChild(element);
-          } else {
-            element.remove();
-          }
-          continue;
-        }
-        if (key.includes("$")) {
-          element.setAttribute("data-" + key.split("$")[1], state[key]);
-          continue;
-        }
-        if (key === "tree") {
-          element.innerHTML = "";
-          element.appendChild(frag(state[key]));
-          continue;
-        }
-        try {
-          if (typeof element[key] !== "undefined") {
-            element[key] = state[key];
-          } else {
-            element[key] = state[key];
-            if (key !== "for" && key !== "text" && key !== "class" && !key.includes("aria")) {
-              console.error(" \u2718  Cradova err:  invalid html attribute " + key);
+            return [txx, []];
+        }
+        else {
+            if (!txx.includes(".")) {
+                txx = txx.split("#");
+                tag = txx[0];
+                if (tag) {
+                    txx.shift();
+                }
+                else {
+                    tag = "div";
+                }
+                if (txx[0].includes(" ")) {
+                    txx = [txx[0].split(" ")[1]];
+                }
+                return [[], txx];
             }
-          }
-        } catch (error) {
-          console.error(" \u2718  Cradova err: Cradova got ", state);
-          console.error(" \u2718  Cradova err:  ", error);
-        }
-      }
-    } else {
-      throw new TypeError(" \u2718  Cradova err:   invalid state object" + state);
-    }
-  }
-}
-function dispatch(stateID, state) {
-  let ele;
-  if (stateID instanceof HTMLElement) {
-    ele = stateID;
-  }
-  let updated = void 0;
-  if (typeof state === "undefined" && typeof stateID === "object" && !ele) {
-    for (const [id, eachState] of Object.entries(stateID)) {
-      const elements = document.querySelectorAll(
-        "[data-cra-id=" + id + "]"
-      );
-      updated = elements.length === 1 ? elements[0] : elements;
-      cradovaDispatchTrack(elements, eachState);
-    }
-  } else {
-    if (typeof stateID === "string") {
-      const elements = document.querySelectorAll(
-        "[data-cra-id=" + stateID + "]"
-      );
-      if (elements.length) {
-        updated = elements.length === 1 ? elements[0] : elements;
-        if (!state?.cradovaDispatchTrackBreak) {
-          cradovaDispatchTrack(elements, state);
-        }
-      }
-    }
-    if (ele) {
-      cradovaDispatchTrack([ele], state);
-    }
-  }
-  return updated;
-}
-
-// lib/utils/simplestore.ts
-var simpleStore = class {
-  constructor(initial) {
-    this.ref = [];
-    this.value = initial;
-  }
-  set(value, shouldRefRender) {
-    if (typeof value === "function") {
-      this.value = value(this.value);
-    } else {
-      this.value = value;
-    }
-    if (this.ref.length && shouldRefRender !== false) {
-      this.updateState();
-    }
-  }
-  bind(prop) {
-    if (typeof this.value === "object" && typeof this.value[prop] !== "undefined") {
-      return [this, prop];
-    } else {
-      throw new Error(
-        "\u2718  Cradova err : can't bind an unavailable property!  " + prop
-      );
-    }
-  }
-  updateState(name) {
-    if (name) {
-      const entry = this.ref.find((ent) => ent.prop === name);
-      if (entry) {
-        entry.ref.updateState({ [entry.key]: this.value[entry.prop] });
-      }
-    } else {
-      for (let i2 = 0; i2 < this.ref.length; i2++) {
-        const entry = this.ref[i2];
-        entry.ref.updateState({ [entry.key]: this.value[entry.prop] });
-      }
-    }
-  }
-  setKey(name, value, shouldRefRender) {
-    if (typeof this.value === "object" && !Array.isArray(this.value)) {
-      if (typeof value === "function") {
-        this.value[name] = value(this.value);
-      } else {
-        this.value[name] = value;
-      }
-      if (this.ref.length && shouldRefRender !== false) {
-        this.updateState(name);
-      }
-    }
-  }
-  bindRef(ref, key, prop) {
-    if (ref && ref.updateState && prop) {
-      this.ref.push({ prop, ref, key });
-      if (ref.reader) {
-        ref.render = ref.render.bind(ref, this.value);
-      }
-    } else {
-      throw new Error(
-        "\u2718  Cradova err :  Invalid parameters for binding ref to simple store"
-      );
-    }
-  }
-};
-
-// lib/utils/ajax.ts
-function Ajax(url, opts = {}) {
-  const { method, data: data2, header: header2, callbacks } = opts;
-  if (typeof url !== "string") {
-    throw new Error("\u2718  Cradova err : Ajax invalid url " + url);
-  }
-  return new Promise(function(resolve) {
-    const ajax = new XMLHttpRequest();
-    const formData = new FormData();
-    if (callbacks && typeof callbacks === "object") {
-      for (const [k, v] of Object.entries(callbacks)) {
-        if (typeof v === "function" && ajax[k]) {
-          ajax[k] = v;
-        }
-      }
-    }
-    ajax.addEventListener("load", function() {
-      resolve(ajax.response);
-    });
-    if (data2 && typeof data2 === "object") {
-      for (const [k, v] of Object.entries(data2)) {
-        let value = v;
-        if (typeof value === "object" && value && !value.name) {
-          value = JSON.stringify(value);
-        }
-        formData.set(k, value);
-      }
-    }
-    ajax.addEventListener("error", () => {
-      console.error(
-        "\u2718  Cradova Ajax err : ",
-        ajax.response || "ERR_INTERNET_DISCONNECTED"
-      );
-      if (!navigator.onLine) {
-        resolve(
-          JSON.stringify({
-            message: `the device is offline!`
-          })
-        );
-      } else {
-        resolve(
-          JSON.stringify({
-            message: `problem with the action, please try again!`
-          })
-        );
-      }
-    });
-    if (!method) {
-      ajax.open(data2 && typeof data2 === "object" ? "POST" : "GET", url, true);
-    } else {
-      ajax.open(method, url, true);
-    }
-    if (header2 && typeof header2 === "object") {
-      Object.keys(header2).forEach(function(key) {
-        ajax.setRequestHeader(key, header2[key]);
-      });
-    }
-    ajax.send(formData);
-  });
-}
-
-// lib/utils/createSignal.ts
-var createSignal = class {
-  constructor(initial, props) {
-    this.persistName = "";
-    this.actions = {};
-    this.path = null;
-    this.value = initial;
-    if (props && props.persistName) {
-      this.persistName = props.persistName;
-      const key = localStorage.getItem(props.persistName);
-      if (key && key !== "undefined") {
-        this.value = JSON.parse(key);
-      }
-    }
-  }
-  set(value, shouldRefRender) {
-    if (typeof value === "function") {
-      this.value = value(this.value);
-    } else {
-      this.value = value;
-    }
-    if (this.persistName) {
-      localStorage.setItem(this.persistName, JSON.stringify(this.value));
-    }
-    if (this.ref && shouldRefRender !== false) {
-      if (this.path) {
-        this.ref.updateState(this.value[this.path]);
-      } else {
-        this.ref.updateState(this.value);
-      }
-    }
-    if (this.callback) {
-      this.callback(this.value);
-    }
-  }
-  setKey(key, value, shouldRefRender) {
-    if (typeof this.value === "object" && !Array.isArray(this.value)) {
-      this.value[key] = value;
-      if (this.persistName) {
-        localStorage.setItem(this.persistName, JSON.stringify(this.value));
-      }
-      if (this.ref && shouldRefRender !== false) {
-        if (this.path) {
-          this.ref.updateState(this.value[this.path]);
-        } else {
-          this.ref.updateState(this.value);
-        }
-      }
-      if (this.callback) {
-        this.callback(this.value);
-      }
-    } else {
-      throw new Error(
-        `\u2718  Cradova err : can't set key ${String(
-          key
-        )} . store value is not a javascript object`
-      );
-    }
-  }
-  createAction(key, action) {
-    if (typeof key === "string" && typeof action === "function") {
-      this.actions[key] = action;
-    } else {
-      if (typeof key === "object" && !action) {
-        for (const [nam, action2] of Object.entries(key)) {
-          if (typeof nam === "string" && typeof action2 === "function") {
-            this.actions[nam] = action2;
-          } else {
-            throw new Error(`\u2718  Cradova err : can't create action ${nam}`);
-          }
-        }
-      } else {
-        throw new Error(`\u2718  Cradova err : can't create action ${key}`);
-      }
-    }
-  }
-  fireAction(key, data2) {
-    try {
-      if (!(typeof key === "string" && this.actions[key])) {
-        throw Error("");
-      }
-    } catch (_e) {
-      throw Error("\u2718  Cradova err : action " + key + "  does not exist!");
-    }
-    this.actions[key](this, data2);
-  }
-  bindRef(Ref2, path) {
-    if (Ref2 && Ref2.updateState) {
-      this.ref = Ref2;
-      if (typeof path === "string") {
-        this.path = path;
-        Ref2.render = Ref2.render.bind(Ref2, this.value[path]);
-      } else {
-        Ref2.render = Ref2.render.bind(Ref2, this.value);
-      }
-    } else {
-      throw new Error("\u2718  Cradova err :  Invalid ref component" + Ref2);
-    }
-  }
-  listen(callback) {
-    this.callback = callback;
-  }
-  clearPersist() {
-    if (this.persistName) {
-      localStorage.removeItem(this.persistName);
-    }
-  }
-};
-
-// lib/utils/Router.ts
-var Router = {};
-var RouterBox = {};
-RouterBox["lastNavigatedRouteController"] = null;
-RouterBox["nextRouteController"] = null;
-RouterBox["lastNavigatedRoute"] = null;
-RouterBox["pageShow"] = null;
-RouterBox["pageHide"] = null;
-RouterBox["errorHandler"] = {};
-RouterBox["params"] = {};
-RouterBox["routes"] = {};
-var checker = (url) => {
-  if (RouterBox.routes[url]) {
-    return [RouterBox.routes[url], { path: url }];
-  }
-  for (const path in RouterBox.routes) {
-    if (!path.includes(":")) {
-      continue;
-    }
-    const urlFixtures = url.split("/");
-    const pathFixtures = path.split("/");
-    if (pathFixtures.length === urlFixtures.length) {
-      urlFixtures.shift();
-      pathFixtures.shift();
-      let isIt = true;
-      const routesParams = {};
-      for (let i2 = 0; i2 < pathFixtures.length; i2++) {
-        if (!pathFixtures[i2].includes(":") && path.includes(urlFixtures[i2] + "/") && pathFixtures.indexOf(urlFixtures[i2]) === pathFixtures.lastIndexOf(urlFixtures[i2])) {
-          if (!isIt)
-            isIt = true;
-        } else {
-          if (pathFixtures[i2].includes(":")) {
-            continue;
-          }
-          isIt = false;
-        }
-        if (!(pathFixtures.indexOf(urlFixtures[i2]) === pathFixtures.lastIndexOf(urlFixtures[i2]))) {
-          throw new Error(
-            " \u2718  Cradova err:  cradova router doesn't allow paths with multiple names"
-          );
-        }
-      }
-      if (isIt) {
-        for (let i2 = 0; i2 < pathFixtures.length; i2++) {
-          if (pathFixtures[i2].includes(":")) {
-            routesParams[pathFixtures[i2].split(":")[1]] = urlFixtures[i2];
-          }
-        }
-        routesParams.path = path;
-        return [RouterBox.routes[path], routesParams];
-      }
-    }
-  }
-  return [];
-};
-Router.route = function(path = "/", screen) {
-  if (!screen.Activate && screen.name) {
-    console.error(" \u2718  Cradova err:  not a valid screen  ", screen);
-    throw new Error(" \u2718  Cradova err:  Not a valid cradova screen component");
-  }
-  RouterBox.routes[path] = {
-    controller: (params, force) => screen.Activate(params, force),
-    packager: async (params) => await screen.package(params),
-    deactivate: () => {
-      screen.deActivate();
-    }
-  };
-  if (typeof screen.errorHandler === "function") {
-    RouterBox["errorHandler"][path] = screen.errorHandler;
-  }
-};
-Router.navigate = function(href, data2 = null, force = false) {
-  if (typeof href !== "string") {
-    throw new TypeError(
-      " \u2718  Cradova err:  href must be a defined path but got " + href + " instead"
-    );
-  }
-  if (typeof data2 === "boolean") {
-    force = true;
-    data2 = null;
-  }
-  let route = null, params, link2 = null;
-  if (href.includes("://")) {
-    window.location.href = href;
-  } else {
-    if (href === window.location.pathname) {
-      return;
-    }
-    [route, params] = checker(href);
-    if (route) {
-      RouterBox["nextRouteController"] = route;
-      RouterBox.params.params = params;
-      RouterBox.params.data = data2 || null;
-      link2 = href;
-      RouterBox["pageHide"] && RouterBox["pageHide"](href + " :navigated");
-      window.history.pushState({}, "", link2);
-    }
-    (async () => {
-      await RouterBox.router(null, force);
-    })();
-  }
-};
-RouterBox.router = async function(e, force = false) {
-  let url, route, params;
-  const Alink = e && e.target.tagName === "A" && e.target;
-  if (Alink) {
-    if (Alink.href.includes("#")) {
-      return;
-    }
-    if (Alink.href.includes("javascript")) {
-      return;
-    }
-    e.preventDefault();
-    url = new URL(Alink.href).pathname;
-  }
-  if (!url) {
-    url = window.location.pathname;
-  }
-  if (url === Router["lastNavigatedRoute"]) {
-    return;
-  }
-  if (RouterBox["nextRouteController"]) {
-    route = RouterBox["nextRouteController"];
-    RouterBox["nextRouteController"] = null;
-  } else {
-    [route, params] = checker(url);
-  }
-  if (route) {
-    try {
-      if (params) {
-        RouterBox.params.params = params;
-      }
-      RouterBox["lastNavigatedRouteController"] && RouterBox["lastNavigatedRouteController"].deactivate();
-      await route.controller(force);
-      RouterBox["lastNavigatedRoute"] = url;
-      RouterBox["lastNavigatedRouteController"] = route;
-      RouterBox["pageShow"] && RouterBox["pageShow"](url);
-      for (const a2 of document.querySelectorAll("a")) {
-        if (a2.href.includes(window.location.origin)) {
-          a2.addEventListener("click", (e2) => {
-            e2.preventDefault();
-            Router.navigate(a2.pathname);
-          });
         }
-      }
-    } catch (error) {
-      const errorHandler = RouterBox.errorHandler["all"] || RouterBox.errorHandler[RouterBox.params.params.path];
-      if (errorHandler) {
-        errorHandler(error);
-      }
-    }
-  } else {
-    if (RouterBox.routes["/404"]) {
-      RouterBox.routes["/404"].controller();
-    } else {
-      if (Object.keys(RouterBox.routes).length > 0) {
-        console.error(
-          " \u2718  Cradova err: route '" + url + "' does not exist and no '/404' route given!"
-        );
-      }
-    }
-  }
-};
-Router["onPageShow"] = function(callback) {
-  if (typeof callback === "function") {
-    RouterBox["pageShow"] = callback;
-  } else {
-    throw new Error(
-      " \u2718  Cradova err:  callback for pageShow event is not a function"
-    );
-  }
-};
-Router["onPageHide"] = function(callback) {
-  if (typeof callback === "function") {
-    RouterBox["pageHide"] = callback;
-  } else {
-    throw new Error(
-      " \u2718  Cradova err:  callback for pageHide event is not a function"
-    );
-  }
-};
-Router.packageScreen = async function(path, data2) {
-  if (!RouterBox.routes[path]) {
-    console.error(" \u2718  Cradova err:  no screen with path " + path);
-    throw new Error(" \u2718  Cradova err:  cradova err: Not a defined screen path");
-  }
-  await RouterBox.routes[path].packager(data2);
-};
-Router.getParams = function() {
-  return RouterBox["params"];
-};
-Router["addErrorHandler"] = function(callback, path) {
-  if (typeof callback === "function") {
-    RouterBox["errorHandler"][path || "all"] = callback;
-  } else {
-    throw new Error(
-      " \u2718  Cradova err:  callback for ever event event is not a function"
-    );
-  }
-};
-window.addEventListener("pageshow", RouterBox.router);
-window.addEventListener("popstate", (e) => {
-  e.preventDefault();
-  RouterBox.router();
-});
-
-// lib/utils/Screen.ts
-var Screen = class {
-  constructor(cradova_screen_initials) {
-    this.packed = false;
-    this.secondaryChildren = [];
-    this.template = document.createElement("div");
-    this.errorHandler = null;
-    this.persist = true;
-    const { template: template2, name, persist } = cradova_screen_initials;
-    if (typeof template2 !== "function") {
-      throw new Error(
-        " \u2718  Cradova err: only functions that returns a cradova element is valid as screen"
-      );
-    }
-    this.html = template2.bind(this);
-    this.name = name;
-    this.template.setAttribute("id", "cradova-screen-set");
-    if (typeof persist === "boolean") {
-      this.persist = persist;
-    }
-  }
-  setErrorHandler(errorHandler) {
-    this.errorHandler = errorHandler;
-  }
-  async package() {
-    if (typeof this.html === "function") {
-      let fuc = await this.html(this.data);
-      if (typeof fuc === "function") {
-        fuc = fuc();
-        if (fuc && !isNode(fuc) && typeof fuc !== "string") {
-          throw new Error(
-            " \u2718  Cradova err: only parent with descendants is valid"
-          );
-        } else {
-          if (fuc) {
-            this.template.innerHTML = "";
-            this.template.appendChild(fuc);
-          }
+        txx = txx.split(".");
+        const pureItems = [];
+        const impureItems = [];
+        tag = !txx[0].includes("#") && txx[0];
+        if (tag) {
+            txx.shift();
+        }
+        for (let i = 0; i < txx.length; i++) {
+            if (txx[i].includes("#")) {
+                const item = txx[i].split("#");
+                impureItems.push(item[1]);
+                if (i === 0) {
+                    tag = item[0];
+                    continue;
+                }
+                pureItems.push(item[0]);
+                continue;
+            }
+            pureItems.push(txx[i]);
         }
-      } else {
-        if (!isNode(fuc) && typeof fuc !== "string") {
-          throw new Error(
-            " \u2718  Cradova err: only parent with descendants is valid"
-          );
-        } else {
-          this.template.innerHTML = "";
-          this.template.appendChild(fuc);
+        if (!tag) {
+            tag = "div";
         }
-      }
-    }
-    if (!this.template.firstChild) {
-      throw new Error(
-        " \u2718  Cradova err:  no screen is rendered, may have been past wrongly."
-      );
-    }
-    if (this.secondaryChildren.length) {
-      for (const child of this.secondaryChildren) {
-        this.template.appendChild(child);
-      }
-    }
-  }
-  onActivate(cb) {
-    this.callBack = cb;
-  }
-  onDeactivate(cb) {
-    this.deCallBack = cb;
-  }
-  addChild(...addOns) {
-    this.secondaryChildren.push(frag(addOns));
-  }
-  deActivate() {
-    if (this.deCallBack) {
-      this.deCallBack();
-    }
-  }
-  async Activate(force) {
-    if (!this.persist) {
-      await this.package();
-      this.packed = true;
-    } else {
-      if (!this.packed) {
-        await this.package();
-        this.packed = true;
-      }
-    }
-    if (this.persist && force) {
-      await this.package();
-      this.packed = true;
-    }
-    const doc = document.querySelector("[data-cra-id=cradova-app-wrapper]");
-    if (!doc) {
-      throw new Error(
-        " \u2718  Cradova err: Unable to render, cannot find cradova root <div data-cra-id='cradova-app-wrapper'> ... </div>"
-      );
-    }
-    doc.innerHTML = "";
-    doc.appendChild(this.template);
-    document.title = this.name;
-    if (!this.persist) {
-      this.packed = false;
-    }
-    if (this.callBack) {
-      await this.callBack();
-    }
-    window.dispatchEvent(cradovaAftermountEvent);
-    window.scrollTo(0, 0);
-  }
+        return [pureItems, impureItems];
+    };
+    const [classes, ids] = itemsPurifier();
+    const ID = ids && ids[0];
+    const className = classes && classes.join(" ");
+    return { tag, className, ID, innerValue };
 };
-
-// lib/utils/tags.ts
-var cra = (element_initials) => {
-  return (...ElementChildrenAndPropertyList) => {
-    let beforeMount = null;
-    let props = null, text = null;
-    let element;
-    element = document.createElement(element_initials);
-    if (ElementChildrenAndPropertyList.length) {
-      for (let i2 = 0; i2 < ElementChildrenAndPropertyList.length; i2++) {
-        let child = ElementChildrenAndPropertyList[i2];
-        if (typeof child === "function") {
-          child = child();
-          if (typeof child === "function") {
-            child = child();
-          }
+/**
+ * Cradova
+ * ---
+ * Creates new cradova HTML element
+ *  @example
+ * // using template
+ * const p = _("p");
+ * _("p.class");
+ * _("p#id");
+ * _("p.class#id");
+ * _("p.foo.bar#poo.loo");
+ *
+ * // using inline props
+ *
+ * _("p",{
+ * text: "am a p tag",
+ * style: {
+ * color: "blue"
+ * }
+ * })
+ * // or no style props it works!
+ * _("p",{
+ * text: "am a p tag",
+ * color: "blue"
+ * })
+ *
+ * // props and children
+ * _("p", // template first
+ *  // property next if wanted
+ *  {style: {color: "brown"}, // optional
+ *  // the rest should be children or text
+ * _("span", " am a span tag text like so"),
+ * ...
+ * )
+ *
+ * // list of children
+ * _("p",
+ * // all children goes after
+ * _("span",
+ * {
+ * text:" am a span tag like so",
+ *  color: "brown",
+ * }),
+ * ...
+ * )
+ *
+ * @param  {...any[]} element_initials
+ * @returns function - cradova element
+ */
+const _ = (...element_initials) => {
+    //
+    if (typeof element_initials[0] !== "string") {
+        return frag(element_initials);
+    }
+    // @ts-ignore
+    if (element_initials.raw) {
+        // getting the value of static cradova calls
+        // @ts-ignore
+        element_initials[0] = element_initials["raw"][0];
+    }
+    let beforeMount = null, firstLevelChildren = [];
+    if (element_initials.length > 1) {
+        firstLevelChildren = element_initials.splice(1);
+    }
+    if (typeof element_initials !== "object") {
+        element_initials = [element_initials];
+    }
+    return (...ElementChildrenAndPropertyList) => {
+        const initials = make(element_initials[0]);
+        let props = null, text = null;
+        if (firstLevelChildren.length) {
+            ElementChildrenAndPropertyList.push(...firstLevelChildren);
+        }
+        let element;
+        try {
+            element = document.createElement(initials.tag.trim());
         }
-        if (isNode(child)) {
-          element.appendChild(child);
-          continue;
+        catch (error) {
+            throw new TypeError(" ✘  Cradova err:  invalid tag given  " + initials.tag);
         }
-        if (Array.isArray(child)) {
-          const arrCXLength = child.length;
-          for (let p2 = 0; p2 < arrCXLength; p2++) {
-            let childly = child[p2];
-            if (typeof childly === "function") {
-              childly = childly();
-            }
-            if (typeof childly === "function") {
-              childly = childly();
+        if (initials.className) {
+            if (props) {
+                // @ts-ignore js knows
+                props["className"] = initials.className.trim();
             }
-            if (isNode(childly)) {
-              element.appendChild(childly);
-            } else {
-              throw new Error(
-                "  \u2718  Cradova err:  invalid child type: " + childly + " (" + typeof childly + ")"
-              );
+            else {
+                props = { className: initials.className.trim() };
             }
-          }
-          continue;
         }
-        if (typeof child === "string" || typeof child === "number") {
-          text = child;
-          continue;
-        }
-        if (typeof child === "object" && !Array.isArray(child)) {
-          if (!props) {
-            props = child;
-          } else {
-            props = Object.assign(props, child);
-          }
-          continue;
-        }
-        console.error(" \u2718  Cradova err:   got", { child });
-        throw new Error(
-          "  \u2718  Cradova err:  invalid child type: (" + typeof child + ")"
-        );
-      }
-    }
-    if (typeof props === "object") {
-      for (const prop in props) {
-        if (prop === "style" && typeof props[prop] === "object") {
-          for (const [k, v] of Object.entries(props[prop])) {
-            if (typeof element.style[k] !== "undefined" && k !== "src") {
-              element.style[k] = v;
-            } else {
-              throw new Error(
-                "\u2718  Cradova err :  " + k + " is not a valid css style property"
-              );
+        if (initials.ID) {
+            if (props) {
+                // @ts-ignore js knows
+                props["id"] = initials.ID.trim();
             }
-          }
-          continue;
-        }
-        if (prop === "text" && typeof props[prop] === "string" && props[prop] !== "") {
-          text = props[prop];
-          continue;
-        }
-        if (prop === "class" && typeof props[prop] === "string" && props[prop] !== "") {
-          element.classList.add(props[prop]);
-          continue;
-        }
-        if (prop === "beforeMount") {
-          beforeMount = props["beforeMount"];
-          continue;
-        }
-        if (prop === "stateID") {
-          element.setAttribute("data-cra-id", props[prop]);
-          continue;
-        }
-        if (prop.includes("$")) {
-          element.setAttribute("data-" + prop.split("$")[1], props[prop]);
-          continue;
-        }
-        if (Array.isArray(props[prop]) && props[prop][0] instanceof simpleStore) {
-          element.updateState = dispatch.bind(null, element);
-          props[prop][0].bindRef(element, prop, props[prop][1]);
-          continue;
-        }
-        if (prop === "shouldUpdate" && props[prop] === true) {
-          element.updateState = dispatch.bind(null, element);
-          continue;
-        }
-        if (prop === "afterMount" && typeof props["afterMount"] === "function") {
-          const av = () => {
-            props["afterMount"].apply(element);
-            window.removeEventListener("cradova-aftermount", av);
-          };
-          window.addEventListener("cradova-aftermount", av);
-          continue;
-        }
-        try {
-          if (typeof element[prop] !== "undefined") {
-            element[prop] = props[prop];
-          } else {
-            element[prop] = props[prop];
-            if (prop !== "for" && prop !== "text" && prop !== "class" && !prop.includes("aria")) {
-              console.error(" \u2718  Cradova err:  invalid html attribute ", {
-                prop
-              });
+            else {
+                props = { id: initials.ID.trim() };
             }
-          }
-        } catch (error) {
-          console.error(" \u2718  Cradova err: invalid html attribute ", { props });
-          console.error(" \u2718  Cradova err:  ", error);
         }
-      }
-    }
-    if (text) {
-      element.innerText = text;
-    }
-    if (typeof beforeMount === "function") {
-      beforeMount.apply(element);
-    }
-    return element;
-  };
-};
-var a = cra("a");
-var abbr = cra("abbr");
-var address = cra("address");
-var area = cra("area");
-var article = cra("article");
-var aside = cra("aside");
-var audio = cra("audio");
-var b = cra("b");
-var base = cra("base");
-var bdi = cra("bdi");
-var bdo = cra("bdo");
-var blockquote = cra("blockquote");
-var body = cra("body");
-var br = cra("br");
-var button = cra("button");
-var canvas = cra("canvas");
-var caption = cra("caption");
-var cite = cra("cite");
-var code = cra("code");
-var col = cra("col");
-var colgroup = cra("colgroup");
-var data = cra("data");
-var datalist = cra("datalist");
-var dd = cra("dd");
-var del = cra("del");
-var details = cra("details");
-var dfn = cra("dfn");
-var dialog = cra("dialog");
-var div = cra("div");
-var dl = cra("dl");
-var dt = cra("dt");
-var em = cra("em");
-var embed = cra("embed");
-var fieldset = cra("fieldset");
-var figcaption = cra("figcaption");
-var figure = cra("figure");
-var footer = cra("footer");
-var form = cra("form");
-var h1 = cra("h1");
-var h2 = cra("h2");
-var h3 = cra("h3");
-var h4 = cra("h4");
-var h5 = cra("h5");
-var h6 = cra("h6");
-var head = cra("head");
-var header = cra("header");
-var hr = cra("hr");
-var html = cra("html");
-var i = cra("i");
-var iframe = cra("iframe");
-var img = cra("img");
-var input = cra("input");
-var ins = cra("ins");
-var kbd = cra("kbd");
-var label = cra("label");
-var legend = cra("legend");
-var li = cra("li");
-var link = cra("link");
-var main = cra("main");
-var map = cra("map");
-var mark = cra("mark");
-var math = cra("math");
-var menu = cra("menu");
-var meta = cra("meta");
-var meter = cra("meter");
-var nav = cra("nav");
-var noscript = cra("noscript");
-var object = cra("object");
-var ol = cra("ol");
-var optgroup = cra("optgroup");
-var option = cra("option");
-var output = cra("output");
-var p = cra("p");
-var picture = cra("picture");
-var portal = cra("portal");
-var pre = cra("pre");
-var progress = cra("progress");
-var q = cra("q");
-var rp = cra("rp");
-var rt = cra("rt");
-var ruby = cra("ruby");
-var s = cra("s");
-var samp = cra("samp");
-var script = cra("script");
-var section = cra("section");
-var select = cra("select");
-var slot = cra("slot");
-var small = cra("small");
-var source = cra("source");
-var span = cra("span");
-var strong = cra("strong");
-var style = cra("style");
-var sub = cra("sub");
-var summary = cra("summary");
-var sup = cra("sup");
-var svg = cra("svg");
-var table = cra("table");
-var tbody = cra("tbody");
-var td = cra("td");
-var template = cra("template");
-var textarea = cra("textarea");
-var tfoot = cra("tfoot");
-var th = cra("th");
-var thead = cra("thead");
-var time = cra("time");
-var title = cra("title");
-var tr = cra("tr");
-var track = cra("track");
-var u = cra("u");
-var ul = cra("ul");
-var val = cra("val");
-var video = cra("video");
-var wbr = cra("wbr");
-
-// lib/index.ts
-var make = function(txx) {
-  if (!txx) {
-    return {
-      tag: "div"
-    };
-  }
-  let tag;
-  let innerValue = "";
-  if (txx.includes("|")) {
-    const tc = txx.split("|");
-    innerValue = tc[1];
-    txx = tc[0] && tc[0];
-  }
-  const itemsPurifier = () => {
-    if (!txx.includes("#")) {
-      txx = txx.split(".");
-      tag = txx[0];
-      if (tag) {
-        txx.shift();
-      } else {
-        tag = "div";
-      }
-      return [txx, []];
-    } else {
-      if (!txx.includes(".")) {
-        txx = txx.split("#");
-        tag = txx[0];
-        if (tag) {
-          txx.shift();
-        } else {
-          tag = "div";
-        }
-        if (txx[0].includes(" ")) {
-          txx = [txx[0].split(" ")[1]];
-        }
-        return [[], txx];
-      }
-    }
-    txx = txx.split(".");
-    const pureItems = [];
-    const impureItems = [];
-    tag = !txx[0].includes("#") && txx[0];
-    if (tag) {
-      txx.shift();
-    }
-    for (let i2 = 0; i2 < txx.length; i2++) {
-      if (txx[i2].includes("#")) {
-        const item = txx[i2].split("#");
-        impureItems.push(item[1]);
-        if (i2 === 0) {
-          tag = item[0];
-          continue;
-        }
-        pureItems.push(item[0]);
-        continue;
-      }
-      pureItems.push(txx[i2]);
-    }
-    if (!tag) {
-      tag = "div";
-    }
-    return [pureItems, impureItems];
-  };
-  const [classes, ids] = itemsPurifier();
-  const ID = ids && ids[0];
-  const className = classes && classes.join(" ");
-  return { tag, className, ID, innerValue };
-};
-var _ = (...element_initials) => {
-  if (typeof element_initials[0] !== "string") {
-    return frag(element_initials);
-  }
-  if (element_initials.raw) {
-    element_initials[0] = element_initials["raw"][0];
-  }
-  let beforeMount = null, firstLevelChildren = [];
-  if (element_initials.length > 1) {
-    firstLevelChildren = element_initials.splice(1);
-  }
-  if (typeof element_initials !== "object") {
-    element_initials = [element_initials];
-  }
-  return (...ElementChildrenAndPropertyList) => {
-    const initials = make(element_initials[0]);
-    let props = null, text = null;
-    if (firstLevelChildren.length) {
-      ElementChildrenAndPropertyList.push(...firstLevelChildren);
-    }
-    let element;
-    try {
-      element = document.createElement(initials.tag.trim());
-    } catch (error) {
-      throw new TypeError(
-        " \u2718  Cradova err:  invalid tag given  " + initials.tag
-      );
-    }
-    if (initials.className) {
-      if (props) {
-        props["className"] = initials.className.trim();
-      } else {
-        props = { className: initials.className.trim() };
-      }
-    }
-    if (initials.ID) {
-      if (props) {
-        props["id"] = initials.ID.trim();
-      } else {
-        props = { id: initials.ID.trim() };
-      }
-    }
-    if (initials.innerValue) {
-      if (props) {
-        props["innerText"] = initials.innerValue;
-      } else {
-        props = { innerText: initials.innerValue };
-      }
-    }
-    if (ElementChildrenAndPropertyList.length) {
-      for (let i2 = 0; i2 < ElementChildrenAndPropertyList.length; i2++) {
-        let child = ElementChildrenAndPropertyList[i2];
-        if (typeof child === "function") {
-          child = child();
-          if (typeof child === "function") {
-            child = child();
-          }
-        }
-        if (isNode(child)) {
-          element.appendChild(child);
-          continue;
-        }
-        if (Array.isArray(child)) {
-          const arrCXLength = child.length;
-          for (let p2 = 0; p2 < arrCXLength; p2++) {
-            let childly = child[p2];
-            if (typeof childly === "function") {
-              childly = childly();
+        if (initials.innerValue) {
+            if (props) {
+                // @ts-ignore js knows
+                props["innerText"] = initials.innerValue;
             }
-            if (typeof childly === "function") {
-              childly = childly();
+            else {
+                props = { innerText: initials.innerValue };
             }
-            if (isNode(childly)) {
-              element.appendChild(childly);
-            } else {
-              if (typeof childly !== "undefined") {
-                throw new Error(
-                  "  \u2718  Cradova err:  invalid child type: " + childly + " (" + typeof childly + ")"
-                );
-              }
-            }
-          }
-          continue;
-        }
-        if (typeof child === "string" || typeof child === "number") {
-          text = child;
-          continue;
-        }
-        if (typeof child === "object" && !Array.isArray(child)) {
-          if (!props) {
-            props = child;
-          } else {
-            props = Object.assign(props, child);
-          }
-          continue;
         }
-        if (typeof child !== "undefined") {
-          console.error(" \u2718  Cradova err:   got", { child });
-          throw new Error(
-            "  \u2718  Cradova err:  invalid child type: (" + typeof child + ")"
-          );
-        }
-      }
-    }
-    if (typeof props === "object" && element) {
-      for (const prop in props) {
-        if (prop === "style" && typeof props[prop] === "object") {
-          for (const [k, v] of Object.entries(props[prop])) {
-            if (typeof element.style[k] !== "undefined" && k !== "src") {
-              element.style[k] = v;
-            } else {
-              throw new Error(
-                "\u2718  Cradova err :  " + k + " is not a valid css style property"
-              );
+        //? getting children ready
+        if (ElementChildrenAndPropertyList.length) {
+            for (let i = 0; i < ElementChildrenAndPropertyList.length; i++) {
+                let child = ElementChildrenAndPropertyList[i];
+                // single child lane
+                if (typeof child === "function") {
+                    child = child();
+                    if (typeof child === "function") {
+                        child = child();
+                    }
+                }
+                // appending child
+                if (isNode(child)) {
+                    element.appendChild(child);
+                    continue;
+                }
+                // children array
+                if (Array.isArray(child)) {
+                    const arrCXLength = child.length;
+                    for (let p = 0; p < arrCXLength; p++) {
+                        let childly = child[p];
+                        if (typeof childly === "function") {
+                            childly = childly();
+                        }
+                        if (typeof childly === "function") {
+                            childly = childly();
+                        }
+                        if (isNode(childly)) {
+                            element.appendChild(childly);
+                        }
+                        else {
+                            if (typeof childly !== "undefined") {
+                                throw new Error("  ✘  Cradova err:  invalid child type: " +
+                                    childly +
+                                    " (" +
+                                    typeof childly +
+                                    ")");
+                            }
+                        }
+                    }
+                    continue;
+                }
+                // getting innerText
+                if (typeof child === "string" || typeof child === "number") {
+                    text = child;
+                    continue;
+                }
+                // getting props
+                if (typeof child === "object" && !Array.isArray(child)) {
+                    if (!props) {
+                        props = child;
+                    }
+                    else {
+                        props = Object.assign(props, child);
+                    }
+                    continue;
+                }
+                if (typeof child !== "undefined") {
+                    // throw an error
+                    console.error(" ✘  Cradova err:   got", { child });
+                    throw new Error("  ✘  Cradova err:  invalid child type: " + "(" + typeof child + ")");
+                }
             }
-          }
-          continue;
-        }
-        if (typeof element.style[prop] !== "undefined" && prop !== "src") {
-          element.style[prop] = props[prop];
-          continue;
-        }
-        if (prop === "text" && typeof props[prop] === "string" && props[prop] !== "") {
-          text = props[prop];
-          continue;
-        }
-        if (prop === "class" && typeof props[prop] === "string" && props[prop] !== "") {
-          element.classList.add(props[prop]);
-          continue;
-        }
-        if (prop === "beforeMount") {
-          beforeMount = props["beforeMount"];
-          continue;
-        }
-        if (prop === "stateID") {
-          element.setAttribute("data-cra-id", props[prop]);
-          continue;
         }
-        if (prop.includes("$")) {
-          element.setAttribute("data-" + prop.split("$")[1], props[prop]);
-          continue;
-        }
-        if (Array.isArray(props[prop]) && props[prop][0] instanceof simpleStore) {
-          element.updateState = dispatch.bind(null, element);
-          props[prop][0].bindRef(element, prop, props[prop][1]);
-          continue;
-        }
-        if (prop === "shouldUpdate" && props[prop] === true) {
-          element.updateState = dispatch.bind(null, element);
-          continue;
+        //? adding props
+        if (typeof props === "object" && element) {
+            // adding attributes
+            for (const prop in props) {
+                // adding styles
+                if (prop === "style" && typeof props[prop] === "object") {
+                    for (const [k, v] of Object.entries(props[prop])) {
+                        if (typeof element.style[k] !== "undefined" && k !== "src") {
+                            element.style[k] = v;
+                        }
+                        else {
+                            throw new Error("✘  Cradova err :  " + k + " is not a valid css style property");
+                        }
+                    }
+                    continue;
+                }
+                // for compatibility
+                if (typeof element.style[prop] !== "undefined" && prop !== "src") {
+                    element.style[prop] = props[prop];
+                    continue;
+                }
+                // text content
+                if (prop === "text" &&
+                    typeof props[prop] === "string" &&
+                    props[prop] !== "") {
+                    text = props[prop];
+                    continue;
+                }
+                // class name
+                if (prop === "class" &&
+                    typeof props[prop] === "string" &&
+                    props[prop] !== "") {
+                    element.classList.add(props[prop]);
+                    continue;
+                }
+                // before mount event
+                if (prop === "beforeMount") {
+                    beforeMount = props["beforeMount"];
+                    continue;
+                }
+                // setting state id
+                if (prop === "stateID") {
+                    element.setAttribute("data-cra-id", props[prop]);
+                    continue;
+                }
+                // setting data attribute
+                if (prop.includes("$")) {
+                    element.setAttribute("data-" + prop.split("$")[1], props[prop]);
+                    continue;
+                }
+                if (Array.isArray(props[prop]) &&
+                    props[prop][0] instanceof simpleStore) {
+                    element.updateState = dispatch.bind(null, element);
+                    props[prop][0]._bindRef(element, prop, props[prop][1]);
+                    continue;
+                }
+                // setting should update state key;
+                if (prop === "shouldUpdate" && props[prop] === true) {
+                    element.updateState = dispatch.bind(null, element);
+                    continue;
+                }
+                // setting afterMount event;
+                if (prop === "afterMount" &&
+                    typeof props["afterMount"] === "function") {
+                    const av = () => {
+                        props["afterMount"].apply(element);
+                        window.removeEventListener("cradova-aftermount", av);
+                    };
+                    window.addEventListener("cradova-aftermount", av);
+                    continue;
+                }
+                // trying to set other values
+                try {
+                    if (typeof element[prop] !== "undefined") {
+                        element[prop] = props[prop];
+                    }
+                    else {
+                        if (prop.includes("data-")) {
+                            element.setAttribute(prop, props[prop]);
+                            continue;
+                        }
+                        element[prop] = props[prop];
+                        if (prop !== "for" &&
+                            prop !== "text" &&
+                            prop !== "class" &&
+                            prop !== "tabindex" &&
+                            !prop.includes("aria")) {
+                            console.error(" ✘  Cradova err:  invalid html attribute ", {
+                                prop,
+                            });
+                        }
+                        else {
+                            continue;
+                        }
+                    }
+                }
+                catch (error) {
+                    console.error(" ✘  Cradova err: invalid html attribute ", { props });
+                    console.error(" ✘  Cradova err:  ", error);
+                }
+            }
         }
-        if (prop === "afterMount" && typeof props["afterMount"] === "function") {
-          const av = () => {
-            props["afterMount"].apply(element);
-            window.removeEventListener("cradova-aftermount", av);
-          };
-          window.addEventListener("cradova-aftermount", av);
-          continue;
+        if (text) {
+            element.appendChild(document.createTextNode(text));
         }
-        try {
-          if (typeof element[prop] !== "undefined") {
-            element[prop] = props[prop];
-          } else {
-            element[prop] = props[prop];
-            if (prop !== "for" && prop !== "text" && prop !== "class" && !prop.includes("aria")) {
-              console.error(" \u2718  Cradova err:  invalid html attribute ", {
-                prop
-              });
-            }
-          }
-        } catch (error) {
-          console.error(" \u2718  Cradova err: invalid html attribute ", { props });
-          console.error(" \u2718  Cradova err:  ", error);
+        if (typeof beforeMount === "function") {
+            beforeMount.apply(element);
         }
-      }
-    }
-    if (text) {
-      element.innerText = text;
-    }
-    if (typeof beforeMount === "function") {
-      beforeMount.apply(element);
-    }
-    return element;
-  };
+        return element;
+    };
 };
 Init();
-var lib_default = _;
-export {
-  simpleStore as $,
-  Ajax,
-  Ref,
-  Router,
-  Screen,
-  a,
-  abbr,
-  address,
-  area,
-  article,
-  aside,
-  assert,
-  assertOr,
-  audio,
-  b,
-  base,
-  bdi,
-  bdo,
-  blockquote,
-  body,
-  br,
-  button,
-  canvas,
-  caption,
-  cite,
-  code,
-  col,
-  colgroup,
-  cradovaAftermountEvent,
-  createSignal,
-  css,
-  data,
-  datalist,
-  dd,
-  lib_default as default,
-  del,
-  details,
-  dfn,
-  dialog,
-  dispatch,
-  div,
-  dl,
-  dt,
-  em,
-  embed,
-  fieldset,
-  figcaption,
-  figure,
-  footer,
-  form,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  head,
-  header,
-  hr,
-  html,
-  i,
-  iframe,
-  img,
-  input,
-  ins,
-  kbd,
-  label,
-  legend,
-  li,
-  link,
-  main,
-  map,
-  mark,
-  math,
-  menu,
-  meta,
-  meter,
-  nav,
-  noscript,
-  object,
-  ol,
-  optgroup,
-  option,
-  output,
-  p,
-  picture,
-  portal,
-  pre,
-  progress,
-  q,
-  rp,
-  rt,
-  ruby,
-  s,
-  samp,
-  script,
-  section,
-  select,
-  slot,
-  small,
-  source,
-  span,
-  strong,
-  style,
-  sub,
-  summary,
-  sup,
-  svg,
-  table,
-  tbody,
-  td,
-  template,
-  textarea,
-  tfoot,
-  th,
-  thead,
-  time,
-  title,
-  tr,
-  track,
-  u,
-  ul,
-  val,
-  video,
-  wbr
-};
+export { Ajax } from "./utils/ajax";
+export { createSignal } from "./utils/createSignal";
+export { dispatch } from "./utils/track";
+export { Router } from "./utils/Router";
+export { Screen } from "./utils/Screen";
+export { simpleStore as $ } from "./utils/simplestore";
+//
+export * from "./utils/tags";
+export { cradovaAftermountEvent, assert, assertOr, css, Ref, svgNS, loop, } from "./utils/fns";
+export default _;