feat(highlight-stream): add virtualize prop for windowed rendering - #479
Merged
Conversation
HighlightStream renders every streamed line into the DOM, so a long-running stream keeps growing the page's node count even though each repaint is cheap. There was no way to bound it the way HighlightVirtual bounds a static document. Add a virtualize prop that swaps the sealed-chunk session for TokenizedDocument and renders only the scrolled window (plus overscan), reusing the same checkpoint/resume engine primitive. Caret, autoScroll, and on:done keep working; on:highlight is skipped since materializing full HTML every repaint would defeat the point of windowing, and once done, output stays the streaming (non- canonicalized) parse rather than upgrading to a canonical render, the same tradeoff HighlightVirtual already makes. The windowing math and line-height measurement are pulled out into a shared src/virtual-window.js, which HighlightVirtual now uses too. Line height is rounded to a whole pixel there: a fractional value puts the sizer/translateY math at a different sub-pixel offset than the always-integer scrollTop on every repaint, which is invisible for a one-off scroll but reads as a visible jitter under the streaming case's much higher repaint frequency.
Add a docs example streaming 1,500 lines through virtualize with autoScroll, tracking rendered [data-line] node count live to show it stays bounded. Wired into the main docs page and the (unlisted) HighlightStream preview route. simulateStream's returned stop function now also carries pause()/ resume(), so the demo can freeze the stream and continue from where it left off instead of only being able to restart from scratch. The demo exposes this as a Pause/Resume button next to the existing Replay control.
metonym
force-pushed
the
metonym/highlightstream-virtualization
branch
from
July 30, 2026 18:19
22f95a6 to
6a90b65
Compare
metonym
temporarily deployed
to
metonym/highlightstream-virtualization - svelte-highlight PR #479
July 30, 2026 18:19 — with 
Render
Destroyed
Render
Destroyed
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
1 participant
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.
HighlightStreamrenders every streamed line into the DOM, so along-running stream keeps growing the page's node count even though
each repaint stays cheap. There was no way to bound it the way
HighlightVirtual bounds a static document, and no shared windowing
code between the two components.
Add a
virtualizeprop that swaps the sealed-chunk session forTokenizedDocumentand renders only the scrolled window (plusoverscan), reusing the same checkpoint/resume primitiveHighlightVirtualuses. Caret,autoScroll, andon:donekeepworking;
on:highlightis skipped in this mode since materializingfull HTML every repaint would defeat the point of windowing, and
doneno longer upgrades to a canonical re-parse, matching thetradeoff
HighlightVirtualalready makes. The windowing math andline-height measurement moved into a shared
src/virtual-window.js,which
HighlightVirtualnow uses too, with line height rounded to awhole pixel so the sizer/
translateYmath stays aligned with thealways-integer
scrollTopunder frequent repaints.Docs and an example (streaming 1,500 lines with a live rendered-node
counter and pause/resume controls) are included on the main docs page
and the HighlightStream preview route.
Risk
Scoped to a new opt-in prop (default
false) plus a pure refactor ofHighlightVirtual's existing windowing code into a shared module; thenon-
virtualizepath is unchanged. Main risk is in the sharedvirtual-window.jsmath, covered by unit tests and the existingHighlightVirtuale2e suite plus newvirtualize-specific e2e tests.