Skip to content

Virtualization Part 2#281

Merged
amadeus merged 45 commits intomainfrom
amadeus/virtualization-part-2
Feb 6, 2026
Merged

Virtualization Part 2#281
amadeus merged 45 commits intomainfrom
amadeus/virtualization-part-2

Conversation

@amadeus
Copy link
Member

@amadeus amadeus commented Jan 21, 2026

Basic Virtualization Support for Files & Diffs

This branch introduces line-level virtualization for both file and diff rendering, enabling efficient display of very large files and diffs by only rendering the visible portion of the document.

Key Changes

New Components

  • VirtualizedFile — extends File with windowed rendering, height estimation, and visibility tracking
  • VirtualizedFileDiff — extends FileDiff with the same virtualization capabilities for diff views
  • Virtualizer — core scroll/intersection observer engine that manages render windows, scroll anchoring, and visibility for all virtualized instances

DOM Architecture Rework

  • AST output is now split into separate gutter and content columns (previously interleaved), enabling CSS subgrid-based layout with sticky gutter line numbers
    • The main intention for this is to help improve css rendering performance given the old version of making every number element sticky was not the jam
  • data-diffs attribute replaced with data-diff / data-file for clearer html semantics.

Rendering Pipeline

  • iterateOverFile utility added for windowed iteration over file lines
  • iterateOverDiff callback now yields structured additionLine/deletionLine objects instead of individual index/number fields
  • FileRenderer and DiffHunksRenderer accept RenderRange for partial rendering with buffer calculations
    • Introduced a new partial dom update system for renderRange for optimizing dom updates
  • Placeholder rendering for off-screen files to preserve scroll height

Manager Updates

  • MouseEventManager reworked to traverse the new DOM structure (gutter vs content columns)
  • LineSelectionManager updated for new element selectors
  • ResizeManager gains debounced column updates and incremental observer reconciliation
    • A major source of dom layout thrash
  • JS-based hover line feature added
    • Line hover effects are no longer backed in, and require opt in via the hoverLine prop.

CSS Overhaul

  • ~945 lines changed: restructured around the gutter/content split, sticky gutter positioning, new buffer styling, and updated selectors throughout

Other

  • Configurable virtualization parameters and metrics
  • Performance-oriented changes: contain: content on pre/code, debounced resize handling, scan-once patterns

@vercel
Copy link

vercel bot commented Jan 21, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
pierrejs-diff-demo Ready Ready Preview Feb 6, 2026 0:14am
pierrejs-docs Ready Ready Preview Feb 6, 2026 0:14am
pierrejs-solid-diff-demo Ready Ready Preview Feb 6, 2026 0:14am

Request Review

@amadeus amadeus force-pushed the amadeus/virtualization-part-2 branch from bbae805 to a86c7d3 Compare January 21, 2026 23:24
@amadeus amadeus force-pushed the amadeus/virtualization-part-2 branch from 9fd37f6 to ed61192 Compare January 22, 2026 20:37
@amadeus amadeus force-pushed the amadeus/virtualization-part-2 branch from ed61192 to 20570bd Compare January 23, 2026 21:38
@amadeus amadeus force-pushed the amadeus/virtualization-part-2 branch from 20570bd to 05a72a6 Compare January 23, 2026 23:30
@amadeus amadeus force-pushed the amadeus/virtualization-part-2 branch from 05a72a6 to 837c217 Compare January 24, 2026 03:12
@amadeus amadeus force-pushed the amadeus/virtualization-part-2 branch from 837c217 to 1750c88 Compare January 26, 2026 06:01
* Hovers will be controlled by JS (not yet implemented)
* Also fix a bug on selected context elements
This will not fix incomplete or selections that are virtualized... that
will take a bit more work...

We will need a new API to get line index from a diff/file...
A few important changes here.

* Line indexes when setting a selection should not be based on the DOM
  as that's not a valid heuristic for index range to select from
* Added a helper method to determine line indexes programmatically from
  the dif
  * We should probably do something where we can cache the line index
    values onces we've retrieved them for a selection, calling the
    function on every render is probably not ideal if it's a large
    file...
Basically just use the helper method completely
The logic for partial renders was inverted, oops
* No numbers was a bit broked with the border gap
* Hover effects for lines we jittery when crossing over the 2px
  separator between content and gutter
  * Had to incorporate that sepeator into the gutter element to avoid
    this
Using line number wasn't safe, we need to use lineIndex instead to query
for the extra elements
- Given the new nature of the HTML, we have to do hover through JS
- This also gives us the opportunity to improve the api a bit and not
  make hover effects on by default
  - Also added the ability to hover just the number or just the line if
    users want
I think from an API perspective, most people will want to use this
virtualizer, lets make it the default.  And then leave the more advanced
one for more controlled scenarios.
* Basically removing the known broken APIs and such
@amadeus amadeus force-pushed the amadeus/virtualization-part-2 branch from fc81d43 to 484569f Compare February 6, 2026 00:13
@amadeus amadeus merged commit 543070e into main Feb 6, 2026
8 checks passed
@amadeus amadeus deleted the amadeus/virtualization-part-2 branch February 6, 2026 00:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant