Feature: support custom hunk separator with React

[jonatanklosko]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

Respect options.hunkSeparators when passed to React components, or/and provide an API similar to renderAnnotation.

Motivation and context

Currently defining a custom rendering for hunkSeparators only works with the JS API. Ideally there should be a way to override it, while using the higher-level React components.

I understand there may be challenges with rendering the custom separator as React element. However, is there a reason the underlying options.hunkSeparators -> Element couldn't be respected when passed to the React component? I don't mind the rendering itself being JS DOM operations, if necessary.

Currently passing a function to options.hunkSeparators in the React component enables "custom" mode, but does not render the separators, so the separators are effectively gone, which I was confused about initially.

[amadeus]

Hey, so actually there's a part of me that wants to deprecate this feature as it becomes a bit annoying to coordinate with react.

One question I have is, what sort of things do you want to do with customization?

[jonatanklosko]

I render a diff from patch, so it's not expandable in the usual way. However, I would like to render "6 modified lines" as a custom button that the user can click to open the whole file + diff. I would also put some kind of indicator in the gutter, similar to the custom example from docs:

Sidenote: even if expanding was possible with patch via lazy loading lines, I would still likely prefer the custom link approach, otherwise the user may need to expand multiple times, and once they read what they need, they are stuck with a long file :D

[jonatanklosko]

it becomes a bit annoying to coordinate with react

Is it problematic, even if the rendering uses JS DOM API, rather than React?

[amadeus]

Is it problematic, even if the rendering uses JS DOM API, rather than React?

It is especially problematic with virtualization, and we've disabled virtualization in those cases.

However, right now you can use unsafeCSS to redesign them pretty significantly (I could probably include an Expand Entire hunk button that is hidden in our default themes if someone wanted to try and re-create something like the custom examples without using custom slots.

As for your lazy loading thing -- actually that's something I plan to implement as a first class citizen, it's also something that Codex also requested. The API i think i want to build for this would be something like you'd provide an async function to load the contents of the files as a callback, it would then hydrate FileDiffMetadata with it when you either mouse over the hunk or click the expand button, and manage that loading state for you

[jonatanklosko]

Yeah, I may not be able to customize the gutter content, but unsafeCSS does allow some customization. Will it cause issues if I override the separator height, or is that fine?

I guess I could even hack a way to handle clicks on "N unmodified lines" by adding an event handler within the shadow root :D

Anyway, if you conclude that it has too many pitfalls, feel free to close the issue!

[amadeus]

there's a callback function you can hook into for doing like hacky stuff called: onPostRender, that you can reach into the shadow dom and manipulate stuff manually

if you use the css to modify height it won't matter (unless virtualizing, but then you'd have to adjust some of the metrics for that.

[jonatanklosko]

Thank you :)