cradova 3.13.2 → 3.14.0

package/dist/index.js

@@ -342,7 +342,6 @@ var compManager = {
       resetComponent(component);
       const newHtml = component(component, ...component._args || []);
       if (newHtml instanceof HTMLElement) {
-        node.replaceWith(newHtml);
         node.insertAdjacentElement("beforebegin", newHtml);
         node.remove();
         component.reference = newHtml;
@@ -530,116 +529,29 @@ class SilentStore {
   }
 }
 
-class List {
-  _data;
-  _dirtyIndices;
-  notifier;
-  constructor(initialData, notifier) {
-    this._data = initialData || [];
-    this._dirtyIndices = new Set;
-    this.notifier = notifier;
-    this._dirtyIndices.add("all");
-  }
-  get items() {
-    return {
-      [Symbol.iterator]: () => {
-        return this._data[Symbol.iterator]();
-      },
-      next: () => {
-        return this._data[Symbol.iterator]().next();
-      }
-    };
-  }
-  get length() {
-    return this._data.length;
-  }
-  get(index) {
-    return this._data[index];
-  }
-  indexOf(item) {
-    return this._data.indexOf(item);
-  }
-  update(index, newItemData) {
-    if (index >= 0 && index < this._data.length && this._data[index] !== newItemData) {
-      this._data[index] = newItemData;
-      this._dirtyIndices.add(index);
-      this.notifier("itemUpdated", { index, newItemData });
-    }
-  }
-  push(itemData, index) {
-    if (index === undefined || index > this._data.length || index < 0) {
-      index = this._data.length;
-    }
-    this._data.splice(index, 0, itemData);
-    this._dirtyIndices.add("all");
-    this.notifier("dataChanged", { type: "add", index });
-  }
-  map(callback) {
-    return this._data.map(callback);
-  }
-  remove(index, count = 1) {
-    if (index >= 0 && index < this._data.length && count > 0) {
-      this._data.splice(index, count);
-      this._dirtyIndices.add("all");
-      this.notifier("dataChanged", { type: "remove", index });
-    }
-  }
-  _set(newData) {
-    this._data = newData || [];
-    this._dirtyIndices.clear();
-    this._dirtyIndices.add("all");
-    return ["dataChanged"];
-  }
-  _isDirty(index = "all") {
-    if (this._dirtyIndices.has(index)) {
-      this._dirtyIndices.delete(index);
-      return true;
-    }
-    return false;
-  }
-  _clearAllDirty() {
-    this._dirtyIndices.clear();
-  }
-}
-
 class Signal {
   pn;
-  isList = false;
   subscribers = {};
   store;
   silentStore = undefined;
   passers;
   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);
-      });
-      this.silentStore = new SilentStore(this.store);
-    } else {
-      this.isList = true;
-      this.store = new List(initial, (eventType) => {
-        this.publish(eventType);
-      });
+    if (!initial || typeof initial !== "object" || Array.isArray(initial)) {
+      throw new Error("Initial signal value must be an object");
     }
+    this.store = new Store(initial, (key) => {
+      this.publish(key);
+    });
+    this.silentStore = new SilentStore(this.store);
     if (props && props.persistName) {
       this.pn = props.persistName;
       const key = localStorage.getItem(props.persistName);
       if (key && key !== "undefined") {
         const restored = JSON.parse(key);
-        if (typeof restored === "object" && !Array.isArray(restored)) {
-          this.store = new Store(Object.assign(initial, restored), (key2) => {
-            this.publish(key2);
-          });
-          this.silentStore = new SilentStore(this.store);
-        } else if (Array.isArray(restored)) {
-          this.isList = true;
-          this.store = new List(restored, (eventType) => {
-            this.publish(eventType);
-          });
-        }
+        this.store = new Store(Object.assign(initial, restored), (key2) => {
+          this.publish(key2);
+        });
+        this.silentStore = new SilentStore(this.store);
       }
     }
   }
@@ -659,7 +571,7 @@ class Signal {
       }
     });
     if (this.pn) {
-      localStorage.setItem(this.pn, JSON.stringify(this.isList ? this.store.items : this.store.$_internal_data));
+      localStorage.setItem(this.pn, JSON.stringify(this.store));
     }
   }
   set(NEW) {
@@ -686,7 +598,7 @@ class Signal {
       }
     }
     if (this.pn) {
-      localStorage.setItem(this.pn, JSON.stringify(this.isList ? this.store.items : this.store.$_internal_data));
+      localStorage.setItem(this.pn, JSON.stringify(this.store));
     }
   }
   notify(eventName, listener) {
@@ -696,11 +608,7 @@ class Signal {
     }
     if (typeof eventName === "function") {
       listener = eventName;
-      if (this.isList) {
-        eventName = ["dataChanged", "itemUpdated"];
-      } else {
-        eventName = Object.keys(this.store);
-      }
+      eventName = Object.keys(this.store);
     }
     if (typeof listener !== "function" || !eventName) {
       console.error(` ✘  Cradova err: listener or eventName ${String(listener)} is not a valid listener function or string`);
@@ -727,11 +635,7 @@ class Signal {
     }
     if (typeof eventName === "function") {
       element = eventName;
-      if (this.isList) {
-        eventName = "__ALL__";
-      } else {
-        eventName = "__ALL__";
-      }
+      eventName = "__ALL__";
     }
     const isComp = !isArrowFunc(element);
     let el;
@@ -776,7 +680,7 @@ class Signal {
     if (this.passers) {
       return this.passers;
     }
-    const keys = Object.keys(this.store);
+    const keys = Object.keys(this.store.$_internal_data);
     this.passers = {};
     for (const key of keys) {
       this.passers[key] = [key, this];
@@ -797,12 +701,12 @@ class Page {
   _unload_CB;
   _activate_CB;
   constructor(pageParams) {
-    const { template, name } = pageParams;
+    const { template, title } = pageParams;
     if (typeof template !== "function") {
       throw new Error(` ✘  Cradova err:  template function for the page is not a function`);
     }
     this._html = template;
-    this._name = name || document.title;
+    this._name = title || document.title;
   }
   set onDeactivate(cb) {
     this._unload_CB = cb;
@@ -1050,6 +954,231 @@ class RefInstance {
     return [this, name];
   }
 }
+
+class List {
+  state;
+  item;
+  length;
+  options;
+  renderingRange;
+  container;
+  firstItemIndex = 0;
+  lastItemIndex = 0;
+  rendered = false;
+  subscribers = [];
+  constructor(state, item, options) {
+    this.state = state;
+    this.item = item || ((item2) => div(String(item2)));
+    this.length = state.length;
+    this.options = options;
+    this.renderingRange = Math.round(Math.min(this.length > 50 ? this.length * 0.5 : this.length, window.innerHeight / (this.options?.itemHeight || 1)));
+    this.lastItemIndex = this.renderingRange - 1;
+    this.container = document.createElement("div");
+    if (this.options?.className) {
+      this.container.className = this.options?.className;
+    }
+    if (this.options?.id) {
+      this.container.id = this.options?.id;
+    }
+  }
+  get Element() {
+    if (this.rendered) {
+      return this.container;
+    }
+    for (let i2 = 0;i2 < this.renderingRange; i2++) {
+      const item = this.item(this.state[i2]);
+      item.setAttribute("data-index", i2.toString());
+      this.container.appendChild(item);
+    }
+    this.rendered = true;
+    const domObser = () => {
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const isBottom = entry.target === this.container.lastElementChild;
+            const isTop = !isBottom;
+            observer.unobserve(entry.target);
+            const index = Number(entry.target.getAttribute("data-index"));
+            if (isBottom) {
+              for (let i2 = index + 1;i2 < this.length; i2++) {
+                const item = this.item(this.state[i2]);
+                item.setAttribute("data-index", i2.toString());
+                this.container.appendChild(item);
+              }
+              for (let i2 = index - this.renderingRange;i2 > 0; i2--) {
+                this.container.removeChild(this.container.children[i2]);
+              }
+              this.firstItemIndex = Number(this.container.firstElementChild?.getAttribute("data-index") || 0);
+              this.lastItemIndex = Number(this.container.lastElementChild?.getAttribute("data-index") || 0);
+            }
+            if (isTop) {
+              for (let i2 = index - 1;i2 > 0; i2--) {
+                const item = this.item(this.state[i2]);
+                item.setAttribute("data-index", i2.toString());
+                this.container.appendChild(item);
+              }
+              for (let i2 = index + this.renderingRange;i2 < this.length; i2++) {
+                this.container.removeChild(this.container.children[i2]);
+              }
+              this.lastItemIndex = Number(this.container.lastElementChild?.getAttribute("data-index") || 0);
+              this.firstItemIndex = Number(this.container.firstElementChild?.getAttribute("data-index") || 0);
+            }
+          }
+        });
+      });
+      observer.observe(this.container.lastElementChild);
+      observer.observe(this.container.firstElementChild);
+    };
+    window.addEventListener("scroll", domObser);
+    window.CradovaEvent.after_page_is_killed.push(() => {
+      window.removeEventListener("scroll", domObser);
+    });
+    return this.container;
+  }
+  computed(element) {
+    if (!element) {
+      console.error(` ✘  Cradova err:  element ${String(element)} is not a valid element or function`);
+      return;
+    }
+    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 = () => {
+      if (!document.body.contains(listener.element)) {
+        listener.element?.remove();
+        this.subscribers.filter((f) => listener.idx !== f.idx);
+        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;
+      }
+      listener.element.insertAdjacentElement("beforebegin", newEl);
+      listener.element.remove();
+      listener.element = newEl;
+    };
+    listener.element = el;
+    listener.idx = this.subscribers.length;
+    this.subscribers.push(listener);
+    return el;
+  }
+  diffDOMBeforeUpdatingState(newState) {
+    this.length = newState.length;
+    this.renderingRange = Math.round(Math.min(this.length > 100 ? this.length * 0.5 : this.length, window.innerHeight / (this.options?.itemHeight || 1)));
+    this.lastItemIndex = this.firstItemIndex + this.renderingRange;
+    for (let i2 = this.lastItemIndex;i2 >= this.firstItemIndex; i2--) {
+      if ((this.state[i2] === undefined || newState[i2] === undefined) && this.container.children[i2] !== undefined) {
+        this.container.removeChild(this.container.children[i2]);
+        continue;
+      }
+      if (JSON.stringify(this.state[i2]) === JSON.stringify(newState[i2])) {
+        continue;
+      }
+      const item = this.item(newState[i2]);
+      item.setAttribute("data-index", i2.toString());
+      if (this.container.children[i2]) {
+        this.container.replaceChild(item, this.container.children[i2]);
+      } else {
+        this.container.appendChild(item);
+      }
+    }
+    this.lastItemIndex = Number(this.container.lastElementChild?.getAttribute("data-index") || 0);
+    this.firstItemIndex = Number(this.container.firstElementChild?.getAttribute("data-index") || 0);
+    this.state = newState;
+    this.subscribers.forEach((sub) => {
+      const isComp = !isArrowFunc(sub);
+      if (isComp) {
+        compManager.recall(sub);
+      } else {
+        sub?.();
+      }
+    });
+  }
+  get data() {
+    return {
+      [Symbol.iterator]: () => {
+        return this.state[Symbol.iterator]();
+      },
+      next: () => {
+        return this.state[Symbol.iterator]().next();
+      }
+    };
+  }
+  get(index) {
+    return this.state[index];
+  }
+  indexOf(item) {
+    return this.state.indexOf(item);
+  }
+  update(index, newItemData) {
+    const newState = [...this.state];
+    if (index >= 0 && index < this.state.length && this.state[index] !== newItemData) {
+      newState[index] = newItemData;
+    }
+    this.diffDOMBeforeUpdatingState(newState);
+  }
+  push(itemData) {
+    const newState = [...this.state];
+    newState.push(itemData);
+    this.diffDOMBeforeUpdatingState(newState);
+  }
+  map(callback) {
+    const newState = [...this.state];
+    return newState.map(callback);
+  }
+  splice(index, count = 1, ...items) {
+    const newState = [...this.state];
+    if (index >= 0 && index < this.state.length && count > 0) {
+      newState.splice(index, count, ...items);
+    }
+    this.diffDOMBeforeUpdatingState(newState);
+  }
+  set(newData) {
+    const newState = [...this.state];
+    this.state = newData instanceof Function ? newData(this.state) : newData || [];
+    this.diffDOMBeforeUpdatingState(newState);
+  }
+  destroy() {
+    this.container.remove();
+    this.container = null;
+    this.state.length = 0;
+    this.state = null;
+    this.item = null;
+    this.length = 0;
+    this.options = null;
+    this.renderingRange = 0;
+    this.firstItemIndex = 0;
+    this.lastItemIndex = 0;
+  }
+  notify(listener) {
+    if (!listener) {
+      console.error(` ✘  Cradova err:  listener ${String(listener)} is not a valid listener function or string`);
+      return;
+    }
+    if (typeof listener !== "function") {
+      console.error(` ✘  Cradova err: listener or eventName ${String(listener)} is not a valid listener function or string`);
+      return;
+    }
+    if (!isArrowFunc(listener)) {
+      listener = toCompNoRender(listener);
+    }
+    this.subscribers.push(listener);
+  }
+}
 export {
   video,
   useExternalEffect,
@@ -1101,6 +1230,7 @@ export {
   Router,
   RefInstance,
   Page,
+  List,
   $switch,
   $case
 };

package/dist/primitives/classes.d.ts

@@ -1,16 +1,4 @@
 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);
-    get items(): IterableIterator<Type[number]>;
-    get length(): number;
-    get(index: number): any;
-    indexOf(item: Type[number]): number;
-    update(index: number, newItemData: Type[number]): void;
-    push(itemData: Type[number], index?: number): void;
-    map<T>(callback: (item: Type[number], index: number) => T): T[];
-    remove(index: number, count?: number): void;
-}
 /**
  *  Cradova Signal
  * ----
@@ -21,8 +9,8 @@ declare class List<Type extends any[]> {
  * - persist changes to localStorage
  * @constructor initial: Record<string, any>, props: {persist}
  */
-export declare class Signal<Type = any> {
-    store: Type extends Array<any> ? List<Type> : Type extends Record<string, any> ? Type : never;
+export declare class Signal<Type extends Record<string, any> = any> {
+    store: Type;
     silentStore: Type extends Array<any> ? never : Type;
     passers?: Record<keyof Type, [string, Signal<Type>]>;
     constructor(initial: Type, props?: {
@@ -42,7 +30,7 @@ export declare class Signal<Type = any> {
      * @param name of event.
      * @param callback function to call.
      */
-    notify<T extends keyof Type>(eventName: (T | "dataChanged" | "itemUpdated" | T[]) | (() => HTMLElement | void) | Comp | ((ctx: Comp) => HTMLElement), listener?: (() => HTMLElement | void) | Comp | ((this: Comp) => HTMLElement)): void;
+    notify<T extends keyof Type>(eventName: (T | "dataChanged" | "itemUpdated" | T[]) | (() => HTMLElement | void) | Comp | ((ctx: Comp) => HTMLElement), listener?: (() => void) | Comp | ((ctx: Comp) => HTMLElement)): void;
     computed<T extends keyof Type>(eventName: (T | "dataChanged" | "itemUpdated") | (() => HTMLElement) | Comp | ((ctx: Comp) => HTMLElement), element?: (() => HTMLElement) | Comp | ((ctx: Comp) => HTMLElement)): HTMLElement | undefined;
     /**
      *  Cradova Signal
@@ -65,6 +53,7 @@ export declare class Signal<Type = any> {
  * @param template
  */
 export declare class Page {
+    _unload_CB?: (this: Page) => Promise<void> | void;
     _activate_CB?: (this: Page) => Promise<void> | void;
     constructor(pageParams: CradovaPageType);
     set onDeactivate(cb: (this: Page) => Promise<void> | void);
@@ -152,4 +141,39 @@ export declare class RefInstance<T = unknown> {
      */
     bind(name: string): [RefInstance<T>, string];
 }
-export {};
+/**
+ * Cradova List
+ * ---
+ *  A virtual list store and component for efficient rendering of large lists.
+ */
+export declare class List<T> {
+    length: number;
+    private rendered;
+    subscribers: Function[];
+    constructor(state: T[], item?: (item: T) => HTMLElement, options?: {
+        itemHeight: number;
+        className?: string;
+        id?: string;
+    });
+    get Element(): HTMLElement;
+    computed<T extends keyof List<T>>(element?: (() => HTMLElement) | Comp | ((ctx: Comp) => HTMLElement)): HTMLElement | undefined;
+    private diffDOMBeforeUpdatingState;
+    get data(): IterableIterator<T>;
+    get(index: number): T;
+    indexOf(item: T): number;
+    update(index: number, newItemData: T): void;
+    push(itemData: T): void;
+    map<K>(callback: (item: T, index: number) => K): K[];
+    splice(index: number, count?: number, ...items: T[]): void;
+    set(newData: T[] | ((prevItem: T[]) => T[])): void;
+    destroy(): void;
+    /**
+     *  Cradova Signal
+     * ----
+     *  subscribe to an event
+     *
+     * @param name of event.
+     * @param callback function to call.
+     */
+    notify<T extends keyof List<T>>(listener?: (() => void) | Comp | ((ctx: Comp) => HTMLElement)): void;
+}

package/dist/primitives/types.d.ts

@@ -6,12 +6,13 @@ interface Attributes<E extends HTMLElement> {
     style?: Partial<CSS.Properties>;
     [key: `data-${string}`]: string | undefined;
     [key: `aria-${string}`]: string | undefined;
-    [key: `on${string}`]: ((this: E, event: Event) => void) | undefined;
+    [key: `on${string}`]: ((this: E, event: StandardEvents) => void) | undefined;
 }
-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)[] | ((ctx: Comp) => HTMLElement) | ((ctx: Comp) => HTMLElement)[] | [string, Signal<any>] | (Attributes<E> & Omit<Partial<E>, keyof Attributes<E> | StandardEvents<E>>))[];
+type StandardEvents = KeyboardEvent | MouseEvent | TouchEvent | WheelEvent | DragEvent | ClipboardEvent | CompositionEvent | FocusEvent | InputEvent | AnimationEvent | TransitionEvent | Event;
+type OmitFunctions<E> = {
+    [K in keyof E as E[K] extends Function ? never : K]: E[K];
+};
+export type VJS_params_TYPE<E extends HTMLElement> = (undefined | undefined[] | string | string[] | HTMLElement | HTMLElement[] | DocumentFragment | DocumentFragment[] | (() => HTMLElement) | (() => HTMLElement)[] | ((ctx: Comp) => HTMLElement) | ((ctx: Comp) => HTMLElement)[] | [string, Signal<any>] | Attributes<E> | OmitFunctions<E>)[];
 export type CradovaPageType = {
     /**
      * Cradova page
@@ -19,7 +20,7 @@ export type CradovaPageType = {
      * title of the page
      * .
      */
-    name?: string;
+    title?: string;
     /**
      * Cradova page
      * ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cradova",
-  "version": "3.13.2",
+  "version": "3.14.0",
   "description": "Build Powerful ⚡ Web Apps with Ease",
   "main": "dist/index.js",
   "type": "module",
@@ -14,9 +14,10 @@
     "url": "git+https://github.com/CodeDynasty-dev/Cradova.git"
   },
   "scripts": {
-    "compile": "bun bundle.ts",
+    "compile": "bun bundle.ts && run clean",
     "lint": "eslint . --fix",
-    "tsc": "tsc --target esnext  tests/index.ts --watch --moduleResolution NodeNext --module NodeNext"
+    "tsc": "tsc --target esnext  tests/index.ts --watch --moduleResolution NodeNext --module NodeNext",
+    "clean": "rm -rf tests/dist && cp -r dist tests/dist"
   },
   "keywords": [
     "frontend library",
@@ -54,7 +55,7 @@
   },
   "homepage": "https://github.com/CodeDynasty-dev/cradova",
   "dependencies": {
-    "csstype": "^3.1.2"
+    "csstype": "^3.1.3"
   },
   "docmach": {
     "docs-directory": "docs/docs",
@@ -62,6 +63,6 @@
     "assets-folder": "docs/assets"
   },
   "devDependencies": {
-    "docmach": "^1.0.16"
+    "docmach": "^1.0.18"
   }
 }