feature: accessible difference data with callback

src/components/DiffViewer/components/VirtualizedDiffViewer.tsx

@@ -1,3 +1,4 @@
+import type { DiffResult } from "json-diff-kit";
 import type { VariableSizeList as List } from "react-window";
 
 import { Differ } from "json-diff-kit";
@@ -7,6 +8,7 @@ import type { DiffRowOrCollapsed, SegmentItem, VirtualizedDiffViewerProps } from
 
 import "../styles/JsonDiffCustomTheme.css";
 import { useSearch } from "../hooks/useSearch";
+import { fastHash } from "../utils/json-diff/diff-hash";
 import { expandSegment, hasExpandedSegments, hideAllSegments } from "../utils/json-diff/segment-util";
 import { buildViewFromSegments, generateSegments } from "../utils/preprocessDiff";
 import { DiffMinimap } from "./DiffMinimap";
@@ -21,6 +23,8 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
   leftTitle,
   rightTitle,
   hideSearch,
+  customDiffer,
+  getDiffData,
   showSingleMinimap,
   onSearchMatch,
   differOptions,
@@ -31,8 +35,10 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
 }) => {
   const outerRef = useRef<Node>(null);
   const listRef = useRef<List>(null);
+  const getDiffDataRef = useRef<typeof getDiffData>();
+  const lastSent = useRef<number>();
 
-  const differ = useMemo(
+  const differ = customDiffer ?? useMemo(
     () =>
       new Differ({
         detectCircular: true,
@@ -101,6 +107,23 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
     setRightView(rightBuilt);
   }, [segments, rawLeftDiff, rawRightDiff]);
 
+  useEffect(() => {
+    getDiffDataRef.current = getDiffData;
+  }, [getDiffData]);
+
+  useEffect(() => {
+    if (!getDiffDataRef.current)
+      return;
+
+    const data: [DiffResult[], DiffResult[]] = [rawLeftDiff, rawRightDiff];
+    const hash = fastHash(data);
+
+    if (lastSent.current !== hash) {
+      lastSent.current = hash;
+      getDiffDataRef.current(data);
+    }
+  }, [rawLeftDiff, rawRightDiff]);
+
   return (
     <div className={`diff-viewer-container${className ? ` ${className}` : ""}`}>
 

src/components/DiffViewer/types/index.ts

@@ -1,4 +1,4 @@
-import type { DifferOptions, DiffResult, InlineDiffOptions } from "json-diff-kit";
+import type { Differ, DifferOptions, DiffResult, InlineDiffOptions } from "json-diff-kit";
 
 export type DiffRow = {
   originalIndex: number;
@@ -41,7 +41,9 @@ export type VirtualizedDiffViewerProps = {
   leftTitle?: string;
   rightTitle?: string;
   onSearchMatch?: (index: number) => void;
+  getDiffData?: (diffData: [DiffResult[], DiffResult[]]) => void;
   differOptions?: DifferOptions;
+  customDiffer?: Differ;
   showSingleMinimap?: boolean;
   className?: string;
   miniMapWidth?: number;

src/components/DiffViewer/utils/json-diff/diff-hash.ts

@@ -0,0 +1,11 @@
+import type { DiffResult } from "json-diff-kit";
+
+export function fastHash(diff: [DiffResult[], DiffResult[]]) {
+  let hash = 0;
+  for (const arr of diff) {
+    for (const row of arr) {
+      hash = (hash + row.text.length + row.type.charCodeAt(0)) >>> 0;
+    }
+  }
+  return hash;
+}

src/index.ts

@@ -1,2 +1,2 @@
-// Buttons
 export { default as VirtualDiffViewer } from "./components/DiffViewer";
+export { Differ, type DiffResult } from "json-diff-kit";