react-diff-viewer-continued 4.2.0 → 4.3.0

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/pages.yml

@@ -0,0 +1,36 @@
+name: Deploy GitHub Pages
+
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: latest
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+          cache: 'pnpm'
+
+      - run: pnpm install
+
+      - name: Configure git
+        run: |
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          git config --global user.name "github-actions[bot]"
+
+      - name: Deploy examples to GitHub Pages
+        run: pnpm publish:examples
+        env:
+          GITHUB_REPO_URL: https://x-access-token:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}.git

package/.github/workflows/publish.yml

@@ -33,16 +33,8 @@ jobs:
       - run: pnpm install
       - run: pnpm build
 
-      # Upgrade npm for provenance support (GitHub runners ship with old npm)
-      - run: npm install -g npm@latest
-
-      - name: Publish to npm
-        run: pnpm publish --access public --provenance --no-git-checks
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      # Create GitHub release with changelog notes
-      - name: Create GitHub release
+      - name: Publish and create GitHub release
         run: pnpm just-release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

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,46 @@
 # Changelog
 
+## 4.3.0 (2026-07-10)
+
+### Features
+
+- export default light and dark theme variables
+
+### Bug Fixes
+
+- do not do extra publish step, just release publishes
+- make exports immutable
+- freeze dark theme variables and add export-existence tests
+- add GitHub Pages deployment workflow and Vite base path
+- isolate diff table from host table CSS (daisyui/bootstrap)
+- bump js-yaml to ^4.2.0 (CVE-2026-53550)
+- clear remaining audit advisories in dev toolchain
+
+### Documentation
+
+- add overscan, disableWorker, and loading overlay to README
+
+### Chores
+
+- make pnpm canonical (drop npm lockfile, approve builds)
+
+## 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

package/README.md

@@ -92,8 +92,9 @@ class Diff extends PureComponent {
 | linesOffset               | `number`                  | `0`                            | Number to start count code lines from.                                                                                                                                                                                                                                                                                                                                                                           |
 | summary                   | `string \| ReactElement`  | `undefined`                    | Text or element to display in the summary bar (e.g., filename).                                                                                                                                                                                                                                                                                                                                                  |
 | hideSummary               | `boolean`                 | `false`                        | Hide the summary bar (expand/collapse button, change count, summary text).                                                                                                                                                                                                                                                                                                                                       |
-| infiniteLoading           | `{ pageSize: number, containerHeight: string }` | `undefined`        | Enable virtualization for large diffs. When enabled, only visible rows are rendered. `containerHeight` sets the scrollable container height (e.g., `'500px'` or `'80vh'`).                                                                                                                                                                                                                                       |
-| loadingElement            | `() => ReactElement`      | `undefined`                    | Function that returns an element to display while the diff is being computed. Useful with `infiniteLoading` for large files.                                                                                                                                                                                                                                                                                     |
+| infiniteLoading           | `{ pageSize: number, containerHeight: string, overscan?: number }` | `undefined`        | Enable virtualization for large diffs. When enabled, only visible rows are rendered. `containerHeight` sets the scrollable container height (e.g., `'500px'` or `'80vh'`). `overscan` controls how many extra rows to render above and below the viewport (default `20`).                                                                                                                                         |
+| loadingElement            | `() => ReactElement`      | `undefined`                    | Function that returns an element to display while the diff is being computed or when content is hidden during fast scrolling. Useful with `infiniteLoading` for large files.                                                                                                                                                                                                                                      |
+| disableWorker             | `boolean`                 | `false`                        | Disable the Web Worker used for diff computation, falling back to synchronous computation on the main thread. Useful when the worker bundle fails to load in certain bundler configurations.                                                                                                                                                                                                                     |
 | nonce                     | `string`                  | `''`                           | Nonce to use for inline styles (for CSP).                                                                                                                                                                                                                                                                                                                                                                        |
 
 ## Instance Methods
@@ -114,7 +115,8 @@ Enable virtualization to only render visible rows:
   newValue={largeNewFile}
   infiniteLoading={{
     pageSize: 20,
-    containerHeight: '80vh'
+    containerHeight: '80vh',
+    overscan: 20,
   }}
   loadingElement={() => (
     <div style={{ padding: '20px', textAlign: 'center' }}>

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.js';
 // 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/index.d.ts

@@ -3,7 +3,7 @@ import type { ReactElement, RefObject } from "react";
 import type { Change } from "diff";
 import { type Block } from "./compute-hidden-blocks.js";
 import { type DiffInformation, DiffMethod, DiffType, type LineInformation } from "./compute-lines.js";
-import { type ReactDiffViewerStyles, type ReactDiffViewerStylesOverride } from "./styles.js";
+import { type ReactDiffViewerStyles, type ReactDiffViewerStylesOverride, type ReactDiffViewerStylesVariables } from "./styles.js";
 export declare enum LineNumberPrefix {
     LEFT = "L",
     RIGHT = "R"
@@ -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);
     /**
@@ -249,4 +258,5 @@ declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiff
 export default DiffViewer;
 export { DiffMethod };
 export { default as computeStyles } from "./styles.js";
-export type { ReactDiffViewerStylesOverride, ReactDiffViewerStyles };
+export { defaultLightThemeVariables, defaultDarkThemeVariables, } from "./styles.js";
+export type { ReactDiffViewerStylesOverride, ReactDiffViewerStyles, ReactDiffViewerStylesVariables };