react-diff-viewer-continued 4.1.3 → 4.2.2

package/.claude/settings.local.json

@@ -15,7 +15,8 @@
       "Bash(pnpm run build:*)",
       "Bash(pnpm exec vitest:*)",
       "Bash(grep:*)",
-      "Bash(pnpm run test:*)"
+      "Bash(pnpm run test:*)",
+      "Bash(npm run *)"
     ],
     "deny": [],
     "ask": []

package/.github/workflows/release.yml

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

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## 4.2.2 (2026-04-23)
+
+### Bug Fixes
+
+- strict typescript types, and visible loader
+
+## 4.2.1 (2026-04-23)
+
+### Bug Fixes
+
+- make overscan configurable
+- handle ' HTML entity in diff view to prevent "undefined" suffix
+- mousedown and mouseup
+- do not show content while scrolling fast outside the overscan area
+- update dependencies
+- clean up old package-lock.json
+
+## 4.2.0 (2026-03-10)
+
+### Features
+
+- export computeStyles and add missing style override properties
+
+### Bug Fixes
+
+- add .js extensions to relative imports for Node.js ESM compatibility
+
 ## 4.1.3 (2026-02-07)
 
 ### Bug Fixes

package/lib/cjs/src/compute-hidden-blocks.d.ts

@@ -1,4 +1,4 @@
-import { type LineInformation } from "./compute-lines";
+import { type LineInformation } from "./compute-lines.js";
 export interface Block {
     index: number;
     startLine: number;

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

@@ -23,8 +23,8 @@ export interface DiffInformation {
     rawValue?: string;
 }
 export interface LineInformation {
-    left?: DiffInformation;
-    right?: DiffInformation;
+    left: DiffInformation;
+    right: DiffInformation;
 }
 export interface ComputedLineInformation {
     lineInformation: LineInformation[];
@@ -37,7 +37,7 @@ export interface ComputedDiffInformation {
 export interface JsDiffChangeObject {
     added?: boolean;
     removed?: boolean;
-    value?: string;
+    value: string;
 }
 /**
  * Computes word diff information in the line.
@@ -64,5 +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;
-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>;
+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, disableWorker?: boolean) => Promise<ComputedLineInformation>;
 export { computeLineInformation, computeLineInformationWorker, computeDiff };

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

@@ -305,24 +305,17 @@ const computeDiff = (oldValue, newValue, compareMethod = DiffMethod.CHARS) => {
         right: [],
     };
     diffArray.forEach(({ added, removed, value }) => {
-        const diffInformation = {};
         if (added) {
-            diffInformation.type = DiffType.ADDED;
-            diffInformation.value = value;
-            computedDiff.right.push(diffInformation);
+            computedDiff.right.push({ type: DiffType.ADDED, value });
         }
-        if (removed) {
-            diffInformation.type = DiffType.REMOVED;
-            diffInformation.value = value;
-            computedDiff.left.push(diffInformation);
+        else if (removed) {
+            computedDiff.left.push({ type: DiffType.REMOVED, value });
         }
-        if (!removed && !added) {
-            diffInformation.type = DiffType.DEFAULT;
-            diffInformation.value = value;
-            computedDiff.right.push(diffInformation);
-            computedDiff.left.push(diffInformation);
+        else {
+            const info = { type: DiffType.DEFAULT, value };
+            computedDiff.right.push(info);
+            computedDiff.left.push(info);
         }
-        return diffInformation;
     });
     return computedDiff;
 };
@@ -477,7 +470,7 @@ const computeLineInformation = (oldString, newString, disableWordDiff = false, l
             }
             return { right, left };
         })
-            .filter(Boolean);
+            .filter((x) => x != null);
     };
     diffArray.forEach(({ added, removed, value }, index) => {
         lineInformation = [
@@ -502,20 +495,21 @@ 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 = () => {
+// Lazily import and create a Blob URL from the bundled worker code
+const getWorkerBlobUrl = async () => {
     if (workerBlobUrl !== null)
         return workerBlobUrl;
+    if (workerAvailable === false)
+        return null;
     if (typeof Worker === 'undefined' || typeof Blob === 'undefined' || typeof URL === 'undefined') {
         workerAvailable = false;
         return null;
     }
     try {
+        const { WORKER_CODE } = await import('./workerBundle.js');
         const blob = new Blob([WORKER_CODE], { type: 'application/javascript' });
         workerBlobUrl = URL.createObjectURL(blob);
         workerAvailable = true;
@@ -526,9 +520,12 @@ const getWorkerBlobUrl = () => {
     }
     return workerBlobUrl;
 };
-const computeLineInformationWorker = (oldString, newString, disableWordDiff = false, lineCompareMethod = DiffMethod.CHARS, linesOffset = 0, showLines = [], deferWordDiff = false) => {
+const computeLineInformationWorker = async (oldString, newString, disableWordDiff = false, lineCompareMethod = DiffMethod.CHARS, linesOffset = 0, showLines = [], deferWordDiff = false, disableWorker = false) => {
     const fallback = () => computeLineInformation(oldString, newString, disableWordDiff, lineCompareMethod, linesOffset, showLines, deferWordDiff);
-    const blobUrl = getWorkerBlobUrl();
+    if (disableWorker) {
+        return Promise.resolve(fallback());
+    }
+    const blobUrl = await getWorkerBlobUrl();
     if (!blobUrl) {
         return Promise.resolve(fallback());
     }
@@ -538,7 +535,6 @@ const computeLineInformationWorker = (oldString, newString, disableWordDiff = fa
             worker = new Worker(blobUrl);
         }
         catch (_a) {
-            // Worker instantiation failed - fall back to synchronous computation
             workerAvailable = false;
             resolve(fallback());
             return;
@@ -548,7 +544,6 @@ const computeLineInformationWorker = (oldString, newString, disableWordDiff = fa
             worker.terminate();
         };
         worker.onerror = () => {
-            // Worker error - fall back and mark as unavailable for future calls
             workerAvailable = false;
             worker.terminate();
             resolve(fallback());

package/lib/cjs/src/computeWorker.js

@@ -1,4 +1,4 @@
-import { computeLineInformation } from "./compute-lines";
+import { computeLineInformation } from "./compute-lines.js";
 /**
  * This sets up a message handler inside the Web Worker.
  * When the main thread sends a message to this worker (via postMessage), this function is triggered.

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

@@ -11,6 +11,7 @@ export declare enum LineNumberPrefix {
 export interface InfiniteLoadingProps {
     pageSize: number;
     containerHeight: string;
+    overscan?: number;
 }
 export interface ComputedDiffResult {
     lineInformation: LineInformation[];
@@ -39,8 +40,8 @@ export interface ReactDiffViewerProps {
         type: DiffType;
         prefix: LineNumberPrefix;
         value: string | DiffInformation[];
-        additionalLineNumber: number;
-        additionalPrefix: LineNumberPrefix;
+        additionalLineNumber?: number;
+        additionalPrefix?: LineNumberPrefix;
         styles: ReactDiffViewerStyles;
     }) => ReactElement;
     highlightLines?: string[];
@@ -69,17 +70,23 @@ export interface ReactDiffViewerProps {
      * Show debug overlay with virtualization info (for development)
      */
     showDebugInfo?: boolean;
+    /**
+     * Disable Web Worker for diff computation, using synchronous fallback instead.
+     * Useful when the worker bundle fails to load in certain bundler configurations.
+     */
+    disableWorker?: boolean;
 }
 export interface ReactDiffViewerState {
-    expandedBlocks?: number[];
+    expandedBlocks: number[];
     noSelect?: "left" | "right";
-    scrollableContainerRef: RefObject<HTMLDivElement>;
+    scrollableContainerRef: RefObject<HTMLDivElement | null>;
     computedDiffResult: Record<string, ComputedDiffResult>;
     isLoading: boolean;
     visibleStartRow: number;
     contentColumnWidth: number | null;
     charWidth: number | null;
     cumulativeOffsets: number[] | null;
+    isScrolling: boolean;
 }
 declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerState> {
     private styles;
@@ -88,6 +95,8 @@ declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiff
     private charMeasureRef;
     private stickyHeaderRef;
     private resizeObserver;
+    private scrollDebounceTimer;
+    private lastRenderedRange;
     static defaultProps: ReactDiffViewerProps;
     constructor(props: ReactDiffViewerProps);
     /**
@@ -248,4 +257,5 @@ declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiff
 }
 export default DiffViewer;
 export { DiffMethod };
-export type { ReactDiffViewerStylesOverride };
+export { default as computeStyles } from "./styles.js";
+export type { ReactDiffViewerStylesOverride, ReactDiffViewerStyles };