cradova 3.1.0 → 3.1.2

package/dist/index.js

@@ -0,0 +1,1358 @@
+
+/*
+============================================================================="
+    ██████╗   ██████╗    █████═╗   ███████╗    ███████╗    ██╗   ██╗  █████╗   
+   ██╔════╝   ██╔══██╗  ██╔═╗██║   █      ██  ██╔═════╝█   ██║   ██║  ██╔═╗██  
+   ██║        ██████╔╝  ███████║   █      ██  ██║     ██   ██║   ██║  ██████╗  
+   ██║        ██╔══██╗  ██║  ██║   █      ██  ██║     ██   ╚██╗ ██╔╝  ██║  ██╗ 
+   ╚██████╗   ██║  ██║  ██║  ██║   ███████╔╝   ████████      ╚███╔╝   ██║  ██║ 
+    ╚═════╝   ╚═╝  ╚═╝  ╚═╝  ╚═╝   ╚══════╝     ╚════╝        ╚══╝    ╚═╝  ╚═╝ 
+=============================================================================
+Cradova FrameWork
+@version  3.0.0
+License: Apache V2
+Copyright 2022 Friday Candour. 
+Repository - https://github.com/fridaycandour/cradova
+=============================================================================
+*/
+// lib/parts/fns.ts
+var isNode = (element) => element instanceof HTMLElement || element instanceof DocumentFragment;
+var cradovaEvent = class {
+  constructor() {
+    this.listeners = {};
+  }
+  addEventListener(eventName, callback) {
+    if (!this.listeners[eventName]) {
+      this.listeners[eventName] = [];
+    }
+    this.listeners[eventName].push(callback);
+  }
+  // removeEventListener(eventName: string, num: number) {
+  //   this.listeners[eventName].splice(num, 1);
+  // }
+  dispatchEvent(eventName, eventArgs) {
+    const eventListeners = this.listeners[eventName] || [];
+    for (; eventListeners.length !== 0; ) {
+      eventListeners.shift()?.call(void 0, eventArgs);
+    }
+  }
+};
+var CradovaEvent = new cradovaEvent();
+function Rhoda(l) {
+  const fg = new DocumentFragment();
+  for (let ch of l) {
+    if (Array.isArray(ch)) {
+      fg.appendChild(Rhoda(ch));
+    } else {
+      if (ch instanceof Ref) {
+        ch = ch.render(void 0);
+      }
+      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) {
+  if (Array.isArray(identifier)) {
+    identifier = identifier[0];
+  }
+  if (typeof identifier === "string") {
+    let styTag = document.querySelector("style");
+    if (styTag !== null) {
+      styTag.textContent = identifier + styTag.textContent;
+      return;
+    }
+    styTag = document.createElement("style");
+    styTag.textContent = identifier;
+    document.head.appendChild(styTag);
+  }
+}
+function assert(condition, ...elements) {
+  if (condition) {
+    return elements;
+  }
+  return void 0;
+}
+function assertOr(condition, ifTrue, ifFalse) {
+  if (condition) {
+    return ifTrue;
+  }
+  return ifFalse;
+}
+function loop(datalist2, 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;
+}
+var Ref = class {
+  constructor(component) {
+    this.effects = [];
+    this.effectuate = null;
+    this.rendered = false;
+    this.published = false;
+    this.preRendered = null;
+    this.reference = new reference();
+    // hooks management
+    this._state = [];
+    this._state_track = {};
+    this._state_index = 0;
+    this.component = component.bind(this);
+  }
+  preRender(data2) {
+    let html = this.component(data2);
+    if (typeof html === "function") {
+      html = html();
+    }
+    if (isNode(html)) {
+      this.preRendered = html;
+    }
+    if (!this.preRendered) {
+      throw new Error(
+        " \u2718  Cradova err :  Invalid component type for cradova Ref got  -  " + this.preRendered
+      );
+    }
+    this.reference._appendDomForce("html", this.preRendered);
+  }
+  destroyPreRendered() {
+    this.preRendered = null;
+  }
+  /**
+   * Cradova Ref
+   * ---
+   * returns html with cradova reference
+   * @param data
+   * @returns () => HTMLElement
+   */
+  render(data2, stash) {
+    this.effects = [];
+    this.rendered = false;
+    let html = this.component(data2);
+    if (typeof html === "function") {
+      html = html();
+    }
+    if (!html) {
+      html = this.preRendered;
+    }
+    if (stash) {
+      this.stash = data2;
+    }
+    if (isNode(html)) {
+      this.reference._appendDomForce("html", html);
+      this.effector.apply(this);
+      this.rendered = true;
+      this.published = true;
+    } else {
+      console.error(" \u2718  Cradova err :  Invalid html content, got  - " + html);
+    }
+    return html;
+  }
+  instance() {
+    return this.reference.html;
+  }
+  _setExtra(Extra) {
+    this.Signal = Extra;
+  }
+  _roll_state(data2, idx, get = false) {
+    if (!get) {
+      this._state[idx] = data2;
+    }
+    return this._state[idx];
+  }
+  _effect(fn) {
+    if (!this.rendered) {
+      this.effects.push(fn.bind(this));
+    }
+  }
+  async effector() {
+    if (!this.rendered) {
+      for (let i2 = 0; i2 < this.effects.length; i2++) {
+        await this.effects[i2].apply(this);
+      }
+      this.effects = [];
+    }
+    if (this.effectuate) {
+      this.effectuate();
+      this.effectuate = null;
+    }
+  }
+  /**
+   * Cradova Ref
+   * ---
+   * update ref component with new data and update the dom.
+   * @param data
+   * @returns
+   */
+  updateState(data2, stash) {
+    if (!this.rendered) {
+      this.effectuate = () => {
+        if (this.published) {
+          this.Activate(data2);
+        }
+      };
+    } else {
+      if (this.published) {
+        this.Activate(data2);
+      }
+    }
+    if (stash) {
+      this.stash = data2;
+    }
+  }
+  async Activate(data2) {
+    this._state_index = 0;
+    this.published = false;
+    if (!this.rendered) {
+      return;
+    }
+    let html = this.component(data2);
+    if (typeof html === "function") {
+      html = html();
+    }
+    if (isNode(html)) {
+      this.reference.html.insertAdjacentElement("beforebegin", html);
+      this.reference.html.remove();
+      this.published = true;
+      this.reference._appendDomForce("html", html);
+      CradovaEvent.dispatchEvent("onmountEvent");
+    } else {
+      console.error(" \u2718  Cradova err :  Invalid html content, got  - " + html);
+    }
+  }
+};
+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 (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;
+};
+var lazy = class {
+  constructor(cb) {
+    this._cb = cb;
+  }
+  async load() {
+    let content = await this._cb();
+    if (typeof content === "function") {
+      content = await content();
+    } else {
+      content = await content;
+    }
+    const def = content;
+    if (def.default) {
+      this.content = def?.default;
+    }
+  }
+};
+var reference = class {
+  bindAs(name) {
+    return [this, name];
+  }
+  _appendDomForce(name, Element) {
+    this[name] = Element;
+  }
+};
+function useState(initialValue, ActiveRef) {
+  ActiveRef._state_index += 1;
+  const idx = ActiveRef._state_index;
+  if (!ActiveRef._state_track[idx]) {
+    ActiveRef._roll_state(initialValue, idx);
+    ActiveRef._state_track[idx] = true;
+  }
+  function setState(newState) {
+    ActiveRef._roll_state(newState, idx);
+    ActiveRef.updateState(newState);
+  }
+  return [ActiveRef._roll_state(null, idx, true), setState];
+}
+function useEffect(effect, ActiveRef) {
+  ActiveRef._effect(effect);
+}
+function useRef() {
+  return new reference();
+}
+
+// lib/parts/track.ts
+function dispatch(element, state) {
+  if (!element) {
+    return;
+  }
+  if (typeof state === "object" && !Array.isArray(state)) {
+    for (const key in state) {
+      if (key === "style" && typeof state[key] === "object") {
+        for (const [k, v] of Object.entries(state[key])) {
+          if (typeof element.style[k] !== "undefined" && k !== "src" && typeof v === "string") {
+            element.style[k] = v;
+          } else {
+            throw new Error(
+              "\u2718  Cradova err : " + k + " is not a valid css style property"
+            );
+          }
+        }
+        continue;
+      }
+      const stateK = state;
+      if (typeof element[key] === "function") {
+        if (key.startsWith("on")) {
+          element[key] = stateK[key];
+        } else {
+          element[key].apply(element);
+        }
+        continue;
+      }
+      if (key === "text") {
+        element.innerText = stateK[key];
+        continue;
+      }
+      if (key === "tree") {
+        element.innerHTML = "";
+        element.appendChild(frag([stateK[key]]));
+        continue;
+      }
+      if (key.includes("data-")) {
+        element.setAttribute(key, stateK[key]);
+        continue;
+      }
+      element[key] = stateK[key];
+    }
+  }
+  if (typeof state === "string") {
+    element.innerText = state;
+    return;
+  }
+  if (typeof state === "function") {
+    element.appendChild(frag([state]));
+    return;
+  }
+  if (state instanceof HTMLElement) {
+    element.appendChild(state);
+  }
+  if (!(typeof state === "object" && !Array.isArray(state))) {
+    throw new Error(
+      " \u2718  Cradova err: Cradova got invalid state  => \n" + String(state)
+    );
+  }
+}
+
+// lib/parts/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];
+          }
+        }
+      }
+    }
+  }
+  /**
+   *  Cradova Signal
+   * ----
+   *  set signal value
+   * @param value - signal value
+   * @returns void
+   */
+  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.length && shouldRefRender !== false) {
+      this._updateState();
+    }
+    if (this.callback) {
+      this.callback(this.value);
+    }
+  }
+  /**
+   *  Cradova Signal
+   * ----
+   *  set a key value if it's an object
+   * @param key - key of the key
+   * @param value - value of the key
+   * @returns void
+   */
+  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.length && shouldRefRender !== false) {
+        this._updateState();
+      }
+      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`
+      );
+    }
+  }
+  /**
+   *  Cradova Signal
+   * ----
+   *  set a key to signal an action
+   * @param name - name of the action
+   * @param action function to execute
+   */
+  createAction(name, action) {
+    if (typeof name === "string" && typeof action === "function") {
+      this.actions[name] = action;
+    } else {
+      throw new Error(
+        `\u2718  Cradova err : can't create action, ${name} is not a function`
+      );
+    }
+  }
+  /**
+   *  Cradova Signal
+   * ----
+   *  creates man y actions at a time
+   * @param name - name of the action
+   * @param action function to execute
+   */
+  createActions(Actions) {
+    for (const [name, action] of Object.entries(Actions)) {
+      if (typeof name === "string" && typeof action === "function") {
+        this.actions[name] = action;
+      } else {
+        throw new Error(
+          `\u2718  Cradova err : can't create action, ${name} is not a function`
+        );
+      }
+    }
+  }
+  /**
+   *  Cradova Signal
+   * ----
+   *  fires an action if available
+   * @param key - string key of the action
+   * @param data - data for the action
+   */
+  fireAction(key, data2) {
+    this._updateState(key, data2);
+    if (typeof this.actions[key] === "function") {
+      return this.actions[key].call(this, data2);
+    } else {
+      throw Error("\u2718  Cradova err : action " + key + "  does not exist!");
+    }
+  }
+  /**
+   * Cradova
+   * ---
+   * is used to bind signal data to elements and Refs
+   *
+   * @param prop
+   * @returns something
+   */
+  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, 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;
+        }
+        if (!ent._element_property && !ent._signalProperty) {
+          ent.ref.updateState(this.value);
+          continue;
+        }
+      }
+    }
+  }
+  /**
+   *  Cradova Signal
+   * ----
+   *  set a auto - rendering component for this store
+   *
+   * @param Ref component to bind to.
+   * @param path a property in the object to send to attached ref
+   */
+  bindRef(ref, binding = { signalProperty: "", _element_property: "" }) {
+    if (ref.render) {
+      ref.render = ref.render.bind(ref, this.value);
+    }
+    if (ref._setExtra) {
+      ref._setExtra(this);
+    }
+    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 Signal"
+    );
+  }
+  /**
+   *  Cradova Signal
+   * ----
+   *  set a update listener on value changes
+   * @param callback
+   */
+  listen(callback) {
+    this.callback = callback;
+  }
+  /**
+   *  Cradova Signal
+   * ----
+   * clear the history on local storage
+   *
+   */
+  clearPersist() {
+    if (this.persistName) {
+      localStorage.removeItem(this.persistName);
+    }
+  }
+};
+
+// lib/parts/Screen.ts
+var localTree = new reference();
+var Screen = class {
+  constructor(cradova_screen_initials) {
+    /**
+     * this is a set of added html to the screen
+     */
+    this._secondaryChildren = [];
+    /**
+     * error handler for the screen
+     */
+    this._errorHandler = null;
+    this._packed = false;
+    this._template = document.createElement("div");
+    this._persist = true;
+    this._delegatedRoutesCount = -1;
+    const { template: template2, name, persist, renderInParallel, transition } = cradova_screen_initials;
+    this._html = template2;
+    this._name = name;
+    this._transition = transition;
+    this._template.setAttribute("id", "cradova-screen-set");
+    if (renderInParallel === true) {
+      this._delegatedRoutesCount = 0;
+      this._persist = false;
+    } else {
+      if (typeof persist === "boolean") {
+        this._persist = persist;
+      }
+    }
+  }
+  get _delegatedRoutes() {
+    if (this._delegatedRoutesCount > 100) {
+      return -1;
+    }
+    return this._delegatedRoutesCount;
+  }
+  set _delegatedRoutes(count) {
+    if (count) {
+      this._delegatedRoutesCount += 1;
+    }
+  }
+  setErrorHandler(errorHandler) {
+    this._errorHandler = errorHandler;
+  }
+  async _package() {
+    if (typeof this._html === "function") {
+      let fuc = await this._html.apply(this);
+      if (typeof fuc === "function") {
+        fuc = fuc();
+        if (isNode(fuc)) {
+          this._template.innerHTML = "";
+          this._template.appendChild(fuc);
+        }
+      } else {
+        if (isNode(fuc)) {
+          this._template.innerHTML = "";
+          this._template.appendChild(fuc);
+        } else {
+          throw new Error(
+            ` \u2718  Cradova err:  template function for the screen with name '${this._name}' returned ${fuc} instead of html`
+          );
+        }
+      }
+    }
+    if (this._secondaryChildren.length) {
+      this._template.appendChild(frag(this._secondaryChildren));
+    }
+  }
+  onActivate(cb) {
+    this._callBack = cb;
+  }
+  onDeactivate(cb) {
+    this._deCallBack = cb;
+  }
+  addChildren(...addOns) {
+    this._secondaryChildren.push(...addOns);
+  }
+  async _deActivate() {
+    if (this._deCallBack) {
+      await this._deCallBack();
+    }
+  }
+  async _Activate(force = false) {
+    if (!this._persist || force || !this._packed) {
+      await this._package();
+      this._packed = true;
+    }
+    if (this._transition) {
+      this._template.classList.add(this._transition);
+    }
+    document.title = this._name;
+    localTree.doc.innerHTML = "";
+    localTree.doc.appendChild(this._template);
+    CradovaEvent.dispatchEvent("onmountEvent");
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      // @ts-ignore
+      behavior: "instant"
+    });
+    if (this._callBack) {
+      await this._callBack();
+    }
+  }
+};
+
+// lib/parts/Router.ts
+var RouterBox = {};
+RouterBox["lastNavigatedRouteController"] = null;
+RouterBox["nextRouteController"] = null;
+RouterBox["lastNavigatedRoute"] = null;
+RouterBox["pageShow"] = null;
+RouterBox["pageHide"] = null;
+RouterBox["errorHandler"] = null;
+RouterBox["loadingScreen"] = null;
+RouterBox["params"] = {};
+RouterBox["routes"] = {};
+RouterBox["pageevents"] = [];
+RouterBox["start_pageevents"] = async function(url) {
+  setTimeout(() => {
+    for (let ci = 0; ci < RouterBox["pageevents"].length; ci++) {
+      RouterBox["pageevents"][ci](url);
+    }
+  }, 100);
+};
+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;
+    }
+    const urlFixtures = url.split("/");
+    const pathFixtures = path.split("/");
+    if (url.endsWith("/")) {
+      urlFixtures.pop();
+    }
+    let fixturesX = 0;
+    let fixturesY = 0;
+    urlFixtures.shift();
+    pathFixtures.shift();
+    if (pathFixtures.length === urlFixtures.length) {
+      const routesParams = { _path: "" };
+      for (let i2 = 0; i2 < pathFixtures.length; i2++) {
+        if (pathFixtures[i2].includes(":")) {
+          fixturesY++;
+          continue;
+        }
+        if (urlFixtures[i2] === pathFixtures[i2]) {
+          fixturesX++;
+        }
+      }
+      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;
+        return [RouterBox.routes[path], routesParams];
+      }
+    }
+  }
+  return [];
+};
+RouterBox.route = (path, screen) => {
+  if (typeof screen !== "undefined") {
+    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");
+    }
+    return RouterBox.routes[path] = screen;
+  }
+  return void 0;
+};
+RouterBox.router = async function(_e, _force) {
+  let url, route, params;
+  if (!url) {
+    url = window.location.pathname;
+  }
+  if (url === RouterBox["lastNavigatedRoute"]) {
+    return;
+  }
+  if (RouterBox["nextRouteController"]) {
+    route = RouterBox["nextRouteController"];
+    RouterBox["nextRouteController"] = null;
+  } else {
+    [route, params] = checker(url);
+  }
+  if (typeof route !== "undefined") {
+    try {
+      if (typeof route === "function") {
+        if (RouterBox["LoadingScreen"] && RouterBox["LoadingScreen"]._Activate) {
+          await RouterBox["LoadingScreen"]._Activate();
+        }
+        route = await route();
+        if (!route) {
+          if (RouterBox["lastNavigatedRoute"]) {
+            history.pushState({}, url, RouterBox["lastNavigatedRoute"]);
+          }
+          return;
+        }
+      }
+      if (route._delegatedRoutes !== -1) {
+        route._delegatedRoutes = true;
+        route = new Screen({
+          name: route._name,
+          template: route._html
+        });
+        RouterBox.routes[url] = route;
+      }
+      if (params) {
+        RouterBox.params.params = params;
+      }
+      await route._Activate(_force);
+      RouterBox["start_pageevents"](url);
+      RouterBox["lastNavigatedRouteController"] && RouterBox["lastNavigatedRouteController"]._deActivate();
+      RouterBox["lastNavigatedRoute"] = url;
+      RouterBox["lastNavigatedRouteController"] = route;
+    } catch (error) {
+      if (route && route["_errorHandler"]) {
+        route._errorHandler(error);
+      } else {
+        if (RouterBox["errorHandler"]) {
+          RouterBox["errorHandler"](error);
+        } else {
+          console.error(error);
+          throw new Error(
+            " \u2718  Cradova err:  consider adding error boundary to the specific screen  "
+          );
+        }
+      }
+    }
+  } else {
+    if (RouterBox.routes["/*"]) {
+      await RouterBox.routes["/*"]._Activate(_force);
+    }
+  }
+};
+var RouterClass = class {
+  /** cradova router
+   * ---
+   * Registers a route.
+   *
+   * accepts an object containing
+   *
+   * @param {string}   path     Route path.
+   * @param  screen the cradova screen.
+   */
+  BrowserRoutes(obj) {
+    for (const path in obj) {
+      let screen = obj[path];
+      if (typeof screen === "object" && typeof screen.then === "function" || typeof screen === "function") {
+        RouterBox["routes"][path] = async () => {
+          screen = await (typeof screen === "function" ? await screen() : await screen);
+          return RouterBox.route(path, screen?.default || screen);
+        };
+      } else {
+        RouterBox.route(path, screen);
+      }
+    }
+    this._mount();
+  }
+  /** 
+    Go back in Navigation history
+    */
+  back() {
+    history.go(-1);
+  }
+  /** 
+    Go forward in Navigation history
+    */
+  forward() {
+    history.go(1);
+  }
+  /**
+   * Cradova Router
+   * ------
+   *
+   * Navigates to a designated screen in your app
+   *
+   * @param href string
+   * @param data object
+   * @param force boolean
+   */
+  navigate(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"
+      );
+    }
+    let route = null, params;
+    if (href.includes("://")) {
+      window.location.href = href;
+    } else {
+      if (href === window.location.pathname) {
+        return;
+      }
+      [route, params] = checker(href);
+      if (route) {
+        RouterBox["nextRouteController"] = route;
+        window.history.pushState({}, "", href);
+      }
+      RouterBox.params.params = params;
+      RouterBox.params.data = data2;
+      RouterBox.router(null, force);
+    }
+  }
+  /**
+   * Cradova
+   * ---
+   * Loading screen for your app
+   *
+   * lazy loaded loading use
+   *
+   * @param screen
+   */
+  setLoadingScreen(screen) {
+    if (screen instanceof Screen) {
+      RouterBox["LoadingScreen"] = screen;
+    } else {
+      throw new Error(
+        " \u2718  Cradova err:  Loading Screen should be a cradova screen class"
+      );
+    }
+  }
+  /** cradova router
+   * ---
+   * Listen for navigation events
+   *
+   * @param callback   () => void
+   */
+  onPageEvent(callback) {
+    if (typeof callback === "function") {
+      RouterBox["pageevents"].push(callback);
+    } else {
+      throw new Error(
+        " \u2718  Cradova err:  callback for pageShow event is not a function"
+      );
+    }
+  }
+  /** cradova router
+   * ---
+   * get a screen ready before time.
+   *
+   * @param {string}   path Route path.
+   * @param  data data for the screen.
+   */
+  async packageScreen(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"
+      );
+    }
+    let [route, params] = checker(path);
+    if (!route._Activate && typeof route === "function") {
+      route = await route();
+    }
+    if (route._delegatedRoutes !== -1) {
+      route._delegatedRoutes = true;
+      route = new Screen({
+        name: route._name,
+        template: route._html
+      });
+      RouterBox.routes[path] = route;
+    }
+    route._package(Object.assign(data2, params || {}));
+    route._packed = true;
+  }
+  /**
+   * Cradova Router
+   * ------
+   *
+   * return last set router params
+   *
+   * .
+   */
+  getParams() {
+    return RouterBox["params"];
+  }
+  /**
+   * Cradova
+   * ---
+   * Error Handler for your app
+   *
+   * @param callback
+   * @param path? page path
+   */
+  addErrorHandler(callback) {
+    if (typeof callback === "function") {
+      RouterBox["errorHandler"] = callback;
+    } else {
+      throw new Error(
+        " \u2718  Cradova err:  callback for error event is not a function"
+      );
+    }
+  }
+  _mount() {
+    let doc = document.querySelector("[data-wrapper=app]");
+    if (!doc) {
+      doc = document.createElement("div");
+      doc.setAttribute("data-wrapper", "app");
+      document.body.appendChild(doc);
+      localTree._appendDomForce("doc", doc);
+    } else {
+      localTree._appendDomForce("doc", doc);
+    }
+    window.addEventListener("pageshow", RouterBox.router);
+    window.addEventListener("popstate", (_e) => {
+      _e.preventDefault();
+      RouterBox.router();
+    });
+  }
+};
+var Router = new RouterClass();
+
+// lib/parts/elements.ts
+var makeElement = (element, ElementChildrenAndPropertyList) => {
+  let props = {}, text = null;
+  if (ElementChildrenAndPropertyList.length !== 0) {
+    for (let i2 = 0; i2 < ElementChildrenAndPropertyList.length; i2++) {
+      let child = ElementChildrenAndPropertyList[i2];
+      if (typeof child === "function") {
+        child = child();
+      }
+      if (child instanceof Ref) {
+        child = child.render();
+      }
+      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") {
+        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 + ")"
+        );
+      }
+    }
+  } else {
+    return element;
+  }
+  if (typeof props === "object" && element) {
+    for (const [prop, value] of Object.entries(props)) {
+      if (prop === "style" && typeof value === "object") {
+        Object.assign(element.style, value);
+        continue;
+      }
+      if (Array.isArray(value)) {
+        if (value[0] instanceof createSignal) {
+          element["updateState"] = dispatch.bind(null, element);
+          value[0].bindRef(
+            element,
+            {
+              _element_property: prop,
+              signalProperty: value[1]
+            }
+          );
+          continue;
+        }
+        if (prop == "reference" && value[0] instanceof reference) {
+          element["updateState"] = dispatch.bind(null, element);
+          value[0]._appendDomForce(
+            value[1],
+            element
+          );
+          continue;
+        }
+      }
+      if (prop === "onmount" && typeof props["onmount"] === "function") {
+        const ev = () => {
+          props.onmount?.apply(element);
+          props["onmount"] = void 0;
+        };
+        CradovaEvent.addEventListener("onmountEvent", ev);
+        continue;
+      }
+      if (prop.includes("data-")) {
+        element.setAttribute(prop, value);
+        continue;
+      }
+      if (prop.includes("aria-")) {
+        element.setAttribute(prop, value);
+        continue;
+      }
+      if (prop === "href" && typeof value === "string") {
+        const href = value || "";
+        if (!href.includes("://")) {
+          element.addEventListener(
+            "click",
+            (e) => {
+              e.preventDefault();
+              Router.navigate(
+                element.pathname
+              );
+              if (href.includes("#")) {
+                const l = href.split("#").at(-1);
+                document.getElementById("#" + l)?.scrollIntoView();
+              }
+            }
+          );
+        }
+        element.setAttribute(prop, value);
+        continue;
+      }
+      if (typeof element.style[prop] !== "undefined" && prop !== "src") {
+        element.style[prop] = value;
+        continue;
+      }
+      element[prop] = value;
+    }
+  }
+  if (text) {
+    element.appendChild(document.createTextNode(text));
+  }
+  return element;
+};
+var make = function(descriptor) {
+  if (!descriptor.length) {
+    return ["DIV"];
+  }
+  if (Array.isArray(descriptor)) {
+    descriptor = descriptor[0];
+  }
+  let innerValue = "";
+  if (descriptor.includes("|")) {
+    [descriptor, innerValue] = descriptor.split("|");
+    if (!descriptor) {
+      return ["P", void 0, void 0, innerValue];
+    }
+  }
+  let tag;
+  if (!descriptor.includes("#")) {
+    descriptor = descriptor.split(".");
+    tag = descriptor.shift();
+    if (!tag) {
+      tag = "DIV";
+    }
+    return [tag, void 0, descriptor.join(" "), innerValue];
+  } else {
+    if (!descriptor.includes(".")) {
+      descriptor = descriptor.split("#");
+      tag = descriptor.shift();
+      if (!tag) {
+        tag = "DIV";
+      }
+      if (descriptor[0].includes(" ")) {
+        descriptor = [descriptor[0].split(" ")[1]];
+      }
+      return [tag, descriptor[0], void 0, innerValue];
+    }
+  }
+  descriptor = descriptor.split(".");
+  const classes = [];
+  const IDs = [];
+  tag = !descriptor[0].includes("#") && descriptor.shift();
+  if (!tag) {
+    tag = "DIV";
+  }
+  for (let i2 = 0; i2 < descriptor.length; i2++) {
+    if (descriptor[i2].includes("#")) {
+      const item = descriptor[i2].split("#");
+      IDs.push(item[1]);
+      if (i2 === 0) {
+        tag = item[0];
+        continue;
+      }
+      classes.push(item[0]);
+      continue;
+    }
+    classes.push(descriptor[i2]);
+  }
+  return [tag || "DIV", IDs[0], classes.join(" "), innerValue];
+};
+var cra = (tag) => {
+  const extend = (...Children_and_Properties) => makeElement(document.createElement(tag), Children_and_Properties);
+  return extend;
+};
+var a = cra("a");
+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 blockquote = cra("blockquote");
+var br = cra("br");
+var button = cra("button");
+var canvas = cra("canvas");
+var caption = cra("caption");
+var code = cra("code");
+var col = cra("col");
+var colgroup = cra("colgroup");
+var data = cra("data");
+var datalist = cra("datalist");
+var details = cra("details");
+var dialog = cra("dialog");
+var div = cra("div");
+var em = cra("em");
+var embed = cra("embed");
+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 i = cra("i");
+var iframe = cra("iframe");
+var img = cra("img");
+var input = cra("input");
+var label = cra("label");
+var legend = cra("legend");
+var li = cra("li");
+var link = cra("link");
+var main = cra("main");
+var menu = cra("menu");
+var nav = cra("nav");
+var object = cra("object");
+var ol = cra("ol");
+var optgroup = cra("optgroup");
+var option = cra("option");
+var p = cra("p");
+var pre = cra("pre");
+var progress = cra("progress");
+var q = cra("q");
+var section = cra("section");
+var select = cra("select");
+var source = cra("source");
+var span = cra("span");
+var strong = cra("strong");
+var summary = cra("summary");
+var table = cra("table");
+var tbody = cra("tbody");
+var td = cra("td");
+var template = cra("template");
+var textarea = cra("textarea");
+var th = cra("th");
+var title = cra("title");
+var tr = cra("tr");
+var track = cra("track");
+var u = cra("u");
+var ul = cra("ul");
+var video = cra("video");
+
+// lib/parts/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, reject) {
+    const ajax = new XMLHttpRequest();
+    const formData = new FormData();
+    if (callbacks && typeof callbacks === "object") {
+      for (const [k, v] of Object.entries(callbacks)) {
+        ajax.addEventListener(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);
+        }
+        if (typeof value === "string") {
+          formData.set(k, value);
+        }
+      }
+    }
+    ajax.addEventListener("error", () => {
+      if (!navigator.onLine) {
+        reject(
+          JSON.stringify({
+            message: `this device is offline!`
+          })
+        );
+      } else {
+        reject(
+          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/index.ts
+var _2 = (...element_initials) => {
+  const {
+    0: tag,
+    1: id,
+    2: className,
+    3: innerText
+  } = make(element_initials[0]);
+  const element = tag ? document.createElement(tag) : new DocumentFragment();
+  if (tag) {
+    if (className) {
+      element.className = className;
+    }
+    if (id) {
+      element.id = id;
+    }
+    if (innerText) {
+      element.innerText = innerText;
+    }
+    element_initials.shift();
+  }
+  return makeElement(element, element_initials);
+};
+var lib_default = _2;
+//! get url hash here and scroll into view
+
+export { Ajax, CradovaEvent, Ref, Rhoda, Router, Screen, a, area, article, aside, assert, assertOr, audio, b, base, blockquote, br, button, canvas, caption, code, col, colgroup, cradovaEvent, createSignal, css, data, datalist, lib_default as default, details, dialog, div, em, embed, figure, footer, form, frag, h1, h2, h3, h4, h5, h6, head, header, hr, i, iframe, img, input, isNode, label, lazy, legend, li, link, loop, main, make, makeElement, menu, nav, object, ol, optgroup, option, p, pre, progress, q, reference, section, select, source, span, strong, summary, table, tbody, td, template, textarea, th, title, tr, track, u, ul, useEffect, useRef, useState, video };