cradova 2.1.0 → 2.1.1

package/dist/index.js

@@ -1,407 +1,1606 @@
-/*
-============================================================================="
+// lib/utils/init.ts
+var Init = function() {
+  if (!document.querySelector("[data-cra-id=cradova-app-wrapper]")) {
+    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 + `
 
-=============================================================================
-=============================================================================
-  
-  Cradova FrameWork
-  @version 2.1.0
-  License: Apache V2
-  
-  -----------------------------------------------------------------------------
+`;
+  totalStyle += styS + style2 + styE;
+  styleTag.innerHTML = totalStyle;
+  document.head.appendChild(styleTag);
+}
+function assert(condition, ...callback) {
+  if (condition) {
+    return callback;
+  }
+  return "";
+}
+function loop(datalist2, component) {
+  return Array.isArray(datalist2) && datalist2.map(component);
+}
+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;
+};
+var svgNS = (type, props, ...children) => {
+  const sc = document.createElementNS(
+    props.xmlns || "http://www.w3.org/2000/svg",
+    type
+  );
+  delete props.xmlns;
+  for (const p2 in props) {
+    sc.setAttributeNS(null, p2, props[p2]);
+  }
+  for (let ch of children) {
+    if (typeof ch === "function") {
+      ch = ch();
+    }
+    if (typeof ch === "function") {
+      ch = ch();
+    }
+    sc.appendChild(ch);
+  }
+  return sc;
+};
 
-  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();
-            }
-            else {
-                tag = "div";
+// 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"
+              );
             }
-            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];
+          }
+          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]);
             }
+          }
+          continue;
         }
-        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;
+        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);
             }
-            pureItems.push(txx[i]);
+          }
+        } catch (error) {
+          console.error(" \u2718  Cradova err: Cradova got ", state);
+          console.error(" \u2718  Cradova err:  ", error);
         }
-        if (!tag) {
-            tag = "div";
+      }
+    } 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);
         }
-        return [pureItems, impureItems];
-    };
-    const [classes, ids] = itemsPurifier();
-    const ID = ids && ids[0];
-    const className = classes && classes.join(" ");
-    return { tag, className, ID, innerValue };
+      }
+    }
+    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"
+      );
+    }
+  }
 };
-/**
- * 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());
+
+// 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);
+          }
         }
-        catch (error) {
-            throw new TypeError(" ✘  Cradova err:  invalid tag given  " + initials.tag);
+      } 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 (initials.className) {
-            if (props) {
-                // @ts-ignore js knows
-                props["className"] = initials.className.trim();
+      }
+    }
+    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);
+  }
+};
+
+// 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();
+          }
+        }
+        if (isNode(child)) {
+          element.appendChild(child);
+          continue;
+        }
+        if (Array.isArray(child)) {
+          let rload2 = function(l) {
+            const fg = new DocumentFragment();
+            for (let ch of l) {
+              if (Array.isArray(ch)) {
+                fg.appendChild(rload2(ch));
+              } else {
+                if (typeof ch === "function") {
+                  ch = ch();
+                }
+                if (typeof ch === "function") {
+                  ch = ch();
+                }
+                fg.appendChild(ch);
+              }
             }
-            else {
-                props = { className: initials.className.trim() };
+            return fg;
+          };
+          var rload = rload2;
+          const arrCXLength = child.length;
+          for (let p2 = 0; p2 < arrCXLength; p2++) {
+            let childly = child[p2];
+            if (typeof childly === "function") {
+              childly = childly();
             }
-        }
-        if (initials.ID) {
-            if (props) {
-                // @ts-ignore js knows
-                props["id"] = initials.ID.trim();
+            if (typeof childly === "function") {
+              childly = childly();
             }
-            else {
-                props = { id: initials.ID.trim() };
+            if (Array.isArray(childly)) {
+              childly = rload2(childly);
             }
+            if (isNode(childly)) {
+              element.appendChild(childly);
+            } else {
+              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 (initials.innerValue) {
-            if (props) {
-                // @ts-ignore js knows
-                props["innerText"] = initials.innerValue;
+        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"
+              );
             }
-            else {
-                props = { innerText: initials.innerValue };
+          }
+          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;
+        }
+        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 {
+            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(" \u2718  Cradova err:  invalid html attribute ", {
+                prop
+              });
+            } else {
+              continue;
+            }
+          }
+        } catch (error) {
+          console.error(" \u2718  Cradova err: invalid html attribute ", { props });
+          console.error(" \u2718  Cradova err:  ", error);
         }
-        //? 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 (text) {
+      element.appendChild(document.createTextNode(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 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)) {
+          let rload2 = function(l) {
+            const fg = new DocumentFragment();
+            for (let ch of l) {
+              if (Array.isArray(ch)) {
+                fg.appendChild(rload2(ch));
+              } else {
+                if (typeof ch === "function") {
+                  ch = ch();
                 }
-                if (typeof child !== "undefined") {
-                    // throw an error
-                    console.error(" ✘  Cradova err:   got", { child });
-                    throw new Error("  ✘  Cradova err:  invalid child type: " + "(" + typeof child + ")");
+                if (typeof ch === "function") {
+                  ch = ch();
                 }
+                fg.appendChild(ch);
+              }
             }
+            return fg;
+          };
+          var rload = rload2;
+          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 (Array.isArray(childly)) {
+              childly = rload2(childly);
+            }
+            if (isNode(childly)) {
+              element.appendChild(childly);
+            } else {
+              console.log(childly);
+              if (typeof childly !== "undefined") {
+                throw new Error(
+                  "  \u2718  Cradova err:  invalid child type: " + childly + " (" + typeof childly + ")"
+                );
+              }
+            }
+          }
+          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 (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"
+              );
             }
+          }
+          continue;
         }
-        if (text) {
-            element.appendChild(document.createTextNode(text));
+        if (typeof element.style[prop] !== "undefined" && prop !== "src") {
+          element.style[prop] = props[prop];
+          continue;
         }
-        if (typeof beforeMount === "function") {
-            beforeMount.apply(element);
+        if (prop === "text" && typeof props[prop] === "string" && props[prop] !== "") {
+          text = props[prop];
+          continue;
         }
-        return element;
-    };
+        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 {
+            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(" \u2718  Cradova err:  invalid html attribute ", {
+                prop
+              });
+            } else {
+              continue;
+            }
+          }
+        } catch (error) {
+          console.error(" \u2718  Cradova err: invalid html attribute ", { props });
+          console.error(" \u2718  Cradova err:  ", error);
+        }
+      }
+    }
+    if (text) {
+      element.appendChild(document.createTextNode(text));
+    }
+    if (typeof beforeMount === "function") {
+      beforeMount.apply(element);
+    }
+    return element;
+  };
 };
 Init();
-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 _;
+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,
+  loop,
+  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,
+  svgNS,
+  table,
+  tbody,
+  td,
+  template,
+  textarea,
+  tfoot,
+  th,
+  thead,
+  time,
+  title,
+  tr,
+  track,
+  u,
+  ul,
+  val,
+  video,
+  wbr
+};