Virtualize: reduce JS-to-.NET surface and extract E2E test helpers#65913
Merged
ilonatommy merged 11 commits intodotnet:mainfrom Mar 24, 2026
Merged
Virtualize: reduce JS-to-.NET surface and extract E2E test helpers#65913ilonatommy merged 11 commits intodotnet:mainfrom
ilonatommy merged 11 commits intodotnet:mainfrom
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refactors Blazor Virtualize to reduce the JS→.NET interop surface by removing per-item height measurement in JS, and instead deriving measurements in .NET from spacerSeparation plus server-side render state. It also extracts large inline E2E JavaScript snippets into reusable helpers.
Changes:
- Removes comment-delimited DOM scanning and
measureRenderedItems()fromVirtualize.ts, shrinking the JS callback payload to 3 parameters. - Updates
Virtualizeinterop contracts (IVirtualizeJsCallbacks,VirtualizeJsInterop,Virtualize.cs) and adjusts how running averages are computed. - Refactors E2E virtualization tests to use extracted JavaScript helper methods.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| src/Components/test/E2ETest/Tests/VirtualizationTest.cs | Extracts inline E2E JS snippets into private helper methods. |
| src/Components/Web/test/Virtualization/VirtualizeTest.cs | Updates unit tests for the new 3-parameter interop callbacks and adjusts measurement-related assertions/comments. |
| src/Components/Web/src/Virtualization/VirtualizeJsInterop.cs | Updates JS-invokable callbacks to accept 3 parameters and forwards to owner. |
| src/Components/Web/src/Virtualization/Virtualize.cs | Removes comment delimiters, computes measurements from spacerSeparation, and updates callback handling. |
| src/Components/Web/src/Virtualization/IVirtualizeJsCallbacks.cs | Updates the callback interface signatures to 3 parameters. |
| src/Components/Web.JS/test/Virtualize.test.ts | Removes tests for deleted measureRenderedItems() and replaces with export-surface checks. |
| src/Components/Web.JS/src/Virtualize.ts | Removes measureRenderedItems() and reduces invokeMethodAsync args to 3. |
…ger. With regression test.
…tcore into follow-up-64964
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Scrolling to a fixed offset (2000px) left most items in the 'after' spacer region, so itemsBefore was only 1 and item 2 remained in the rendered window. Scrolling to the very bottom ensures itemsBefore is large enough that item 2 is virtualized out of the DOM. Also removes temporary CI diagnostic code. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
javiercn
approved these changes
Mar 24, 2026
Member
javiercn
left a comment
javiercn
left a comment
There was a problem hiding this comment.
Great simplification!
I believe the interop APIs that we have in previous versions remain the same, is that correct? (we already had all the information we needed to do this server side?)
Member
Author
Yes, the API is same as before we merged #64964 so this PR removes all the extensions the previous PR added. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Follow up for feedback in #64964.
Description
1. Reduce JS→.NET communication surface
Instead of measuring individual item heights via comment-based DOM scanning in JS, derive the average item height server-side from
spacerSeparation(already reported byIntersectionObserver).What changed:
measureRenderedItems()and comment-based DOM scanning fromVirtualize.ts(spacerSize, spacerSeparation, containerSize)Virtualize.csnow computes item height averages usingspacerSeparation - (placeholderCount × itemSize)and_lastRenderedItemCountIVirtualizeJsCallbacks,VirtualizeJsInterop, and all unit tests accordingly2. Extract inline E2E test scripts into helpers
Per review feedback, extracted 3 large inline JavaScript test scripts into reusable private helper methods in
VirtualizationTest.cs:ExecuteDetectFlashingScript()ExecuteRapidScrollReversalScript()ExecuteScrollStabilityScript()3. Align
DynamicContent_ExpandingOffScreenItemcode with the nameTest's name indicates that it's checking expansion of elements out of DOM while it's not. The list had 30 items and new default for
OverscanCount = 15so all the items were in DOM. This PR extends the list to be sure test is checking what it should. For items in DOM we haveDynamicContent_ItemHeightChangesUpdateLayout.