@chronocide/hyper 1.0.1 → 1.1.1

package/dist/hyper.d.ts

@@ -1,6 +1,6 @@
 type CellOptions<T> = {
     /** If empty, equal to container width */
-    width?: number | ((data: T, i: number, arr: T[]) => number | null);
+    width?: number | ((data: T, i: number, arr: T[]) => number | null) | null;
     /** If true, cells do not fill container width */
     gap?: boolean;
     height: number | ((data: T, i: number, arr: T[]) => number);
@@ -34,7 +34,10 @@ declare const svg: <T extends keyof SVGElementTagNameMap>(tag: T) => <P extends
 declare const mathml: <T extends keyof MathMLElementEventMap>(tag: T) => <P extends Attributes>(attributes?: P) => (...children: Child[]) => MathMLElement;
 declare const xml: (tag: string) => <P extends Attributes>(attributes?: P) => (...children: Child[]) => HTMLElement;
 declare const list: <T extends Json>(render: (x: T, i: number, arr: T[]) => Element) => (root: Element) => (next: T[]) => void;
-declare const virtual: <T>(cell: CellOptions<T>) => (render: (i: number) => HTMLElement) => (root: HTMLElement) => {
+declare const virtual: <T>(cell: CellOptions<T>) => (render: (x: T, i: {
+    real: number;
+    virtual: number;
+}, arr: T[]) => HTMLElement) => (root: HTMLElement) => {
     update: (next: T[]) => void;
     scrollTo: (i: number) => void;
 };

package/dist/hyper.js

@@ -73,7 +73,9 @@ const bisectRight = (arr) => (n) => {
 const cells = (cell) => (container) => (data) => fill(data.length)((i, arr) => {
   const prev = get(arr)(i - 1);
   const height2 = typeof cell.height === "number" ? cell.height : cell.height(data[i], i, data);
-  let width = typeof cell.width === "number" ? cell.width : cell.width?.(data[i], i, data) ?? container.width;
+  let width = container.width;
+  if (typeof cell.width === "number") width = cell.width;
+  if (typeof cell.width === "function") width = cell.width(data[i], i, data) ?? container.width;
   if (!cell.gap) {
     const rows = Math.max(1, Math.floor(container.width / width));
     width = Math.floor(container.width / rows);
@@ -190,8 +192,8 @@ const virtual$1 = (env) => (cell) => (render) => (root) => {
         "z-index": "-1"
       }
     })();
-    root.replaceChildren(...cache.slice(min, max + 1).map((cell2) => {
-      const child = render(cell2.i);
+    root.replaceChildren(...cache.slice(min, max + 1).map((cell2, j) => {
+      const child = render(state[cell2.i], { real: cell2.i, virtual: j }, state);
       style(child)({
         position: "absolute",
         transform: `translate(${cell2.x}px, ${cell2.y}px)`,
@@ -202,7 +204,7 @@ const virtual$1 = (env) => (cell) => (render) => (root) => {
     }), spacer);
   });
   root.addEventListener("scroll", () => update(false), { passive: true });
-  root.addEventListener("resize", () => update(true), { passive: true });
+  env.window.addEventListener("resize", () => update(true), { passive: true });
   return {
     update: (next) => {
       state = next;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chronocide/hyper",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "type": "module",
   "types": "dist/hyper.d.ts",
   "exports": {