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

Comparing version 0.0.46 to 0.0.47

lib/bundlesize.index.js

@@ -1,4 +0,4 @@
-export const raw = 8197;
-export const min = 4653;
-export const minGz = 2100;
-export const minBrotli = 1900;
+export const raw = 8487;
+export const min = 4663;
+export const minGz = 2101;
+export const minBrotli = 1907;

lib/index.js

@@ -1,2 +0,2 @@
-import { useRef as t, useEffect as s, useLayoutEffect as i, useMemo as h } from "react";
+import { useRef as t, useLayoutEffect as s, useEffect as i, useMemo as h } from "react";
 
@@ -10,3 +10,17 @@ import { useSyncExternalStore as e } from "use-sync-external-store/shim";
     return h;
-}, r = 0, n = 1, l = 2, c = [ 0, 1, 2 ], f = ResizeObserver, u = t => t(), a = new Set, m = {
+}, r = 0, n = 1, c = 2, l = [ 0, 1, 2 ], u = "test" === process.env.NODE_ENV ? class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+} : ResizeObserver, a = t => t(), f = (t, s) => {
+    const i = t.length + 1, h = new s(i);
+    h.set(t, 1);
+    for (let t, s = 1; i > s; s++) t = s + (s & -s), i > t && (h[t] += h[s]);
+    return h;
+}, m = (t, s, i, h) => {
+    for (;h > s; s += s & -s) t[s] += i;
+}, p = (t, s, i) => {
+    for (;i > s; s += s & -s) ;
+    return Math.min(s, t.length);
+}, d = new Set, w = {
     t: 0,
@@ -17,13 +31,6 @@ i() {
     h() {
-        0 == --this.t && (a.forEach(u), a.clear());
+        0 == --this.t && (d.forEach(a), d.clear());
     },
-    o: t => a.add(t)
-}, p = Uint32Array, d = new p(0), w = t => {
-    const s = t.length + 1, i = new p(s);
-    i.set(t, 1);
-    for (let t, h = 1; s > h; h++) t = h + (h & -h), s > t && (i[t] += i[h]);
-    return i;
-}, g = (t, s, i, h) => {
-    for (;h > s; s += s & -s) t[s] += i;
-};
+    o: t => d.add(t)
+}, v = Uint32Array, g = new v(0);
 
@@ -37,19 +44,17 @@ class M {
     l(t) {
-        t && (m.i(), this.u += t, this.m -= t, this.scrollSize += t, this.p(1), this.g(), 
-        m.h());
+        t && (w.i(), this.u += t, this.m -= t, this.scrollSize += t, this.p(1), this.v(), 
+        w.h());
     }
     constructor(t) {
-        this.horizontal = !1, this.M = "top", this._ = "scrollTop", this.v = "offsetHeight", 
+        this.horizontal = !1, this.g = "top", this.M = "scrollTop", this._ = "offsetHeight", 
         this.S = 0, this.u = 0, this.T = 0, this.C = 0, this.k = 0, this.F = 0, this.H = 3, 
-        this.I = 40, this.O = null, this.R = d, this.q = d, this.A = 0, this.scrollSize = 0, 
+        this.I = 40, this.O = null, this.R = g, this.q = g, this.A = 0, this.scrollSize = 0, 
         this.from = 0, this.to = 0, this.sizesHash = 0, this.G = new Map, this.L = new Map, 
-        this.U = [ null, null ], this.W = [ 0, 0 ], this.$ = new f((t => {
+        this.U = [ null, null ], this.W = [ 0, 0 ], this.$ = new u((t => {
             let s = 0, i = 0, h = 0;
-            for (const {target: e} of t) s = this.U.indexOf(e), -1 !== s && (i = e[this.v] - this.W[s], 
+            for (const {target: e} of t) s = this.U.indexOf(e), -1 !== s && (i = e[this._] - this.W[s], 
             i && (this.W[s] += i, h += i));
             this.l(h);
-        })), this.j = new f((t => {
-            let s = 0, i = 0, h = 0, e = !1, o = this.from + 1;
-            for (;o < this.to; o += o & -o) ;
-            o = Math.min(o, this.q.length);
+        })), this.j = new u((t => {
+            let s = 0, i = 0, h = 0, e = !1, o = /*@__NOINLINE__*/ p(this.q, this.from + 1, this.to);
             for (const {target: r} of t) s = this.G.get(r), 
@@ -61,5 +66,4 @@ /*
         */
-            s >= this.from && s < this.to && (i = r[this.v] - this.R[s], i && (e = !0, this.R[s] += i, 
-            h += i, g(this.q, s + 1, i, o)));
-            e && (m.i(), 0 !== h && (g(this.q, o, h, this.q.length), this.S += h, this.scrollSize += h, 
+            o > s && (i = r[this._] - this.R[s], i && (e = !0, this.R[s] += i, h += i, m(this.q, s + 1, i, o)));
+            e && (w.i(), 0 !== h && (m(this.q, o, h, this.q.length), this.S += h, this.scrollSize += h, 
             this.p(1), 0 > h && 
@@ -70,3 +74,3 @@ /*
             */
-            this.g())
+            this.v())
             /*
@@ -76,12 +80,9 @@ Modulo is used to prevent sizesHash from growing too much.
             5 % 2 === 5 & 1 && 9 % 4 === 9 & 3
-        */ , this.sizesHash = this.sizesHash + 1 & 1023, this.p(2), m.h());
-        })), this.B = c.map((() => [])), this.D = () => {
-            const t = this.O[this.v] - this.u;
-            t !== this.m && (this.m = t, this.g());
-        }, this.J = new f(this.D), this.K = t => {
-            const s = this.F, i = this.O[this._];
-            i !== s && (this.F = i, this.C = t.timeStamp, i > s ? this.g() : this.N());
-        }, this.setOuterNode = t => {
-            this.O && (this.J.unobserve(this.O), this.O.removeEventListener("scroll", this.K)), 
-            (this.O = t) ? (this.J.observe(t), t.addEventListener("scroll", this.K, {
+        */ , this.sizesHash = this.sizesHash + 1 & 1023, this.p(2), w.h());
+        })), this.B = l.map((() => [])), this.D = () => {
+            const t = this.O[this._] - this.u;
+            t !== this.m && (this.m = t, this.v());
+        }, this.J = new u(this.D), this.setOuterNode = t => {
+            this.O && (this.J.unobserve(this.O), this.O.removeEventListener("scroll", this)), 
+            (this.O = t) ? (this.J.observe(t), t.addEventListener("scroll", this, {
                 passive: !0
@@ -97,3 +98,3 @@ })) : (this.j.disconnect(), this.$.disconnect(), clearTimeout(this.k));
     p(t) {
-        this.B[t].forEach(0 === m.t ? u : m.o);
+        this.B[t].forEach(0 === w.t ? a : w.o);
     }
@@ -121,3 +122,12 @@ getIndex(t) {
     }
-    el(t, s) {
+    /*
+      "scroll" is the only event here, so switch/case is not needed.
+  */    handleEvent(t) {
+        const s = this.F, i = this.O[this.M];
+        i !== s && (this.F = i, this.C = t.timeStamp, i > s ? this.v() : this.K());
+    }
+    /*
+      Performs as destructor when null is passed
+      will ne used as callback, so using =>
+  */    el(t, s) {
         const i = this.L.get(t);
@@ -127,3 +137,3 @@ i && (this.L.delete(t), this.G.delete(i), this.j.unobserve(i)), s && (this.G.set(s, t),
     }
-    P(t, s) {
+    N(t, s) {
         const i = this.U[t];
@@ -134,8 +144,8 @@ i && (this.$.unobserve(i), this.l(-this.W[t]), this.U[t] = null, this.W[t] = 0),
     setStickyHeader(t) {
-        this.P(0, t);
+        this.N(0, t);
     }
     setStickyFooter(t) {
-        this.P(1, t);
+        this.N(1, t);
     }
-    g() {
+    v() {
         /*
@@ -148,3 +158,3 @@ zero itemCount check is not needed here, it is done inside folowing if block
     }
-    N() {
+    K() {
         const t = this.getIndex(this.F);
@@ -158,3 +168,3 @@ t < this.from && (this.from = Math.max(0, t - this.H), this.to = this.T && 1 + this.getIndex(this.F + this.m),
             e !== this.F && (i ||= 5, s && 128 >= performance.now() - this.C || (this.O.scroll({
-                [this.M]: e,
+                [this.g]: e,
                 behavior: s ? "smooth" : "instant"
@@ -166,3 +176,3 @@ }), i--), i && (this.k = setTimeout((() => this.scrollTo(t, s, i)), s ? 512 : 32)));
         let {overscanCount: s, horizontal: i, itemCount: h, estimatedItemSize: e} = t;
-        if (m.i(), e && (
+        if (w.i(), e && (
         // must not be falsy, so not checking for undefined here.
@@ -173,30 +183,28 @@ this.I = e), void 0 !== s && (this.H = s), void 0 !== h && this.T !== h) {
             const t = this.R, s = t.length;
-            h > s && (this.R = new p(Math.min(h + 32, 2147483647)), this.R.set(t), this.q = 
-            /*@__NOINLINE__*/
-            w(this.R.fill(this.I || 40, s))), this.scrollSize = (this.S = this.getOffset(h)) + this.u, 
-            this.p(1), this.to > h && (
+            h > s && (this.R = new v(Math.min(h + 32, 2147483647)), this.R.set(t), this.q = /*@__NOINLINE__*/ f(this.R.fill(this.I || 40, s), v)), 
+            this.scrollSize = (this.S = this.getOffset(h)) + this.u, this.p(1), this.to > h && (
             // Forcing shift range to end
-            this.to = -1), this.g();
+            this.to = -1), this.v();
         }
-        void 0 !== i && this.horizontal !== i && (this.M = (this.horizontal = i) ? "left" : "top", 
-        this._ = i ? "scrollLeft" : "scrollTop", this.v = i ? "offsetWidth" : "offsetHeight", 
+        void 0 !== i && this.horizontal !== i && (this.g = (this.horizontal = i) ? "left" : "top", 
+        this.M = i ? "scrollLeft" : "scrollTop", this._ = i ? "offsetWidth" : "offsetHeight", 
         this.O && 
         /* TODO: Needs testing */
-        this.D(), this.scrollTo(0)), m.h();
+        this.D(), this.scrollTo(0)), w.h();
     }
 }
 
-const _ = s => t().current ||= new M(s), v = i, S = t => {
+const _ = s => t().current ||= new M(s), b = s, S = t => {
     const s = _(t);
-    return v((() => s.set(t))), s;
-}, b = (t, i, h) => s((() => {
-    if (h) return h(), t.on(h, i);
-}), [ h, i ]), y = (t, s) => {
-    s ||= c;
+    return b((() => s.set(t))), s;
+}, y = (t, s, h) => i((() => {
+    if (h) return h(), t.on(h, s);
+}), [ h, s ]), E = (t, s) => {
+    s ||= l;
     // szudzik pair
     const [i, o] = h((() => [ i => t.on(i, s), () => s.reduce(((s, i) => s + "_" + (0 === i ? t.to ** 2 + t.from : 1 === i ? t.scrollSize : t.sizesHash)), "") ]), [ s ]);
     e(i, o, o);
-}, T = t => (y(t.model, t.events), t.children());
+}, T = t => (E(t.model, t.events), t.children());
 
-export { c as EVT_ALL, r as EVT_RANGE, n as EVT_SCROLL_SIZE, l as EVT_SIZES, T as Subscription, o as mapVisibleRange, y as useComponentSubscription, b as useSubscription, S as useVirtual, _ as useVirtualModel };
+export { l as EVT_ALL, r as EVT_RANGE, n as EVT_SCROLL_SIZE, c as EVT_SIZES, T as Subscription, o as mapVisibleRange, E as useComponentSubscription, y as useSubscription, S as useVirtual, _ as useVirtualModel };
 //# sourceMappingURL=index.js.map

lib/index.server.js

@@ -1,6 +0,6 @@
-import { useRef as t, useEffect as s, useLayoutEffect as i, useMemo as h } from "react";
+import { useRef as t, useEffect as s, useMemo as i } from "react";
 
-import { useSyncExternalStore as e } from "use-sync-external-store/shim";
+import { useSyncExternalStore as h } from "use-sync-external-store/shim";
 
-const o = (t, s, i) => {
+const e = (t, s, i) => {
     const h = [];
@@ -10,7 +10,17 @@ let {from: e, to: o} = t;
     return h;
-}, r = 0, n = 1, c = 2, l = [ 0, 1, 2 ], u = class {
+}, o = 0, r = 1, n = 2, c = [ 0, 1, 2 ], l = class {
     observe() {}
     unobserve() {}
     disconnect() {}
-}, a = t => t(), f = new Set, m = {
+}, u = t => t(), a = (t, s) => {
+    const i = t.length + 1, h = new s(i);
+    h.set(t, 1);
+    for (let t, s = 1; i > s; s++) t = s + (s & -s), i > t && (h[t] += h[s]);
+    return h;
+}, f = (t, s, i, h) => {
+    for (;h > s; s += s & -s) t[s] += i;
+}, m = (t, s, i) => {
+    for (;i > s; s += s & -s) ;
+    return Math.min(s, t.length);
+}, d = new Set, p = {
     t: 0,
@@ -21,13 +31,6 @@ i() {
     h() {
-        0 == --this.t && (f.forEach(a), f.clear());
+        0 == --this.t && (d.forEach(u), d.clear());
     },
-    o: t => f.add(t)
-}, p = Uint32Array, d = new p(0), w = t => {
-    const s = t.length + 1, i = new p(s);
-    i.set(t, 1);
-    for (let t, h = 1; s > h; h++) t = h + (h & -h), s > t && (i[t] += i[h]);
-    return i;
-}, g = (t, s, i, h) => {
-    for (;h > s; s += s & -s) t[s] += i;
-};
+    o: t => d.add(t)
+}, w = Uint32Array, g = new w(0);
 
@@ -41,4 +44,4 @@ class v {
     l(t) {
-        t && (m.i(), this.u += t, this.m -= t, this.scrollSize += t, this.p(1), this.g(), 
-        m.h());
+        t && (p.i(), this.u += t, this.m -= t, this.scrollSize += t, this.p(1), this.g(), 
+        p.h());
     }
@@ -48,5 +51,5 @@ constructor(t) {
         this.S = 0, this.u = 0, this.T = 0, this.C = 0, this.k = 0, this.F = 0, this.H = 3, 
-        this.I = 40, this.O = null, this.R = d, this.q = d, this.A = 0, this.scrollSize = 0, 
+        this.I = 40, this.O = null, this.R = g, this.q = g, this.A = 0, this.scrollSize = 0, 
         this.from = 0, this.to = 0, this.sizesHash = 0, this.G = new Map, this.L = new Map, 
-        this.U = [ null, null ], this.W = [ 0, 0 ], this.$ = new u((t => {
+        this.U = [ null, null ], this.W = [ 0, 0 ], this.$ = new l((t => {
             let s = 0, i = 0, h = 0;
@@ -56,6 +59,4 @@ for (const {target: e} of t) s = this.U.indexOf(e), -1 !== s && (i = e[this._] - this.W[s],
             this.l(h);
-        })), this.j = new u((t => {
-            let s = 0, i = 0, h = 0, e = !1, o = this.from + 1;
-            for (;o < this.to; o += o & -o) ;
-            o = Math.min(o, this.q.length);
+        })), this.j = new l((t => {
+            let s = 0, i = 0, h = 0, e = !1, o = /*@__NOINLINE__*/ m(this.q, this.from + 1, this.to);
             for (const {target: r} of t) s = this.G.get(r), 
@@ -67,5 +68,4 @@ /*
         */
-            s >= this.from && s < this.to && (i = r[this._] - this.R[s], i && (e = !0, this.R[s] += i, 
-            h += i, g(this.q, s + 1, i, o)));
-            e && (m.i(), 0 !== h && (g(this.q, o, h, this.q.length), this.S += h, this.scrollSize += h, 
+            o > s && (i = r[this._] - this.R[s], i && (e = !0, this.R[s] += i, h += i, f(this.q, s + 1, i, o)));
+            e && (p.i(), 0 !== h && (f(this.q, o, h, this.q.length), this.S += h, this.scrollSize += h, 
             this.p(1), 0 > h && 
@@ -81,12 +81,9 @@ /*
             5 % 2 === 5 & 1 && 9 % 4 === 9 & 3
-        */ , this.sizesHash = this.sizesHash + 1 & 1023, this.p(2), m.h());
-        })), this.B = l.map((() => [])), this.D = () => {
+        */ , this.sizesHash = this.sizesHash + 1 & 1023, this.p(2), p.h());
+        })), this.B = c.map((() => [])), this.D = () => {
             const t = this.O[this._] - this.u;
             t !== this.m && (this.m = t, this.g());
-        }, this.J = new u(this.D), this.K = t => {
-            const s = this.F, i = this.O[this.M];
-            i !== s && (this.F = i, this.C = t.timeStamp, i > s ? this.g() : this.N());
-        }, this.setOuterNode = t => {
-            this.O && (this.J.unobserve(this.O), this.O.removeEventListener("scroll", this.K)), 
-            (this.O = t) ? (this.J.observe(t), t.addEventListener("scroll", this.K, {
+        }, this.J = new l(this.D), this.setOuterNode = t => {
+            this.O && (this.J.unobserve(this.O), this.O.removeEventListener("scroll", this)), 
+            (this.O = t) ? (this.J.observe(t), t.addEventListener("scroll", this, {
                 passive: !0
@@ -102,3 +99,3 @@ })) : (this.j.disconnect(), this.$.disconnect(), clearTimeout(this.k));
     p(t) {
-        this.B[t].forEach(0 === m.t ? a : m.o);
+        this.B[t].forEach(0 === p.t ? u : p.o);
     }
@@ -126,3 +123,12 @@ getIndex(t) {
     }
-    el(t, s) {
+    /*
+      "scroll" is the only event here, so switch/case is not needed.
+  */    handleEvent(t) {
+        const s = this.F, i = this.O[this.M];
+        i !== s && (this.F = i, this.C = t.timeStamp, i > s ? this.g() : this.K());
+    }
+    /*
+      Performs as destructor when null is passed
+      will ne used as callback, so using =>
+  */    el(t, s) {
         const i = this.L.get(t);
@@ -132,3 +138,3 @@ i && (this.L.delete(t), this.G.delete(i), this.j.unobserve(i)), s && (this.G.set(s, t),
     }
-    P(t, s) {
+    N(t, s) {
         const i = this.U[t];
@@ -139,6 +145,6 @@ i && (this.$.unobserve(i), this.l(-this.W[t]), this.U[t] = null, this.W[t] = 0),
     setStickyHeader(t) {
-        this.P(0, t);
+        this.N(0, t);
     }
     setStickyFooter(t) {
-        this.P(1, t);
+        this.N(1, t);
     }
@@ -153,3 +159,3 @@ g() {
     }
-    N() {
+    K() {
         const t = this.getIndex(this.F);
@@ -170,3 +176,3 @@ t < this.from && (this.from = Math.max(0, t - this.H), this.to = this.T && 1 + this.getIndex(this.F + this.m),
         let {overscanCount: s, horizontal: i, itemCount: h, estimatedItemSize: e} = t;
-        if (m.i(), e && (
+        if (p.i(), e && (
         // must not be falsy, so not checking for undefined here.
@@ -177,6 +183,4 @@ this.I = e), void 0 !== s && (this.H = s), void 0 !== h && this.T !== h) {
             const t = this.R, s = t.length;
-            h > s && (this.R = new p(Math.min(h + 32, 2147483647)), this.R.set(t), this.q = 
-            /*@__NOINLINE__*/
-            w(this.R.fill(this.I || 40, s))), this.scrollSize = (this.S = this.getOffset(h)) + this.u, 
-            this.p(1), this.to > h && (
+            h > s && (this.R = new w(Math.min(h + 32, 2147483647)), this.R.set(t), this.q = /*@__NOINLINE__*/ a(this.R.fill(this.I || 40, s), w)), 
+            this.scrollSize = (this.S = this.getOffset(h)) + this.u, this.p(1), this.to > h && (
             // Forcing shift range to end
@@ -189,3 +193,3 @@ this.to = -1), this.g();
         /* TODO: Needs testing */
-        this.D(), this.scrollTo(0)), m.h();
+        this.D(), this.scrollTo(0)), p.h();
     }
@@ -200,8 +204,9 @@ }
 }), [ h, i ]), y = (t, s) => {
-    s ||= l;
+    s ||= c;
     // szudzik pair
-    const [i, o] = h((() => [ i => t.on(i, s), () => s.reduce(((s, i) => s + "_" + (0 === i ? t.to ** 2 + t.from : 1 === i ? t.scrollSize : t.sizesHash)), "") ]), [ s ]);
-    e(i, o, o);
-}, T = t => (y(t.model, t.events), t.children());
+    const [e, o] = i((() => [ i => t.on(i, s), () => s.reduce(((s, i) => s + "_" + (0 === i ? t.to ** 2 + t.from : 1 === i ? t.scrollSize : t.sizesHash)), "") ]), [ s ]);
+    h(e, o, o);
+}, E = t => (y(t.model, t.events), t.children());
 
-export { l as EVT_ALL, r as EVT_RANGE, n as EVT_SCROLL_SIZE, c as EVT_SIZES, T as Subscription, o as mapVisibleRange, y as useComponentSubscription, b as useSubscription, S as useVirtual, M as useVirtualModel };
+export { c as EVT_ALL, o as EVT_RANGE, r as EVT_SCROLL_SIZE, n as EVT_SIZES, E as Subscription, e as mapVisibleRange, y as useComponentSubscription, b as useSubscription, S as useVirtual, M as useVirtualModel };
+//# sourceMappingURL=index.server.js.map

package.json

 {
     "name": "@af-utils/react-virtual-headless",
     "private": false,
-    "version": "0.0.46",
+    "version": "0.0.47",
     "description": "React components for rendering large scrollable data",
@@ -16,3 +16,3 @@ "repository": "https://github.com/nowaalex/af-virtual-scroll.git",
         "prepare": "npm run build",
-        "test": "jest"
+        "test": "yarn node --experimental-vm-modules $(yarn bin jest)"
     },
@@ -26,2 +26,3 @@ "engines": {
     ],
+    "type": "module",
     "main": "lib/index.server.js",
@@ -48,16 +49,17 @@ "browser": "lib/index.js",
     "devDependencies": {
-        "@babel/core": "^7.19.0",
-        "@babel/plugin-transform-runtime": "^7.18.10",
-        "@babel/preset-env": "^7.19.0",
+        "@babel/core": "^7.19.6",
+        "@babel/plugin-transform-runtime": "^7.19.6",
+        "@babel/preset-env": "^7.19.4",
         "@babel/preset-react": "^7.18.6",
-        "@rollup/plugin-babel": "^5.3.1",
-        "@rollup/plugin-commonjs": "^22.0.2",
+        "@rollup/plugin-babel": "^6.0.2",
+        "@rollup/plugin-commonjs": "^23.0.2",
         "@rollup/plugin-export-bundle-size": "^0.0.1",
-        "@rollup/plugin-replace": "^4.0.0",
-        "babel-jest": "^29.0.2",
+        "@rollup/plugin-node-resolve": "^15.0.1",
+        "@rollup/plugin-replace": "^5.0.1",
         "babel-plugin-module-resolver": "^4.1.0",
         "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-        "jest": "^29.0.2",
+        "jest": "^29.2.1",
+        "jest-environment-jsdom": "^29.2.1",
         "lodash": "^4.17.21",
-        "rollup": "^2.79.0",
+        "rollup": "^3.2.3",
         "rollup-plugin-terser": "^7.0.2"
@@ -64,0 +66,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

77928

increased by63.35%

Number of package files

6

increased by20%

Lines of code

385

increased by3.49%

Is type module

Yes

Worsened metrics

Dev dependency count

16

increased by6.67%

Number of low supply chain risk alerts

6

increased by20%

No dependency changes