cradova 3.15.0 → 3.15.2

package/dist/index.js

@@ -605,82 +605,93 @@ class List {
   state;
   item;
   length;
-  options;
-  renderingRange;
+  itemHeight = 35;
+  windowCoverage = 500;
+  overscan = 20;
+  scrollingDirection = "vertical";
+  opts;
+  columns = 1;
   container;
-  firstItemIndex = 0;
-  lastItemIndex = 0;
   rendered = false;
   subscribers = [];
-  constructor(state, item, options) {
+  scrollPos = 0;
+  list;
+  startIndex = 0;
+  listContainer;
+  constructor(state, item, opts) {
     this.state = state;
-    this.item = item || ((item2) => div(String(item2)));
+    this.item = item || ((item2, i2) => div(String(item2) + " " + i2));
     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;
-    }
+    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) {
-      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);
-            }
-          }
-        });
+    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);
       });
-      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;
   }
+  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`);
@@ -704,34 +715,41 @@ class List {
   }
   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);
+    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;
     }
-    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?.();
-      }
+    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() {

package/dist/primitives/classes.d.ts

@@ -52,14 +52,29 @@ export declare class Signal<Type extends Record<string, any> = any> {
  */
 export declare class List<T> {
     length: number;
+    private windowCoverage;
+    private overscan;
+    private scrollingDirection;
+    private opts?;
+    private columns;
     private rendered;
     subscribers: Function[];
-    constructor(state: T[], item?: (item: T) => HTMLElement, options?: {
-        itemHeight: number;
+    scrollPos: number;
+    list: HTMLElement;
+    startIndex: number;
+    listContainer: HTMLElement;
+    constructor(state: T[], item?: (item: T, i: number) => HTMLElement, opts?: {
+        itemHeight?: number;
         className?: string;
-        id?: 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>;

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.15.0",
+  "version": "3.15.2",
   "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",