@bochenw/react-diff-viewer-continued 4.3.0

package/lib/cjs/src/diff-row.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+import type { ReactElement, RefObject } from "react";
+import type { Change } from "diff";
+import { type DiffInformation, DiffMethod, DiffType } from "./compute-lines.js";
+import { LineNumberPrefix } from "./line-number-prefix.js";
+import type { ReactDiffViewerStyles } from "./styles.js";
+export interface DiffRowProps {
+    leftLineNumber: number | undefined;
+    leftType: DiffType;
+    leftValue: string | DiffInformation[];
+    rightLineNumber: number | undefined;
+    rightType: DiffType;
+    rightValue: string | DiffInformation[];
+    highlightLeft: boolean;
+    highlightRight: boolean;
+    splitView: boolean;
+    hideLineNumbers: boolean;
+    styles: ReactDiffViewerStyles;
+    onLineNumberClick?: (lineId: string, event: React.MouseEvent<HTMLTableCellElement>) => void;
+    renderContent?: (source: string) => ReactElement;
+    renderGutter?: (data: {
+        lineNumber: number;
+        type: DiffType;
+        prefix: LineNumberPrefix;
+        value: string | DiffInformation[];
+        additionalLineNumber: number;
+        additionalPrefix: LineNumberPrefix;
+        styles: ReactDiffViewerStyles;
+    }) => ReactElement;
+    compareMethod: DiffMethod | ((oldStr: string, newStr: string) => Change[]);
+    contentColumnRef?: RefObject<HTMLTableCellElement | null>;
+    hasCumulativeOffsets: boolean;
+    index: number;
+}
+/**
+ * Memoized component that renders a single diff row (split or inline view).
+ * Only re-renders when the line data, highlight state, or display config changes.
+ * Function props (callbacks, renderers) are excluded from the equality check.
+ */
+export declare const DiffRow: React.NamedExoticComponent<DiffRowProps>;

package/lib/cjs/src/diff-row.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import cn from "classnames";
+import * as React from "react";
+import { DiffType, } from "./compute-lines.js";
+import { LineNumberPrefix } from "./line-number-prefix.js";
+import { renderWordDiff } from "./render-word-diff.js";
+/**
+ * Custom equality function for React.memo — compares only data props, skips functions.
+ */
+function diffRowPropsAreEqual(prev, next) {
+    return (prev.leftLineNumber === next.leftLineNumber &&
+        prev.leftType === next.leftType &&
+        prev.leftValue === next.leftValue &&
+        prev.rightLineNumber === next.rightLineNumber &&
+        prev.rightType === next.rightType &&
+        prev.rightValue === next.rightValue &&
+        prev.highlightLeft === next.highlightLeft &&
+        prev.highlightRight === next.highlightRight &&
+        prev.splitView === next.splitView &&
+        prev.hideLineNumbers === next.hideLineNumbers &&
+        prev.styles === next.styles &&
+        prev.contentColumnRef === next.contentColumnRef &&
+        prev.hasCumulativeOffsets === next.hasCumulativeOffsets);
+}
+/**
+ * Renders a single line (one side of split view, or one line in inline view).
+ * This produces the <td> cells for gutter, marker, and content.
+ */
+function renderLine(lineNumber, type, prefix, value, highlightLine, styles, splitView, hideLineNumbers, compareMethod, onLineNumberClick, renderContent, renderGutter, contentColumnRef, hasCumulativeOffsets, additionalLineNumber, additionalPrefix) {
+    const lineNumberTemplate = `${prefix}-${lineNumber}`;
+    const additionalLineNumberTemplate = `${additionalPrefix}-${additionalLineNumber}`;
+    const added = type === DiffType.ADDED;
+    const removed = type === DiffType.REMOVED;
+    const changed = type === DiffType.CHANGED;
+    let content;
+    const hasWordDiff = Array.isArray(value);
+    if (hasWordDiff) {
+        content = renderWordDiff(value, styles, compareMethod, renderContent);
+    }
+    else if (renderContent) {
+        content = renderContent(value);
+    }
+    else {
+        content = value;
+    }
+    let ElementType = "div";
+    if (added && !hasWordDiff) {
+        ElementType = "ins";
+    }
+    else if (removed && !hasWordDiff) {
+        ElementType = "del";
+    }
+    const handleLineNumberClick = lineNumber && onLineNumberClick
+        ? (e) => onLineNumberClick(lineNumberTemplate, e)
+        : undefined;
+    const handleAdditionalLineNumberClick = additionalLineNumber && onLineNumberClick
+        ? (e) => onLineNumberClick(additionalLineNumberTemplate, e)
+        : undefined;
+    // Determine if this content cell should get the measurement ref
+    const shouldSetRef = prefix === LineNumberPrefix.LEFT && !hasCumulativeOffsets;
+    return (_jsxs(_Fragment, { children: [!hideLineNumbers && (_jsx("td", { onClick: handleLineNumberClick, className: cn(styles.gutter, {
+                    [styles.emptyGutter]: !lineNumber,
+                    [styles.diffAdded]: added,
+                    [styles.diffRemoved]: removed,
+                    [styles.diffChanged]: changed,
+                    [styles.highlightedGutter]: highlightLine,
+                }), children: _jsx("pre", { className: styles.lineNumber, children: lineNumber }) })), !splitView && !hideLineNumbers && (_jsx("td", { onClick: handleAdditionalLineNumberClick, className: cn(styles.gutter, {
+                    [styles.emptyGutter]: !additionalLineNumber,
+                    [styles.diffAdded]: added,
+                    [styles.diffRemoved]: removed,
+                    [styles.diffChanged]: changed,
+                    [styles.highlightedGutter]: highlightLine,
+                }), children: _jsx("pre", { className: styles.lineNumber, children: additionalLineNumber }) })), renderGutter
+                ? renderGutter({
+                    lineNumber,
+                    type,
+                    prefix,
+                    value,
+                    additionalLineNumber,
+                    additionalPrefix,
+                    styles,
+                })
+                : null, _jsx("td", { className: cn(styles.marker, {
+                    [styles.emptyLine]: !content,
+                    [styles.diffAdded]: added,
+                    [styles.diffRemoved]: removed,
+                    [styles.diffChanged]: changed,
+                    [styles.highlightedLine]: highlightLine,
+                }), children: _jsxs("pre", { children: [added && "+", removed && "-"] }) }), _jsx("td", { ref: shouldSetRef ? contentColumnRef : undefined, className: cn(styles.content, {
+                    [styles.emptyLine]: !content,
+                    [styles.diffAdded]: added,
+                    [styles.diffRemoved]: removed,
+                    [styles.diffChanged]: changed,
+                    [styles.highlightedLine]: highlightLine,
+                    left: prefix === LineNumberPrefix.LEFT,
+                    right: prefix === LineNumberPrefix.RIGHT,
+                }), onMouseDown: () => {
+                    const elements = document.getElementsByClassName(prefix === LineNumberPrefix.LEFT ? "right" : "left");
+                    for (let i = 0; i < elements.length; i++) {
+                        const element = elements.item(i);
+                        element.classList.add(styles.noSelect);
+                    }
+                }, title: added && !hasWordDiff
+                    ? "Added line"
+                    : removed && !hasWordDiff
+                        ? "Removed line"
+                        : undefined, children: _jsx(ElementType, { className: styles.contentText, children: content }) })] }));
+}
+/**
+ * Memoized component that renders a single diff row (split or inline view).
+ * Only re-renders when the line data, highlight state, or display config changes.
+ * Function props (callbacks, renderers) are excluded from the equality check.
+ */
+export const DiffRow = React.memo(function DiffRow(props) {
+    const { leftLineNumber, leftType, leftValue, rightLineNumber, rightType, rightValue, highlightLeft, highlightRight, splitView, hideLineNumbers, styles, onLineNumberClick, renderContent, renderGutter, compareMethod, contentColumnRef, hasCumulativeOffsets, index, } = props;
+    if (splitView) {
+        // Split view: one <tr> with left and right cells
+        return (_jsxs("tr", { className: styles.line, children: [renderLine(leftLineNumber, leftType, LineNumberPrefix.LEFT, leftValue, highlightLeft, styles, splitView, hideLineNumbers, compareMethod, onLineNumberClick, renderContent, renderGutter, contentColumnRef, hasCumulativeOffsets), renderLine(rightLineNumber, rightType, LineNumberPrefix.RIGHT, rightValue, highlightRight, styles, splitView, hideLineNumbers, compareMethod, onLineNumberClick, renderContent, renderGutter)] }, index));
+    }
+    // Inline view
+    if (leftType === DiffType.REMOVED && rightType === DiffType.ADDED) {
+        // Changed line: render two <tr> rows (removed then added)
+        return (_jsxs(React.Fragment, { children: [_jsx("tr", { className: styles.line, children: renderLine(leftLineNumber, leftType, LineNumberPrefix.LEFT, leftValue, highlightLeft, styles, splitView, hideLineNumbers, compareMethod, onLineNumberClick, renderContent, renderGutter, contentColumnRef, hasCumulativeOffsets, null) }), _jsx("tr", { className: styles.line, children: renderLine(null, rightType, LineNumberPrefix.RIGHT, rightValue, highlightRight, styles, splitView, hideLineNumbers, compareMethod, onLineNumberClick, renderContent, renderGutter, undefined, undefined, rightLineNumber, LineNumberPrefix.RIGHT) })] }, index));
+    }
+    let content;
+    if (leftType === DiffType.REMOVED) {
+        content = renderLine(leftLineNumber, leftType, LineNumberPrefix.LEFT, leftValue, highlightLeft, styles, splitView, hideLineNumbers, compareMethod, onLineNumberClick, renderContent, renderGutter, contentColumnRef, hasCumulativeOffsets, null);
+    }
+    if (leftType === DiffType.DEFAULT) {
+        content = renderLine(leftLineNumber, leftType, LineNumberPrefix.LEFT, leftValue, highlightLeft, styles, splitView, hideLineNumbers, compareMethod, onLineNumberClick, renderContent, renderGutter, contentColumnRef, hasCumulativeOffsets, rightLineNumber, LineNumberPrefix.RIGHT);
+    }
+    if (rightType === DiffType.ADDED) {
+        content = renderLine(null, rightType, LineNumberPrefix.RIGHT, rightValue, highlightRight, styles, splitView, hideLineNumbers, compareMethod, onLineNumberClick, renderContent, renderGutter, undefined, undefined, rightLineNumber);
+    }
+    return (_jsx("tr", { className: styles.line, children: content }, index));
+}, diffRowPropsAreEqual);

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,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Expand() {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", children: [_jsx("title", { children: "expand" }), _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" })] }));
+}

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,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Fold() {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", children: [_jsx("title", { children: "fold" }), _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" })] }));
+}

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

@@ -0,0 +1,236 @@
+import * as React from "react";
+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 { LineNumberPrefix } from "./line-number-prefix.js";
+import { type CommentRenderData } from "./comment-row.js";
+export { LineNumberPrefix } from "./line-number-prefix.js";
+export interface InfiniteLoadingProps {
+    pageSize: number;
+    containerHeight: string;
+}
+export interface ComputedDiffResult {
+    lineInformation: LineInformation[];
+    lineBlocks: Record<number, number>;
+    blocks: Block[];
+}
+export interface ReactDiffViewerProps {
+    oldValue: string | Record<string, unknown>;
+    newValue: string | Record<string, unknown>;
+    splitView?: boolean;
+    linesOffset?: number;
+    disableWordDiff?: boolean;
+    compareMethod?: DiffMethod | ((oldStr: string, newStr: string) => Change[]);
+    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;
+    /**
+     * to enable infiniteLoading for better performance
+     */
+    infiniteLoading?: InfiniteLoadingProps;
+    /**
+     * to display loading element when diff is being computed
+     */
+    loadingElement?: () => ReactElement;
+    /**
+     * Hide the summary bar (expand/collapse button, change count, filename)
+     */
+    hideSummary?: boolean;
+    /**
+     * Show debug overlay with virtualization info (for development)
+     */
+    showDebugInfo?: boolean;
+    /**
+     * Array of line IDs that have comments to display.
+     * Uses the same format as highlightLines: "L-{num}" or "R-{num}".
+     * The library renders a comment <tr> below each line in this set,
+     * invoking renderComment to get the content.
+     */
+    commentLineIds?: string[];
+    /**
+     * Render prop called for each line ID in commentLineIds.
+     * Returns the consumer's comment UI to display in the comment row.
+     * The returned ReactElement is placed inside a <td> spanning the full table width.
+     */
+    renderComment?: (data: CommentRenderData) => ReactElement | null;
+    /**
+     * Estimated height (px) for comment rows before they are measured.
+     * Affects virtualization scroll accuracy. Defaults to 100.
+     */
+    estimatedCommentRowHeight?: number;
+}
+export interface ReactDiffViewerState {
+    expandedBlocks?: number[];
+    noSelect?: "left" | "right";
+    scrollableContainerRef: RefObject<HTMLDivElement>;
+    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;
+    private commentRowObserver;
+    private commentRowHeights;
+    private commentRowElements;
+    private commentRowRefCache;
+    private pendingOffsetRecalc;
+    private static readonly ESTIMATED_COMMENT_ROW_HEIGHT;
+    /**
+     * Shallow comparison for string arrays — avoids unnecessary work when
+     * the consumer creates a new array reference with identical contents.
+     */
+    private static shallowArrayEqual;
+    static defaultProps: ReactDiffViewerProps;
+    constructor(props: ReactDiffViewerProps);
+    /**
+     * Memoized conversion of commentLineIds array to Set for O(1) lookups.
+     */
+    private getCommentLineIdsSet;
+    /**
+     * Memoized conversion of highlightLines array to Set for O(1) lookups.
+     */
+    private getHighlightLinesSet;
+    /**
+     * Creates a ref callback for a CommentRow's <tr> element.
+     * When mounted, observes it for height changes via ResizeObserver.
+     * Callbacks are cached per lineId to avoid creating new closures on every render.
+     */
+    private getCommentRowRef;
+    /**
+     * Debounced offset recalculation — batches multiple ResizeObserver callbacks
+     * into a single requestAnimationFrame.
+     */
+    private scheduleOffsetRecalc;
+    /**
+     * Initializes the ResizeObserver for measuring comment row heights.
+     */
+    private initCommentRowObserver;
+    /**
+     * Computes word diff on-demand for a line, with caching.
+     * This is used when word diff was deferred during initial computation.
+     */
+    private getWordDiffValues;
+    /**
+     * 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;
+    /**
+     * 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.
+     *
+     * @param styles User supplied style overrides.
+     */
+    private computeStyles;
+    /**
+     *
+     * Generates a unique cache key based on the current props used in diff computation.
+     *
+     * This key is used to memoize results and avoid recomputation for the same inputs.
+     * @returns A stringified JSON key representing the current diff settings and input values.
+     *
+     */
+    private getMemoisedKey;
+    /**
+     * Computes and memoizes the diff result between `oldValue` and `newValue`.
+     *
+     * If a memoized result exists for the current input configuration, it uses that.
+     * Otherwise, it runs the diff logic in a Web Worker to avoid blocking the UI.
+     * It also computes hidden line blocks for collapsing unchanged sections,
+     * and stores the result in the local component state.
+     */
+    private memoisedCompute;
+    private static readonly ESTIMATED_ROW_HEIGHT;
+    /**
+     * Handles scroll events on the scrollable container.
+     *
+     * Updates the visible start row for virtualization.
+     */
+    private onScroll;
+    /**
+     * Generates the entire diff view with virtualization support.
+     */
+    private renderDiff;
+    componentDidUpdate(prevProps: ReactDiffViewerProps): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render: () => ReactElement;
+}
+export default DiffViewer;
+export { DiffMethod };
+export { default as computeStyles } from "./styles.js";
+export type { ReactDiffViewerStylesOverride, ReactDiffViewerStyles };
+export type { CommentRenderData } from "./comment-row.js";