react-diff-view icon indicating copy to clipboard operation
react-diff-view copied to clipboard

Built-in virtual list support

Open otakustay opened this issue 4 years ago • 4 comments

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:

  1. 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.
  2. 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.

otakustay avatar Jul 28 '20 06:07 otakustay