react-diff-viewer-continued 4.2.2 → 4.3.0

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/CHANGELOG.md

@@ -1,5 +1,29 @@
 # 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

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/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"
@@ -258,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 };

package/lib/cjs/src/index.js

@@ -1021,3 +1021,4 @@ DiffViewer.ESTIMATED_ROW_HEIGHT = 19;
 export default DiffViewer;
 export { DiffMethod };
 export { default as computeStyles } from "./styles.js";
+export { defaultLightThemeVariables, defaultDarkThemeVariables, } from "./styles.js";

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

@@ -98,5 +98,7 @@ export interface ReactDiffViewerStylesOverride {
     splitView?: Interpolation;
     allExpandButton?: Interpolation;
 }
+export declare const defaultLightThemeVariables: Readonly<Required<ReactDiffViewerStylesVariables>>;
+export declare const defaultDarkThemeVariables: Readonly<Required<ReactDiffViewerStylesVariables>>;
 declare const _default: (styleOverride: ReactDiffViewerStylesOverride, useDarkTheme?: boolean, nonce?: string) => ReactDiffViewerStyles;
 export default _default;

package/lib/cjs/src/styles.js

@@ -10,69 +10,74 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import createEmotion from "@emotion/css/create-instance";
+export const defaultLightThemeVariables = Object.freeze({
+    diffViewerBackground: "#fff",
+    diffViewerColor: "#212529",
+    addedBackground: "#e6ffed",
+    addedColor: "#24292e",
+    removedBackground: "#ffeef0",
+    removedColor: "#24292e",
+    changedBackground: "#fffbdd",
+    wordAddedBackground: "#acf2bd",
+    wordRemovedBackground: "#fdb8c0",
+    addedGutterBackground: "#cdffd8",
+    removedGutterBackground: "#ffdce0",
+    gutterBackground: "#f7f7f7",
+    gutterBackgroundDark: "#f3f1f1",
+    highlightBackground: "#fffbdd",
+    highlightGutterBackground: "#fff5b1",
+    codeFoldGutterBackground: "#dbedff",
+    codeFoldBackground: "#f1f8ff",
+    emptyLineBackground: "#fafbfc",
+    gutterColor: "#212529",
+    addedGutterColor: "#212529",
+    removedGutterColor: "#212529",
+    codeFoldContentColor: "#212529",
+    diffViewerTitleBackground: "#fafbfc",
+    diffViewerTitleColor: "#212529",
+    diffViewerTitleBorderColor: "#eee",
+});
+export const defaultDarkThemeVariables = Object.freeze({
+    diffViewerBackground: "#2e303c",
+    diffViewerColor: "#FFF",
+    addedBackground: "#2ea04326",
+    addedColor: "white",
+    removedBackground: "#f851491a",
+    removedColor: "white",
+    changedBackground: "#3e302c",
+    wordAddedBackground: "#2ea04366",
+    wordRemovedBackground: "#f8514966",
+    addedGutterBackground: "#3fb9504d",
+    removedGutterBackground: "#f851494d",
+    gutterBackground: "#2c2f3a",
+    gutterBackgroundDark: "#262933",
+    highlightBackground: "#2a3967",
+    highlightGutterBackground: "#2d4077",
+    codeFoldGutterBackground: "#262831",
+    codeFoldBackground: "#262831",
+    emptyLineBackground: "#363946",
+    gutterColor: "#f0f6fc",
+    addedGutterColor: "#f0f6fc",
+    removedGutterColor: "#f0f6fc",
+    codeFoldContentColor: "#9198a1",
+    diffViewerTitleBackground: "#2f323e",
+    diffViewerTitleColor: "#f0f6fc",
+    diffViewerTitleBorderColor: "#353846",
+});
 export default (styleOverride, useDarkTheme = false, nonce = "") => {
     const { variables: overrideVariables = {} } = styleOverride, styles = __rest(styleOverride, ["variables"]);
     const themeVariables = {
-        light: Object.assign({
-            diffViewerBackground: "#fff",
-            diffViewerColor: "#212529",
-            addedBackground: "#e6ffed",
-            addedColor: "#24292e",
-            removedBackground: "#ffeef0",
-            removedColor: "#24292e",
-            changedBackground: "#fffbdd",
-            wordAddedBackground: "#acf2bd",
-            wordRemovedBackground: "#fdb8c0",
-            addedGutterBackground: "#cdffd8",
-            removedGutterBackground: "#ffdce0",
-            gutterBackground: "#f7f7f7",
-            gutterBackgroundDark: "#f3f1f1",
-            highlightBackground: "#fffbdd",
-            highlightGutterBackground: "#fff5b1",
-            codeFoldGutterBackground: "#dbedff",
-            codeFoldBackground: "#f1f8ff",
-            emptyLineBackground: "#fafbfc",
-            gutterColor: "#212529",
-            addedGutterColor: "#212529",
-            removedGutterColor: "#212529",
-            codeFoldContentColor: "#212529",
-            diffViewerTitleBackground: "#fafbfc",
-            diffViewerTitleColor: "#212529",
-            diffViewerTitleBorderColor: "#eee",
-        }, (overrideVariables.light || {})),
-        dark: Object.assign({
-            diffViewerBackground: "#2e303c",
-            diffViewerColor: "#FFF",
-            addedBackground: "#2ea04326",
-            addedColor: "white",
-            removedBackground: "#f851491a",
-            removedColor: "white",
-            changedBackground: "#3e302c",
-            wordAddedBackground: "#2ea04366",
-            wordRemovedBackground: "#f8514966",
-            addedGutterBackground: "#3fb9504d",
-            removedGutterBackground: "#f851494d",
-            gutterBackground: "#2c2f3a",
-            gutterBackgroundDark: "#262933",
-            highlightBackground: "#2a3967",
-            highlightGutterBackground: "#2d4077",
-            codeFoldGutterBackground: "#262831",
-            codeFoldBackground: "#262831",
-            emptyLineBackground: "#363946",
-            gutterColor: "#f0f6fc",
-            addedGutterColor: "#f0f6fc",
-            removedGutterColor: "#f0f6fc",
-            codeFoldContentColor: "#9198a1",
-            diffViewerTitleBackground: "#2f323e",
-            diffViewerTitleColor: "#f0f6fc",
-            diffViewerTitleBorderColor: "#353846",
-        }, (overrideVariables.dark || {})),
+        light: Object.assign(Object.assign({}, defaultLightThemeVariables), (overrideVariables.light || {})),
+        dark: Object.assign(Object.assign({}, defaultDarkThemeVariables), (overrideVariables.dark || {})),
     };
     const variables = useDarkTheme ? themeVariables.dark : themeVariables.light;
     const { css, cx } = createEmotion({ key: "react-diff", nonce });
     const content = css({
         width: "auto",
         overflow: "hidden",
+        // Host `:where(th,td){ padding }` (daisyui `.table`) would indent the code
+        // column; we own horizontal spacing via gutter/marker instead.
+        padding: 0,
         label: "content",
     });
     const splitView = css({
@@ -114,6 +119,18 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         },
         label: "diff-container",
         borderCollapse: "collapse",
+        borderRadius: 0,
+        // Isolate from host table CSS (e.g. daisyui `.table` / `.table-zebra`, Bootstrap,
+        // etc.). Such frameworks emit their table rules inside `@layer` with `:where()`
+        // selectors, so these unlayered declarations win regardless of specificity. We
+        // only reset properties a host injects onto our rows/cells that we do NOT set
+        // ourselves per-cell — background, font-size and padding are pinned on the
+        // individual line/gutter/marker/content classes instead, so this container rule
+        // never outranks and clobbers our own diff colouring.
+        "& td, & th": {
+            border: 0,
+            verticalAlign: "baseline",
+        },
         "@media (max-width: 768px)": {
             minWidth: "unset",
         },
@@ -232,11 +249,15 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         label: "code-fold-gutter",
         minWidth: "50px",
         width: "50px",
+        // Neutralize host `:where(th,td){ padding }` on the fold gutter cell.
+        padding: 0,
         textAlign: "center",
         fill: variables.codeFoldContentColor,
     });
     const codeFoldContentContainer = css({
-        padding: "",
+        // Neutralize host `:where(th,td){ padding }` on the fold content cell.
+        padding: 0,
+        label: "code-fold-content-container",
     });
     const codeFoldExpandButton = css({
         background: variables.codeFoldBackground,
@@ -299,6 +320,10 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         width: 28,
         paddingLeft: 10,
         paddingRight: 10,
+        // Host `padding-block` (daisyui `:where(th,td){ padding }`) would misalign the
+        // +/- marker against its line; pin the vertical padding to zero.
+        paddingTop: 0,
+        paddingBottom: 0,
         userSelect: "none",
         label: "marker",
         [`&.${diffAdded}`]: {
@@ -368,6 +393,11 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         verticalAlign: "baseline",
         label: "line",
         textDecoration: "none",
+        // Neutralize host row styling (e.g. daisyui `.table-zebra` striping and the
+        // `tr { font-size }` set by `.table-*` size variants). Cell-level diff colours
+        // are painted on the td, so a transparent row lets them show through.
+        backgroundColor: "transparent",
+        fontSize: 12,
     });
     const column = css({});
     const defaultStyles = {