Example Screenshots Clarity, Documentation Improvements

[IstoraMandiri]

I've been playing with this library and while the diff view itself seems to be working great, I found the documentation to be confusing and lacking examples of various configuration options.

In particular, I was trying to render something approaching the screenshots used to showcase the project, but I couldn't figure out how to show filenames in the diff view. I even checked the example provided in #169, but these did not contain UI that looks like the screenshots.

It's not clear to me if the library supports the functionality in the screenshots, or if I'm missing something obvious. I think the documentation could be improved to provide more clarity and examples of how to use the library's configuration options.

Here's what I mean, with the screenshots, and was hoping to be able to render this using the library:

But far as I can tell, using the example from the current docs, it's only possible to render the diff itself, there aren't any options to render to render the other UI elements from the screenshots, like filenames or diff summary.

When using the example code, this is all I get:

// example from docs
import {parseDiff, Diff, Hunk} from 'react-diff-view';

const App = ({diffText}) => {
    const files = parseDiff(diffText);

    const renderFile = ({oldRevision, newRevision, type, hunks}) => (
        <Diff key={oldRevision + '-' + newRevision} viewType="split" diffType={type} hunks={hunks}>
            {hunks => hunks.map(hunk => <Hunk key={hunk.content} hunk={hunk} />)}
        </Diff>
    );

    return (
        <div>
            {files.map(renderFile)}
        </div>
    );
};

I'm still not sure if there's a misunderstanding on my part as displaying the filename seems like an obvious thing. Would be great to make this more explicit in the docs, and ideally provide a number of examples of the UI configurations shown in the screenshots, as it took longer than ideal to try to find this non-existent option!

Thanks for your help!

[otakustay]

The library does not look like screenshot exactly, the screenshot is from our internal web app, we customize a lot on this library, however all functionalities can be implemented without any hacking inside react-diff-view.

• For diff header (src/ReactVersion.js +++ 1 --- 1), it's a pure component reading data from hunks
• For code expansion, we use useSourceExpansion and Decoration together
• Code highlight is done with useTokenizeWorker and a webpack worker-loader
• Code comments is implemented using widgets prop
• Also, a little style is customized to match the screenshot

A full featured example is too complex that I'm worrying that only few people can find a single feature implementation from it, may be examples feature by feature is a good idea, but I can't expect to do this in a short time.

For now, you can ask if you 'd like to see an example of a certain feature not natively included in this library, I'll try to write or find a simple demo for it

[IstoraMandiri]

Thanks for the swift reply.

I think a little example/boilerplate project would be great, and perhaps in the meantime others may find it useful to be a bit more explicit in the screenshots about the scope of what the library does (not) provide.

Thanks!

By the way, would you be open to pull requests to add components that render those additional components?

For the best developer experience, I was anticipating being able to use this library by simply using :

import { DiffView } from "react-diff-view"

// ...

<DiffView diff={text} />

(and it should render a component that match this this screenshot)

[otakustay]

This screenshot is a single combination of a header component and Diff component from this library, luckily I have a sandbox for this (not styled): https://codesandbox.io/s/throbbing-smoke-f9qzge

I can add a DiffFileHeader component to this lib, but not a combined & full featured DiffVIew component, this can result in unlimited and uncontrollable requirements built into a single heavy component.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.