feat: lit integration #718
Conversation
☁️ Nx Cloud ReportCI is running/has finished running commands for commit d783e40. As they complete they will appear below. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this CI Pipeline Execution
Sent with 💌 from NxCloud. |
|
@tannerlinsley @piecyk how can we move forward with this? :) |
packages/lit-virtual/src/index.ts
Outdated
| this.cleanup = this.virtualizer._didMount() | ||
| this.virtualizer._willUpdate() | ||
| await this.host.updateComplete | ||
| this.host.requestUpdate() | ||
| this.virtualizer.measure() |
There was a problem hiding this comment.
Hmm why not?
| this.cleanup = this.virtualizer._didMount() | |
| this.virtualizer._willUpdate() | |
| await this.host.updateComplete | |
| this.host.requestUpdate() | |
| this.virtualizer.measure() | |
| this.cleanup = this.virtualizer._didMount() | |
| this.virtualizer._willUpdate() |
as _willUpdate will set up event listeners and call onChange if needed, there we have requestUpdate, the measure is pretty a hack to clear cache and call onChange
There was a problem hiding this comment.
Actually I started with this approach at the beginning, but for some reason in the Columns example, if failed to size the columns right, it would fix only after a scroll event was triggered.
There was a problem hiding this comment.
The issue here is that for initial measure, when we call measureElement node.isConnected will return false for some reason https://github.com/TanStack/virtual/blob/main/packages/virtual-core/src/index.ts#L648
There was a problem hiding this comment.
Yes I see, that's mainly because on the first render the ref will be undefined , and virtual dynamic nodes aren't connected yet, but this "gets fixed" by immediately measuring and invoking a render.
There was indeed a redundant _willUpdate which I removed, but the rest I'm not sure it's possible without touching the core.
WDYT?
There was a problem hiding this comment.
Hey @piecyk, it's been a while :) do we plan to move forward with this?
There was a problem hiding this comment.
@kadoshms Yes we do! Sorry for delay, need to look again on this node.isConnected because the whole dynamic case is based on it.
Lit is a growing library for building web-components with ease.
This PR introduces
@tanstack/lit-virtualintegration package for creating virtualized elements using Lit's Reactive ControllersI guess there's more room for improvement and testing, but it could definitely be a start for this.