@tanstack/virtual-core 3.0.0-beta.20 → 3.0.0-beta.22

package/src/index.ts

@@ -24,7 +24,7 @@ export interface Range {
 
 type Key = number | string
 
-interface Item {
+export interface VirtualItem {
   key: Key
   index: number
   start: number
@@ -37,10 +37,6 @@ interface Rect {
   height: number
 }
 
-export interface VirtualItem<TItemElement> extends Item {
-  measureElement: (el: TItemElement | null) => void
-}
-
 //
 
 export const defaultKeyExtractor = (index: number) => index
@@ -183,13 +179,15 @@ const createOffsetObserver = (mode: ObserverMode) => {
 export const observeElementOffset = createOffsetObserver('element')
 export const observeWindowOffset = createOffsetObserver('window')
 
-export const measureElement = (
-  element: unknown,
-  instance: Virtualizer<any, any>,
+export const measureElement = <TItemElement extends Element>(
+  element: TItemElement,
+  instance: Virtualizer<any, TItemElement>,
 ) => {
-  return (element as Element).getBoundingClientRect()[
-    instance.options.horizontal ? 'width' : 'height'
-  ]
+  return Math.round(
+    element.getBoundingClientRect()[
+      instance.options.horizontal ? 'width' : 'height'
+    ],
+  )
 }
 
 export const windowScroll = (
@@ -219,12 +217,12 @@ export const elementScroll = (
 }
 
 export interface VirtualizerOptions<
-  TScrollElement = unknown,
-  TItemElement = unknown,
+  TScrollElement extends unknown,
+  TItemElement extends Element,
 > {
   // Required from the user
   count: number
-  getScrollElement: () => TScrollElement
+  getScrollElement: () => TScrollElement | null
   estimateSize: (index: number) => number
 
   // Required from the framework adapter (but can be overridden)
@@ -262,15 +260,19 @@ export interface VirtualizerOptions<
   enableSmoothScroll?: boolean
   scrollMargin?: number
   scrollingDelay?: number
+  indexAttribute?: string
 }
 
-export class Virtualizer<TScrollElement = unknown, TItemElement = unknown> {
+export class Virtualizer<
+  TScrollElement extends unknown,
+  TItemElement extends Element,
+> {
   private unsubs: (void | (() => void))[] = []
   options!: Required<VirtualizerOptions<TScrollElement, TItemElement>>
   scrollElement: TScrollElement | null = null
   isScrolling: boolean = false
   private isScrollingTimeoutId: ReturnType<typeof setTimeout> | null = null
-  private measurementsCache: Item[] = []
+  measurementsCache: VirtualItem[] = []
   private itemMeasurementsCache: Record<Key, number> = {}
   private pendingMeasuredCacheIndexes: number[] = []
   private scrollRect: Rect
@@ -278,10 +280,24 @@ export class Virtualizer<TScrollElement = unknown, TItemElement = unknown> {
   private scrollDelta: number = 0
   private destinationOffset: undefined | number
   private scrollCheckFrame!: ReturnType<typeof setTimeout>
-  private measureElementCache: Record<
-    number,
-    (measurableItem: TItemElement | null) => void
-  > = {}
+  private measureElementCache: Record<Key, TItemElement> = {}
+  private getResizeObserver = (() => {
+    let _ro: ResizeObserver | null = null
+
+    return () => {
+      if (_ro) {
+        return _ro
+      } else if (typeof ResizeObserver !== 'undefined') {
+        return (_ro = new ResizeObserver((entries) => {
+          entries.forEach((entry) => {
+            this._measureElement(entry.target as TItemElement, false)
+          })
+        }))
+      } else {
+        return null
+      }
+    }
+  })()
   range: { startIndex: number; endIndex: number } = {
     startIndex: 0,
     endIndex: 0,
@@ -317,6 +333,7 @@ export class Virtualizer<TScrollElement = unknown, TItemElement = unknown> {
       initialRect: { width: 0, height: 0 },
       scrollMargin: 0,
       scrollingDelay: 150,
+      indexAttribute: 'data-index',
       ...opts,
     }
   }
@@ -333,6 +350,9 @@ export class Virtualizer<TScrollElement = unknown, TItemElement = unknown> {
 
   _didMount = () => {
     return () => {
+      this.getResizeObserver()?.disconnect()
+      this.measureElementCache = {}
+
       this.cleanup()
     }
   }
@@ -474,68 +494,98 @@ export class Virtualizer<TScrollElement = unknown, TItemElement = unknown> {
     },
   )
 
-  getVirtualItems = memo(
-    () => [
-      this.getIndexes(),
-      this.getMeasurements(),
-      this.options.measureElement,
-    ],
-    (indexes, measurements, measureElement) => {
-      const makeMeasureElement =
-        (index: number) => (measurableItem: TItemElement | null) => {
-          const item = this.measurementsCache[index]!
+  indexFromElement = (node: TItemElement) => {
+    const attributeName = this.options.indexAttribute
+    const indexStr = node.getAttribute(attributeName)
 
-          if (!measurableItem) {
-            return
-          }
+    if (!indexStr) {
+      console.warn(
+        `Missing attribute name '${attributeName}={index}' on measured element.`,
+      )
+      return -1
+    }
 
-          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 !== 'production' && 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()
-          }
+    return parseInt(indexStr, 10)
+  }
+
+  private _measureElement = (node: TItemElement, _sync: boolean) => {
+    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?.unobserve(prevNode)
+        delete this.measureElementCache[item.key]
+      }
+      return
+    }
+
+    if (!prevNode || prevNode !== node) {
+      if (prevNode) {
+        ro?.unobserve(prevNode)
+      }
+      this.measureElementCache[item.key] = node
+      ro?.observe(node)
+    }
+
+    const measuredItemSize = this.options.measureElement(node, this)
+
+    const itemSize = this.itemMeasurementsCache[item.key] ?? item.size
+
+    if (measuredItemSize !== itemSize) {
+      if (item.start < this.scrollOffset) {
+        if (process.env.NODE_ENV !== 'production' && this.options.debug) {
+          console.info('correction', measuredItemSize - itemSize)
         }
 
-      const virtualItems: VirtualItem<TItemElement>[] = []
+        if (this.destinationOffset === undefined) {
+          this.scrollDelta += measuredItemSize - itemSize
 
-      const currentMeasureElements: typeof this.measureElementCache = {}
+          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()
+    }
+  }
+
+  measureElement = (node: TItemElement | null) => {
+    if (!node) {
+      return
+    }
+
+    this._measureElement(node, true)
+  }
+
+  getVirtualItems = memo(
+    () => [this.getIndexes(), this.getMeasurements()],
+    (indexes, measurements) => {
+      const virtualItems: VirtualItem[] = []
 
       for (let k = 0, len = indexes.length; k < len; k++) {
         const i = indexes[k]!
         const measurement = measurements[i]!
 
-        const item = {
-          ...measurement,
-          measureElement: (currentMeasureElements[i] =
-            this.measureElementCache[i] ?? makeMeasureElement(i)),
-        }
-        virtualItems.push(item)
+        virtualItems.push(measurement)
       }
 
-      this.measureElementCache = currentMeasureElements
-
       return virtualItems
     },
     {
@@ -695,7 +745,7 @@ function calculateRange({
   outerSize,
   scrollOffset,
 }: {
-  measurements: Item[]
+  measurements: VirtualItem[]
   outerSize: number
   scrollOffset: number
 }) {