@tanstack/solid-virtual 3.0.0-beta.30 → 3.0.0-beta.32

package/build/umd/index.development.js

@@ -14,6 +14,31 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.SolidVirtual = {}, global.Solid, global.SolidStore));
 })(this, (function (exports, solidJs, store) { 'use strict';
 
+  /**
+   * virtual-core
+   *
+   * Copyright (c) TanStack
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE.md file in the root directory of this source tree.
+   *
+   * @license MIT
+   */
+  function _extends() {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends.apply(this, arguments);
+  }
+
   /**
    * virtual-core
    *
@@ -25,36 +50,35 @@
    * @license MIT
    */
   function memo(getDeps, fn, opts) {
-    let deps = [];
-    let result;
-    return () => {
-      let depTime;
+    var deps = [];
+    var result;
+    return function () {
+      var depTime;
       if (opts.key && opts.debug != null && opts.debug()) depTime = Date.now();
-      const newDeps = getDeps();
-      const depsChanged = newDeps.length !== deps.length || newDeps.some((dep, index) => deps[index] !== dep);
+      var newDeps = getDeps();
+      var depsChanged = newDeps.length !== deps.length || newDeps.some(function (dep, index) {
+        return deps[index] !== dep;
+      });
       if (!depsChanged) {
         return result;
       }
       deps = newDeps;
-      let resultTime;
+      var resultTime;
       if (opts.key && opts.debug != null && opts.debug()) resultTime = Date.now();
-      result = fn(...newDeps);
+      result = fn.apply(void 0, newDeps);
       opts == null ? void 0 : opts.onChange == null ? void 0 : opts.onChange(result);
       if (opts.key && opts.debug != null && opts.debug()) {
-        const depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
-        const resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
-        const resultFpsPercentage = resultEndTime / 16;
-        const pad = (str, num) => {
+        var depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
+        var resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
+        var resultFpsPercentage = resultEndTime / 16;
+        var pad = function pad(str, num) {
           str = String(str);
           while (str.length < num) {
             str = ' ' + str;
           }
           return str;
         };
-        console.info(`%c⏱ ${pad(resultEndTime, 5)} /${pad(depEndTime, 5)} ms`, `
-            font-size: .6rem;
-            font-weight: bold;
-            color: hsl(${Math.max(0, Math.min(120 - 120 * resultFpsPercentage, 120))}deg 100% 31%);`, opts == null ? void 0 : opts.key);
+        console.info("%c\u23F1 " + pad(resultEndTime, 5) + " /" + pad(depEndTime, 5) + " ms", "\n            font-size: .6rem;\n            font-weight: bold;\n            color: hsl(" + Math.max(0, Math.min(120 - 120 * resultFpsPercentage, 120)) + "deg 100% 31%);", opts == null ? void 0 : opts.key);
       }
       return result;
     };
@@ -75,30 +99,32 @@
 
   //
 
-  const defaultKeyExtractor = index => index;
-  const defaultRangeExtractor = range => {
-    const start = Math.max(range.startIndex - range.overscan, 0);
-    const end = Math.min(range.endIndex + range.overscan, range.count - 1);
-    const arr = [];
-    for (let i = start; i <= end; i++) {
-      arr.push(i);
+  var defaultKeyExtractor = function defaultKeyExtractor(index) {
+    return index;
+  };
+  var defaultRangeExtractor = function defaultRangeExtractor(range) {
+    var start = Math.max(range.startIndex - range.overscan, 0);
+    var end = Math.min(range.endIndex + range.overscan, range.count - 1);
+    var arr = [];
+    for (var _i = start; _i <= end; _i++) {
+      arr.push(_i);
     }
     return arr;
   };
-  const memoRectCallback = (instance, cb) => {
-    let prev = {
+  var memoRectCallback = function memoRectCallback(instance, cb) {
+    var prev = {
       height: -1,
       width: -1
     };
-    return rect => {
+    return function (rect) {
       if (instance.options.horizontal ? rect.width !== prev.width : rect.height !== prev.height) {
         cb(rect);
       }
       prev = rect;
     };
   };
-  const observeElementRect = (instance, cb) => {
-    const observer = new ResizeObserver(entries => {
+  var observeElementRect = function observeElementRect(instance, cb) {
+    var observer = new ResizeObserver(function (entries) {
       var _entries$, _entries$2;
       cb({
         width: (_entries$ = entries[0]) == null ? void 0 : _entries$.contentRect.width,
@@ -110,16 +136,18 @@
     }
     cb(instance.scrollElement.getBoundingClientRect());
     observer.observe(instance.scrollElement);
-    return () => {
+    return function () {
       observer.unobserve(instance.scrollElement);
     };
   };
-  const observeWindowRect = (instance, cb) => {
-    const memoizedCallback = memoRectCallback(instance, cb);
-    const onResize = () => memoizedCallback({
-      width: instance.scrollElement.innerWidth,
-      height: instance.scrollElement.innerHeight
-    });
+  var observeWindowRect = function observeWindowRect(instance, cb) {
+    var memoizedCallback = memoRectCallback(instance, cb);
+    var onResize = function onResize() {
+      return memoizedCallback({
+        width: instance.scrollElement.innerWidth,
+        height: instance.scrollElement.innerHeight
+      });
+    };
     if (!instance.scrollElement) {
       return;
     }
@@ -128,32 +156,32 @@
       capture: false,
       passive: true
     });
-    return () => {
+    return function () {
       instance.scrollElement.removeEventListener('resize', onResize);
     };
   };
-  const scrollProps = {
+  var scrollProps = {
     element: ['scrollLeft', 'scrollTop'],
     window: ['scrollX', 'scrollY']
   };
-  const createOffsetObserver = mode => {
-    return (instance, cb) => {
+  var createOffsetObserver = function createOffsetObserver(mode) {
+    return function (instance, cb) {
       if (!instance.scrollElement) {
         return;
       }
-      const propX = scrollProps[mode][0];
-      const propY = scrollProps[mode][1];
-      let prevX = instance.scrollElement[propX];
-      let prevY = instance.scrollElement[propY];
-      const scroll = () => {
-        const offset = instance.scrollElement[instance.options.horizontal ? propX : propY];
+      var propX = scrollProps[mode][0];
+      var propY = scrollProps[mode][1];
+      var prevX = instance.scrollElement[propX];
+      var prevY = instance.scrollElement[propY];
+      var scroll = function scroll() {
+        var offset = instance.scrollElement[instance.options.horizontal ? propX : propY];
         cb(Math.max(0, offset - instance.options.scrollMargin));
       };
       scroll();
-      const onScroll = e => {
-        const target = e.currentTarget;
-        const scrollX = target[propX];
-        const scrollY = target[propY];
+      var onScroll = function onScroll(e) {
+        var target = e.currentTarget;
+        var scrollX = target[propX];
+        var scrollY = target[propY];
         if (instance.options.horizontal ? prevX - scrollX : prevY - scrollY) {
           scroll();
         }
@@ -164,390 +192,404 @@
         capture: false,
         passive: true
       });
-      return () => {
+      return function () {
         instance.scrollElement.removeEventListener('scroll', onScroll);
       };
     };
   };
-  const observeElementOffset = createOffsetObserver('element');
-  const observeWindowOffset = createOffsetObserver('window');
-  const measureElement = (element, instance) => {
+  var observeElementOffset = createOffsetObserver('element');
+  var observeWindowOffset = createOffsetObserver('window');
+  var measureElement = function measureElement(element, instance) {
     return Math.round(element.getBoundingClientRect()[instance.options.horizontal ? 'width' : 'height']);
   };
-  const windowScroll = (offset, _ref, instance) => {
-    var _instance$scrollEleme;
-    let {
-      adjustments,
-      behavior,
-      sync
-    } = _ref;
-    const toOffset = (sync ? offset : offset + instance.options.scrollMargin) + (adjustments ?? 0);
-    (_instance$scrollEleme = instance.scrollElement) == null ? void 0 : _instance$scrollEleme.scrollTo == null ? void 0 : _instance$scrollEleme.scrollTo({
-      [instance.options.horizontal ? 'left' : 'top']: toOffset,
-      behavior
-    });
+  var windowScroll = function windowScroll(offset, _ref, instance) {
+    var _instance$scrollEleme, _instance$scrollEleme2;
+    var adjustments = _ref.adjustments,
+      behavior = _ref.behavior,
+      sync = _ref.sync;
+    var toOffset = (sync ? offset : offset + instance.options.scrollMargin) + (adjustments != null ? adjustments : 0);
+    (_instance$scrollEleme = instance.scrollElement) == null ? void 0 : _instance$scrollEleme.scrollTo == null ? void 0 : _instance$scrollEleme.scrollTo((_instance$scrollEleme2 = {}, _instance$scrollEleme2[instance.options.horizontal ? 'left' : 'top'] = toOffset, _instance$scrollEleme2.behavior = behavior, _instance$scrollEleme2));
   };
-  const elementScroll = (offset, _ref2, instance) => {
-    var _instance$scrollEleme2;
-    let {
-      adjustments,
-      behavior,
-      sync
-    } = _ref2;
-    const toOffset = (sync ? offset : offset + instance.options.scrollMargin) + (adjustments ?? 0);
-    (_instance$scrollEleme2 = instance.scrollElement) == null ? void 0 : _instance$scrollEleme2.scrollTo == null ? void 0 : _instance$scrollEleme2.scrollTo({
-      [instance.options.horizontal ? 'left' : 'top']: toOffset,
-      behavior
-    });
+  var elementScroll = function elementScroll(offset, _ref2, instance) {
+    var _instance$scrollEleme3, _instance$scrollEleme4;
+    var adjustments = _ref2.adjustments,
+      behavior = _ref2.behavior,
+      sync = _ref2.sync;
+    var toOffset = (sync ? offset : offset + instance.options.scrollMargin) + (adjustments != null ? adjustments : 0);
+    (_instance$scrollEleme3 = instance.scrollElement) == null ? void 0 : _instance$scrollEleme3.scrollTo == null ? void 0 : _instance$scrollEleme3.scrollTo((_instance$scrollEleme4 = {}, _instance$scrollEleme4[instance.options.horizontal ? 'left' : 'top'] = toOffset, _instance$scrollEleme4.behavior = behavior, _instance$scrollEleme4));
   };
-  class Virtualizer {
-    constructor(_opts) {
-      var _this = this;
-      this.unsubs = [];
-      this.scrollElement = null;
-      this.isScrolling = false;
-      this.isScrollingTimeoutId = null;
-      this.measurementsCache = [];
-      this.itemMeasurementsCache = {};
-      this.pendingMeasuredCacheIndexes = [];
-      this.scrollAdjustments = 0;
-      this.measureElementCache = {};
-      this.pendingScrollToIndexCallback = null;
-      this.getResizeObserver = (() => {
-        let _ro = null;
-        return () => {
-          if (_ro) {
-            return _ro;
-          } else if (typeof ResizeObserver !== 'undefined') {
-            return _ro = new ResizeObserver(entries => {
-              entries.forEach(entry => {
-                this._measureElement(entry.target, false);
-              });
+  var Virtualizer = function Virtualizer(_opts) {
+    var _this = this;
+    this.unsubs = [];
+    this.scrollElement = null;
+    this.isScrolling = false;
+    this.isScrollingTimeoutId = null;
+    this.measurementsCache = [];
+    this.itemMeasurementsCache = {};
+    this.pendingMeasuredCacheIndexes = [];
+    this.scrollAdjustments = 0;
+    this.measureElementCache = {};
+    this.pendingScrollToIndexCallback = null;
+    this.getResizeObserver = function () {
+      var _ro = null;
+      return function () {
+        if (_ro) {
+          return _ro;
+        } else if (typeof ResizeObserver !== 'undefined') {
+          return _ro = new ResizeObserver(function (entries) {
+            entries.forEach(function (entry) {
+              _this._measureElement(entry.target, false);
             });
-          } else {
-            return null;
-          }
-        };
-      })();
-      this.range = {
-        startIndex: 0,
-        endIndex: 0
-      };
-      this.setOptions = opts => {
-        Object.entries(opts).forEach(_ref3 => {
-          let [key, value] = _ref3;
-          if (typeof value === 'undefined') delete opts[key];
-        });
-        this.options = {
-          debug: false,
-          initialOffset: 0,
-          overscan: 1,
-          paddingStart: 0,
-          paddingEnd: 0,
-          scrollPaddingStart: 0,
-          scrollPaddingEnd: 0,
-          horizontal: false,
-          getItemKey: defaultKeyExtractor,
-          rangeExtractor: defaultRangeExtractor,
-          onChange: () => {},
-          measureElement,
-          initialRect: {
-            width: 0,
-            height: 0
-          },
-          scrollMargin: 0,
-          scrollingDelay: 150,
-          indexAttribute: 'data-index',
-          ...opts
-        };
-      };
-      this.notify = () => {
-        var _this$options$onChang, _this$options;
-        (_this$options$onChang = (_this$options = this.options).onChange) == null ? void 0 : _this$options$onChang.call(_this$options, this);
-      };
-      this.cleanup = () => {
-        this.unsubs.filter(Boolean).forEach(d => d());
-        this.unsubs = [];
-        this.scrollElement = null;
-      };
-      this._didMount = () => {
-        const ro = this.getResizeObserver();
-        Object.values(this.measureElementCache).forEach(node => ro == null ? void 0 : ro.observe(node));
-        return () => {
-          ro == null ? void 0 : ro.disconnect();
-          this.cleanup();
-        };
-      };
-      this._willUpdate = () => {
-        var _this$pendingScrollTo;
-        (_this$pendingScrollTo = this.pendingScrollToIndexCallback) == null ? void 0 : _this$pendingScrollTo.call(this);
-        const scrollElement = this.options.getScrollElement();
-        if (this.scrollElement !== scrollElement) {
-          this.cleanup();
-          this.scrollElement = scrollElement;
-          this._scrollToOffset(this.scrollOffset, {
-            adjustments: undefined,
-            behavior: undefined,
-            sync: true
           });
-          this.unsubs.push(this.options.observeElementRect(this, rect => {
-            this.scrollRect = rect;
-            this.calculateRange();
-          }));
-          this.unsubs.push(this.options.observeElementOffset(this, offset => {
-            if (this.isScrollingTimeoutId !== null) {
-              clearTimeout(this.isScrollingTimeoutId);
-              this.isScrollingTimeoutId = null;
-            }
-            const onIsScrollingChange = isScrolling => {
-              if (this.isScrolling !== isScrolling) {
-                this.isScrolling = isScrolling;
-                this.notify();
-              }
-            };
-            this.scrollAdjustments = 0;
-            if (this.scrollOffset !== offset) {
-              this.scrollOffset = offset;
-              onIsScrollingChange(true);
-            }
-            this.calculateRange();
-            this.isScrollingTimeoutId = setTimeout(() => {
-              this.isScrollingTimeoutId = null;
-              onIsScrollingChange(false);
-            }, this.options.scrollingDelay);
-          }));
-        } else if (!this.isScrolling) {
-          this.calculateRange();
+        } else {
+          return null;
         }
       };
-      this.getSize = () => {
-        return this.scrollRect[this.options.horizontal ? 'width' : 'height'];
-      };
-      this.getMeasurements = memo(() => [this.options.count, this.options.paddingStart, this.options.getItemKey, this.itemMeasurementsCache], (count, paddingStart, getItemKey, measurementsCache) => {
-        const min = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
-        this.pendingMeasuredCacheIndexes = [];
-        const measurements = this.measurementsCache.slice(0, min);
-        for (let i = min; i < count; i++) {
-          const key = getItemKey(i);
-          const measuredSize = measurementsCache[key];
-          const start = measurements[i - 1] ? measurements[i - 1].end : paddingStart;
-          const size = typeof measuredSize === 'number' ? measuredSize : this.options.estimateSize(i);
-          const end = start + size;
-          measurements[i] = {
-            index: i,
-            start,
-            size,
-            end,
-            key
-          };
-        }
-        this.measurementsCache = measurements;
-        return measurements;
-      }, {
-        key: 'getMeasurements',
-        debug: () => this.options.debug
+    }();
+    this.range = {
+      startIndex: 0,
+      endIndex: 0
+    };
+    this.setOptions = function (opts) {
+      Object.entries(opts).forEach(function (_ref3) {
+        var key = _ref3[0],
+          value = _ref3[1];
+        if (typeof value === 'undefined') delete opts[key];
       });
-      this.calculateRange = memo(() => [this.getMeasurements(), this.getSize(), this.scrollOffset], (measurements, outerSize, scrollOffset) => {
-        const range = calculateRange({
-          measurements,
-          outerSize,
-          scrollOffset
-        });
-        if (range.startIndex !== this.range.startIndex || range.endIndex !== this.range.endIndex) {
-          this.range = range;
-          this.notify();
-        }
-        return this.range;
-      }, {
-        key: 'calculateRange',
-        debug: () => this.options.debug
+      _this.options = _extends({
+        debug: false,
+        initialOffset: 0,
+        overscan: 1,
+        paddingStart: 0,
+        paddingEnd: 0,
+        scrollPaddingStart: 0,
+        scrollPaddingEnd: 0,
+        horizontal: false,
+        getItemKey: defaultKeyExtractor,
+        rangeExtractor: defaultRangeExtractor,
+        onChange: function onChange() {},
+        measureElement: measureElement,
+        initialRect: {
+          width: 0,
+          height: 0
+        },
+        scrollMargin: 0,
+        scrollingDelay: 150,
+        indexAttribute: 'data-index'
+      }, opts);
+    };
+    this.notify = function () {
+      _this.options.onChange == null ? void 0 : _this.options.onChange(_this);
+    };
+    this.cleanup = function () {
+      _this.unsubs.filter(Boolean).forEach(function (d) {
+        return d();
       });
-      this.getIndexes = memo(() => [this.options.rangeExtractor, this.range, this.options.overscan, this.options.count], (rangeExtractor, range, overscan, count) => {
-        return rangeExtractor({
-          ...range,
-          overscan,
-          count: count
-        });
-      }, {
-        key: 'getIndexes',
-        debug: () => this.options.debug
+      _this.unsubs = [];
+      _this.scrollElement = null;
+    };
+    this._didMount = function () {
+      var ro = _this.getResizeObserver();
+      Object.values(_this.measureElementCache).forEach(function (node) {
+        return ro == null ? void 0 : ro.observe(node);
       });
-      this.indexFromElement = node => {
-        const attributeName = this.options.indexAttribute;
-        const indexStr = node.getAttribute(attributeName);
-        if (!indexStr) {
-          console.warn(`Missing attribute name '${attributeName}={index}' on measured element.`);
-          return -1;
-        }
-        return parseInt(indexStr, 10);
+      return function () {
+        ro == null ? void 0 : ro.disconnect();
+        _this.cleanup();
       };
-      this._measureElement = (node, _sync) => {
-        const index = this.indexFromElement(node);
-        const item = this.measurementsCache[index];
-        if (!item) {
-          return;
-        }
-        const prevNode = this.measureElementCache[item.key];
-        const ro = this.getResizeObserver();
-        if (!node.isConnected) {
-          if (prevNode) {
-            ro == null ? void 0 : ro.unobserve(prevNode);
-            delete this.measureElementCache[item.key];
-          }
-          return;
-        }
-        if (!prevNode || prevNode !== node) {
-          if (prevNode) {
-            ro == null ? void 0 : ro.unobserve(prevNode);
+    };
+    this._willUpdate = function () {
+      _this.pendingScrollToIndexCallback == null ? void 0 : _this.pendingScrollToIndexCallback();
+      var scrollElement = _this.options.getScrollElement();
+      if (_this.scrollElement !== scrollElement) {
+        _this.cleanup();
+        _this.scrollElement = scrollElement;
+        _this._scrollToOffset(_this.scrollOffset, {
+          adjustments: undefined,
+          behavior: undefined,
+          sync: true
+        });
+        _this.unsubs.push(_this.options.observeElementRect(_this, function (rect) {
+          _this.scrollRect = rect;
+          _this.calculateRange();
+        }));
+        _this.unsubs.push(_this.options.observeElementOffset(_this, function (offset) {
+          if (_this.isScrollingTimeoutId !== null) {
+            clearTimeout(_this.isScrollingTimeoutId);
+            _this.isScrollingTimeoutId = null;
           }
-          this.measureElementCache[item.key] = node;
-          ro == null ? void 0 : ro.observe(node);
-        }
-        const measuredItemSize = this.options.measureElement(node, this);
-        const itemSize = this.itemMeasurementsCache[item.key] ?? item.size;
-        const delta = measuredItemSize - itemSize;
-        if (delta !== 0) {
-          if (item.start < this.scrollOffset && this.isScrolling) {
-            if (this.options.debug) {
-              console.info('correction', delta);
+          var onIsScrollingChange = function onIsScrollingChange(isScrolling) {
+            if (_this.isScrolling !== isScrolling) {
+              _this.isScrolling = isScrolling;
+              _this.notify();
             }
-            this._scrollToOffset(this.scrollOffset, {
-              adjustments: this.scrollAdjustments += delta,
-              behavior: undefined,
-              sync: false
-            });
-          }
-          this.pendingMeasuredCacheIndexes.push(index);
-          this.itemMeasurementsCache = {
-            ...this.itemMeasurementsCache,
-            [item.key]: measuredItemSize
           };
-          this.notify();
-        }
-      };
-      this.measureElement = node => {
-        if (!node) {
-          return;
-        }
-        this._measureElement(node, true);
-      };
-      this.getVirtualItems = memo(() => [this.getIndexes(), this.getMeasurements()], (indexes, measurements) => {
-        const virtualItems = [];
-        for (let k = 0, len = indexes.length; k < len; k++) {
-          const i = indexes[k];
-          const measurement = measurements[i];
-          virtualItems.push(measurement);
-        }
-        return virtualItems;
-      }, {
-        key: 'getIndexes',
-        debug: () => this.options.debug
-      });
-      this.scrollToOffset = function (toOffset, _temp) {
-        let {
-          align = 'start',
-          behavior
-        } = _temp === void 0 ? {} : _temp;
-        const offset = _this.scrollOffset;
-        const size = _this.getSize();
-        if (align === 'auto') {
-          if (toOffset <= offset) {
-            align = 'start';
-          } else if (toOffset >= offset + size) {
-            align = 'end';
-          } else {
-            align = 'start';
+          _this.scrollAdjustments = 0;
+          if (_this.scrollOffset !== offset) {
+            _this.scrollOffset = offset;
+            onIsScrollingChange(true);
           }
-        }
-        const options = {
-          adjustments: undefined,
-          behavior,
-          sync: false
+          _this.calculateRange();
+          _this.isScrollingTimeoutId = setTimeout(function () {
+            _this.isScrollingTimeoutId = null;
+            onIsScrollingChange(false);
+          }, _this.options.scrollingDelay);
+        }));
+      } else if (!_this.isScrolling) {
+        _this.calculateRange();
+      }
+    };
+    this.getSize = function () {
+      return _this.scrollRect[_this.options.horizontal ? 'width' : 'height'];
+    };
+    this.getMeasurements = memo(function () {
+      return [_this.options.count, _this.options.paddingStart, _this.options.getItemKey, _this.itemMeasurementsCache];
+    }, function (count, paddingStart, getItemKey, measurementsCache) {
+      var min = _this.pendingMeasuredCacheIndexes.length > 0 ? Math.min.apply(Math, _this.pendingMeasuredCacheIndexes) : 0;
+      _this.pendingMeasuredCacheIndexes = [];
+      var measurements = _this.measurementsCache.slice(0, min);
+      for (var _i2 = min; _i2 < count; _i2++) {
+        var key = getItemKey(_i2);
+        var measuredSize = measurementsCache[key];
+        var start = measurements[_i2 - 1] ? measurements[_i2 - 1].end : paddingStart;
+        var size = typeof measuredSize === 'number' ? measuredSize : _this.options.estimateSize(_i2);
+        var end = start + size;
+        measurements[_i2] = {
+          index: _i2,
+          start: start,
+          size: size,
+          end: end,
+          key: key
         };
-        if (align === 'start') {
-          _this._scrollToOffset(toOffset, options);
-        } else if (align === 'end') {
-          _this._scrollToOffset(toOffset - size, options);
-        } else if (align === 'center') {
-          _this._scrollToOffset(toOffset - size / 2, options);
+      }
+      _this.measurementsCache = measurements;
+      return measurements;
+    }, {
+      key: 'getMeasurements',
+      debug: function debug() {
+        return _this.options.debug;
+      }
+    });
+    this.calculateRange = memo(function () {
+      return [_this.getMeasurements(), _this.getSize(), _this.scrollOffset];
+    }, function (measurements, outerSize, scrollOffset) {
+      var range = calculateRange({
+        measurements: measurements,
+        outerSize: outerSize,
+        scrollOffset: scrollOffset
+      });
+      if (range.startIndex !== _this.range.startIndex || range.endIndex !== _this.range.endIndex) {
+        _this.range = range;
+        _this.notify();
+      }
+      return _this.range;
+    }, {
+      key: 'calculateRange',
+      debug: function debug() {
+        return _this.options.debug;
+      }
+    });
+    this.getIndexes = memo(function () {
+      return [_this.options.rangeExtractor, _this.range, _this.options.overscan, _this.options.count];
+    }, function (rangeExtractor, range, overscan, count) {
+      return rangeExtractor(_extends({}, range, {
+        overscan: overscan,
+        count: count
+      }));
+    }, {
+      key: 'getIndexes',
+      debug: function debug() {
+        return _this.options.debug;
+      }
+    });
+    this.indexFromElement = function (node) {
+      var attributeName = _this.options.indexAttribute;
+      var indexStr = node.getAttribute(attributeName);
+      if (!indexStr) {
+        console.warn("Missing attribute name '" + attributeName + "={index}' on measured element.");
+        return -1;
+      }
+      return parseInt(indexStr, 10);
+    };
+    this._measureElement = function (node, _sync) {
+      var _this$itemMeasurement;
+      var index = _this.indexFromElement(node);
+      var item = _this.measurementsCache[index];
+      if (!item) {
+        return;
+      }
+      var prevNode = _this.measureElementCache[item.key];
+      var ro = _this.getResizeObserver();
+      if (!node.isConnected) {
+        if (prevNode) {
+          ro == null ? void 0 : ro.unobserve(prevNode);
+          delete _this.measureElementCache[item.key];
         }
-      };
-      this.scrollToIndex = function (index, _temp2) {
-        let {
-          align = 'auto',
-          ...rest
-        } = _temp2 === void 0 ? {} : _temp2;
-        _this.pendingScrollToIndexCallback = null;
-        const measurements = _this.getMeasurements();
-        const offset = _this.scrollOffset;
-        const size = _this.getSize();
-        const {
-          count
-        } = _this.options;
-        const measurement = measurements[Math.max(0, Math.min(index, count - 1))];
-        if (!measurement) {
-          return;
+        return;
+      }
+      if (!prevNode || prevNode !== node) {
+        if (prevNode) {
+          ro == null ? void 0 : ro.unobserve(prevNode);
         }
-        if (align === 'auto') {
-          if (measurement.end >= offset + size - _this.options.scrollPaddingEnd) {
-            align = 'end';
-          } else if (measurement.start <= offset + _this.options.scrollPaddingStart) {
-            align = 'start';
-          } else {
-            return;
+        _this.measureElementCache[item.key] = node;
+        ro == null ? void 0 : ro.observe(node);
+      }
+      var measuredItemSize = _this.options.measureElement(node, _this);
+      var itemSize = (_this$itemMeasurement = _this.itemMeasurementsCache[item.key]) != null ? _this$itemMeasurement : item.size;
+      var delta = measuredItemSize - itemSize;
+      if (delta !== 0) {
+        var _extends2;
+        if (item.start < _this.scrollOffset && _this.isScrolling) {
+          if (_this.options.debug) {
+            console.info('correction', delta);
           }
+          _this._scrollToOffset(_this.scrollOffset, {
+            adjustments: _this.scrollAdjustments += delta,
+            behavior: undefined,
+            sync: false
+          });
         }
-        const toOffset = align === 'end' ? measurement.end + _this.options.scrollPaddingEnd : measurement.start - _this.options.scrollPaddingStart;
-        _this.scrollToOffset(toOffset, {
-          align,
-          ...rest
-        });
-        const isDynamic = Object.keys(_this.measureElementCache).length > 0;
-        if (isDynamic) {
-          const didSeen = () => typeof _this.itemMeasurementsCache[_this.options.getItemKey(index)] === 'number';
-          if (!didSeen()) {
-            _this.pendingScrollToIndexCallback = () => {
-              if (didSeen()) {
-                _this.pendingScrollToIndexCallback = null;
-                _this.scrollToIndex(index, {
-                  align,
-                  ...rest
-                });
-              }
-            };
-          }
+        _this.pendingMeasuredCacheIndexes.push(index);
+        _this.itemMeasurementsCache = _extends({}, _this.itemMeasurementsCache, (_extends2 = {}, _extends2[item.key] = measuredItemSize, _extends2));
+        _this.notify();
+      }
+    };
+    this.measureElement = function (node) {
+      if (!node) {
+        return;
+      }
+      _this._measureElement(node, true);
+    };
+    this.getVirtualItems = memo(function () {
+      return [_this.getIndexes(), _this.getMeasurements()];
+    }, function (indexes, measurements) {
+      var virtualItems = [];
+      for (var k = 0, len = indexes.length; k < len; k++) {
+        var _i3 = indexes[k];
+        var measurement = measurements[_i3];
+        virtualItems.push(measurement);
+      }
+      return virtualItems;
+    }, {
+      key: 'getIndexes',
+      debug: function debug() {
+        return _this.options.debug;
+      }
+    });
+    this.getOffsetForAlignment = function (toOffset, align) {
+      var offset = _this.scrollOffset;
+      var size = _this.getSize();
+      if (align === 'auto') {
+        if (toOffset <= offset) {
+          align = 'start';
+        } else if (toOffset >= offset + size) {
+          align = 'end';
+        } else {
+          align = 'start';
         }
+      }
+      if (align === 'start') {
+        return toOffset;
+      } else if (align === 'end') {
+        return toOffset - size;
+      } else if (align === 'center') {
+        return toOffset - size / 2;
+      }
+      return toOffset;
+    };
+    this.scrollToOffset = function (toOffset, _temp) {
+      var _ref4 = _temp === void 0 ? {} : _temp,
+        _ref4$align = _ref4.align,
+        align = _ref4$align === void 0 ? 'start' : _ref4$align,
+        behavior = _ref4.behavior;
+      var options = {
+        adjustments: undefined,
+        behavior: behavior,
+        sync: false
       };
-      this.getTotalSize = () => {
-        var _this$getMeasurements;
-        return (((_this$getMeasurements = this.getMeasurements()[this.options.count - 1]) == null ? void 0 : _this$getMeasurements.end) || this.options.paddingStart) + this.options.paddingEnd;
-      };
-      this._scrollToOffset = (offset, _ref4) => {
-        let {
-          adjustments,
-          behavior,
-          sync
-        } = _ref4;
-        this.options.scrollToFn(offset, {
-          behavior,
-          sync,
-          adjustments
-        }, this);
+      _this._scrollToOffset(_this.getOffsetForAlignment(toOffset, align), options);
+    };
+    this.scrollToIndex = function (index, _temp2) {
+      var _ref5 = _temp2 === void 0 ? {} : _temp2,
+        _ref5$align = _ref5.align,
+        align = _ref5$align === void 0 ? 'auto' : _ref5$align,
+        behavior = _ref5.behavior;
+      _this.pendingScrollToIndexCallback = null;
+      var offset = _this.scrollOffset;
+      var size = _this.getSize();
+      var count = _this.options.count;
+      var measurements = _this.getMeasurements();
+      var measurement = measurements[Math.max(0, Math.min(index, count - 1))];
+      if (!measurement) {
+        throw new Error("VirtualItem not found for index = " + index);
+      }
+      if (align === 'auto') {
+        if (measurement.end >= offset + size - _this.options.scrollPaddingEnd) {
+          align = 'end';
+        } else if (measurement.start <= offset + _this.options.scrollPaddingStart) {
+          align = 'start';
+        } else {
+          return;
+        }
+      }
+      var getOffsetForIndexAndAlignment = function getOffsetForIndexAndAlignment(measurement) {
+        var toOffset = align === 'end' ? measurement.end + _this.options.scrollPaddingEnd : measurement.start - _this.options.scrollPaddingStart;
+        return _this.getOffsetForAlignment(toOffset, align);
       };
-      this.measure = () => {
-        this.itemMeasurementsCache = {};
-        this.notify();
+      var toOffset = getOffsetForIndexAndAlignment(measurement);
+      if (toOffset === offset) {
+        return;
+      }
+      var options = {
+        adjustments: undefined,
+        behavior: behavior,
+        sync: false
       };
-      this.setOptions(_opts);
-      this.scrollRect = this.options.initialRect;
-      this.scrollOffset = this.options.initialOffset;
-      this.calculateRange();
-    }
-  }
-  const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
+      _this._scrollToOffset(toOffset, options);
+      var isDynamic = Object.keys(_this.measureElementCache).length > 0;
+      if (isDynamic) {
+        _this.pendingScrollToIndexCallback = function () {
+          _this.scrollToIndex(index, {
+            align: align,
+            behavior: behavior
+          });
+        };
+      }
+    };
+    this.scrollBy = function (adjustments, options) {
+      _this._scrollToOffset(_this.scrollOffset, {
+        adjustments: adjustments,
+        behavior: options == null ? void 0 : options.behavior,
+        sync: false
+      });
+    };
+    this.getTotalSize = function () {
+      var _this$getMeasurements;
+      return (((_this$getMeasurements = _this.getMeasurements()[_this.options.count - 1]) == null ? void 0 : _this$getMeasurements.end) || _this.options.paddingStart) + _this.options.paddingEnd;
+    };
+    this._scrollToOffset = function (offset, _ref6) {
+      var adjustments = _ref6.adjustments,
+        behavior = _ref6.behavior,
+        sync = _ref6.sync;
+      _this.options.scrollToFn(offset, {
+        behavior: behavior,
+        sync: sync,
+        adjustments: adjustments
+      }, _this);
+    };
+    this.measure = function () {
+      _this.itemMeasurementsCache = {};
+      _this.notify();
+    };
+    this.setOptions(_opts);
+    this.scrollRect = this.options.initialRect;
+    this.scrollOffset = this.options.initialOffset;
+    this.calculateRange();
+  };
+  var findNearestBinarySearch = function findNearestBinarySearch(low, high, getCurrentValue, value) {
     while (low <= high) {
-      const middle = (low + high) / 2 | 0;
-      const currentValue = getCurrentValue(middle);
+      var middle = (low + high) / 2 | 0;
+      var currentValue = getCurrentValue(middle);
       if (currentValue < value) {
         low = middle + 1;
       } else if (currentValue > value) {
@@ -562,52 +604,60 @@
       return 0;
     }
   };
-  function calculateRange(_ref5) {
-    let {
-      measurements,
-      outerSize,
-      scrollOffset
-    } = _ref5;
-    const count = measurements.length - 1;
-    const getOffset = index => measurements[index].start;
-    const startIndex = findNearestBinarySearch(0, count, getOffset, scrollOffset);
-    let endIndex = startIndex;
+  function calculateRange(_ref7) {
+    var measurements = _ref7.measurements,
+      outerSize = _ref7.outerSize,
+      scrollOffset = _ref7.scrollOffset;
+    var count = measurements.length - 1;
+    var getOffset = function getOffset(index) {
+      return measurements[index].start;
+    };
+    var startIndex = findNearestBinarySearch(0, count, getOffset, scrollOffset);
+    var endIndex = startIndex;
     while (endIndex < count && measurements[endIndex].end < scrollOffset + outerSize) {
       endIndex++;
     }
     return {
-      startIndex,
-      endIndex
+      startIndex: startIndex,
+      endIndex: endIndex
     };
   }
 
   function createVirtualizerBase(options) {
-    const resolvedOptions = solidJs.mergeProps(options);
-    const instance = new Virtualizer(resolvedOptions);
-    const [virtualItems, setVirtualItems] = store.createStore(instance.getVirtualItems());
-    const [totalSize, setTotalSize] = solidJs.createSignal(instance.getTotalSize());
-    const handler = {
-      get(target, prop) {
+    var resolvedOptions = solidJs.mergeProps(options);
+    var instance = new Virtualizer(resolvedOptions);
+    var _createStore = store.createStore(instance.getVirtualItems()),
+      virtualItems = _createStore[0],
+      setVirtualItems = _createStore[1];
+    var _createSignal = solidJs.createSignal(instance.getTotalSize()),
+      totalSize = _createSignal[0],
+      setTotalSize = _createSignal[1];
+    var handler = {
+      get: function get(target, prop) {
         switch (prop) {
           case 'getVirtualItems':
-            return () => virtualItems;
+            return function () {
+              return virtualItems;
+            };
           case 'getTotalSize':
-            return () => totalSize();
+            return function () {
+              return totalSize();
+            };
           default:
             return Reflect.get(target, prop);
         }
       }
     };
-    const virtualizer = new Proxy(instance, handler);
+    var virtualizer = new Proxy(instance, handler);
     virtualizer.setOptions(resolvedOptions);
-    solidJs.onMount(() => {
-      const cleanup = virtualizer._didMount();
+    solidJs.onMount(function () {
+      var cleanup = virtualizer._didMount();
       virtualizer._willUpdate();
       solidJs.onCleanup(cleanup);
     });
-    solidJs.createComputed(() => {
+    solidJs.createComputed(function () {
       virtualizer.setOptions(solidJs.mergeProps(resolvedOptions, options, {
-        onChange: instance => {
+        onChange: function onChange(instance) {
           instance._willUpdate();
           setVirtualItems(store.reconcile(instance.getVirtualItems(), {
             key: 'index'
@@ -629,7 +679,9 @@
   }
   function createWindowVirtualizer(options) {
     return createVirtualizerBase(solidJs.mergeProps({
-      getScrollElement: () => typeof window !== 'undefined' ? window : null,
+      getScrollElement: function getScrollElement() {
+        return typeof window !== 'undefined' ? window : null;
+      },
       observeElementRect: observeWindowRect,
       observeElementOffset: observeWindowOffset,
       scrollToFn: windowScroll