react-diff-viewer-continued 4.1.0 → 4.1.2

package/.claude/settings.local.json

@@ -8,7 +8,14 @@
       "Bash(pnpm test:*)",
       "Bash(CI=1 pnpm test:*)",
       "Bash(CI=1 npm test:*)",
-      "Bash(pnpm remove:*)"
+      "Bash(pnpm remove:*)",
+      "Bash(npm test:*)",
+      "Bash(npx tsc:*)",
+      "Bash(ls:*)",
+      "Bash(pnpm run build:*)",
+      "Bash(pnpm exec vitest:*)",
+      "Bash(grep:*)",
+      "Bash(pnpm run test:*)"
     ],
     "deny": [],
     "ask": []

package/.github/workflows/release.yml

@@ -31,6 +31,9 @@ jobs:
       - name: Install dependencies
         run: pnpm i
 
+      - name: Build worker bundle
+        run: pnpm run build:worker
+
       - name: Run unit tests
         run: pnpm run test
 

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 4.1.2 (2026-02-07)
+
+### Bug Fixes
+
+- fix virtualization offsets and missing key display on structural json diff
+- bundle worker code as a blob
+
+## 4.1.1 (2026-02-07)
+
+### Bug Fixes
+
+- fix problem with missing worker in compiled version
+
 ## 4.1.0 (2026-02-04)
 
 ### Features

package/lib/cjs/src/compute-lines.d.ts

@@ -64,17 +64,5 @@ declare const computeDiff: (oldValue: string | Record<string, unknown>, newValue
  * @param showLines lines that are always shown, regardless of diff
  */
 declare const computeLineInformation: (oldString: string | Record<string, unknown>, newString: string | Record<string, unknown>, disableWordDiff?: boolean, lineCompareMethod?: DiffMethod | ((oldStr: string, newStr: string) => diff.Change[]), linesOffset?: number, showLines?: string[], deferWordDiff?: boolean) => ComputedLineInformation;
-/**
- * Computes line diff information using a Web Worker to avoid blocking the UI thread.
- * This offloads the expensive `computeLineInformation` logic to a separate thread.
- *
- * @param oldString Old string to compare.
- * @param newString New string to compare with old string.
- * @param disableWordDiff Flag to enable/disable word diff.
- * @param lineCompareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
- * @param linesOffset line number to start counting from
- * @param showLines lines that are always shown, regardless of diff
- * @returns Promise<ComputedLineInformation> - Resolves with line-by-line diff data from the worker.
- */
 declare const computeLineInformationWorker: (oldString: string | Record<string, unknown>, newString: string | Record<string, unknown>, disableWordDiff?: boolean, lineCompareMethod?: DiffMethod | ((oldStr: string, newStr: string) => diff.Change[]), linesOffset?: number, showLines?: string[], deferWordDiff?: boolean) => Promise<ComputedLineInformation>;
 export { computeLineInformation, computeLineInformationWorker, computeDiff };

package/lib/cjs/src/compute-lines.js

@@ -151,9 +151,22 @@ function diffObjects(oldObj, newObj, indent, format = 'json') {
                 // Values differ - recursively diff them
                 const keyPrefix = innerIndent + JSON.stringify(key) + ': ';
                 const valueDiff = diffStructurally(oldObj[key], newObj[key], indent + 1, format);
-                // Prepend key to first change so they're on the same line
+                // Prepend key to the appropriate changes
                 if (valueDiff.length > 0) {
-                    valueDiff[0].value = keyPrefix + valueDiff[0].value;
+                    if (!valueDiff[0].removed && !valueDiff[0].added) {
+                        // First change is neutral (e.g., opening brace of nested object) - prepend key to it only
+                        valueDiff[0].value = keyPrefix + valueDiff[0].value;
+                    }
+                    else {
+                        // First change is removed or added - this is a primitive value change
+                        // Both the removed (old) and added (new) lines need the key
+                        const firstRemoved = valueDiff.find(c => c.removed);
+                        const firstAdded = valueDiff.find(c => c.added);
+                        if (firstRemoved)
+                            firstRemoved.value = keyPrefix + firstRemoved.value;
+                        if (firstAdded)
+                            firstAdded.value = keyPrefix + firstAdded.value;
+                    }
                 }
                 // Add comma to last change if needed
                 if (comma && valueDiff.length > 0) {
@@ -489,20 +502,56 @@ const computeLineInformation = (oldString, newString, disableWordDiff = false, l
  * @param showLines lines that are always shown, regardless of diff
  * @returns Promise<ComputedLineInformation> - Resolves with line-by-line diff data from the worker.
  */
+// Import the bundled worker code (generated by scripts/build-worker.js)
+import { WORKER_CODE } from './workerBundle';
+// Cached Blob URL for the worker - created once and reused
+let workerBlobUrl = null;
+let workerAvailable = null;
+// Create a Blob URL from the bundled worker code
+const getWorkerBlobUrl = () => {
+    if (workerBlobUrl !== null)
+        return workerBlobUrl;
+    if (typeof Worker === 'undefined' || typeof Blob === 'undefined' || typeof URL === 'undefined') {
+        workerAvailable = false;
+        return null;
+    }
+    try {
+        const blob = new Blob([WORKER_CODE], { type: 'application/javascript' });
+        workerBlobUrl = URL.createObjectURL(blob);
+        workerAvailable = true;
+    }
+    catch (_a) {
+        workerAvailable = false;
+        workerBlobUrl = null;
+    }
+    return workerBlobUrl;
+};
 const computeLineInformationWorker = (oldString, newString, disableWordDiff = false, lineCompareMethod = DiffMethod.CHARS, linesOffset = 0, showLines = [], deferWordDiff = false) => {
-    // Fall back to synchronous computation if Worker is not available (e.g., in Node.js/test environments)
-    if (typeof Worker === 'undefined') {
-        return Promise.resolve(computeLineInformation(oldString, newString, disableWordDiff, lineCompareMethod, linesOffset, showLines, deferWordDiff));
+    const fallback = () => computeLineInformation(oldString, newString, disableWordDiff, lineCompareMethod, linesOffset, showLines, deferWordDiff);
+    const blobUrl = getWorkerBlobUrl();
+    if (!blobUrl) {
+        return Promise.resolve(fallback());
     }
-    return new Promise((resolve, reject) => {
-        const worker = new Worker(new URL('./computeWorker.ts', import.meta.url), { type: 'module' });
+    return new Promise((resolve) => {
+        let worker;
+        try {
+            worker = new Worker(blobUrl);
+        }
+        catch (_a) {
+            // Worker instantiation failed - fall back to synchronous computation
+            workerAvailable = false;
+            resolve(fallback());
+            return;
+        }
         worker.onmessage = (e) => {
             resolve(e.data);
             worker.terminate();
         };
-        worker.onerror = (err) => {
-            reject(err);
+        worker.onerror = () => {
+            // Worker error - fall back and mark as unavailable for future calls
+            workerAvailable = false;
             worker.terminate();
+            resolve(fallback());
         };
         worker.postMessage({ oldString, newString, disableWordDiff, lineCompareMethod, linesOffset, showLines, deferWordDiff });
     });

package/lib/cjs/src/index.d.ts

@@ -65,6 +65,10 @@ export interface ReactDiffViewerProps {
      * Hide the summary bar (expand/collapse button, change count, filename)
      */
     hideSummary?: boolean;
+    /**
+     * Show debug overlay with virtualization info (for development)
+     */
+    showDebugInfo?: boolean;
 }
 export interface ReactDiffViewerState {
     expandedBlocks?: number[];
@@ -73,10 +77,17 @@ export interface ReactDiffViewerState {
     computedDiffResult: Record<string, ComputedDiffResult>;
     isLoading: boolean;
     visibleStartRow: number;
+    contentColumnWidth: number | null;
+    charWidth: number | null;
+    cumulativeOffsets: number[] | null;
 }
 declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerState> {
     private styles;
     private wordDiffCache;
+    private contentColumnRef;
+    private charMeasureRef;
+    private stickyHeaderRef;
+    private resizeObserver;
     static defaultProps: ReactDiffViewerProps;
     constructor(props: ReactDiffViewerProps);
     /**
@@ -94,6 +105,38 @@ declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiff
      * this value is used to expand/fold unmodified code.
      */
     private onBlockExpand;
+    /**
+     * Gets the height of the sticky header, if present.
+     */
+    private getStickyHeaderHeight;
+    /**
+     * Measures the width of a single character in the monospace font.
+     * Falls back to 7.2px if measurement fails.
+     */
+    private measureCharWidth;
+    /**
+     * Measures the available width for content in a content column.
+     * Falls back to estimating from container width if direct measurement fails.
+     */
+    private measureContentColumnWidth;
+    /**
+     * Gets the text length from a value that may be a string or DiffInformation array.
+     */
+    private getTextLength;
+    /**
+     * Builds cumulative vertical offsets for each line based on character count and column width.
+     * This allows accurate scroll position calculations with variable row heights.
+     */
+    private buildCumulativeOffsets;
+    /**
+     * Binary search to find the line index at a given scroll offset.
+     */
+    private findLineAtOffset;
+    /**
+     * Recalculates cumulative offsets based on current measurements.
+     * Called on resize and when blocks are expanded/collapsed.
+     */
+    private recalculateOffsets;
     /**
      * Computes final styles for the diff viewer. It combines the default styles with the user
      * supplied overrides. The computed styles are cached with performance in mind.
@@ -200,6 +243,7 @@ declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiff
     private renderDiff;
     componentDidUpdate(prevProps: ReactDiffViewerProps): void;
     componentDidMount(): void;
+    componentWillUnmount(): void;
     render: () => ReactElement;
 }
 export default DiffViewer;