cradova 3.3.35 → 3.3.54

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,8 @@ class Comp {
   test;
   constructor(component) {
     this.component = component.bind(this);
+    cradovaEvent.refid += 1;
+    this.id = cradovaEvent.refid;
   }
   preRender() {
     this.preRendered = this.render();
@@ -62,6 +61,9 @@ class Comp {
     }
   }
   _setExtra(Extra) {
+    if (this.Signal) {
+      Extra.value = this.Signal.value;
+    }
     this.Signal = Extra;
   }
   _effect(fn) {
@@ -71,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) {
@@ -88,7 +93,9 @@ class Comp {
       };
     } else {
       if (this.published) {
-        this.activate();
+        setTimeout(() => {
+          this.activate();
+        });
       }
     }
   }
@@ -98,23 +105,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 +144,7 @@ class lazy {
   }
 }
 
-class createSignal {
+class Signal {
   callback;
   persistName = "";
   actions = {};
@@ -162,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`);
     }
@@ -238,16 +243,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 +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;
   }
@@ -316,6 +319,7 @@ class Page {
       behavior: "instant"
     });
     this._callBack && await this._callBack();
+    CradovaEvent.dispatchEvent("afterDeactivate");
   }
 }
 
@@ -328,7 +332,7 @@ class RouterBoxClass {
   pageHide = null;
   errorHandler;
   loadingPage = null;
-  params = {};
+  pageData = { params: {} };
   routes = {};
   pageevents = [];
   paused = false;
@@ -340,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;
@@ -375,7 +377,7 @@ class RouterBoxClass {
           }
         }
         if (params) {
-          this.params.params = params;
+          this.pageData.params = params;
         }
         await route._activate();
         this.start_pageevents(url);
@@ -383,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 {
@@ -415,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) {
@@ -444,7 +441,7 @@ class RouterBoxClass {
                 routesParams[pathFixtures[i].split(":")[1]] = urlFixtures[i];
               }
             }
-            return [this.routes[path], { param: routesParams }];
+            return [this.routes[path], routesParams];
           }
         }
       }
@@ -463,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);
@@ -490,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");
     }
@@ -503,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);
     }
   }
@@ -519,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") {
@@ -702,8 +699,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 +708,7 @@ var makeElement = (element, ElementChildrenAndPropertyList) => {
         }
       }
       if (prop === "onmount") {
-        CradovaEvent.addAfterMount(() => {
+        CradovaEvent.afterMount.push(() => {
           typeof props["onmount"] === "function" && props["onmount"].apply(element);
         });
         continue;
@@ -875,7 +872,6 @@ export {
   dialog,
   details,
   datalist,
-  createSignal,
   cra,
   caption,
   canvas,
@@ -883,6 +879,7 @@ export {
   br,
   audio,
   a,
+  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 {
-    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;
 /**
@@ -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;
     /**
@@ -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
@@ -199,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>;
@@ -226,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
       */
@@ -253,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
      * ---
@@ -279,7 +278,10 @@ export declare class Router {
      *
      * .
      */
-    static get Params(): any;
+    static get PageData(): {
+        params: Record<string, string>;
+        data?: Record<string, any> | undefined;
+    };
     /**
      * Cradova
      * ---
@@ -288,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

@@ -52,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 | ((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.54",
   "description": "Build Powerful ⚡ Web Apps with Ease",
   "main": "dist/index.js",
   "type": "module",