react-diff-viewer-continued 4.0.0 → 4.0.2

package/.github/workflows/release.yml

@@ -1,12 +1,31 @@
-name: Release
+name: Test & Release
 on:
   push:
-    branches:
-      - master
-      - next
+
 jobs:
+  test:
+    name: Unit tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 'lts/*'
+      - uses: pnpm/action-setup@v2.2.4
+        with:
+          version: latest
+      - name: Install dependencies
+        run: pnpm i
+      - name: Run unit tests
+        run: pnpm run test
   release:
     name: Release
+    needs: test
+    if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/next'
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

package/.idea/react-diff-viewer-continued.iml

@@ -5,4 +5,7 @@
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
   </component>
+  <component name="SonarLintModuleSettings">
+    <option name="uniqueId" value="5762f64b-7b0e-41a1-a2ec-f15fa70aa6a1" />
+  </component>
 </module>

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [4.0.2](https://github.com/aeolun/react-diff-viewer-continued/compare/v4.0.1...v4.0.2) (2024-02-14)
+
+
+### Bug Fixes
+
+* revert back to table based layout, add example image (fixes [#35](https://github.com/aeolun/react-diff-viewer-continued/issues/35), [#15](https://github.com/aeolun/react-diff-viewer-continued/issues/15), [#21](https://github.com/aeolun/react-diff-viewer-continued/issues/21)) ([a1571ab](https://github.com/aeolun/react-diff-viewer-continued/commit/a1571ab9940c8b917c2e845f537780e4b45efb01))
+
+## [4.0.1](https://github.com/aeolun/react-diff-viewer-continued/compare/v4.0.0...v4.0.1) (2023-11-01)
+
+
+### Bug Fixes
+
+* publish files on 4.x ([650c249](https://github.com/aeolun/react-diff-viewer-continued/commit/650c249c5bf1d8b27d780b65555df5ae0f5d9e2b))
+
 # [4.0.0](https://github.com/aeolun/react-diff-viewer-continued/compare/v3.3.0...v4.0.0) (2023-10-19)
 
 

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Pranesh Ravi
+Copyright (c) 2023 Bart Riepe
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -12,6 +12,8 @@
 
 A simple and beautiful text diff viewer component made with [Diff](https://github.com/kpdecker/jsdiff) and [React](https://reactjs.org).
 
+![example image](./example.jpg)
+
 Inspired by the Github diff viewer, it includes features like split view, inline view, word diff, line highlight and more. It is highly customizable and it supports almost all languages.
 
 Most credit goes to [Pranesh Ravi](https://praneshravi.in) who created the [original diff viewer](https://github.com/praneshr/react-diff-viewer). I've just made a few modifications and updated the dependencies so they work with modern stacks.

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

@@ -0,0 +1,13 @@
+import { LineInformation } from "./compute-lines";
+export interface Block {
+    index: number;
+    startLine: number;
+    endLine: number;
+    lines: number;
+}
+interface HiddenBlocks {
+    lineBlocks: Record<number, number>;
+    blocks: Block[];
+}
+export declare function computeHiddenBlocks(lineInformation: LineInformation[], diffLines: number[], extraLines: number): HiddenBlocks;
+export {};

package/lib/cjs/src/compute-hidden-blocks.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.computeHiddenBlocks = void 0;
+function computeHiddenBlocks(lineInformation, diffLines, extraLines) {
+    let newBlockIndex = 0;
+    let currentBlock;
+    let lineBlocks = {};
+    let blocks = [];
+    lineInformation.forEach((line, lineIndex) => {
+        const isDiffLine = diffLines.some(diffLine => diffLine >= lineIndex - extraLines && diffLine <= lineIndex + extraLines);
+        if (!isDiffLine && currentBlock == undefined) {
+            // block begins
+            currentBlock = {
+                index: newBlockIndex,
+                startLine: lineIndex,
+                endLine: lineIndex,
+                lines: 1
+            };
+            blocks.push(currentBlock);
+            lineBlocks[lineIndex] = currentBlock.index;
+            newBlockIndex++;
+        }
+        else if (!isDiffLine) {
+            // block continues
+            currentBlock.endLine = lineIndex;
+            currentBlock.lines++;
+            lineBlocks[lineIndex] = currentBlock.index;
+        }
+        else {
+            // not a block anymore
+            currentBlock = undefined;
+        }
+    });
+    return {
+        lineBlocks,
+        blocks: blocks
+    };
+}
+exports.computeHiddenBlocks = computeHiddenBlocks;

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

@@ -0,0 +1,55 @@
+export declare enum DiffType {
+    DEFAULT = 0,
+    ADDED = 1,
+    REMOVED = 2,
+    CHANGED = 3
+}
+export declare enum DiffMethod {
+    CHARS = "diffChars",
+    WORDS = "diffWords",
+    WORDS_WITH_SPACE = "diffWordsWithSpace",
+    LINES = "diffLines",
+    TRIMMED_LINES = "diffTrimmedLines",
+    SENTENCES = "diffSentences",
+    CSS = "diffCss",
+    JSON = "diffJson"
+}
+export interface DiffInformation {
+    value?: string | DiffInformation[];
+    lineNumber?: number;
+    type?: DiffType;
+}
+export interface LineInformation {
+    left?: DiffInformation;
+    right?: DiffInformation;
+}
+export interface ComputedLineInformation {
+    lineInformation: LineInformation[];
+    diffLines: number[];
+}
+export interface ComputedDiffInformation {
+    left?: DiffInformation[];
+    right?: DiffInformation[];
+}
+export interface JsDiffChangeObject {
+    added?: boolean;
+    removed?: boolean;
+    value?: string;
+}
+/**
+ * [TODO]: Think about moving common left and right value assignment to a
+ * common place. Better readability?
+ *
+ * Computes line wise information based in the js diff information passed. Each
+ * line contains information about left and right section. Left side denotes
+ * deletion and right side denotes addition.
+ *
+ * @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
+ */
+declare const computeLineInformation: (oldString: string | Object, newString: string | Object, disableWordDiff?: boolean, lineCompareMethod?: string, linesOffset?: number, showLines?: string[]) => ComputedLineInformation;
+export { computeLineInformation };

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

@@ -0,0 +1,228 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.computeLineInformation = exports.DiffMethod = exports.DiffType = void 0;
+const diff = __importStar(require("diff"));
+const jsDiff = diff;
+var DiffType;
+(function (DiffType) {
+    DiffType[DiffType["DEFAULT"] = 0] = "DEFAULT";
+    DiffType[DiffType["ADDED"] = 1] = "ADDED";
+    DiffType[DiffType["REMOVED"] = 2] = "REMOVED";
+    DiffType[DiffType["CHANGED"] = 3] = "CHANGED";
+})(DiffType || (exports.DiffType = DiffType = {}));
+// See https://github.com/kpdecker/jsdiff/tree/v4.0.1#api for more info on the below JsDiff methods
+var DiffMethod;
+(function (DiffMethod) {
+    DiffMethod["CHARS"] = "diffChars";
+    DiffMethod["WORDS"] = "diffWords";
+    DiffMethod["WORDS_WITH_SPACE"] = "diffWordsWithSpace";
+    DiffMethod["LINES"] = "diffLines";
+    DiffMethod["TRIMMED_LINES"] = "diffTrimmedLines";
+    DiffMethod["SENTENCES"] = "diffSentences";
+    DiffMethod["CSS"] = "diffCss";
+    DiffMethod["JSON"] = "diffJson";
+})(DiffMethod || (exports.DiffMethod = DiffMethod = {}));
+/**
+ * Splits diff text by new line and computes final list of diff lines based on
+ * conditions.
+ *
+ * @param value Diff text from the js diff module.
+ */
+const constructLines = (value) => {
+    if (value === '')
+        return [];
+    const lines = value.replace(/\n$/, '').split('\n');
+    return lines;
+};
+/**
+ * Computes word diff information in the line.
+ * [TODO]: Consider adding options argument for JsDiff text block comparison
+ *
+ * @param oldValue Old word in the line.
+ * @param newValue New word in the line.
+ * @param compareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
+ */
+const computeDiff = (oldValue, newValue, compareMethod = DiffMethod.CHARS) => {
+    const diffArray = jsDiff[compareMethod](oldValue, newValue);
+    const computedDiff = {
+        left: [],
+        right: [],
+    };
+    diffArray.forEach(({ added, removed, value }) => {
+        const diffInformation = {};
+        if (added) {
+            diffInformation.type = DiffType.ADDED;
+            diffInformation.value = value;
+            computedDiff.right.push(diffInformation);
+        }
+        if (removed) {
+            diffInformation.type = DiffType.REMOVED;
+            diffInformation.value = value;
+            computedDiff.left.push(diffInformation);
+        }
+        if (!removed && !added) {
+            diffInformation.type = DiffType.DEFAULT;
+            diffInformation.value = value;
+            computedDiff.right.push(diffInformation);
+            computedDiff.left.push(diffInformation);
+        }
+        return diffInformation;
+    });
+    return computedDiff;
+};
+/**
+ * [TODO]: Think about moving common left and right value assignment to a
+ * common place. Better readability?
+ *
+ * Computes line wise information based in the js diff information passed. Each
+ * line contains information about left and right section. Left side denotes
+ * deletion and right side denotes addition.
+ *
+ * @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
+ */
+const computeLineInformation = (oldString, newString, disableWordDiff = false, lineCompareMethod = DiffMethod.CHARS, linesOffset = 0, showLines = []) => {
+    let diffArray = [];
+    // Use diffLines for strings, and diffJson for objects...
+    if (typeof oldString === 'string' && typeof newString === 'string') {
+        diffArray = diff.diffLines(oldString, newString, {
+            newlineIsToken: false,
+            ignoreWhitespace: false,
+            ignoreCase: false,
+        });
+    }
+    else {
+        diffArray = diff.diffJson(oldString, newString);
+    }
+    let rightLineNumber = linesOffset;
+    let leftLineNumber = linesOffset;
+    let lineInformation = [];
+    let counter = 0;
+    const diffLines = [];
+    const ignoreDiffIndexes = [];
+    const getLineInformation = (value, diffIndex, added, removed, evaluateOnlyFirstLine) => {
+        const lines = constructLines(value);
+        return lines
+            .map((line, lineIndex) => {
+            const left = {};
+            const right = {};
+            if (ignoreDiffIndexes.includes(`${diffIndex}-${lineIndex}`) ||
+                (evaluateOnlyFirstLine && lineIndex !== 0)) {
+                return undefined;
+            }
+            if (added || removed) {
+                let countAsChange = true;
+                if (removed) {
+                    leftLineNumber += 1;
+                    left.lineNumber = leftLineNumber;
+                    left.type = DiffType.REMOVED;
+                    left.value = line || ' ';
+                    // When the current line is of type REMOVED, check the next item in
+                    // the diff array whether it is of type ADDED. If true, the current
+                    // diff will be marked as both REMOVED and ADDED. Meaning, the
+                    // current line is a modification.
+                    const nextDiff = diffArray[diffIndex + 1];
+                    if (nextDiff && nextDiff.added) {
+                        const nextDiffLines = constructLines(nextDiff.value)[lineIndex];
+                        if (nextDiffLines) {
+                            const nextDiffLineInfo = getLineInformation(nextDiffLines, diffIndex, true, false, true);
+                            const { value: rightValue, lineNumber, type, } = nextDiffLineInfo[0].right;
+                            // When identified as modification, push the next diff to ignore
+                            // list as the next value will be added in this line computation as
+                            // right and left values.
+                            ignoreDiffIndexes.push(`${diffIndex + 1}-${lineIndex}`);
+                            right.lineNumber = lineNumber;
+                            if (left.value === rightValue) {
+                                // The new value is exactly the same as the old
+                                countAsChange = false;
+                                right.type = 0;
+                                left.type = 0;
+                                right.value = rightValue;
+                            }
+                            else {
+                                right.type = type;
+                                // Do char level diff and assign the corresponding values to the
+                                // left and right diff information object.
+                                if (disableWordDiff) {
+                                    right.value = rightValue;
+                                }
+                                else {
+                                    const computedDiff = computeDiff(line, rightValue, lineCompareMethod);
+                                    right.value = computedDiff.right;
+                                    left.value = computedDiff.left;
+                                }
+                            }
+                        }
+                    }
+                }
+                else {
+                    rightLineNumber += 1;
+                    right.lineNumber = rightLineNumber;
+                    right.type = DiffType.ADDED;
+                    right.value = line;
+                }
+                if (countAsChange && !evaluateOnlyFirstLine) {
+                    if (!diffLines.includes(counter)) {
+                        diffLines.push(counter);
+                    }
+                }
+            }
+            else {
+                leftLineNumber += 1;
+                rightLineNumber += 1;
+                left.lineNumber = leftLineNumber;
+                left.type = DiffType.DEFAULT;
+                left.value = line;
+                right.lineNumber = rightLineNumber;
+                right.type = DiffType.DEFAULT;
+                right.value = line;
+            }
+            if ((showLines === null || showLines === void 0 ? void 0 : showLines.includes(`L-${left.lineNumber}`)) || (showLines === null || showLines === void 0 ? void 0 : showLines.includes(`R-${right.lineNumber}`)) && !diffLines.includes(counter)) {
+                diffLines.push(counter);
+            }
+            if (!evaluateOnlyFirstLine) {
+                counter += 1;
+            }
+            return { right, left };
+        })
+            .filter(Boolean);
+    };
+    diffArray.forEach(({ added, removed, value }, index) => {
+        lineInformation = [
+            ...lineInformation,
+            ...getLineInformation(value, index, added, removed),
+        ];
+    });
+    return {
+        lineInformation,
+        diffLines,
+    };
+};
+exports.computeLineInformation = computeLineInformation;

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

@@ -0,0 +1 @@
+export declare function Expand(): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/src/expand.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Expand = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function Expand() {
+    return (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", children: (0, jsx_runtime_1.jsx)("path", { d: "m8.177.677 2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25a.75.75 0 0 1-1.5 0V4H5.104a.25.25 0 0 1-.177-.427L7.823.677a.25.25 0 0 1 .354 0ZM7.25 10.75a.75.75 0 0 1 1.5 0V12h2.146a.25.25 0 0 1 .177.427l-2.896 2.896a.25.25 0 0 1-.354 0l-2.896-2.896A.25.25 0 0 1 5.104 12H7.25v-1.25Zm-5-2a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z" }) });
+}
+exports.Expand = Expand;

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

@@ -0,0 +1 @@
+export declare function Fold(): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/src/fold.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Fold = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function Fold() {
+    return (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", children: (0, jsx_runtime_1.jsx)("path", { d: "M10.896 2H8.75V.75a.75.75 0 0 0-1.5 0V2H5.104a.25.25 0 0 0-.177.427l2.896 2.896a.25.25 0 0 0 .354 0l2.896-2.896A.25.25 0 0 0 10.896 2ZM8.75 15.25a.75.75 0 0 1-1.5 0V14H5.104a.25.25 0 0 1-.177-.427l2.896-2.896a.25.25 0 0 1 .354 0l2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25Zm-6.5-6.5a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z" }) });
+}
+exports.Fold = Fold;

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

@@ -0,0 +1,141 @@
+import * as React from 'react';
+import { ReactElement } from 'react';
+import { DiffInformation, DiffMethod, DiffType, LineInformation } from './compute-lines';
+import { ReactDiffViewerStyles, ReactDiffViewerStylesOverride } from './styles';
+export declare enum LineNumberPrefix {
+    LEFT = "L",
+    RIGHT = "R"
+}
+export interface ReactDiffViewerProps {
+    oldValue: string | Object;
+    newValue: string | Object;
+    splitView?: boolean;
+    linesOffset?: number;
+    disableWordDiff?: boolean;
+    compareMethod?: DiffMethod;
+    extraLinesSurroundingDiff?: number;
+    hideLineNumbers?: boolean;
+    /**
+     * Show the lines indicated here. Specified as L20 or R18 for respectively line 20 on the left or line 18 on the right.
+     */
+    alwaysShowLines?: string[];
+    showDiffOnly?: boolean;
+    renderContent?: (source: string) => ReactElement;
+    codeFoldMessageRenderer?: (totalFoldedLines: number, leftStartLineNumber: number, rightStartLineNumber: number) => ReactElement;
+    onLineNumberClick?: (lineId: string, event: React.MouseEvent<HTMLTableCellElement>) => void;
+    renderGutter?: (data: {
+        lineNumber: number;
+        type: DiffType;
+        prefix: LineNumberPrefix;
+        value: string | DiffInformation[];
+        additionalLineNumber: number;
+        additionalPrefix: LineNumberPrefix;
+        styles: ReactDiffViewerStyles;
+    }) => ReactElement;
+    highlightLines?: string[];
+    styles?: ReactDiffViewerStylesOverride;
+    useDarkTheme?: boolean;
+    /**
+     * Used to describe the thing being diffed
+     */
+    summary?: string | ReactElement;
+    leftTitle?: string | ReactElement;
+    rightTitle?: string | ReactElement;
+    nonce?: string;
+}
+export interface ReactDiffViewerState {
+    expandedBlocks?: number[];
+    noSelect?: 'left' | 'right';
+}
+declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerState> {
+    private styles;
+    static defaultProps: ReactDiffViewerProps;
+    constructor(props: ReactDiffViewerProps);
+    /**
+     * Resets code block expand to the initial stage. Will be exposed to the parent component via
+     * refs.
+     */
+    resetCodeBlocks: () => boolean;
+    /**
+     * Pushes the target expanded code block to the state. During the re-render,
+     * this value is used to expand/fold unmodified code.
+     */
+    private onBlockExpand;
+    /**
+     * 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.
+     *
+     * @param styles User supplied style overrides.
+     */
+    private computeStyles;
+    /**
+     * Returns a function with clicked line number in the closure. Returns an no-op function when no
+     * onLineNumberClick handler is supplied.
+     *
+     * @param id Line id of a line.
+     */
+    private onLineNumberClickProxy;
+    /**
+     * Maps over the word diff and constructs the required React elements to show word diff.
+     *
+     * @param diffArray Word diff information derived from line information.
+     * @param renderer Optional renderer to format diff words. Useful for syntax highlighting.
+     */
+    private renderWordDiff;
+    /**
+     * Maps over the line diff and constructs the required react elements to show line diff. It calls
+     * renderWordDiff when encountering word diff. This takes care of both inline and split view line
+     * renders.
+     *
+     * @param lineNumber Line number of the current line.
+     * @param type Type of diff of the current line.
+     * @param prefix Unique id to prefix with the line numbers.
+     * @param value Content of the line. It can be a string or a word diff array.
+     * @param additionalLineNumber Additional line number to be shown. Useful for rendering inline
+     *  diff view. Right line number will be passed as additionalLineNumber.
+     * @param additionalPrefix Similar to prefix but for additional line number.
+     */
+    private renderLine;
+    /**
+     * Generates lines for split view.
+     *
+     * @param obj Line diff information.
+     * @param obj.left Life diff information for the left pane of the split view.
+     * @param obj.right Life diff information for the right pane of the split view.
+     * @param index React key for the lines.
+     */
+    private renderSplitView;
+    /**
+     * Generates lines for inline view.
+     *
+     * @param obj Line diff information.
+     * @param obj.left Life diff information for the added section of the inline view.
+     * @param obj.right Life diff information for the removed section of the inline view.
+     * @param index React key for the lines.
+     */
+    renderInlineView: ({ left, right }: LineInformation, index: number) => ReactElement;
+    /**
+     * Returns a function with clicked block number in the closure.
+     *
+     * @param id Cold fold block id.
+     */
+    private onBlockClickProxy;
+    /**
+     * Generates cold fold block. It also uses the custom message renderer when available to show
+     * cold fold messages.
+     *
+     * @param num Number of skipped lines between two blocks.
+     * @param blockNumber Code fold block id.
+     * @param leftBlockLineNumber First left line number after the current code fold block.
+     * @param rightBlockLineNumber First right line number after the current code fold block.
+     */
+    private renderSkippedLineIndicator;
+    /**
+     * Generates the entire diff view.
+     */
+    private renderDiff;
+    render: () => ReactElement;
+}
+export default DiffViewer;
+export { DiffMethod };
+export type { ReactDiffViewerStylesOverride };