react-layout-virtual 0.0.1

package/README.md

@@ -0,0 +1,6 @@
+# react-layout-virtual
+
+React virtual scrolling component for responsive lists and grids with dynamic item sizes.
+
+- Homepage: [https://itihon.github.io/layout-virtual/](https://itihon.github.io/layout-virtual/)
+- GitHub: [https://github.com/itihon/layout-virtual](https://github.com/itihon/layout-virtual)

package/dist/ReactLayoutVirtual.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @fileoverview VirtualizedList React component.
+ * @license MIT
+ * @author Alexandr Kalabin
+ */
+import React from 'react';
+export interface ListItemProps<T = unknown> {
+    data: T;
+    ref: React.Ref<HTMLDivElement> | undefined;
+    index: number;
+}
+export interface VirtualizedListReactProps<T> {
+    scrollerRef?: React.RefObject<HTMLDivElement>;
+    overscanHeight?: number;
+    data: T[];
+    renderItem: (props: ListItemProps<T>) => React.ReactNode;
+}
+export default function VirtualizedListReact<T>(props: VirtualizedListReactProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/ReactRenderer.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @fileoverview ReactRenderer.
+ * @license MIT
+ * @author Alexandr Kalabin
+ */
+import { ScrollableContainer } from "layout-virtual";
+import type { IRangeRenderer, ScrollDirection, IItemStore, IItem, VirtualScrollStructure } from "layout-virtual/types";
+type ReactRendererOptions = {
+    itemsSetter: React.Dispatch<React.SetStateAction<React.ReactNode[]>>;
+} & VirtualScrollStructure;
+interface IReactRenderer {
+    commit: () => void;
+}
+export default class ReactRenderer implements IRangeRenderer, IReactRenderer {
+    private _store;
+    private _scrollableContainer;
+    private _renderedIndexRegistry;
+    private _renderedItemsRegistry;
+    private _itemsSetter;
+    private _renderedRangeRefPool;
+    private _listItems;
+    private _flushItems;
+    private _getRenderedBoundaryIndex;
+    constructor(opts: ReactRendererOptions);
+    render(startIndex: number, endIndex: number, direction: ScrollDirection): number;
+    renderRange(startIndex: number, endIndex: number, direction: ScrollDirection): void;
+    removeRange(startIndex: number, endIndex: number, direction: ScrollDirection): number;
+    clear(): void;
+    getIndex(item: Element): number | undefined;
+    getItem(index: number): Element | undefined;
+    get scrollableContainer(): ScrollableContainer;
+    attach(store: IItemStore<IItem>): void;
+    flush(): Promise<void>;
+    commit(): void;
+}
+export {};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @fileoverview Package entry point
+ * @license MIT
+ * @author Alexandr Kalabin
+ */
+export { default } from './ReactLayoutVirtual';

package/dist/index.js

@@ -0,0 +1,372 @@
+import re, { useRef as g, useState as te, useLayoutEffect as ne, useEffect as se } from "react";
+import { flushSync as oe, createPortal as ae } from "react-dom";
+import le, { ScrollableContainer as ie, ArrayItemStore as ce, DynamicListLayout as ue } from "layout-virtual";
+var O = { exports: {} }, y = {};
+var V;
+function fe() {
+  if (V) return y;
+  V = 1;
+  var v = /* @__PURE__ */ Symbol.for("react.transitional.element"), t = /* @__PURE__ */ Symbol.for("react.fragment");
+  function c(l, n, o) {
+    var s = null;
+    if (o !== void 0 && (s = "" + o), n.key !== void 0 && (s = "" + n.key), "key" in n) {
+      o = {};
+      for (var i in n)
+        i !== "key" && (o[i] = n[i]);
+    } else o = n;
+    return n = o.ref, {
+      $$typeof: v,
+      type: l,
+      key: s,
+      ref: n !== void 0 ? n : null,
+      props: o
+    };
+  }
+  return y.Fragment = t, y.jsx = c, y.jsxs = c, y;
+}
+var S = {};
+var z;
+function de() {
+  return z || (z = 1, process.env.NODE_ENV !== "production" && (function() {
+    function v(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === Q ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case T:
+          return "Fragment";
+        case j:
+          return "Profiler";
+        case P:
+          return "StrictMode";
+        case J:
+          return "Suspense";
+        case B:
+          return "SuspenseList";
+        case Z:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case w:
+            return "Portal";
+          case G:
+            return e.displayName || "Context";
+          case I:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case H:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case X:
+            return r = e.displayName || null, r !== null ? r : v(e.type) || "Memo";
+          case A:
+            r = e._payload, e = e._init;
+            try {
+              return v(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function t(e) {
+      return "" + e;
+    }
+    function c(e) {
+      try {
+        t(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var u = r.error, d = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return u.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          d
+        ), t(e);
+      }
+    }
+    function l(e) {
+      if (e === T) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === A)
+        return "<...>";
+      try {
+        var r = v(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function n() {
+      var e = C.A;
+      return e === null ? null : e.getOwner();
+    }
+    function o() {
+      return Error("react-stack-top-frame");
+    }
+    function s(e) {
+      if (Y.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function i(e, r) {
+      function u() {
+        F || (F = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          r
+        ));
+      }
+      u.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: u,
+        configurable: !0
+      });
+    }
+    function a() {
+      var e = v(this.type);
+      return $[e] || ($[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function f(e, r, u, d, k, L) {
+      var m = u.ref;
+      return e = {
+        $$typeof: b,
+        type: e,
+        key: r,
+        props: u,
+        _owner: d
+      }, (m !== void 0 ? m : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: a
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: k
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: L
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function _(e, r, u, d, k, L) {
+      var m = r.children;
+      if (m !== void 0)
+        if (d)
+          if (K(m)) {
+            for (d = 0; d < m.length; d++)
+              R(m[d]);
+            Object.freeze && Object.freeze(m);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else R(m);
+      if (Y.call(r, "key")) {
+        m = v(e);
+        var x = Object.keys(r).filter(function(ee) {
+          return ee !== "key";
+        });
+        d = 0 < x.length ? "{key: someKey, " + x.join(": ..., ") + ": ...}" : "{key: someKey}", U[m + d] || (x = 0 < x.length ? "{" + x.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          d,
+          m,
+          x,
+          m
+        ), U[m + d] = !0);
+      }
+      if (m = null, u !== void 0 && (c(u), m = "" + u), s(r) && (c(r.key), m = "" + r.key), "key" in r) {
+        u = {};
+        for (var M in r)
+          M !== "key" && (u[M] = r[M]);
+      } else u = r;
+      return m && i(
+        u,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), f(
+        e,
+        m,
+        u,
+        n(),
+        k,
+        L
+      );
+    }
+    function R(e) {
+      E(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === A && (e._payload.status === "fulfilled" ? E(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function E(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === b;
+    }
+    var p = re, b = /* @__PURE__ */ Symbol.for("react.transitional.element"), w = /* @__PURE__ */ Symbol.for("react.portal"), T = /* @__PURE__ */ Symbol.for("react.fragment"), P = /* @__PURE__ */ Symbol.for("react.strict_mode"), j = /* @__PURE__ */ Symbol.for("react.profiler"), I = /* @__PURE__ */ Symbol.for("react.consumer"), G = /* @__PURE__ */ Symbol.for("react.context"), H = /* @__PURE__ */ Symbol.for("react.forward_ref"), J = /* @__PURE__ */ Symbol.for("react.suspense"), B = /* @__PURE__ */ Symbol.for("react.suspense_list"), X = /* @__PURE__ */ Symbol.for("react.memo"), A = /* @__PURE__ */ Symbol.for("react.lazy"), Z = /* @__PURE__ */ Symbol.for("react.activity"), Q = /* @__PURE__ */ Symbol.for("react.client.reference"), C = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Y = Object.prototype.hasOwnProperty, K = Array.isArray, N = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    p = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var F, $ = {}, D = p.react_stack_bottom_frame.bind(
+      p,
+      o
+    )(), W = N(l(o)), U = {};
+    S.Fragment = T, S.jsx = function(e, r, u) {
+      var d = 1e4 > C.recentlyCreatedOwnerStacks++;
+      return _(
+        e,
+        r,
+        u,
+        !1,
+        d ? Error("react-stack-top-frame") : D,
+        d ? N(l(e)) : W
+      );
+    }, S.jsxs = function(e, r, u) {
+      var d = 1e4 > C.recentlyCreatedOwnerStacks++;
+      return _(
+        e,
+        r,
+        u,
+        !0,
+        d ? Error("react-stack-top-frame") : D,
+        d ? N(l(e)) : W
+      );
+    };
+  })()), S;
+}
+var q;
+function me() {
+  return q || (q = 1, process.env.NODE_ENV === "production" ? O.exports = fe() : O.exports = de()), O.exports;
+}
+var h = me();
+class _e {
+  _store = null;
+  _scrollableContainer;
+  _renderedIndexRegistry = /* @__PURE__ */ new Map();
+  _renderedItemsRegistry = /* @__PURE__ */ new Map();
+  _itemsSetter;
+  _renderedRangeRefPool = /* @__PURE__ */ new Map();
+  _listItems = [];
+  _flushItems = () => {
+    this._itemsSetter(this._listItems);
+  };
+  _getRenderedBoundaryIndex(t) {
+    const c = t === "first" ? this._scrollableContainer.getFirstItem() : t === "last" ? this._scrollableContainer.getLastItem() : null;
+    if (c)
+      return this.getIndex(c);
+  }
+  constructor(t) {
+    this._scrollableContainer = new ie({ ...t }), this._itemsSetter = t.itemsSetter;
+  }
+  render(t, c, l) {
+    const n = this._getRenderedBoundaryIndex("first"), o = this._getRenderedBoundaryIndex("last");
+    let s = t, i = c, a = n, f = o, _ = 0;
+    return l === "down" ? (console.log("SCROLLING DOWN"), a !== void 0 && o !== void 0 && (f = Math.min(s - 1, o), s = Math.max(o + 1, s), a <= f && (_ = this.removeRange(a, f, l)))) : l === "up" && (console.log("SCROLLING UP"), f !== void 0 && n !== void 0 && (a = Math.max(i + 1, n), i = Math.min(n - 1, i), a <= f && (_ = this.removeRange(a, f, l)))), s < i && this.renderRange(s, i, l), _;
+  }
+  renderRange(t, c, l) {
+    console.log("_renderRange", t, c, l), t > c && console.error("_renderRange", t, c, l);
+    const n = this._store, o = this._listItems, s = [], i = this._renderedRangeRefPool;
+    if (n) {
+      for (let a = t; a <= c; a++) {
+        const f = n.getByIndex(a);
+        if (f) {
+          const _ = f.render, R = i.get(a) || { current: null, idx: a };
+          i.set(a, R), s.push(/* @__PURE__ */ h.jsx(_, { data: f.data, ref: R, index: a }, a));
+        }
+      }
+      this._listItems = l === "down" ? o.concat(s) : l === "up" ? s.concat(o) : this._listItems;
+    }
+  }
+  removeRange(t, c, l) {
+    const n = this._renderedIndexRegistry, o = this._renderedItemsRegistry;
+    let s = 0, i = 1 / 0, a = 0;
+    for (let f = t; f <= c; f++) {
+      const _ = o.get(f);
+      if (_) {
+        const { offsetTop: R, offsetHeight: E } = _;
+        i = Math.min(i, R), a = Math.max(a, R + E), o.delete(f), n.delete(_), s++;
+      }
+    }
+    return s && (this._listItems = l === "down" ? this._listItems.slice(s) : l === "up" ? this._listItems.slice(0, -s) : this._listItems), console.log("_removeItems startIndex:", t, "endIndex:", c, "removedHeight:", a > i ? a - i : 0, "removedItemsCount:", s), a > i ? a - i : 0;
+  }
+  clear() {
+    this._renderedIndexRegistry.clear(), this._renderedItemsRegistry.clear(), this._listItems = [], this._itemsSetter(this._listItems);
+  }
+  getIndex(t) {
+    return this._renderedIndexRegistry.get(t);
+  }
+  getItem(t) {
+    return this._renderedItemsRegistry.get(t);
+  }
+  get scrollableContainer() {
+    return this._scrollableContainer;
+  }
+  attach(t) {
+    this._store = t;
+  }
+  flush() {
+    return oe(this._flushItems), Promise.resolve();
+  }
+  commit() {
+    const t = this._renderedIndexRegistry, c = this._renderedItemsRegistry, l = this._renderedRangeRefPool;
+    for (const n of l.values()) {
+      const { idx: o, current: s } = n;
+      s && (t.set(s, o), c.set(o, s));
+    }
+    l.clear();
+  }
+}
+function ge(v) {
+  const { overscanHeight: t = 200, data: c, renderItem: l, scrollerRef: n } = v, o = n || g(null), s = g(null), i = g(null), a = g(null), f = g(null), _ = g(null), R = g(null), [E, p] = te([]), b = g(void 0);
+  ne(() => {
+    b.current = new _e({
+      container: o.current,
+      scrollHeightFiller: s.current,
+      viewportContainer: i.current,
+      scrollCanvas: a.current,
+      topSpacer: f.current,
+      contentLayer: _.current,
+      bottomSpacer: R.current,
+      itemsSetter: p
+    });
+    const T = new ce(), P = new ue({ overscanHeight: t, renderer: b.current }), j = new le({ store: T, layout: P });
+    for (let I = 0; I < c.length; I++)
+      j.insert({ data: c[I], render: l }, I);
+  }, []), se(() => {
+    b.current?.commit();
+  }, [E]);
+  const w = /* @__PURE__ */ h.jsxs(h.Fragment, { children: [
+    /* @__PURE__ */ h.jsx("div", { ref: s }),
+    /* @__PURE__ */ h.jsx("div", { ref: i, children: /* @__PURE__ */ h.jsxs("div", { ref: a, children: [
+      /* @__PURE__ */ h.jsx("div", { ref: f }),
+      /* @__PURE__ */ h.jsx("div", { ref: _, children: E }),
+      /* @__PURE__ */ h.jsx("div", { ref: R })
+    ] }) })
+  ] });
+  return n && n.current ? ae(w, n.current) : /* @__PURE__ */ h.jsx("div", { ref: o, children: w });
+}
+export {
+  ge as default
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "react-layout-virtual",
+  "version": "0.0.1",
+  "description": "React virtual scrolling component for responsive lists and grids with dynamic item sizes.",
+  "keywords": [
+    "virtual",
+    "virtualized",
+    "list",
+    "grid",
+    "window",
+    "scroll",
+    "react"
+  ],
+  "homepage": "https://itihon.github.io/layout-virtual/",
+  "bugs": {
+    "url": "https://github.com/itihon/layout-virtual/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/itihon/layout-virtual.git"
+  },
+  "license": "MIT",
+  "author": "Alexandr Kalabin",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "browser": "dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "test": "test",
+    "build": "npm run build:bundle && npm run build:types",
+    "build:bundle": "vite build",
+    "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly"
+  },
+  "dependencies": {
+    "layout-virtual": "0.0.1"
+  },
+  "peerDependencies": {
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5"
+  },
+  "devDependencies": {}
+}