react-diff-viewer-continued 4.0.6 → 4.1.1

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

@@ -1,50 +1,258 @@
-"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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.computeLineInformation = exports.DiffMethod = exports.DiffType = void 0;
-const diff = __importStar(require("diff"));
+import * as diff from "diff";
+import * as yaml from "js-yaml";
 const jsDiff = diff;
-var DiffType;
+export 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 = {}));
+})(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
-var DiffMethod;
+export var DiffMethod;
 (function (DiffMethod) {
     DiffMethod["CHARS"] = "diffChars";
     DiffMethod["WORDS"] = "diffWords";
@@ -54,7 +262,8 @@ var DiffMethod;
     DiffMethod["SENTENCES"] = "diffSentences";
     DiffMethod["CSS"] = "diffCss";
     DiffMethod["JSON"] = "diffJson";
-})(DiffMethod || (exports.DiffMethod = DiffMethod = {}));
+    DiffMethod["YAML"] = "diffYaml";
+})(DiffMethod || (DiffMethod = {}));
 /**
  * Splits diff text by new line and computes final list of diff lines based on
  * conditions.
@@ -119,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;
@@ -181,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 {
@@ -238,4 +477,44 @@ const computeLineInformation = (oldString, newString, disableWordDiff = false, l
         diffLines,
     };
 };
-exports.computeLineInformation = 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) => {
+    const fallback = () => computeLineInformation(oldString, newString, disableWordDiff, lineCompareMethod, linesOffset, showLines, deferWordDiff);
+    // Fall back to synchronous computation if Worker is not available (e.g., in Node.js/test environments)
+    if (typeof Worker === 'undefined') {
+        return Promise.resolve(fallback());
+    }
+    return new Promise((resolve) => {
+        let worker;
+        try {
+            worker = new Worker(new URL('./computeWorker.js', import.meta.url), { type: 'module' });
+        }
+        catch (_a) {
+            // Worker instantiation failed - fall back to synchronous computation
+            resolve(fallback());
+            return;
+        }
+        worker.onmessage = (e) => {
+            resolve(e.data);
+            worker.terminate();
+        };
+        worker.onerror = () => {
+            // Worker error - fall back to synchronous computation
+            worker.terminate();
+            resolve(fallback());
+        };
+        worker.postMessage({ oldString, newString, disableWordDiff, lineCompareMethod, linesOffset, showLines, deferWordDiff });
+    });
+};
+export { computeLineInformation, computeLineInformationWorker, computeDiff };

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

@@ -0,0 +1 @@
+export {};

package/lib/cjs/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);
+};

package/lib/cjs/src/expand.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Expand = Expand;
-const jsx_runtime_1 = require("react/jsx-runtime");
-function Expand() {
-    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", children: [(0, jsx_runtime_1.jsx)("title", { children: "expand" }), (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" })] }));
+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.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Fold = Fold;
-const jsx_runtime_1 = require("react/jsx-runtime");
-function Fold() {
-    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", children: [(0, jsx_runtime_1.jsx)("title", { children: "fold" }), (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" })] }));
+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

@@ -1,12 +1,22 @@
 import * as React from "react";
-import type { ReactElement } 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";
 export declare enum LineNumberPrefix {
     LEFT = "L",
     RIGHT = "R"
 }
+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>;
@@ -43,15 +53,48 @@ export interface ReactDiffViewerProps {
     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;
 }
 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;
     static defaultProps: ReactDiffViewerProps;
     constructor(props: ReactDiffViewerProps);
+    /**
+     * 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.
@@ -62,6 +105,38 @@ declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiff
      * 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.
@@ -76,6 +151,12 @@ declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiff
      * @param id Line id of a line.
      */
     private onLineNumberClickProxy;
+    /**
+     * Checks if the current compare method should show word-level highlighting.
+     * Character, word-level, JSON, and YAML diffs benefit from highlighting individual changes.
+     * JSON/YAML use CHARS internally for word-level diff, so they should be highlighted.
+     */
+    private shouldHighlightWordDiff;
     /**
      * Maps over the word diff and constructs the required React elements to show word diff.
      *
@@ -132,9 +213,37 @@ declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiff
      */
     private renderSkippedLineIndicator;
     /**
-     * Generates the entire diff view.
+     *
+     * 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;