cradova 3.3.8 → 3.3.10

package/dist/index.js

@@ -5,8 +5,8 @@ function Rhoda(l) {
     if (Array.isArray(ch)) {
       fg.appendChild(Rhoda(ch));
     } else {
-      if (ch instanceof Ref) {
-        ch = ch.render(undefined);
+      if (ch instanceof Comp) {
+        ch = ch.render();
       }
       if (typeof ch === "function") {
         ch = ch();
@@ -14,16 +14,12 @@ function Rhoda(l) {
           ch = ch();
         }
       }
-      if (typeof ch === "string" || typeof ch === "number") {
-        fg.appendChild(document.createTextNode(ch));
-        continue;
-      }
       if (ch instanceof HTMLElement || ch instanceof DocumentFragment) {
         fg.appendChild(ch);
-      } else {
-        if (typeof ch !== "undefined") {
-          throw new Error("  \u2718  Cradova err:  invalid child type: " + ch + " (" + typeof ch + ")");
-        }
+        continue;
+      }
+      if (typeof ch === "string") {
+        fg.appendChild(document.createTextNode(ch));
       }
     }
   }
@@ -66,34 +62,35 @@ function loop(datalist, component) {
   }
   return Array.isArray(datalist) ? datalist.map(component) : undefined;
 }
-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 useState(initialValue, Comp2) {
+  Comp2._state_index += 1;
+  const idx = Comp2._state_index;
+  if (!Comp2._state_track[idx]) {
+    Comp2._roll_state(initialValue, idx);
+    Comp2._state_track[idx] = true;
   }
   function setState(newState) {
-    ActiveRef._roll_state(newState, idx);
-    ActiveRef.updateState();
+    Comp2._roll_state(newState, idx);
+    Comp2.recall();
   }
-  return [ActiveRef._roll_state(null, idx, true), setState];
+  return [Comp2._roll_state(null, idx, true), setState];
 }
-function useEffect(effect, ActiveRef) {
-  ActiveRef._effect(effect);
+function useEffect(effect, Comp2) {
+  Comp2._effect(effect);
 }
 function useRef() {
-  return new reference;
+  return new __raw_ref;
 }
 var makeElement = (element, ElementChildrenAndPropertyList) => {
-  let props = {}, text = null;
+  const props = {};
+  let text = undefined;
   if (ElementChildrenAndPropertyList.length !== 0) {
     for (let i = 0;i < ElementChildrenAndPropertyList.length; i++) {
       let child = ElementChildrenAndPropertyList[i];
       if (typeof child === "function") {
         child = child();
       }
-      if (child instanceof Ref) {
+      if (child instanceof Comp) {
         child = child.render();
       }
       if (child instanceof HTMLElement || child instanceof DocumentFragment) {
@@ -104,12 +101,12 @@ var makeElement = (element, ElementChildrenAndPropertyList) => {
         element.appendChild(Rhoda(child));
         continue;
       }
-      if (typeof child === "string" || typeof child === "number") {
+      if (typeof child === "string") {
         text = child;
         continue;
       }
       if (typeof child === "object") {
-        props = Object.assign(props, child);
+        Object.assign(props, child);
         continue;
       }
     }
@@ -122,21 +119,12 @@ var makeElement = (element, ElementChildrenAndPropertyList) => {
         Object.assign(element.style, value);
         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") {
+      if (prop === "href") {
         const href = value || "";
         if (!href.includes("://")) {
           element.addEventListener("click", (e) => {
             e.preventDefault();
             Router.navigate(element.pathname);
-            //! get url hash here and scroll into view
             if (href.includes("#")) {
               const l = href.split("#").at(-1);
               document.getElementById("#" + l)?.scrollIntoView();
@@ -146,12 +134,8 @@ var makeElement = (element, ElementChildrenAndPropertyList) => {
         element.setAttribute(prop, value);
         continue;
       }
-      if (typeof element.style[prop] !== "undefined" && prop !== "src") {
-        element.style[prop] = value;
-        continue;
-      }
       if (Array.isArray(value)) {
-        if (prop == "reference" && value[0] instanceof reference) {
+        if (prop == "reference" && value[0] instanceof __raw_ref) {
           value[0]._appendDomForce(value[1], element);
           continue;
         }
@@ -165,23 +149,30 @@ var makeElement = (element, ElementChildrenAndPropertyList) => {
       }
       if (prop === "onmount" && typeof props["onmount"] === "function") {
         const ev = () => {
-          props.onmount?.apply(element);
+          props["onmount"]?.apply(element);
           props["onmount"] = undefined;
         };
-        CradovaEvent.addEventListener("onmountEvent", ev);
+        CradovaEvent.addAfterMount(ev);
+        continue;
+      }
+      if (prop.includes("data-")) {
+        element.setAttribute(prop, value);
+        continue;
+      }
+      if (prop.includes("aria-")) {
+        element.setAttribute(prop, value);
         continue;
       }
       element[prop] = value;
     }
   }
-  if (text) {
+  if (text !== undefined) {
     element.appendChild(document.createTextNode(text));
   }
   return element;
 };
 var cra = (tag) => {
-  const extend = (...Children_and_Properties) => makeElement(document.createElement(tag), Children_and_Properties);
-  return extend;
+  return (...Children_and_Properties) => makeElement(document.createElement(tag), Children_and_Properties);
 };
 var SNRU = {
   snru: "",
@@ -217,78 +208,59 @@ var frag = function(children) {
 
 // src/primitives/classes.ts
 class cradovaEvent {
-  listeners = {};
-  active_listeners = {};
-  async addEventListener(eventName, callback) {
-    if (!this.listeners[eventName]) {
-      this.listeners[eventName] = [];
+  afterMount = [];
+  beforeMountActive = [];
+  async addAfterMount(callback) {
+    if (!this.addAfterMount) {
+      this.afterMount = [];
     }
-    this.listeners[eventName].push(callback);
+    this.afterMount.push(callback);
   }
-  async addActiveEventListener(eventName, callback) {
-    if (!this.active_listeners[eventName]) {
-      this.active_listeners[eventName] = [];
+  async addBeforeMountActive(callback) {
+    if (!this.beforeMountActive) {
+      this.beforeMountActive = [];
     }
-    this.active_listeners[eventName].push(callback);
+    this.beforeMountActive.push(callback);
   }
-  async dispatchEvent(eventName, eventArgs) {
-    const eventListeners = this.listeners[eventName] || [];
-    for (;eventListeners.length !== 0; ) {
-      eventListeners.shift()(eventArgs);
-    }
-  }
-  async dispatchActiveEvent(eventName, eventArgs) {
-    const eventListeners = this.active_listeners[eventName] || [];
-    eventListeners.length && SNRU.memo_SNRU();
+  dispatchEvent(eventName) {
+    const eventListeners = this[eventName] || [];
     for (let i = 0;i < eventListeners.length; i++) {
-      eventListeners[i](eventArgs);
+      if (eventName.includes("Active")) {
+        eventListeners[i]();
+      } else {
+        eventListeners.shift()();
+      }
     }
   }
 }
 var CradovaEvent = new cradovaEvent;
 
-class Ref {
+class Comp {
   component;
   effects = [];
   effectuate = null;
-  methods = {};
   rendered = false;
   published = false;
   preRendered = null;
-  reference = new reference;
+  reference = new __raw_ref;
   Signal;
   _state = [];
   _state_track = {};
   _state_index = 0;
-  stash;
   constructor(component) {
     this.component = component.bind(this);
-    CradovaEvent.addActiveEventListener("active-Refs", () => {
-      this._state_index = 0;
+    CradovaEvent.addBeforeMountActive(() => {
       this.published = false;
     });
   }
-  preRender(data, stash) {
-    this.preRendered = this.render(data, stash);
+  preRender() {
+    this.preRendered = this.render();
   }
-  destroyPreRendered() {
-    this.preRendered = null;
-  }
-  define(methodName, method) {
-    if (typeof methodName == "string" && typeof method == "function" && !Object.prototype.hasOwnProperty.call(this, methodName)) {
-      this.methods[methodName] = method.bind(this);
-    } else {
-      console.error(" \u2718  Cradova err :  Invalid Ref.define parameters");
-    }
-  }
-  render(data, stash) {
+  render() {
     this.effects = [];
     this.rendered = false;
-    if (stash) {
-      this.stash = data;
-    }
     if (!this.preRendered) {
-      const html = this.component(data);
+      const html = this.component();
       if (html instanceof HTMLElement || html instanceof DocumentFragment) {
         this.reference._appendDomForce("html", html);
         this.effector.apply(this);
@@ -310,6 +282,9 @@ class Ref {
   }
   _roll_state(data, idx, get = false) {
     if (!get) {
+      if (idx !== 0) {
+        this._state[idx - 1] = undefined;
+      }
       this._state[idx] = data;
     }
     return this._state[idx];
@@ -329,29 +304,26 @@ class Ref {
       this.effectuate = null;
     }
   }
-  updateState(data, stash) {
+  recall() {
     if (!this.rendered) {
       this.effectuate = () => {
         if (this.published) {
-          this.Activate(data);
+          this.activate();
         }
       };
     } else {
       if (this.published) {
-        this.Activate(data);
+        this.activate();
       }
     }
-    if (stash) {
-      this.stash = data;
-    }
   }
-  async Activate(data) {
+  async activate() {
     this._state_index = 0;
     this.published = false;
     if (!this.rendered) {
       return;
     }
-    const html = this.component(data);
+    const html = this.component();
     if (html instanceof HTMLElement || html instanceof DocumentFragment) {
       const node = this.reference.current("html");
       if (node) {
@@ -360,9 +332,9 @@ class Ref {
       }
       this.published = true;
       this.reference._appendDomForce("html", html);
-      CradovaEvent.dispatchEvent("onmountEvent");
+      CradovaEvent.dispatchEvent("afterMount");
     } else {
-      console.error(" \u2718  Cradova err :  Invalid html content, got  - " + html);
+      console.error(" \u2718  Cradova err :  Invalid html, got  - " + html);
     }
   }
 }
@@ -387,7 +359,7 @@ class lazy {
   }
 }
 
-class reference {
+class __raw_ref {
   tree = {};
   globalTree = {};
   bindAs(name) {
@@ -411,13 +383,13 @@ class reference {
     this.globalTree[name] = Element;
   }
 }
-var localTree = new reference;
+var localTree = new __raw_ref;
 
 class createSignal {
   callback;
   persistName = "";
   actions = {};
-  ref = [];
+  comp = [];
   value;
   constructor(initial, props) {
     this.value = initial;
@@ -445,8 +417,8 @@ class createSignal {
     if (this.persistName) {
       localStorage.setItem(this.persistName, JSON.stringify(this.value));
     }
-    if (this.ref.length && shouldRefRender !== false) {
-      this._updateState();
+    if (this.comp.length && shouldRefRender !== false) {
+      this.updateState();
     }
     if (this.callback) {
       this.callback(this.value);
@@ -458,21 +430,21 @@ class createSignal {
       if (this.persistName) {
         localStorage.setItem(this.persistName, JSON.stringify(this.value));
       }
-      if (this.ref.length && shouldRefRender !== false) {
-        this._updateState();
+      if (this.comp.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`);
+      throw new Error(`\u2718  Cradova err : can't set key ${String(key)} store.value is not an object`);
     }
   }
   createAction(name, action) {
     if (typeof name === "string" && typeof action === "function") {
-      this.actions[name] = action;
+      this.actions[name] = action.bind(this);
     } else {
-      throw new Error(`\u2718  Cradova err : can't create action, ${name} is not a function`);
+      throw new Error(`\u2718  Cradova err : can't create action ${name}, check values`);
     }
   }
   createActions(Actions) {
@@ -480,13 +452,13 @@ class createSignal {
       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`);
+        throw new Error(`\u2718  Cradova err : can't create action ${name} check values`);
       }
     }
   }
   fireAction(key, data) {
-    this._updateState(key, data);
     if (typeof this.actions[key] === "function") {
+      this.updateState(key, data);
       return this.actions[key].call(this, data);
     } else {
       throw Error("\u2718  Cradova err : action " + key + "  does not exist!");
@@ -499,59 +471,51 @@ class createSignal {
       throw new Error("\u2718  Cradova err : can't bind an unavailable property!  " + prop);
     }
   }
-  _updateState(name, data) {
+  updateState(name, data) {
     if (name && data) {
-      this.ref.map((ent) => {
+      this.comp.map((ent) => {
         if (ent._event === name) {
           if (ent._element_property && ent._signalProperty) {
-            ent.ref.updateState({
-              [ent._element_property]: data[ent._signalProperty]
-            });
+            ent.comp.recall();
             return;
           }
           if (ent._element_property) {
-            ent.ref.updateState({
-              [ent._element_property]: data
-            });
+            ent.comp.recall();
             return;
           }
           if (ent._signalProperty) {
-            ent.ref.updateState(data[ent._signalProperty]);
+            ent.comp.recall();
             return;
           }
         }
       });
     } else {
-      for (let i = 0;i < this.ref.length; i++) {
-        const ent = this.ref[i];
+      for (let i = 0;i < this.comp.length; i++) {
+        const ent = this.comp[i];
         if (ent._element_property && ent._signalProperty) {
-          ent.ref.updateState({
-            [ent._element_property]: this.value[ent._signalProperty]
-          });
+          ent.comp.recall();
           continue;
         }
         if (ent._element_property) {
-          ent.ref.updateState({
-            [ent._element_property]: this.value
-          });
+          ent.comp.recall();
           continue;
         }
         if (ent._signalProperty) {
-          ent.ref.updateState(this.value[ent._signalProperty]);
+          ent.comp.recall();
           continue;
         }
         if (!ent._element_property && !ent._signalProperty) {
-          ent.ref.updateState(this.value);
+          ent.comp.recall();
           continue;
         }
       }
     }
   }
-  bindRef(ref, binding = { signalProperty: "", _element_property: "" }) {
-    ref.render = ref.render.bind(ref, this.value);
-    ref._setExtra(this);
-    this.ref.push({
-      ref,
+  bindRef(comp, binding = { signalProperty: "", _element_property: "" }) {
+    comp.render = comp.render.bind(comp);
+    comp._setExtra(this);
+    this.comp.push({
+      comp,
       _signalProperty: binding.signalProperty,
       _element_property: binding._element_property,
       _event: binding.event
@@ -567,81 +531,23 @@ class createSignal {
   }
 }
 
-class Screen {
+class Page {
   _name;
   _html;
-  _packed = false;
   _template = document.createElement("div");
   _callBack;
   _deCallBack;
-  _persist = true;
-  _delegatedRoutesCount = -1;
   _dropped = false;
   _errorHandler = null;
-  constructor(cradova_screen_initials) {
-    const { template, name, persist, renderInParallel } = cradova_screen_initials;
-    if (template instanceof Ref) {
-      this._html = () => template.render({});
-    } else {
-      this._html = template;
-    }
+  constructor(cradova_page_initials) {
+    const { template, name } = cradova_page_initials;
+    this._html = template;
     this._name = name || "Document";
-    this._template.setAttribute("id", "cradova-screen-set");
-    if (renderInParallel === true) {
-      this._delegatedRoutesCount = 0;
-      this._persist = false;
-    } else {
-      if (typeof persist === "boolean") {
-        this._persist = persist;
-      }
-    }
-  }
-  _derive() {
-    return {
-      _name: this._name,
-      _callBack: this._callBack,
-      _deCallBack: this._deCallBack
-    };
-  }
-  _apply_derivation(derivation) {
-    this._name = derivation._name;
-    this._callBack = derivation._callBack;
-    this._deCallBack = derivation._deCallBack;
-  }
-  get _delegatedRoutes() {
-    if (this._delegatedRoutesCount > 100) {
-      return -1;
-    }
-    return this._delegatedRoutesCount;
-  }
-  set _delegatedRoutes(count) {
-    if (count) {
-      this._delegatedRoutesCount += 1;
-    }
+    this._template.setAttribute("id", "page");
   }
-  setErrorHandler(errorHandler) {
+  set errorHandler(errorHandler) {
     this._errorHandler = errorHandler;
   }
-  async _package() {
-    SNRU.memo_SNRU();
-    if (typeof this._html === "function") {
-      let html = await this._html.apply(this);
-      if (typeof html === "function") {
-        html = html();
-        if (html instanceof HTMLElement || html instanceof DocumentFragment) {
-          this._template.innerHTML = "";
-          this._template.appendChild(html);
-        }
-      } else {
-        if (html instanceof HTMLElement || html instanceof DocumentFragment) {
-          this._template.innerHTML = "";
-          this._template.appendChild(html);
-        } else {
-          throw new Error(` \u2718  Cradova err:  template function for the screen with name '${this._name}' returned ${html} instead of html`);
-        }
-      }
-    }
-  }
   onActivate(cb) {
     this._callBack = cb;
   }
@@ -649,7 +555,7 @@ class Screen {
     this._deCallBack = cb;
   }
   async _deActivate() {
-    this._deCallBack && await this._deCallBack(localTree.globalTree["doc"]);
+    this._deCallBack && await this._deCallBack();
   }
   drop(state) {
     if (typeof state === "boolean") {
@@ -658,26 +564,30 @@ class Screen {
     } else
       return this._dropped;
   }
-  async _Activate(force = false) {
+  async _activate() {
     if (this._dropped) {
       history.go(-1);
       return;
     }
-    CradovaEvent.dispatchActiveEvent("active-Refs");
-    if (!this._persist || force || !this._packed) {
-      await this._package();
-      this._packed = true;
+    SNRU.memo_SNRU();
+    let html = this._html.apply(this);
+    if (html instanceof HTMLElement) {
+      this._template.innerHTML = "";
+      this._template.appendChild(html);
+    } else {
+      throw new Error(` \u2718  Cradova err:  template function for the page returned ${html} instead of html`);
     }
     document.title = this._name;
     localTree.globalTree["doc"].innerHTML = "";
+    CradovaEvent.dispatchEvent("beforeMountActive");
     localTree.globalTree["doc"].appendChild(this._template);
-    CradovaEvent.dispatchEvent("onmountEvent");
+    CradovaEvent.dispatchEvent("afterMount");
     window.scrollTo({
       top: 0,
       left: 0,
       behavior: "instant"
     });
-    this._callBack && await this._callBack(localTree.globalTree["doc"]);
+    this._callBack && await this._callBack();
   }
 }
 
@@ -688,7 +598,7 @@ class RouterBoxClass {
   pageShow = null;
   pageHide = null;
   errorHandler;
-  loadingScreen = null;
+  loadingPage = null;
   params = {};
   routes = {};
   pageevents = [];
@@ -700,13 +610,13 @@ class RouterBoxClass {
       }
     }, 50);
   }
-  route(path, screen) {
-    if (typeof screen !== "undefined") {
-      if (screen && !screen) {
-        console.error(" \u2718  Cradova err:  not a valid screen  ", screen);
-        throw new Error(" \u2718  Cradova err:  Not a valid cradova screen component");
+  route(path, page) {
+    if (typeof page !== "undefined") {
+      if (page && !page) {
+        console.error(" \u2718  Cradova err:  not a valid page  ", page);
+        throw new Error(" \u2718  Cradova err:  Not a valid cradova page component");
       }
-      return this.routes[path] = screen;
+      return this.routes[path] = page;
     }
     return;
   }
@@ -728,8 +638,8 @@ class RouterBoxClass {
     if (typeof route !== "undefined") {
       try {
         if (typeof route === "function") {
-          if (this.loadingScreen instanceof Screen) {
-            await this.loadingScreen._Activate();
+          if (this.loadingPage instanceof Page) {
+            await this.loadingPage._activate();
           }
           route = await route();
           if (!route) {
@@ -739,19 +649,10 @@ class RouterBoxClass {
             return;
           }
         }
-        if (route._delegatedRoutes !== -1) {
-          route._delegatedRoutes = 1;
-          const a = route._derive();
-          route = new Screen({
-            template: route._html
-          });
-          route._apply_derivation(a);
-          this.routes[url] = route;
-        }
         if (params) {
           this.params.params = params;
         }
-        await route._Activate(_force);
+        await route._activate();
         this.start_pageevents(url);
         this.lastNavigatedRouteController && this.lastNavigatedRouteController._deActivate();
         this.lastNavigatedRoute = url;
@@ -764,55 +665,69 @@ class RouterBoxClass {
             this.errorHandler(error);
           } else {
             console.error(error);
-            throw new Error(" \u2718  Cradova err:  consider adding error boundary to the specific screen  ");
+            throw new Error(" \u2718  Cradova err:  consider adding error boundary to the specific page  ");
           }
         }
       }
     } else {
       if (this.routes["*"]) {
-        await this.routes["*"]._Activate(_force);
+        await this.routes["*"]._activate();
       }
     }
   }
   checker(url) {
+    if (url[0] !== "/") {
+      url = url.slice(url.indexOf("/", 7));
+    }
     if (this.routes[url]) {
       return [this.routes[url], { path: url }];
     }
     if (this.routes[url + "/"]) {
-      return [this.routes[url], { path: url }];
+      return [this.routes[url + "/"], { path: url }];
     }
-    for (const path in this.routes) {
-      if (!path.includes(":")) {
-        continue;
-      }
-      const urlFixtures = url.split("/");
-      const pathFixtures = path.split("/");
-      if (url.endsWith("/")) {
-        urlFixtures.pop();
+    if (url.includes("/?")) {
+      const sraw = [...new URLSearchParams(url).entries()];
+      const search = {};
+      for (const idx in sraw) {
+        search[sraw[idx][0].includes("?") ? sraw[idx][0].split("?")[1] : sraw[idx][0]] = sraw[idx][1];
       }
-      let fixturesX = 0;
-      let fixturesY = 0;
-      urlFixtures.shift();
-      pathFixtures.shift();
-      if (pathFixtures.length === urlFixtures.length) {
-        const routesParams = { _path: "" };
-        for (let i = 0;i < pathFixtures.length; i++) {
-          if (pathFixtures[i].includes(":")) {
-            fixturesY++;
-            continue;
-          }
-          if (urlFixtures[i] === pathFixtures[i]) {
-            fixturesX++;
-          }
+      const path = url.slice(0, url.indexOf("/?") + 2);
+      return [this.routes[path], { path, search }];
+    }
+    for (const path in this.routes) {
+      if (path.includes(":")) {
+        const urlFixtures = url.split("/");
+        const pathFixtures = path.split("/");
+        if (url.endsWith("/")) {
+          urlFixtures.pop();
         }
-        if (fixturesX + fixturesY === pathFixtures.length) {
+        let fixturesX = 0;
+        let fixturesY = 0;
+        if (pathFixtures.length === urlFixtures.length) {
           for (let i = 0;i < pathFixtures.length; i++) {
             if (pathFixtures[i].includes(":")) {
-              routesParams[pathFixtures[i].split(":")[1]] = urlFixtures[i];
+              fixturesY++;
+              continue;
             }
+            if (urlFixtures[i] === pathFixtures[i]) {
+              fixturesX++;
+            }
+          }
+          if (fixturesX + fixturesY === pathFixtures.length) {
+            const routesParams = {};
+            for (let i = 0;i < pathFixtures.length; i++) {
+              if (pathFixtures[i].includes(":")) {
+                routesParams[pathFixtures[i].split(":")[1]] = urlFixtures[i];
+              }
+            }
+            return [this.routes[path], { param: routesParams }];
           }
-          routesParams["_path"] = path;
-          return [this.routes[path], routesParams];
+        }
+      }
+      if (path.includes("*")) {
+        const p = path.slice(0, -1);
+        if (url.startsWith(p)) {
+          return [this.routes[path], { extraPath: url.slice(p.length) }];
         }
       }
     }
@@ -824,14 +739,14 @@ var RouterBox = new RouterBoxClass;
 class Router {
   static BrowserRoutes(obj) {
     for (const path in obj) {
-      let screen = obj[path];
-      if (typeof screen === "object" && typeof screen.then === "function" || typeof screen === "function") {
+      let page = obj[path];
+      if (typeof page === "object" && typeof page.then === "function" || typeof page === "function") {
         RouterBox.routes[path] = async () => {
-          screen = await (typeof screen === "function" ? await screen() : await screen);
-          return RouterBox.route(path, screen?.default || screen);
+          page = await (typeof page === "function" ? await page() : await page);
+          return RouterBox.route(path, page?.default || page);
         };
       } else {
-        RouterBox.route(path, screen);
+        RouterBox.route(path, page);
       }
     }
     Router._mount();
@@ -851,12 +766,12 @@ class Router {
     window.location.replace(window.location.pathname + window.location.search);
     history.go(-1);
   }
-  static navigate(href, data = null, force = false) {
+  static navigate(href, data = null) {
     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("://")) {
+    if (href.includes(".")) {
       window.location.href = href;
     } else {
       if (href === window.location.pathname) {
@@ -869,14 +784,14 @@ class Router {
       }
       RouterBox.params.params = params;
       RouterBox.params.data = data;
-      RouterBox.router(null, force);
+      RouterBox.router(null);
     }
   }
-  static setLoadingScreen(screen) {
-    if (screen instanceof Screen) {
-      RouterBox.loadingScreen = screen;
+  static setLoadingPage(page) {
+    if (page instanceof Page) {
+      RouterBox.loadingPage = page;
     } else {
-      throw new Error(" \u2718  Cradova err:  Loading Screen should be a cradova screen class");
+      throw new Error(" \u2718  Cradova err:  Loading Page should be a cradova page class");
     }
   }
   static onPageEvent(callback) {
@@ -886,27 +801,6 @@ class Router {
       throw new Error(" \u2718  Cradova err:  callback for pageShow event is not a function");
     }
   }
-  static async packageScreen(path) {
-    if (!RouterBox.routes[path]) {
-      console.error(" \u2718  Cradova err:  no screen with path " + path);
-      throw new Error(" \u2718  Cradova err:  cradova err: Not a defined screen path");
-    }
-    let [route] = RouterBox.checker(path);
-    if (typeof route === "function") {
-      route = await route();
-    }
-    if (route._delegatedRoutes !== -1) {
-      route._delegatedRoutes = 1;
-      const a = route._derive();
-      route = new Screen({
-        template: route._html
-      });
-      route._apply_derivation(a);
-      RouterBox.routes[path] = route;
-    }
-    route._package();
-    route._packed = true;
-  }
   static get Params() {
     return RouterBox.params;
   }
@@ -936,19 +830,15 @@ class Router {
 }
 // src/primitives/dom-objects.ts
 var a = cra("a");
-var article = cra("article");
 var audio = cra("audio");
 var br = cra("br");
 var button = cra("button");
 var canvas = cra("canvas");
 var caption = cra("caption");
-var col = cra("col");
-var colgroup = cra("colgroup");
 var datalist = cra("datalist");
 var details = cra("details");
 var dialog = cra("dialog");
 var div = cra("div");
-var figure = cra("figure");
 var footer = cra("footer");
 var form = cra("form");
 var h1 = cra("h1");
@@ -983,12 +873,10 @@ 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");
@@ -999,22 +887,17 @@ var svg = (svg2, properties) => {
 };
 var raw = (html) => {
   const div2 = document.createElement("div");
-  div2.innerHTML = html;
+  if (Array.isArray(html)) {
+    div2.innerHTML = html[0];
+  } else {
+    if (typeof html === "string") {
+      div2.innerHTML = html;
+    }
+  }
   const df = new DocumentFragment;
   df.append(...Array.from(div2.children));
   return df;
 };
-
-// src/index.ts
-/*! *****************************************************************************
-Copyright 2022 Friday Candour. All rights reserved.
-Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-this file except in compliance with the License. You may obtain a copy of the
-License at http://www.apache.org/licenses/LICENSE-2.0
-
-See the Apache Version 2.0 License for specific language governing permissions
-and limitations under the License.
-********************************************************************************/
 export {
   video,
   useState,
@@ -1022,12 +905,10 @@ export {
   useEffect,
   ul,
   u,
-  track,
   tr,
   title,
   th,
   textarea,
-  template,
   td,
   tbody,
   table,
@@ -1038,7 +919,6 @@ export {
   source,
   select,
   section,
-  reference,
   raw,
   q,
   progress,
@@ -1069,28 +949,25 @@ export {
   frag,
   form,
   footer,
-  figure,
   div,
   dialog,
   details,
   datalist,
   createSignal,
   cra,
-  colgroup,
-  col,
   caption,
   canvas,
   button,
   br,
   audio,
-  article,
   a,
-  Screen,
+  __raw_ref,
   SNRU,
   Router,
   Rhoda,
-  Ref,
+  Page,
   CradovaEvent,
+  Comp,
   $switch,
   $ifelse,
   $if,