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

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
 }
 
@@ -248,6 +246,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 +288,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 +405,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
     },
     {