Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

lit-virtual: VirtualizerController never applies updated options after construction

未关闭
  • 哪里不对？
#1,251 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

@waterWang 已经在做这个了。

开始于 2026年8月12日。

  • #1253 来自 @waterWang —— 未关闭

评估

难度
5/5
预计耗时
一周以上
新手友好度
45/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
冷清
技术栈
typescript
领域
frontend

调研方向

从 packages/lit-virtual/src/index.ts 开始，跟踪 VirtualizerController 如何在构造期间接收选项，以及如何在 hostUpdated() 期间更新选项。比较 issue 中提到的 react-virtual、angular-virtual 和 lit-table adapter 模式，然后定义一条选项更新路径，使其完成后的行为能够在后续渲染中应用 count 等已更改的值。

由索引模型根据 Issue 内容生成。

描述

Describe the bug

VirtualizerController (packages/lit-virtual/src/index.ts) never calls setOptions() after the initial construction, so reactive option updates (a changed count, estimateSize, getScrollElement, etc.) never reach the underlying Virtualizer instance.

constructor(
  host: ReactiveControllerHost,
  options: VirtualizerOptions<TScrollElement, TItemElement>,
) {
  ...
  this.virtualizer = new Virtualizer(resolvedOptions) // options captured once, here
  ;(this.host = host).addController(this)
}

hostUpdated() {
  this.virtualizer._willUpdate() // no setOptions() call
}

Every other adapter calls setOptions() on every render/update before _willUpdate(). For comparison, react-virtual's useVirtualizer:

instance.setOptions(resolvedOptions)
...
return instance._willUpdate()

and angular-virtual:

virtualizer.setOptions(resolvedOptions())
...
reactiveVirtualizer()._willUpdate()

lit-table's equivalent TableController (same Lit ReactiveController shape, different package) does call the table-core equivalent of setOptions on every access, so this isn't a Lit-specific limitation, lit-virtual just doesn't do it.

Since VirtualizerController is meant to be instantiated once in the host's constructor (the documented usage pattern, same as any other Lit ReactiveController), there's no way for a consumer to get a changed count or other option applied short of reaching into getVirtualizer() and calling .setOptions() manually, which isn't documented anywhere and defeats the point of passing options to the constructor in the first place.

Your minimal, reproducible example
import { LitElement, html } from 'lit'
import { VirtualizerController } from '@tanstack/lit-virtual'

class MyList extends LitElement {
  count = 10

  virtualizerController = new VirtualizerController(this, {
    count: this.count,
    estimateSize: () => 35,
    getScrollElement: () => this.renderRoot.querySelector('#scroller'),
  })

  grow() {
    this.count = 1000
    this.requestUpdate()
  }

  render() {
    const virtualizer = this.virtualizerController.getVirtualizer()
    // virtualizer.options.count is still 10 after grow(), even though
    // this.count is 1000 and the component re-rendered
    return html`<div id="scroller">${virtualizer.getVirtualItems().length} items</div>`
  }
}
Steps to reproduce
  1. Create a VirtualizerController with an initial count.
  2. Change the value backing count and call requestUpdate() on the host.
  3. Read virtualizer.options.count (or observe the rendered item count), it still reflects the value from construction time.
Expected behavior

Option changes on subsequent renders should reach the virtualizer, the same as every other framework adapter.

Worth noting this needs more than adding a setOptions() call inside hostUpdated(): the constructor is the only place options is ever received (options: VirtualizerOptions<...>, not a getter), so even a hostUpdated() call would just re-apply the same closed-over object from construction time. The API shape itself doesn't have a channel for fresh options to flow in after construction. lit-table's TableController sidesteps this by exposing a .table(tableOptions, selector) method that's called fresh from render() on every pass rather than once from the constructor, that shape (or an equivalent public setOptions() method consumers call from render()) looks like the fix, not just wiring hostUpdated() to an already-stale value.

Platform

n/a, framework-adapter logic (packages/lit-virtual/src/index.ts)

主要语言
TypeScript
星标
7.1k
派生
472
平均合并
1 天 22 小时
30 天内合并 PR
15

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

TanStack/virtual 的其他 Issue

查看 TanStack/virtual 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。