@tanstack/virtual-core 3.0.0-beta.1 → 3.0.0-beta.10

package/src/index.ts

@@ -1,6 +1,4 @@
 import observeRect from '@reach/observe-rect'
-import { check } from 'prettier'
-import React from 'react'
 import { memo } from './utils'
 
 export * from './utils'
@@ -9,7 +7,7 @@ export * from './utils'
 
 type ScrollAlignment = 'start' | 'center' | 'end' | 'auto'
 
-interface ScrollToOptions {
+export interface ScrollToOptions {
   align: ScrollAlignment
 }
 
@@ -60,19 +58,40 @@ export const defaultRangeExtractor = (range: Range) => {
   return arr
 }
 
+const memoRectCallback = (
+  instance: Virtualizer<any, any>,
+  cb: (rect: Rect) => void,
+) => {
+  let prev: Rect = { height: -1, width: -1 }
+
+  return (rect: Rect) => {
+    if (
+      instance.options.horizontal
+        ? rect.width !== prev.width
+        : rect.height !== prev.height
+    ) {
+      cb(rect)
+    }
+
+    prev = rect
+  }
+}
+
 export const observeElementRect = (
   instance: Virtualizer<any, any>,
   cb: (rect: Rect) => void,
 ) => {
+  const onResize = memoRectCallback(instance, cb)
+
   const observer = observeRect(instance.scrollElement as Element, (rect) => {
-    cb(rect)
+    onResize(rect)
   })
 
   if (!instance.scrollElement) {
     return
   }
 
-  cb(instance.scrollElement.getBoundingClientRect())
+  onResize(instance.scrollElement.getBoundingClientRect())
 
   observer.observe()
 
@@ -85,12 +104,12 @@ export const observeWindowRect = (
   instance: Virtualizer<any, any>,
   cb: (rect: Rect) => void,
 ) => {
-  const onResize = () => {
-    cb({
+  const memoizedCallback = memoRectCallback(instance, cb)
+  const onResize = () =>
+    memoizedCallback({
       width: instance.scrollElement.innerWidth,
       height: instance.scrollElement.innerHeight,
     })
-  }
 
   if (!instance.scrollElement) {
     return
@@ -108,60 +127,58 @@ export const observeWindowRect = (
   }
 }
 
-export const observeElementOffset = (
-  instance: Virtualizer<any, any>,
-  cb: (offset: number) => void,
-) => {
-  const onScroll = () =>
-    cb(
-      instance.scrollElement[
-        instance.options.horizontal ? 'scrollLeft' : 'scrollTop'
-      ],
-    )
+type ObserverMode = 'element' | 'window'
 
-  if (!instance.scrollElement) {
-    return
-  }
+const scrollProps = {
+  element: ['scrollLeft', 'scrollTop'],
+  window: ['scrollX', 'scrollY'],
+} as const
 
-  onScroll()
+const createOffsetObserver = (mode: ObserverMode) => {
+  return (instance: Virtualizer<any, any>, cb: (offset: number) => void) => {
+    if (!instance.scrollElement) {
+      return
+    }
 
-  instance.scrollElement.addEventListener('scroll', onScroll, {
-    capture: false,
-    passive: true,
-  })
+    const propX = scrollProps[mode][0]
+    const propY = scrollProps[mode][1]
 
-  return () => {
-    instance.scrollElement.removeEventListener('scroll', onScroll)
-  }
-}
+    let prevX: number = instance.scrollElement[propX]
+    let prevY: number = instance.scrollElement[propY]
 
-export const observeWindowOffset = (
-  instance: Virtualizer<any, any>,
-  cb: (offset: number) => void,
-) => {
-  const onScroll = () =>
-    cb(
-      instance.scrollElement[
-        instance.options.horizontal ? 'scrollX' : 'scrollY'
-      ],
-    )
+    const scroll = () => {
+      cb(instance.scrollElement[instance.options.horizontal ? propX : propY])
+    }
 
-  if (!instance.scrollElement) {
-    return
-  }
+    scroll()
 
-  onScroll()
+    const onScroll = (e: Event) => {
+      const target = e.currentTarget as HTMLElement & Window
+      const scrollX = target[propX]
+      const scrollY = target[propY]
 
-  instance.scrollElement.addEventListener('scroll', onScroll, {
-    capture: false,
-    passive: true,
-  })
+      if (instance.options.horizontal ? prevX - scrollX : prevY - scrollY) {
+        scroll()
+      }
 
-  return () => {
-    instance.scrollElement.removeEventListener('scroll', onScroll)
+      prevX = scrollX
+      prevY = scrollY
+    }
+
+    instance.scrollElement.addEventListener('scroll', onScroll, {
+      capture: false,
+      passive: true,
+    })
+
+    return () => {
+      instance.scrollElement.removeEventListener('scroll', onScroll)
+    }
   }
 }
 
+export const observeElementOffset = createOffsetObserver('element')
+export const observeWindowOffset = createOffsetObserver('window')
+
 export const measureElement = (
   element: unknown,
   instance: Virtualizer<any, any>,
@@ -248,6 +265,10 @@ export class Virtualizer<TScrollElement = unknown, TItemElement = unknown> {
   private scrollOffset: number
   private destinationOffset: undefined | number
   private scrollCheckFrame!: ReturnType<typeof setTimeout>
+  private measureElementCache: Record<
+    number,
+    (measurableItem: TItemElement | null) => void
+  > = {}
 
   constructor(opts: VirtualizerOptions<TScrollElement, TItemElement>) {
     this.setOptions(opts)
@@ -286,6 +307,7 @@ export class Virtualizer<TScrollElement = unknown, TItemElement = unknown> {
   private cleanup = () => {
     this.unsubs.filter(Boolean).forEach((d) => d!())
     this.unsubs = []
+    this.scrollElement = null
   }
 
   _didMount = () => {
@@ -402,48 +424,61 @@ export class Virtualizer<TScrollElement = unknown, TItemElement = unknown> {
       this.options.measureElement,
     ],
     (indexes, measurements, measureElement) => {
+      const makeMeasureElement =
+        (index: number) => (measurableItem: TItemElement | null) => {
+          const item = this.measurementsCache[index]!
+
+          if (!measurableItem) {
+            return
+          }
+
+          const measuredItemSize = measureElement(measurableItem, this)
+          const itemSize = this.itemMeasurementsCache[item.key] ?? item.size
+
+          if (measuredItemSize !== itemSize) {
+            if (item.start < this.scrollOffset) {
+              if (
+                process.env.NODE_ENV === 'development' &&
+                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: VirtualItem<TItemElement>[] = []
 
+      const currentMeasureElements: typeof this.measureElementCache = {}
+
       for (let k = 0, len = indexes.length; k < len; k++) {
         const i = indexes[k]!
         const measurement = measurements[i]!
 
         const item = {
           ...measurement,
-          measureElement: (measurableItem: TItemElement | null) => {
-            if (measurableItem) {
-              const measuredItemSize = measureElement(measurableItem, this)
-
-              if (measuredItemSize !== item.size) {
-                if (item.start < this.scrollOffset) {
-                  if (
-                    process.env.NODE_ENV === 'development' &&
-                    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()
-              }
-            }
-          },
+          measureElement: (currentMeasureElements[i] =
+            this.measureElementCache[i] ?? makeMeasureElement(i)),
         }
-
         virtualItems.push(item)
       }
 
+      this.measureElementCache = currentMeasureElements
+
       return virtualItems
     },
     {

package/build/stats-react.json

@@ -1,101 +0,0 @@
-{
-  "version": 2,
-  "tree": {
-    "name": "root",
-    "children": [
-      {
-        "name": "index.production.js",
-        "children": [
-          {
-            "name": "node_modules/@reach/observe-rect/dist/observe-rect.esm.js",
-            "uid": "8d36-7"
-          },
-          {
-            "name": "packages/virtual-core/src",
-            "children": [
-              {
-                "uid": "8d36-9",
-                "name": "utils.ts"
-              },
-              {
-                "uid": "8d36-11",
-                "name": "index.ts"
-              }
-            ]
-          }
-        ]
-      }
-    ],
-    "isRoot": true
-  },
-  "nodeParts": {
-    "8d36-7": {
-      "renderedLength": 1732,
-      "gzipLength": 652,
-      "brotliLength": 0,
-      "mainUid": "8d36-6"
-    },
-    "8d36-9": {
-      "renderedLength": 1432,
-      "gzipLength": 544,
-      "brotliLength": 0,
-      "mainUid": "8d36-8"
-    },
-    "8d36-11": {
-      "renderedLength": 12406,
-      "gzipLength": 2777,
-      "brotliLength": 0,
-      "mainUid": "8d36-10"
-    }
-  },
-  "nodeMetas": {
-    "8d36-6": {
-      "id": "/node_modules/@reach/observe-rect/dist/observe-rect.esm.js",
-      "moduleParts": {
-        "index.production.js": "8d36-7"
-      },
-      "imported": [],
-      "importedBy": [
-        {
-          "uid": "8d36-10"
-        }
-      ]
-    },
-    "8d36-8": {
-      "id": "/packages/virtual-core/src/utils.ts",
-      "moduleParts": {
-        "index.production.js": "8d36-9"
-      },
-      "imported": [],
-      "importedBy": [
-        {
-          "uid": "8d36-10"
-        }
-      ]
-    },
-    "8d36-10": {
-      "id": "/packages/virtual-core/src/index.ts",
-      "moduleParts": {
-        "index.production.js": "8d36-11"
-      },
-      "imported": [
-        {
-          "uid": "8d36-6"
-        },
-        {
-          "uid": "8d36-8"
-        }
-      ],
-      "importedBy": [],
-      "isEntry": true
-    }
-  },
-  "env": {
-    "rollup": "2.75.4"
-  },
-  "options": {
-    "gzip": true,
-    "brotli": false,
-    "sourcemap": false
-  }
-}

package/build/types/index.d.ts

@@ -1,87 +0,0 @@
-export * from './utils';
-declare type ScrollAlignment = 'start' | 'center' | 'end' | 'auto';
-interface ScrollToOptions {
-    align: ScrollAlignment;
-}
-declare type ScrollToOffsetOptions = ScrollToOptions;
-declare type ScrollToIndexOptions = ScrollToOptions;
-export interface Range {
-    startIndex: number;
-    endIndex: number;
-    overscan: number;
-    count: number;
-}
-declare type Key = number | string;
-interface Item {
-    key: Key;
-    index: number;
-    start: number;
-    end: number;
-    size: number;
-}
-interface Rect {
-    width: number;
-    height: number;
-}
-export interface VirtualItem<TItemElement> extends Item {
-    measureElement: (el: TItemElement | null) => void;
-}
-export declare const defaultKeyExtractor: (index: number) => number;
-export declare const defaultRangeExtractor: (range: Range) => number[];
-export declare const observeElementRect: (instance: Virtualizer<any, any>, cb: (rect: Rect) => void) => (() => void) | undefined;
-export declare const observeWindowRect: (instance: Virtualizer<any, any>, cb: (rect: Rect) => void) => (() => void) | undefined;
-export declare const observeElementOffset: (instance: Virtualizer<any, any>, cb: (offset: number) => void) => (() => void) | undefined;
-export declare const observeWindowOffset: (instance: Virtualizer<any, any>, cb: (offset: number) => void) => (() => void) | undefined;
-export declare const measureElement: (element: unknown, instance: Virtualizer<any, any>) => number;
-export declare const windowScroll: (offset: number, canSmooth: boolean, instance: Virtualizer<any, any>) => void;
-export declare const elementScroll: (offset: number, canSmooth: boolean, instance: Virtualizer<any, any>) => void;
-export interface VirtualizerOptions<TScrollElement = unknown, TItemElement = unknown> {
-    count: number;
-    getScrollElement: () => TScrollElement;
-    estimateSize: (index: number) => number;
-    scrollToFn: (offset: number, canSmooth: boolean, instance: Virtualizer<TScrollElement, TItemElement>) => void;
-    observeElementRect: (instance: Virtualizer<TScrollElement, TItemElement>, cb: (rect: Rect) => void) => void | (() => void);
-    observeElementOffset: (instance: Virtualizer<TScrollElement, TItemElement>, cb: (offset: number) => void) => void | (() => void);
-    debug?: any;
-    initialRect?: Rect;
-    onChange?: (instance: Virtualizer<TScrollElement, TItemElement>) => void;
-    measureElement?: (el: TItemElement, instance: Virtualizer<TScrollElement, TItemElement>) => number;
-    overscan?: number;
-    horizontal?: boolean;
-    paddingStart?: number;
-    paddingEnd?: number;
-    scrollPaddingStart?: number;
-    scrollPaddingEnd?: number;
-    initialOffset?: number;
-    getItemKey?: (index: number) => Key;
-    rangeExtractor?: (range: Range) => number[];
-    enableSmoothScroll?: boolean;
-}
-export declare class Virtualizer<TScrollElement = unknown, TItemElement = unknown> {
-    private unsubs;
-    options: Required<VirtualizerOptions<TScrollElement, TItemElement>>;
-    scrollElement: TScrollElement | null;
-    private measurementsCache;
-    private itemMeasurementsCache;
-    private pendingMeasuredCacheIndexes;
-    private scrollRect;
-    private scrollOffset;
-    private destinationOffset;
-    private scrollCheckFrame;
-    constructor(opts: VirtualizerOptions<TScrollElement, TItemElement>);
-    setOptions: (opts: VirtualizerOptions<TScrollElement, TItemElement>) => void;
-    private notify;
-    private cleanup;
-    _didMount: () => () => void;
-    _willUpdate: () => void;
-    private getSize;
-    private getMeasurements;
-    private calculateRange;
-    private getIndexes;
-    getVirtualItems: () => VirtualItem<TItemElement>[];
-    scrollToOffset: (toOffset: number, { align }?: ScrollToOffsetOptions) => void;
-    scrollToIndex: (index: number, { align, ...rest }?: ScrollToIndexOptions) => void;
-    getTotalSize: () => number;
-    private _scrollToOffset;
-    measure: () => void;
-}

package/build/types/utils.d.ts

@@ -1,7 +0,0 @@
-export declare type NoInfer<A extends any> = [A][A extends any ? 0 : never];
-export declare type PartialKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
-export declare function memo<TDeps extends readonly any[], TResult>(getDeps: () => [...TDeps], fn: (...args: NoInfer<[...TDeps]>) => TResult, opts: {
-    key: any;
-    debug?: () => any;
-    onChange?: (result: TResult) => void;
-}): () => TResult;