cradova 2.3.0 → 3.0.0

package/dist/index.js

@@ -1,13 +1,4 @@
-// lib/utils/init.ts
-var Init = function() {
-  if (!document.querySelector("[data-wrapper=app]")) {
-    const Wrapper = document.createElement("div");
-    Wrapper.setAttribute("data-wrapper", "app");
-    document.body.appendChild(Wrapper);
-  }
-};
-
-// lib/utils/fns.ts
+// lib/parts/fns.ts
 var isNode = (node) => typeof node === "object" && typeof node.nodeType === "number";
 var cradovaEvent = class {
   constructor() {
@@ -19,20 +10,10 @@ var cradovaEvent = class {
     }
     this.listeners[eventName].push(callback);
   }
-  removeEventListener(eventName, callback) {
-    if (this.listeners[eventName]) {
-      const index = this.listeners[eventName].indexOf(callback);
-      if (index !== -1) {
-        this.listeners[eventName].splice(index, 1);
-      }
-    }
-  }
   dispatchEvent(eventName, eventArgs) {
-    const eventListeners = this.listeners[eventName];
-    if (eventListeners) {
-      for (let i2 = 0; i2 < eventListeners.length; i2++) {
-        eventListeners[i2](eventArgs);
-      }
+    const eventListeners = this.listeners[eventName] || [];
+    for (; eventListeners.length !== 0; ) {
+      eventListeners.shift()?.call(void 0, eventArgs);
     }
   }
 };
@@ -43,8 +24,8 @@ function Rhoda(l) {
     if (Array.isArray(ch)) {
       fg.appendChild(Rhoda(ch));
     } else {
-      if (ch?.render) {
-        ch = ch.render();
+      if (ch instanceof Ref) {
+        ch = ch.render(void 0);
       }
       if (typeof ch === "function") {
         ch = ch();
@@ -116,18 +97,21 @@ var Ref = class {
     this.component = component.bind(this);
   }
   preRender(data2) {
-    const chtml = this.component(data2);
-    if (chtml instanceof HTMLElement) {
-      this.preRendered = chtml;
-    } else {
-      this.preRendered = chtml();
+    let ihtml = this.component(data2);
+    let phtml;
+    if (typeof ihtml === "function") {
+      phtml = ihtml;
+      ihtml = phtml();
+    }
+    if (ihtml instanceof HTMLElement) {
+      this.preRendered = ihtml;
     }
     if (!this.preRendered) {
       throw new Error(
         " \u2718  Cradova err :  Invalid component type for cradova Ref got  -  " + this.preRendered
       );
     }
-    this.reference._appendDomForce("reference", this.preRendered);
+    this.reference._appendDomForce("element", this.preRendered);
   }
   destroyPreRendered() {
     this.preRendered = null;
@@ -138,11 +122,14 @@ var Ref = class {
     this.hasFirstStateUpdateRun = false;
     let element = null;
     if (!this.preRendered) {
-      const chtml = this.component(data2);
-      if (chtml instanceof HTMLElement) {
-        element = chtml;
-      } else {
-        element = chtml();
+      let ihtml = this.component(data2);
+      let phtml;
+      if (typeof ihtml === "function") {
+        phtml = ihtml;
+        ihtml = phtml();
+      }
+      if (ihtml instanceof HTMLElement) {
+        element = ihtml;
       }
       if (!element) {
         throw new Error(
@@ -155,20 +142,19 @@ var Ref = class {
     }
     const av = async () => {
       await this.effector.apply(this);
-      CradovaEvent.removeEventListener("cradovaAftermountEvent", av);
     };
-    CradovaEvent.addEventListener("cradovaAftermountEvent", av);
+    CradovaEvent.addEventListener("onmountEvent", av);
     this.effector();
     this.published = true;
     this.rendered = true;
     if (!element) {
       element = this.preRendered;
     }
-    this.reference._appendDomForce("reference", element);
+    this.reference._appendDomForce("element", element);
     return element;
   }
   instance() {
-    return this.reference.reference;
+    return this.reference.element;
   }
   _setExtra(Extra) {
     this.Signal = Extra;
@@ -217,38 +203,36 @@ var Ref = class {
       return;
     }
     this.published = false;
-    if (!this.reference.reference) {
+    if (!this.reference.element) {
       return;
     }
-    const chtml = this.component(data2);
+    let ihtml = this.component(data2);
     let element;
-    if (chtml instanceof HTMLElement) {
-      element = chtml;
-    } else {
-      element = chtml();
+    let phtml;
+    if (typeof ihtml === "function") {
+      phtml = ihtml;
+      ihtml = phtml();
+    }
+    if (ihtml instanceof HTMLElement) {
+      element = ihtml;
     }
     if (!element) {
       throw new Error(
         " \u2718  Cradova err :  Invalid component type for cradova Ref, got  -  " + element
       );
     }
-    try {
-      this.reference.reference.insertAdjacentElement("beforebegin", element);
-      if (this.reference.reference.parentElement) {
-        this.reference.reference.parentElement.removeChild(
-          this.reference.reference
-        );
-      } else {
-        this.reference.reference.remove();
-      }
-      this.reference._appendDomForce("reference", element);
-    } catch (e0) {
-      console.error(e0);
+    this.reference.element.insertAdjacentElement("beforebegin", element);
+    if (this.reference.element.parentElement) {
+      this.reference.element.parentElement.removeChild(this.reference.element);
+    } else {
+      this.reference.element.remove();
     }
+    this.reference._appendDomForce("element", element);
     this.published = true;
+    CradovaEvent.dispatchEvent("onmountEvent");
   }
   remove() {
-    this.reference.reference.remove();
+    this.reference.element.remove();
   }
 };
 var frag = function(children) {
@@ -258,9 +242,6 @@ var frag = function(children) {
     if (typeof a2 === "function") {
       a2 = a2();
     }
-    if (typeof a2 === "function") {
-      a2 = a2();
-    }
     if (isNode(a2)) {
       par.appendChild(a2);
       continue;
@@ -274,158 +255,95 @@ var frag = function(children) {
   }
   return par;
 };
-var svgNS = (type, props, ...children) => {
-  const sc = document.createElementNS(
-    props.xmlns || "http://www.w3.org/2000/svg",
-    type
-  );
-  delete props.xmlns;
-  for (const p2 in props) {
-    sc.setAttributeNS(null, p2, props[p2]);
-  }
-  for (let ch of children) {
-    if (typeof ch === "function") {
-      ch = ch();
-    }
-    if (typeof ch === "function") {
-      ch = ch();
-    }
-    sc.appendChild(ch);
-  }
-  return sc;
-};
 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;
+    let content = await this._cb();
+    if (typeof content === "function") {
+      content = await content();
     } else {
-      this.content = await this.content;
+      content = await content;
+    }
+    const def = content;
+    if (def.default) {
+      this.content = def?.default;
     }
-    this.content = this.content.default;
   }
 };
 var reference = class {
   bindAs(name) {
     return [this, name];
   }
-  _appendDom(name, Element) {
-    if (!Object.hasOwnProperty.call(this, name)) {
-      this[name] = Element;
-    } else {
-      if (Array.isArray(this[name])) {
-        this[name].push(Element);
-      } else {
-        this[name] = [this[name], Element];
-      }
-    }
-  }
   _appendDomForce(name, Element) {
     this[name] = Element;
   }
 };
 
-// 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 === "tree") {
-          element.innerHTML = "";
-          element.appendChild(frag(state[key]));
-          continue;
-        }
-        try {
-          if (typeof element[key] !== "undefined") {
-            element[key] = state[key];
+// 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 {
-            if (key.includes("data-")) {
-              element.setAttribute(key, state[key]);
-              continue;
-            } 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);
-            }
+            throw new Error(
+              "\u2718  Cradova err : " + k + " is not a valid css style property"
+            );
           }
-        } catch (error) {
-          console.error(" \u2718  Cradova err: Cradova got ", state);
-          console.error(" \u2718  Cradova err:  ", error);
         }
+        continue;
       }
-    } else {
-      console.log(nodes, state);
-      throw new TypeError(" \u2718  Cradova err:   invalid state object" + state);
-    }
-  }
-}
-function dispatch(stateID, state) {
-  if (stateID instanceof HTMLElement) {
-    cradovaDispatchTrack([stateID], state);
-  }
-  let ele;
-  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);
+      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 (ele) {
-      cradovaDispatchTrack([ele], state);
-    }
   }
-  return updated;
+  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/utils/createSignal.ts
+// lib/parts/createSignal.ts
 var createSignal = class {
   constructor(initial, props) {
     this.persistName = "";
@@ -483,35 +401,33 @@ var createSignal = class {
       );
     }
   }
-  createAction(key, action) {
-    if (typeof key === "string") {
-      this.actions[key] = action;
+  createAction(name, action) {
+    if (typeof name === "string" && typeof action === "function") {
+      this.actions[name] = action;
     } else {
-      if (typeof key === "object" && !action) {
-        for (const [nam, act] of Object.entries(key)) {
-          if (typeof nam === "string" && typeof action === "function") {
-            this.actions[nam] = act;
-          } else {
-            throw new Error(`\u2718  Cradova err : can't create action ${nam}`);
-          }
-        }
+      throw new Error(
+        `\u2718  Cradova err : can't create action, ${name} is not a function`
+      );
+    }
+  }
+  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 ${key}`);
+        throw new Error(
+          `\u2718  Cradova err : can't create action, ${name} is not a function`
+        );
       }
     }
   }
   fireAction(key, data2) {
     this._updateState(key, data2);
-    if (this.actions[key] && this.actions[key].updateState) {
-      this.actions[key].updateState(data2);
-      return;
+    if (typeof this.actions[key] === "function") {
+      this.actions[key].call(this, data2);
     } else {
-      if (typeof this.actions[key] === "function") {
-        this.actions[key].bind(this)(data2);
-        return;
-      }
+      throw Error("\u2718  Cradova err : action " + key + "  does not exist!");
     }
-    throw Error("\u2718  Cradova err : action " + key + "  does not exist!");
   }
   bind(prop) {
     if (typeof this.value === "object" && typeof this.value[prop] !== "undefined") {
@@ -527,7 +443,7 @@ var createSignal = class {
       this.ref.map((ent) => {
         if (ent._event === name) {
           if (ent._element_property && ent._signalProperty) {
-            ent.ref.updateState({
+            ent.ref?.updateState({
               [ent._element_property]: data2[ent._signalProperty]
             });
             return;
@@ -587,7 +503,7 @@ var createSignal = class {
       return;
     }
     throw new Error(
-      "\u2718  Cradova err :  Invalid parameters for binding ref to simple store"
+      "\u2718  Cradova err :  Invalid parameters for binding ref to Signal"
     );
   }
   listen(callback) {
@@ -600,8 +516,110 @@ var createSignal = class {
   }
 };
 
-// lib/utils/Router.ts
-var Router = {};
+// lib/parts/Screen.ts
+var localTree = new reference();
+var Screen = class {
+  constructor(cradova_screen_initials) {
+    this._secondaryChildren = [];
+    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;
+    } 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, this._data);
+      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);
+        }
+      }
+    }
+    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();
+    }
+    if (this._transition) {
+      this._template.classList.remove(this._transition);
+    }
+  }
+  async _Activate(force = false) {
+    if (!this._persist || force || !this._packed) {
+      await this._package();
+      this._packed = true;
+    }
+    if (!localTree._doc) {
+      localTree._appendDomForce(
+        "_doc",
+        document.querySelector("[data-wrapper=app]")
+      );
+    }
+    if (!localTree._doc) {
+      throw new Error(
+        " \u2718  Cradova err: Unable to render, cannot find cradova root <div data-wrapper='app'> ... </div>"
+      );
+    }
+    if (this._transition) {
+      this._template.classList.add(this._transition);
+    }
+    localTree._doc.innerHTML = "";
+    localTree._doc.appendChild(this._template);
+    document.title = this._name;
+    CradovaEvent.dispatchEvent("onmountEvent");
+    if (this._callBack) {
+      await this._callBack();
+    }
+  }
+};
+
+// lib/parts/Router.ts
 var RouterBox = {};
 RouterBox["lastNavigatedRouteController"] = null;
 RouterBox["nextRouteController"] = null;
@@ -609,13 +627,16 @@ RouterBox["lastNavigatedRoute"] = null;
 RouterBox["pageShow"] = null;
 RouterBox["pageHide"] = null;
 RouterBox["errorHandler"] = null;
+RouterBox["loadingScreen"] = {};
 RouterBox["params"] = {};
 RouterBox["routes"] = {};
 RouterBox["pageevents"] = [];
-RouterBox["start_pageevents"] = function(lastR, newR) {
-  for (let ci = 0; ci < RouterBox["pageevents"].length; ci++) {
-    RouterBox["pageevents"][ci](lastR, newR);
-  }
+RouterBox["start_pageevents"] = async function(lastR, newR) {
+  setTimeout(() => {
+    for (let ci = 0; ci < RouterBox["pageevents"].length; ci++) {
+      RouterBox["pageevents"][ci](lastR, newR);
+    }
+  }, 300);
 };
 var checker = (url) => {
   if (RouterBox.routes[url]) {
@@ -628,11 +649,11 @@ var checker = (url) => {
     if (!path.includes(":")) {
       continue;
     }
-    if (url.endsWith("/")) {
-      url = url.slice(0, path.length - 2);
-    }
     const urlFixtures = url.split("/");
     const pathFixtures = path.split("/");
+    if (url.endsWith("/")) {
+      urlFixtures.pop();
+    }
     let fixturesX = 0;
     let fixturesY = 0;
     urlFixtures.shift();
@@ -641,11 +662,11 @@ var checker = (url) => {
       const routesParams = { _path: "" };
       for (let i2 = 0; i2 < pathFixtures.length; i2++) {
         if (pathFixtures[i2].includes(":")) {
-          fixturesY += 1;
+          fixturesY++;
           continue;
         }
-        if (urlFixtures[i2] === pathFixtures[i2] && pathFixtures.indexOf(urlFixtures[i2]) === pathFixtures.lastIndexOf(urlFixtures[i2])) {
-          fixturesX += 1;
+        if (urlFixtures[i2] === pathFixtures[i2]) {
+          fixturesX++;
         }
       }
       if (fixturesX + fixturesY === pathFixtures.length) {
@@ -662,97 +683,21 @@ var checker = (url) => {
   return [];
 };
 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);
+  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;
   }
-  Router.mount();
-};
-Router.delegateScreen = function(path = "/", screen) {
-  RouterBox.routes[path] = {
-    controller: async (params, force) => await screen.Activate(params, force),
-    packager: async (params) => await screen.package(params),
-    deactivate: async () => {
-      await screen.deActivate();
-    },
-    paramData: (data2) => {
-      screen.paramData = data2;
-    }
-  };
-  if (typeof screen.errorHandler === "function") {
-    RouterBox["errorHandler"][path] = screen.errorHandler;
-  }
-};
-Router.navigate = function(href, data2 = null, force = false) {
-  if (typeof href !== "string") {
-    throw new TypeError(
-      " \u2718  Cradova err:  href must be a defined path but got " + href + " instead"
-    );
-  }
-  if (typeof data2 === "boolean") {
-    force = true;
-    data2 = null;
-  }
-  let route = null, params;
-  if (href.includes("://")) {
-    window.location.href = href;
-  } else {
-    const lastR = window.location.pathname;
-    if (href === lastR) {
-      return;
-    }
-    [route, params] = checker(href);
-    if (route) {
-      RouterBox["nextRouteController"] = route;
-      RouterBox.params.params = params;
-      route._paramData = params;
-      RouterBox.params.data = data2 || null;
-      window.history.pushState({}, "", href);
-    }
-    RouterBox.router(null, force);
-    RouterBox["start_pageevents"](lastR, href);
-  }
+  return void 0;
 };
-RouterBox.router = async function(e, force = false) {
+RouterBox.router = async function(_e, _force) {
   let url, route, params;
-  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;
-    }
-  }
   if (!url) {
     url = window.location.pathname;
   }
-  if (url === Router["lastNavigatedRoute"]) {
+  if (url === RouterBox["lastNavigatedRoute"]) {
     return;
   }
   if (RouterBox["nextRouteController"]) {
@@ -763,13 +708,19 @@ RouterBox.router = async function(e, force = false) {
   }
   if (typeof route !== "undefined") {
     try {
-      if (params) {
-        RouterBox.params.params = params;
-      }
-      if (!route._Activate && typeof route === "function") {
+      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 !== 1) {
+      if (route._delegatedRoutes !== -1) {
         route._delegatedRoutes = true;
         route = new Screen({
           name: route._name,
@@ -777,90 +728,152 @@ RouterBox.router = async function(e, force = false) {
         });
         RouterBox.routes[url] = route;
       }
-      await route._Activate(force);
+      if (params) {
+        RouterBox.params.params = params;
+      }
+      await route._Activate(_force);
       RouterBox["lastNavigatedRouteController"] && RouterBox["lastNavigatedRouteController"]._deActivate();
       RouterBox["lastNavigatedRoute"] = url;
       RouterBox["lastNavigatedRouteController"] = route;
     } catch (error) {
-      let errorHandler;
-      if (RouterBox.routes[RouterBox.params.params._path]) {
-        errorHandler = RouterBox.routes[RouterBox.params.params._path].errorHandler || RouterBox.errorHandler;
-      }
-      if (errorHandler) {
-        errorHandler(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["/404"]) {
-      RouterBox.routes["/404"].controller();
+      await RouterBox.routes["/404"]._Activate(_force);
     }
   }
 };
-Router["onPageEvent"] = function(callback) {
-  if (typeof callback === "function") {
-    RouterBox["pageevents"].push(callback);
-  } else {
-    throw new Error(
-      " \u2718  Cradova err:  callback for pageShow event is not a function"
-    );
+var RouterClass = class {
+  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();
   }
-};
-Router.packageScreen = async function(path, data2 = {}) {
-  if (!RouterBox.routes[path]) {
-    console.error(" \u2718  Cradova err:  no screen with path " + path);
-    throw new Error(" \u2718  Cradova err:  cradova err: Not a defined screen path");
+  back() {
+    history.go(-1);
   }
-  let [route, params] = checker(path);
-  if (!route._Activate && typeof route === "function") {
-    route = await route();
+  forward() {
+    history.go(1);
   }
-  route._package(Object.assign(data2, params || {}));
-  route._packed = true;
-};
-Router.getParams = function() {
-  return RouterBox["params"];
-};
-Router["addErrorHandler"] = function(callback) {
-  if (typeof callback === "function") {
-    RouterBox["errorHandler"] = callback;
-  } else {
-    throw new Error(
-      " \u2718  Cradova err:  callback for ever event event is not a function"
-    );
+  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 {
+      const lastR = window.location.pathname;
+      if (href === lastR) {
+        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);
+      RouterBox["start_pageevents"](lastR, href);
+    }
+  }
+  setLoadingScreen(screen) {
+    if (screen instanceof Screen) {
+      RouterBox["LoadingScreen"] = screen;
+    } else {
+      throw new Error(
+        " \u2718  Cradova err:  Loading Screen should be a cradova screen class"
+      );
+    }
+  }
+  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"
+      );
+    }
+  }
+  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();
+    }
+    route._package(Object.assign(data2, params || {}));
+    route._packed = true;
+  }
+  getParams() {
+    return RouterBox["params"];
+  }
+  addErrorHandler(callback) {
+    if (typeof callback === "function") {
+      RouterBox["errorHandler"] = callback;
+    } else {
+      throw new Error(" \u2718  Cradova err:  callback for 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);
+    }
+    window.addEventListener("pageshow", RouterBox.router);
+    window.addEventListener("popstate", (_e) => {
+      RouterBox.router();
+    });
   }
 };
-Router.mount = () => {
-  window.addEventListener("pageshow", RouterBox.router);
-  window.addEventListener("popstate", (e) => {
-    e.preventDefault();
-    RouterBox.router();
-  });
-};
+var Router = new RouterClass();
 
-// lib/utils/elements.ts
-var makeElement = (element, ...ElementChildrenAndPropertyList) => {
-  let beforeMount = null;
-  let props = null, text = null;
-  if (ElementChildrenAndPropertyList.length) {
+// 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 (child?.render) {
+      if (child instanceof Ref) {
         child = child.render();
       }
       if (typeof child === "function") {
         child = child();
-        if (typeof child === "function") {
-          child = child();
-        }
       }
-      try {
-        if (isNode(child)) {
-          element.appendChild(child);
-          continue;
-        }
-      } catch (error) {
-        console.log(element, ElementChildrenAndPropertyList);
-        console.log(error);
+      if (isNode(child)) {
+        element.appendChild(child);
+        continue;
       }
       if (Array.isArray(child)) {
         element.appendChild(Rhoda(child));
@@ -871,11 +884,7 @@ var makeElement = (element, ...ElementChildrenAndPropertyList) => {
         continue;
       }
       if (typeof child === "object") {
-        if (!props) {
-          props = child;
-        } else {
-          props = Object.assign(props, child);
-        }
+        props = Object.assign(props, child);
         continue;
       }
       if (typeof child !== "undefined") {
@@ -889,9 +898,9 @@ var makeElement = (element, ...ElementChildrenAndPropertyList) => {
     return element;
   }
   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])) {
+    for (const [prop, value] of Object.entries(props)) {
+      if (prop === "style" && typeof value === "object") {
+        for (const [k, v] of Object.entries(value)) {
           if (typeof element.style[k] !== "undefined" && k !== "src") {
             element.style[k] = v;
           } else {
@@ -903,95 +912,70 @@ var makeElement = (element, ...ElementChildrenAndPropertyList) => {
         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 === "beforeMount") {
-        beforeMount = props["beforeMount"];
+        element.style[prop] = value;
         continue;
       }
-      if (prop === "stateID") {
-        element.setAttribute("data-cra-id", props[prop]);
+      if (prop === "text" && typeof value === "string" && value !== "") {
+        text = value;
         continue;
       }
-      if (prop.includes("$")) {
-        element.setAttribute("data-" + prop.split("$")[1], props[prop]);
+      if (prop === "href" && typeof value === "string") {
+        const href = value || "";
+        if (!href.includes("://")) {
+          element.addEventListener(
+            "click",
+            (e) => {
+              e.preventDefault();
+              Router.navigate(element.pathname);
+            }
+          );
+        }
+        element.setAttribute(prop, value);
         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 (Array.isArray(value)) {
+        const clas = value;
+        if (clas[0] instanceof createSignal) {
+          element["updateState"] = dispatch.bind(null, element);
+          clas[0].bindRef(element, {
+            _element_property: prop,
+            signalProperty: clas[1]
+          });
+          continue;
+        }
+        if (prop == "reference" && clas[0] instanceof reference) {
+          element["updateState"] = dispatch.bind(null, element);
+          clas[0]._appendDomForce(clas[1], element);
+          continue;
+        }
       }
-      if (prop == "reference" && Array.isArray(props[prop]) && props[prop][0] instanceof reference) {
-        element.updateState = dispatch.bind(null, element);
-        props[prop][0]._appendDom(props[prop][1], element);
+      if (prop === "onmount" && typeof props["onmount"] === "function") {
+        const ev = () => {
+          props.onmount?.apply(element);
+          props["onmount"] = void 0;
+        };
+        CradovaEvent.addEventListener("onmountEvent", ev);
         continue;
       }
-      if (prop === "shouldUpdate" && props[prop] === true) {
-        element.updateState = dispatch.bind(void 0, element);
+      if (prop.includes("data-")) {
+        element.setAttribute(prop, value);
         continue;
       }
-      if (prop === "afterMount" && typeof props["afterMount"] === "function") {
-        const avi = () => {
-          props["afterMount"].apply(element);
-          CradovaEvent.removeEventListener("cradovaAftermountEvent", avi);
-        };
-        CradovaEvent.addEventListener("cradovaAftermountEvent", avi);
+      if (prop.includes("aria-")) {
+        element.setAttribute(prop, value);
         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 !== "disabled" && !prop.includes("aria")) {
-            console.warn(" \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);
-      }
+      element[prop] = value;
     }
   }
   if (text) {
     element.appendChild(document.createTextNode(text));
   }
-  if (typeof beforeMount === "function") {
-    beforeMount.apply(element);
-  }
-  if (element.tagName === "A" && window) {
-    if (element.href.includes(window.location.origin)) {
-      element.addEventListener("click", (e) => {
-        e.preventDefault();
-        Router.navigate(element.pathname);
-      });
-    }
-  }
   return element;
 };
 var cra = (element_initials) => {
   return (...initials) => {
-    return makeElement(
-      document.createElement(element_initials),
-      ...initials
-    );
+    return makeElement(document.createElement(element_initials), initials);
   };
 };
 var a = cra("a");
@@ -1106,7 +1090,7 @@ var val = cra("val");
 var video = cra("video");
 var wbr = cra("wbr");
 
-// lib/utils/ajax.ts
+// lib/parts/ajax.ts
 function Ajax(url, opts = {}) {
   const { method, data: data2, header: header2, callbacks } = opts;
   if (typeof url !== "string") {
@@ -1117,9 +1101,7 @@ function Ajax(url, opts = {}) {
     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(k, v);
       }
     }
     ajax.addEventListener("load", function() {
@@ -1130,8 +1112,11 @@ function Ajax(url, opts = {}) {
         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);
         }
-        formData.set(k, value);
       }
     }
     ajax.addEventListener("error", () => {
@@ -1167,147 +1152,13 @@ function Ajax(url, opts = {}) {
   });
 }
 
-// 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;
-    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 (this._html.render) {
-      this._template.innerHTML = "";
-      this._template.appendChild(this._html.render(this._data));
-    }
-    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) {
-      console.error(" \u2718  Cradova err: expected a screen but got ", this._html);
-      throw new Error(
-        " \u2718  Cradova err: only functions that returns a cradova element is valid as screen"
-      );
-    }
-    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-wrapper=app]");
-    if (!doc) {
-      throw new Error(
-        " \u2718  Cradova err: Unable to render, cannot find cradova root <div data-wrapper='app'> ... </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();
-    }
-    CradovaEvent.dispatchEvent("cradovaAftermountEvent");
-    if (window) {
-      window.scrollTo(0, 0);
-    }
-  }
-};
-
 // lib/index.ts
 var make = function(txx) {
-  if (!txx.length) {
-    return ["DIV"];
+  if (Array.isArray(txx)) {
+    txx = txx[0];
+  }
+  if (typeof txx !== "string") {
+    return [];
   }
   if (Array.isArray(txx)) {
     txx = txx[0];
@@ -1320,36 +1171,37 @@ var make = function(txx) {
     }
   }
   let tag;
+  let teak;
   if (!txx.includes("#")) {
-    txx = txx.split(".");
-    tag = txx.shift();
+    teak = txx.split(".");
+    tag = teak.shift();
     if (!tag) {
       tag = "DIV";
     }
-    return [tag, void 0, txx.join(" "), innerValue];
+    return [tag, void 0, teak.join(" "), innerValue];
   } else {
     if (!txx.includes(".")) {
-      txx = txx.split("#");
-      tag = txx.shift();
+      teak = txx.split("#");
+      tag = teak.shift();
       if (!tag) {
         tag = "DIV";
       }
-      if (txx[0].includes(" ")) {
-        txx = [txx[0].split(" ")[1]];
+      if (teak[0].includes(" ")) {
+        teak = [teak[0].split(" ")[1]];
       }
-      return [tag, txx[0], void 0, innerValue];
+      return [tag, teak[0], void 0, innerValue];
     }
   }
-  txx = txx.split(".");
+  teak = txx.split(".");
   const classes = [];
   const IDs = [];
-  tag = !txx[0].includes("#") && txx.shift();
+  tag = !teak[0].includes("#") && teak.shift();
   if (!tag) {
     tag = "DIV";
   }
-  for (let i2 = 0; i2 < txx.length; i2++) {
-    if (txx[i2].includes("#")) {
-      const item = txx[i2].split("#");
+  for (let i2 = 0; i2 < teak.length; i2++) {
+    if (teak[i2].includes("#")) {
+      const item = teak[i2].split("#");
       IDs.push(item[1]);
       if (i2 === 0) {
         tag = item[0];
@@ -1358,47 +1210,37 @@ var make = function(txx) {
       classes.push(item[0]);
       continue;
     }
-    classes.push(txx[i2]);
+    classes.push(teak[i2]);
   }
   return [tag || "DIV", IDs[0], classes.join(" "), innerValue];
 };
 var _2 = (...element_initials) => {
-  const initials = make(element_initials.shift());
-  let props = void 0;
-  let element;
-  try {
-    element = document.createElement(initials[0]);
-  } catch (error) {
-    throw new TypeError(" \u2718  Cradova err:  invalid tag given  " + initials[0]);
-  }
-  if (initials[2]) {
-    if (props) {
-      props["className"] = initials[2];
-    } else {
-      props = { className: initials[2] };
-    }
-  }
-  if (initials[1]) {
-    if (props) {
-      props["id"] = initials[1];
-    } else {
-      props = { id: initials[1] };
-    }
-  }
-  if (initials[3]) {
-    if (props) {
-      props["innerText"] = initials[3];
-    } else {
-      props = { innerText: initials[3] };
-    }
-  }
-  return makeElement(element, props, ...element_initials);
+  const {
+    0: tag,
+    1: id,
+    2: className,
+    3: innerText
+  } = make(element_initials[0]);
+  let props = {};
+  const element = tag ? document.createElement(tag) : new DocumentFragment();
+  if (element.tagName) {
+    if (className) {
+      props["className"] = className;
+    }
+    if (id) {
+      props["id"] = id;
+    }
+    if (innerText) {
+      props["innerText"] = innerText;
+    }
+  }
+  typeof tag === "string" && element_initials.shift();
+  props && element_initials.push(props);
+  return makeElement(element, element_initials);
 };
-Init();
 var lib_default = _2;
 export {
   Ajax,
-  CradovaEvent,
   Ref,
   Router,
   Screen,
@@ -1435,7 +1277,6 @@ export {
   details,
   dfn,
   dialog,
-  dispatch,
   div,
   dl,
   dt,
@@ -1506,7 +1347,6 @@ export {
   sub,
   summary,
   sup,
-  svgNS,
   table,
   tbody,
   td,
@@ -1525,4 +1365,5 @@ export {
   video,
   wbr
 };
+//! always starts events a moment later
 //! value could be a promise