Differ object should be either accessable or providable

[SpringsTea]

It would be very usefull if I could access the differ object that the viewer creates, or be able to provide my own json-diff-kit Differ object and work with that.

My use case is I would like to be able to display how many lines were added/removed between the diffs. That data is available in the diff object, but I can't access it.

[utkuakyuz]

Hey, thanks for the feedback. I have several solutions for that, can apply one or more at the same time but wanted to double check with you

1- I can export json-diff-kit differ class from this package, you can import it like
import { Differ } from "virtual-react-json-diff"

and then pass into viewer with a new prop named like "customDiffer"

2- I can create a callback for you to use difference objects, I am not sure if it is the correct way, but someone could use the objects in the future, also can create a custom viewer or table of changed line counts like your request. The returned objects will have following types, consider analyze it first for correct calculations. First DiffResult array is the left JSON and the second one is the right JSON.

interface DiffResult {
    level: number;
    type: 'modify' | 'add' | 'remove' | 'equal';
    text: string;
    comma?: boolean;
    lineNumber?: number;
},

returned object type => [DiffResult[], DiffResult[]]

3- I can calculate several different properties of DiffResult objects and return them in a callback. Apparently this is the worst way of doing this.

So I decided to implement solutions 1 and 2 both. Soon I will create a PR and update this issue to discuss how to use new features.

[utkuakyuz]

You will be able to get DiffData using getDiffData callback:

import { type DiffResult, VirtualDiffViewer } from "virtual-react-json-diff";

const [differData, setDifferData] = useState<[DiffResult[], DiffResult[]]>();

useEffect(() => {
    console.log("differData :", differData);
}, [differData]);

---

<VirtualDiffViewer  {...props}  getDiffData={diffData => setDifferData(diffData)}  />

Also you will be able to pass your own Differ.

import { Differ, VirtualDiffViewer } from "virtual-react-json-diff";
---
  const differOptions: DifferOptions = {
    showModifications: config.showModifications,
    arrayDiffMethod: config.arrayDiffMethod,
  };
  const differ = new Differ(differOptions);

---

// Pass it into Viewer with 'customDiffer' prop
  <VirtualDiffViewer  {...props}  customDiffer={differ} />

Running my tests then I will create a PR

[utkuakyuz]

Version 1.0.13 published

You can try it out. I recommend you to use getDiffData method rather than customDiffer. CustomDiffer is not very effective since you can already change every option on differ, unless you have a custom viewer.

By using getDiffData you will get 2 arrays, that is how viewer and differ works. You can filter-map or reduce them to reach number of lines removed etc.

To be able to see how many lines removed/added/modified is a good idea, I can think about if we add an optional prop to display them on viewer. I will be working on that for next versions

[SpringsTea]

Thanks, this works great.