@tanstack/virtual-core 3.0.0-beta.2 → 3.0.0-beta.21

package/build/umd/index.development.js

@@ -14,76 +14,6 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.VirtualCore = {}));
 })(this, (function (exports) { 'use strict';
 
-  var props = ["bottom", "height", "left", "right", "top", "width"];
-
-  var rectChanged = function rectChanged(a, b) {
-    if (a === void 0) {
-      a = {};
-    }
-
-    if (b === void 0) {
-      b = {};
-    }
-
-    return props.some(function (prop) {
-      return a[prop] !== b[prop];
-    });
-  };
-
-  var observedNodes = /*#__PURE__*/new Map();
-  var rafId;
-
-  var run = function run() {
-    var changedStates = [];
-    observedNodes.forEach(function (state, node) {
-      var newRect = node.getBoundingClientRect();
-
-      if (rectChanged(newRect, state.rect)) {
-        state.rect = newRect;
-        changedStates.push(state);
-      }
-    });
-    changedStates.forEach(function (state) {
-      state.callbacks.forEach(function (cb) {
-        return cb(state.rect);
-      });
-    });
-    rafId = window.requestAnimationFrame(run);
-  };
-
-  function observeRect(node, cb) {
-    return {
-      observe: function observe() {
-        var wasEmpty = observedNodes.size === 0;
-
-        if (observedNodes.has(node)) {
-          observedNodes.get(node).callbacks.push(cb);
-        } else {
-          observedNodes.set(node, {
-            rect: undefined,
-            hasRectChanged: false,
-            callbacks: [cb]
-          });
-        }
-
-        if (wasEmpty) run();
-      },
-      unobserve: function unobserve() {
-        var state = observedNodes.get(node);
-
-        if (state) {
-          // Remove the callback
-          var index = state.callbacks.indexOf(cb);
-          if (index >= 0) state.callbacks.splice(index, 1); // Remove the node reference
-
-          if (!state.callbacks.length) observedNodes["delete"](node); // Stop the loop
-
-          if (!observedNodes.size) cancelAnimationFrame(rafId);
-        }
-      }
-    };
-  }
-
   function memo(getDeps, fn, opts) {
     let deps = [];
     let result;
@@ -138,9 +68,29 @@
 
     return arr;
   };
+
+  const memoRectCallback = (instance, cb) => {
+    let prev = {
+      height: -1,
+      width: -1
+    };
+    return rect => {
+      if (instance.options.horizontal ? rect.width !== prev.width : rect.height !== prev.height) {
+        cb(rect);
+      }
+
+      prev = rect;
+    };
+  };
+
   const observeElementRect = (instance, cb) => {
-    const observer = observeRect(instance.scrollElement, rect => {
-      cb(rect);
+    const observer = new ResizeObserver(entries => {
+      var _entries$, _entries$2;
+
+      cb({
+        width: (_entries$ = entries[0]) == null ? void 0 : _entries$.contentRect.width,
+        height: (_entries$2 = entries[0]) == null ? void 0 : _entries$2.contentRect.height
+      });
     });
 
     if (!instance.scrollElement) {
@@ -148,18 +98,18 @@
     }
 
     cb(instance.scrollElement.getBoundingClientRect());
-    observer.observe();
+    observer.observe(instance.scrollElement);
     return () => {
-      observer.unobserve();
+      observer.unobserve(instance.scrollElement);
     };
   };
   const observeWindowRect = (instance, cb) => {
-    const onResize = () => {
-      cb({
-        width: instance.scrollElement.innerWidth,
-        height: instance.scrollElement.innerHeight
-      });
-    };
+    const memoizedCallback = memoRectCallback(instance, cb);
+
+    const onResize = () => memoizedCallback({
+      width: instance.scrollElement.innerWidth,
+      height: instance.scrollElement.innerHeight
+    });
 
     if (!instance.scrollElement) {
       return;
@@ -174,52 +124,80 @@
       instance.scrollElement.removeEventListener('resize', onResize);
     };
   };
-  const observeElementOffset = (instance, cb) => {
-    const onScroll = () => cb(instance.scrollElement[instance.options.horizontal ? 'scrollLeft' : 'scrollTop']);
+  const scrollProps = {
+    element: ['scrollLeft', 'scrollTop'],
+    window: ['scrollX', 'scrollY']
+  };
 
-    if (!instance.scrollElement) {
-      return;
-    }
+  const createOffsetObserver = mode => {
+    return (instance, cb) => {
+      if (!instance.scrollElement) {
+        return;
+      }
 
-    onScroll();
-    instance.scrollElement.addEventListener('scroll', onScroll, {
-      capture: false,
-      passive: true
-    });
-    return () => {
-      instance.scrollElement.removeEventListener('scroll', onScroll);
-    };
-  };
-  const observeWindowOffset = (instance, cb) => {
-    const onScroll = () => cb(instance.scrollElement[instance.options.horizontal ? 'scrollX' : 'scrollY']);
+      const propX = scrollProps[mode][0];
+      const propY = scrollProps[mode][1];
+      let prevX = instance.scrollElement[propX];
+      let prevY = instance.scrollElement[propY];
 
-    if (!instance.scrollElement) {
-      return;
-    }
+      const scroll = () => {
+        const offset = instance.scrollElement[instance.options.horizontal ? propX : propY];
+        cb(Math.max(0, offset - instance.options.scrollMargin));
+      };
 
-    onScroll();
-    instance.scrollElement.addEventListener('scroll', onScroll, {
-      capture: false,
-      passive: true
-    });
-    return () => {
-      instance.scrollElement.removeEventListener('scroll', onScroll);
+      scroll();
+
+      const onScroll = e => {
+        const target = e.currentTarget;
+        const scrollX = target[propX];
+        const scrollY = target[propY];
+
+        if (instance.options.horizontal ? prevX - scrollX : prevY - scrollY) {
+          scroll();
+        }
+
+        prevX = scrollX;
+        prevY = scrollY;
+      };
+
+      instance.scrollElement.addEventListener('scroll', onScroll, {
+        capture: false,
+        passive: true
+      });
+      return () => {
+        instance.scrollElement.removeEventListener('scroll', onScroll);
+      };
     };
   };
+
+  const observeElementOffset = createOffsetObserver('element');
+  const observeWindowOffset = createOffsetObserver('window');
   const measureElement = (element, instance) => {
-    return element.getBoundingClientRect()[instance.options.horizontal ? 'width' : 'height'];
+    return Math.round(element.getBoundingClientRect()[instance.options.horizontal ? 'width' : 'height']);
   };
-  const windowScroll = (offset, canSmooth, instance) => {
+  const windowScroll = (offset, _ref, instance) => {
     var _instance$scrollEleme;
-    (_instance$scrollEleme = instance.scrollElement) == null ? void 0 : _instance$scrollEleme.scrollTo({
-      [instance.options.horizontal ? 'left' : 'top']: offset,
+
+    let {
+      canSmooth,
+      sync
+    } = _ref;
+    const toOffset = sync ? offset : offset + instance.options.scrollMargin;
+    (_instance$scrollEleme = instance.scrollElement) == null ? void 0 : _instance$scrollEleme.scrollTo == null ? void 0 : _instance$scrollEleme.scrollTo({
+      [instance.options.horizontal ? 'left' : 'top']: toOffset,
       behavior: canSmooth ? 'smooth' : undefined
     });
   };
-  const elementScroll = (offset, canSmooth, instance) => {
+  const elementScroll = (offset, _ref2, instance) => {
     var _instance$scrollEleme2;
-    (_instance$scrollEleme2 = instance.scrollElement) == null ? void 0 : _instance$scrollEleme2.scrollTo({
-      [instance.options.horizontal ? 'left' : 'top']: offset,
+
+    let {
+      canSmooth,
+      sync
+    } = _ref2;
+    const toOffset = sync ? offset : offset + instance.options.scrollMargin;
+    (_instance$scrollEleme2 = instance.scrollElement) == null ? void 0 : _instance$scrollEleme2.scrollTo == null ? void 0 : _instance$scrollEleme2.scrollTo({
+      [instance.options.horizontal ? 'left' : 'top']: toOffset,
       behavior: canSmooth ? 'smooth' : undefined
     });
   };
@@ -229,13 +207,26 @@
 
       this.unsubs = [];
       this.scrollElement = null;
+      this.isScrolling = false;
+      this.isScrollingTimeoutId = null;
       this.measurementsCache = [];
       this.itemMeasurementsCache = {};
       this.pendingMeasuredCacheIndexes = [];
+      this.scrollDelta = 0;
+      this.measureElementCache = {};
+      this.ro = new ResizeObserver(entries => {
+        entries.forEach(entry => {
+          this._measureElement(entry.target, false);
+        });
+      });
+      this.range = {
+        startIndex: 0,
+        endIndex: 0
+      };
 
       this.setOptions = opts => {
-        Object.entries(opts).forEach(_ref => {
-          let [key, value] = _ref;
+        Object.entries(opts).forEach(_ref3 => {
+          let [key, value] = _ref3;
           if (typeof value === 'undefined') delete opts[key];
         });
         this.options = {
@@ -256,6 +247,9 @@
             width: 0,
             height: 0
           },
+          scrollMargin: 0,
+          scrollingDelay: 150,
+          indexAttribute: 'data-index',
           ...opts
         };
       };
@@ -269,10 +263,13 @@
       this.cleanup = () => {
         this.unsubs.filter(Boolean).forEach(d => d());
         this.unsubs = [];
+        this.scrollElement = null;
       };
 
       this._didMount = () => {
         return () => {
+          this.ro.disconnect();
+          this.measureElementCache = {};
           this.cleanup();
         };
       };
@@ -283,14 +280,41 @@
         if (this.scrollElement !== scrollElement) {
           this.cleanup();
           this.scrollElement = scrollElement;
+
+          this._scrollToOffset(this.scrollOffset, {
+            canSmooth: false,
+            sync: true,
+            requested: false
+          });
+
           this.unsubs.push(this.options.observeElementRect(this, rect => {
             this.scrollRect = rect;
-            this.notify();
+            this.calculateRange();
           }));
           this.unsubs.push(this.options.observeElementOffset(this, offset => {
-            this.scrollOffset = offset;
-            this.notify();
+            if (this.isScrollingTimeoutId !== null) {
+              clearTimeout(this.isScrollingTimeoutId);
+              this.isScrollingTimeoutId = null;
+            }
+
+            if (this.scrollOffset !== offset) {
+              this.scrollOffset = offset;
+              this.isScrolling = true;
+              this.scrollDelta = 0;
+              this.isScrollingTimeoutId = setTimeout(() => {
+                this.isScrollingTimeoutId = null;
+                this.isScrolling = false;
+                this.notify();
+              }, this.options.scrollingDelay);
+            } else {
+              this.isScrolling = false;
+              this.scrollDelta = 0;
+            }
+
+            this.calculateRange();
           }));
+        } else if (!this.isScrolling) {
+          this.calculateRange();
         }
       };
 
@@ -325,104 +349,166 @@
         debug: () => this.options.debug
       });
       this.calculateRange = memo(() => [this.getMeasurements(), this.getSize(), this.scrollOffset], (measurements, outerSize, scrollOffset) => {
-        return calculateRange({
+        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.getIndexes = memo(() => [this.options.rangeExtractor, this.calculateRange(), this.options.overscan, this.options.count], (rangeExtractor, range, overscan, count) => {
+      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'
+        key: 'getIndexes',
+        debug: () => this.options.debug
       });
-      this.getVirtualItems = memo(() => [this.getIndexes(), this.getMeasurements(), this.options.measureElement], (indexes, measurements, measureElement) => {
+
+      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);
+      };
+
+      this._measureElement = (node, _sync) => {
+        var _this$itemMeasurement;
+
+        const index = this.indexFromElement(node);
+        const item = this.measurementsCache[index];
+
+        if (!item) {
+          return;
+        }
+
+        const key = String(item.key);
+        const prevNode = this.measureElementCache[key];
+
+        if (!node.isConnected) {
+          if (prevNode) {
+            this.ro.unobserve(prevNode);
+            delete this.measureElementCache[key];
+          }
+
+          return;
+        }
+
+        if (!prevNode || prevNode !== node) {
+          if (prevNode) {
+            this.ro.unobserve(prevNode);
+          }
+
+          this.measureElementCache[key] = node;
+          this.ro.observe(node);
+        }
+
+        const measuredItemSize = this.options.measureElement(node, this);
+        const itemSize = (_this$itemMeasurement = this.itemMeasurementsCache[item.key]) != null ? _this$itemMeasurement : item.size;
+
+        if (measuredItemSize !== itemSize) {
+          if (item.start < this.scrollOffset) {
+            if (this.options.debug) {
+              console.info('correction', measuredItemSize - itemSize);
+            }
+
+            if (this.destinationOffset === undefined) {
+              this.scrollDelta += measuredItemSize - itemSize;
+
+              this._scrollToOffset(this.scrollOffset + this.scrollDelta, {
+                canSmooth: false,
+                sync: false,
+                requested: 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];
-          const item = { ...measurement,
-            measureElement: measurableItem => {
-              if (measurableItem) {
-                const measuredItemSize = measureElement(measurableItem, this);
-
-                if (measuredItemSize !== item.size) {
-                  if (item.start < this.scrollOffset) {
-                    if (this.options.debug) console.info('correction', measuredItemSize - item.size);
-
-                    if (!this.destinationOffset) {
-                      this._scrollToOffset(this.scrollOffset + (measuredItemSize - item.size), false);
-                    }
-                  }
-
-                  this.pendingMeasuredCacheIndexes.push(i);
-                  this.itemMeasurementsCache = { ...this.itemMeasurementsCache,
-                    [item.key]: measuredItemSize
-                  };
-                  this.notify();
-                }
-              }
-            }
-          };
-          virtualItems.push(item);
+          virtualItems.push(measurement);
         }
 
         return virtualItems;
       }, {
-        key: 'getIndexes'
+        key: 'getIndexes',
+        debug: () => this.options.debug
       });
 
       this.scrollToOffset = function (toOffset, _temp) {
         let {
-          align
-        } = _temp === void 0 ? {
-          align: 'start'
-        } : _temp;
-
-        const attempt = () => {
-          const offset = _this.scrollOffset;
+          align = 'start',
+          smoothScroll = _this.options.enableSmoothScroll
+        } = _temp === void 0 ? {} : _temp;
+        const offset = _this.scrollOffset;
 
-          const size = _this.getSize();
+        const size = _this.getSize();
 
-          if (align === 'auto') {
-            if (toOffset <= offset) {
-              align = 'start';
-            } else if (toOffset >= offset + size) {
-              align = 'end';
-            } else {
-              align = 'start';
-            }
+        if (align === 'auto') {
+          if (toOffset <= offset) {
+            align = 'start';
+          } else if (toOffset >= offset + size) {
+            align = 'end';
+          } else {
+            align = 'start';
           }
+        }
 
-          if (align === 'start') {
-            _this._scrollToOffset(toOffset, true);
-          } else if (align === 'end') {
-            _this._scrollToOffset(toOffset - size, true);
-          } else if (align === 'center') {
-            _this._scrollToOffset(toOffset - size / 2, true);
-          }
+        const options = {
+          canSmooth: smoothScroll,
+          sync: false,
+          requested: true
         };
 
-        attempt();
-        requestAnimationFrame(() => {
-          attempt();
-        });
+        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.scrollToIndex = function (index, _temp2) {
         let {
-          align,
+          align = 'auto',
+          smoothScroll = _this.options.enableSmoothScroll,
           ...rest
-        } = _temp2 === void 0 ? {
-          align: 'auto'
-        } : _temp2;
+        } = _temp2 === void 0 ? {} : _temp2;
 
         const measurements = _this.getMeasurements();
 
@@ -453,6 +539,7 @@
 
         _this.scrollToOffset(toOffset, {
           align,
+          smoothScroll,
           ...rest
         });
       };
@@ -463,10 +550,22 @@
         return (((_this$getMeasurements = this.getMeasurements()[this.options.count - 1]) == null ? void 0 : _this$getMeasurements.end) || this.options.paddingStart) + this.options.paddingEnd;
       };
 
-      this._scrollToOffset = (offset, canSmooth) => {
+      this._scrollToOffset = (offset, _ref4) => {
+        let {
+          requested,
+          canSmooth,
+          sync
+        } = _ref4;
         clearTimeout(this.scrollCheckFrame);
-        this.destinationOffset = offset;
-        this.options.scrollToFn(offset, this.options.enableSmoothScroll && canSmooth, this);
+
+        if (requested) {
+          this.destinationOffset = offset;
+        }
+
+        this.options.scrollToFn(offset, {
+          canSmooth,
+          sync
+        }, this);
         let scrollCheckFrame;
 
         const check = () => {
@@ -497,6 +596,7 @@
       this.setOptions(_opts);
       this.scrollRect = this.options.initialRect;
       this.scrollOffset = this.options.initialOffset;
+      this.calculateRange();
     }
 
   }
@@ -522,12 +622,12 @@
     }
   };
 
-  function calculateRange(_ref2) {
+  function calculateRange(_ref5) {
     let {
       measurements,
       outerSize,
       scrollOffset
-    } = _ref2;
+    } = _ref5;
     const count = measurements.length - 1;
 
     const getOffset = index => measurements[index].start;