@tanstack/solid-virtual 3.0.0-beta.6

package/build/umd/index.development.js

@@ -0,0 +1,653 @@
+/**
+ * solid-virtual
+ *
+ * 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 (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('solid-js'), require('solid-js/store')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'solid-js', 'solid-js/store'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.SolidVirtual = {}, global.Solid, global["Solid/Store"]));
+})(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
+   */
+  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;
+    return () => {
+      let 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);
+
+      if (!depsChanged) {
+        return result;
+      }
+
+      deps = newDeps;
+      let resultTime;
+      if (opts.key && opts.debug != null && opts.debug()) resultTime = Date.now();
+      result = fn(...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) => {
+          str = String(str);
+
+          while (str.length < num) {
+            str = ' ' + str;
+          }
+
+          return str;
+        };
+
+        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;
+    };
+  }
+
+  //
+  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);
+    }
+
+    return arr;
+  };
+  const observeElementRect = (instance, cb) => {
+    const observer = observeRect(instance.scrollElement, rect => {
+      cb(rect);
+    });
+
+    if (!instance.scrollElement) {
+      return;
+    }
+
+    cb(instance.scrollElement.getBoundingClientRect());
+    observer.observe();
+    return () => {
+      observer.unobserve();
+    };
+  };
+  const observeWindowRect = (instance, cb) => {
+    const onResize = () => {
+      cb({
+        width: instance.scrollElement.innerWidth,
+        height: instance.scrollElement.innerHeight
+      });
+    };
+
+    if (!instance.scrollElement) {
+      return;
+    }
+
+    onResize();
+    instance.scrollElement.addEventListener('resize', onResize, {
+      capture: false,
+      passive: true
+    });
+    return () => {
+      instance.scrollElement.removeEventListener('resize', onResize);
+    };
+  };
+  const observeElementOffset = (instance, cb) => {
+    const onScroll = () => cb(instance.scrollElement[instance.options.horizontal ? 'scrollLeft' : 'scrollTop']);
+
+    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']);
+
+    if (!instance.scrollElement) {
+      return;
+    }
+
+    onScroll();
+    instance.scrollElement.addEventListener('scroll', onScroll, {
+      capture: false,
+      passive: true
+    });
+    return () => {
+      instance.scrollElement.removeEventListener('scroll', onScroll);
+    };
+  };
+  const measureElement = (element, instance) => {
+    return element.getBoundingClientRect()[instance.options.horizontal ? 'width' : 'height'];
+  };
+  const windowScroll = (offset, canSmooth, instance) => {
+    var _instance$scrollEleme;
+    (_instance$scrollEleme = instance.scrollElement) == null ? void 0 : _instance$scrollEleme.scrollTo({
+      [instance.options.horizontal ? 'left' : 'top']: offset,
+      behavior: canSmooth ? 'smooth' : undefined
+    });
+  };
+  const elementScroll = (offset, canSmooth, instance) => {
+    var _instance$scrollEleme2;
+    (_instance$scrollEleme2 = instance.scrollElement) == null ? void 0 : _instance$scrollEleme2.scrollTo({
+      [instance.options.horizontal ? 'left' : 'top']: offset,
+      behavior: canSmooth ? 'smooth' : undefined
+    });
+  };
+  class Virtualizer {
+    constructor(_opts) {
+      var _this = this;
+
+      this.unsubs = [];
+      this.scrollElement = null;
+      this.measurementsCache = [];
+      this.itemMeasurementsCache = {};
+      this.pendingMeasuredCacheIndexes = [];
+      this.measureElementCache = {};
+
+      this.setOptions = opts => {
+        Object.entries(opts).forEach(_ref => {
+          let [key, value] = _ref;
+          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,
+          enableSmoothScroll: true,
+          onChange: () => {},
+          measureElement,
+          initialRect: {
+            width: 0,
+            height: 0
+          },
+          ...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._didMount = () => {
+        return () => {
+          this.cleanup();
+        };
+      };
+
+      this._willUpdate = () => {
+        const scrollElement = this.options.getScrollElement();
+
+        if (this.scrollElement !== scrollElement) {
+          this.cleanup();
+          this.scrollElement = scrollElement;
+          this.unsubs.push(this.options.observeElementRect(this, rect => {
+            this.scrollRect = rect;
+            this.notify();
+          }));
+          this.unsubs.push(this.options.observeElementOffset(this, offset => {
+            this.scrollOffset = offset;
+            this.notify();
+          }));
+        }
+      };
+
+      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.calculateRange = memo(() => [this.getMeasurements(), this.getSize(), this.scrollOffset], (measurements, outerSize, scrollOffset) => {
+        return calculateRange({
+          measurements,
+          outerSize,
+          scrollOffset
+        });
+      }, {
+        key: 'calculateRange',
+        debug: () => this.options.debug
+      });
+      this.getIndexes = memo(() => [this.options.rangeExtractor, this.calculateRange(), this.options.overscan, this.options.count], (rangeExtractor, range, overscan, count) => {
+        return rangeExtractor({ ...range,
+          overscan,
+          count: count
+        });
+      }, {
+        key: 'getIndexes'
+      });
+      this.getVirtualItems = memo(() => [this.getIndexes(), this.getMeasurements(), this.options.measureElement], (indexes, measurements, measureElement) => {
+        const makeMeasureElement = index => measurableItem => {
+          var _this$itemMeasurement;
+
+          const item = this.measurementsCache[index];
+
+          if (!measurableItem) {
+            return;
+          }
+
+          const measuredItemSize = measureElement(measurableItem, 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) {
+                this._scrollToOffset(this.scrollOffset + (measuredItemSize - itemSize), false);
+              }
+            }
+
+            this.pendingMeasuredCacheIndexes.push(index);
+            this.itemMeasurementsCache = { ...this.itemMeasurementsCache,
+              [item.key]: measuredItemSize
+            };
+            this.notify();
+          }
+        };
+
+        const virtualItems = [];
+        const currentMeasureElements = {};
+
+        for (let k = 0, len = indexes.length; k < len; k++) {
+          var _this$measureElementC;
+
+          const i = indexes[k];
+          const measurement = measurements[i];
+          const item = { ...measurement,
+            measureElement: currentMeasureElements[i] = (_this$measureElementC = this.measureElementCache[i]) != null ? _this$measureElementC : makeMeasureElement(i)
+          };
+          virtualItems.push(item);
+        }
+
+        this.measureElementCache = currentMeasureElements;
+        return virtualItems;
+      }, {
+        key: 'getIndexes'
+      });
+
+      this.scrollToOffset = function (toOffset, _temp) {
+        let {
+          align
+        } = _temp === void 0 ? {
+          align: 'start'
+        } : _temp;
+
+        const attempt = () => {
+          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';
+            }
+          }
+
+          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);
+          }
+        };
+
+        attempt();
+        requestAnimationFrame(() => {
+          attempt();
+        });
+      };
+
+      this.scrollToIndex = function (index, _temp2) {
+        let {
+          align,
+          ...rest
+        } = _temp2 === void 0 ? {
+          align: 'auto'
+        } : _temp2;
+
+        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;
+        }
+
+        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;
+          }
+        }
+
+        const toOffset = align === 'end' ? measurement.end + _this.options.scrollPaddingEnd : measurement.start - _this.options.scrollPaddingStart;
+
+        _this.scrollToOffset(toOffset, {
+          align,
+          ...rest
+        });
+      };
+
+      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, canSmooth) => {
+        clearTimeout(this.scrollCheckFrame);
+        this.destinationOffset = offset;
+        this.options.scrollToFn(offset, this.options.enableSmoothScroll && canSmooth, this);
+        let scrollCheckFrame;
+
+        const check = () => {
+          let lastOffset = this.scrollOffset;
+          this.scrollCheckFrame = scrollCheckFrame = setTimeout(() => {
+            if (this.scrollCheckFrame !== scrollCheckFrame) {
+              return;
+            }
+
+            if (this.scrollOffset === lastOffset) {
+              this.destinationOffset = undefined;
+              return;
+            }
+
+            lastOffset = this.scrollOffset;
+            check();
+          }, 100);
+        };
+
+        check();
+      };
+
+      this.measure = () => {
+        this.itemMeasurementsCache = {};
+        this.notify();
+      };
+
+      this.setOptions(_opts);
+      this.scrollRect = this.options.initialRect;
+      this.scrollOffset = this.options.initialOffset;
+    }
+
+  }
+
+  const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
+    while (low <= high) {
+      const middle = (low + high) / 2 | 0;
+      const currentValue = getCurrentValue(middle);
+
+      if (currentValue < value) {
+        low = middle + 1;
+      } else if (currentValue > value) {
+        high = middle - 1;
+      } else {
+        return middle;
+      }
+    }
+
+    if (low > 0) {
+      return low - 1;
+    } else {
+      return 0;
+    }
+  };
+
+  function calculateRange(_ref2) {
+    let {
+      measurements,
+      outerSize,
+      scrollOffset
+    } = _ref2;
+    const count = measurements.length - 1;
+
+    const getOffset = index => measurements[index].start;
+
+    const startIndex = findNearestBinarySearch(0, count, getOffset, scrollOffset);
+    let endIndex = startIndex;
+
+    while (endIndex < count && measurements[endIndex].end < scrollOffset + outerSize) {
+      endIndex++;
+    }
+
+    return {
+      startIndex,
+      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) {
+        switch (prop) {
+          case 'getVirtualItems':
+            return () => virtualItems;
+
+          case 'getTotalSize':
+            return () => totalSize();
+
+          default:
+            return Reflect.get(target, prop);
+        }
+      }
+
+    };
+    const virtualizer = new Proxy(instance, handler);
+    virtualizer.setOptions(resolvedOptions);
+    solidJs.onMount(() => {
+      const cleanup = virtualizer._didMount();
+
+      virtualizer._willUpdate();
+
+      solidJs.onCleanup(cleanup);
+    });
+    solidJs.createComputed(() => {
+      virtualizer.setOptions(solidJs.mergeProps(resolvedOptions, options, {
+        onChange: instance => {
+          instance._willUpdate();
+
+          setVirtualItems(store.reconcile(instance.getVirtualItems(), {
+            key: 'index'
+          }));
+          setTotalSize(instance.getTotalSize());
+          options.onChange == null ? void 0 : options.onChange(instance);
+        }
+      }));
+      virtualizer.measure();
+    });
+    return virtualizer;
+  }
+
+  function createVirtualizer(options) {
+    return createVirtualizerBase(solidJs.mergeProps({
+      observeElementRect: observeElementRect,
+      observeElementOffset: observeElementOffset,
+      scrollToFn: elementScroll
+    }, options));
+  }
+  function createWindowVirtualizer(options) {
+    return createVirtualizerBase(solidJs.mergeProps({
+      getScrollElement: () => typeof window !== 'undefined' ? window : null,
+      observeElementRect: observeWindowRect,
+      observeElementOffset: observeWindowOffset,
+      scrollToFn: windowScroll
+    }, options));
+  }
+
+  exports.Virtualizer = Virtualizer;
+  exports.createVirtualizer = createVirtualizer;
+  exports.createWindowVirtualizer = createWindowVirtualizer;
+  exports.defaultKeyExtractor = defaultKeyExtractor;
+  exports.defaultRangeExtractor = defaultRangeExtractor;
+  exports.elementScroll = elementScroll;
+  exports.measureElement = measureElement;
+  exports.memo = memo;
+  exports.observeElementOffset = observeElementOffset;
+  exports.observeElementRect = observeElementRect;
+  exports.observeWindowOffset = observeWindowOffset;
+  exports.observeWindowRect = observeWindowRect;
+  exports.windowScroll = windowScroll;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=index.development.js.map