cradova 3.9.0 → 3.10.0

package/dist/index.js

@@ -503,18 +503,18 @@ class cradovaEvent {
 window.CradovaEvent = new cradovaEvent;
 
 class Store {
-  _data;
+  $_internal_data;
   constructor(data, notifier) {
-    this._data = data;
-    for (const key in this._data) {
-      if (this._data.hasOwnProperty(key)) {
+    this.$_internal_data = data;
+    for (const key in this.$_internal_data) {
+      if (this.$_internal_data.hasOwnProperty(key)) {
         Object.defineProperty(this, key, {
           get() {
-            return this._data[key];
+            return this.$_internal_data[key];
           },
           set(value) {
+            this.$_internal_data[key] = value;
             notifier(key, value);
-            this._data[key] = value;
           },
           enumerable: true,
           configurable: true
@@ -522,39 +522,22 @@ class Store {
       }
     }
   }
-  _set(key, value) {
-    this._data[key] = value;
+  _set(data) {
+    this.$_internal_data = data;
+    return Object.keys(this.$_internal_data);
   }
 }
 
 class List2 {
   _data;
   _dirtyIndices;
-  _subscribers;
   notifier;
   constructor(initialData, notifier) {
     this._data = initialData || [];
     this._dirtyIndices = new Set;
     this.notifier = notifier;
-    this._subscribers = {
-      dataChanged: [],
-      itemUpdated: []
-    };
     this._dirtyIndices.add("all");
   }
-  _publish(eventType, payload) {
-    const subs = this._subscribers[eventType];
-    if (subs) {
-      for (let i2 = 0;i2 < subs.length; i2++) {
-        subs[i2](payload);
-      }
-    }
-  }
-  _subscribe(eventType, callback) {
-    if (this._subscribers[eventType]) {
-      this._subscribers[eventType].push(callback);
-    }
-  }
   get items() {
     return {
       [Symbol.iterator]: () => {
@@ -579,7 +562,6 @@ class List2 {
       this._data[index] = newItemData;
       this._dirtyIndices.add(index);
       this.notifier("itemUpdated", { index, newItemData });
-      this._publish("itemUpdated", { index, newItemData });
     }
   }
   push(itemData, index) {
@@ -589,30 +571,28 @@ class List2 {
     this._data.splice(index, 0, itemData);
     this._dirtyIndices.add("all");
     this.notifier("dataChanged", { type: "add", index });
-    this._publish("dataChanged", { type: "add", index });
   }
   remove(index, count = 1) {
     if (index >= 0 && index < this._data.length && count > 0) {
       this._data.splice(index, count);
       this._dirtyIndices.add("all");
-      this._publish("dataChanged", { type: "remove", index });
+      this.notifier("dataChanged", { type: "remove", index });
     }
   }
-  set(newData) {
+  _set(newData) {
     this._data = newData || [];
     this._dirtyIndices.clear();
     this._dirtyIndices.add("all");
-    this.notifier("dataChanged", { type: "reset" });
-    this._publish("dataChanged", { type: "reset" });
+    return ["dataChanged"];
   }
-  isDirty(index = "all") {
+  _isDirty(index = "all") {
     if (this._dirtyIndices.has(index)) {
       this._dirtyIndices.delete(index);
       return true;
     }
     return false;
   }
-  clearAllDirty() {
+  _clearAllDirty() {
     this._dirtyIndices.clear();
   }
 }
@@ -620,65 +600,66 @@ class List2 {
 class Signal {
   pn;
   subs = {};
+  isList = false;
   listening_subs = {};
-  store = {};
-  list = [];
+  store;
   passers;
-  constructor({
-    store = {},
-    list = []
-  }, props) {
-    this.store = new Store(store, (key, value) => {
-      this.publish(key, value);
-    });
+  constructor(initial, props) {
+    if (!initial || typeof initial !== "object") {
+      throw new Error("Initial signal value must be an array or object");
+    }
+    if (!Array.isArray(initial)) {
+      this.store = new Store(initial, (key) => {
+        this.publish(key);
+      });
+    } else {
+      this.isList = true;
+      this.store = new List2(initial, (eventType) => {
+        this.publish(eventType);
+      });
+    }
     this.subs = {};
-    this.list = new List2(list, (eventType, value) => {
-      this.publish(eventType, value);
-    });
     if (props && props.persistName) {
       this.pn = props.persistName;
       const key = localStorage.getItem(props.persistName);
       if (key && key !== "undefined") {
-        this.store = new Store(JSON.parse(key), (key2, value) => {
-          this.publish(key2, value);
-        });
-      }
-      if (typeof store === "object") {
-        for (const key2 in store) {
-          if (!Object.prototype.hasOwnProperty.call(this.store, key2)) {
-            this.store["_set"](key2, store[key2]);
-          }
+        const restored = JSON.parse(key);
+        if (!Array.isArray(restored)) {
+          this.store = new Store(restored, (key2) => {
+            this.publish(key2);
+          });
+        } else {
+          this.isList = true;
+          this.store = new List2(restored, (eventType) => {
+            this.publish(eventType);
+          });
         }
       }
     }
   }
-  publish(eventName, data) {
-    const subs = this.subs[eventName] || [];
-    subs.forEach((c) => {
+  publish(eventName) {
+    this.subs[eventName]?.forEach((c) => {
       funcManager.recall(c);
     });
-    const subs2 = this.listening_subs[eventName];
-    if (subs2) {
-      for (const fn of subs2) {
-        fn({ [eventName]: data });
-      }
-    }
+    this.listening_subs[eventName]?.forEach((c) => {
+      c(this.store);
+    });
     if (this.pn) {
-      localStorage.setItem(this.pn, JSON.stringify(this.store));
+      localStorage.setItem(this.pn, JSON.stringify(this.isList ? this.store.items : this.store.$_internal_data));
     }
   }
-  batch(events) {
+  set(NEW) {
     const s = new Set;
+    const events = this.store._set(NEW);
     const s2 = new Set;
-    for (const [eventName, data] of Object.entries(events)) {
-      this.store["_set"](eventName, data);
-      const subs = this.subs[eventName];
+    for (const event of events) {
+      const subs = this.subs[event];
       if (subs) {
         subs.forEach((c) => {
           s.add(c);
         });
       }
-      const subs2 = this.listening_subs[eventName];
+      const subs2 = this.listening_subs[event];
       if (subs2) {
         for (const fn of subs2) {
           s2.add(fn);
@@ -691,7 +672,7 @@ class Signal {
     for (const fn of s2.values())
       fn(events);
     if (this.pn) {
-      localStorage.setItem(this.pn, JSON.stringify(this.store));
+      localStorage.setItem(this.pn, JSON.stringify(this.isList ? this.store.items : this.store.$_internal_data));
     }
   }
   subscribe(eventName, comp) {
@@ -737,6 +718,35 @@ class Signal {
     }
     this.listening_subs[eventName].push(listener);
   }
+  computed(eventName, element) {
+    let el = element(this.store);
+    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 (newEl === undefined || !(newEl instanceof HTMLElement)) {
+        console.error(` ✘  Cradova err:  ${String(element)} is not a valid element or function`);
+        return;
+      }
+      listener.element.insertAdjacentElement("beforebegin", newEl);
+      listener.element.remove();
+      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] = [];
+    }
+    this.listening_subs[eventName].push(listener);
+    return el;
+  }
   get pass() {
     if (this.passers) {
       return this.passers;
@@ -1038,10 +1048,10 @@ class VirtualList {
     this.renderScheduled = false;
     this.container = container;
     this.scheduleRender();
-    this.dataStore.list._subscribe("dataChanged", () => {
+    this.dataStore.listen("dataChanged", () => {
       this.scheduleRender();
     });
-    this.dataStore.list._subscribe("itemUpdated", () => {
+    this.dataStore.listen("itemUpdated", () => {
       this.scheduleRender();
     });
   }
@@ -1052,11 +1062,11 @@ class VirtualList {
     requestAnimationFrame(this.render.bind(this));
   }
   render() {
-    const loop2 = Math.max(this.dataStore.list.length, this.container.children.length);
-    const needsFullRender = this.dataStore.list.isDirty();
+    const loop2 = Math.max(this.dataStore.store.length, this.container.children.length);
+    const needsFullRender = this.dataStore.store._isDirty();
     for (let i2 = 0;i2 < loop2; i2++) {
-      if (needsFullRender || this.dataStore.list.isDirty(i2)) {
-        const dataItem = this.dataStore.list.get(i2);
+      if (needsFullRender || this.dataStore.store._isDirty(i2)) {
+        const dataItem = this.dataStore.store.get(i2);
         const newDOM = this.renderItem(dataItem, i2);
         const oldDOM = this.container.children[i2];
         if (newDOM instanceof HTMLElement) {
@@ -1077,7 +1087,7 @@ class VirtualList {
       }
     }
     if (needsFullRender) {
-      this.dataStore.list.clearAllDirty();
+      this.dataStore.store._clearAllDirty();
     }
     this.renderScheduled = false;
   }

package/dist/primitives/classes.d.ts

@@ -1,4 +1,4 @@
-import type { browserPageType, Comp, CradovaPageType } from "./types.js";
+import type { browserPageType, Comp, CradovaPageType, VJS_params_TYPE } 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);
@@ -9,7 +9,6 @@ declare class List<Type extends any[]> {
     update(index: number, newItemData: Type[number]): void;
     push(itemData: Type[number], index?: number): void;
     remove(index: number, count?: number): void;
-    set(newData: Type): void;
 }
 /**
  *  Cradova Signal
@@ -21,17 +20,14 @@ declare class List<Type extends any[]> {
  * - persist changes to localStorage
  * @constructor initial: Record<string, any>, props: {persist}
  */
-export declare class Signal<StoreType extends Record<string, any>, ListType extends any[]> {
+export declare class Signal<Type = any> {
     private pn?;
     private subs;
+    private isList;
     private listening_subs;
-    store: StoreType;
-    list: List<ListType>;
-    passers?: Record<keyof StoreType, [string, Signal<StoreType, ListType>]>;
-    constructor({ store, list, }: {
-        store?: StoreType;
-        list?: ListType;
-    }, props?: {
+    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?: {
         persistName?: string | undefined;
     });
     /**
@@ -39,7 +35,7 @@ export declare class Signal<StoreType extends Record<string, any>, ListType exte
      * ----
      *  fires actions if any available
      */
-    batch(events: Partial<StoreType>): void;
+    set(NEW: Type): void;
     /**
      *  Cradova Signal
      * ----
@@ -48,7 +44,7 @@ export declare class Signal<StoreType extends Record<string, any>, ListType exte
      * @param name of event.
      * @param Comp component to bind to.
      */
-    subscribe<T extends keyof StoreType>(eventName: T | "dataChanged" | "itemUpdated" | T[], comp: Comp | ((this: Comp) => HTMLDivElement)): void;
+    subscribe<T extends keyof Type>(eventName: T | "dataChanged" | "itemUpdated" | T[], comp: Comp | ((this: Comp) => HTMLDivElement)): void;
     /**
      *  Cradova Signal
      * ----
@@ -57,13 +53,14 @@ export declare class Signal<StoreType extends Record<string, any>, ListType exte
      * @param name of event.
      * @param callback function to call.
      */
-    listen<T extends keyof StoreType>(eventName: T | "dataChanged" | "itemUpdated" | T[], listener: (data: Partial<StoreType>) => void): void;
+    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;
     /**
      *  Cradova Signal
      * ----
      *  subscribe an element to an event
      */
-    get pass(): Record<keyof StoreType, [string, Signal<any, any>]>;
+    get pass(): Record<keyof Type, [string, Signal<any>]>;
     /**
      *  Cradova Signal
      * ----
@@ -164,6 +161,6 @@ export declare class __raw_ref<T = unknown> {
     bind(name: string): [__raw_ref<T>, string];
 }
 export declare class VirtualList {
-    constructor(container: HTMLElement, dataStore: Signal<any, any[]>, renderItemFunction: (item: any, index: number) => HTMLElement);
+    constructor(container: HTMLElement, dataStore: Signal<any[]>, renderItemFunction: (item: any, index: number) => HTMLElement);
 }
 export {};

package/dist/primitives/functions.d.ts

@@ -34,7 +34,7 @@ export declare const funcManager: {
     cleanupEffects(component: Comp): void;
     unmount(component: Comp): void;
 };
-export declare const List: <T>(signal: Signal<any, T[]>, item: (item: T) => HTMLElement, options?: {
+export declare const List: <T>(signal: Signal<T[]>, item: (item: T) => HTMLElement, options?: {
     className?: string;
     id?: string;
     style?: Partial<CSS.Properties>;

package/dist/primitives/types.d.ts

@@ -8,8 +8,10 @@ interface Attributes<E extends HTMLElement> {
     [key: `aria-${string}`]: string | undefined;
     [key: `on${string}`]: ((this: E, event: Event) => void) | undefined;
 }
-type StandardElementEventNames<E extends HTMLElement> = Extract<keyof E, `on${string}`>;
-export type VJS_params_TYPE<E extends HTMLElement> = (undefined | undefined[] | string | string[] | HTMLElement | HTMLElement[] | DocumentFragment | DocumentFragment[] | (() => HTMLElement) | (() => HTMLElement)[] | [string, Signal<any, any[]>] | (Attributes<E> & Omit<Partial<E>, keyof Attributes<E> | StandardElementEventNames<E>>))[];
+type StandardEvents<E extends HTMLElement> = {
+    [key in keyof E]: E[key] extends (this: E, event: Event) => void ? key : never;
+}[keyof E];
+export type VJS_params_TYPE<E extends HTMLElement> = (undefined | undefined[] | string | string[] | HTMLElement | HTMLElement[] | DocumentFragment | DocumentFragment[] | (() => HTMLElement) | (() => HTMLElement)[] | [string, Signal<any>] | VJS_params_TYPE<E> | VJS_params_TYPE<E>[] | (Attributes<E> & Omit<Partial<E>, keyof Attributes<E> | StandardEvents<E>>))[];
 export type CradovaPageType = {
     /**
      * Cradova page

package/package.json

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