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.
Awesome 👍
I'll check this out merged with my branch and report back this week
There was a problem hiding this comment.
@piecyk for column & grid dynamic virutalizers that works great - however I noticed a small glitch with row - if you scroll down to the very bottom, there's some weird behavior:
There was a problem hiding this comment.
It's a bit hard to see it with the gif
There was a problem hiding this comment.
It's a bit hard to see it with the gif
hmm can't really reproduce it, on what browser and os you are getting this? Btw changed a bit the impalemntion on #737 to make it simpler added the measureElement back on virtual item.
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.