react-cool-virtual - npm Package Compare versions

Comparing version 0.0.20 to 0.0.21

CHANGELOG.md

 # react-cool-virtual
 
+## 0.0.21
+
+### Patch Changes
+
+- [#72](https://github.com/wellyshen/react-cool-virtual/pull/72) [`97882ac`](https://github.com/wellyshen/react-cool-virtual/commit/97882ac9bac267bf0ce9e0d917bbaff7adab9995) Thanks [@wellyshen](https://github.com/wellyshen)! - fix: RWD not working
+
+* [`eaf35c9`](https://github.com/wellyshen/react-cool-virtual/commit/eaf35c9bf5c4cc9ee9d98b39a2e63cfcd47625fa) Thanks [@wellyshen](https://github.com/wellyshen)! - perf: limit the cache number of resize observers with the length of items
+
 ## 0.0.20
@@ -4,0 +12,0 @@

dist/index.cjs.development.js

@@ -383,3 +383,3 @@ 'use strict';
     userScrollRef.current = true;
-    var len = rosRef.current.size - msDataRef.current.length;
+    var len = rosRef.current.size - items.length;
     var iter = rosRef.current[Symbol.iterator]();
@@ -500,4 +500,6 @@
   useResizeEffect(outerRef, function (rect) {
+    var _msDataRef$current2;
+
     var isSameWidth = outerRectRef.current.width === rect.width;
-    var prevMsData = msDataRef.current;
+    var prevTotalSize = ((_msDataRef$current2 = msDataRef.current[msDataRef.current.length - 1]) == null ? void 0 : _msDataRef$current2.end) || 0;
     outerRectRef.current = rect;
@@ -507,4 +509,4 @@ measureItems(false);
     if (onResizeRef.current) onResizeRef.current(rect);
-    var msData = msDataRef.current;
-    var ratio = !isSameWidth && prevMsData.length && msData[msData.length - 1].end / prevMsData[prevMsData.length - 1].end;
+    var totalSize = msDataRef.current[msDataRef.current.length - 1].end;
+    var ratio = !isSameWidth && totalSize / prevTotalSize;
     if (ratio) scrollTo(scrollOffsetRef.current * ratio);
@@ -511,0 +513,0 @@ }, [itemCount, handleScroll, measureItems, onResizeRef, scrollTo]);

dist/index.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r,e,t=require("react");(e=r||(r={})).auto="auto",e.start="start",e.center="center",e.end="end";var n=function(r){return.5>r?4*r*r*r:(r-1)*(2*r-2)*(2*r-2)+1},u=function(r){return"number"==typeof r&&!Number.isNaN(r)},c=function(){return void 0!==performance?performance.now():Date.now()},o=function(r){var e=t.useRef(r);return e.current=r,e},i=function(r,e){var n=t.useRef(),u=o(r),i=t.useCallback((function(){n.current&&(cancelAnimationFrame(n.current),n.current=void 0)}),[]),a=t.useCallback((function(r){c()-r>=e?u.current():n.current=requestAnimationFrame((function(){return a(r)}))}),[u,e]);return[t.useCallback((function(){i(),a(c())}),[i,a]),i]},a="undefined"!=typeof window?t.useLayoutEffect:t.useEffect;exports.default=function(e){var s=e.itemCount,f=e.ssrItemCount,l=e.itemSize;l=void 0===l?50:l;var v=e.horizontal,d=e.overscanCount,h=void 0===d?1:d;d=e.useIsScrolling;var m=e.scrollDuration,b=void 0===m?500:m;m=void 0===(m=e.scrollEasingFunction)?n:m;var g=e.keyExtractor,S=e.loadMoreThreshold,p=void 0===S?15:S;S=e.isItemLoaded;var R=e.loadMore,x=e.onScroll,k=e.onResize,w=t.useState((function(){return function(r,e){if(void 0===r)return[];var t=u(r)?[0,r-1]:r;r=t[1];var n=[];for(t=t[0];t<=r;t+=1){var c={index:t,start:0,size:0,width:0,measureRef:function(){return null}};e&&(c.key=e(t)),n.push(c)}return n}(f,g)}));e=w[0];var z=w[1],y=t.useRef(!1),I=t.useRef(!1),C=t.useRef(!1),M=t.useRef(0),E=t.useRef(new Map),F=t.useRef(0),O=t.useRef(),L=t.useRef(null),T=t.useRef(null),A=t.useRef({width:0,height:0}),q=t.useRef([]),j=t.useRef(!0),N=t.useRef(),D=t.useRef(S),_=o(R),B=o(m),P=o(g),G=o(l),H=o(d),J=o(x),K=o(k),Q=v?"width":"height",U=v?"inlineSize":"blockSize",V=v?"marginLeft":"marginTop",W=v?"scrollLeft":"scrollTop",X=t.useCallback((function(r){var e,t=G.current;return null!=(e=t=u(t)?t:t(r,A.current.width))?e:50}),[G]),Y=t.useCallback((function(r,e){var t,n=(null==(t=q.current[r-1])?void 0:t.end)||0;return e={idx:r,start:n,end:n+e,size:e},P.current&&(e.key=P.current(r)),e}),[P]),Z=t.useCallback((function(r){void 0===r&&(r=!0);for(var e=0;e<s;e+=1)q.current[e]=Y(e,r&&q.current[e]?q.current[e].size:X(e))}),[X,Y,s]),$=t.useCallback((function(r){var e=q.current,t=0;if(y.current&&!I.current)for(;t<e.length&&e[t].start<((null==(n=e[t+1])?void 0:n.start)||0)&&e[t].start<r;){var n;t+=1}else t=function(r,e,t,n){for(;r<=e;){var u=(r+e)/2|0,c=n(u);if(t<c)e=u-1;else{if(!(t>c))return u;r=u+1}}return 0<r?r-1:0}(0,e.length-1,r,(function(r){return e[r].start}));for(var u=e[n=t].start;n<e.length&&u<r+A.current[Q];){var c;u+=(null==(c=e[n+=1])?void 0:c.size)||0}return r=Math.max(t-h,0),c=e[r].start,{oStart:r,oStop:Math.min(n+h,e.length)-1,vStart:t,vStop:n-1,margin:c,innerSize:e[e.length-1].end-c}}),[h,Q]),rr=t.useCallback((function(r,e){if(L.current){var t=F.current,n=(r=u(r)?{offset:r}:r).offset;if(r=r.smooth,u(n)&&n!==t)if(j.current=!1,r){var o=c();N.current=requestAnimationFrame((function r(){var u=Math.min((c()-o)/b,1);L.current[W]=B.current(u)*(n-t)+t,1>u?N.current=requestAnimationFrame(r):e&&e()}))}else L.current[W]=n,e&&e()}}),[B,b,W]),er=t.useCallback((function(e,t){var n=u(e)?{index:e}:e,c=n.index,o=n.align;if(o=void 0===o?r.auto:o,n=n.smooth,u(c)&&(I.current=!0,y.current&&Z(),c=q.current[Math.max(0,Math.min(c,s-1))])){var i=c.start,a=c.end;c=c.size;var f=F.current,l=A.current[Q];y.current&&f<=i&&f+l>=a&&t&&t();var v=i-l+c;switch(o){case r.start:f=i;break;case r.center:f=i-l/2+c/2;break;case r.end:f=v;break;default:f>=i?f=i:f+l<=a&&(f=v)}rr({offset:f,smooth:n},(function(){y.current?M.current<=10&&(f>=i||f+l<=a)?(setTimeout((function(){return er(e,t)})),M.current+=1):(t&&t(),M.current=0):t&&t()}))}}),[s,Z,rr,Q]),tr=(l=i((function(){return or(F.current)}),150))[0],nr=l[1],ur=(l=i((function(){I.current=!1,j.current=!0;for(var r=E.current.size-q.current.length,e=E.current[Symbol.iterator](),t=0;t<r;t+=1)E.current.delete(e.next().value[0])}),150))[0],cr=l[1],or=t.useCallback((function(r,e,t){if(T.current)if(!_.current||C.current||D.current&&D.current(0)||_.current({startIndex:0,stopIndex:p-1,loadIndex:0,scrollOffset:r,userScroll:j.current}),C.current=!0,s){var n=$(r),u=n.oStart,c=n.oStop,o=n.vStart,i=n.vStop,a=n.margin;n=n.innerSize,T.current.style[V]=a+"px",T.current.style[Q]=n+"px";var f=[];n=function(n){var u=q.current,c=u[n],o=c.start,i=c.size;f.push({key:c.key,index:n,start:o-a,size:i,width:A.current.width,isScrolling:t||void 0,measureRef:function(t){t&&new ResizeObserver((function(t,c){var a,s,f=t[0];if(t=f.target,f=f.borderBoxSize[0][U]){var l=(null==(a=u[n-1])?void 0:a.end)||0;f===i&&o===l||(o<r&&rr(r+f-i),q.current[n]=Y(n,f),or(r,e),y.current=!0),null==(s=E.current.get(t))||s.disconnect(),E.current.set(t,c)}else c.disconnect()})).observe(t)}})};for(var l=u;l<=c;l+=1)n(l);z((function(r){return function(r,e,t){if(r.length!==e.length)return!0;for(var n=function(n){if(Object.keys(r[n]).some((function(u){return!t[u]&&r[n][u]!==e[n][u]})))return{v:!0}},u=0;u<r.length;u+=1){var c=n(u);if("object"==typeof c)return c.v}return!1}(r,f,{measureRef:!0})?f:r})),e&&(J.current&&J.current({overscanStartIndex:u,overscanStopIndex:c,visibleStartIndex:o,visibleStopIndex:i,scrollOffset:r,scrollForward:r>F.current,userScroll:j.current}),c=(u=Math.floor((i+1)/p))*p,!_.current||i===O.current||D.current&&D.current(u)||_.current({startIndex:c,stopIndex:c+p-1,loadIndex:u,scrollOffset:r,userScroll:j.current}),O.current=i,t&&tr(),ur())}else z([])}),[$,Y,s,U,_,p,V,J,tr,ur,rr,Q]);return function(r,e,t){var n=o(e);a((function(){if(!r.current)return function(){return null};var e=new ResizeObserver((function(r){r=r[0].contentRect,n.current({width:r.width,height:r.height})}));return e.observe(r.current),function(){return e.disconnect()}}),[n,r].concat(t))}(L,(function(r){var e=A.current.width===r.width,t=q.current;A.current=r,Z(!1),or(F.current),K.current&&K.current(r),r=q.current,(e=!e&&t.length&&r[r.length-1].end/t[t.length-1].end)&&rr(F.current*e)}),[s,or,Z,K,rr]),a((function(){var r=L.current;if(!r)return function(){return null};var e=function(r){r=r.target[W];var e=H.current;e="function"==typeof e?e(Math.abs(r-F.current)):e,or(r,!0,e),F.current=r};r.addEventListener("scroll",e,{passive:!0});var t=E.current;return function(){nr(),cr(),N.current&&(cancelAnimationFrame(N.current),N.current=void 0),r.removeEventListener("scroll",e),t.forEach((function(r){return r.disconnect()})),t.clear()}}),[nr,cr,or,W,H]),{outerRef:L,innerRef:T,items:e,scrollTo:rr,scrollToItem:er}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r,e,t=require("react");(e=r||(r={})).auto="auto",e.start="start",e.center="center",e.end="end";var n=function(r){return.5>r?4*r*r*r:(r-1)*(2*r-2)*(2*r-2)+1},u=function(r){return"number"==typeof r&&!Number.isNaN(r)},c=function(){return void 0!==performance?performance.now():Date.now()},o=function(r){var e=t.useRef(r);return e.current=r,e},i=function(r,e){var n=t.useRef(),u=o(r),i=t.useCallback((function(){n.current&&(cancelAnimationFrame(n.current),n.current=void 0)}),[]),a=t.useCallback((function(r){c()-r>=e?u.current():n.current=requestAnimationFrame((function(){return a(r)}))}),[u,e]);return[t.useCallback((function(){i(),a(c())}),[i,a]),i]},a="undefined"!=typeof window?t.useLayoutEffect:t.useEffect;exports.default=function(e){var s=e.itemCount,f=e.ssrItemCount,l=e.itemSize;l=void 0===l?50:l;var v=e.horizontal,d=e.overscanCount,h=void 0===d?1:d;d=e.useIsScrolling;var m=e.scrollDuration,b=void 0===m?500:m;m=void 0===(m=e.scrollEasingFunction)?n:m;var g=e.keyExtractor,S=e.loadMoreThreshold,p=void 0===S?15:S;S=e.isItemLoaded;var R=e.loadMore,x=e.onScroll;e=e.onResize;var k=t.useState((function(){return function(r,e){if(void 0===r)return[];var t=u(r)?[0,r-1]:r;r=t[1];var n=[];for(t=t[0];t<=r;t+=1){var c={index:t,start:0,size:0,width:0,measureRef:function(){return null}};e&&(c.key=e(t)),n.push(c)}return n}(f,g)})),w=k[0],z=k[1],y=t.useRef(!1),I=t.useRef(!1),C=t.useRef(!1),M=t.useRef(0),E=t.useRef(new Map),F=t.useRef(0),O=t.useRef(),L=t.useRef(null),T=t.useRef(null),A=t.useRef({width:0,height:0}),q=t.useRef([]),j=t.useRef(!0),N=t.useRef(),D=t.useRef(S),_=o(R),B=o(m),P=o(g),G=o(l),H=o(d),J=o(x),K=o(e),Q=v?"width":"height",U=v?"inlineSize":"blockSize",V=v?"marginLeft":"marginTop",W=v?"scrollLeft":"scrollTop",X=t.useCallback((function(r){var e,t=G.current;return null!=(e=t=u(t)?t:t(r,A.current.width))?e:50}),[G]),Y=t.useCallback((function(r,e){var t,n=(null==(t=q.current[r-1])?void 0:t.end)||0;return e={idx:r,start:n,end:n+e,size:e},P.current&&(e.key=P.current(r)),e}),[P]),Z=t.useCallback((function(r){void 0===r&&(r=!0);for(var e=0;e<s;e+=1)q.current[e]=Y(e,r&&q.current[e]?q.current[e].size:X(e))}),[X,Y,s]),$=t.useCallback((function(r){var e=q.current,t=0;if(y.current&&!I.current)for(;t<e.length&&e[t].start<((null==(n=e[t+1])?void 0:n.start)||0)&&e[t].start<r;){var n;t+=1}else t=function(r,e,t,n){for(;r<=e;){var u=(r+e)/2|0,c=n(u);if(t<c)e=u-1;else{if(!(t>c))return u;r=u+1}}return 0<r?r-1:0}(0,e.length-1,r,(function(r){return e[r].start}));for(var u=e[n=t].start;n<e.length&&u<r+A.current[Q];){var c;u+=(null==(c=e[n+=1])?void 0:c.size)||0}return r=Math.max(t-h,0),c=e[r].start,{oStart:r,oStop:Math.min(n+h,e.length)-1,vStart:t,vStop:n-1,margin:c,innerSize:e[e.length-1].end-c}}),[h,Q]),rr=t.useCallback((function(r,e){if(L.current){var t=F.current,n=(r=u(r)?{offset:r}:r).offset;if(r=r.smooth,u(n)&&n!==t)if(j.current=!1,r){var o=c();N.current=requestAnimationFrame((function r(){var u=Math.min((c()-o)/b,1);L.current[W]=B.current(u)*(n-t)+t,1>u?N.current=requestAnimationFrame(r):e&&e()}))}else L.current[W]=n,e&&e()}}),[B,b,W]),er=t.useCallback((function(e,t){var n=u(e)?{index:e}:e,c=n.index,o=n.align;if(o=void 0===o?r.auto:o,n=n.smooth,u(c)&&(I.current=!0,y.current&&Z(),c=q.current[Math.max(0,Math.min(c,s-1))])){var i=c.start,a=c.end;c=c.size;var f=F.current,l=A.current[Q];y.current&&f<=i&&f+l>=a&&t&&t();var v=i-l+c;switch(o){case r.start:f=i;break;case r.center:f=i-l/2+c/2;break;case r.end:f=v;break;default:f>=i?f=i:f+l<=a&&(f=v)}rr({offset:f,smooth:n},(function(){y.current?M.current<=10&&(f>=i||f+l<=a)?(setTimeout((function(){return er(e,t)})),M.current+=1):(t&&t(),M.current=0):t&&t()}))}}),[s,Z,rr,Q]),tr=(l=i((function(){return or(F.current)}),150))[0],nr=l[1],ur=(l=i((function(){I.current=!1,j.current=!0;for(var r=E.current.size-w.length,e=E.current[Symbol.iterator](),t=0;t<r;t+=1)E.current.delete(e.next().value[0])}),150))[0],cr=l[1],or=t.useCallback((function(r,e,t){if(T.current)if(!_.current||C.current||D.current&&D.current(0)||_.current({startIndex:0,stopIndex:p-1,loadIndex:0,scrollOffset:r,userScroll:j.current}),C.current=!0,s){var n=$(r),u=n.oStart,c=n.oStop,o=n.vStart,i=n.vStop,a=n.margin;n=n.innerSize,T.current.style[V]=a+"px",T.current.style[Q]=n+"px";var f=[];n=function(n){var u=q.current,c=u[n],o=c.start,i=c.size;f.push({key:c.key,index:n,start:o-a,size:i,width:A.current.width,isScrolling:t||void 0,measureRef:function(t){t&&new ResizeObserver((function(t,c){var a,s,f=t[0];if(t=f.target,f=f.borderBoxSize[0][U]){var l=(null==(a=u[n-1])?void 0:a.end)||0;f===i&&o===l||(o<r&&rr(r+f-i),q.current[n]=Y(n,f),or(r,e),y.current=!0),null==(s=E.current.get(t))||s.disconnect(),E.current.set(t,c)}else c.disconnect()})).observe(t)}})};for(var l=u;l<=c;l+=1)n(l);z((function(r){return function(r,e,t){if(r.length!==e.length)return!0;for(var n=function(n){if(Object.keys(r[n]).some((function(u){return!t[u]&&r[n][u]!==e[n][u]})))return{v:!0}},u=0;u<r.length;u+=1){var c=n(u);if("object"==typeof c)return c.v}return!1}(r,f,{measureRef:!0})?f:r})),e&&(J.current&&J.current({overscanStartIndex:u,overscanStopIndex:c,visibleStartIndex:o,visibleStopIndex:i,scrollOffset:r,scrollForward:r>F.current,userScroll:j.current}),c=(u=Math.floor((i+1)/p))*p,!_.current||i===O.current||D.current&&D.current(u)||_.current({startIndex:c,stopIndex:c+p-1,loadIndex:u,scrollOffset:r,userScroll:j.current}),O.current=i,t&&tr(),ur())}else z([])}),[$,Y,s,U,_,p,V,J,tr,ur,rr,Q]);return function(r,e,t){var n=o(e);a((function(){if(!r.current)return function(){return null};var e=new ResizeObserver((function(r){r=r[0].contentRect,n.current({width:r.width,height:r.height})}));return e.observe(r.current),function(){return e.disconnect()}}),[n,r].concat(t))}(L,(function(r){var e,t=A.current.width===r.width,n=(null==(e=q.current[q.current.length-1])?void 0:e.end)||0;A.current=r,Z(!1),or(F.current),K.current&&K.current(r),r=q.current[q.current.length-1].end,(t=!t&&r/n)&&rr(F.current*t)}),[s,or,Z,K,rr]),a((function(){var r=L.current;if(!r)return function(){return null};var e=function(r){r=r.target[W];var e=H.current;e="function"==typeof e?e(Math.abs(r-F.current)):e,or(r,!0,e),F.current=r};r.addEventListener("scroll",e,{passive:!0});var t=E.current;return function(){nr(),cr(),N.current&&(cancelAnimationFrame(N.current),N.current=void 0),r.removeEventListener("scroll",e),t.forEach((function(r){return r.disconnect()})),t.clear()}}),[nr,cr,or,W,H]),{outerRef:L,innerRef:T,items:w,scrollTo:rr,scrollToItem:er}};
 //# sourceMappingURL=index.cjs.production.min.js.map

dist/index.esm.js

@@ -379,3 +379,3 @@ import { useRef, useCallback, useLayoutEffect, useEffect, useState } from 'react';
     userScrollRef.current = true;
-    var len = rosRef.current.size - msDataRef.current.length;
+    var len = rosRef.current.size - items.length;
     var iter = rosRef.current[Symbol.iterator]();
@@ -496,4 +496,6 @@
   useResizeEffect(outerRef, function (rect) {
+    var _msDataRef$current2;
+
     var isSameWidth = outerRectRef.current.width === rect.width;
-    var prevMsData = msDataRef.current;
+    var prevTotalSize = ((_msDataRef$current2 = msDataRef.current[msDataRef.current.length - 1]) == null ? void 0 : _msDataRef$current2.end) || 0;
     outerRectRef.current = rect;
@@ -503,4 +505,4 @@ measureItems(false);
     if (onResizeRef.current) onResizeRef.current(rect);
-    var msData = msDataRef.current;
-    var ratio = !isSameWidth && prevMsData.length && msData[msData.length - 1].end / prevMsData[prevMsData.length - 1].end;
+    var totalSize = msDataRef.current[msDataRef.current.length - 1].end;
+    var ratio = !isSameWidth && totalSize / prevTotalSize;
     if (ratio) scrollTo(scrollOffsetRef.current * ratio);
@@ -507,0 +509,0 @@ }, [itemCount, handleScroll, measureItems, onResizeRef, scrollTo]);

dist/index.umd.development.js

@@ -383,3 +383,3 @@ (function (global, factory) {
       userScrollRef.current = true;
-      var len = rosRef.current.size - msDataRef.current.length;
+      var len = rosRef.current.size - items.length;
       var iter = rosRef.current[Symbol.iterator]();
@@ -500,4 +500,6 @@
     useResizeEffect(outerRef, function (rect) {
+      var _msDataRef$current2;
+
       var isSameWidth = outerRectRef.current.width === rect.width;
-      var prevMsData = msDataRef.current;
+      var prevTotalSize = ((_msDataRef$current2 = msDataRef.current[msDataRef.current.length - 1]) == null ? void 0 : _msDataRef$current2.end) || 0;
       outerRectRef.current = rect;
@@ -507,4 +509,4 @@ measureItems(false);
       if (onResizeRef.current) onResizeRef.current(rect);
-      var msData = msDataRef.current;
-      var ratio = !isSameWidth && prevMsData.length && msData[msData.length - 1].end / prevMsData[prevMsData.length - 1].end;
+      var totalSize = msDataRef.current[msDataRef.current.length - 1].end;
+      var ratio = !isSameWidth && totalSize / prevTotalSize;
       if (ratio) scrollTo(scrollOffsetRef.current * ratio);
@@ -511,0 +513,0 @@ }, [itemCount, handleScroll, measureItems, onResizeRef, scrollTo]);

dist/index.umd.production.min.js

@@ -1,2 +0,2 @@
-"use strict";!function(r,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e((r="undefined"!=typeof globalThis?globalThis:r||self).ReactCoolVirtual={},r.React)}(this,(function(r,e){var t,n;(n=t||(t={})).auto="auto",n.start="start",n.center="center",n.end="end";var u=function(r){return.5>r?4*r*r*r:(r-1)*(2*r-2)*(2*r-2)+1},c=function(r){return"number"==typeof r&&!Number.isNaN(r)},o=function(){return void 0!==performance?performance.now():Date.now()},i=function(r){var t=e.useRef(r);return t.current=r,t},a=function(r,t){var n=e.useRef(),u=i(r),c=e.useCallback((function(){n.current&&(cancelAnimationFrame(n.current),n.current=void 0)}),[]),a=e.useCallback((function(r){o()-r>=t?u.current():n.current=requestAnimationFrame((function(){return a(r)}))}),[u,t]);return[e.useCallback((function(){c(),a(o())}),[c,a]),c]},s="undefined"!=typeof window?e.useLayoutEffect:e.useEffect;r.useVirtual=function(r){var n=r.itemCount,f=r.ssrItemCount,l=r.itemSize;l=void 0===l?50:l;var d=r.horizontal,v=r.overscanCount,h=void 0===v?1:v;v=r.useIsScrolling;var m=r.scrollDuration,b=void 0===m?500:m;m=void 0===(m=r.scrollEasingFunction)?u:m;var p=r.keyExtractor,g=r.loadMoreThreshold,R=void 0===g?15:g;g=r.isItemLoaded;var S=r.loadMore,x=r.onScroll,k=r.onResize,w=e.useState((function(){return function(r,e){if(void 0===r)return[];var t=c(r)?[0,r-1]:r;r=t[1];var n=[];for(t=t[0];t<=r;t+=1){var u={index:t,start:0,size:0,width:0,measureRef:function(){return null}};e&&(u.key=e(t)),n.push(u)}return n}(f,p)}));r=w[0];var y=w[1],z=e.useRef(!1),C=e.useRef(!1),I=e.useRef(!1),M=e.useRef(0),T=e.useRef(new Map),E=e.useRef(0),F=e.useRef(),O=e.useRef(null),L=e.useRef(null),A=e.useRef({width:0,height:0}),j=e.useRef([]),q=e.useRef(!0),N=e.useRef(),D=e.useRef(g),V=i(S),_=i(m),B=i(p),P=i(l),G=i(v),H=i(x),J=i(k),K=d?"width":"height",Q=d?"inlineSize":"blockSize",U=d?"marginLeft":"marginTop",W=d?"scrollLeft":"scrollTop",X=e.useCallback((function(r){var e,t=P.current;return null!=(e=t=c(t)?t:t(r,A.current.width))?e:50}),[P]),Y=e.useCallback((function(r,e){var t,n=(null==(t=j.current[r-1])?void 0:t.end)||0;return e={idx:r,start:n,end:n+e,size:e},B.current&&(e.key=B.current(r)),e}),[B]),Z=e.useCallback((function(r){void 0===r&&(r=!0);for(var e=0;e<n;e+=1)j.current[e]=Y(e,r&&j.current[e]?j.current[e].size:X(e))}),[X,Y,n]),$=e.useCallback((function(r){var e=j.current,t=0;if(z.current&&!C.current)for(;t<e.length&&e[t].start<((null==(n=e[t+1])?void 0:n.start)||0)&&e[t].start<r;){var n;t+=1}else t=function(r,e,t,n){for(;r<=e;){var u=(r+e)/2|0,c=n(u);if(t<c)e=u-1;else{if(!(t>c))return u;r=u+1}}return 0<r?r-1:0}(0,e.length-1,r,(function(r){return e[r].start}));for(var u=e[n=t].start;n<e.length&&u<r+A.current[K];){var c;u+=(null==(c=e[n+=1])?void 0:c.size)||0}return r=Math.max(t-h,0),c=e[r].start,{oStart:r,oStop:Math.min(n+h,e.length)-1,vStart:t,vStop:n-1,margin:c,innerSize:e[e.length-1].end-c}}),[h,K]),rr=e.useCallback((function(r,e){if(O.current){var t=E.current,n=(r=c(r)?{offset:r}:r).offset;if(r=r.smooth,c(n)&&n!==t)if(q.current=!1,r){var u=o();N.current=requestAnimationFrame((function r(){var c=Math.min((o()-u)/b,1);O.current[W]=_.current(c)*(n-t)+t,1>c?N.current=requestAnimationFrame(r):e&&e()}))}else O.current[W]=n,e&&e()}}),[_,b,W]),er=e.useCallback((function(r,e){var u=c(r)?{index:r}:r,o=u.index,i=u.align;if(i=void 0===i?t.auto:i,u=u.smooth,c(o)&&(C.current=!0,z.current&&Z(),o=j.current[Math.max(0,Math.min(o,n-1))])){var a=o.start,s=o.end;o=o.size;var f=E.current,l=A.current[K];z.current&&f<=a&&f+l>=s&&e&&e();var d=a-l+o;switch(i){case t.start:f=a;break;case t.center:f=a-l/2+o/2;break;case t.end:f=d;break;default:f>=a?f=a:f+l<=s&&(f=d)}rr({offset:f,smooth:u},(function(){z.current?10>=M.current&&(f>=a||f+l<=s)?(setTimeout((function(){return er(r,e)})),M.current+=1):(e&&e(),M.current=0):e&&e()}))}}),[n,Z,rr,K]),tr=(l=a((function(){return or(E.current)}),150))[0],nr=l[1],ur=(l=a((function(){C.current=!1,q.current=!0;for(var r=T.current.size-j.current.length,e=T.current[Symbol.iterator](),t=0;t<r;t+=1)T.current.delete(e.next().value[0])}),150))[0],cr=l[1],or=e.useCallback((function(r,e,t){if(L.current)if(!V.current||I.current||D.current&&D.current(0)||V.current({startIndex:0,stopIndex:R-1,loadIndex:0,scrollOffset:r,userScroll:q.current}),I.current=!0,n){var u=$(r),c=u.oStart,o=u.oStop,i=u.vStart,a=u.vStop,s=u.margin;u=u.innerSize,L.current.style[U]=s+"px",L.current.style[K]=u+"px";var f=[];u=function(n){var u=j.current,c=u[n],o=c.start,i=c.size;f.push({key:c.key,index:n,start:o-s,size:i,width:A.current.width,isScrolling:t||void 0,measureRef:function(t){t&&new ResizeObserver((function(t,c){var a,s,f=t[0];if(t=f.target,f=f.borderBoxSize[0][Q]){var l=(null==(a=u[n-1])?void 0:a.end)||0;f===i&&o===l||(o<r&&rr(r+f-i),j.current[n]=Y(n,f),or(r,e),z.current=!0),null==(s=T.current.get(t))||s.disconnect(),T.current.set(t,c)}else c.disconnect()})).observe(t)}})};for(var l=c;l<=o;l+=1)u(l);y((function(r){return function(r,e,t){if(r.length!==e.length)return!0;for(var n=function(n){if(Object.keys(r[n]).some((function(u){return!t[u]&&r[n][u]!==e[n][u]})))return{v:!0}},u=0;u<r.length;u+=1){var c=n(u);if("object"==typeof c)return c.v}return!1}(r,f,{measureRef:!0})?f:r})),e&&(H.current&&H.current({overscanStartIndex:c,overscanStopIndex:o,visibleStartIndex:i,visibleStopIndex:a,scrollOffset:r,scrollForward:r>E.current,userScroll:q.current}),o=(c=Math.floor((a+1)/R))*R,!V.current||a===F.current||D.current&&D.current(c)||V.current({startIndex:o,stopIndex:o+R-1,loadIndex:c,scrollOffset:r,userScroll:q.current}),F.current=a,t&&tr(),ur())}else y([])}),[$,Y,n,Q,V,R,U,H,tr,ur,rr,K]);return function(r,e,t){var n=i(e);s((function(){if(!r.current)return function(){return null};var e=new ResizeObserver((function(r){r=r[0].contentRect,n.current({width:r.width,height:r.height})}));return e.observe(r.current),function(){return e.disconnect()}}),[n,r].concat(t))}(O,(function(r){var e=A.current.width===r.width,t=j.current;A.current=r,Z(!1),or(E.current),J.current&&J.current(r),r=j.current,(e=!e&&t.length&&r[r.length-1].end/t[t.length-1].end)&&rr(E.current*e)}),[n,or,Z,J,rr]),s((function(){var r=O.current;if(!r)return function(){return null};var e=function(r){r=r.target[W];var e=G.current;e="function"==typeof e?e(Math.abs(r-E.current)):e,or(r,!0,e),E.current=r};r.addEventListener("scroll",e,{passive:!0});var t=T.current;return function(){nr(),cr(),N.current&&(cancelAnimationFrame(N.current),N.current=void 0),r.removeEventListener("scroll",e),t.forEach((function(r){return r.disconnect()})),t.clear()}}),[nr,cr,or,W,G]),{outerRef:O,innerRef:L,items:r,scrollTo:rr,scrollToItem:er}},Object.defineProperty(r,"__esModule",{value:!0})}));
+"use strict";!function(r,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e((r="undefined"!=typeof globalThis?globalThis:r||self).ReactCoolVirtual={},r.React)}(this,(function(r,e){var t,n;(n=t||(t={})).auto="auto",n.start="start",n.center="center",n.end="end";var u=function(r){return.5>r?4*r*r*r:(r-1)*(2*r-2)*(2*r-2)+1},c=function(r){return"number"==typeof r&&!Number.isNaN(r)},o=function(){return void 0!==performance?performance.now():Date.now()},i=function(r){var t=e.useRef(r);return t.current=r,t},a=function(r,t){var n=e.useRef(),u=i(r),c=e.useCallback((function(){n.current&&(cancelAnimationFrame(n.current),n.current=void 0)}),[]),a=e.useCallback((function(r){o()-r>=t?u.current():n.current=requestAnimationFrame((function(){return a(r)}))}),[u,t]);return[e.useCallback((function(){c(),a(o())}),[c,a]),c]},s="undefined"!=typeof window?e.useLayoutEffect:e.useEffect;r.useVirtual=function(r){var n=r.itemCount,f=r.ssrItemCount,l=r.itemSize;l=void 0===l?50:l;var d=r.horizontal,v=r.overscanCount,h=void 0===v?1:v;v=r.useIsScrolling;var m=r.scrollDuration,b=void 0===m?500:m;m=void 0===(m=r.scrollEasingFunction)?u:m;var p=r.keyExtractor,g=r.loadMoreThreshold,R=void 0===g?15:g;g=r.isItemLoaded;var S=r.loadMore,x=r.onScroll;r=r.onResize;var k=e.useState((function(){return function(r,e){if(void 0===r)return[];var t=c(r)?[0,r-1]:r;r=t[1];var n=[];for(t=t[0];t<=r;t+=1){var u={index:t,start:0,size:0,width:0,measureRef:function(){return null}};e&&(u.key=e(t)),n.push(u)}return n}(f,p)})),w=k[0],y=k[1],z=e.useRef(!1),C=e.useRef(!1),I=e.useRef(!1),M=e.useRef(0),T=e.useRef(new Map),E=e.useRef(0),F=e.useRef(),O=e.useRef(null),L=e.useRef(null),A=e.useRef({width:0,height:0}),j=e.useRef([]),q=e.useRef(!0),N=e.useRef(),D=e.useRef(g),V=i(S),_=i(m),B=i(p),P=i(l),G=i(v),H=i(x),J=i(r),K=d?"width":"height",Q=d?"inlineSize":"blockSize",U=d?"marginLeft":"marginTop",W=d?"scrollLeft":"scrollTop",X=e.useCallback((function(r){var e,t=P.current;return null!=(e=t=c(t)?t:t(r,A.current.width))?e:50}),[P]),Y=e.useCallback((function(r,e){var t,n=(null==(t=j.current[r-1])?void 0:t.end)||0;return e={idx:r,start:n,end:n+e,size:e},B.current&&(e.key=B.current(r)),e}),[B]),Z=e.useCallback((function(r){void 0===r&&(r=!0);for(var e=0;e<n;e+=1)j.current[e]=Y(e,r&&j.current[e]?j.current[e].size:X(e))}),[X,Y,n]),$=e.useCallback((function(r){var e=j.current,t=0;if(z.current&&!C.current)for(;t<e.length&&e[t].start<((null==(n=e[t+1])?void 0:n.start)||0)&&e[t].start<r;){var n;t+=1}else t=function(r,e,t,n){for(;r<=e;){var u=(r+e)/2|0,c=n(u);if(t<c)e=u-1;else{if(!(t>c))return u;r=u+1}}return 0<r?r-1:0}(0,e.length-1,r,(function(r){return e[r].start}));for(var u=e[n=t].start;n<e.length&&u<r+A.current[K];){var c;u+=(null==(c=e[n+=1])?void 0:c.size)||0}return r=Math.max(t-h,0),c=e[r].start,{oStart:r,oStop:Math.min(n+h,e.length)-1,vStart:t,vStop:n-1,margin:c,innerSize:e[e.length-1].end-c}}),[h,K]),rr=e.useCallback((function(r,e){if(O.current){var t=E.current,n=(r=c(r)?{offset:r}:r).offset;if(r=r.smooth,c(n)&&n!==t)if(q.current=!1,r){var u=o();N.current=requestAnimationFrame((function r(){var c=Math.min((o()-u)/b,1);O.current[W]=_.current(c)*(n-t)+t,1>c?N.current=requestAnimationFrame(r):e&&e()}))}else O.current[W]=n,e&&e()}}),[_,b,W]),er=e.useCallback((function(r,e){var u=c(r)?{index:r}:r,o=u.index,i=u.align;if(i=void 0===i?t.auto:i,u=u.smooth,c(o)&&(C.current=!0,z.current&&Z(),o=j.current[Math.max(0,Math.min(o,n-1))])){var a=o.start,s=o.end;o=o.size;var f=E.current,l=A.current[K];z.current&&f<=a&&f+l>=s&&e&&e();var d=a-l+o;switch(i){case t.start:f=a;break;case t.center:f=a-l/2+o/2;break;case t.end:f=d;break;default:f>=a?f=a:f+l<=s&&(f=d)}rr({offset:f,smooth:u},(function(){z.current?10>=M.current&&(f>=a||f+l<=s)?(setTimeout((function(){return er(r,e)})),M.current+=1):(e&&e(),M.current=0):e&&e()}))}}),[n,Z,rr,K]),tr=(l=a((function(){return or(E.current)}),150))[0],nr=l[1],ur=(l=a((function(){C.current=!1,q.current=!0;for(var r=T.current.size-w.length,e=T.current[Symbol.iterator](),t=0;t<r;t+=1)T.current.delete(e.next().value[0])}),150))[0],cr=l[1],or=e.useCallback((function(r,e,t){if(L.current)if(!V.current||I.current||D.current&&D.current(0)||V.current({startIndex:0,stopIndex:R-1,loadIndex:0,scrollOffset:r,userScroll:q.current}),I.current=!0,n){var u=$(r),c=u.oStart,o=u.oStop,i=u.vStart,a=u.vStop,s=u.margin;u=u.innerSize,L.current.style[U]=s+"px",L.current.style[K]=u+"px";var f=[];u=function(n){var u=j.current,c=u[n],o=c.start,i=c.size;f.push({key:c.key,index:n,start:o-s,size:i,width:A.current.width,isScrolling:t||void 0,measureRef:function(t){t&&new ResizeObserver((function(t,c){var a,s,f=t[0];if(t=f.target,f=f.borderBoxSize[0][Q]){var l=(null==(a=u[n-1])?void 0:a.end)||0;f===i&&o===l||(o<r&&rr(r+f-i),j.current[n]=Y(n,f),or(r,e),z.current=!0),null==(s=T.current.get(t))||s.disconnect(),T.current.set(t,c)}else c.disconnect()})).observe(t)}})};for(var l=c;l<=o;l+=1)u(l);y((function(r){return function(r,e,t){if(r.length!==e.length)return!0;for(var n=function(n){if(Object.keys(r[n]).some((function(u){return!t[u]&&r[n][u]!==e[n][u]})))return{v:!0}},u=0;u<r.length;u+=1){var c=n(u);if("object"==typeof c)return c.v}return!1}(r,f,{measureRef:!0})?f:r})),e&&(H.current&&H.current({overscanStartIndex:c,overscanStopIndex:o,visibleStartIndex:i,visibleStopIndex:a,scrollOffset:r,scrollForward:r>E.current,userScroll:q.current}),o=(c=Math.floor((a+1)/R))*R,!V.current||a===F.current||D.current&&D.current(c)||V.current({startIndex:o,stopIndex:o+R-1,loadIndex:c,scrollOffset:r,userScroll:q.current}),F.current=a,t&&tr(),ur())}else y([])}),[$,Y,n,Q,V,R,U,H,tr,ur,rr,K]);return function(r,e,t){var n=i(e);s((function(){if(!r.current)return function(){return null};var e=new ResizeObserver((function(r){r=r[0].contentRect,n.current({width:r.width,height:r.height})}));return e.observe(r.current),function(){return e.disconnect()}}),[n,r].concat(t))}(O,(function(r){var e,t=A.current.width===r.width,n=(null==(e=j.current[j.current.length-1])?void 0:e.end)||0;A.current=r,Z(!1),or(E.current),J.current&&J.current(r),r=j.current[j.current.length-1].end,(t=!t&&r/n)&&rr(E.current*t)}),[n,or,Z,J,rr]),s((function(){var r=O.current;if(!r)return function(){return null};var e=function(r){r=r.target[W];var e=G.current;e="function"==typeof e?e(Math.abs(r-E.current)):e,or(r,!0,e),E.current=r};r.addEventListener("scroll",e,{passive:!0});var t=T.current;return function(){nr(),cr(),N.current&&(cancelAnimationFrame(N.current),N.current=void 0),r.removeEventListener("scroll",e),t.forEach((function(r){return r.disconnect()})),t.clear()}}),[nr,cr,or,W,G]),{outerRef:O,innerRef:L,items:w,scrollTo:rr,scrollToItem:er}},Object.defineProperty(r,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.umd.production.min.js.map

package.json

 {
   "name": "react-cool-virtual",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "A tiny React hook for rendering large datasets like a breeze.",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -301,3 +301,3 @@ <h4 align="center"><code><strong>🚧 Work in progress, most APIs are done. Not production ready yet, but you can try it!</strong></code></h4>
           <div key={index} style={{ height: `${size}px` }}>
-            📏 {width}
+            ⭐️ {index} ({width})
           </div>
@@ -400,5 +400,3 @@ ))}
   try {
-    const { data: comments } = await axios(
-      `https://jsonplaceholder.typicode.com/comments?postId=${loadIndex + 1}`
-    );
+    const { data: comments } = await axios(`/comments?postId=${loadIndex + 1}`);
 
@@ -419,3 +417,3 @@ setComments((prevComments) => [...prevComments, ...comments]);
     // Estimated item size (with padding)
-    itemSize: 100,
+    itemSize: 122,
     // Starts to pre-fetch data when the user scrolls within every 5 items, e.g. 1-5, 6-10 and so on (default = 15)
@@ -438,3 +436,3 @@ loadMoreThreshold: BATCH_COMMENTS,
             key={index}
-            style={{ padding: "16px", minHeight: "100px" }}
+            style={{ padding: "16px", minHeight: "122px" }}
             ref={measureRef} // Used to measure the unknown item size
@@ -466,5 +464,3 @@ >
   try {
-    const { data: comments } = await axios(
-      `https://jsonplaceholder.typicode.com/comments?postId=${loadIndex + 1}`
-    );
+    const { data: comments } = await axios(`/comments?postId=${loadIndex + 1}`);
 
@@ -484,3 +480,3 @@ setComments((prevComments) => [...prevComments, ...comments]);
     itemCount: comments.length, // Provide the number of comments
-    itemSize: 100,
+    itemSize: 122,
     loadMoreThreshold: BATCH_COMMENTS,
@@ -505,3 +501,3 @@ isItemLoaded: (loadIndex) => isItemLoadedArr[loadIndex],
                 <div
-                  style={{ padding: "16px", minHeight: "100px" }}
+                  style={{ padding: "16px", minHeight: "122px" }}
                   ref={measureRef}
@@ -508,0 +504,0 @@ >

No alert changes

Improved metrics

Total package byte prevSize

283145

increased by0.23%

Lines of code

1619

increased by0.25%

Worsened metrics

Number of lines in readme file

628

decreased by-0.63%

No dependency changes