@af-utils/virtual-react - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

lib/bundlesize.index.js

@@ -1,4 +0,4 @@
-export const raw = 5064;
-export const min = 2375;
-export const minGz = 1162;
-export const minBrotli = 1046;
+export const raw = 5642;
+export const min = 2407;
+export const minGz = 1184;
+export const minBrotli = 1069;

lib/index.d.ts

@@ -9,5 +9,4 @@ /**
 import type { ComponentProps } from 'react';
-import type { ElementType } from 'react';
-import { JSX as JSX_2 } from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import { ElementType } from 'react';
+import type { ReactNode } from 'react';
 import type { ScrollElement } from '@af-utils/virtual-core';
@@ -24,3 +23,3 @@ import { VirtualScroller } from '@af-utils/virtual-core';
  */
-export declare const List: <T extends ElementType = "div">({ model, children: Item, itemData, component, header, footer, getKey, tabIndex, style, ...props }: ListProps<T>) => JSX_2.Element;
+export declare const List: <T extends ElementType = "div">(props: ListProps<T>) => JSX.Element;
 
@@ -31,9 +30,9 @@ /**
  */
-export declare type ListItemProps = {
+export declare interface ListItemProps {
     model: VirtualScroller;
-    /** index */
+    /** item index */
     i: number;
     data?: any;
     offset?: number;
-};
+}
 
@@ -57,2 +56,4 @@ /**
  * Map current visible items
+ * @param model - {@link @af-utils/virtual-core#VirtualScroller} instance
+ * @param cb - callback, returning ONLY ONE react element
  */
@@ -64,3 +65,8 @@ export declare const mapVisibleRange: (model: VirtualScroller, cb: (index: number) => JSX.Element) => JSX.Element[];
  * Map current visible items and provide offset for each item.
+ *
+ * @remarks
  * Used in scenarios, when each item is absolutely positioned
+ *
+ * @param model - {@link @af-utils/virtual-core#VirtualScroller} instance
+ * @param cb - callback, returning ONLY ONE react element
  */
@@ -72,2 +78,3 @@ export declare const mapVisibleRangeWithOffset: (model: VirtualScroller, cb: (index: number, offset: number) => JSX.Element) => JSX.Element[];
  * React component.
+ * {@link SubscriptionProps}.
  * Rerenders only on certain {@link @af-utils/virtual-core#(VirtualScrollerEvent:variable)}.
@@ -82,7 +89,7 @@ * Allows to optimize performance.
  */
-export declare type SubscriptionProps = {
+export declare interface SubscriptionProps {
     model: VirtualScroller;
     children: () => ReactNode;
     events?: readonly VirtualScrollerEvent[] | VirtualScrollerEvent[];
-};
+}
 
@@ -100,3 +107,6 @@ /**
  * React hook.
- * Synchronizes scroller with model. Should be used in window-scroll cases, otherwise `ref={model.setScroller}` is preferrable.
+ * Synchronizes scroller with model.
+ *
+ * @remarks
+ * Should be used in window-scroll cases, otherwise `ref={el => model.setScroller( el )}` is preferrable.
  */
@@ -109,3 +119,9 @@ export declare const useScroller: (model: VirtualScroller, scroller: ScrollElement | null) => void;
  * Allows to subscribe to {@link @af-utils/virtual-core#(VirtualScrollerEvent:variable)} without unnecessary rerenders.
+ *
+ * @remarks
  * For example can be used in load-on-demand.
+ *
+ * @param model - {@link @af-utils/virtual-core#VirtualScroller} instance
+ * @param events - array of {@link @af-utils/virtual-core#VirtualScrollerEvent} to subscribe
+ * @param callBack - callback to be called
  */
@@ -112,0 +128,0 @@ export declare const useSubscription: (model: VirtualScroller, events: readonly VirtualScrollerEvent[] | VirtualScrollerEvent[], callBack: () => void) => void;

lib/index.js

 import { jsxs as t, jsx as e } from "react/jsx-runtime";
 
-import { useState as o, useLayoutEffect as r, useMemo as n, useEffect as i, useRef as s } from "react";
+import { useState as o, useLayoutEffect as r, useMemo as n, useCallback as i, useEffect as s, useRef as l } from "react";
 
-import { VirtualScrollerEvent as l, _ALL_EVENTS as c, VirtualScroller as a } from "@af-utils/virtual-core";
+import { VirtualScrollerEvent as c, _ALL_EVENTS as a, VirtualScroller as h } from "@af-utils/virtual-core";
 
-import { useSyncExternalStore as h } from "use-sync-external-store/shim";
+import { useSyncExternalStore as f } from "use-sync-external-store/shim";
 
@@ -12,11 +12,13 @@ /**
  * Map current visible items
- */ const f = (t, e) => {
+ * @param model - {@link @af-utils/virtual-core#VirtualScroller} instance
+ * @param cb - callback, returning ONLY ONE react element
+ */ const d = (t, e) => {
     const o = [];
     for (let r = t.from, n = t.to; n > r; r++) o.push(e(r));
     return o;
-}, d = (t, e) => {
+}, u = (t, e) => {
     const o = [];
     for (let r = t.from, n = t.to, i = t.getOffset(r); n > r; r++, i += t.getSize(r)) o.push(e(r, i));
     return o;
-}, u = {
+}, m = {
     position: "relative",
@@ -27,9 +29,9 @@ overflow: "hidden",
     zIndex: -1
-}, m = {
-    ...u,
+}, p = {
+    ...m,
     height: "100%"
-}, p = {
-    ...u,
+}, S = {
+    ...m,
     width: "100%"
-}, S = {
+}, v = {
     position: "absolute",
@@ -40,11 +42,11 @@ contain: "strict",
     left: 0
-}, v = {
-    ...S,
+}, g = {
+    ...v,
     display: "flex",
     height: "100%"
-}, g = {
-    ...S,
+}, y = {
+    ...v,
     display: "block",
     width: "100%"
-}, y = t => {
+}, x = t => {
     const [e, n] = o(null), [i, s] = o(null);
@@ -55,7 +57,7 @@ return r((() => {
                 e.style[t.horizontal ? "width" : "height"] = t.scrollSize + "px";
-            }), [ l.SCROLL_SIZE ]), r = t.on((() => {
+            }), [ c.SCROLL_SIZE ]), r = t.on((() => {
                 const e = t.getOffset(t.from), o = t.getOffset(t.to);
                 i.style.transform = `translate${t.horizontal ? "X" : "Y"}(${e}px)`, i.style[t.horizontal ? "width" : "height"] = o - e + "px";
-            }), [ l.RANGE, l.SIZES ]);
-            return Object.assign(e.style, t.horizontal ? m : p), Object.assign(i.style, t.horizontal ? v : g), 
+            }), [ c.RANGE, c.SIZES ]);
+            return Object.assign(e.style, t.horizontal ? p : S), Object.assign(i.style, t.horizontal ? g : y), 
             () => {
@@ -71,10 +73,15 @@ o(), r();
  * Map current visible items and provide offset for each item.
+ *
+ * @remarks
  * Used in scenarios, when each item is absolutely positioned
- */ function x(t) {
+ *
+ * @param model - {@link @af-utils/virtual-core#VirtualScroller} instance
+ * @param cb - callback, returning ONLY ONE react element
+ */ function z(t) {
     switch (t) {
-      case l.RANGE:
+      case c.RANGE:
         return this.to ** 2 + this.from;
 
         // szudzik pair
-              case l.SCROLL_SIZE:
+              case c.SCROLL_SIZE:
         return this.scrollSize;
@@ -92,35 +99,35 @@
  * Usually {@link Subscription} is a better alternative
- */ const z = function(t, e) {
-    void 0 === e && (e = c);
-    const [o, r] = n((() => [ o => t.on(o, e), () => e.map(x, t).join() ]), [ t, e ]);
-    h(o, r, r);
-}, w = t => (z(t.model, t.events), t.children()), E = o => {
-    let {model: r, children: n, itemData: i, component: s, header: c = null, footer: a = null, getKey: h = (t => t), tabIndex: d = -1, style: u, ...m} = o;
-    const p = s || "div", [S, v] = y(r);
-    return t(p, {
-        ...m,
+ */ const w = function(t, e) {
+    void 0 === e && (e = a);
+    const [o, r] = n((() => [ o => t.on(o, e), () => e.map(z, t).join() ]), [ t, e ]);
+    f(o, r, r);
+}, E = t => (w(t.model, t.events), t.children()), I = o => {
+    let {model: r, children: n, itemData: s, component: l, header: a = null, footer: h = null, getKey: f = (t => t), tabIndex: u = -1, style: m, ...p} = o;
+    const S = l || "div", [v, g] = x(r);
+    return t(S, {
+        ...p,
         style: {
             overflow: "auto",
             contain: "strict",
-            ...u
+            ...m
         },
-        ref: r.setScroller,
-        tabIndex: d,
-        children: [ c, e("div", {
-            ref: S,
+        ref: i((t => r.setScroller(t)), [ r ]),
+        tabIndex: u,
+        children: [ a, e("div", {
+            ref: v,
             children: e("div", {
-                ref: v,
-                children: e(w, {
+                ref: g,
+                children: e(E, {
                     model: r,
-                    events: [ l.RANGE ],
-                    children: () => f(r, (t => e(n, {
+                    events: [ c.RANGE ],
+                    children: () => d(r, (t => e(n, {
                         model: r,
                         i: t,
-                        data: i
-                    }, h(t, i))))
+                        data: s
+                    }, f(t, s))))
                 })
             })
-        }), a ]
+        }), h ]
     });
-}, I = process.env.__IS_SERVER__ ? i : r, O = (t, e) => I((() => (t.setScroller(e), 
+}, O = process.env.__IS_SERVER__ ? s : r, R = (t, e) => O((() => (t.setScroller(e), 
 () => t.setScroller(null))), [ t, e ])
@@ -131,4 +138,10 @@ /**
  * Allows to subscribe to {@link @af-utils/virtual-core#(VirtualScrollerEvent:variable)} without unnecessary rerenders.
+ *
+ * @remarks
  * For example can be used in load-on-demand.
- */ , R = (t, e, o) => i((() => {
+ *
+ * @param model - {@link @af-utils/virtual-core#VirtualScroller} instance
+ * @param events - array of {@link @af-utils/virtual-core#VirtualScrollerEvent} to subscribe
+ * @param callBack - callback to be called
+ */ , _ = (t, e, o) => s((() => {
     if (o) return o(), t.on(o, e);
@@ -144,3 +157,3 @@ }), [ t, o, e ])
  * @returns same {@link @af-utils/virtual-core#VirtualScroller} instance
- */ , _ = t => s().current ||= new a(t)
+ */ , b = t => l().current ||= new h(t)
 /**
@@ -152,5 +165,5 @@ * @public
  * @returns same {@link @af-utils/virtual-core#VirtualScroller} instance
- */ , b = t => {
-    const e = _(t);
-    return I((() => e.set(t))), e;
+ */ , j = t => {
+    const e = b(t);
+    return O((() => e.set(t))), e;
 };
@@ -161,5 +174,6 @@
  * React component.
+ * {@link SubscriptionProps}.
  * Rerenders only on certain {@link @af-utils/virtual-core#(VirtualScrollerEvent:variable)}.
  * Allows to optimize performance.
- */ export { E as List, w as Subscription, f as mapVisibleRange, d as mapVisibleRangeWithOffset, z as useComponentSubscription, O as useScroller, R as useSubscription, y as useSyncedStyles, b as useVirtual, _ as useVirtualModel };
+ */ export { I as List, E as Subscription, d as mapVisibleRange, u as mapVisibleRangeWithOffset, w as useComponentSubscription, R as useScroller, _ as useSubscription, x as useSyncedStyles, j as useVirtual, b as useVirtualModel };
 //# sourceMappingURL=index.js.map

lib/types/components/List/index.d.ts

@@ -1,2 +0,2 @@
-import type { ElementType } from "react";
+import { ElementType } from "react";
 import type { ListProps } from "../../../types";
@@ -9,3 +9,3 @@ /**
  */
-declare const List: <T extends ElementType = "div">({ model, children: Item, itemData, component, header, footer, getKey, tabIndex, style, ...props }: ListProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const List: <T extends ElementType = "div">(props: ListProps<T>) => JSX.Element;
 export default List;

lib/types/components/Subscription/index.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import type { ReactNode } from "react";
 import type { SubscriptionProps } from "../../../types";
@@ -6,6 +6,7 @@ /**
  * React component.
+ * {@link SubscriptionProps}.
  * Rerenders only on certain {@link @af-utils/virtual-core#(VirtualScrollerEvent:variable)}.
  * Allows to optimize performance.
  */
-declare const Subscription: (props: SubscriptionProps) => import("react").ReactNode;
+declare const Subscription: (props: SubscriptionProps) => ReactNode;
 export default Subscription;

lib/types/hooks/useScroller/index.d.ts

@@ -5,5 +5,8 @@ import type { ScrollElement, VirtualScroller } from "@af-utils/virtual-core";
  * React hook.
- * Synchronizes scroller with model. Should be used in window-scroll cases, otherwise `ref={model.setScroller}` is preferrable.
+ * Synchronizes scroller with model.
+ *
+ * @remarks
+ * Should be used in window-scroll cases, otherwise `ref={el => model.setScroller( el )}` is preferrable.
  */
 declare const useScroller: (model: VirtualScroller, scroller: ScrollElement | null) => void;
 export default useScroller;

lib/types/hooks/useSubscription/index.d.ts

@@ -6,5 +6,11 @@ import { VirtualScroller, VirtualScrollerEvent } from "@af-utils/virtual-core";
  * Allows to subscribe to {@link @af-utils/virtual-core#(VirtualScrollerEvent:variable)} without unnecessary rerenders.
+ *
+ * @remarks
  * For example can be used in load-on-demand.
+ *
+ * @param model - {@link @af-utils/virtual-core#VirtualScroller} instance
+ * @param events - array of {@link @af-utils/virtual-core#VirtualScrollerEvent} to subscribe
+ * @param callBack - callback to be called
  */
 declare const useSubscription: (model: VirtualScroller, events: readonly VirtualScrollerEvent[] | VirtualScrollerEvent[], callBack: () => void) => void;
 export default useSubscription;

lib/types/types/index.d.ts

@@ -7,9 +7,9 @@ import type { ReactNode, ElementType, ComponentProps } from "react";
  */
-export type ListItemProps = {
+export interface ListItemProps {
     model: VirtualScroller;
-    /** index */
+    /** item index */
     i: number;
     data?: any;
     offset?: number;
-};
+}
 /**
@@ -32,6 +32,6 @@ * @public
  */
-export type SubscriptionProps = {
+export interface SubscriptionProps {
     model: VirtualScroller;
     children: () => ReactNode;
     events?: readonly VirtualScrollerEvent[] | VirtualScrollerEvent[];
-};
+}

lib/types/utils/rangeMappers/index.d.ts

@@ -6,2 +6,4 @@ /// <reference types="react" />
  * Map current visible items
+ * @param model - {@link @af-utils/virtual-core#VirtualScroller} instance
+ * @param cb - callback, returning ONLY ONE react element
  */
@@ -12,4 +14,9 @@ export declare const mapVisibleRange: (model: VirtualScroller, cb: (index: number) => JSX.Element) => JSX.Element[];
  * Map current visible items and provide offset for each item.
+ *
+ * @remarks
  * Used in scenarios, when each item is absolutely positioned
+ *
+ * @param model - {@link @af-utils/virtual-core#VirtualScroller} instance
+ * @param cb - callback, returning ONLY ONE react element
  */
 export declare const mapVisibleRangeWithOffset: (model: VirtualScroller, cb: (index: number, offset: number) => JSX.Element) => JSX.Element[];

package.json

 {
   "name": "@af-utils/virtual-react",
   "private": false,
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "React components and hooks for rendering large scrollable data",
@@ -41,4 +41,4 @@ "repository": "https://github.com/nowaalex/af-utils.git",
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.22.15",
-    "@babel/preset-env": "^7.22.20",
+    "@babel/plugin-transform-runtime": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
     "@rollup/plugin-babel": "^6.0.4",
@@ -52,3 +52,3 @@ "@rollup/plugin-commonjs": "^25.0.5",
     "@types/node": "^20.8.4",
-    "@types/react": "^18.2.27",
+    "@types/react": "^18.2.28",
     "@types/use-sync-external-store": "^0.0.4",
@@ -64,3 +64,3 @@ "jest": "^29.7.0",
   "dependencies": {
-    "@af-utils/virtual-core": "0.0.3"
+    "@af-utils/virtual-core": "0.0.4"
   },
@@ -67,0 +67,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

36316

increased by6.85%

Lines of code

457

increased by11.46%

Dependency changes

• + Added@af-utils/scrollend-polyfill@0.0.2(transitive)

• + Added@af-utils/virtual-core@0.0.4(transitive)

• - Removed@af-utils/virtual-core@0.0.3(transitive)

• Updated@af-utils/virtual-core@0.0.4