cradova 3.3.20 → 3.3.54

package/dist/index.js

@@ -1,253 +1,41 @@
-// src/primitives/functions.ts
-function Rhoda(l) {
-  const fg = new DocumentFragment;
-  for (let ch of l) {
-    if (Array.isArray(ch)) {
-      fg.appendChild(Rhoda(ch));
-    } else {
-      if (ch instanceof Comp) {
-        ch = ch.render();
-      }
-      if (typeof ch === "function") {
-        ch = ch();
-        if (typeof ch === "function") {
-          ch = ch();
-        }
-      }
-      if (ch instanceof HTMLElement || ch instanceof DocumentFragment) {
-        fg.appendChild(ch);
-        continue;
-      }
-      if (typeof ch === "string") {
-        fg.appendChild(document.createTextNode(ch));
-      }
-    }
-  }
-  return fg;
-}
-function $if(condition, ...elements) {
-  if (condition) {
-    return elements;
-  }
-}
-function $ifelse(condition, ifTrue, ifFalse) {
-  if (condition) {
-    return ifTrue;
-  }
-  return ifFalse;
-}
-function $case(value, ...elements) {
-  return (key) => {
-    if (key === value) {
-      return elements;
-    }
-    return;
-  };
-}
-function $switch(key, ...cases) {
-  let elements;
-  if (cases.length) {
-    for (let i = 0;i < cases.length; i++) {
-      elements = cases[i](key);
-      if (elements) {
-        break;
-      }
-    }
-  }
-  return elements;
-}
-function loop(datalist, component) {
-  return Array.isArray(datalist) ? datalist.map(component) : undefined;
-}
-function useState(newState, Comp2) {
-  Comp2._state_index += 1;
-  const idx = Comp2._state_index;
-  if (idx >= Comp2._state.length) {
-    Comp2._state[idx] = newState;
-  }
-  function setState(newState2) {
-    Comp2._state[idx] = newState2;
-    Comp2.recall();
-  }
-  return [Comp2._state[idx], setState];
-}
-function useEffect(effect, Comp2) {
-  Comp2._effect(effect);
-}
-function useRef() {
-  return new __raw_ref;
-}
-var makeElement = (element, ElementChildrenAndPropertyList) => {
-  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 Comp) {
-        child = child.render();
-      }
-      if (child instanceof HTMLElement || child instanceof DocumentFragment) {
-        element.appendChild(child);
-        continue;
-      }
-      if (Array.isArray(child)) {
-        element.appendChild(Rhoda(child));
-        continue;
-      }
-      if (typeof child === "string") {
-        text = child;
-        continue;
-      }
-      if (typeof child === "object") {
-        Object.assign(props, child);
-        continue;
-      }
-    }
-  } else {
-    return element;
-  }
-  if (typeof props === "object" && element) {
-    for (const [prop, value] of Object.entries(props)) {
-      if (prop === "style" && typeof value === "object") {
-        Object.assign(element.style, value);
-        continue;
-      }
-      if (prop === "href") {
-        const href = value || "";
-        if (!href.includes("://")) {
-          element.addEventListener("click", (e) => {
-            e.preventDefault();
-            Router.navigate(element.href);
-            if (href.includes("#")) {
-              const l = href.split("#").at(-1);
-              document.getElementById("#" + l)?.scrollIntoView();
-            }
-          });
-        }
-        element.setAttribute(prop, value);
-        continue;
-      }
-      if (Array.isArray(value)) {
-        if (prop == "reference" && value[0] instanceof __raw_ref) {
-          value[0]._appendDomForce(value[1], element);
-          continue;
-        }
-        if (value[0] instanceof createSignal) {
-          value[0].bindRef(element, {
-            _element_property: prop,
-            signalProperty: value[1]
-          });
-          continue;
-        }
-      }
-      if (prop === "onmount" && typeof props["onmount"] === "function") {
-        const ev = () => {
-          props["onmount"]?.apply(element);
-          props["onmount"] = undefined;
-        };
-        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 !== undefined) {
-    element.appendChild(document.createTextNode(text));
-  }
-  return element;
-};
-var cra = (tag) => {
-  return (...Children_and_Properties) => makeElement(document.createElement(tag), Children_and_Properties);
-};
-var SNRU = {
-  snru: "",
-  memo_SNRU() {
-    let key = 0;
-    const url = window.location.href;
-    for (let i = 0;i < url.length; i++) {
-      key += url.charCodeAt(i);
-    }
-    this.snru = key.toString();
-  }
-};
-var frag = function(children) {
-  const par = document.createDocumentFragment();
-  for (let i = 0;i < children.length; i++) {
-    let html = children[i];
-    if (typeof html === "function") {
-      html = html();
-    }
-    if (html instanceof HTMLElement || html instanceof DocumentFragment) {
-      par.appendChild(html);
-      continue;
-    }
-    if (html instanceof String) {
-      par.appendChild(document.createTextNode(html));
-      continue;
-    }
-    console.error(" \u2718  Cradova err:   wrong element type" + html);
-  }
-  return par;
-};
-
 // src/primitives/classes.ts
 class cradovaEvent {
+  static refid = 0;
   afterMount = [];
   beforeMountActive = [];
-  async addAfterMount(callback) {
-    if (!this.addAfterMount) {
-      this.afterMount = [];
-    }
-    this.afterMount.push(callback);
-  }
-  async addBeforeMountActive(callback) {
-    if (!this.beforeMountActive) {
-      this.beforeMountActive = [];
-    }
-    this.beforeMountActive.push(callback);
-  }
+  afterDeactivate = [];
   dispatchEvent(eventName) {
-    const eventListeners = this[eventName] || [];
-    for (let i = 0;i < eventListeners.length; i++) {
-      if (eventName.includes("Active")) {
+    const eventListeners = this[eventName];
+    if (eventName.includes("Active")) {
+      for (let i = 0;i < eventListeners.length; i++) {
         eventListeners[i]();
-      } else {
-        eventListeners.shift()();
       }
+      return;
+    }
+    while (eventListeners.length !== 0) {
+      eventListeners.shift()();
     }
   }
 }
 var CradovaEvent = new cradovaEvent;
 
 class Comp {
+  id;
   component;
   effects = [];
   effectuate = null;
   rendered = false;
   published = false;
   preRendered = null;
-  reference = new __raw_ref;
+  reference = null;
   Signal;
   _state = [];
   _state_index = 0;
   test;
   constructor(component) {
     this.component = component.bind(this);
-    CradovaEvent.addBeforeMountActive(() => {
-      this._state_index = 0;
-      this._state = [];
-    });
+    cradovaEvent.refid += 1;
+    this.id = cradovaEvent.refid;
   }
   preRender() {
     this.preRendered = this.render();
@@ -256,9 +44,11 @@ class Comp {
     this.effects = [];
     this.rendered = false;
     if (!this.preRendered) {
+      this._state_index = 0;
+      this._state = [];
       const html = this.component();
-      if (html instanceof HTMLElement || html instanceof DocumentFragment) {
-        this.reference._appendDomForce("html", html);
+      if (html instanceof HTMLElement) {
+        this.reference = html;
         this.effector.apply(this);
         this.rendered = true;
         this.published = true;
@@ -271,6 +61,9 @@ class Comp {
     }
   }
   _setExtra(Extra) {
+    if (this.Signal) {
+      Extra.value = this.Signal.value;
+    }
     this.Signal = Extra;
   }
   _effect(fn) {
@@ -280,7 +73,10 @@ class Comp {
   }
   async effector() {
     for (let i = 0;i < this.effects.length; i++) {
-      await this.effects[i].apply(this);
+      const fn = await this.effects[i].apply(this);
+      if (typeof fn === "function") {
+        CradovaEvent.afterDeactivate.push(fn);
+      }
     }
     this.effects = [];
     if (this.effectuate) {
@@ -297,33 +93,33 @@ class Comp {
       };
     } else {
       if (this.published) {
-        this.activate();
+        setTimeout(() => {
+          this.activate();
+        });
       }
     }
   }
   async activate() {
-    this._state_index = 0;
     this.published = false;
     if (!this.rendered) {
       return;
     }
-    const html = this.component();
-    if (html instanceof HTMLElement || html instanceof DocumentFragment) {
-      const node = this.reference.current("html");
-      if (node) {
+    this._state_index = 0;
+    const node = this.reference;
+    if (document.contains(node)) {
+      const html = this.component();
+      if (html instanceof HTMLElement) {
         node.insertAdjacentElement("beforebegin", html);
         node.remove();
+        this.published = true;
+        this.reference = html;
+        CradovaEvent.dispatchEvent("afterMount");
+      } else {
+        console.error(" \u2718  Cradova err :  Invalid html, got  - " + html);
       }
-      this.published = true;
-      this.reference._appendDomForce("html", html);
-      CradovaEvent.dispatchEvent("afterMount");
-      (async () => {
-        if (!document.contains(html)) {
-          this.rendered = false;
-        }
-      })();
     } else {
-      console.error(" \u2718  Cradova err :  Invalid html, got  - " + html);
+      this.reference = null;
+      this.rendered = false;
     }
   }
 }
@@ -348,33 +144,7 @@ class lazy {
   }
 }
 
-class __raw_ref {
-  tree = {};
-  globalTree = {};
-  bindAs(name) {
-    return [this, name];
-  }
-  current(name) {
-    if (this.tree[SNRU.snru]) {
-      return this.tree[SNRU.snru][name];
-    }
-    return null;
-  }
-  _appendDomForce(name, Element) {
-    if (this.tree[SNRU.snru]) {
-      this.tree[SNRU.snru][name] = Element;
-    } else {
-      this.tree[SNRU.snru] = {};
-      this.tree[SNRU.snru][name] = Element;
-    }
-  }
-  _appendDomForceGlobal(name, Element) {
-    this.globalTree[name] = Element;
-  }
-}
-var localTree = new __raw_ref;
-
-class createSignal {
+class Signal {
   callback;
   persistName = "";
   actions = {};
@@ -397,34 +167,34 @@ class createSignal {
       }
     }
   }
-  set(value, shouldRefRender) {
+  set(value, shouldCompRender) {
     if (typeof value === "function") {
       this.value = value(this.value);
     } else {
       this.value = value;
     }
-    if (this.persistName) {
-      localStorage.setItem(this.persistName, JSON.stringify(this.value));
-    }
-    if (this.comp.length && shouldRefRender !== false) {
+    if (this.comp.length && shouldCompRender !== false) {
       this.updateState();
     }
     if (this.callback) {
       this.callback(this.value);
     }
+    if (this.persistName) {
+      localStorage.setItem(this.persistName, JSON.stringify(this.value));
+    }
   }
-  setKey(key, value, shouldRefRender) {
-    if (typeof this.value === "object" && !Array.isArray(this.value)) {
+  setKey(key, value, shouldCompRender) {
+    if (typeof this.value === "object") {
       this.value[key] = value;
-      if (this.persistName) {
-        localStorage.setItem(this.persistName, JSON.stringify(this.value));
-      }
-      if (this.comp.length && shouldRefRender !== false) {
+      if (this.comp.length && shouldCompRender !== false) {
         this.updateState();
       }
       if (this.callback) {
         this.callback(this.value);
       }
+      if (this.persistName) {
+        localStorage.setItem(this.persistName, JSON.stringify(this.value));
+      }
     } else {
       throw new Error(`\u2718  Cradova err : can't set key ${String(key)} store.value is not an object`);
     }
@@ -445,10 +215,10 @@ class createSignal {
       }
     }
   }
-  fireAction(key, data) {
+  fireAction(key) {
     if (typeof this.actions[key] === "function") {
-      this.updateState(key, data);
-      return this.actions[key].call(this, data);
+      this.updateState(key);
+      return this.actions[key].call(this);
     } else {
       throw Error("\u2718  Cradova err : action " + key + "  does not exist!");
     }
@@ -460,54 +230,31 @@ class createSignal {
       throw new Error("\u2718  Cradova err : can't bind an unavailable property!  " + prop);
     }
   }
-  updateState(name, data) {
-    if (name && data) {
-      this.comp.map((ent) => {
-        if (ent._event === name) {
-          if (ent._element_property && ent._signalProperty) {
-            ent.comp.recall();
-            return;
-          }
-          if (ent._element_property) {
-            ent.comp.recall();
-            return;
-          }
-          if (ent._signalProperty) {
-            ent.comp.recall();
-            return;
-          }
-        }
-      });
-    } else {
-      for (let i = 0;i < this.comp.length; i++) {
-        const ent = this.comp[i];
-        if (ent._element_property && ent._signalProperty) {
-          ent.comp.recall();
-          continue;
-        }
-        if (ent._element_property) {
-          ent.comp.recall();
-          continue;
-        }
-        if (ent._signalProperty) {
-          ent.comp.recall();
-          continue;
-        }
-        if (!ent._element_property && !ent._signalProperty) {
-          ent.comp.recall();
-          continue;
-        }
+  updateState(name) {
+    for (let i = 0;i < this.comp.length; i++) {
+      const ent = this.comp[i];
+      if (ent._event && ent._event === name) {
+        continue;
       }
+      if (ent._element_property && ent._signalProperty) {
+        ent.comp[ent._element_property] = this.value[ent._signalProperty];
+        continue;
+      }
+      ent.comp.recall();
     }
   }
-  bindRef(comp, binding = { signalProperty: "", _element_property: "" }) {
-    comp.render = comp.render.bind(comp);
-    comp._setExtra(this);
+  bindComp(comp, binding) {
+    if (comp instanceof Comp) {
+      if (this.comp.find((cmp) => cmp.comp?.id === comp.id))
+        return;
+      comp.render = comp.render.bind(comp);
+      comp._setExtra(this);
+    }
     this.comp.push({
       comp,
-      _signalProperty: binding.signalProperty,
-      _element_property: binding._element_property,
-      _event: binding.event
+      _signalProperty: binding?.signalProperty,
+      _element_property: binding?._element_property,
+      _event: binding?.event
     });
   }
   listen(callback) {
@@ -527,16 +274,12 @@ class Page {
   _callBack;
   _deCallBack;
   _dropped = false;
-  _errorHandler = null;
   constructor(cradova_page_initials) {
     const { template, name } = cradova_page_initials;
     this._html = template;
     this._name = name || "Document";
     this._template.setAttribute("id", "page");
   }
-  set errorHandler(errorHandler) {
-    this._errorHandler = errorHandler;
-  }
   onActivate(cb) {
     this._callBack = cb;
   }
@@ -558,7 +301,6 @@ class Page {
       history.go(-1);
       return;
     }
-    SNRU.memo_SNRU();
     let html = this._html.apply(this);
     if (html instanceof HTMLElement) {
       this._template.innerHTML = "";
@@ -567,9 +309,9 @@ class Page {
       throw new Error(` \u2718  Cradova err:  template function for the page returned ${html} instead of html`);
     }
     document.title = this._name;
-    localTree.globalTree["doc"].innerHTML = "";
+    RouterBox.doc.innerHTML = "";
     CradovaEvent.dispatchEvent("beforeMountActive");
-    localTree.globalTree["doc"].appendChild(this._template);
+    RouterBox.doc.appendChild(this._template);
     CradovaEvent.dispatchEvent("afterMount");
     window.scrollTo({
       top: 0,
@@ -577,10 +319,12 @@ class Page {
       behavior: "instant"
     });
     this._callBack && await this._callBack();
+    CradovaEvent.dispatchEvent("afterDeactivate");
   }
 }
 
 class RouterBoxClass {
+  doc = null;
   lastNavigatedRouteController;
   nextRouteController;
   lastNavigatedRoute;
@@ -588,7 +332,7 @@ class RouterBoxClass {
   pageHide = null;
   errorHandler;
   loadingPage = null;
-  params = {};
+  pageData = { params: {} };
   routes = {};
   pageevents = [];
   paused = false;
@@ -600,16 +344,14 @@ class RouterBoxClass {
     }, 50);
   }
   route(path, page) {
-    if (typeof page !== "undefined") {
-      if (page && !page) {
-        console.error(" \u2718  Cradova err:  not a valid page  ", page);
-      }
-      return this.routes[path] = page;
+    if (!page) {
+      console.error(" \u2718  Cradova err:  not a valid page  ", page);
     }
-    return;
+    return this.routes[path] = page;
   }
   async router(_e, _force) {
-    let url = window.location.href, route, params;
+    const url = window.location.href;
+    let route, params;
     if (this.paused) {
       window.location.hash = "paused";
       return;
@@ -635,7 +377,7 @@ class RouterBoxClass {
           }
         }
         if (params) {
-          this.params.params = params;
+          this.pageData.params = params;
         }
         await route._activate();
         this.start_pageevents(url);
@@ -643,15 +385,10 @@ class RouterBoxClass {
         this.lastNavigatedRoute = url;
         this.lastNavigatedRouteController = route;
       } catch (error) {
-        if (route && route["_errorHandler"]) {
-          route._errorHandler(error);
+        if (typeof this.errorHandler === "function") {
+          this.errorHandler(error, url);
         } else {
-          if (typeof this.errorHandler === "function") {
-            this.errorHandler(error);
-          } else {
-            console.error(error);
-            throw new Error(" \u2718  Cradova err:  consider adding error boundary to the specific page  ");
-          }
+          console.error(error);
         }
       }
     } else {
@@ -675,7 +412,7 @@ class RouterBoxClass {
         params[key] = val;
       });
       if (this.routes[url]) {
-        return [this.routes[url], { data: params, path: url }];
+        return [this.routes[url], params];
       }
     }
     for (const path in this.routes) {
@@ -704,7 +441,7 @@ class RouterBoxClass {
                 routesParams[pathFixtures[i].split(":")[1]] = urlFixtures[i];
               }
             }
-            return [this.routes[path], { param: routesParams }];
+            return [this.routes[path], routesParams];
           }
         }
       }
@@ -723,11 +460,11 @@ var RouterBox = new RouterBoxClass;
 class Router {
   static BrowserRoutes(obj) {
     for (const path in obj) {
-      let page = obj[path];
+      const page = obj[path];
       if (typeof page === "object" && typeof page.then === "function" || typeof page === "function") {
         RouterBox.routes[path] = async () => {
-          page = await (typeof page === "function" ? await page() : await page);
-          return RouterBox.route(path, page?.default || page);
+          const pagepp = typeof page === "function" ? await page() : await page;
+          return RouterBox.route(path, pagepp?.default || pagepp);
         };
       } else {
         RouterBox.route(path, page);
@@ -750,7 +487,7 @@ class Router {
     window.location.replace(window.location.pathname + window.location.search);
     history.go(-1);
   }
-  static navigate(href, data = null) {
+  static navigate(href, data) {
     if (typeof href !== "string") {
       console.error(" \u2718  Cradova err:  href must be a defined path but got " + href + " instead");
     }
@@ -763,8 +500,8 @@ class Router {
         RouterBox.nextRouteController = route;
         window.history.pushState({}, "", href);
       }
-      RouterBox.params.params = params;
-      RouterBox.params.data = data;
+      RouterBox.pageData.params = params;
+      RouterBox.pageData.data = data;
       RouterBox.router(null);
     }
   }
@@ -779,11 +516,11 @@ class Router {
     if (typeof callback === "function") {
       RouterBox["pageevents"].push(callback);
     } else {
-      throw new Error(" \u2718  Cradova err:  callback for pageShow event is not a function");
+      throw new Error(" \u2718  Cradova err:  callback for page events event is not a function");
     }
   }
-  static get Params() {
-    return RouterBox.params;
+  static get PageData() {
+    return RouterBox.pageData;
   }
   static addErrorHandler(callback) {
     if (typeof callback === "function") {
@@ -798,9 +535,9 @@ class Router {
       doc = document.createElement("div");
       doc.setAttribute("data-wrapper", "app");
       document.body.appendChild(doc);
-      localTree._appendDomForceGlobal("doc", doc);
+      RouterBox.doc = doc;
     } else {
-      localTree._appendDomForceGlobal("doc", doc);
+      RouterBox.doc = doc;
     }
     window.addEventListener("pageshow", () => RouterBox.router());
     window.addEventListener("popstate", (_e) => {
@@ -809,6 +546,207 @@ class Router {
     });
   }
 }
+// src/primitives/functions.ts
+function Rhoda(l) {
+  const fg = new DocumentFragment;
+  for (let ch of l) {
+    if (Array.isArray(ch)) {
+      fg.appendChild(Rhoda(ch));
+    } else {
+      if (ch instanceof Comp) {
+        ch = ch.render();
+      }
+      if (typeof ch === "function") {
+        ch = ch();
+        if (typeof ch === "function") {
+          ch = ch();
+        }
+      }
+      if (ch instanceof HTMLElement || ch instanceof DocumentFragment) {
+        fg.appendChild(ch);
+        continue;
+      }
+      if (typeof ch === "string") {
+        fg.appendChild(document.createTextNode(ch));
+      }
+    }
+  }
+  return fg;
+}
+function $if(condition, ...elements) {
+  if (condition) {
+    return elements;
+  }
+}
+function $ifelse(condition, ifTrue, ifFalse) {
+  if (condition) {
+    return ifTrue;
+  }
+  return ifFalse;
+}
+function $case(value, ...elements) {
+  return (key) => {
+    if (key === value) {
+      return elements;
+    }
+    return;
+  };
+}
+function $switch(key, ...cases) {
+  let elements;
+  if (cases.length) {
+    for (let i = 0;i < cases.length; i++) {
+      elements = cases[i](key);
+      if (elements) {
+        break;
+      }
+    }
+  }
+  return elements;
+}
+function loop(datalist, component) {
+  return Array.isArray(datalist) ? datalist.map(component) : undefined;
+}
+function useState(newState, Comp2) {
+  Comp2._state_index += 1;
+  const idx = Comp2._state_index;
+  if (idx >= Comp2._state.length) {
+    Comp2._state[idx] = newState;
+  }
+  function setState(newState2) {
+    if (typeof newState2 === "function") {
+      newState2 = newState2(Comp2._state[idx]);
+    }
+    Comp2._state[idx] = newState2;
+    Comp2.recall();
+  }
+  return [Comp2._state[idx], setState];
+}
+function useEffect(effect, Comp2) {
+  Comp2._effect(effect);
+}
+function useRef() {
+  return new __raw_ref;
+}
+
+class __raw_ref {
+  tree = {};
+  bindAs(name) {
+    return [this, name];
+  }
+  current(name) {
+    return this.tree[name];
+  }
+  _append(name, Element) {
+    this.tree[name] = Element;
+  }
+}
+var makeElement = (element, ElementChildrenAndPropertyList) => {
+  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 Comp) {
+        child = child.render();
+      }
+      if (child instanceof HTMLElement || child instanceof DocumentFragment) {
+        element.appendChild(child);
+        continue;
+      }
+      if (Array.isArray(child)) {
+        element.appendChild(Rhoda(child));
+        continue;
+      }
+      if (typeof child === "string") {
+        text = child;
+        continue;
+      }
+      if (typeof child === "object") {
+        Object.assign(props, child);
+        continue;
+      }
+    }
+  } else {
+    return element;
+  }
+  if (typeof props === "object" && element) {
+    for (const [prop, value] of Object.entries(props)) {
+      if (prop === "style" && typeof value === "object") {
+        Object.assign(element.style, value);
+        continue;
+      }
+      if (prop === "href") {
+        const href = value || "";
+        if (!href.includes("://")) {
+          element.addEventListener("click", (e) => {
+            e.preventDefault();
+            Router.navigate(element.href);
+            if (href.includes("#")) {
+              const l = href.split("#").at(-1);
+              document.getElementById("#" + l)?.scrollIntoView();
+            }
+          });
+        }
+        element.setAttribute(prop, value);
+        continue;
+      }
+      if (Array.isArray(value)) {
+        if (prop == "reference" && value[0] instanceof __raw_ref) {
+          value[0]._append(value[1], element);
+          continue;
+        }
+        if (value[0] instanceof Signal) {
+          value[0].bindComp(element, {
+            _element_property: prop,
+            signalProperty: value[1]
+          });
+          continue;
+        }
+      }
+      if (prop === "onmount") {
+        CradovaEvent.afterMount.push(() => {
+          typeof props["onmount"] === "function" && props["onmount"].apply(element);
+        });
+        continue;
+      }
+      if (prop.includes("data-") || prop.includes("aria-")) {
+        element.setAttribute(prop, value);
+        continue;
+      }
+      element[prop] = value;
+    }
+  }
+  if (text !== undefined) {
+    element.appendChild(document.createTextNode(text));
+  }
+  return element;
+};
+var cra = (tag) => {
+  return (...Children_and_Properties) => makeElement(document.createElement(tag), Children_and_Properties);
+};
+var frag = function(children) {
+  const par = document.createDocumentFragment();
+  for (let i = 0;i < children.length; i++) {
+    let html = children[i];
+    if (typeof html === "function") {
+      html = html();
+    }
+    if (html instanceof HTMLElement || html instanceof DocumentFragment) {
+      par.appendChild(html);
+      continue;
+    }
+    if (html instanceof String) {
+      par.appendChild(document.createTextNode(html));
+      continue;
+    }
+    console.error(" \u2718  Cradova err:   wrong element type" + html);
+  }
+  return par;
+};
 // src/primitives/dom-objects.ts
 var a = cra("a");
 var audio = cra("audio");
@@ -934,7 +872,6 @@ export {
   dialog,
   details,
   datalist,
-  createSignal,
   cra,
   caption,
   canvas,
@@ -942,8 +879,7 @@ export {
   br,
   audio,
   a,
-  __raw_ref,
-  SNRU,
+  Signal,
   Router,
   Rhoda,
   Page,

package/dist/primitives/classes.d.ts

@@ -1,29 +1,32 @@
-import { type CradovaPageType, type promisedPage } from "./types";
+import { type CradovaPageType, type browserPageType } from "./types";
 /**
  * Cradova event
  */
 declare class cradovaEvent {
-    private afterMount;
-    private beforeMountActive;
+    static refid: number;
     /**
-     *  add an event to an exhaustible list of events
      * the events runs only once and removed.
      * these event are call and removed once when when a comp is rendered to the dom
      * @param callback
      */
-    addAfterMount(callback: () => void): Promise<void>;
+    afterMount: Function[];
     /**
-     *  add an event to a list of events
      * the events runs many times.
      * these event are called before a comp is rendered to the dom
      * @param callback
      */
-    addBeforeMountActive(callback: () => void): Promise<void>;
+    beforeMountActive: Function[];
+    /**
+     * the events runs once after comps unmounts.
+     * these event are called before a comp is rendered to the dom
+     * @param callback
+     */
+    afterDeactivate: Function[];
     /**
      * Dispatch any event
      * @param eventName
      */
-    dispatchEvent(eventName: "beforeMountActive" | "afterMount"): void;
+    dispatchEvent(eventName: "beforeMountActive" | "afterMount" | "afterDeactivate"): void;
 }
 export declare const CradovaEvent: cradovaEvent;
 /**
@@ -33,6 +36,7 @@ export declare const CradovaEvent: cradovaEvent;
  *
  */
 export declare class Comp<Prop extends Record<string, any> = any> {
+    id: number;
     private component;
     private effects;
     private effectuate;
@@ -40,7 +44,7 @@ export declare class Comp<Prop extends Record<string, any> = any> {
     private published;
     private preRendered;
     private reference;
-    Signal: createSignal<any> | undefined;
+    Signal: Signal<Prop> | undefined;
     _state: Prop[];
     _state_index: number;
     test?: string;
@@ -54,7 +58,7 @@ export declare class Comp<Prop extends Record<string, any> = any> {
      * @returns () => HTMLElement
      */
     render(): any;
-    _setExtra(Extra: createSignal<any>): void;
+    _setExtra(Extra: Signal<any>): void;
     _effect(fn: () => Promise<void> | void): void;
     private effector;
     /**
@@ -78,32 +82,6 @@ export declare class lazy<Type> {
     constructor(cb: () => Promise<unknown>);
     load(): Promise<void>;
 }
-/**
- * Cradova
- * ---
- * make reference to dom elements
- */
-export declare class __raw_ref {
-    tree: Record<string, any>;
-    globalTree: Record<string, HTMLElement>;
-    /**
-     * Bind a DOM element to a reference name.
-     * @param name - The name to reference the DOM element by.
-     */
-    bindAs(name: string): __raw_ref;
-    /**
-     * Retrieve a referenced DOM element.
-     * @param name - The name of the referenced DOM element.
-     */
-    current<ElementType extends HTMLElement = HTMLElement>(name: string): ElementType;
-    /**
-     * Append a DOM element to the reference, overwriting any existing reference.
-     * @param name - The name to reference the DOM element by.
-     * @param element - The DOM element to reference.
-     */
-    _appendDomForce(name: string, Element: HTMLElement): void;
-    _appendDomForceGlobal(name: string, Element: HTMLElement): void;
-}
 /**
  *  Cradova Signal
  * ----
@@ -118,7 +96,7 @@ export declare class __raw_ref {
  * - update a cradova Comp automatically
  * @constructor initial: unknown, props: {useHistory, persist}
  */
-export declare class createSignal<Type extends Record<string, any>> {
+export declare class Signal<Type extends Record<string, any>> {
     private callback;
     private persistName;
     private actions;
@@ -134,7 +112,7 @@ export declare class createSignal<Type extends Record<string, any>> {
      * @param value - signal value
      * @returns void
      */
-    set(value: Type | ((value: Type) => Type), shouldRefRender?: boolean): void;
+    set(value: Type | ((value: Type) => Type), shouldCompRender?: boolean): void;
     /**
      *  Cradova Signal
      * ----
@@ -143,7 +121,7 @@ export declare class createSignal<Type extends Record<string, any>> {
      * @param value - value of the key
      * @returns void
      */
-    setKey<k extends keyof Type>(key: k, value: unknown, shouldRefRender?: boolean): void;
+    setKey<k extends keyof Type>(key: k, value: unknown, shouldCompRender?: boolean): void;
     /**
      *  Cradova Signal
      * ----
@@ -167,7 +145,7 @@ export declare class createSignal<Type extends Record<string, any>> {
      * @param key - string key of the action
      * @param data - data for the action
      */
-    fireAction(key: string, data?: unknown): void;
+    fireAction(key: string): void;
     /**
      * Cradova
      * ---
@@ -185,10 +163,10 @@ export declare class createSignal<Type extends Record<string, any>> {
      *
      * @param Comp component to bind to.
      */
-    bindRef(comp: Comp, binding?: {
+    bindComp(comp: Comp, binding?: {
         event?: string;
-        signalProperty: string;
-        _element_property: string;
+        signalProperty?: string;
+        _element_property?: string;
     }): void;
     /**
      *  Cradova Signal
@@ -225,12 +203,7 @@ export declare class Page {
     private _callBack;
     private _deCallBack;
     private _dropped;
-    /**
-     * error handler for the page
-     */
-    _errorHandler: ((err: unknown) => void) | null;
     constructor(cradova_page_initials: CradovaPageType);
-    set errorHandler(errorHandler: (err: unknown) => void);
     onActivate(cb: () => Promise<void> | void): void;
     onDeactivate(cb: () => Promise<void> | void): void;
     _deActivate(): Promise<void>;
@@ -252,7 +225,7 @@ export declare class Router {
      *
      * accepts an object containing pat and page
      */
-    static BrowserRoutes(obj: Record<string, Page | promisedPage>): void;
+    static BrowserRoutes(obj: Record<string, browserPageType<Page | unknown>>): void;
     /**
       Go back in Navigation history
       */
@@ -279,7 +252,7 @@ export declare class Router {
      * @param data object
      * @param force boolean
      */
-    static navigate(href: string, data?: Record<string, unknown> | null): void;
+    static navigate(href: string, data?: Record<string, any>): void;
     /**
      * Cradova
      * ---
@@ -305,7 +278,10 @@ export declare class Router {
      *
      * .
      */
-    static get Params(): any;
+    static get PageData(): {
+        params: Record<string, string>;
+        data?: Record<string, any> | undefined;
+    };
     /**
      * Cradova
      * ---
@@ -314,7 +290,7 @@ export declare class Router {
      * @param callback
      * @param path? page path
      */
-    static addErrorHandler(callback: (err: unknown) => void): void;
+    static addErrorHandler(callback: (err?: unknown, pagePath?: string) => void): void;
     static _mount(): void;
 }
 export {};

package/dist/primitives/functions.d.ts

@@ -1,5 +1,29 @@
 import { type VJS_params_TYPE } from "./types";
-import { Comp, __raw_ref } from "./classes";
+import { Comp } from "./classes";
+/**
+ * Cradova
+ * ---
+ * make reference to dom elements
+ */
+declare class __raw_ref {
+    tree: Record<string, any>;
+    /**
+     * Bind a DOM element to a reference name.
+     * @param name - The name to reference the DOM element by.
+     */
+    bindAs(name: string): __raw_ref;
+    /**
+     * Retrieve a referenced DOM element.
+     * @param name - The name of the referenced DOM element.
+     */
+    current<ElementType extends HTMLElement = HTMLElement>(name: string): ElementType | undefined;
+    /**
+     * Append a DOM element to the reference, overwriting any existing reference.
+     * @param name - The name to reference the DOM element by.
+     * @param element - The DOM element to reference.
+     */
+    _append(name: string, Element: HTMLElement): void;
+}
 export declare const makeElement: <E extends HTMLElement>(element: E & HTMLElement, ElementChildrenAndPropertyList: VJS_params_TYPE<E>) => E;
 export declare const cra: <E extends HTMLElement>(tag: string) => (...Children_and_Properties: VJS_params_TYPE<E>) => E;
 export declare function Rhoda(l: VJS_params_TYPE<HTMLElement>): DocumentFragment;
@@ -14,11 +38,6 @@ export declare function $case<E = HTMLElement>(value: any, ...elements: VJS_para
 export declare function $switch(key: unknown, ...cases: ((key: any) => any)[]): any;
 type LoopData<Type> = Type[];
 export declare function loop<Type>(datalist: LoopData<Type>, component: (value: Type, index?: number, array?: LoopData<Type>) => HTMLElement | DocumentFragment | undefined): HTMLElement[] | undefined;
-/**  Calculate a simple numerical representation of the URL */
-export declare const SNRU: {
-    snru: string;
-    memo_SNRU(): void;
-};
 /**
  * Document fragment
  * @param children
@@ -33,7 +52,7 @@ export declare const frag: (children: VJS_params_TYPE<HTMLElement>) => DocumentF
  * @param Comp
  * @returns [state, setState]
  */
-export declare function useState<S = unknown>(newState: S, Comp: Comp): [S, (newState: S) => void];
+export declare function useState<S = unknown>(newState: S, Comp: Comp<any>): [S, (newState: S | ((preS: S) => S)) => void];
 /**
  * Cradova
  * ---

package/dist/primitives/types.d.ts

@@ -1,5 +1,5 @@
 import * as CSS from "csstype";
-import { Comp, Page, __raw_ref } from "./classes";
+import { Comp, Page } from "./classes";
 type DataAttributes = {
     [key: `data-${string}`]: string;
 };
@@ -24,7 +24,7 @@ type Attributes = {
     required?: string;
     frameBorder?: string;
     placeholder?: string;
-    reference?: __raw_ref;
+    reference?: [any, string];
     autocomplete?: string;
     style?: CSS.Properties;
     recall?: (P: any) => void;
@@ -67,5 +67,5 @@ export type CradovaPageType = {
      */
     template: (this: Page) => HTMLElement;
 };
-export type promisedPage = (() => Promise<Page>);
+export type browserPageType<importType = Page> = importType | Promise<importType> | (() => Promise<importType>);
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cradova",
-  "version": "3.3.20",
+  "version": "3.3.54",
   "description": "Build Powerful ⚡ Web Apps with Ease",
   "main": "dist/index.js",
   "type": "module",