cradova 1.2.0 → 1.3.0

package/dist/index.js

@@ -3,10 +3,12 @@ var Screen = class {
   constructor(cradova_screen_initials) {
     this.packed = false;
     this.secondaryChildren = [];
+    this.template = document.createElement("div");
     this.persist = true;
     this.rendered = false;
+    this.pushed = false;
     this.effects = [];
-    const { template, name, callBack, transition, persist } = cradova_screen_initials;
+    const { template, name, transition, persist } = cradova_screen_initials;
     if (typeof template !== "function") {
       throw new Error(
         " \u2718  Cradova err: only functions that returns a cradova element is valid as screen"
@@ -14,28 +16,33 @@ var Screen = class {
     }
     this.html = template.bind(this);
     this.name = name;
-    this.template = document.createDocumentFragment();
-    this.callBack = callBack;
+    this.template.id = "cradova-screen-set";
     this.transition = transition;
     if (typeof persist === "boolean") {
       this.persist = persist;
     }
   }
   effect(fn) {
-    if (!this.rendered) {
-      this.effects.push(fn);
+    if (!this.rendered && !this.pushed) {
+      this.effects.push(
+        new Promise(async (res, rej) => {
+          try {
+            res(await fn());
+          } catch (error) {
+            rej(error);
+          }
+        })
+      );
     }
   }
   async effector() {
-    if (!this.rendered) {
-      this.rendered = true;
-      for (let fnIdex = 0; fnIdex < this.effects.length; fnIdex++) {
-        const fn = this.effects[fnIdex];
-        const data = await fn();
-        if (data) {
-          await this.Activate(data, true);
-        }
-      }
+    if (this.rendered) {
+      await Promise.allSettled(this.effects);
+    }
+  }
+  async updateState(data) {
+    if (this.rendered) {
+      await this.Activate(data, true);
     }
   }
   async package(data) {
@@ -61,7 +68,7 @@ var Screen = class {
       );
     }
     if (this.secondaryChildren.length) {
-      this.template.append(...this.secondaryChildren);
+      this.template.append(this.secondaryChildren);
     }
   }
   onActivate(cb) {
@@ -73,12 +80,20 @@ var Screen = class {
         this.secondaryChildren.push(addOns[i]);
       }
       if (addOns[i] && typeof addOns[i] === "function") {
-        this.secondaryChildren.push(addOns[i]());
+        let a = addOns[i]();
+        if (a && a instanceof HTMLElement) {
+          this.secondaryChildren.push(a);
+        }
+        if (addOns[i] && typeof addOns[i] === "function") {
+          a = a();
+          if (a && a instanceof HTMLElement) {
+            this.secondaryChildren.push(a);
+          }
+        }
       }
     }
   }
   deActivate() {
-    this.template.parentElement?.removeChild(this.template);
     if (!this.persist) {
       this.rendered = false;
     }
@@ -93,21 +108,32 @@ var Screen = class {
         this.packed = true;
       }
     }
-    if (force) {
+    if (this.persist && force) {
       await this.package(data);
       this.packed = true;
       this.rendered = false;
     }
+    if (!this.pushed) {
+      this.pushed = true;
+    }
     document.title = this.name;
     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 [data-cra-id=cradova-app-wrapper]"
+      );
+    }
     doc?.replaceChildren(this.template);
     if (!this.persist) {
       this.packed = false;
     }
-    await this.effector();
-    if (doc?.firstChild?.afterMount) {
-      doc?.firstChild.afterMount();
-      doc.firstChild.afterMount = void 0;
+    if (this.effects.length) {
+      await this.effector();
+      this.rendered = true;
+    }
+    if (doc?.firstChild?.firstChild?.afterMount) {
+      const c = doc?.firstChild;
+      c?.firstChild.afterMount();
     }
     if (this.callBack) {
       await this.callBack(data);
@@ -252,15 +278,15 @@ Router.route = function(path = "/", screen) {
   };
 };
 Router.navigate = function(href, data = null, force = false) {
-  if (typeof data === "boolean") {
-    force = true;
-    data = null;
-  }
   if (typeof href !== "string") {
     throw new TypeError(
       " \u2718  Cradova err:  href must be a defined path but got " + href + " instead"
     );
   }
+  if (typeof data === "boolean") {
+    force = true;
+    data = null;
+  }
   let route = null, params, link = null;
   if (href.includes("://")) {
     window.location.href = href;
@@ -276,9 +302,9 @@ Router.navigate = function(href, data = null, force = false) {
       link = href;
       RouterBox["pageHide"] && RouterBox["pageHide"](href + " :navigated");
       window.history.pushState({}, "", link);
-      setTimeout(async () => {
+      (async () => {
         await RouterBox.router(null, force);
-      }, 0);
+      })();
     }
   }
 };
@@ -354,11 +380,11 @@ Router["onPageHide"] = function(callback) {
   }
 };
 Router.packageScreen = async function(path, data) {
-  if (!Router.routes[path]) {
+  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 Router.routes[path].packager(data);
+  await RouterBox.routes[path].packager(data);
 };
 window.addEventListener("pageshow", RouterBox.router);
 window.addEventListener("popstate", (e) => {
@@ -471,7 +497,7 @@ function media(value, ...properties) {
   aniStyleTag.innerHTML = totalAnimation;
   document.head.append(aniStyleTag);
 }
-function css(identifier, properties = {}) {
+function css(identifier, properties) {
   if (typeof identifier === "string" && typeof properties === "undefined") {
     let styTag = document.querySelector("style");
     if (styTag !== null) {
@@ -484,6 +510,9 @@ function css(identifier, properties = {}) {
     document.head.append(styTag);
     return;
   }
+  if (!properties) {
+    return;
+  }
   const styS = "" + identifier + `{
 `;
   const styE = `}
@@ -617,40 +646,26 @@ var RefList = class {
   constructor(component) {
     this.stateID = uuid();
     this.parentElement = null;
-    this.datas = [];
     this.component = component.bind(this);
   }
-  stale(datas) {
-    this.datas = datas;
-  }
   r(d) {
     return this.render(d);
   }
-  u(d) {
-    return this.updateState(d);
-  }
-  render(datas) {
-    if (datas) {
-      this.datas = datas;
-    }
-    if (!this.datas) {
-      throw new Error(
-        " \u2718  Cradova err:  RefList cannot be rendered without input"
-      );
-    }
-    if (!Array.isArray(this.datas)) {
+  render(datas = []) {
+    if (!Array.isArray(datas)) {
       throw new Error(
         " \u2718  Cradova err:  RefList cannot render non-array input"
       );
     }
     const elements = [];
-    const data = this.datas.length;
+    const data = datas.length;
     for (let i = 0; i < data; i++) {
-      elements.push(
-        this.component(this.datas[i], i)({ stateID: this.stateID })
-      );
+      elements.push(this.component(datas[i], i)({ stateID: this.stateID }));
     }
-    return elements;
+    if (elements.length) {
+      return elements;
+    }
+    return lib_default("div")({ stateID: this.stateID });
   }
   updateState(datas) {
     if (!datas) {
@@ -702,12 +717,8 @@ var RefList = class {
 var Ref = class {
   constructor(component) {
     this.stateID = uuid();
-    this.data = void 0;
     this.component = component.bind(this);
   }
-  stale(data) {
-    this.data = data;
-  }
   r(d) {
     return this.render(d);
   }
@@ -715,10 +726,7 @@ var Ref = class {
     return this.updateState(d);
   }
   render(data) {
-    if (data) {
-      this.data = data;
-    }
-    const chtml = this.component(this.data);
+    const chtml = this.component(data);
     if (typeof chtml !== "function") {
       throw new Error(
         " \u2718  Cradova err :  Invalid component type for cradova Ref, got  -  " + chtml
@@ -740,6 +748,18 @@ var Ref = class {
         `Cradova can't render component make sure it's a valid component`
       );
     }
+    if (typeof this.upcb !== "undefined" && element.afterMount) {
+      const afterMount = element.afterMount;
+      const upcb = this.upcb.bind(null, data);
+      element.afterMount = () => {
+        upcb();
+        afterMount();
+      };
+    } else {
+      if (this.upcb) {
+        element.afterMount = this.upcb.bind(null, data);
+      }
+    }
     return () => element;
   }
   instance() {
@@ -752,7 +772,7 @@ var Ref = class {
       cradovaDispatchTrackBreak: true
     });
   }
-  onStateUpdate(cb) {
+  effect(cb) {
     this.upcb = cb;
   }
   updateState(data) {
@@ -796,7 +816,7 @@ var Ref = class {
         fn(element, data);
       }
     } catch (e0) {
-      console.log(e0);
+      console.warn(e0);
     }
     if (this.upcb) {
       this.upcb(data);
@@ -806,7 +826,7 @@ var Ref = class {
     dispatch(this.stateID, { remove: true });
   }
 };
-var frag = function(children) {
+var frag = function(...children) {
   const par = document.createDocumentFragment();
   for (let i = 0; i < children.length; i++) {
     if (typeof children[i] === "function") {
@@ -915,12 +935,12 @@ function cradovaDispatchTrack(nodes, state) {
           }
           if (Array.isArray(state[key])) {
             throw new TypeError(
-              " \u2718  Cradova err:   invalid tree element type, should be a single element or parent element from cradova"
+              " \u2718  Cradova err: invalid tree element type, should be a single element or parent element from cradova"
             );
           }
           if (!(state[key] instanceof HTMLElement)) {
             console.error(
-              " \u2718  Cradova err:   wrong element type: can't update tree using " + state[key]
+              " \u2718  Cradova err:  wrong element type: can't update tree using " + state[key]
             );
             throw new TypeError(
               " \u2718  Cradova err:   invalid element, should be a html element from cradova"
@@ -929,8 +949,22 @@ function cradovaDispatchTrack(nodes, state) {
           element.replaceChildren(state[key]);
           continue;
         }
-        element[key] = state[key];
+        try {
+          if (typeof element[key] !== "undefined") {
+            element[key] = state[key];
+          } else {
+            element[key] = state[key];
+            if (key !== "afterMount" && 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);
+        }
       }
+    } else {
+      throw new TypeError(" \u2718  Cradova err:   invalid state object" + state);
     }
   }
 }
@@ -1134,12 +1168,10 @@ var createSignal = class {
 
 // lib/scripts/simplestore.ts
 var simpleStore = class {
-  constructor(initial, ref) {
+  constructor(initial) {
+    this.ref = [];
     this.value = null;
     this.value = initial;
-    if (ref) {
-      this.bindRef(ref);
-    }
   }
   set(value, shouldRefRender) {
     if (typeof value === "function") {
@@ -1147,8 +1179,30 @@ var simpleStore = class {
     } else {
       this.value = value;
     }
-    if (this.ref && shouldRefRender !== false) {
-      this.ref.updateState(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 i = 0; i < this.ref.length; i++) {
+        const entry = this.ref[i];
+        entry.ref.updateState({ [entry.prop]: this.value[entry.prop] });
+      }
     }
   }
   setKey(name, value, shouldRefRender) {
@@ -1158,19 +1212,21 @@ var simpleStore = class {
       } else {
         this.value[name] = value;
       }
-      if (this.ref && shouldRefRender !== false) {
-        this.ref.updateState(this.value);
+      if (this.ref.length && shouldRefRender !== false) {
+        this.updateState(name);
       }
     }
   }
-  bindRef(Ref2) {
-    if (Ref2 && Ref2.updateState) {
-      this.ref = Ref2;
-      if (Ref2.stale) {
-        Ref2.stale(this.value);
+  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 ref component" + Ref2);
+      throw new Error(
+        "\u2718  Cradova err :  Invalid parameters for binding ref to simple store"
+      );
     }
   }
 };
@@ -1609,72 +1665,134 @@ var make = function(txx) {
   return { tag, className, ID, innerValue };
 };
 var _ = (...element_initials) => {
-  let firstProps, firstLevelChildren = [], beforeMount;
-  if (typeof element_initials[1] === "object" && !Array.isArray(element_initials[1])) {
-    firstProps = element_initials[1];
-    if (firstProps?.beforeMount) {
-      beforeMount = firstProps["beforeMount"];
-      firstProps["beforeMount"] = void 0;
-    }
-    if (element_initials.length > 2) {
-      firstLevelChildren = element_initials.slice(2, element_initials.length);
-    }
-  } else {
-    firstLevelChildren = element_initials.slice(1, element_initials.length);
-  }
   if (element_initials[0].raw) {
     element_initials[0] = element_initials[0]["raw"][0];
   }
-  function identify(element_initials2) {
-    if (typeof element_initials2 !== "object") {
-      element_initials2 = [element_initials2];
-    }
-    const initials = make(element_initials2[0]);
-    return (...incoming) => {
-      let secondLevelChildren = [], props = {}, text;
-      for (let i = 0; i < incoming.length; i++) {
-        if (typeof incoming[i] === "object" && !Array.isArray(incoming[1])) {
-          props = incoming[i];
-          if (incoming[i].beforeMount) {
-            beforeMount = incoming[i]["beforeMount"];
-            incoming[i]["beforeMount"] = void 0;
+  if (typeof element_initials[0] !== "string") {
+    console.error(" \u2718  Cradova err: NO TEMPLATE STRING PROVIDED");
+    return () => " \u2718 NO TEMPLATE STRING PROVIDED";
+  }
+  let beforeMount = null, firstLevelChildren = [];
+  if (element_initials.length > 1) {
+    firstLevelChildren = element_initials.splice(1);
+  }
+  if (typeof element_initials !== "object") {
+    element_initials = [element_initials];
+  }
+  return (...incoming) => {
+    const initials = make(element_initials[0]);
+    let secondLevelChildren = [], props = null, text = null;
+    if (firstLevelChildren.length) {
+      secondLevelChildren.push(...firstLevelChildren);
+    }
+    if (incoming.length) {
+      secondLevelChildren.push(...incoming);
+    }
+    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) {
+      element.className = initials.className.trim();
+    }
+    if (initials.ID) {
+      element.setAttribute("id", initials.ID.trim());
+    }
+    if (initials.innerValue) {
+      element.innerText = initials.innerValue;
+    }
+    if (secondLevelChildren.length) {
+      for (let i = 0; i < secondLevelChildren.length; i++) {
+        if (typeof secondLevelChildren[i] === "function") {
+          let child2 = secondLevelChildren[i]();
+          if (typeof child2 === "function") {
+            child2 = child2();
+          }
+          try {
+            if (child2 instanceof HTMLElement || child2 instanceof DocumentFragment) {
+              element.append(child2);
+            }
+            if (child2 && child2.afterMount) {
+              child2.afterMount(child2);
+              child2.afterMount = void 0;
+            }
+          } catch (error) {
+            console.error(" \u2718  Cradova err:  ", error);
+            if (!(child2 instanceof HTMLElement)) {
+              throw new Error(
+                "  \u2718  Cradova err:  invalid child type: " + child2 + " (" + typeof child2 + ")"
+              );
+            }
           }
           continue;
         }
-        if (typeof incoming[i] === "function" || incoming[i] instanceof HTMLElement) {
-          secondLevelChildren.push(incoming[i]);
+        if (secondLevelChildren[i] instanceof HTMLElement || secondLevelChildren[i] instanceof DocumentFragment) {
+          element.append(secondLevelChildren[i]);
           continue;
         }
-        if (typeof incoming[i] === "string") {
-          text = incoming[i];
+        if (Array.isArray(secondLevelChildren[i])) {
+          const arrCX = secondLevelChildren[i];
+          const arrCXLength = arrCX.length;
+          const arrSET = [];
+          for (let p = 0; p < arrCXLength; p++) {
+            if (!(arrCX[p] instanceof HTMLElement) && typeof arrCX[p] !== "function" && !Array.isArray(arrCX[p])) {
+              console.error(" \u2718  Cradova err:  ", arrCX[p]);
+              throw new TypeError(
+                " \u2718  Cradova err: invalid tag type or template literal, cradova was enable to create this element show above \u21D1"
+              );
+            }
+            arrSET.push(arrCX[p]);
+          }
+          secondLevelChildren = [
+            ...secondLevelChildren.slice(0, i + 1),
+            ...arrSET,
+            ...secondLevelChildren.slice(i + 1, secondLevelChildren.length)
+          ];
           continue;
         }
-      }
-      if (firstLevelChildren.length) {
-        secondLevelChildren.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) {
-        element.className = initials.className.trim();
-      }
-      if (initials.ID) {
-        element.setAttribute("id", initials.ID.trim());
-      }
-      if (initials.innerValue) {
-        element.innerText = initials.innerValue;
-      }
-      if (firstProps) {
-        for (const prp in firstProps) {
-          props[prp] = firstProps[prp];
+        const child = secondLevelChildren[i];
+        if (child instanceof HTMLElement || child instanceof DocumentFragment) {
+          element.append(child);
+          if (child.afterMount) {
+            child.afterMount(child);
+            child.afterMount = void 0;
+          }
+        } else {
+          if (typeof child === "object" && !Array.isArray(child) && !(child instanceof HTMLElement)) {
+            if (!props) {
+              props = child;
+            } else {
+              const po = child;
+              for (const p in po) {
+                props[p] = po[p];
+              }
+            }
+            continue;
+          }
+          if (typeof child === "string") {
+            text = child;
+            continue;
+          }
+          if (typeof child === "string" || typeof child === "number") {
+            text = child;
+          } else {
+            console.error(" \u2718  Cradova err:   got", child);
+            throw new Error(
+              "  \u2718  Cradova err:  invalid child type: (" + typeof child + ")"
+            );
+          }
         }
       }
+    }
+    if (props) {
+      if (props.beforeMount) {
+        beforeMount = props["beforeMount"];
+        props["beforeMount"] = void 0;
+      }
       for (const prop in props) {
         if (prop === "style" && typeof props[prop] === "object") {
           for (const [k, v] of Object.entries(props[prop])) {
@@ -1692,7 +1810,7 @@ var _ = (...element_initials) => {
           element.style[prop] = props[prop];
           continue;
         }
-        if (prop === "text" && typeof props[prop] === "string" && props[prop] !== "") {
+        if (prop === "text" && (typeof props[prop] === "string" || typeof props[prop] === "number") && props[prop] !== "") {
           text = props[prop];
           continue;
         }
@@ -1713,6 +1831,11 @@ var _ = (...element_initials) => {
           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;
@@ -1722,92 +1845,24 @@ var _ = (...element_initials) => {
             element[prop] = props[prop];
           } else {
             element[prop] = props[prop];
-            if (prop !== "afterMount" && prop !== "for" && !prop.includes("aria")) {
+            if (prop !== "afterMount" && prop !== "for" && prop !== "text" && prop !== "class" && !prop.includes("aria")) {
               console.error(" \u2718  Cradova err:  invalid html attribute " + prop);
             }
           }
         } catch (error) {
+          console.error(" \u2718  Cradova err: Cradova got ", props);
           console.error(" \u2718  Cradova err:  ", error);
         }
       }
-      if (secondLevelChildren.length) {
-        for (let i = 0; i < secondLevelChildren.length; i++) {
-          if (typeof secondLevelChildren[i] === "function") {
-            let child2 = secondLevelChildren[i]();
-            if (typeof child2 === "function") {
-              child2 = child2();
-            }
-            try {
-              if (child2) {
-                element.append(child2);
-              }
-              if (child2 && child2.afterMount) {
-                child2.afterMount(child2);
-                child2.afterMount = void 0;
-              }
-            } catch (error) {
-              console.error(" \u2718  Cradova err:  ", error);
-              if (!(child2 instanceof HTMLElement)) {
-                throw new Error(
-                  "  \u2718  Cradova err:  invalid child type: " + child2 + " (" + typeof child2 + ")"
-                );
-              }
-            }
-            continue;
-          }
-          if (Array.isArray(secondLevelChildren[i])) {
-            const arrCX = secondLevelChildren[i];
-            const arrCXLength = arrCX.length;
-            const arrSET = [];
-            for (let p = 0; p < arrCXLength; p++) {
-              if (!(arrCX[p] instanceof HTMLElement) && typeof arrCX[p] !== "function" && !Array.isArray(arrCX[p])) {
-                console.error(" \u2718  Cradova err:  ", arrCX[p]);
-                throw new TypeError(
-                  " \u2718  Cradova err: invalid tag type or template literal, cradova was enable to create this element show above \u21D1"
-                );
-              }
-              arrSET.push(arrCX[p]);
-            }
-            secondLevelChildren = [
-              ...secondLevelChildren.slice(0, i + 1),
-              ...arrSET,
-              ...secondLevelChildren.slice(i + 1, secondLevelChildren.length)
-            ];
-            continue;
-          }
-          const child = secondLevelChildren[i];
-          if (child instanceof HTMLElement || child instanceof DocumentFragment) {
-            element.append(child);
-            if (child.afterMount) {
-              child.afterMount(child);
-              child.afterMount = void 0;
-            }
-          } else {
-            if (typeof child === "string") {
-              text = child;
-            } else {
-              console.error(" \u2718  Cradova err:   got", child);
-              throw new Error(
-                "  \u2718  Cradova err:  invalid child type: (" + typeof child + ")"
-              );
-            }
-          }
-        }
-      }
-      if (text) {
-        element.innerText = text;
-      }
-      if (beforeMount) {
-        beforeMount(element);
-      }
-      return element;
-    };
-  }
-  if (typeof element_initials[0] !== "string") {
-    console.error(" \u2718  Cradova err: NO TEMPLATE STRING PROVIDED");
-    return () => " \u2718 NO TEMPLATE STRING PROVIDED";
-  }
-  return identify(element_initials);
+    }
+    if (text) {
+      element.innerText = text;
+    }
+    if (beforeMount) {
+      beforeMount(element);
+    }
+    return element;
+  };
 };
 Init();
 var lib_default = _;
@@ -1833,7 +1888,6 @@ export {
   fullScreen,
   loadCradovaUICss,
   ls,
-  make,
   media,
   simpleStore,
   swipe,