Skip to content

CodeViewer Components (VanillaJS / React)#507

Draft
amadeus wants to merge 41 commits intomainfrom
amadeus/code-viewer
Draft

CodeViewer Components (VanillaJS / React)#507
amadeus wants to merge 41 commits intomainfrom
amadeus/code-viewer

Conversation

@amadeus
Copy link
Copy Markdown
Member

@amadeus amadeus commented Apr 15, 2026

WIP

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 15, 2026

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

Project Deployment Actions Updated (UTC)
pierrejs-diff-demo Ready Ready Preview Apr 18, 2026 0:42am
pierrejs-docs Ready Ready Preview Apr 18, 2026 0:42am

Request Review

@amadeus amadeus force-pushed the amadeus/code-viewer branch from 6fa1e6d to f0a2023 Compare April 15, 2026 17:59
@amadeus amadeus force-pushed the amadeus/code-viewer branch 2 times, most recently from 7266b31 to c4fd351 Compare April 15, 2026 21:03
@amadeus amadeus force-pushed the amadeus/code-viewer branch from c4fd351 to 12d2410 Compare April 15, 2026 21:06
@amadeus amadeus force-pushed the amadeus/code-viewer branch from 12d2410 to 12357d6 Compare April 15, 2026 22:11
@amadeus amadeus force-pushed the amadeus/code-viewer branch from 12357d6 to 50c5e6b Compare April 16, 2026 00:14
@amadeus amadeus force-pushed the amadeus/code-viewer branch from 50c5e6b to 9531d44 Compare April 17, 2026 00:03
amadeus added 6 commits April 17, 2026 16:42
Keep the CSS-only line and gutter mixing improvements while updating the styling docs to match the new selection override behavior.
Reworking existing VirtualizedFile and VirtualizedFileDiff to work with
both simple and advanced virtualizers

Stuff is stubbed out right now, but not ready for prime time
amadeus and others added 26 commits April 17, 2026 16:49
This reverts commit 6ff638235380b4c546e9aa3967ff2a3474d86795.
This is step 1 of this new idea I had to productize this into a code
viewer component, that can be used to render tons of shit, and
virtualize really nicely
Adding some new specs for the how to control layout/padding and how it
gets calculated.

At a high level basically we are using margins on the overall height
container to define padding (this makes it much easier to figure out
sticky state).  Then we have a new custom property for gap between
files/diffs, which utilizes flex gap for layout.

This also simplifies a bunch of the math which is quite nice.

Next up we need to rename `fileGap` since it's really now more of an
internal padding thing
some ai slop, and some ai iteration to get things potentially setup for
the react component.
The main goal here was a bit of a sidequest to get CodeViewer more
performant by doing a better job of batching various dom operations to
hopefully alleviate unneeded layouts in heavy updates.

This is not a perfect solution, but I think on it's own it might offer a
solid number of improvements.
* optimize cleanup
  * The aggressive innerHTML/textContent cleanups are probably not
    necessary and can add much unneeded overhead under aggressively
    scrolled situations
* apis to allow manager setups to be deferred (to avoid some layout
  thrashing)
  * enableLineSelection does cause some thrash if there are no
    selections, so we should look into muxing that prop in better
    instead of applying it as a dom write after the update...
Alright, this one was definitely a doozy, I had to add a lot of stuff to
be able to properly support react components, but I think that also
it'll really help out with the vanilla JS implementations.

I will probably need to eventually add a good testbed for CodeViewer
vanilla js as well so we can easily go between.

This does not include a more imperative implementation for data right
now, forcing user to manually update the entire data structure... which
isn't great. That might be the next case that I'll want to utilize
Wasn't matching diffs, lol, what a flub
Also remove a bunch of the deprecated HoverUtility stuff
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.

2 participants