cradova 2.1.1 → 2.2.0

package/dist/index.js

@@ -7,16 +7,147 @@ var Init = function() {
   }
 };
 
+// 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"
+              );
+            }
+          }
+          continue;
+        }
+        if (typeof element[key] === "function") {
+          if (key.startsWith("on")) {
+            element[key] = state[key];
+          } else {
+            element[key].apply(element);
+          }
+          continue;
+        }
+        if (key === "text") {
+          element.innerText = state[key];
+          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 !== "tabindex" && key !== "disabled" && !key.includes("aria")) {
+              console.error(" \u2718  Cradova err:  invalid html attribute " + key);
+            }
+          }
+        } 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/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) {
+  return "cradova-id-xxxxxx".replace(/[x]/g, function(e) {
     const r = (t + 16 * Math.random()) % 16 | 0;
     return ("x" === e ? r : 7 & r | 8).toString(16);
   });
 }
+function Rhoda(l) {
+  const fg = new DocumentFragment();
+  for (let ch of l) {
+    if (Array.isArray(ch)) {
+      fg.appendChild(Rhoda(ch));
+    } else {
+      if (typeof ch === "function") {
+        ch = ch();
+      }
+      if (typeof ch === "function") {
+        ch = ch();
+      }
+      if (typeof ch === "string" || typeof ch === "number") {
+        fg.appendChild(document.createTextNode(ch));
+        continue;
+      }
+      if (isNode(ch)) {
+        fg.appendChild(ch);
+      } else {
+        if (typeof ch !== "undefined") {
+          throw new Error(
+            "  \u2718  Cradova err:  invalid child type: " + ch + " (" + typeof ch + ")"
+          );
+        }
+      }
+    }
+  }
+  return fg;
+}
 function css(identifier, properties) {
   if (typeof identifier === "string" && typeof properties === "undefined") {
     let styTag = document.querySelector("style");
@@ -57,14 +188,19 @@ function css(identifier, properties) {
   styleTag.innerHTML = totalStyle;
   document.head.appendChild(styleTag);
 }
-function assert(condition, ...callback) {
+function assert(condition, ...elements) {
   if (condition) {
-    return callback;
+    return elements;
   }
-  return "";
+  return void 0;
 }
 function loop(datalist2, component) {
-  return Array.isArray(datalist2) && datalist2.map(component);
+  if (typeof component !== "function") {
+    throw new Error(
+      " \u2718  Cradova err :  Invalid component type, must be a function that returns html  "
+    );
+  }
+  return Array.isArray(datalist2) ? datalist2.map(component) : void 0;
 }
 function assertOr(condition, ifTrue, ifFalse) {
   if (condition) {
@@ -126,12 +262,10 @@ var Ref = class {
       await this.effector.apply(this);
       window.removeEventListener("cradova-aftermount", av);
     };
-    if (!this.published) {
-      this.published = true;
-      window.addEventListener("cradova-aftermount", av);
-    } else {
-      this.effector();
-    }
+    window.addEventListener("cradova-aftermount", av);
+    this.published = true;
+    this.rendered = true;
+    this.effector();
     if (!element) {
       element = this.preRendered;
     }
@@ -149,14 +283,13 @@ var Ref = class {
   }
   async effector() {
     if (!this.rendered) {
-      for (const effect of this.effects) {
-        await effect.apply(this);
+      for (let i2 = 0; i2 < this.effects.length; i2++) {
+        await this.effects[i2].apply(this);
       }
     }
     if (!this.hasFirstStateUpdateRun && this.effectuate) {
       await this.effectuate();
     }
-    this.rendered = true;
     this.hasFirstStateUpdateRun = true;
   }
   updateState(data2, stash) {
@@ -172,9 +305,11 @@ var Ref = class {
       }
       this.effectuate = updateState.bind(this, data2);
     } else {
-      (async () => {
-        await this.Activate(data2);
-      })();
+      if (this.published) {
+        (async () => {
+          await this.Activate(data2);
+        })();
+      }
     }
     if (stash) {
       this.stash = data2;
@@ -184,6 +319,7 @@ var Ref = class {
     if (!data2) {
       return;
     }
+    this.published = false;
     const guy = dispatch(this.stateID, {
       cradovaDispatchTrackBreak: true
     });
@@ -208,6 +344,7 @@ var Ref = class {
     } catch (e0) {
       console.error(e0);
     }
+    this.published = true;
   }
   remove() {
     dispatch(this.stateID, { remove: true });
@@ -219,15 +356,21 @@ var frag = function(children) {
     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");
-      }
+    }
+    if (typeof a2 === "function") {
+      a2 = a2();
+    }
+    if (isNode(a2)) {
+      par.appendChild(a2);
+      continue;
+    }
+    if (a2 instanceof String) {
+      par.appendChild(document.createTextNode(a2));
+      continue;
+    }
+    {
+      console.error(" \u2718  Cradova err:   wrong element type" + a2);
+      throw new TypeError(" \u2718  Cradova err:   invalid element");
     }
   }
   return par;
@@ -252,123 +395,43 @@ var svgNS = (type, props, ...children) => {
   }
   return sc;
 };
-
-// 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"
-              );
-            }
-          }
-          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;
-        }
-        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);
-            }
-          }
-        } catch (error) {
-          console.error(" \u2718  Cradova err: Cradova got ", state);
-          console.error(" \u2718  Cradova err:  ", error);
-        }
-      }
+var lazy = class {
+  constructor(cb) {
+    this.content = void 0;
+    this._cb = cb;
+  }
+  async load() {
+    this.content = await this._cb();
+    if (typeof this.content === "function") {
+      this.content = await this.content;
     } 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);
+      this.content = await this.content;
     }
+    this.content = this.content.default;
   }
-  return updated;
-}
+};
 
-// lib/utils/simplestore.ts
-var simpleStore = class {
-  constructor(initial) {
+// lib/utils/createSignal.ts
+var createSignal = class {
+  constructor(initial, props) {
+    this.persistName = "";
+    this.actions = {};
     this.ref = [];
     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);
+      }
+      if (typeof initial === "object") {
+        for (const key2 in initial) {
+          if (!Object.prototype.hasOwnProperty.call(this.value, key2)) {
+            this.value[key2] = initial[key2];
+          }
+        }
+      }
+    }
   }
   set(value, shouldRefRender) {
     if (typeof value === "function") {
@@ -376,152 +439,14 @@ var simpleStore = class {
     } else {
       this.value = value;
     }
+    if (this.persistName) {
+      localStorage.setItem(this.persistName, JSON.stringify(this.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);
+      this._updateState();
+    }
+    if (this.callback) {
+      this.callback(this.value);
     }
   }
   setKey(key, value, shouldRefRender) {
@@ -530,12 +455,8 @@ var createSignal = class {
       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.ref.length && shouldRefRender !== false) {
+        this._updateState();
       }
       if (this.callback) {
         this.callback(this.value);
@@ -549,7 +470,7 @@ var createSignal = class {
     }
   }
   createAction(key, action) {
-    if (typeof key === "string" && typeof action === "function") {
+    if (typeof key === "string") {
       this.actions[key] = action;
     } else {
       if (typeof key === "object" && !action) {
@@ -566,27 +487,88 @@ var createSignal = class {
     }
   }
   fireAction(key, data2) {
-    try {
-      if (!(typeof key === "string" && this.actions[key])) {
-        throw Error("");
+    if (this.actions[key].updateState) {
+      this.actions[key].updateState(this, data2);
+      this._updateState(key, data2);
+      return;
+    } else {
+      if (typeof this.actions[key] === "function") {
+        this.actions[key](this, data2);
+        this._updateState(key, data2);
+        return;
       }
-    } catch (_e) {
-      throw Error("\u2718  Cradova err : action " + key + "  does not exist!");
     }
-    this.actions[key](this, data2);
+    throw Error("\u2718  Cradova err : action " + key + "  does not exist!");
   }
-  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);
-      }
+  bind(prop) {
+    if (typeof this.value === "object" && typeof this.value[prop] !== "undefined") {
+      return [this, prop];
     } else {
-      throw new Error("\u2718  Cradova err :  Invalid ref component" + Ref2);
+      throw new Error(
+        "\u2718  Cradova err : can't bind an unavailable property!  " + prop
+      );
+    }
+  }
+  _updateState(name, data2) {
+    if (name && data2) {
+      this.ref.map((ent) => {
+        if (ent._event === name) {
+          if (ent._element_property && ent._signalProperty) {
+            ent.ref.updateState({
+              [ent._element_property]: data2[ent._signalProperty]
+            });
+            return;
+          }
+          if (ent._element_property) {
+            ent.ref.updateState({
+              [ent._element_property]: data2
+            });
+            return;
+          }
+          if (ent._signalProperty) {
+            ent.ref.updateState(data2[ent._signalProperty]);
+            return;
+          }
+        }
+      });
+    } else {
+      for (let i2 = 0; i2 < this.ref.length; i2++) {
+        const ent = this.ref[i2];
+        if (ent._element_property && ent._signalProperty) {
+          ent.ref.updateState({
+            [ent._element_property]: this.value[ent._signalProperty]
+          });
+          continue;
+        }
+        if (ent._element_property) {
+          ent.ref.updateState({
+            [ent._element_property]: this.value
+          });
+          continue;
+        }
+        if (ent._signalProperty) {
+          ent.ref.updateState(this.value[ent._signalProperty]);
+          continue;
+        }
+      }
+    }
+  }
+  bindRef(ref, binding) {
+    if (ref.render) {
+      ref.render = ref.render.bind(ref, this.value);
+    }
+    if (ref && ref.updateState) {
+      this.ref.push({
+        ref,
+        _signalProperty: binding.signalProperty,
+        _element_property: binding._element_property,
+        _event: binding.event
+      });
+      return;
     }
+    throw new Error(
+      "\u2718  Cradova err :  Invalid parameters for binding ref to simple store"
+    );
   }
   listen(callback) {
     this.callback = callback;
@@ -606,63 +588,88 @@ RouterBox["nextRouteController"] = null;
 RouterBox["lastNavigatedRoute"] = null;
 RouterBox["pageShow"] = null;
 RouterBox["pageHide"] = null;
-RouterBox["errorHandler"] = {};
+RouterBox["errorHandler"] = null;
 RouterBox["params"] = {};
 RouterBox["routes"] = {};
 var checker = (url) => {
   if (RouterBox.routes[url]) {
     return [RouterBox.routes[url], { path: url }];
   }
+  if (RouterBox.routes[url + "/"]) {
+    return [RouterBox.routes[url], { path: url }];
+  }
   for (const path in RouterBox.routes) {
     if (!path.includes(":")) {
       continue;
     }
+    if (url.endsWith("/")) {
+      url = url.slice(0, path.length - 2);
+    }
     const urlFixtures = url.split("/");
     const pathFixtures = path.split("/");
+    let fixturesX = 0;
+    let fixturesY = 0;
+    urlFixtures.shift();
+    pathFixtures.shift();
     if (pathFixtures.length === urlFixtures.length) {
-      urlFixtures.shift();
-      pathFixtures.shift();
-      let isIt = true;
-      const routesParams = {};
+      const routesParams = { _path: "" };
       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[i2].includes(":")) {
+          fixturesY += 1;
+          continue;
         }
-        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 (urlFixtures[i2] === pathFixtures[i2] && pathFixtures.indexOf(urlFixtures[i2]) === pathFixtures.lastIndexOf(urlFixtures[i2])) {
+          fixturesX += 1;
         }
       }
-      if (isIt) {
+      if (fixturesX + fixturesY === pathFixtures.length) {
         for (let i2 = 0; i2 < pathFixtures.length; i2++) {
           if (pathFixtures[i2].includes(":")) {
             routesParams[pathFixtures[i2].split(":")[1]] = urlFixtures[i2];
           }
         }
-        routesParams.path = path;
+        routesParams._path = path;
         return [RouterBox.routes[path], routesParams];
       }
     }
   }
   return [];
 };
-Router.route = function(path = "/", screen) {
-  if (!screen.Activate && screen.name) {
+RouterBox.route = (path, screen) => {
+  if (!screen || !screen._Activate) {
     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] = screen;
+  return RouterBox.routes[path];
+};
+Router.BrowserRoutes = function(obj) {
+  for (const path in obj) {
+    let screen = obj[path];
+    if (screen.catch || typeof screen === "function") {
+      RouterBox["routes"][path] = async () => {
+        if (typeof screen === "function") {
+          screen = await screen();
+        } else {
+          screen = await screen;
+        }
+        return RouterBox.route(path, screen.default);
+      };
+    } else {
+      RouterBox.route(path, screen);
+    }
+  }
+  Router.mount();
+};
+Router.delegateScreen = function(path = "/", screen) {
   RouterBox.routes[path] = {
-    controller: (params, force) => screen.Activate(params, force),
+    controller: async (params, force) => await screen.Activate(params, force),
     packager: async (params) => await screen.package(params),
-    deactivate: () => {
-      screen.deActivate();
+    deactivate: async () => {
+      await screen.deActivate();
+    },
+    paramData: (data2) => {
+      screen.paramData = data2;
     }
   };
   if (typeof screen.errorHandler === "function") {
@@ -690,28 +697,31 @@ Router.navigate = function(href, data2 = null, force = false) {
     if (route) {
       RouterBox["nextRouteController"] = route;
       RouterBox.params.params = params;
+      route._paramData = 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(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;
+  if (e) {
+    const Alink = e.target.tagName === "A" && e.target;
+    if (Alink) {
+      if (Alink.href.includes("#")) {
+        const l = Alink.href.split("#");
+        document.getElementById("#" + l[l.length - 1])?.scrollIntoView();
+        return;
+      }
+      if (Alink.href.includes("javascript")) {
+        return;
+      }
+      e.preventDefault();
+      url = new URL(Alink.href).pathname;
     }
-    e.preventDefault();
-    url = new URL(Alink.href).pathname;
   }
   if (!url) {
     url = window.location.pathname;
@@ -725,26 +735,29 @@ RouterBox.router = async function(e, force = false) {
   } else {
     [route, params] = checker(url);
   }
-  if (route) {
+  if (typeof route !== "undefined") {
     try {
       if (params) {
         RouterBox.params.params = params;
       }
-      RouterBox["lastNavigatedRouteController"] && RouterBox["lastNavigatedRouteController"].deactivate();
-      await route.controller(force);
+      if (!route._Activate && typeof route === "function") {
+        route = await route();
+      }
+      if (route._delegatedRoutes !== -1 && route._delegatedRoutes !== 1) {
+        route._delegatedRoutes = true;
+        route = new Screen({
+          name: route._name,
+          template: route._html
+        });
+        RouterBox.routes[url] = route;
+      }
+      await route._Activate(force);
+      RouterBox["lastNavigatedRouteController"] && RouterBox["lastNavigatedRouteController"]._deActivate();
       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];
+      const errorHandler = RouterBox.routes[RouterBox.params.params.path].errorHandler || RouterBox.errorHandler;
       if (errorHandler) {
         errorHandler(error);
       }
@@ -784,300 +797,174 @@ Router.packageScreen = async function(path, data2) {
     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);
+  const [route, params] = checker(path);
+  if (!route._Activate && typeof route._Activate === "function") {
+    route._Activate = await route._Activate();
+  }
+  route._Activate._package(Object.assign(data2, params || {}));
+  route._packed = true;
 };
 Router.getParams = function() {
   return RouterBox["params"];
 };
-Router["addErrorHandler"] = function(callback, path) {
+Router["addErrorHandler"] = function(callback) {
   if (typeof callback === "function") {
-    RouterBox["errorHandler"][path || "all"] = callback;
+    RouterBox["errorHandler"] = 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();
-});
+Router.mount = () => {
+  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);
-          }
+// lib/utils/tags.ts
+var makeElement = (element, ...ElementChildrenAndPropertyList) => {
+  let beforeMount = null;
+  let props = null, text = null;
+  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();
         }
-      } else {
-        if (!isNode(fuc) && typeof fuc !== "string") {
-          throw new Error(
-            " \u2718  Cradova err: only parent with descendants is valid"
-          );
+      }
+      if (isNode(child)) {
+        element.appendChild(child);
+        continue;
+      }
+      if (Array.isArray(child)) {
+        element.appendChild(Rhoda(child));
+        continue;
+      }
+      if (typeof child === "string" || typeof child === "number") {
+        text = child;
+        continue;
+      }
+      if (typeof child === "object") {
+        if (!props) {
+          props = child;
         } else {
-          this.template.innerHTML = "";
-          this.template.appendChild(fuc);
+          props = Object.assign(props, child);
         }
+        continue;
       }
-    }
-    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);
+      if (typeof child !== "undefined") {
+        console.error(" \u2718  Cradova err:   got", { child });
+        throw new Error(
+          "  \u2718  Cradova err:  invalid child type: (" + typeof child + ")"
+        );
       }
     }
+  } else {
+    return element;
   }
-  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 (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 (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);
-              }
-            }
-            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 {
-              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;
-        }
-        console.error(" \u2718  Cradova err:   got", { child });
-        throw new Error(
-          "  \u2718  Cradova err:  invalid child type: (" + typeof child + ")"
-        );
+      if (typeof element.style[prop] !== "undefined" && prop !== "src") {
+        element.style[prop] = props[prop];
+        continue;
       }
-    }
-    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"
-              );
-            }
+      if (prop === "text" && typeof props[prop] === "string" && props[prop] !== "") {
+        text = 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 createSignal) {
+        element.updateState = dispatch.bind(null, element);
+        props[prop][0].bindRef(element, {
+          _element_property: prop,
+          signalProperty: props[prop][1]
+        });
+        continue;
+      }
+      if (prop === "shouldUpdate" && props[prop] === true) {
+        element.updateState = dispatch.bind(void 0, 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;
           }
-          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];
+          element[prop] = props[prop];
+          if (prop !== "for" && prop !== "text" && prop !== "class" && prop !== "tabindex" && prop !== "disabled" && !prop.includes("aria")) {
+            console.warn(" \u2718  Cradova err:  invalid html attribute ", {
+              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;
-            }
+            continue;
           }
-        } catch (error) {
-          console.error(" \u2718  Cradova err: invalid html attribute ", { props });
-          console.error(" \u2718  Cradova err:  ", error);
         }
+      } 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);
+  }
+  if (text) {
+    element.appendChild(document.createTextNode(text));
+  }
+  if (typeof beforeMount === "function") {
+    beforeMount.apply(element);
+  }
+  if (element.tagName === "A") {
+    if (element.href.includes(window.location.origin)) {
+      element.addEventListener("click", (e) => {
+        e.preventDefault();
+        Router.navigate(element.pathname);
+      });
     }
-    return element;
-  };
+  }
+  return element;
+};
+var cra = (element_initials) => {
+  return makeElement.bind(
+    void 0,
+    document.createElement(element_initials)
+  );
 };
 var a = cra("a");
 var abbr = cra("abbr");
@@ -1192,6 +1079,203 @@ var val = cra("val");
 var video = cra("video");
 var wbr = cra("wbr");
 
+// 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: `this 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/Screen.ts
+var Screen = class {
+  constructor(cradova_screen_initials) {
+    this._secondaryChildren = [];
+    this.errorHandler = null;
+    this._packed = false;
+    this._template = document.createElement("div");
+    this._persist = true;
+    this._params = null;
+    this._delegatedRoutesCount = -1;
+    const { template: template2, name, persist, renderInParallel, transition } = cradova_screen_initials;
+    if (typeof template2 !== "function") {
+      console.error(" \u2718  Cradova err: expected a screen but got ", template2);
+      throw new Error(
+        " \u2718  Cradova err: only functions that returns a cradova element is valid as screen"
+      );
+    }
+    this._html = template2;
+    this._name = name;
+    this._transition = transition || "";
+    this._template.setAttribute("id", "cradova-screen-set");
+    if (renderInParallel === true) {
+      this._delegatedRoutesCount = 1;
+    } else {
+      if (typeof persist === "boolean") {
+        this._persist = persist;
+      }
+    }
+  }
+  get _delegatedRoutes() {
+    if (this._delegatedRoutesCount > 1e3) {
+      return -1;
+    }
+    return this._delegatedRoutesCount;
+  }
+  set _delegatedRoutes(count) {
+    if (count) {
+      this._delegatedRoutesCount += 1;
+    }
+  }
+  get _paramData() {
+    return this._params;
+  }
+  set _paramData(params) {
+    if (params) {
+      this._params = params;
+    }
+  }
+  setErrorHandler(errorHandler) {
+    this.errorHandler = errorHandler;
+  }
+  async _package() {
+    if (typeof this._html === "function") {
+      let fuc = await this._html.apply(this, this._data);
+      if (typeof fuc === "function") {
+        fuc = fuc();
+        if (!isNode(fuc)) {
+          throw new Error(
+            " \u2718  Cradova err: only parent with descendants is valid"
+          );
+        } else {
+          if (fuc) {
+            this._template.innerHTML = "";
+            this._template.appendChild(fuc);
+          }
+        }
+      } 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 (!this._template.firstChild) {
+      throw new Error(
+        " \u2718  Cradova err:  no screen is rendered, may have been past wrongly."
+      );
+    }
+    if (this._secondaryChildren.length) {
+      let i2 = 0;
+      while (this._secondaryChildren.length - i2 !== 0) {
+        this.template.appendChild(this._secondaryChildren[i2]);
+        i2++;
+      }
+    }
+  }
+  onActivate(cb) {
+    this._callBack = cb;
+  }
+  onDeactivate(cb) {
+    this._deCallBack = cb;
+  }
+  addChild(...addOns) {
+    this._secondaryChildren.push(frag(addOns));
+  }
+  async _deActivate() {
+    if (this._deCallBack) {
+      await this._deCallBack();
+    }
+    if (this._transition) {
+      this._template.classList.remove(this._transition);
+    }
+  }
+  async _Activate(force) {
+    if (!this._persist || force) {
+      await this._package();
+    } else {
+      if (!this._packed) {
+        this._packed = true;
+        await this._package();
+      }
+    }
+    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>"
+      );
+    }
+    if (this._transition) {
+      this._template.classList.add(this._transition);
+    }
+    doc.innerHTML = "";
+    doc.appendChild(this._template);
+    document.title = this._name;
+    if (this._callBack) {
+      await this._callBack();
+    }
+    window.dispatchEvent(cradovaAftermountEvent);
+    window.scrollTo(0, 0);
+  }
+};
+
 // lib/index.ts
 var make = function(txx) {
   if (!txx) {
@@ -1261,223 +1345,47 @@ var make = function(txx) {
   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) {
+var _2 = (...element_initials) => {
+  if (element_initials[0].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];
+  if (typeof element_initials[0] !== "string") {
+    return frag(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 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;
-        }
-        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 (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);
-        }
-      }
+  const initials = make(element_initials.shift());
+  let props = void 0;
+  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 (text) {
-      element.appendChild(document.createTextNode(text));
+  }
+  if (initials.ID) {
+    if (props) {
+      props["id"] = initials.ID.trim();
+    } else {
+      props = { id: initials.ID.trim() };
     }
-    if (typeof beforeMount === "function") {
-      beforeMount.apply(element);
+  }
+  if (initials.innerValue) {
+    if (props) {
+      props["innerText"] = initials.innerValue;
+    } else {
+      props = { innerText: initials.innerValue };
     }
-    return element;
-  };
+  }
+  return makeElement(element, props, ...element_initials);
 };
 Init();
-var lib_default = _;
+var lib_default = _2;
 export {
-  simpleStore as $,
   Ajax,
   Ref,
   Router,
@@ -1544,11 +1452,13 @@ export {
   ins,
   kbd,
   label,
+  lazy,
   legend,
   li,
   link,
   loop,
   main,
+  makeElement,
   map,
   mark,
   math,
@@ -1604,3 +1514,4 @@ export {
   video,
   wbr
 };
+//! value could be a promise