cradova 3.10.0 → 3.11.0

package/dist/index.d.ts

@@ -1,7 +1,4 @@
 export * from "./primitives/classes.js";
 export * from "./primitives/functions.js";
 export * from "./primitives/dom-objects.js";
-import type { Comp } from "./primitives/types.js";
-export type { Comp };
-export declare function clone<T extends (...args: any[]) => any>(fn: T): T;
-export declare function invoke<R>(fn: (...args: any[]) => R, args: any[]): R;
+export type { Comp } from "./primitives/types.js";

package/dist/index.js

@@ -14,10 +14,10 @@ var makeElement = (element, ElementChildrenAndPropertyList) => {
       }
       if (Array.isArray(child)) {
         if (child[1] instanceof Signal) {
-          child[1].listen([child[0]], (x) => {
+          child[1].notify([child[0]], () => {
             element.innerHTML = "";
             element.appendChild(unroll_child_list([
-              x[child[0]]
+              child[1].store[child[0]]
             ]));
           });
           element.appendChild(unroll_child_list([child[1].store[child[0]]]));
@@ -44,10 +44,8 @@ var makeElement = (element, ElementChildrenAndPropertyList) => {
         Object.assign(element.style, value);
         continue;
       }
-      if (prop === "onmount") {
-        window.CradovaEvent.after_comp_is_mounted.push(() => {
-          typeof props["onmount"] === "function" && props["onmount"].apply(element);
-        });
+      if (prop === "onmount" && typeof props["onmount"] === "function") {
+        window.CradovaEvent.after_comp_is_mounted.push(props["onmount"].bind(element));
         continue;
       }
       if (prop.includes("data-") || prop.includes("aria-")) {
@@ -63,8 +61,8 @@ var makeElement = (element, ElementChildrenAndPropertyList) => {
         if (value.length === 2 && value[1] instanceof Signal && typeof value[0] === "string") {
           const eventName = value[0];
           const signalInstance = value[1];
-          signalInstance.listen([eventName], (x) => {
-            element.setAttribute(prop, x[eventName]);
+          signalInstance.notify([eventName], () => {
+            element.setAttribute(prop, signalInstance.store[eventName]);
           });
           element.setAttribute(prop, signalInstance.store[eventName]);
           continue;
@@ -188,7 +186,7 @@ function useState(initialValue) {
     }
     if (!Object.is(currentState, nextState)) {
       self._state[idx] = nextState;
-      funcManager.recall(self);
+      funcManager.recall(self, undefined);
     }
   };
   return [self._state[idx], setState];
@@ -270,7 +268,7 @@ function useReducer(reducer, initialArg, initializer) {
     }
     if (!Object.is(currentState, nextState)) {
       currentTracker.state = nextState;
-      funcManager.recall(self);
+      funcManager.recall(self, undefined);
     }
   };
   return [tracker[idx].state, dispatch];
@@ -310,16 +308,16 @@ function initializeComponent(comp) {
   });
   return component;
 }
-var toComp = (comp) => {
+var toComp = (comp, args) => {
   const component = initializeComponent(comp);
-  return funcManager.render(component);
+  return funcManager.render(component, args);
 };
 var toCompNoRender = (comp) => {
   return initializeComponent(comp);
 };
 var funcManager = {
-  render(component) {
-    const html = component.apply(component, []);
+  render(component, args) {
+    const html = component.apply(component, args);
     if (html instanceof HTMLElement) {
       component.reference = html;
       component.rendered = true;
@@ -332,14 +330,16 @@ var funcManager = {
       return;
     }
   },
-  recall(component) {
+  recall(component, args) {
     if (component.rendered && component.published) {
       setTimeout(() => {
-        this.activate(component);
+        this.activate(component, args);
       }, 0);
     }
+    window.CradovaEvent.dispatchEvent("after_page_is_killed");
+    window.CradovaEvent.dispatchEvent("after_comp_is_mounted");
   },
-  activate(component) {
+  activate(component, args) {
     component.published = false;
     if (!component.rendered || !component.reference) {
       return;
@@ -347,7 +347,7 @@ var funcManager = {
     const node = component.reference;
     if (document.body.contains(node)) {
       initializeComponent(component);
-      const newHtml = component.apply(component);
+      const newHtml = component.apply(component, args);
       if (newHtml instanceof HTMLElement) {
         node.replaceWith(newHtml);
         node.insertAdjacentElement("beforebegin", newHtml);
@@ -425,11 +425,17 @@ var List = (signal, item, options) => {
     style: options?.style
   }, {
     onmount() {
-      new VirtualList(this, signal, item);
+      const vl = new VirtualList(this, signal, item);
+      return () => {
+        vl.destroy();
+      };
     }
   });
   return list;
 };
+function invoke(fn, args) {
+  return toComp(fn, args);
+}
 
 // src/primitives/dom-objects.ts
 var a = cra("a");
@@ -494,7 +500,7 @@ class cradovaEvent {
     const eventListeners = this[eventName];
     while (eventListeners.length !== 0) {
       const en_cb = await eventListeners.shift()();
-      if (en_cb) {
+      if (typeof en_cb === "function") {
         this.after_page_is_killed.push(en_cb);
       }
     }
@@ -599,9 +605,8 @@ class List2 {
 
 class Signal {
   pn;
-  subs = {};
   isList = false;
-  listening_subs = {};
+  subscribers = {};
   store;
   passers;
   constructor(initial, props) {
@@ -618,7 +623,6 @@ class Signal {
         this.publish(eventType);
       });
     }
-    this.subs = {};
     if (props && props.persistName) {
       this.pn = props.persistName;
       const key = localStorage.getItem(props.persistName);
@@ -638,11 +642,19 @@ class Signal {
     }
   }
   publish(eventName) {
-    this.subs[eventName]?.forEach((c) => {
-      funcManager.recall(c);
+    this.subscribers[eventName]?.forEach((c) => {
+      if (c.published) {
+        funcManager.recall(c, undefined);
+      } else {
+        c();
+      }
     });
-    this.listening_subs[eventName]?.forEach((c) => {
-      c(this.store);
+    this.subscribers["__ALL__"]?.forEach((c) => {
+      if (c.published) {
+        funcManager.recall(c, undefined);
+      } else {
+        c();
+      }
     });
     if (this.pn) {
       localStorage.setItem(this.pn, JSON.stringify(this.isList ? this.store.items : this.store.$_internal_data));
@@ -651,81 +663,96 @@ class Signal {
   set(NEW) {
     const s = new Set;
     const events = this.store._set(NEW);
-    const s2 = new Set;
     for (const event of events) {
-      const subs = this.subs[event];
-      if (subs) {
-        subs.forEach((c) => {
-          s.add(c);
-        });
-      }
-      const subs2 = this.listening_subs[event];
+      const subs2 = this.subscribers[event];
       if (subs2) {
         for (const fn of subs2) {
-          s2.add(fn);
+          s.add(fn);
         }
       }
     }
+    if (this.subscribers["__ALL__"]) {
+      for (const fn of this.subscribers["__ALL__"]) {
+        s.add(fn);
+      }
+    }
     for (const c of s.values()) {
-      funcManager.recall(c);
+      if (c.published) {
+        funcManager.recall(c, undefined);
+      } else {
+        c();
+      }
     }
-    for (const fn of s2.values())
-      fn(events);
     if (this.pn) {
       localStorage.setItem(this.pn, JSON.stringify(this.isList ? this.store.items : this.store.$_internal_data));
     }
   }
-  subscribe(eventName, comp) {
-    if (typeof comp === "function") {
-      if (Array.isArray(eventName)) {
-        eventName.forEach((en) => {
-          this.subscribe(en, comp);
-        });
-        return;
-      }
-      if (!comp.published) {
-        if (!isArrowFunc(comp)) {
-          comp = toCompNoRender(comp);
-        } else {
-          console.error(` ✘  Cradova err:  ${String(comp)} is not a valid component or function`);
-          return;
-        }
-      }
-      if (comp.published)
-        return;
-      if (!(eventName in this.store)) {
-        console.error(` ✘  Cradova err:  ${String(eventName)} is not a valid event for this Signal`);
-        return;
-      }
-      if (!this.subs[eventName]) {
-        this.subs[eventName] = new Set([comp]);
+  notify(eventName, listener) {
+    if (!eventName) {
+      console.error(` ✘  Cradova err:  eventName ${String(eventName)} or listener ${String(listener)} is not a valid event name or function`);
+      return;
+    }
+    if (typeof eventName === "function") {
+      listener = eventName;
+      if (this.isList) {
+        eventName = ["dataChanged", "itemUpdated"];
       } else {
-        this.subs[eventName].add(comp);
+        eventName = Object.keys(this.store);
       }
-    } else {
-      console.error(` ✘  Cradova err:  ${comp} is not a valid component`);
     }
-  }
-  listen(eventName, listener) {
+    if (typeof listener !== "function" || !eventName) {
+      console.error(` ✘  Cradova err: listener or eventName ${String(listener)} is not a valid listener function or string`);
+      return;
+    }
     if (Array.isArray(eventName)) {
       eventName.forEach((en) => {
-        this.listen(en, listener);
+        this.notify(en, listener);
       });
       return;
     }
-    if (!this.listening_subs[eventName]) {
-      this.listening_subs[eventName] = [];
+    if (!this.subscribers[eventName]) {
+      this.subscribers[eventName] = [];
     }
-    this.listening_subs[eventName].push(listener);
+    if (!isArrowFunc(listener)) {
+      listener = toCompNoRender(listener);
+    }
+    this.subscribers[eventName].push(listener);
   }
   computed(eventName, element) {
-    let el = element(this.store);
+    if (!eventName) {
+      console.error(` ✘  Cradova err:  eventName ${String(eventName)} or element ${String(element)} is not a valid event name or function`);
+      return;
+    }
+    if (typeof eventName === "function") {
+      element = eventName;
+      if (this.isList) {
+        eventName = "__ALL__";
+      } else {
+        eventName = "__ALL__";
+      }
+    }
+    const isComp = !isArrowFunc(element);
+    let el;
+    if (isComp) {
+      el = toComp(element);
+    } else {
+      el = element?.();
+    }
     if (el === undefined || !(el instanceof HTMLElement)) {
       console.error(` ✘  Cradova err:  ${String(element)} is not a valid element or function`);
       return;
     }
     const listener = () => {
-      const newEl = element(this.store);
+      if (!document.body.contains(listener.element)) {
+        this.subscribers[eventName].splice(listener.idx, 1);
+        return;
+      }
+      let newEl;
+      if (isComp) {
+        newEl = toComp(element);
+      } else {
+        newEl = element?.();
+      }
       if (newEl === undefined || !(newEl instanceof HTMLElement)) {
         console.error(` ✘  Cradova err:  ${String(element)} is not a valid element or function`);
         return;
@@ -735,16 +762,11 @@ class Signal {
       listener.element = newEl;
     };
     listener.element = el;
-    if (Array.isArray(eventName)) {
-      eventName.forEach((en) => {
-        this.listen(en, listener);
-      });
-      return el;
-    }
-    if (!this.listening_subs[eventName]) {
-      this.listening_subs[eventName] = [];
+    if (!this.subscribers[eventName]) {
+      this.subscribers[eventName] = [];
     }
-    this.listening_subs[eventName].push(listener);
+    listener.idx = this.subscribers[eventName].length;
+    this.subscribers[eventName].push(listener);
     return el;
   }
   get pass() {
@@ -1042,16 +1064,19 @@ class VirtualList {
   renderItem;
   renderScheduled;
   container;
+  idxs = [];
   constructor(container, dataStore, renderItemFunction) {
     this.dataStore = dataStore;
     this.renderItem = renderItemFunction;
     this.renderScheduled = false;
     this.container = container;
     this.scheduleRender();
-    this.dataStore.listen("dataChanged", () => {
+    this.idxs.push(dataStore.subscribers["dataChanged"]?.length || 0);
+    this.dataStore.notify("dataChanged", () => {
       this.scheduleRender();
     });
-    this.dataStore.listen("itemUpdated", () => {
+    this.idxs.push(dataStore.subscribers["itemUpdated"]?.length || 0);
+    this.dataStore.notify("itemUpdated", () => {
       this.scheduleRender();
     });
   }
@@ -1091,16 +1116,16 @@ class VirtualList {
     }
     this.renderScheduled = false;
   }
-}
-
-// src/index.ts
-function clone(fn) {
-  return function(...args) {
-    return fn.apply(this, args);
-  };
-}
-function invoke(fn, args) {
-  return fn.apply(null, args);
+  destroy() {
+    this.renderItem = null;
+    this.container.innerHTML = "";
+    this.container = null;
+    this.renderScheduled = false;
+    this.dataStore.subscribers["dataChanged"].splice(this.idxs[0], 1);
+    this.dataStore.subscribers["itemUpdated"].splice(this.idxs[1], 1);
+    this.idxs.length = 0;
+    this.dataStore = null;
+  }
 }
 export {
   video,
@@ -1146,7 +1171,6 @@ export {
   div,
   cradovaEvent,
   cra,
-  clone,
   canvas,
   button,
   audio,

package/dist/primitives/classes.d.ts

@@ -1,4 +1,4 @@
-import type { browserPageType, Comp, CradovaPageType, VJS_params_TYPE } from "./types.js";
+import type { browserPageType, Comp, CradovaPageType } from "./types.js";
 declare class List<Type extends any[]> {
     notifier: (eventType: "dataChanged" | "itemUpdated", newItemData: Type[number]) => void;
     constructor(initialData: Type, notifier: (eventType: "dataChanged" | "itemUpdated", newItemData: Type[number]) => void);
@@ -21,10 +21,6 @@ declare class List<Type extends any[]> {
  * @constructor initial: Record<string, any>, props: {persist}
  */
 export declare class Signal<Type = any> {
-    private pn?;
-    private subs;
-    private isList;
-    private listening_subs;
     store: Type extends Array<any> ? List<Type> : Type extends Record<string, any> ? Type : never;
     passers?: Record<keyof Type, [string, Signal<Type>]>;
     constructor(initial: Type, props?: {
@@ -36,15 +32,6 @@ export declare class Signal<Type = any> {
      *  fires actions if any available
      */
     set(NEW: Type): void;
-    /**
-     *  Cradova Signal
-     * ----
-     *  subscribe to an event
-     *
-     * @param name of event.
-     * @param Comp component to bind to.
-     */
-    subscribe<T extends keyof Type>(eventName: T | "dataChanged" | "itemUpdated" | T[], comp: Comp | ((this: Comp) => HTMLDivElement)): void;
     /**
      *  Cradova Signal
      * ----
@@ -53,8 +40,8 @@ export declare class Signal<Type = any> {
      * @param name of event.
      * @param callback function to call.
      */
-    listen<T extends keyof Type>(eventName: T | "dataChanged" | "itemUpdated" | T[], listener: (store: Type extends Array<any> ? List<Type> : Type extends Record<string, any> ? Type : never) => void): void;
-    computed<T extends keyof Type>(eventName: T | "dataChanged" | "itemUpdated" | T[], element: (store: Type extends Array<any> ? List<Type> : Type extends Record<string, any> ? Type : never) => HTMLElement | VJS_params_TYPE<HTMLElement>): HTMLElement | undefined;
+    notify<T extends keyof Type>(eventName: (T | "dataChanged" | "itemUpdated" | T[]) | (() => HTMLElement | void) | Comp | ((this: Comp) => HTMLElement), listener?: (() => HTMLElement | void) | Comp | ((this: Comp) => HTMLElement)): void;
+    computed<T extends keyof Type>(eventName: (T | "dataChanged" | "itemUpdated") | (() => HTMLElement) | Comp | ((this: Comp) => HTMLElement), element?: (() => HTMLElement) | Comp | ((this: Comp) => HTMLElement)): HTMLElement | undefined;
     /**
      *  Cradova Signal
      * ----
@@ -161,6 +148,7 @@ export declare class __raw_ref<T = unknown> {
     bind(name: string): [__raw_ref<T>, string];
 }
 export declare class VirtualList {
+    idxs: number[];
     constructor(container: HTMLElement, dataStore: Signal<any[]>, renderItemFunction: (item: any, index: number) => HTMLElement);
 }
 export {};

package/dist/primitives/functions.d.ts

@@ -19,12 +19,12 @@ export declare function loop<Type>(datalist: LoopData<Type>, component: (value:
  */
 export declare const fragment: (children: VJS_params_TYPE<HTMLElement>) => DocumentFragment;
 export declare const isArrowFunc: (fn: Function) => boolean;
-export declare const toComp: (comp: Comp) => HTMLElement | undefined;
+export declare const toComp: (comp: Comp, args?: any[]) => HTMLElement | undefined;
 export declare const toCompNoRender: (comp: Comp) => Comp;
 export declare const funcManager: {
-    render(component: Comp): HTMLElement | undefined;
-    recall(component: Comp): void;
-    activate(component: Comp): void;
+    render(component: Comp, args: any[] | undefined): HTMLElement | undefined;
+    recall(component: Comp, args: any[] | undefined): void;
+    activate(component: Comp, args: any[] | undefined): void;
     /**
      * @internal
      */
@@ -39,4 +39,11 @@ export declare const List: <T>(signal: Signal<T[]>, item: (item: T) => HTMLEleme
     id?: string;
     style?: Partial<CSS.Properties>;
 }) => HTMLDivElement;
+/**
+ * Invokes a function with the provided arguments.
+ * @param fn - The function to invoke.
+ * @param args - The arguments to pass to the function.
+ * @returns The result of the function invocation, which is expected to be an HTMLElement.
+ */
+export declare function invoke(fn: (...args: any[]) => HTMLElement, args: any[]): HTMLElement | undefined;
 export {};

package/package.json

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