cradova 3.13.2 → 3.15.0

package/dist/index.js

@@ -14,13 +14,13 @@ var makeElement = (element, ElementChildrenAndPropertyList) => {
       }
       if (Array.isArray(child)) {
         if (child[1] instanceof Signal) {
-          child[1].notify([child[0]], () => {
+          child[1].computed(child[0], () => {
             element.innerHTML = "";
             element.appendChild(unroll_child_list([
-              child[1].store[child[0]]
+              child[1].data[child[0]]
             ]));
           });
-          element.appendChild(unroll_child_list([child[1].store[child[0]]]));
+          element.appendChild(unroll_child_list([child[1].data[child[0]]]));
           continue;
         }
         element.appendChild(unroll_child_list(child));
@@ -61,10 +61,10 @@ 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.notify([eventName], () => {
-            element.setAttribute(prop, signalInstance.store[eventName]);
+          signalInstance.computed([eventName], () => {
+            element.setAttribute(prop, signalInstance.data[eventName]);
           });
-          element.setAttribute(prop, signalInstance.store[eventName]);
+          element.setAttribute(prop, signalInstance.data[eventName]);
           continue;
         }
       }
@@ -325,9 +325,7 @@ var compManager = {
   },
   recall(component) {
     if (component.rendered && component.published) {
-      setTimeout(() => {
-        this.activate(component);
-      }, 0);
+      this.activate(component);
     }
     window.CradovaEvent.dispatchEvent("after_page_is_killed");
     window.CradovaEvent.dispatchEvent("after_comp_is_mounted");
@@ -342,7 +340,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;
@@ -486,198 +483,65 @@ class cradovaEvent {
 }
 window.CradovaEvent = new cradovaEvent;
 
-class Store {
-  $_internal_data;
-  constructor(data, notifier) {
-    this.$_internal_data = data;
-    for (const key in this.$_internal_data) {
-      if (this.$_internal_data.hasOwnProperty(key)) {
-        Object.defineProperty(this, key, {
-          get() {
-            return this.$_internal_data[key];
-          },
-          set(value) {
-            this.$_internal_data[key] = value;
-            notifier(key, value);
-          },
-          enumerable: true,
-          configurable: true
-        });
-      }
-    }
-  }
-  _set(data) {
-    this.$_internal_data = data;
-    return Object.keys(this.$_internal_data);
-  }
-}
-
-class SilentStore {
-  $store;
-  constructor(store) {
-    this.$store = store;
-    for (const key in this.$store.$_internal_data) {
-      if (this.$store.$_internal_data.hasOwnProperty(key)) {
-        Object.defineProperty(this, key, {
-          set(value) {
-            this.$store.$_internal_data[key] = value;
-          },
-          enumerable: true,
-          configurable: true
-        });
-      }
-    }
-  }
-}
-
-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;
+  data = {};
+  picker = {};
+  soft = {};
   passers;
+  queue = new Set;
   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.picker = initial;
     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.picker = Object.assign(initial, restored);
       }
     }
-  }
-  publish(eventName) {
-    this.subscribers[eventName]?.forEach((c) => {
-      if (c.published) {
-        compManager.recall(c);
-      } else {
-        c();
-      }
-    });
-    this.subscribers["__ALL__"]?.forEach((c) => {
-      if (c.published) {
-        compManager.recall(c);
-      } else {
-        c();
-      }
-    });
-    if (this.pn) {
-      localStorage.setItem(this.pn, JSON.stringify(this.isList ? this.store.items : this.store.$_internal_data));
+    for (const key in this.picker) {
+      Object.defineProperty(this.data, key, {
+        set: (value) => {
+          this.picker[key] = value;
+          this.queue.add(key);
+          queueMicrotask(() => this.queue.size && this.publish());
+        },
+        get: () => this.picker[key],
+        enumerable: true,
+        configurable: true
+      });
+      Object.defineProperty(this.soft, key, {
+        set: (value) => {
+          this.picker[key] = value;
+        },
+        enumerable: true,
+        configurable: true
+      });
     }
   }
-  set(NEW) {
+  publish() {
     const s = new Set;
-    const events = this.store._set(NEW);
-    for (const event of events) {
-      const subs2 = this.subscribers[event];
-      if (subs2) {
-        for (const fn of subs2) {
-          s.add(fn);
+    this.queue.add("__ALL__");
+    for (const k of this.queue) {
+      if (this.picker.hasOwnProperty(k)) {
+        const subs2 = this.subscribers[k];
+        if (subs2) {
+          for (const fn of subs2) {
+            s.add(fn);
+          }
+        }
+      } else {
+        if (k !== "__ALL__") {
+          delete this.subscribers[k];
         }
       }
     }
-    if (this.subscribers["__ALL__"]) {
-      for (const fn of this.subscribers["__ALL__"]) {
-        s.add(fn);
-      }
-    }
+    this.queue.clear();
     for (const c of s.values()) {
       if (c.published) {
         compManager.recall(c);
@@ -686,97 +550,44 @@ 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.picker));
     }
   }
-  notify(eventName, listener) {
+  set(data) {
+    Object.assign(this.picker, data);
+    this.queue = new Set(Object.keys(this.subscribers));
+    queueMicrotask(() => this.publish());
+  }
+  computed(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 {
-        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`);
-      return;
-    }
-    if (Array.isArray(eventName)) {
-      eventName.forEach((en) => {
-        this.notify(en, listener);
-      });
-      return;
+      eventName = "__ALL__";
     }
     if (!this.subscribers[eventName]) {
       this.subscribers[eventName] = [];
     }
-    if (!isArrowFunc(listener)) {
-      listener = toCompNoRender(listener);
-    }
-    this.subscribers[eventName].push(listener);
-  }
-  computed(eventName, element) {
-    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;
+    const isComp = !isArrowFunc(listener);
     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[eventName] = this.subscribers[eventName].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`);
+      const el = toComp(listener);
+      if (el === undefined || !(el instanceof HTMLElement)) {
+        console.error(` ✘  Cradova err:  ${String(listener)} is not a valid element or function`);
         return;
       }
-      listener.element.insertAdjacentElement("beforebegin", newEl);
-      listener.element.remove();
-      listener.element = newEl;
-    };
-    listener.element = el;
-    if (!this.subscribers[eventName]) {
-      this.subscribers[eventName] = [];
+      this.subscribers[eventName].push(listener);
+      return el;
     }
-    listener.idx = this.subscribers[eventName].length;
     this.subscribers[eventName].push(listener);
-    return el;
+    return;
   }
   get pass() {
     if (this.passers) {
       return this.passers;
     }
-    const keys = Object.keys(this.store);
+    const keys = Object.keys(this.picker);
     this.passers = {};
     for (const key of keys) {
       this.passers[key] = [key, this];
@@ -790,6 +601,185 @@ class Signal {
   }
 }
 
+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(listener) {
+    if (!listener) {
+      console.error(` ✘  Cradova err:  listener ${String(listener)} is not a valid event name or function`);
+      return;
+    }
+    if (!this.subscribers) {
+      this.subscribers = [];
+    }
+    const isComp = !isArrowFunc(listener);
+    if (isComp) {
+      const el = toComp(listener);
+      if (el === undefined || !(el instanceof HTMLElement)) {
+        console.error(` ✘  Cradova err:  ${String(listener)} is not a valid element or function`);
+        return;
+      }
+      this.subscribers.push(listener);
+      return el;
+    }
+    this.subscribers.push(listener);
+    return;
+  }
+  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);
+  }
+}
+
 class Page {
   _name;
   _html;
@@ -797,12 +787,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;
@@ -848,6 +838,9 @@ class RouterBoxClass {
       window.location.hash = "paused";
       return;
     }
+    if (url === this.lastNavigatedRoute) {
+      return;
+    }
     if (this.nextRouteController) {
       route = this.nextRouteController;
       this.nextRouteController = undefined;
@@ -1101,6 +1094,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,29 +9,29 @@ 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;
-    silentStore: Type extends Array<any> ? never : Type;
+export declare class Signal<Type extends Record<string, any> = any> {
+    data: Type;
+    soft: Type;
     passers?: Record<keyof Type, [string, Signal<Type>]>;
+    private queue;
     constructor(initial: Type, props?: {
         persistName?: string | undefined;
     });
     /**
      *  Cradova Signal
      * ----
-     *  fires actions if any available
+     *  publish events to subscribers
      */
-    set(NEW: Type): void;
+    set(data: Type): void;
     /**
      *  Cradova Signal
      * ----
-     *  subscribe to an event
+     *  subscribe a function, component to an event
      *
-     * @param name of event.
-     * @param callback function to call.
+     * @param eventName of event.
+     * @param element to render.
      */
-    notify<T extends keyof Type>(eventName: (T | "dataChanged" | "itemUpdated" | T[]) | (() => HTMLElement | void) | Comp | ((ctx: Comp) => HTMLElement), listener?: (() => HTMLElement | void) | Comp | ((this: 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;
+    computed<T extends keyof Type>(eventName: T | "__ALL__" | (() => void) | Comp | ((ctx: Comp) => HTMLElement), listener?: (() => void) | Comp | ((ctx: Comp) => HTMLElement)): HTMLElement | undefined;
     /**
      *  Cradova Signal
      * ----
@@ -57,6 +45,32 @@ export declare class Signal<Type = any> {
      */
     clearPersist(): void;
 }
+/**
+ * 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(listener?: (() => void) | 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;
+}
 /**
  *  Cradova Page
  * ---
@@ -65,6 +79,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);
@@ -118,10 +133,7 @@ export declare class Router {
     /**
      * Cradova Router
      * ------
-     *
      * return last set router params
-     *
-     * .
      */
     static get PageData(): {
         params: Record<string, string>;
@@ -152,4 +164,3 @@ export declare class RefInstance<T = unknown> {
      */
     bind(name: string): [RefInstance<T>, string];
 }
-export {};

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.15.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"
   }
 }