@tanstack/virtual-core - npm Package Compare versions

Comparing version 3.0.0-beta.53 to 3.0.0-beta.54

build/lib/index.d.ts

@@ -24,2 +24,3 @@ export * from './utils';
     size: number;
+    lane: number;
 }
@@ -72,2 +73,3 @@ interface Rect {
     initialMeasurementsCache?: VirtualItem[];
+    lanes?: number;
 }
@@ -102,2 +104,3 @@ export declare class Virtualizer<TScrollElement extends Element | Window, TItemElement extends Element> {
     private memoOptions;
+    private getFurthestMeasurement;
     private getMeasurements;
@@ -104,0 +107,0 @@ calculateRange: () => {

build/lib/index.esm.js

@@ -218,3 +218,4 @@ /**
       indexAttribute: 'data-index',
-      initialMeasurementsCache: []
+      initialMeasurementsCache: [],
+      lanes: 1
     }, opts);
@@ -293,2 +294,24 @@ };
   });
+  this.getFurthestMeasurement = function (measurements, index) {
+    var furthestMeasurementsFound = new Map();
+    var furthestMeasurements = new Map();
+    for (var m = index - 1; m >= 0; m--) {
+      var measurement = measurements[m];
+      if (furthestMeasurementsFound.has(measurement.lane)) {
+        continue;
+      }
+      var previousFurthestMeasurement = furthestMeasurements.get(measurement.lane);
+      if (previousFurthestMeasurement == null || measurement.end > previousFurthestMeasurement.end) {
+        furthestMeasurements.set(measurement.lane, measurement);
+      } else if (measurement.end < previousFurthestMeasurement.end) {
+        furthestMeasurementsFound.set(measurement.lane, true);
+      }
+      if (furthestMeasurementsFound.size === _this.options.lanes) {
+        break;
+      }
+    }
+    return furthestMeasurements.size === _this.options.lanes ? Array.from(furthestMeasurements.values()).sort(function (a, b) {
+      return a.end - b.end;
+    })[0] : undefined;
+  };
   this.getMeasurements = memo(function () {
@@ -306,6 +329,8 @@ return [_this.memoOptions(), _this.itemSizeCache];
       var key = getItemKey(_i2);
+      var furthestMeasurement = _this.options.lanes === 1 ? measurements[_i2 - 1] : _this.getFurthestMeasurement(measurements, _i2);
+      var start = furthestMeasurement ? furthestMeasurement.end : paddingStart + scrollMargin;
       var measuredSize = itemSizeCache.get(key);
-      var start = measurements[_i2 - 1] ? measurements[_i2 - 1].end : paddingStart + scrollMargin;
       var size = typeof measuredSize === 'number' ? measuredSize : _this.options.estimateSize(_i2);
       var end = start + size;
+      var lane = furthestMeasurement ? furthestMeasurement.lane : _i2 % _this.options.lanes;
       measurements[_i2] = {
@@ -316,3 +341,4 @@ index: _i2,
         end: end,
-        key: key
+        key: key,
+        lane: lane
       };
@@ -319,0 +345,0 @@ }

build/lib/index.js

@@ -221,3 +221,4 @@ /**
       indexAttribute: 'data-index',
-      initialMeasurementsCache: []
+      initialMeasurementsCache: [],
+      lanes: 1
     }, opts);
@@ -296,2 +297,24 @@ };
   });
+  this.getFurthestMeasurement = function (measurements, index) {
+    var furthestMeasurementsFound = new Map();
+    var furthestMeasurements = new Map();
+    for (var m = index - 1; m >= 0; m--) {
+      var measurement = measurements[m];
+      if (furthestMeasurementsFound.has(measurement.lane)) {
+        continue;
+      }
+      var previousFurthestMeasurement = furthestMeasurements.get(measurement.lane);
+      if (previousFurthestMeasurement == null || measurement.end > previousFurthestMeasurement.end) {
+        furthestMeasurements.set(measurement.lane, measurement);
+      } else if (measurement.end < previousFurthestMeasurement.end) {
+        furthestMeasurementsFound.set(measurement.lane, true);
+      }
+      if (furthestMeasurementsFound.size === _this.options.lanes) {
+        break;
+      }
+    }
+    return furthestMeasurements.size === _this.options.lanes ? Array.from(furthestMeasurements.values()).sort(function (a, b) {
+      return a.end - b.end;
+    })[0] : undefined;
+  };
   this.getMeasurements = utils.memo(function () {
@@ -309,6 +332,8 @@ return [_this.memoOptions(), _this.itemSizeCache];
       var key = getItemKey(_i2);
+      var furthestMeasurement = _this.options.lanes === 1 ? measurements[_i2 - 1] : _this.getFurthestMeasurement(measurements, _i2);
+      var start = furthestMeasurement ? furthestMeasurement.end : paddingStart + scrollMargin;
       var measuredSize = itemSizeCache.get(key);
-      var start = measurements[_i2 - 1] ? measurements[_i2 - 1].end : paddingStart + scrollMargin;
       var size = typeof measuredSize === 'number' ? measuredSize : _this.options.estimateSize(_i2);
       var end = start + size;
+      var lane = furthestMeasurement ? furthestMeasurement.lane : _i2 % _this.options.lanes;
       measurements[_i2] = {
@@ -319,3 +344,4 @@ index: _i2,
         end: end,
-        key: key
+        key: key,
+        lane: lane
       };
@@ -322,0 +348,0 @@ }

build/umd/index.development.js

@@ -281,3 +281,4 @@ /**
         indexAttribute: 'data-index',
-        initialMeasurementsCache: []
+        initialMeasurementsCache: [],
+        lanes: 1
       }, opts);
@@ -356,2 +357,24 @@ };
     });
+    this.getFurthestMeasurement = function (measurements, index) {
+      var furthestMeasurementsFound = new Map();
+      var furthestMeasurements = new Map();
+      for (var m = index - 1; m >= 0; m--) {
+        var measurement = measurements[m];
+        if (furthestMeasurementsFound.has(measurement.lane)) {
+          continue;
+        }
+        var previousFurthestMeasurement = furthestMeasurements.get(measurement.lane);
+        if (previousFurthestMeasurement == null || measurement.end > previousFurthestMeasurement.end) {
+          furthestMeasurements.set(measurement.lane, measurement);
+        } else if (measurement.end < previousFurthestMeasurement.end) {
+          furthestMeasurementsFound.set(measurement.lane, true);
+        }
+        if (furthestMeasurementsFound.size === _this.options.lanes) {
+          break;
+        }
+      }
+      return furthestMeasurements.size === _this.options.lanes ? Array.from(furthestMeasurements.values()).sort(function (a, b) {
+        return a.end - b.end;
+      })[0] : undefined;
+    };
     this.getMeasurements = memo(function () {
@@ -369,6 +392,8 @@ return [_this.memoOptions(), _this.itemSizeCache];
         var key = getItemKey(_i2);
+        var furthestMeasurement = _this.options.lanes === 1 ? measurements[_i2 - 1] : _this.getFurthestMeasurement(measurements, _i2);
+        var start = furthestMeasurement ? furthestMeasurement.end : paddingStart + scrollMargin;
         var measuredSize = itemSizeCache.get(key);
-        var start = measurements[_i2 - 1] ? measurements[_i2 - 1].end : paddingStart + scrollMargin;
         var size = typeof measuredSize === 'number' ? measuredSize : _this.options.estimateSize(_i2);
         var end = start + size;
+        var lane = furthestMeasurement ? furthestMeasurement.lane : _i2 % _this.options.lanes;
         measurements[_i2] = {
@@ -379,3 +404,4 @@ index: _i2,
           end: end,
-          key: key
+          key: key,
+          lane: lane
         };
@@ -382,0 +408,0 @@ }

build/umd/index.production.js

@@ -11,3 +11,3 @@ /**
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).VirtualCore={})}(this,(function(e){"use strict";function t(){return t=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},t.apply(this,arguments)}function n(e,t,n){var o,i,r=null!=(o=n.initialDeps)?o:[];return function(){var o;n.key&&null!=n.debug&&n.debug()&&(o=Date.now());var s,l=e();if(!(l.length!==r.length||l.some((function(e,t){return r[t]!==e}))))return i;if(r=l,n.key&&null!=n.debug&&n.debug()&&(s=Date.now()),i=t.apply(void 0,l),n.key&&null!=n.debug&&n.debug()){var a=Math.round(100*(Date.now()-o))/100,u=Math.round(100*(Date.now()-s))/100,c=u/16,d=function(e,t){for(e=String(e);e.length<t;)e=" "+e;return e};console.info("%c⏱ "+d(u,5)+" /"+d(a,5)+" ms","\n            font-size: .6rem;\n            font-weight: bold;\n            color: hsl("+Math.max(0,Math.min(120-120*c,120))+"deg 100% 31%);",null==n?void 0:n.key)}return null==n||null==n.onChange||n.onChange(i),i}}function o(e,t){if(void 0===e)throw new Error("Unexpected undefined"+(t?": "+t:""));return e}var i=function(e,t){return Math.abs(e-t)<1},r=function(e){return e},s=function(e){for(var t=Math.max(e.startIndex-e.overscan,0),n=Math.min(e.endIndex+e.overscan,e.count-1),o=[],i=t;i<=n;i++)o.push(i);return o},l=function(e,t,n){if(null!=t&&t.borderBoxSize){var o=t.borderBoxSize[0];if(o)return Math.round(o[n.options.horizontal?"inlineSize":"blockSize"])}return Math.round(e.getBoundingClientRect()[n.options.horizontal?"width":"height"])},a=function(e,t,n,o){for(;e<=t;){var i=(e+t)/2|0,r=n(i);if(r<o)e=i+1;else{if(!(r>o))return i;t=i-1}}return e>0?e-1:0};e.Virtualizer=function(e){var u,c,d=this;this.unsubs=[],this.scrollElement=null,this.isScrolling=!1,this.isScrollingTimeoutId=null,this.scrollToIndexTimeoutId=null,this.measurementsCache=[],this.itemSizeCache=new Map,this.pendingMeasuredCacheIndexes=[],this.scrollDirection=null,this.scrollAdjustments=0,this.measureElementCache=new Map,this.observer=(u=null,c=function(){return u||("undefined"!=typeof ResizeObserver?u=new ResizeObserver((function(e){e.forEach((function(e){d._measureElement(e.target,e)}))})):null)},{disconnect:function(){var e;return null==(e=c())?void 0:e.disconnect()},observe:function(e){var t;return null==(t=c())?void 0:t.observe(e,{box:"border-box"})},unobserve:function(e){var t;return null==(t=c())?void 0:t.unobserve(e)}}),this.range={startIndex:0,endIndex:0},this.setOptions=function(e){Object.entries(e).forEach((function(t){var n=t[0];void 0===t[1]&&delete e[n]})),d.options=t({debug:!1,initialOffset:0,overscan:1,paddingStart:0,paddingEnd:0,scrollPaddingStart:0,scrollPaddingEnd:0,horizontal:!1,getItemKey:r,rangeExtractor:s,onChange:function(){},measureElement:l,initialRect:{width:0,height:0},scrollMargin:0,scrollingDelay:150,indexAttribute:"data-index",initialMeasurementsCache:[]},e)},this.notify=function(){null==d.options.onChange||d.options.onChange(d)},this.cleanup=function(){d.unsubs.filter(Boolean).forEach((function(e){return e()})),d.unsubs=[],d.scrollElement=null},this._didMount=function(){return d.measureElementCache.forEach(d.observer.observe),function(){d.observer.disconnect(),d.cleanup()}},this._willUpdate=function(){var e=d.options.getScrollElement();d.scrollElement!==e&&(d.cleanup(),d.scrollElement=e,d._scrollToOffset(d.scrollOffset,{adjustments:void 0,behavior:void 0}),d.unsubs.push(d.options.observeElementRect(d,(function(e){var t=d.scrollRect;d.scrollRect=e,(d.options.horizontal?e.width!==t.width:e.height!==t.height)&&d.maybeNotify()}))),d.unsubs.push(d.options.observeElementOffset(d,(function(e){d.scrollAdjustments=0,d.scrollOffset!==e&&(null!==d.isScrollingTimeoutId&&(clearTimeout(d.isScrollingTimeoutId),d.isScrollingTimeoutId=null),d.isScrolling=!0,d.scrollDirection=d.scrollOffset<e?"forward":"backward",d.scrollOffset=e,d.maybeNotify(),d.isScrollingTimeoutId=setTimeout((function(){d.isScrollingTimeoutId=null,d.isScrolling=!1,d.scrollDirection=null,d.maybeNotify()}),d.options.scrollingDelay))}))))},this.getSize=function(){return d.scrollRect[d.options.horizontal?"width":"height"]},this.memoOptions=n((function(){return[d.options.count,d.options.paddingStart,d.options.scrollMargin,d.options.getItemKey]}),(function(e,t,n,o){return d.pendingMeasuredCacheIndexes=[],{count:e,paddingStart:t,scrollMargin:n,getItemKey:o}}),{key:!1}),this.getMeasurements=n((function(){return[d.memoOptions(),d.itemSizeCache]}),(function(e,t){var n=e.count,o=e.paddingStart,i=e.scrollMargin,r=e.getItemKey,s=d.pendingMeasuredCacheIndexes.length>0?Math.min.apply(Math,d.pendingMeasuredCacheIndexes):0;d.pendingMeasuredCacheIndexes=[];for(var l=d.measurementsCache.slice(0,s),a=s;a<n;a++){var u=r(a),c=t.get(u),f=l[a-1]?l[a-1].end:o+i,h="number"==typeof c?c:d.options.estimateSize(a),m=f+h;l[a]={index:a,start:f,size:h,end:m,key:u}}return d.measurementsCache=l,l}),{key:!1,debug:function(){return d.options.debug}}),this.calculateRange=n((function(){return[d.getMeasurements(),d.getSize(),d.scrollOffset]}),(function(e,t,n){return d.range=function(e){var t=e.measurements,n=e.outerSize,o=e.scrollOffset,i=t.length-1,r=a(0,i,(function(e){return t[e].start}),o),s=r;for(;s<i&&t[s].end<o+n;)s++;return{startIndex:r,endIndex:s}}({measurements:e,outerSize:t,scrollOffset:n})}),{key:!1,debug:function(){return d.options.debug}}),this.maybeNotify=n((function(){var e=d.calculateRange();return[e.startIndex,e.endIndex,d.isScrolling]}),(function(){d.notify()}),{key:!1,debug:function(){return d.options.debug},initialDeps:[this.range.startIndex,this.range.endIndex,this.isScrolling]}),this.getIndexes=n((function(){return[d.options.rangeExtractor,d.calculateRange(),d.options.overscan,d.options.count]}),(function(e,n,o,i){return e(t({},n,{overscan:o,count:i}))}),{key:!1,debug:function(){return d.options.debug}}),this.indexFromElement=function(e){var t=d.options.indexAttribute,n=e.getAttribute(t);return n?parseInt(n,10):(console.warn("Missing attribute name '"+t+"={index}' on measured element."),-1)},this._measureElement=function(e,t){var n,o=d.indexFromElement(e),i=d.measurementsCache[o];if(i){var r=d.measureElementCache.get(i.key);if(!e.isConnected)return d.observer.unobserve(e),void(e===r&&d.measureElementCache.delete(i.key));r!==e&&(r&&d.observer.unobserve(r),d.observer.observe(e),d.measureElementCache.set(i.key,e));var s=d.options.measureElement(e,t,d),l=s-(null!=(n=d.itemSizeCache.get(i.key))?n:i.size);0!==l&&(i.start<d.scrollOffset&&d._scrollToOffset(d.scrollOffset,{adjustments:d.scrollAdjustments+=l,behavior:void 0}),d.pendingMeasuredCacheIndexes.push(o),d.itemSizeCache=new Map(d.itemSizeCache.set(i.key,s)),d.notify())}},this.measureElement=function(e){e&&d._measureElement(e,void 0)},this.getVirtualItems=n((function(){return[d.getIndexes(),d.getMeasurements()]}),(function(e,t){for(var n=[],o=0,i=e.length;o<i;o++){var r=t[e[o]];n.push(r)}return n}),{key:!1,debug:function(){return d.options.debug}}),this.getVirtualItemForOffset=function(e){var t=d.getMeasurements();return o(t[a(0,t.length-1,(function(e){return o(t[e]).start}),e)])},this.getOffsetForAlignment=function(e,t){var n=d.getSize();"auto"===t&&(t=e<=d.scrollOffset?"start":e>=d.scrollOffset+n?"end":"start"),"start"===t||("end"===t?e-=n:"center"===t&&(e-=n/2));var o=d.options.horizontal?"scrollWidth":"scrollHeight",i=(d.scrollElement?"document"in d.scrollElement?d.scrollElement.document.documentElement[o]:d.scrollElement[o]:0)-d.getSize();return Math.max(Math.min(i,e),0)},this.getOffsetForIndex=function(e,t){void 0===t&&(t="auto"),e=Math.max(0,Math.min(e,d.options.count-1));var n=o(d.getMeasurements()[e]);if("auto"===t)if(n.end>=d.scrollOffset+d.getSize()-d.options.scrollPaddingEnd)t="end";else{if(!(n.start<=d.scrollOffset+d.options.scrollPaddingStart))return[d.scrollOffset,t];t="start"}var i="end"===t?n.end+d.options.scrollPaddingEnd:n.start-d.options.scrollPaddingStart;return[d.getOffsetForAlignment(i,t),t]},this.isDynamicMode=function(){return d.measureElementCache.size>0},this.cancelScrollToIndex=function(){null!==d.scrollToIndexTimeoutId&&(clearTimeout(d.scrollToIndexTimeoutId),d.scrollToIndexTimeoutId=null)},this.scrollToOffset=function(e,t){var n=void 0===t?{}:t,o=n.align,i=void 0===o?"start":o,r=n.behavior;d.cancelScrollToIndex(),"smooth"===r&&d.isDynamicMode()&&console.warn("The `smooth` scroll behavior is not fully supported with dynamic size."),d._scrollToOffset(d.getOffsetForAlignment(e,i),{adjustments:void 0,behavior:r})},this.scrollToIndex=function(e,t){var n=void 0===t?{}:t,o=n.align,r=void 0===o?"auto":o,s=n.behavior;e=Math.max(0,Math.min(e,d.options.count-1)),d.cancelScrollToIndex(),"smooth"===s&&d.isDynamicMode()&&console.warn("The `smooth` scroll behavior is not fully supported with dynamic size.");var l=d.getOffsetForIndex(e,r),a=l[0],u=l[1];d._scrollToOffset(a,{adjustments:void 0,behavior:s}),"smooth"!==s&&d.isDynamicMode()&&(d.scrollToIndexTimeoutId=setTimeout((function(){if(d.scrollToIndexTimeoutId=null,d.measureElementCache.has(d.options.getItemKey(e))){var t=d.getOffsetForIndex(e,u)[0];i(t,d.scrollOffset)||d.scrollToIndex(e,{align:u,behavior:s})}else d.scrollToIndex(e,{align:u,behavior:s})})))},this.scrollBy=function(e,t){var n=(void 0===t?{}:t).behavior;d.cancelScrollToIndex(),"smooth"===n&&d.isDynamicMode()&&console.warn("The `smooth` scroll behavior is not fully supported with dynamic size."),d._scrollToOffset(d.scrollOffset+e,{adjustments:void 0,behavior:n})},this.getTotalSize=function(){var e;return((null==(e=d.getMeasurements()[d.options.count-1])?void 0:e.end)||d.options.paddingStart)-d.options.scrollMargin+d.options.paddingEnd},this._scrollToOffset=function(e,t){var n=t.adjustments,o=t.behavior;d.options.scrollToFn(e,{behavior:o,adjustments:n},d)},this.measure=function(){d.itemSizeCache=new Map,d.notify()},this.setOptions(e),this.scrollRect=this.options.initialRect,this.scrollOffset=this.options.initialOffset,this.measurementsCache=this.options.initialMeasurementsCache,this.measurementsCache.forEach((function(e){d.itemSizeCache.set(e.key,e.size)})),this.maybeNotify()},e.approxEqual=i,e.defaultKeyExtractor=r,e.defaultRangeExtractor=s,e.elementScroll=function(e,t,n){var o,i,r=t.adjustments,s=void 0===r?0:r,l=t.behavior,a=e+s;null==(o=n.scrollElement)||null==o.scrollTo||o.scrollTo(((i={})[n.options.horizontal?"left":"top"]=a,i.behavior=l,i))},e.measureElement=l,e.memo=n,e.notUndefined=o,e.observeElementOffset=function(e,t){var n=e.scrollElement;if(n){var o=function(){t(n[e.options.horizontal?"scrollLeft":"scrollTop"])};return o(),n.addEventListener("scroll",o,{passive:!0}),function(){n.removeEventListener("scroll",o)}}},e.observeElementRect=function(e,t){var n=e.scrollElement;if(n){var o=function(e){var n=e.width,o=e.height;t({width:Math.round(n),height:Math.round(o)})};o(n.getBoundingClientRect());var i=new ResizeObserver((function(e){var t=e[0];if(null!=t&&t.borderBoxSize){var i=t.borderBoxSize[0];if(i)return void o({width:i.inlineSize,height:i.blockSize})}o(n.getBoundingClientRect())}));return i.observe(n,{box:"border-box"}),function(){i.unobserve(n)}}},e.observeWindowOffset=function(e,t){var n=e.scrollElement;if(n){var o=function(){t(n[e.options.horizontal?"scrollX":"scrollY"])};return o(),n.addEventListener("scroll",o,{passive:!0}),function(){n.removeEventListener("scroll",o)}}},e.observeWindowRect=function(e,t){var n=e.scrollElement;if(n){var o=function(){t({width:n.innerWidth,height:n.innerHeight})};return o(),n.addEventListener("resize",o,{passive:!0}),function(){n.removeEventListener("resize",o)}}},e.windowScroll=function(e,t,n){var o,i,r=t.adjustments,s=void 0===r?0:r,l=t.behavior,a=e+s;null==(o=n.scrollElement)||null==o.scrollTo||o.scrollTo(((i={})[n.options.horizontal?"left":"top"]=a,i.behavior=l,i))},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).VirtualCore={})}(this,(function(e){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},n.apply(this,arguments)}function t(e,n,t){var o,i,r=null!=(o=t.initialDeps)?o:[];return function(){var o;t.key&&null!=t.debug&&t.debug()&&(o=Date.now());var s,l=e();if(!(l.length!==r.length||l.some((function(e,n){return r[n]!==e}))))return i;if(r=l,t.key&&null!=t.debug&&t.debug()&&(s=Date.now()),i=n.apply(void 0,l),t.key&&null!=t.debug&&t.debug()){var a=Math.round(100*(Date.now()-o))/100,u=Math.round(100*(Date.now()-s))/100,c=u/16,d=function(e,n){for(e=String(e);e.length<n;)e=" "+e;return e};console.info("%c⏱ "+d(u,5)+" /"+d(a,5)+" ms","\n            font-size: .6rem;\n            font-weight: bold;\n            color: hsl("+Math.max(0,Math.min(120-120*c,120))+"deg 100% 31%);",null==t?void 0:t.key)}return null==t||null==t.onChange||t.onChange(i),i}}function o(e,n){if(void 0===e)throw new Error("Unexpected undefined"+(n?": "+n:""));return e}var i=function(e,n){return Math.abs(e-n)<1},r=function(e){return e},s=function(e){for(var n=Math.max(e.startIndex-e.overscan,0),t=Math.min(e.endIndex+e.overscan,e.count-1),o=[],i=n;i<=t;i++)o.push(i);return o},l=function(e,n,t){if(null!=n&&n.borderBoxSize){var o=n.borderBoxSize[0];if(o)return Math.round(o[t.options.horizontal?"inlineSize":"blockSize"])}return Math.round(e.getBoundingClientRect()[t.options.horizontal?"width":"height"])},a=function(e,n,t,o){for(;e<=n;){var i=(e+n)/2|0,r=t(i);if(r<o)e=i+1;else{if(!(r>o))return i;n=i-1}}return e>0?e-1:0};e.Virtualizer=function(e){var u,c,d=this;this.unsubs=[],this.scrollElement=null,this.isScrolling=!1,this.isScrollingTimeoutId=null,this.scrollToIndexTimeoutId=null,this.measurementsCache=[],this.itemSizeCache=new Map,this.pendingMeasuredCacheIndexes=[],this.scrollDirection=null,this.scrollAdjustments=0,this.measureElementCache=new Map,this.observer=(u=null,c=function(){return u||("undefined"!=typeof ResizeObserver?u=new ResizeObserver((function(e){e.forEach((function(e){d._measureElement(e.target,e)}))})):null)},{disconnect:function(){var e;return null==(e=c())?void 0:e.disconnect()},observe:function(e){var n;return null==(n=c())?void 0:n.observe(e,{box:"border-box"})},unobserve:function(e){var n;return null==(n=c())?void 0:n.unobserve(e)}}),this.range={startIndex:0,endIndex:0},this.setOptions=function(e){Object.entries(e).forEach((function(n){var t=n[0];void 0===n[1]&&delete e[t]})),d.options=n({debug:!1,initialOffset:0,overscan:1,paddingStart:0,paddingEnd:0,scrollPaddingStart:0,scrollPaddingEnd:0,horizontal:!1,getItemKey:r,rangeExtractor:s,onChange:function(){},measureElement:l,initialRect:{width:0,height:0},scrollMargin:0,scrollingDelay:150,indexAttribute:"data-index",initialMeasurementsCache:[],lanes:1},e)},this.notify=function(){null==d.options.onChange||d.options.onChange(d)},this.cleanup=function(){d.unsubs.filter(Boolean).forEach((function(e){return e()})),d.unsubs=[],d.scrollElement=null},this._didMount=function(){return d.measureElementCache.forEach(d.observer.observe),function(){d.observer.disconnect(),d.cleanup()}},this._willUpdate=function(){var e=d.options.getScrollElement();d.scrollElement!==e&&(d.cleanup(),d.scrollElement=e,d._scrollToOffset(d.scrollOffset,{adjustments:void 0,behavior:void 0}),d.unsubs.push(d.options.observeElementRect(d,(function(e){var n=d.scrollRect;d.scrollRect=e,(d.options.horizontal?e.width!==n.width:e.height!==n.height)&&d.maybeNotify()}))),d.unsubs.push(d.options.observeElementOffset(d,(function(e){d.scrollAdjustments=0,d.scrollOffset!==e&&(null!==d.isScrollingTimeoutId&&(clearTimeout(d.isScrollingTimeoutId),d.isScrollingTimeoutId=null),d.isScrolling=!0,d.scrollDirection=d.scrollOffset<e?"forward":"backward",d.scrollOffset=e,d.maybeNotify(),d.isScrollingTimeoutId=setTimeout((function(){d.isScrollingTimeoutId=null,d.isScrolling=!1,d.scrollDirection=null,d.maybeNotify()}),d.options.scrollingDelay))}))))},this.getSize=function(){return d.scrollRect[d.options.horizontal?"width":"height"]},this.memoOptions=t((function(){return[d.options.count,d.options.paddingStart,d.options.scrollMargin,d.options.getItemKey]}),(function(e,n,t,o){return d.pendingMeasuredCacheIndexes=[],{count:e,paddingStart:n,scrollMargin:t,getItemKey:o}}),{key:!1}),this.getFurthestMeasurement=function(e,n){for(var t=new Map,o=new Map,i=n-1;i>=0;i--){var r=e[i];if(!t.has(r.lane)){var s=o.get(r.lane);if(null==s||r.end>s.end?o.set(r.lane,r):r.end<s.end&&t.set(r.lane,!0),t.size===d.options.lanes)break}}return o.size===d.options.lanes?Array.from(o.values()).sort((function(e,n){return e.end-n.end}))[0]:void 0},this.getMeasurements=t((function(){return[d.memoOptions(),d.itemSizeCache]}),(function(e,n){var t=e.count,o=e.paddingStart,i=e.scrollMargin,r=e.getItemKey,s=d.pendingMeasuredCacheIndexes.length>0?Math.min.apply(Math,d.pendingMeasuredCacheIndexes):0;d.pendingMeasuredCacheIndexes=[];for(var l=d.measurementsCache.slice(0,s),a=s;a<t;a++){var u=r(a),c=1===d.options.lanes?l[a-1]:d.getFurthestMeasurement(l,a),f=c?c.end:o+i,h=n.get(u),m="number"==typeof h?h:d.options.estimateSize(a),v=f+m,g=c?c.lane:a%d.options.lanes;l[a]={index:a,start:f,size:m,end:v,key:u,lane:g}}return d.measurementsCache=l,l}),{key:!1,debug:function(){return d.options.debug}}),this.calculateRange=t((function(){return[d.getMeasurements(),d.getSize(),d.scrollOffset]}),(function(e,n,t){return d.range=function(e){var n=e.measurements,t=e.outerSize,o=e.scrollOffset,i=n.length-1,r=a(0,i,(function(e){return n[e].start}),o),s=r;for(;s<i&&n[s].end<o+t;)s++;return{startIndex:r,endIndex:s}}({measurements:e,outerSize:n,scrollOffset:t})}),{key:!1,debug:function(){return d.options.debug}}),this.maybeNotify=t((function(){var e=d.calculateRange();return[e.startIndex,e.endIndex,d.isScrolling]}),(function(){d.notify()}),{key:!1,debug:function(){return d.options.debug},initialDeps:[this.range.startIndex,this.range.endIndex,this.isScrolling]}),this.getIndexes=t((function(){return[d.options.rangeExtractor,d.calculateRange(),d.options.overscan,d.options.count]}),(function(e,t,o,i){return e(n({},t,{overscan:o,count:i}))}),{key:!1,debug:function(){return d.options.debug}}),this.indexFromElement=function(e){var n=d.options.indexAttribute,t=e.getAttribute(n);return t?parseInt(t,10):(console.warn("Missing attribute name '"+n+"={index}' on measured element."),-1)},this._measureElement=function(e,n){var t,o=d.indexFromElement(e),i=d.measurementsCache[o];if(i){var r=d.measureElementCache.get(i.key);if(!e.isConnected)return d.observer.unobserve(e),void(e===r&&d.measureElementCache.delete(i.key));r!==e&&(r&&d.observer.unobserve(r),d.observer.observe(e),d.measureElementCache.set(i.key,e));var s=d.options.measureElement(e,n,d),l=s-(null!=(t=d.itemSizeCache.get(i.key))?t:i.size);0!==l&&(i.start<d.scrollOffset&&d._scrollToOffset(d.scrollOffset,{adjustments:d.scrollAdjustments+=l,behavior:void 0}),d.pendingMeasuredCacheIndexes.push(o),d.itemSizeCache=new Map(d.itemSizeCache.set(i.key,s)),d.notify())}},this.measureElement=function(e){e&&d._measureElement(e,void 0)},this.getVirtualItems=t((function(){return[d.getIndexes(),d.getMeasurements()]}),(function(e,n){for(var t=[],o=0,i=e.length;o<i;o++){var r=n[e[o]];t.push(r)}return t}),{key:!1,debug:function(){return d.options.debug}}),this.getVirtualItemForOffset=function(e){var n=d.getMeasurements();return o(n[a(0,n.length-1,(function(e){return o(n[e]).start}),e)])},this.getOffsetForAlignment=function(e,n){var t=d.getSize();"auto"===n&&(n=e<=d.scrollOffset?"start":e>=d.scrollOffset+t?"end":"start"),"start"===n||("end"===n?e-=t:"center"===n&&(e-=t/2));var o=d.options.horizontal?"scrollWidth":"scrollHeight",i=(d.scrollElement?"document"in d.scrollElement?d.scrollElement.document.documentElement[o]:d.scrollElement[o]:0)-d.getSize();return Math.max(Math.min(i,e),0)},this.getOffsetForIndex=function(e,n){void 0===n&&(n="auto"),e=Math.max(0,Math.min(e,d.options.count-1));var t=o(d.getMeasurements()[e]);if("auto"===n)if(t.end>=d.scrollOffset+d.getSize()-d.options.scrollPaddingEnd)n="end";else{if(!(t.start<=d.scrollOffset+d.options.scrollPaddingStart))return[d.scrollOffset,n];n="start"}var i="end"===n?t.end+d.options.scrollPaddingEnd:t.start-d.options.scrollPaddingStart;return[d.getOffsetForAlignment(i,n),n]},this.isDynamicMode=function(){return d.measureElementCache.size>0},this.cancelScrollToIndex=function(){null!==d.scrollToIndexTimeoutId&&(clearTimeout(d.scrollToIndexTimeoutId),d.scrollToIndexTimeoutId=null)},this.scrollToOffset=function(e,n){var t=void 0===n?{}:n,o=t.align,i=void 0===o?"start":o,r=t.behavior;d.cancelScrollToIndex(),"smooth"===r&&d.isDynamicMode()&&console.warn("The `smooth` scroll behavior is not fully supported with dynamic size."),d._scrollToOffset(d.getOffsetForAlignment(e,i),{adjustments:void 0,behavior:r})},this.scrollToIndex=function(e,n){var t=void 0===n?{}:n,o=t.align,r=void 0===o?"auto":o,s=t.behavior;e=Math.max(0,Math.min(e,d.options.count-1)),d.cancelScrollToIndex(),"smooth"===s&&d.isDynamicMode()&&console.warn("The `smooth` scroll behavior is not fully supported with dynamic size.");var l=d.getOffsetForIndex(e,r),a=l[0],u=l[1];d._scrollToOffset(a,{adjustments:void 0,behavior:s}),"smooth"!==s&&d.isDynamicMode()&&(d.scrollToIndexTimeoutId=setTimeout((function(){if(d.scrollToIndexTimeoutId=null,d.measureElementCache.has(d.options.getItemKey(e))){var n=d.getOffsetForIndex(e,u)[0];i(n,d.scrollOffset)||d.scrollToIndex(e,{align:u,behavior:s})}else d.scrollToIndex(e,{align:u,behavior:s})})))},this.scrollBy=function(e,n){var t=(void 0===n?{}:n).behavior;d.cancelScrollToIndex(),"smooth"===t&&d.isDynamicMode()&&console.warn("The `smooth` scroll behavior is not fully supported with dynamic size."),d._scrollToOffset(d.scrollOffset+e,{adjustments:void 0,behavior:t})},this.getTotalSize=function(){var e;return((null==(e=d.getMeasurements()[d.options.count-1])?void 0:e.end)||d.options.paddingStart)-d.options.scrollMargin+d.options.paddingEnd},this._scrollToOffset=function(e,n){var t=n.adjustments,o=n.behavior;d.options.scrollToFn(e,{behavior:o,adjustments:t},d)},this.measure=function(){d.itemSizeCache=new Map,d.notify()},this.setOptions(e),this.scrollRect=this.options.initialRect,this.scrollOffset=this.options.initialOffset,this.measurementsCache=this.options.initialMeasurementsCache,this.measurementsCache.forEach((function(e){d.itemSizeCache.set(e.key,e.size)})),this.maybeNotify()},e.approxEqual=i,e.defaultKeyExtractor=r,e.defaultRangeExtractor=s,e.elementScroll=function(e,n,t){var o,i,r=n.adjustments,s=void 0===r?0:r,l=n.behavior,a=e+s;null==(o=t.scrollElement)||null==o.scrollTo||o.scrollTo(((i={})[t.options.horizontal?"left":"top"]=a,i.behavior=l,i))},e.measureElement=l,e.memo=t,e.notUndefined=o,e.observeElementOffset=function(e,n){var t=e.scrollElement;if(t){var o=function(){n(t[e.options.horizontal?"scrollLeft":"scrollTop"])};return o(),t.addEventListener("scroll",o,{passive:!0}),function(){t.removeEventListener("scroll",o)}}},e.observeElementRect=function(e,n){var t=e.scrollElement;if(t){var o=function(e){var t=e.width,o=e.height;n({width:Math.round(t),height:Math.round(o)})};o(t.getBoundingClientRect());var i=new ResizeObserver((function(e){var n=e[0];if(null!=n&&n.borderBoxSize){var i=n.borderBoxSize[0];if(i)return void o({width:i.inlineSize,height:i.blockSize})}o(t.getBoundingClientRect())}));return i.observe(t,{box:"border-box"}),function(){i.unobserve(t)}}},e.observeWindowOffset=function(e,n){var t=e.scrollElement;if(t){var o=function(){n(t[e.options.horizontal?"scrollX":"scrollY"])};return o(),t.addEventListener("scroll",o,{passive:!0}),function(){t.removeEventListener("scroll",o)}}},e.observeWindowRect=function(e,n){var t=e.scrollElement;if(t){var o=function(){n({width:t.innerWidth,height:t.innerHeight})};return o(),t.addEventListener("resize",o,{passive:!0}),function(){t.removeEventListener("resize",o)}}},e.windowScroll=function(e,n,t){var o,i,r=n.adjustments,s=void 0===r?0:r,l=n.behavior,a=e+s;null==(o=t.scrollElement)||null==o.scrollTo||o.scrollTo(((i={})[t.options.horizontal?"left":"top"]=a,i.behavior=l,i))},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.production.js.map

package.json

 {
   "name": "@tanstack/virtual-core",
   "author": "Tanner Linsley",
-  "version": "3.0.0-beta.53",
+  "version": "3.0.0-beta.54",
   "description": "Headless UI for virtualizing scrollable elements in TS/JS + Frameworks",
@@ -6,0 +6,0 @@ "license": "MIT",

src/index.ts

@@ -37,2 +37,3 @@ import { approxEqual, memo, notUndefined } from './utils'
   size: number
+  lane: number
 }
@@ -265,2 +266,3 @@
   initialMeasurementsCache?: VirtualItem[]
+  lanes?: number
 }
@@ -350,2 +352,3 @@
       initialMeasurementsCache: [],
+      lanes: 1,
       ...opts,
@@ -457,2 +460,39 @@ }
 
+  private getFurthestMeasurement = (
+    measurements: VirtualItem[],
+    index: number,
+  ) => {
+    const furthestMeasurementsFound = new Map<number, true>()
+    const furthestMeasurements = new Map<number, VirtualItem>()
+    for (let m = index - 1; m >= 0; m--) {
+      const measurement = measurements[m]!
+
+      if (furthestMeasurementsFound.has(measurement.lane)) {
+        continue
+      }
+
+      const previousFurthestMeasurement = furthestMeasurements.get(
+        measurement.lane,
+      )
+      if (
+        previousFurthestMeasurement == null ||
+        measurement.end > previousFurthestMeasurement.end
+      ) {
+        furthestMeasurements.set(measurement.lane, measurement)
+      } else if (measurement.end < previousFurthestMeasurement.end) {
+        furthestMeasurementsFound.set(measurement.lane, true)
+      }
+
+      if (furthestMeasurementsFound.size === this.options.lanes) {
+        break
+      }
+    }
+
+    return furthestMeasurements.size === this.options.lanes
+      ? Array.from(furthestMeasurements.values()).sort(
+          (a, b) => a.end - b.end,
+        )[0]
+      : undefined
+  }
+
   private getMeasurements = memo(
@@ -471,6 +511,13 @@ () => [this.memoOptions(), this.itemSizeCache],
         const key = getItemKey(i)
+
+        const furthestMeasurement =
+          this.options.lanes === 1
+            ? measurements[i - 1]
+            : this.getFurthestMeasurement(measurements, i)
+
+        const start = furthestMeasurement
+          ? furthestMeasurement.end
+          : paddingStart + scrollMargin
+
         const measuredSize = itemSizeCache.get(key)
-        const start = measurements[i - 1]
-          ? measurements[i - 1]!.end
-          : paddingStart + scrollMargin
         const size =
@@ -480,4 +527,17 @@ typeof measuredSize === 'number'
             : this.options.estimateSize(i)
+
         const end = start + size
-        measurements[i] = { index: i, start, size, end, key }
+
+        const lane = furthestMeasurement
+          ? furthestMeasurement.lane
+          : i % this.options.lanes
+
+        measurements[i] = {
+          index: i,
+          start,
+          size,
+          end,
+          key,
+          lane,
+        }
       }
@@ -484,0 +544,0 @@

No alert changes

Improved metrics

Total package byte prevSize

423567

increased by5.61%

Lines of code

3955

increased by4.16%

No dependency changes