cradova 3.3.35 → 3.3.55

package/README.md

@@ -1,12 +1,12 @@
 <br/>
 <p align="center">
   <a href="https://github.com/uiedbook/cradova">
-    <img src="cradova.png" alt="Logo" width="80" height="80">
+    <img src="icon.png" alt="Logo" width="80" height="80">
   </a>
 
-  <h1 align="center">Cradova</h1>
+<h1 align="center">Cradova</h1>
 
-  <p align="center">
+<p align="center">
 Build Powerful ⚡ Web Apps with Ease
     <br/>
     <br/>
@@ -21,11 +21,15 @@ Build Powerful ⚡ Web Apps with Ease
   </p>
 </p>
 
-![Contributors](https://img.shields.io/github/contributors/uiedbook/cradova?color=dark-green) ![Issues](https://img.shields.io/github/issues/uiedbook/cradova) ![License](https://img.shields.io/github/license/uiedbook/cradova)
+![Contributors](https://img.shields.io/github/contributors/uiedbook/cradova?color=dark-green)
+![Issues](https://img.shields.io/github/issues/uiedbook/cradova)
+![License](https://img.shields.io/github/license/uiedbook/cradova)
 [![npm Version](https://img.shields.io/npm/v/cradova.svg)](https://www.npmjs.com/package/cradova)
 [![License](https://img.shields.io/npm/l/cradova.svg)](https://github.com/cradova/cradova.js/blob/next/LICENSE)
 [![npm Downloads](https://img.shields.io/npm/dm/cradova.svg)](https://www.npmjs.com/package/cradova)
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/cradova/cradova.js/blob/next/contributing.md)![Forks](https://img.shields.io/github/forks/uiedbook/cradova?style=social) ![Stargazers](https://img.shields.io/github/stars/uiedbook/cradova?style=social)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/cradova/cradova.js/blob/next/contributing.md)
+![Forks](https://img.shields.io/github/forks/uiedbook/cradova?style=social)
+![Stargazers](https://img.shields.io/github/stars/uiedbook/cradova?style=social)
 
 # Cradova is 3
 
@@ -48,13 +52,13 @@ document.body.appendChild(Cradova.render());
 ## 2023 - What's New? Conditionals!
 
 ```js
-import { div, h1, $if, $ifelse, $case, $switch } from "cradova";
+import { $case, $if, $ifelse, $switch, div, h1 } from "cradova";
 
 function Hello({ name }) {
   return div(
     $if(name === "john", h1("Hello john")),
     $if(name === "paul", h1("Goodbye paul")),
-    $ifelse(name === "john", h1("Hello john"), h1("Hello Paul"))
+    $ifelse(name === "john", h1("Hello john"), h1("Hello Paul")),
   );
 }
 
@@ -66,8 +70,8 @@ function whatsAllowed({ age }) {
       age,
       $case(12, h1("too young")),
       $case(26, h1("you are welcome")),
-      $case(52, h1("too old"))
-    )
+      $case(52, h1("too old")),
+    ),
   );
 }
 
@@ -86,16 +90,18 @@ document.body.append(html, whatsAllowed({ age: 26 }));
 
 ## What is Cradova?
 
-Cradova is a web development framework for building Single Page Applications and PWAs.
+Cradova is a web development framework for building Single Page Applications and
+PWAs.
 
-Cradova follows the [VJS specification](https://github.com/uiedbook/cradova/blob/main/VJS_spec/specification.md)
+Cradova follows the
+[VJS specification](https://github.com/uiedbook/cradova/blob/main/VJS_spec/specification.md)
 
 ## What's the benefit?
 
 Fast and simple with and fewer abstractions and yet easily composable.
 
-Cradova is not built on virtual DOM or diff algorithms.
-Instead, State management is done in a way that is simple, easy and fast.
+Cradova is not built on virtual DOM or diff algorithms. Instead, State
+management is done in a way that is simple, easy and fast.
 
 ## Is this a big benefit?
 
@@ -122,7 +128,8 @@ npm i cradova
 
 ## Examples
 
-Some aspects of Cradova are not reflected in the following example. More functionality will be entailed in future docs.
+Some aspects of Cradova are not reflected in the following example. More
+functionality will be entailed in future docs.
 
 ## A basic component in Cradova:
 
@@ -149,13 +156,13 @@ This a collection of basic examples that can give you some ideas
 
 ```js
 import {
+  br,
   button,
-  createSignal,
   Comp,
-  reference,
-  h1,
-  br,
+  createSignal,
   div,
+  h1,
+  reference,
   useRef,
 } from "cradova";
 
@@ -205,7 +212,7 @@ function typingExample() {
       },
       placeholder: "typing simulation",
     }),
-    p(" no thing typed yet!", { reference: ref.bindAs("text") })
+    p(" no thing typed yet!", { reference: ref.bindAs("text") }),
   );
 }
 
@@ -223,15 +230,15 @@ Let's see a simple TodoList example
 ```js
 import {
   button,
+  Comp,
   createSignal,
-  useState,
   div,
+  h1,
   input,
   main,
   p,
-  Comp,
-  h1,
   useRef,
+  useState,
 } from "../dist/index.js";
 
 function TodoList() {
@@ -271,13 +278,13 @@ function TodoList() {
         onclick() {
           todoStore.fireAction(
             "add-todo",
-            referenceSet.current("todoInput").value
+            referenceSet.current("todoInput").value,
           );
           referenceSet.current("todoInput").value = "";
         },
-      })
+      }),
     ),
-    todoList.render
+    todoList.render,
   );
 }
 
@@ -291,7 +298,7 @@ const todoList = new Comp(function () {
           self.Signal.fireAction("remove-todo", item);
         },
       })
-    )
+    ),
   );
 });
 document.body.appendChild(TodoList());
@@ -299,16 +306,14 @@ document.body.appendChild(TodoList());
 
 ## working with page and Router:
 
-Unlike just appending stuff to the DOM,
-a better to build apps is to use a routing system.
+Unlike just appending stuff to the DOM, a better to build apps is to use a
+routing system.
 
 Cradova Router is a module that allows you do the following:
 
-Create specified routes in you application
-help you handle navigation
-render a page on a route
-listen to Navigation changes
-create error boundary at page level apart from Comp level.
+Create specified routes in you application help you handle navigation render a
+page on a route listen to Navigation changes create error boundary at page level
+apart from Comp level.
 
 let's try an example.
 
@@ -372,7 +377,8 @@ if it already exist Cradova will use it instead.
 
 Cradova will create a div with data-wrapper="app" if it doesn't exists already.
 
-so if you want to use your own mount point then create a div with data-wrapper="app".
+so if you want to use your own mount point then create a div with
+data-wrapper="app".
 
 ---
 
@@ -380,13 +386,10 @@ More info on Cradova pages
 
 ---
 
-Cradova pages has
-onActivate() and
-onDeactivate() methods which is also available in the
-component function on the this variable bound to it.
+Cradova pages has onActivate() and onDeactivate() methods which is also
+available in the component function on the this variable bound to it.
 
-this allow you manage rendering
-circle for each page in your app
+this allow you manage rendering circle for each page in your app
 
 ---
 
@@ -402,8 +405,7 @@ Cradova Comp is a dynamic component class, which ships simple abstractions like:
 - useRef
 - preRender
 
-these behaviors allow you manage rendering
-circle for Comps in your app
+these behaviors allow you manage rendering circle for Comps in your app
 
 ---
 
@@ -422,19 +424,27 @@ with ability to:
 - persist changes to localStorage
 - update a Comp and bindings automatically
 
-With these simple and easy abstractions, you can write datastores with so much convenience.
+With these simple and easy abstractions, you can write datastores with so much
+convenience.
 
 ## Documentation
 
-At the moment, we're in the process of creating a documentation website for Cradova, and we have limited resources. If you're interested in lending a hand, we invite you to join our community, gain firsthand experience, and contribute to the advancement of Cradova.
+At the moment, we're in the process of creating a documentation website for
+Cradova, and we have limited resources. If you're interested in lending a hand,
+we invite you to join our community, gain firsthand experience, and contribute
+to the advancement of Cradova.
 
 ## Getting Help
 
-To get further insights and help on Cradova, visit the [Discord](https://discord.gg/b7fvMg38) and [Telegram](https://t.me/uiedbookHQ) Community Chats.
+To get further insights and help on Cradova, visit the
+[Discord](https://discord.gg/b7fvMg38) and [Telegram](https://t.me/uiedbookHQ)
+Community Chats.
 
 ## Contributing
 
-We are currently working to [set](https://github.com/uiedbook/cradova/blob/main/contributing.md) up the following:
+We are currently working to
+[set](https://github.com/uiedbook/cradova/blob/main/contributing.md) up the
+following:
 
 - building Cradova CLI (in progress)
 - Cradova Documentation Website
@@ -443,12 +453,12 @@ We are currently working to [set](https://github.com/uiedbook/cradova/blob/main/
 - maintenance and promotion
 
 ```
-    ██████╗   ██████╗    █████═╗   ███████╗    ███████╗    ██╗   ██╗  █████╗
-   ██╔════╝   ██╔══██╗  ██╔═╗██║   █      ██  ██╔═════╝█   ██║   ██║  ██╔═╗██
-   ██║        ██████╔╝  ███████║   █      ██  ██║     ██   ██║   ██║  ██████╗
-   ██║        ██╔══██╗  ██║  ██║   █      ██  ██║     ██   ╚██╗ ██╔╝  ██║  ██╗
-   ╚██████╗   ██║  ██║  ██║  ██║   ███████╔╝   ████████      ╚███╔╝   ██║  ██║
-    ╚═════╝   ╚═╝  ╚═╝  ╚═╝  ╚═╝   ╚══════╝     ╚════╝        ╚══╝    ╚═╝  ╚═╝
+ ██████╗   ██████╗    █████═╗   ███████╗    ███████╗    ██╗   ██╗  █████╗
+██╔════╝   ██╔══██╗  ██╔═╗██║   █      ██  ██╔═════╝█   ██║   ██║  ██╔═╗██
+██║        ██████╔╝  ███████║   █      ██  ██║     ██   ██║   ██║  ██████╗
+██║        ██╔══██╗  ██║  ██║   █      ██  ██║     ██   ╚██╗ ██╔╝  ██║  ██╗
+╚██████╗   ██║  ██║  ██║  ██║   ███████╔╝   ████████      ╚███╔╝   ██║  ██║
+ ╚═════╝   ╚═╝  ╚═╝  ╚═╝  ╚═╝   ╚══════╝     ╚════╝        ╚══╝    ╚═╝  ╚═╝
 ```
 
 ## Apache Lincenced
@@ -459,12 +469,16 @@ Join Us on [telegram](https://t.me/UiedbookHQ).
 
 ### Contribution and License Agreement
 
-If you contribute code to this project, you are implicitly allowing your code to be distributed under same license. You are also implicitly verifying that all code is your original work.
+If you contribute code to this project, you are implicitly allowing your code to
+be distributed under same license. You are also implicitly verifying that all
+code is your original work.
 
 ## Supporting Cradova development
 
-Your Support is a good force for change anytime you do it, you can ensure Our projects, growth, Cradova, Cradova, JetPath etc, growth and improvement by making a re-occuring or fixed sponsorship
-to [github sponsors](https://github.com/sponsors/FridayCandour):
+Your Support is a good force for change anytime you do it, you can ensure Our
+projects, growth, Cradova, Cradova, JetPath etc, growth and improvement by
+making a re-occuring or fixed sponsorship to
+[github sponsors](https://github.com/sponsors/FridayCandour):
 
 Support via cryptos -
 

package/dist/index.js

@@ -1,13 +1,9 @@
 // src/primitives/classes.ts
 class cradovaEvent {
+  static refid = 0;
   afterMount = [];
   beforeMountActive = [];
-  async addAfterMount(callback) {
-    this.afterMount.push(callback);
-  }
-  async addBeforeMountActive(callback) {
-    this.beforeMountActive.push(callback);
-  }
+  afterDeactivate = [];
   dispatchEvent(eventName) {
     const eventListeners = this[eventName];
     if (eventName.includes("Active")) {
@@ -24,6 +20,7 @@ class cradovaEvent {
 var CradovaEvent = new cradovaEvent;
 
 class Comp {
+  id;
   component;
   effects = [];
   effectuate = null;
@@ -37,6 +34,11 @@ class Comp {
   test;
   constructor(component) {
     this.component = component.bind(this);
+    cradovaEvent.refid += 1;
+    this.id = cradovaEvent.refid;
+  }
+  clone() {
+    return new Comp(this.component);
   }
   preRender() {
     this.preRendered = this.render();
@@ -62,6 +64,9 @@ class Comp {
     }
   }
   _setExtra(Extra) {
+    if (this.Signal) {
+      Extra.value = this.Signal.value;
+    }
     this.Signal = Extra;
   }
   _effect(fn) {
@@ -71,7 +76,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) {
@@ -88,7 +96,9 @@ class Comp {
       };
     } else {
       if (this.published) {
-        this.activate();
+        setTimeout(() => {
+          this.activate();
+        });
       }
     }
   }
@@ -98,23 +108,21 @@ class Comp {
       return;
     }
     this._state_index = 0;
-    const html = this.component();
-    if (html instanceof HTMLElement) {
-      const node = this.reference;
-      if (node) {
+    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 = 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;
     }
   }
 }
@@ -139,7 +147,7 @@ class lazy {
   }
 }
 
-class createSignal {
+class Signal {
   callback;
   persistName = "";
   actions = {};
@@ -162,34 +170,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`);
     }
@@ -238,16 +246,18 @@ class createSignal {
       ent.comp.recall();
     }
   }
-  bindRef(comp, binding = { signalProperty: "", _element_property: "" }) {
+  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) {
@@ -267,16 +277,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;
   }
@@ -316,6 +322,7 @@ class Page {
       behavior: "instant"
     });
     this._callBack && await this._callBack();
+    CradovaEvent.dispatchEvent("afterDeactivate");
   }
 }
 
@@ -328,7 +335,7 @@ class RouterBoxClass {
   pageHide = null;
   errorHandler;
   loadingPage = null;
-  params = {};
+  pageData = { params: {} };
   routes = {};
   pageevents = [];
   paused = false;
@@ -340,16 +347,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;
@@ -375,7 +380,7 @@ class RouterBoxClass {
           }
         }
         if (params) {
-          this.params.params = params;
+          this.pageData.params = params;
         }
         await route._activate();
         this.start_pageevents(url);
@@ -383,15 +388,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 {
@@ -415,7 +415,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) {
@@ -444,7 +444,7 @@ class RouterBoxClass {
                 routesParams[pathFixtures[i].split(":")[1]] = urlFixtures[i];
               }
             }
-            return [this.routes[path], { param: routesParams }];
+            return [this.routes[path], routesParams];
           }
         }
       }
@@ -463,11 +463,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);
@@ -490,7 +490,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");
     }
@@ -503,8 +503,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);
     }
   }
@@ -519,11 +519,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") {
@@ -702,8 +702,8 @@ var makeElement = (element, ElementChildrenAndPropertyList) => {
           value[0]._append(value[1], element);
           continue;
         }
-        if (value[0] instanceof createSignal) {
-          value[0].bindRef(element, {
+        if (value[0] instanceof Signal) {
+          value[0].bindComp(element, {
             _element_property: prop,
             signalProperty: value[1]
           });
@@ -711,7 +711,7 @@ var makeElement = (element, ElementChildrenAndPropertyList) => {
         }
       }
       if (prop === "onmount") {
-        CradovaEvent.addAfterMount(() => {
+        CradovaEvent.afterMount.push(() => {
           typeof props["onmount"] === "function" && props["onmount"].apply(element);
         });
         continue;
@@ -875,7 +875,6 @@ export {
   dialog,
   details,
   datalist,
-  createSignal,
   cra,
   caption,
   canvas,
@@ -883,6 +882,7 @@ export {
   br,
   audio,
   a,
+  Signal,
   Router,
   Rhoda,
   Page,

package/dist/primitives/classes.d.ts

@@ -1,38 +1,41 @@
-import { type CradovaPageType, type promisedPage } from "./types";
+import { type browserPageType, type CradovaPageType } from "./types";
 /**
  * Cradova event
  */
 declare class cradovaEvent {
-    afterMount: Function[];
-    beforeMountActive: Function[];
+    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;
 /**
  * Cradova Comp
  * -------
  * create dynamic components
- *
  */
 export declare class Comp<Prop extends Record<string, any> = any> {
+    id: number;
     private component;
     private effects;
     private effectuate;
@@ -40,11 +43,12 @@ 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;
     constructor(component: (this: Comp<Prop>) => HTMLElement);
+    clone(): Comp<Prop>;
     preRender(): void;
     /**
      * Cradova Comp
@@ -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;
     /**
@@ -92,7 +96,7 @@ export declare class lazy<Type> {
  * - 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;
@@ -108,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
      * ----
@@ -117,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
      * ----
@@ -159,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
@@ -175,7 +179,6 @@ export declare class createSignal<Type extends Record<string, any>> {
      *  Cradova Signal
      * ----
      * clear the history on local storage
-     *
      */
     clearPersist(): void;
 }
@@ -199,12 +202,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>;
@@ -226,7 +224,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
       */
@@ -253,7 +251,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
      * ---
@@ -279,7 +277,10 @@ export declare class Router {
      *
      * .
      */
-    static get Params(): any;
+    static get PageData(): {
+        params: Record<string, string>;
+        data?: Record<string, any>;
+    };
     /**
      * Cradova
      * ---
@@ -288,7 +289,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

@@ -28,7 +28,6 @@ export declare const makeElement: <E extends HTMLElement>(element: E & HTMLEleme
 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;
 /**
- *
  * @param {expression} condition
  * @param {function} elements[]
  */
@@ -52,7 +51,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 | ((preS: S) => 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.35",
+  "version": "3.3.55",
   "description": "Build Powerful ⚡ Web Apps with Ease",
   "main": "dist/index.js",
   "type": "module",