virtual/docs/framework/lit/lit-virtual.md at main · TanStack/virtual · GitHub
Skip to content

Latest commit

 

History

History
61 lines (45 loc) · 2.19 KB

lit-virtual.md

File metadata and controls

61 lines (45 loc) · 2.19 KB
title Lit Virtual

The @tanstack/lit-virtual adapter is a wrapper around the core virtual logic.

createVirtualizer

private virtualizerController = new VirtualizerController<TScrollElement, TItemElement = unknown>(
    options: PartialKeys< VirtualizerOptions<TScrollElement, TItemElement>,
    'observeElementRect' | 'observeElementOffset' | 'scrollToFn'
)

This class stands for a standard Virtualizer instance configured to work with an HTML element as the scrollElement. This will create a Lit Controller which can be accessed in the element render method.

render() {
    const virtualizer = this.virtualizerController.getVirtualizer();
    const virtualItems = virtualizer.getVirtualItems();
} 
)

createWindowVirtualizer

private windowVirtualizerController = new WindowVirtualizerController<TItemElement = unknown>(
    options: PartialKeys< VirtualizerOptions<TItemElement>,
    'getScrollElement' | 'observeElementRect' | 'observeElementOffset' | 'scrollToFn'

This class stands of window-based Virtualizer instance configured to work with an HTML element as the scrollElement.

Updating options

The controller reads options once, in its constructor. When a reactive property changes, pass the new values to setOptions from willUpdate (before render). VirtualizerController and WindowVirtualizerController both implement it.

setOptions merges that partial over the options the controller already holds, including its defaults, and keeps the onChange wrapper that re-renders the host. Keys set to undefined are ignored, so a partial update does not erase an option from an earlier call.

@property({ type: Number })
count = 1000

private virtualizerController = new VirtualizerController(this, {
  getScrollElement: () => this.scrollElementRef.value,
  count: this.count,
  estimateSize: () => 35,
})

protected willUpdate(changed: PropertyValues<this>) {
  if (changed.has('count')) {
    this.virtualizerController.setOptions({ count: this.count })
  }
}

Call setOptions on the controller. getVirtualizer().setOptions(...) replaces options wholesale, drops the host onChange wrapper, and leaves the controller's stored options stale.