cradova 3.14.0 → 3.15.1

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,11 +325,8 @@ 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");
   },
   activate(component) {
@@ -485,111 +482,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 Signal {
   pn;
   subscribers = {};
-  store;
-  silentStore = undefined;
+  data = {};
+  picker = {};
+  soft = {};
   passers;
+  queue = new Set;
   constructor(initial, props) {
     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);
+    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);
-        this.store = new Store(Object.assign(initial, restored), (key2) => {
-          this.publish(key2);
-        });
-        this.silentStore = new SilentStore(this.store);
+        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.store));
+    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);
@@ -598,89 +549,44 @@ class Signal {
       }
     }
     if (this.pn) {
-      localStorage.setItem(this.pn, JSON.stringify(this.store));
+      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;
-      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;
-      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);
+      const el = toComp(listener);
+      if (el === undefined || !(el instanceof HTMLElement)) {
+        console.error(` ✘  Cradova err:  ${String(listener)} is not a valid element or function`);
         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;
-    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.$_internal_data);
+    const keys = Object.keys(this.picker);
     this.passers = {};
     for (const key of keys) {
       this.passers[key] = [key, this];
@@ -694,6 +600,203 @@ class Signal {
   }
 }
 
+class List {
+  state;
+  item;
+  length;
+  itemHeight = 35;
+  windowCoverage = 500;
+  overscan = 20;
+  scrollingDirection = "vertical";
+  opts;
+  columns = 1;
+  container;
+  rendered = false;
+  subscribers = [];
+  scrollPos = 0;
+  list;
+  startIndex = 0;
+  listContainer;
+  constructor(state, item, opts) {
+    this.state = state;
+    this.item = item || ((item2, i2) => div(String(item2) + " " + i2));
+    this.length = state.length;
+    this.opts = opts;
+    this.itemHeight = opts?.itemHeight || 35;
+    this.columns = opts?.columns || 1;
+    this.windowCoverage = opts?.windowHeight || opts?.windowWidth || 500;
+    this.overscan = opts?.overscan || 20;
+    this.scrollingDirection = opts?.scrollingDirection || "vertical";
+    this.container = div({
+      className: this.opts?.className,
+      onscroll: (e) => {
+        this.scrollPos = Math.floor(this.scrollingDirection === "vertical" ? e.target.scrollTop : e.target.scrollLeft);
+        requestAnimationFrame(() => this.render());
+      },
+      style: {
+        overflowY: this.scrollingDirection === "vertical" ? "scroll" : "hidden",
+        overflowX: this.scrollingDirection === "horizontal" ? "scroll" : "hidden",
+        height: this.opts?.windowHeight ? `${this.opts?.windowHeight}px` : "500px",
+        width: this.opts?.windowWidth ? `${this.opts?.windowWidth}px` : "100%"
+      }
+    }, div({
+      id: "listContainer",
+      style: {
+        height: `${Math.round(this.length * this.itemHeight / this.columns)}px`
+      }
+    }, div({
+      id: "list",
+      className: this.opts?.className,
+      style: {
+        transform: this.scrollingDirection === "vertical" ? `translateY(${this.scrollPos}px)` : `translateX(${this.scrollPos}px)`
+      }
+    })));
+    this.listContainer = this.container.querySelector("#listContainer");
+    this.list = this.container.querySelector("#list");
+  }
+  get Element() {
+    if (!this.rendered) {
+      this.render();
+      this.rendered = true;
+      const relativeScrolling = () => {
+        const rect = this.container.getBoundingClientRect();
+        if (rect.top < 0 && rect.bottom > window.innerHeight) {
+          this.scrollPos = Math.abs(rect.top);
+          requestAnimationFrame(() => this.render());
+        }
+      };
+      window.addEventListener("scroll", relativeScrolling);
+      window.CradovaEvent.after_page_is_killed.push(() => {
+        window.removeEventListener("scroll", relativeScrolling);
+      });
+    }
+    return this.container;
+  }
+  render() {
+    const startIndex = Math.floor(this.scrollPos / this.itemHeight) * this.columns;
+    this.list.style.transform = this.scrollingDirection === "vertical" ? `translateY(${Math.floor(this.scrollPos / this.itemHeight) * this.itemHeight}px)` : `translateX(${Math.floor(this.scrollPos / this.itemHeight) * this.itemHeight}px)`;
+    let renderedNodesCount = (Math.ceil(this.windowCoverage / this.itemHeight) + this.overscan) * this.columns;
+    renderedNodesCount = Math.min(this.length - startIndex, renderedNodesCount);
+    for (;this.list.firstElementChild; )
+      this.list.firstElementChild.remove();
+    let index = 0;
+    for (let i2 = 0;i2 < renderedNodesCount; i2++) {
+      index = i2 + startIndex;
+      if (this.state[index]) {
+        this.list.appendChild(this.item(this.state[index], index));
+      }
+    }
+    if (index + 1 === this.length) {
+      this.opts?.onScrollEnd?.();
+    }
+    this.startIndex = startIndex;
+  }
+  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;
+    let startIndex = Math.floor(this.scrollPos / this.itemHeight) * this.columns;
+    startIndex = Math.floor(startIndex / this.columns) * this.columns;
+    let renderedNodesCount = this.list.childElementCount;
+    if (renderedNodesCount < this.overscan) {
+      this.state = newState;
+      this.render();
+    } else {
+      for (let i2 = 0;i2 < renderedNodesCount; i2++) {
+        const index = i2 + startIndex;
+        if (newState[index] === undefined) {
+          this.list.children[index]?.remove();
+          continue;
+        }
+        const item = this.item(newState[index], index);
+        if (this.list.children[index]) {
+          this.list.replaceChild(item, this.list.children[index]);
+        } else {
+          this.list.appendChild(item);
+        }
+      }
+      this.list.style.transform = this.scrollingDirection === "vertical" ? `translateY(${Math.floor(this.scrollPos / this.itemHeight) * this.itemHeight}px)` : `translateX(${Math.floor(this.scrollPos / this.itemHeight) * this.itemHeight}px)`;
+      this.state = newState;
+    }
+    if (this.length !== newState.length) {
+      this.listContainer.style.height = `${Math.round(this.length * this.itemHeight / this.columns)}px`;
+    }
+    queueMicrotask(() => {
+      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;
@@ -752,6 +855,9 @@ class RouterBoxClass {
       window.location.hash = "paused";
       return;
     }
+    if (url === this.lastNavigatedRoute) {
+      return;
+    }
     if (this.nextRouteController) {
       route = this.nextRouteController;
       this.nextRouteController = undefined;
@@ -954,231 +1060,6 @@ 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,

package/dist/primitives/classes.d.ts

@@ -10,28 +10,28 @@ import type { browserPageType, Comp, CradovaPageType } from "./types.js";
  * @constructor initial: Record<string, any>, props: {persist}
  */
 export declare class Signal<Type extends Record<string, any> = any> {
-    store: Type;
-    silentStore: Type extends Array<any> ? never : Type;
+    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?: (() => 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;
+    computed<T extends keyof Type>(eventName: T | "__ALL__" | (() => void) | Comp | ((ctx: Comp) => HTMLElement), listener?: (() => void) | Comp | ((ctx: Comp) => HTMLElement)): HTMLElement | undefined;
     /**
      *  Cradova Signal
      * ----
@@ -45,6 +45,47 @@ export declare class Signal<Type extends Record<string, any> = 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 windowCoverage;
+    private overscan;
+    private scrollingDirection;
+    private opts?;
+    private columns;
+    private rendered;
+    subscribers: Function[];
+    scrollPos: number;
+    list: HTMLElement;
+    startIndex: number;
+    listContainer: HTMLElement;
+    constructor(state: T[], item?: (item: T, i: number) => HTMLElement, opts?: {
+        itemHeight?: number;
+        className?: string;
+        columns?: number;
+        windowHeight?: number;
+        windowWidth?: number;
+        overscan?: number;
+        scrollingDirection?: "vertical" | "horizontal";
+        onScrollEnd?: () => void;
+    });
+    get Element(): HTMLElement;
+    private render;
+    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
  * ---
@@ -107,10 +148,7 @@ export declare class Router {
     /**
      * Cradova Router
      * ------
-     *
      * return last set router params
-     *
-     * .
      */
     static get PageData(): {
         params: Record<string, string>;
@@ -141,39 +179,3 @@ export declare class RefInstance<T = unknown> {
      */
     bind(name: string): [RefInstance<T>, string];
 }
-/**
- * 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

@@ -2,11 +2,10 @@ import * as CSS from "csstype";
 import { Page, RefInstance, Signal } from "./classes.js";
 interface Attributes<E extends HTMLElement> {
     ref?: [RefInstance<any>, string];
-    value?: any;
     style?: Partial<CSS.Properties>;
-    [key: `data-${string}`]: string | undefined;
-    [key: `aria-${string}`]: string | undefined;
-    [key: `on${string}`]: ((this: E, event: StandardEvents) => void) | undefined;
+    [key: `data-${string}`]: string;
+    [key: `aria-${string}`]: string;
+    [key: `on${string}`]: (this: E, event: StandardEvents) => void;
 }
 type StandardEvents = KeyboardEvent | MouseEvent | TouchEvent | WheelEvent | DragEvent | ClipboardEvent | CompositionEvent | FocusEvent | InputEvent | AnimationEvent | TransitionEvent | Event;
 type OmitFunctions<E> = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cradova",
-  "version": "3.14.0",
+  "version": "3.15.1",
   "description": "Build Powerful ⚡ Web Apps with Ease",
   "main": "dist/index.js",
   "type": "module",
@@ -55,7 +55,8 @@
   },
   "homepage": "https://github.com/CodeDynasty-dev/cradova",
   "dependencies": {
-    "csstype": "^3.1.3"
+    "csstype": "^3.1.3",
+    "virtualized-list": "^2.2.0"
   },
   "docmach": {
     "docs-directory": "docs/docs",