react-diff-view
react-diff-view copied to clipboard
Built-in virtual list support
Yes, theoretically react-diff-view
supports virtual list, users can manipulate diff objects into many many hunks and have each hunk loaded by scroll, however this is not perfect:
- Manipulating hunks isn't an easy work, this involves finding a good split point and remaining left and right side relations, especially difficult when
nearbySequences: 'zip'
is not enabled. - Guessing hunk's rendered height is still difficult, this is not a must, but a more friendly scroll height is always welcome
API
I'm planning to have a <Virtualized>
component wrapping current <Diff>
to enable this behavior:
<Virtualized>
{/* Supports multiple diffs */}
<Diff {...props} />
<Diff {...props} />
</Virtualized>
This makes least migration efforts from previous usage.
Inside implement
Before creating a virtual list, Diff
could first have a look at its hunks
and all changes
inside, for a diff with little code to render, just disable virtual list by default.
When a diff contains a large amount of hunks, virtual list first works on top of hunks, if a hunk contains an affordable count of changes, it is rendered with out any lazy strategies.
Only when a hunk contains a lot of changes, virtual list is enabled on change level which will behaves as a lazy render of <tr>
elements.
Version
Planning to ship this in a major version no matter whether breaking changes are envolved.