react-diff-viewer-continued 4.0.5 → 4.1.0

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

@@ -22,6 +22,8 @@ export interface ReactDiffViewerStyles {
     emptyGutter?: string;
     emptyLine?: string;
     codeFold?: string;
+    stickyHeader?: string;
+    columnHeaders?: string;
     titleBlock?: string;
     content?: string;
     column?: string;

package/lib/cjs/src/styles.js

@@ -1,4 +1,3 @@
-"use strict";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -10,12 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const create_instance_1 = __importDefault(require("@emotion/css/create-instance"));
-exports.default = (styleOverride, useDarkTheme = false, nonce = "") => {
+import createEmotion from "@emotion/css/create-instance";
+export default (styleOverride, useDarkTheme = false, nonce = "") => {
     const { variables: overrideVariables = {} } = styleOverride, styles = __rest(styleOverride, ["variables"]);
     const themeVariables = {
         light: Object.assign({
@@ -48,15 +43,15 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = "") => {
         dark: Object.assign({
             diffViewerBackground: "#2e303c",
             diffViewerColor: "#FFF",
-            addedBackground: "#044B53",
+            addedBackground: "#2ea04326",
             addedColor: "white",
-            removedBackground: "#632F34",
+            removedBackground: "#f851491a",
             removedColor: "white",
             changedBackground: "#3e302c",
-            wordAddedBackground: "#055d67",
-            wordRemovedBackground: "#7d383f",
-            addedGutterBackground: "#034148",
-            removedGutterBackground: "#632b30",
+            wordAddedBackground: "#2ea04366",
+            wordRemovedBackground: "#f8514966",
+            addedGutterBackground: "#3fb9504d",
+            removedGutterBackground: "#f851494d",
             gutterBackground: "#2c2f3a",
             gutterBackgroundDark: "#262933",
             highlightBackground: "#2a3967",
@@ -64,17 +59,17 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = "") => {
             codeFoldGutterBackground: "#262831",
             codeFoldBackground: "#262831",
             emptyLineBackground: "#363946",
-            gutterColor: "#666c87",
-            addedGutterColor: "#8c8c8c",
-            removedGutterColor: "#8c8c8c",
-            codeFoldContentColor: "#656a8b",
+            gutterColor: "#f0f6fc",
+            addedGutterColor: "#f0f6fc",
+            removedGutterColor: "#f0f6fc",
+            codeFoldContentColor: "#9198a1",
             diffViewerTitleBackground: "#2f323e",
-            diffViewerTitleColor: "#757a9b",
+            diffViewerTitleColor: "#f0f6fc",
             diffViewerTitleBorderColor: "#353846",
         }, (overrideVariables.dark || {})),
     };
     const variables = useDarkTheme ? themeVariables.dark : themeVariables.light;
-    const { css, cx } = (0, create_instance_1.default)({ key: "react-diff", nonce });
+    const { css, cx } = createEmotion({ key: "react-diff", nonce });
     const content = css({
         width: "auto",
         label: "content",
@@ -82,6 +77,12 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = "") => {
     const splitView = css({
         label: "split-view",
     });
+    const stickyHeader = css({
+        position: "sticky",
+        top: 0,
+        zIndex: 2,
+        label: "sticky-header",
+    });
     const summary = css({
         background: variables.diffViewerTitleBackground,
         color: variables.diffViewerTitleColor,
@@ -90,13 +91,19 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = "") => {
         alignItems: "center",
         gap: "0.5em",
         fontFamily: "monospace",
+        fontSize: 12,
         fill: variables.diffViewerTitleColor,
     });
+    const columnHeaders = css({
+        display: "flex",
+        label: "column-headers",
+    });
     const diffContainer = css({
         width: "100%",
         minWidth: "1000px",
         overflowX: "auto",
         tableLayout: "fixed",
+        fontSize: 12,
         background: variables.diffViewerBackground,
         pre: {
             margin: 0,
@@ -147,8 +154,13 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = "") => {
         overflow: "hidden",
         width: "50%",
         borderBottom: `1px solid ${variables.diffViewerTitleBorderColor}`,
+        boxSizing: "border-box",
+        fontSize: 12,
         label: "title-block",
-        ":last-child": {
+        ":only-child": {
+            width: "100%",
+        },
+        ":last-child:not(:only-child)": {
             borderLeft: `1px solid ${variables.diffViewerTitleBorderColor}`,
         },
         [`.${contentText}`]: {
@@ -189,20 +201,16 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = "") => {
         label: "diff-changed",
     });
     const wordDiff = css({
-        padding: 2,
-        display: "inline-flex",
-        borderRadius: 4,
-        wordBreak: "break-all",
+        display: "inline",
+        textDecoration: "none",
         label: "word-diff",
     });
     const wordAdded = css({
         background: variables.wordAddedBackground,
-        textDecoration: "none",
         label: "word-added",
     });
     const wordRemoved = css({
         background: variables.wordRemovedBackground,
-        textDecoration: "none",
         label: "word-removed",
     });
     const codeFoldGutter = css({
@@ -210,6 +218,8 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = "") => {
         label: "code-fold-gutter",
         minWidth: "50px",
         width: "50px",
+        textAlign: "center",
+        fill: variables.codeFoldContentColor,
     });
     const codeFoldContentContainer = css({
         padding: "",
@@ -220,6 +230,7 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = "") => {
         display: "inline",
         margin: 0,
         border: "none",
+        fill: variables.codeFoldContentColor,
         label: "code-fold-expand-button",
     });
     const codeFoldContent = css({
@@ -244,12 +255,20 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = "") => {
     });
     const codeFold = css({
         backgroundColor: variables.codeFoldBackground,
-        height: 40,
-        fontSize: 14,
+        fontSize: 12,
         alignItems: "center",
         userSelect: "none",
         fontWeight: 700,
+        cursor: "pointer",
         label: "code-fold",
+        "&:hover": {
+            color: variables.diffViewerColor,
+            fill: variables.diffViewerColor,
+            "& *": {
+                color: variables.diffViewerColor,
+                fill: variables.diffViewerColor,
+            },
+        },
         a: {
             textDecoration: "underline !important",
             cursor: "pointer",
@@ -296,7 +315,8 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = "") => {
         padding: "0 10px",
         whiteSpace: "nowrap",
         label: "gutter",
-        textAlign: "right",
+        textAlign: "center",
+        color: variables.gutterColor,
         background: variables.gutterBackground,
         "&:hover": {
             cursor: "pointer",
@@ -307,6 +327,8 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = "") => {
         },
         pre: {
             opacity: 0.5,
+            textAlign: "center",
+            width: "100%",
         },
         [`&.${diffAdded}`]: {
             background: variables.addedGutterBackground,
@@ -365,6 +387,8 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = "") => {
         content,
         column,
         codeFoldContent,
+        stickyHeader,
+        columnHeaders,
         titleBlock,
         allExpandButton,
     };

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

@@ -1,4 +1,5 @@
 import * as diff from "diff";
+import * as yaml from "js-yaml";
 const jsDiff = diff;
 export var DiffType;
 (function (DiffType) {
@@ -7,6 +8,249 @@ export var DiffType;
     DiffType[DiffType["REMOVED"] = 2] = "REMOVED";
     DiffType[DiffType["CHANGED"] = 3] = "CHANGED";
 })(DiffType || (DiffType = {}));
+/**
+ * Stringify a value using the specified format.
+ */
+function stringify(val, format) {
+    if (format === 'yaml') {
+        return yaml.dump(val, { indent: 2, lineWidth: -1, noRefs: true }).trimEnd();
+    }
+    return JSON.stringify(val, null, 2);
+}
+/**
+ * Performs a fast structural diff on objects.
+ *
+ * Strategy: Use structural comparison to identify which subtrees changed,
+ * then use diffLines only on those changed subtrees. This avoids running
+ * the expensive O(ND) Myers diff on the entire content, while still producing
+ * proper line-by-line diffs for the parts that changed.
+ */
+function structuralDiff(oldObj, newObj, format = 'json') {
+    const oldStr = stringify(oldObj, format);
+    const newStr = stringify(newObj, format);
+    // Fast path: identical objects
+    if (oldStr === newStr) {
+        return [{ value: oldStr }];
+    }
+    // Use recursive structural diff that applies diffLines to changed subtrees
+    return diffStructurally(oldObj, newObj, 0, format);
+}
+/**
+ * JSON diff that preserves key order from each object.
+ * Uses structural comparison for performance.
+ */
+function structuralJsonDiff(oldObj, newObj) {
+    return structuralDiff(oldObj, newObj, 'json');
+}
+/**
+ * Optimized diff for JSON strings that preserves original formatting and key order.
+ * Uses parsing only to check for structural equality (fast path),
+ * then falls back to diffLines on original strings to preserve formatting.
+ */
+function structuralJsonStringDiff(oldJson, newJson) {
+    try {
+        // Parse JSON to check for structural equality
+        const oldObj = JSON.parse(oldJson);
+        const newObj = JSON.parse(newJson);
+        // Fast path: check if structurally identical by comparing serialized forms
+        const oldNormalized = JSON.stringify(oldObj);
+        const newNormalized = JSON.stringify(newObj);
+        if (oldNormalized === newNormalized) {
+            // Structurally identical - return original string to preserve formatting
+            return [{ value: oldJson }];
+        }
+        // Files differ - use diffLines on ORIGINAL strings to preserve key order and formatting
+        return diff.diffLines(oldJson, newJson, {
+            newlineIsToken: false,
+        });
+    }
+    catch (e) {
+        // If JSON parsing fails, fall back to line diff
+        return diff.diffLines(oldJson, newJson, {
+            newlineIsToken: false,
+        });
+    }
+}
+/**
+ * Optimized diff for YAML that preserves original line numbers.
+ * Uses parsing only to check for structural equality (fast path),
+ * then falls back to diffLines on original strings to preserve line numbers.
+ */
+function structuralYamlDiff(oldYaml, newYaml) {
+    // Parse YAML to check for structural equality
+    const oldObj = yaml.load(oldYaml);
+    const newObj = yaml.load(newYaml);
+    // Fast path: check if structurally identical by comparing serialized forms
+    const oldNormalized = yaml.dump(oldObj, { indent: 2, lineWidth: -1, noRefs: true });
+    const newNormalized = yaml.dump(newObj, { indent: 2, lineWidth: -1, noRefs: true });
+    if (oldNormalized === newNormalized) {
+        // Structurally identical - return original string to preserve formatting
+        return [{ value: oldYaml }];
+    }
+    // Files differ - use diffLines on ORIGINAL strings to preserve line numbers
+    return diff.diffLines(oldYaml, newYaml, {
+        newlineIsToken: false,
+    });
+}
+/**
+ * Recursively diff two values structurally.
+ * For unchanged parts, output as-is.
+ * For changed parts, use diffLines to get proper line-by-line diff.
+ */
+function diffStructurally(oldVal, newVal, indent, format = 'json') {
+    const oldStr = stringify(oldVal, format);
+    const newStr = stringify(newVal, format);
+    // Fast path: identical
+    if (oldStr === newStr) {
+        return [{ value: reindent(oldStr, indent, format) }];
+    }
+    // Both are objects - compare key by key
+    if (typeof oldVal === 'object' && oldVal !== null &&
+        typeof newVal === 'object' && newVal !== null &&
+        !Array.isArray(oldVal) && !Array.isArray(newVal)) {
+        return diffObjects(oldVal, newVal, indent, format);
+    }
+    // Both are arrays - compare element by element
+    if (Array.isArray(oldVal) && Array.isArray(newVal)) {
+        return diffArrays(oldVal, newVal, indent, format);
+    }
+    // Different types or primitives - use diffLines for proper diff
+    return diffWithLines(oldStr, newStr, indent, format);
+}
+/**
+ * Diff two objects key by key.
+ * Iterates in NEW key order to preserve the new file's structure,
+ * then appends any old-only keys as removed.
+ */
+function diffObjects(oldObj, newObj, indent, format = 'json') {
+    const changes = [];
+    const indentStr = '  '.repeat(indent);
+    const innerIndent = '  '.repeat(indent + 1);
+    const oldKeySet = new Set(Object.keys(oldObj));
+    const newKeys = Object.keys(newObj);
+    // Build ordered key list: new keys in their order, then old-only keys
+    const oldOnlyKeys = [...oldKeySet].filter(k => !(k in newObj));
+    const allKeys = [...newKeys, ...oldOnlyKeys];
+    changes.push({ value: '{\n' });
+    for (let i = 0; i < allKeys.length; i++) {
+        const key = allKeys[i];
+        const isLast = i === allKeys.length - 1;
+        const comma = isLast ? '' : ',';
+        const inOld = key in oldObj;
+        const inNew = key in newObj;
+        if (inOld && inNew) {
+            // Key in both - recursively diff values
+            const oldValStr = stringify(oldObj[key], format);
+            const newValStr = stringify(newObj[key], format);
+            if (oldValStr === newValStr) {
+                // Values identical
+                const valueStr = reindent(oldValStr, indent + 1);
+                changes.push({ value: innerIndent + JSON.stringify(key) + ': ' + valueStr + comma + '\n' });
+            }
+            else {
+                // Values differ - recursively diff them
+                const keyPrefix = innerIndent + JSON.stringify(key) + ': ';
+                const valueDiff = diffStructurally(oldObj[key], newObj[key], indent + 1, format);
+                // Prepend key to first change so they're on the same line
+                if (valueDiff.length > 0) {
+                    valueDiff[0].value = keyPrefix + valueDiff[0].value;
+                }
+                // Add comma to last change if needed
+                if (comma && valueDiff.length > 0) {
+                    const last = valueDiff[valueDiff.length - 1];
+                    last.value = last.value.replace(/\n$/, comma + '\n');
+                }
+                changes.push(...valueDiff);
+            }
+        }
+        else if (inOld) {
+            // Key only in old - removed
+            const valueStr = reindent(stringify(oldObj[key], format), indent + 1);
+            changes.push({ removed: true, value: innerIndent + JSON.stringify(key) + ': ' + valueStr + comma + '\n' });
+        }
+        else {
+            // Key only in new - added
+            const valueStr = reindent(stringify(newObj[key], format), indent + 1);
+            changes.push({ added: true, value: innerIndent + JSON.stringify(key) + ': ' + valueStr + comma + '\n' });
+        }
+    }
+    changes.push({ value: indentStr + '}\n' });
+    return changes;
+}
+/**
+ * Diff two arrays element by element.
+ */
+function diffArrays(oldArr, newArr, indent, format = 'json') {
+    const changes = [];
+    const indentStr = '  '.repeat(indent);
+    const innerIndent = '  '.repeat(indent + 1);
+    changes.push({ value: '[\n' });
+    const maxLen = Math.max(oldArr.length, newArr.length);
+    for (let i = 0; i < maxLen; i++) {
+        const isLast = i === maxLen - 1;
+        const comma = isLast ? '' : ',';
+        if (i >= oldArr.length) {
+            // Element only in new - added
+            const valueStr = reindent(stringify(newArr[i], format), indent + 1);
+            changes.push({ added: true, value: innerIndent + valueStr + comma + '\n' });
+        }
+        else if (i >= newArr.length) {
+            // Element only in old - removed
+            const valueStr = reindent(stringify(oldArr[i], format), indent + 1);
+            changes.push({ removed: true, value: innerIndent + valueStr + comma + '\n' });
+        }
+        else {
+            // Element in both - recursively diff
+            const oldElemStr = stringify(oldArr[i], format);
+            const newElemStr = stringify(newArr[i], format);
+            if (oldElemStr === newElemStr) {
+                // Elements identical
+                const valueStr = reindent(oldElemStr, indent + 1);
+                changes.push({ value: innerIndent + valueStr + comma + '\n' });
+            }
+            else {
+                // Elements differ - recursively diff them
+                const elemDiff = diffStructurally(oldArr[i], newArr[i], indent + 1, format);
+                // Prepend indent to first change so they're on the same line
+                if (elemDiff.length > 0) {
+                    elemDiff[0].value = innerIndent + elemDiff[0].value;
+                }
+                // Add comma to last change if needed
+                if (comma && elemDiff.length > 0) {
+                    const last = elemDiff[elemDiff.length - 1];
+                    last.value = last.value.replace(/\n$/, comma + '\n');
+                }
+                changes.push(...elemDiff);
+            }
+        }
+    }
+    changes.push({ value: indentStr + ']\n' });
+    return changes;
+}
+/**
+ * Use diffLines for proper line-by-line diff of two strings.
+ * This is the fallback for when structural comparison finds different values.
+ */
+function diffWithLines(oldStr, newStr, indent, _format = 'json') {
+    const oldIndented = reindent(oldStr, indent);
+    const newIndented = reindent(newStr, indent);
+    // Use diffLines for proper line-level comparison
+    const lineDiff = diff.diffLines(oldIndented, newIndented);
+    return lineDiff.map(change => ({
+        value: change.value,
+        added: change.added,
+        removed: change.removed
+    }));
+}
+/**
+ * Re-indent a string to the specified level.
+ */
+function reindent(str, indent, _format = 'json') {
+    if (indent === 0)
+        return str;
+    const indentStr = '  '.repeat(indent);
+    return str.split('\n').map((line, i) => i === 0 ? line : indentStr + line).join('\n');
+}
 // See https://github.com/kpdecker/jsdiff/tree/v4.0.1#api for more info on the below JsDiff methods
 export var DiffMethod;
 (function (DiffMethod) {
@@ -18,6 +262,7 @@ export var DiffMethod;
     DiffMethod["SENTENCES"] = "diffSentences";
     DiffMethod["CSS"] = "diffCss";
     DiffMethod["JSON"] = "diffJson";
+    DiffMethod["YAML"] = "diffYaml";
 })(DiffMethod || (DiffMethod = {}));
 /**
  * Splits diff text by new line and computes final list of diff lines based on
@@ -83,18 +328,37 @@ const computeDiff = (oldValue, newValue, compareMethod = DiffMethod.CHARS) => {
  * @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 = []) => {
+const computeLineInformation = (oldString, newString, disableWordDiff = false, lineCompareMethod = DiffMethod.CHARS, linesOffset = 0, showLines = [], deferWordDiff = false) => {
     let diffArray = [];
-    // Use diffLines for strings, and diffJson for objects...
+    // Handle different input types and compare methods
     if (typeof oldString === "string" && typeof newString === "string") {
-        diffArray = diff.diffLines(oldString, newString, {
-            newlineIsToken: false,
-            ignoreWhitespace: false,
-            ignoreCase: false,
-        });
+        // Check if we should use structural diff for JSON or YAML
+        if (lineCompareMethod === DiffMethod.JSON) {
+            // Use JSON structural diff - preserves original formatting and key order
+            diffArray = structuralJsonStringDiff(oldString, newString);
+        }
+        else if (lineCompareMethod === DiffMethod.YAML) {
+            try {
+                // Use YAML structural diff - parses, normalizes, and outputs as YAML
+                diffArray = structuralYamlDiff(oldString, newString);
+            }
+            catch (e) {
+                // If YAML parsing fails, fall back to line diff
+                diffArray = diff.diffLines(oldString, newString, {
+                    newlineIsToken: false,
+                });
+            }
+        }
+        else {
+            diffArray = diff.diffLines(oldString, newString, {
+                newlineIsToken: false,
+            });
+        }
     }
     else {
-        diffArray = diff.diffJson(oldString, newString);
+        // Use our fast structural JSON diff instead of diff.diffJson
+        // This is O(n) for structure comparison vs O(ND) for Myers on large strings
+        diffArray = structuralJsonDiff(oldString, newString);
     }
     let rightLineNumber = linesOffset;
     let leftLineNumber = linesOffset;
@@ -145,7 +409,18 @@ const computeLineInformation = (oldString, newString, disableWordDiff = false, l
                                 right.type = type;
                                 // Do char level diff and assign the corresponding values to the
                                 // left and right diff information object.
-                                if (disableWordDiff) {
+                                // Skip word diff for very long lines (>500 chars) to avoid performance issues
+                                const MAX_LINE_LENGTH_FOR_WORD_DIFF = 500;
+                                const lineIsTooLong = line.length > MAX_LINE_LENGTH_FOR_WORD_DIFF ||
+                                    rightValue.length > MAX_LINE_LENGTH_FOR_WORD_DIFF;
+                                if (disableWordDiff || lineIsTooLong) {
+                                    right.value = rightValue;
+                                }
+                                else if (deferWordDiff) {
+                                    // Store raw values for deferred word diff computation
+                                    left.rawValue = line;
+                                    left.value = line;
+                                    right.rawValue = rightValue;
                                     right.value = rightValue;
                                 }
                                 else {
@@ -202,4 +477,34 @@ const computeLineInformation = (oldString, newString, disableWordDiff = false, l
         diffLines,
     };
 };
-export { computeLineInformation };
+/**
+ * Computes line diff information using a Web Worker to avoid blocking the UI thread.
+ * This offloads the expensive `computeLineInformation` logic to a separate thread.
+ *
+ * @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
+ * @returns Promise<ComputedLineInformation> - Resolves with line-by-line diff data from the worker.
+ */
+const computeLineInformationWorker = (oldString, newString, disableWordDiff = false, lineCompareMethod = DiffMethod.CHARS, linesOffset = 0, showLines = [], deferWordDiff = false) => {
+    // Fall back to synchronous computation if Worker is not available (e.g., in Node.js/test environments)
+    if (typeof Worker === 'undefined') {
+        return Promise.resolve(computeLineInformation(oldString, newString, disableWordDiff, lineCompareMethod, linesOffset, showLines, deferWordDiff));
+    }
+    return new Promise((resolve, reject) => {
+        const worker = new Worker(new URL('./computeWorker.ts', import.meta.url), { type: 'module' });
+        worker.onmessage = (e) => {
+            resolve(e.data);
+            worker.terminate();
+        };
+        worker.onerror = (err) => {
+            reject(err);
+            worker.terminate();
+        };
+        worker.postMessage({ oldString, newString, disableWordDiff, lineCompareMethod, linesOffset, showLines, deferWordDiff });
+    });
+};
+export { computeLineInformation, computeLineInformationWorker, computeDiff };

package/lib/esm/src/computeWorker.js

@@ -0,0 +1,10 @@
+import { computeLineInformation } from "./compute-lines";
+/**
+ * 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.
+ */
+self.onmessage = (e) => {
+    const { oldString, newString, disableWordDiff, lineCompareMethod, linesOffset, showLines, deferWordDiff } = e.data;
+    const result = computeLineInformation(oldString, newString, disableWordDiff, lineCompareMethod, linesOffset, showLines, deferWordDiff);
+    self.postMessage(result);
+};