cradova 2.2.3 → 2.3.1

package/dist/index.js

@@ -1,135 +1,56 @@
 // lib/utils/init.ts
 var Init = function() {
-  if (!document.querySelector("[data-cra-id=cradova-app-wrapper]")) {
+  if (!document.querySelector("[data-wrapper=app]")) {
     const Wrapper = document.createElement("div");
-    Wrapper.setAttribute("data-cra-id", "cradova-app-wrapper");
+    Wrapper.setAttribute("data-wrapper", "app");
     document.body.appendChild(Wrapper);
   }
 };
 
-// lib/utils/track.ts
-function cradovaDispatchTrack(nodes, state) {
-  for (let i2 = 0; i2 < nodes.length; i2++) {
-    const element = nodes[i2];
-    if (!element) {
-      continue;
+// lib/utils/fns.ts
+var isNode = (node) => typeof node === "object" && typeof node.nodeType === "number";
+var cradovaEvent = class {
+  constructor() {
+    this.listeners = {};
+  }
+  addEventListener(eventName, callback) {
+    if (!this.listeners[eventName]) {
+      this.listeners[eventName] = [];
     }
-    if (typeof state === "object" && !Array.isArray(state)) {
-      for (const key in state) {
-        if (key === "style") {
-          for (const [k, v] of Object.entries(state[key])) {
-            if (typeof element.style[k] !== "undefined" && k !== "src") {
-              element.style[k] = v;
-            } else {
-              throw new Error(
-                "\u2718  Cradova err : " + k + " is not a valid css style property"
-              );
-            }
-          }
-          continue;
-        }
-        if (typeof element[key] === "function") {
-          if (key.startsWith("on")) {
-            element[key] = state[key];
-          } else {
-            element[key].apply(element);
-          }
-          continue;
-        }
-        if (key === "text") {
-          element.innerText = state[key];
-          continue;
-        }
-        if (key === "remove") {
-          if (element.parentElement) {
-            element.parentElement?.removeChild(element);
-          } else {
-            element.remove();
-          }
-          continue;
-        }
-        if (key.includes("$")) {
-          element.setAttribute("data-" + key.split("$")[1], state[key]);
-          continue;
-        }
-        if (key === "tree") {
-          element.innerHTML = "";
-          element.appendChild(frag(state[key]));
-          continue;
-        }
-        try {
-          if (typeof element[key] !== "undefined") {
-            element[key] = state[key];
-          } else {
-            element[key] = state[key];
-            if (key !== "for" && key !== "text" && key !== "class" && key !== "tabindex" && key !== "disabled" && !key.includes("aria")) {
-              console.error(" \u2718  Cradova err:  invalid html attribute " + key);
-            }
-          }
-        } catch (error) {
-          console.error(" \u2718  Cradova err: Cradova got ", state);
-          console.error(" \u2718  Cradova err:  ", error);
-        }
+    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);
       }
-    } else {
-      throw new TypeError(" \u2718  Cradova err:   invalid state object" + state);
     }
   }
-}
-function dispatch(stateID, state) {
-  let ele;
-  if (stateID instanceof HTMLElement) {
-    ele = stateID;
-  }
-  let updated = void 0;
-  if (typeof state === "undefined" && typeof stateID === "object" && !ele) {
-    for (const [id, eachState] of Object.entries(stateID)) {
-      const elements = document.querySelectorAll(
-        "[data-cra-id=" + id + "]"
-      );
-      updated = elements.length === 1 ? elements[0] : elements;
-      cradovaDispatchTrack(elements, eachState);
-    }
-  } else {
-    if (typeof stateID === "string") {
-      const elements = document.querySelectorAll(
-        "[data-cra-id=" + stateID + "]"
-      );
-      if (elements.length) {
-        updated = elements.length === 1 ? elements[0] : elements;
-        if (!state?.cradovaDispatchTrackBreak) {
-          cradovaDispatchTrack(elements, state);
-        }
+  dispatchEvent(eventName, eventArgs) {
+    const eventListeners = this.listeners[eventName];
+    if (eventListeners) {
+      for (let i2 = 0; i2 < eventListeners.length; i2++) {
+        eventListeners[i2](eventArgs);
       }
     }
-    if (ele) {
-      cradovaDispatchTrack([ele], state);
-    }
   }
-  return updated;
-}
-
-// lib/utils/fns.ts
-var isNode = (node) => typeof node === "object" && typeof node.nodeType === "number";
-var cradovaAftermountEvent = new CustomEvent("cradova-aftermount");
-function uuid() {
-  let t = Date.now ? +Date.now() : +new Date();
-  return "cradova-id-xxxxxx".replace(/[x]/g, function(e) {
-    const r = (t + 16 * Math.random()) % 16 | 0;
-    return ("x" === e ? r : 7 & r | 8).toString(16);
-  });
-}
+};
+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 (typeof ch === "function") {
-        ch = ch();
+      if (ch?.render) {
+        ch = ch.render();
       }
       if (typeof ch === "function") {
         ch = ch();
+        if (typeof ch === "function") {
+          ch = ch();
+        }
       }
       if (typeof ch === "string" || typeof ch === "number") {
         fg.appendChild(document.createTextNode(ch));
@@ -148,45 +69,20 @@ function Rhoda(l) {
   }
   return fg;
 }
-function css(identifier, properties) {
-  if (typeof identifier === "string" && typeof properties === "undefined") {
+function css(identifier) {
+  if (Array.isArray(identifier)) {
+    identifier = identifier[0];
+  }
+  if (typeof identifier === "string") {
     let styTag = document.querySelector("style");
     if (styTag !== null) {
-      identifier += styTag.textContent;
-      styTag.textContent = identifier;
+      styTag.textContent = identifier + styTag.textContent;
       return;
     }
     styTag = document.createElement("style");
     styTag.textContent = identifier;
     document.head.appendChild(styTag);
-    return;
   }
-  if (!properties) {
-    return;
-  }
-  const styS = "" + identifier + `{
-`;
-  const styE = `}
-`;
-  let style2 = "", totalStyle = "";
-  for (const [k, v] of Object.entries(properties)) {
-    style2 += "" + k + ": " + v + `;
-`;
-  }
-  let styleTag = document.querySelector("style");
-  if (styleTag !== null) {
-    totalStyle += styleTag.innerHTML;
-    totalStyle += styS + style2 + styE;
-    styleTag.innerHTML = totalStyle;
-    return;
-  }
-  styleTag = document.createElement("style");
-  totalStyle += styleTag.innerHTML + `
-
-`;
-  totalStyle += styS + style2 + styE;
-  styleTag.innerHTML = totalStyle;
-  document.head.appendChild(styleTag);
 }
 function assert(condition, ...elements) {
   if (condition) {
@@ -210,28 +106,28 @@ function assertOr(condition, ifTrue, ifFalse) {
 }
 var Ref = class {
   constructor(component) {
-    this.stateID = uuid();
     this.effects = [];
     this.effectuate = null;
     this.rendered = false;
     this.published = false;
     this.hasFirstStateUpdateRun = false;
     this.preRendered = null;
+    this.reference = new reference();
     this.component = component.bind(this);
   }
   preRender(data2) {
     const chtml = this.component(data2);
     if (chtml instanceof HTMLElement) {
-      chtml.setAttribute("data-cra-id", this.stateID);
       this.preRendered = chtml;
     } else {
-      this.preRendered = chtml({ stateID: this.stateID });
+      this.preRendered = chtml();
     }
-    if (typeof this.preRendered === "undefined") {
+    if (!this.preRendered) {
       throw new Error(
-        " \u2718  Cradova err :  Invalid component type for cradova Ref, got  -  " + this.preRendered
+        " \u2718  Cradova err :  Invalid component type for cradova Ref got  -  " + this.preRendered
       );
     }
+    this.reference._appendDomForce("reference", this.preRendered);
   }
   destroyPreRendered() {
     this.preRendered = null;
@@ -244,12 +140,11 @@ var Ref = class {
     if (!this.preRendered) {
       const chtml = this.component(data2);
       if (chtml instanceof HTMLElement) {
-        chtml.setAttribute("data-cra-id", this.stateID);
         element = chtml;
       } else {
-        element = chtml({ stateID: this.stateID });
+        element = chtml();
       }
-      if (typeof element === "undefined") {
+      if (!element) {
         throw new Error(
           " \u2718  Cradova err :  Invalid component type for cradova Ref, got  -  " + element
         );
@@ -260,21 +155,23 @@ var Ref = class {
     }
     const av = async () => {
       await this.effector.apply(this);
-      window.removeEventListener("cradova-aftermount", av);
+      CradovaEvent.removeEventListener("cradovaAftermountEvent", av);
     };
-    window.addEventListener("cradova-aftermount", av);
+    CradovaEvent.addEventListener("cradovaAftermountEvent", av);
     this.effector();
     this.published = true;
     this.rendered = true;
     if (!element) {
       element = this.preRendered;
     }
+    this.reference._appendDomForce("reference", element);
     return element;
   }
   instance() {
-    return dispatch(this.stateID, {
-      cradovaDispatchTrackBreak: true
-    });
+    return this.reference.reference;
+  }
+  _setExtra(Extra) {
+    this.Signal = Extra;
   }
   effect(fn) {
     if (!this.rendered) {
@@ -320,34 +217,38 @@ var Ref = class {
       return;
     }
     this.published = false;
-    const guy = dispatch(this.stateID, {
-      cradovaDispatchTrackBreak: true
-    });
-    if (!guy) {
+    if (!this.reference.reference) {
       return;
     }
     const chtml = this.component(data2);
     let element;
     if (chtml instanceof HTMLElement) {
-      chtml.setAttribute("data-cra-id", this.stateID);
       element = chtml;
     } else {
-      element = chtml({ stateID: this.stateID });
+      element = chtml();
+    }
+    if (!element) {
+      throw new Error(
+        " \u2718  Cradova err :  Invalid component type for cradova Ref, got  -  " + element
+      );
     }
     try {
-      guy.insertAdjacentElement("beforebegin", element);
-      if (guy.parentElement) {
-        guy.parentElement.removeChild(guy);
+      this.reference.reference.insertAdjacentElement("beforebegin", element);
+      if (this.reference.reference.parentElement) {
+        this.reference.reference.parentElement.removeChild(
+          this.reference.reference
+        );
       } else {
-        guy.remove();
+        this.reference.reference.remove();
       }
+      this.reference._appendDomForce("reference", element);
     } catch (e0) {
       console.error(e0);
     }
     this.published = true;
   }
   remove() {
-    dispatch(this.stateID, { remove: true });
+    this.reference.reference.remove();
   }
 };
 var frag = function(children) {
@@ -368,10 +269,8 @@ var frag = function(children) {
       par.appendChild(document.createTextNode(a2));
       continue;
     }
-    {
-      console.error(" \u2718  Cradova err:   wrong element type" + a2);
-      throw new TypeError(" \u2718  Cradova err:   invalid element");
-    }
+    console.error(" \u2718  Cradova err:   wrong element type" + a2);
+    throw new TypeError(" \u2718  Cradova err:   invalid element");
   }
   return par;
 };
@@ -410,6 +309,121 @@ var lazy = class {
     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];
+          } 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);
+            }
+          }
+        } catch (error) {
+          console.error(" \u2718  Cradova err: Cradova got ", state);
+          console.error(" \u2718  Cradova err:  ", error);
+        }
+      }
+    } 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);
+        }
+      }
+    }
+    if (ele) {
+      cradovaDispatchTrack([ele], state);
+    }
+  }
+  return updated;
+}
 
 // lib/utils/createSignal.ts
 var createSignal = class {
@@ -474,9 +488,9 @@ var createSignal = class {
       this.actions[key] = action;
     } else {
       if (typeof key === "object" && !action) {
-        for (const [nam, action2] of Object.entries(key)) {
-          if (typeof nam === "string" && typeof action2 === "function") {
-            this.actions[nam] = action2;
+        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}`);
           }
@@ -487,14 +501,13 @@ var createSignal = class {
     }
   }
   fireAction(key, data2) {
-    if (this.actions[key].updateState) {
-      this.actions[key].updateState(this, data2);
-      this._updateState(key, data2);
+    this._updateState(key, data2);
+    if (this.actions[key] && this.actions[key].updateState) {
+      this.actions[key].updateState(data2);
       return;
     } else {
       if (typeof this.actions[key] === "function") {
-        this.actions[key](this, data2);
-        this._updateState(key, data2);
+        this.actions[key].bind(this)(data2);
         return;
       }
     }
@@ -550,13 +563,20 @@ var createSignal = class {
           ent.ref.updateState(this.value[ent._signalProperty]);
           continue;
         }
+        if (!ent._element_property && !ent._signalProperty) {
+          ent.ref.updateState(this.value);
+          continue;
+        }
       }
     }
   }
-  bindRef(ref, binding) {
+  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,
@@ -581,7 +601,6 @@ var createSignal = class {
 };
 
 // lib/utils/Router.ts
-var Router = {};
 var RouterBox = {};
 RouterBox["lastNavigatedRouteController"] = null;
 RouterBox["nextRouteController"] = null;
@@ -591,6 +610,12 @@ RouterBox["pageHide"] = null;
 RouterBox["errorHandler"] = null;
 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);
+  }
+};
 var checker = (url) => {
   if (RouterBox.routes[url]) {
     return [RouterBox.routes[url], { path: url }];
@@ -643,69 +668,6 @@ RouterBox.route = (path, screen) => {
   RouterBox.routes[path] = screen;
   return RouterBox.routes[path];
 };
-Router.BrowserRoutes = function(obj) {
-  for (const path in obj) {
-    let screen = obj[path];
-    if (screen.catch || typeof screen === "function") {
-      RouterBox["routes"][path] = async () => {
-        if (typeof screen === "function") {
-          screen = await screen();
-        } else {
-          screen = await screen;
-        }
-        return RouterBox.route(path, screen.default);
-      };
-    } else {
-      RouterBox.route(path, screen);
-    }
-  }
-  Router.mount();
-};
-Router.delegateScreen = function(path = "/", screen) {
-  RouterBox.routes[path] = {
-    controller: 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, link2 = null;
-  if (href.includes("://")) {
-    window.location.href = href;
-  } else {
-    if (href === window.location.pathname) {
-      return;
-    }
-    [route, params] = checker(href);
-    if (route) {
-      RouterBox["nextRouteController"] = route;
-      RouterBox.params.params = params;
-      route._paramData = params;
-      RouterBox.params.data = data2 || null;
-      link2 = href;
-      RouterBox["pageHide"] && RouterBox["pageHide"](href + " :navigated");
-      window.history.pushState({}, "", link2);
-    }
-    RouterBox.router(null, force);
-  }
-};
 RouterBox.router = async function(e, force = false) {
   let url, route, params;
   if (e) {
@@ -726,7 +688,7 @@ RouterBox.router = async function(e, force = false) {
   if (!url) {
     url = window.location.pathname;
   }
-  if (url === Router["lastNavigatedRoute"]) {
+  if (url === RouterBox["lastNavigatedRoute"]) {
     return;
   }
   if (RouterBox["nextRouteController"]) {
@@ -755,7 +717,6 @@ RouterBox.router = async function(e, force = false) {
       RouterBox["lastNavigatedRouteController"] && RouterBox["lastNavigatedRouteController"]._deActivate();
       RouterBox["lastNavigatedRoute"] = url;
       RouterBox["lastNavigatedRouteController"] = route;
-      RouterBox["pageShow"] && RouterBox["pageShow"](url);
     } catch (error) {
       let errorHandler;
       if (RouterBox.routes[RouterBox.params.params._path]) {
@@ -768,72 +729,115 @@ RouterBox.router = async function(e, force = false) {
   } else {
     if (RouterBox.routes["/404"]) {
       RouterBox.routes["/404"].controller();
-    } else {
-      if (Object.keys(RouterBox.routes).length > 0) {
-        console.error(
-          " \u2718  Cradova err: route '" + url + "' does not exist and no '/404' route given!"
-        );
-      }
     }
   }
 };
-Router["onPageShow"] = function(callback) {
-  if (typeof callback === "function") {
-    RouterBox["pageShow"] = callback;
-  } else {
-    throw new Error(
-      " \u2718  Cradova err:  callback for pageShow event is not a function"
-    );
+var RouterClass = class {
+  constructor() {
+    this.getParams = function() {
+      return RouterBox["params"];
+    };
   }
-};
-Router["onPageHide"] = function(callback) {
-  if (typeof callback === "function") {
-    RouterBox["pageHide"] = callback;
-  } else {
-    throw new Error(
-      " \u2718  Cradova err:  callback for pageHide event is not a function"
-    );
+  BrowserRoutes(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);
+      }
+    }
+    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");
+  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"
+      );
+    }
+    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);
+    }
   }
-  let [route, params] = checker(path);
-  if (!route._Activate && typeof route === "function") {
-    route = await route();
+  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"
+      );
+    }
   }
-  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"
-    );
+  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;
+  }
+  addErrorHandler(callback) {
+    if (typeof callback === "function") {
+      RouterBox["errorHandler"] = callback;
+    } else {
+      throw new Error(
+        " \u2718  Cradova err:  callback for ever event event is not a function"
+      );
+    }
+  }
+  _mount() {
+    window.addEventListener("pageshow", RouterBox.router);
+    window.addEventListener("popstate", (e) => {
+      e.preventDefault();
+      RouterBox.router();
+    });
   }
 };
-Router.mount = () => {
-  window.addEventListener("pageshow", RouterBox.router);
-  window.addEventListener("popstate", (e) => {
-    e.preventDefault();
-    RouterBox.router();
-  });
-};
+var Router = new RouterClass();
 
-// lib/utils/tags.ts
+// lib/utils/elements.ts
 var makeElement = (element, ...ElementChildrenAndPropertyList) => {
   let beforeMount = null;
   let props = null, text = null;
   if (ElementChildrenAndPropertyList.length) {
     for (let i2 = 0; i2 < ElementChildrenAndPropertyList.length; i2++) {
       let child = ElementChildrenAndPropertyList[i2];
+      if (child?.render) {
+        child = child.render();
+      }
       if (typeof child === "function") {
         child = child();
         if (typeof child === "function") {
@@ -917,16 +921,21 @@ var makeElement = (element, ...ElementChildrenAndPropertyList) => {
         });
         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);
+        continue;
+      }
       if (prop === "shouldUpdate" && props[prop] === true) {
         element.updateState = dispatch.bind(void 0, element);
         continue;
       }
       if (prop === "afterMount" && typeof props["afterMount"] === "function") {
-        const av = () => {
+        const avi = () => {
           props["afterMount"].apply(element);
-          window.removeEventListener("cradova-aftermount", av);
+          CradovaEvent.removeEventListener("cradovaAftermountEvent", avi);
         };
-        window.addEventListener("cradova-aftermount", av);
+        CradovaEvent.addEventListener("cradovaAftermountEvent", avi);
         continue;
       }
       try {
@@ -958,7 +967,7 @@ var makeElement = (element, ...ElementChildrenAndPropertyList) => {
   if (typeof beforeMount === "function") {
     beforeMount.apply(element);
   }
-  if (element.tagName === "A") {
+  if (element.tagName === "A" && window) {
     if (element.href.includes(window.location.origin)) {
       element.addEventListener("click", (e) => {
         e.preventDefault();
@@ -969,10 +978,10 @@ var makeElement = (element, ...ElementChildrenAndPropertyList) => {
   return element;
 };
 var cra = (element_initials) => {
-  return (...bo) => {
+  return (...initials) => {
     return makeElement(
       document.createElement(element_initials),
-      ...bo
+      ...initials
     );
   };
 };
@@ -1160,12 +1169,6 @@ var Screen = class {
     this._params = null;
     this._delegatedRoutesCount = -1;
     const { template: template2, name, persist, renderInParallel, transition } = cradova_screen_initials;
-    if (typeof template2 !== "function") {
-      console.error(" \u2718  Cradova err: expected a screen but got ", template2);
-      throw new Error(
-        " \u2718  Cradova err: only functions that returns a cradova element is valid as screen"
-      );
-    }
     this._html = template2;
     this._name = name;
     this._transition = transition || "";
@@ -1201,6 +1204,10 @@ var Screen = class {
     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") {
@@ -1227,8 +1234,9 @@ var Screen = class {
       }
     }
     if (!this._template.firstChild) {
+      console.error(" \u2718  Cradova err: expected a screen but got ", this._html);
       throw new Error(
-        " \u2718  Cradova err:  no screen is rendered, may have been past wrongly."
+        " \u2718  Cradova err: only functions that returns a cradova element is valid as screen"
       );
     }
     if (this._secondaryChildren.length) {
@@ -1265,10 +1273,10 @@ var Screen = class {
         await this._package();
       }
     }
-    const doc = document.querySelector("[data-cra-id=cradova-app-wrapper]");
+    const doc = document.querySelector("[data-wrapper=app]");
     if (!doc) {
       throw new Error(
-        " \u2718  Cradova err: Unable to render, cannot find cradova root <div data-cra-id='cradova-app-wrapper'> ... </div>"
+        " \u2718  Cradova err: Unable to render, cannot find cradova root <div data-wrapper='app'> ... </div>"
       );
     }
     if (this._transition) {
@@ -1280,8 +1288,10 @@ var Screen = class {
     if (this._callBack) {
       await this._callBack();
     }
-    window.dispatchEvent(cradovaAftermountEvent);
-    window.scrollTo(0, 0);
+    CradovaEvent.dispatchEvent("cradovaAftermountEvent");
+    if (window) {
+      window.scrollTo(0, 0);
+    }
   }
 };
 
@@ -1344,9 +1354,6 @@ var make = function(txx) {
   return [tag || "DIV", IDs[0], classes.join(" "), innerValue];
 };
 var _2 = (...element_initials) => {
-  if (typeof element_initials[0] !== "string") {
-    return frag(element_initials);
-  }
   const initials = make(element_initials.shift());
   let props = void 0;
   let element;
@@ -1382,6 +1389,7 @@ Init();
 var lib_default = _2;
 export {
   Ajax,
+  CradovaEvent,
   Ref,
   Router,
   Screen,
@@ -1408,7 +1416,6 @@ export {
   code,
   col,
   colgroup,
-  cradovaAftermountEvent,
   createSignal,
   css,
   data,
@@ -1472,6 +1479,7 @@ export {
   pre,
   progress,
   q,
+  reference,
   rp,
   rt,
   ruby,