@git-diff-view/react 0.0.25 → 0.0.26

package/dist/css/diff-view-pure.css

@@ -255,7 +255,7 @@
 }
 .diff-tailwindcss-wrapper .\!text-red-500 {
   --tw-text-opacity: 1 !important;
-  color: rgb(239 68 68 / var(--tw-text-opacity)) !important;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1)) !important;
 }
 .diff-tailwindcss-wrapper .opacity-\[0\.5\] {
   opacity: 0.5;

package/dist/css/diff-view.css

@@ -105,7 +105,7 @@
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }/*
-! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -761,7 +761,7 @@ video {
 }
 .diff-tailwindcss-wrapper .\!text-red-500 {
   --tw-text-opacity: 1 !important;
-  color: rgb(239 68 68 / var(--tw-text-opacity)) !important;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1)) !important;
 }
 .diff-tailwindcss-wrapper .opacity-\[0\.5\] {
   opacity: 0.5;

package/dist/esm/index.mjs

@@ -2,7 +2,7 @@
 import { NewLineSymbol, DiffLineType, checkDiffLineIncludeChange, composeLen, getSplitContentLines, getUnifiedContentLine, _cacheMap, DiffFile } from '@git-diff-view/core';
 export * from '@git-diff-view/core';
 import * as React from 'react';
-import { useState, useEffect, useRef, useLayoutEffect, createContext, useContext, useCallback, memo, Fragment, useMemo, forwardRef, useImperativeHandle } from 'react';
+import { useState, useEffect, useRef, useLayoutEffect, createContext, useContext, memo, Fragment, useMemo, useCallback, forwardRef, useImperativeHandle } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 import { flushSync } from 'react-dom';
 import { createStore, ref } from 'reactivity-store';
@@ -65,7 +65,7 @@ function __classPrivateFieldGet(receiver, state, kind, f) {
 }
 
 function __classPrivateFieldSet(receiver, state, value, kind, f) {
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    if (typeof state === "function" ? receiver !== state || true : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (state.set(receiver, value)), value;
 }
 
@@ -188,7 +188,7 @@ const syncScroll = (left, right) => {
 const diffFontSizeName = "--diff-font-size--";
 const diffAsideWidthName = "--diff-aside-width--";
 
-// eslint-disable-next-line @typescript-eslint/ban-types
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 const memoFunc = (func) => {
     const cache = {};
     return ((key) => {
@@ -406,7 +406,7 @@ const DiffWidgetContext = createContext(null);
 DiffWidgetContext.displayName = "DiffWidgetContext";
 const useDiffWidgetContext = () => useContext(DiffWidgetContext);
 
-const _DiffSplitLine$1 = ({ index, diffFile, lineNumber, side, }) => {
+const InternalDiffSplitLine$1 = ({ index, diffFile, lineNumber, side, }) => {
     var _a, _b;
     const getCurrentSyntaxLine = side === SplitSide.old ? diffFile.getOldSyntaxLine : diffFile.getNewSyntaxLine;
     const oldLine = diffFile.getSplitLeftLine(index);
@@ -447,13 +447,13 @@ const DiffSplitContentLine$1 = ({ index, diffFile, lineNumber, side, }) => {
     const currentLine = getCurrentLine(index);
     if (currentLine === null || currentLine === void 0 ? void 0 : currentLine.isHidden)
         return null;
-    return React.createElement(_DiffSplitLine$1, { index: index, diffFile: diffFile, lineNumber: lineNumber, side: side });
+    return React.createElement(InternalDiffSplitLine$1, { index: index, diffFile: diffFile, lineNumber: lineNumber, side: side });
 };
 
 const useDomWidth = ({ selector, enable }) => {
     const [width, setWidth] = useState(0);
     const { useDiffContext } = useDiffViewContext();
-    const id = useDiffContext(useCallback((s) => s.id, []));
+    const { id, mounted } = useDiffContext.useShallowStableSelector((s) => ({ id: s.id, mounted: s.mounted }));
     useEffect(() => {
         if (enable) {
             const container = document.querySelector(`#diff-root${id}`);
@@ -489,86 +489,95 @@ const useDomWidth = ({ selector, enable }) => {
             typedWrapper.setAttribute("data-observe", "height");
             return () => cleanCb();
         }
-    }, [selector, enable, id]);
+    }, [selector, enable, id, mounted]);
     return width;
 };
 
-// TODO
 const useSyncHeight = ({ selector, wrapper, side, enable, }) => {
     const { useDiffContext } = useDiffViewContext();
-    const id = useDiffContext(useCallback((s) => s.id, []));
+    const { id, mounted } = useDiffContext.useShallowStableSelector((s) => ({ id: s.id, mounted: s.mounted }));
     useEffect(() => {
         if (enable) {
-            let clean = () => { };
-            // fix the dom delay update
-            const timer = setTimeout(() => {
-                const container = document.querySelector(`#diff-root${id}`);
-                const elements = Array.from((container === null || container === void 0 ? void 0 : container.querySelectorAll(selector)) || []);
-                const wrappers = wrapper ? Array.from((container === null || container === void 0 ? void 0 : container.querySelectorAll(wrapper)) || []) : elements;
-                if (elements.length === 2 && wrappers.length === 2) {
-                    const ele1 = elements[0];
-                    const ele2 = elements[1];
-                    const wrapper1 = wrappers[0];
-                    const wrapper2 = wrappers[1];
-                    const target = ele1.getAttribute("data-side") === side ? ele1 : ele2;
-                    const cb = () => {
-                        ele1.style.height = "auto";
-                        ele2.style.height = "auto";
-                        const rect1 = ele1.getBoundingClientRect();
-                        const rect2 = ele2.getBoundingClientRect();
-                        const maxHeight = Math.max(rect1.height, rect2.height);
-                        wrapper1.style.height = maxHeight + "px";
-                        wrapper2.style.height = maxHeight + "px";
-                        wrapper1.setAttribute("data-sync-height", String(maxHeight));
-                        wrapper2.setAttribute("data-sync-height", String(maxHeight));
-                    };
-                    cb();
-                    const observer = new ResizeObserver(cb);
-                    observer.observe(target);
-                    target.setAttribute("data-observe", "height");
-                    clean = () => {
-                        observer.disconnect();
-                        target === null || target === void 0 ? void 0 : target.removeAttribute("data-observe");
-                    };
+            const container = document.querySelector(`#diff-root${id}`);
+            const elements = Array.from((container === null || container === void 0 ? void 0 : container.querySelectorAll(selector)) || []);
+            const wrappers = wrapper ? Array.from((container === null || container === void 0 ? void 0 : container.querySelectorAll(wrapper)) || []) : elements;
+            if (elements.length === 2 && wrappers.length === 2) {
+                const ele1 = elements[0];
+                const ele2 = elements[1];
+                const wrapper1 = wrappers[0];
+                const wrapper2 = wrappers[1];
+                const target = ele1.getAttribute("data-side") === side ? ele1 : ele2;
+                const typedTarget = target;
+                const cb = () => {
+                    ele1.style.height = "auto";
+                    ele2.style.height = "auto";
+                    const rect1 = ele1.getBoundingClientRect();
+                    const rect2 = ele2.getBoundingClientRect();
+                    const maxHeight = Math.max(rect1.height, rect2.height);
+                    wrapper1.style.height = maxHeight + "px";
+                    wrapper2.style.height = maxHeight + "px";
+                    wrapper1.setAttribute("data-sync-height", String(maxHeight));
+                    wrapper2.setAttribute("data-sync-height", String(maxHeight));
+                };
+                cb();
+                const cleanCb = () => {
+                    var _a;
+                    typedTarget.__observeCallback.delete(cb);
+                    if (typedTarget.__observeCallback.size === 0) {
+                        (_a = typedTarget.__observeInstance) === null || _a === void 0 ? void 0 : _a.disconnect();
+                        typedTarget.removeAttribute("data-observe");
+                        delete typedTarget.__observeCallback;
+                        delete typedTarget.__observeInstance;
+                    }
+                };
+                if (typedTarget.__observeCallback) {
+                    typedTarget.__observeCallback.add(cb);
+                    return () => cleanCb();
                 }
-            });
-            return () => {
-                clean();
-                clearTimeout(timer);
-            };
+                typedTarget.__observeCallback = new Set();
+                typedTarget.__observeCallback.add(cb);
+                const observer = new ResizeObserver(() => typedTarget.__observeCallback.forEach((cb) => cb()));
+                typedTarget.__observeInstance = observer;
+                observer.observe(target);
+                target.setAttribute("data-observe", "height");
+                return () => cleanCb();
+            }
         }
-    }, [selector, enable, side, id, wrapper]);
+    }, [selector, enable, side, id, wrapper, mounted]);
 };
 
-const _DiffSplitExtendLine$1 = ({ index, diffFile, oldLineExtend, newLineExtend, side, lineNumber, }) => {
+const InternalDiffSplitExtendLine$1 = ({ index, diffFile, oldLineExtend, newLineExtend, side, lineNumber, }) => {
     const { useDiffContext } = useDiffViewContext();
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
     const renderExtendLine = useDiffContext.useShallowStableSelector((s) => s.renderExtendLine);
     const currentExtend = side === SplitSide.old ? oldLineExtend : newLineExtend;
+    const otherSide = side === SplitSide.old ? SplitSide.new : SplitSide.old;
     const currentLineNumber = side === SplitSide.old ? oldLine.lineNumber : newLine.lineNumber;
-    const hasExtend = (currentExtend === null || currentExtend === void 0 ? void 0 : currentExtend.data) !== undefined && (currentExtend === null || currentExtend === void 0 ? void 0 : currentExtend.data) !== null;
+    const currentSideHasExtend = (currentExtend === null || currentExtend === void 0 ? void 0 : currentExtend.data) !== undefined && (currentExtend === null || currentExtend === void 0 ? void 0 : currentExtend.data) !== null;
+    const hasExtend = ((oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) !== undefined && (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) !== null) ||
+        ((newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data) !== undefined && (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data) !== null);
     const currentExtendRendered = hasExtend &&
         (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
             diffFile,
             side,
             lineNumber: currentLineNumber,
-            data: currentExtend.data,
+            data: currentExtend === null || currentExtend === void 0 ? void 0 : currentExtend.data,
             onUpdate: diffFile.notifyAll,
         }));
     useSyncHeight({
         selector: `div[data-line="${lineNumber}-extend-content"]`,
         wrapper: `tr[data-line="${lineNumber}-extend"]`,
-        side: SplitSide[side],
+        side: SplitSide[currentSideHasExtend ? side : otherSide],
         enable: hasExtend && typeof renderExtendLine === "function",
     });
     const width = useDomWidth({
         selector: side === SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper",
-        enable: hasExtend && typeof renderExtendLine === "function",
+        enable: currentSideHasExtend && typeof renderExtendLine === "function",
     });
     if (!renderExtendLine)
         return null;
-    return (React.createElement("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", "data-side": SplitSide[side], className: "diff-line diff-line-extend" }, hasExtend ? (React.createElement("td", { className: `diff-line-extend-${SplitSide[side]}-content p-0`, colSpan: 2 },
+    return (React.createElement("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", "data-side": SplitSide[side], className: "diff-line diff-line-extend" }, currentSideHasExtend ? (React.createElement("td", { className: `diff-line-extend-${SplitSide[side]}-content p-0`, colSpan: 2 },
         React.createElement("div", { "data-line": `${lineNumber}-extend-content`, "data-side": SplitSide[side], className: "diff-line-extend-wrapper sticky left-0", style: { width } }, width > 0 && currentExtendRendered))) : (React.createElement("td", { className: `diff-line-extend-${SplitSide[side]}-placeholder select-none p-0`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
         React.createElement("div", { "data-line": `${lineNumber}-extend-content`, "data-side": SplitSide[side] })))));
 };
@@ -590,7 +599,7 @@ const DiffSplitExtendLine$1 = ({ index, diffFile, side, lineNumber, }) => {
     const currentIsShow = hasExtend && (!currentLine.isHidden || !enableExpand);
     if (!currentIsShow)
         return null;
-    return (React.createElement(_DiffSplitExtendLine$1, { side: side, index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
+    return (React.createElement(InternalDiffSplitExtendLine$1, { side: side, index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
 };
 
 const ExpandDown = ({ className }) => {
@@ -606,7 +615,7 @@ const ExpandAll = ({ className }) => {
         React.createElement("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" })));
 };
 
-const _DiffSplitHunkLineGitHub = ({ index, diffFile, side, lineNumber, }) => {
+const InternalDiffSplitHunkLineGitHub = ({ index, diffFile, side, lineNumber, }) => {
     var _a;
     const currentHunk = diffFile.getSplitHunkLine(index);
     const expandEnabled = diffFile.getExpandEnabled();
@@ -630,9 +639,7 @@ const _DiffSplitHunkLineGitHub = ({ index, diffFile, side, lineNumber, }) => {
                 minWidth: `var(${diffAsideWidthName})`,
                 maxWidth: `var(${diffAsideWidthName})`,
             } }, couldExpand ? (isFirstLine ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
-            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "diff-widget-tooltip relative flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => {
-                diffFile.onSplitHunkExpand("down", index);
-            } },
+            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "diff-widget-tooltip relative flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
             React.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand All", "data-title": "Expand All", onClick: () => diffFile.onSplitHunkExpand("all", index) },
             React.createElement(ExpandAll, { className: "fill-current" }))) : (React.createElement(React.Fragment, null,
             React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
@@ -645,7 +652,7 @@ const _DiffSplitHunkLineGitHub = ({ index, diffFile, side, lineNumber, }) => {
                 } }, ((_a = currentHunk.splitInfo) === null || _a === void 0 ? void 0 : _a.plainText) || currentHunk.text)))) : (React.createElement("td", { className: "diff-line-hunk-placeholder select-none", colSpan: 2, style: { backgroundColor: `var(${hunkContentBGName})` } },
         React.createElement("div", { className: "min-h-[28px]" }, "\u2002")))));
 };
-const _DiffSplitHunkLineGitLab = ({ index, diffFile, side, lineNumber, }) => {
+const InternalDiffSplitHunkLineGitLab = ({ index, diffFile, side, lineNumber, }) => {
     var _a;
     const currentHunk = diffFile.getSplitHunkLine(index);
     const expandEnabled = diffFile.getExpandEnabled();
@@ -668,9 +675,7 @@ const _DiffSplitHunkLineGitLab = ({ index, diffFile, side, lineNumber, }) => {
                 minWidth: `var(${diffAsideWidthName})`,
                 maxWidth: `var(${diffAsideWidthName})`,
             } }, couldExpand ? (isFirstLine ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
-            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "diff-widget-tooltip relative flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => {
-                diffFile.onSplitHunkExpand("down", index);
-            } },
+            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "diff-widget-tooltip relative flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
             React.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand All", "data-title": "Expand All", onClick: () => diffFile.onSplitHunkExpand("all", index) },
             React.createElement(ExpandAll, { className: "fill-current" }))) : (React.createElement(React.Fragment, null,
             React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
@@ -682,16 +687,16 @@ const _DiffSplitHunkLineGitLab = ({ index, diffFile, side, lineNumber, }) => {
                     color: `var(${hunkContentColorName})`,
                 } }, ((_a = currentHunk.splitInfo) === null || _a === void 0 ? void 0 : _a.plainText) || currentHunk.text))));
 };
-const _DiffSplitHunkLine$1 = ({ index, diffFile, side, lineNumber, }) => {
+const InternalDiffSplitHunkLine$1 = ({ index, diffFile, side, lineNumber, }) => {
     const { useDiffContext } = useDiffViewContext();
     const diffViewMode = useDiffContext.useShallowStableSelector((s) => s.mode);
     if (diffViewMode === DiffModeEnum.SplitGitHub ||
         diffViewMode === DiffModeEnum.Split ||
         diffViewMode === DiffModeEnum.Unified) {
-        return React.createElement(_DiffSplitHunkLineGitHub, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
+        return React.createElement(InternalDiffSplitHunkLineGitHub, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
     }
     else {
-        return React.createElement(_DiffSplitHunkLineGitLab, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
+        return React.createElement(InternalDiffSplitHunkLineGitLab, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
     }
 };
 const DiffSplitHunkLine$1 = ({ index, diffFile, side, lineNumber, }) => {
@@ -702,10 +707,10 @@ const DiffSplitHunkLine$1 = ({ index, diffFile, side, lineNumber, }) => {
     const currentIsPureHunk = currentHunk && diffFile._getIsPureDiffRender() && !currentHunk.splitInfo;
     if (!currentIsShow && !currentIsPureHunk)
         return null;
-    return React.createElement(_DiffSplitHunkLine$1, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
+    return React.createElement(InternalDiffSplitHunkLine$1, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
 };
 
-const _DiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) => {
+const InternalDiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) => {
     const { useWidget } = useDiffWidgetContext();
     const { useDiffContext } = useDiffViewContext();
     const oldLine = diffFile.getSplitLeftLine(index);
@@ -716,9 +721,11 @@ const _DiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) => {
     const oldLineWidget = oldLine.lineNumber && widgetSide === SplitSide.old && widgetLineNumber === oldLine.lineNumber;
     const newLineWidget = newLine.lineNumber && widgetSide === SplitSide.new && widgetLineNumber === newLine.lineNumber;
     const currentLine = side === SplitSide.old ? oldLine : newLine;
-    const currentWidget = side === SplitSide.old ? oldLineWidget : newLineWidget;
+    const otherSide = side === SplitSide.old ? SplitSide.new : SplitSide.old;
+    const currentHasWidget = side === SplitSide.old ? oldLineWidget : newLineWidget;
+    const hasWidget = oldLineWidget || newLineWidget;
     const renderWidgetLine = useDiffContext.useShallowStableSelector((s) => s.renderWidgetLine);
-    const currentWidgetRendered = currentWidget &&
+    const currentWidgetRendered = currentHasWidget &&
         (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({
             diffFile,
             side,
@@ -728,16 +735,16 @@ const _DiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) => {
     useSyncHeight({
         selector: `div[data-line="${lineNumber}-widget-content"]`,
         wrapper: `tr[data-line="${lineNumber}-widget"]`,
-        side: SplitSide[side],
-        enable: !!currentWidget && typeof renderWidgetLine === "function",
+        side: SplitSide[currentHasWidget ? side : otherSide],
+        enable: hasWidget && typeof renderWidgetLine === "function",
     });
     const width = useDomWidth({
         selector: side === SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper",
-        enable: !!currentWidget && typeof renderWidgetLine === "function",
+        enable: !!currentHasWidget && typeof renderWidgetLine === "function",
     });
     if (!renderWidgetLine)
         return null;
-    return (React.createElement("tr", { "data-line": `${lineNumber}-widget`, "data-state": "widget", "data-side": SplitSide[side], className: "diff-line diff-line-widget" }, currentWidget ? (React.createElement("td", { className: `diff-line-widget-${SplitSide[side]}-content p-0`, colSpan: 2 },
+    return (React.createElement("tr", { "data-line": `${lineNumber}-widget`, "data-state": "widget", "data-side": SplitSide[side], className: "diff-line diff-line-widget" }, currentHasWidget ? (React.createElement("td", { className: `diff-line-widget-${SplitSide[side]}-content p-0`, colSpan: 2 },
         React.createElement("div", { "data-line": `${lineNumber}-widget-content`, "data-side": SplitSide[side], className: "diff-line-widget-wrapper sticky left-0", style: { width } }, width > 0 && currentWidgetRendered))) : (React.createElement("td", { className: `diff-line-widget-${SplitSide[side]}-placeholder p-0`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
         React.createElement("div", { "data-line": `${lineNumber}-widget-content`, "data-side": SplitSide[side] })))));
 };
@@ -756,7 +763,7 @@ const DiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) => {
     }, [diffFile, index]), (p, c) => p === c);
     if (!currentIsShow)
         return null;
-    return React.createElement(_DiffSplitWidgetLine$1, { index: index, side: side, diffFile: diffFile, lineNumber: lineNumber });
+    return React.createElement(InternalDiffSplitWidgetLine$1, { index: index, side: side, diffFile: diffFile, lineNumber: lineNumber });
 };
 
 /* eslint-disable @typescript-eslint/ban-ts-comment */
@@ -832,7 +839,7 @@ const DiffSplitViewNormal = memo(({ diffFile }) => {
 });
 DiffSplitViewNormal.displayName = "DiffSplitViewNormal";
 
-const _DiffSplitLine = ({ index, diffFile, lineNumber }) => {
+const InternalDiffSplitLine = ({ index, diffFile, lineNumber, }) => {
     var _a, _b;
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
@@ -888,10 +895,10 @@ const DiffSplitContentLine = ({ index, diffFile, lineNumber, }) => {
     const newLine = diffFile.getSplitRightLine(index);
     if ((oldLine === null || oldLine === void 0 ? void 0 : oldLine.isHidden) && (newLine === null || newLine === void 0 ? void 0 : newLine.isHidden))
         return null;
-    return React.createElement(_DiffSplitLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    return React.createElement(InternalDiffSplitLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
-const _DiffSplitExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newLineExtend, }) => {
+const InternalDiffSplitExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newLineExtend, }) => {
     const { useDiffContext } = useDiffViewContext();
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
@@ -942,7 +949,7 @@ const DiffSplitExtendLine = ({ index, diffFile, lineNumber, }) => {
     const currentIsShow = hasExtend && ((!(oldLine === null || oldLine === void 0 ? void 0 : oldLine.isHidden) && !(newLine === null || newLine === void 0 ? void 0 : newLine.isHidden)) || !enableExpand);
     if (!currentIsShow)
         return null;
-    return (React.createElement(_DiffSplitExtendLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
+    return (React.createElement(InternalDiffSplitExtendLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
 };
 
 const DiffSplitHunkLineGitHub = ({ index, diffFile, lineNumber, }) => {
@@ -1016,7 +1023,7 @@ const DiffSplitHunkLineGitLab = ({ index, diffFile, lineNumber, }) => {
                     color: `var(${hunkContentColorName})`,
                 } }, ((_b = currentHunk.splitInfo) === null || _b === void 0 ? void 0 : _b.plainText) || currentHunk.text))));
 };
-const _DiffSplitHunkLine = ({ index, diffFile, lineNumber, }) => {
+const InternalDiffSplitHunkLine = ({ index, diffFile, lineNumber, }) => {
     const { useDiffContext } = useDiffViewContext();
     const diffViewMode = useDiffContext.useShallowStableSelector((s) => s.mode);
     if (diffViewMode === DiffModeEnum.SplitGitHub ||
@@ -1036,10 +1043,10 @@ const DiffSplitHunkLine = ({ index, diffFile, lineNumber, }) => {
     const currentIsPureHunk = currentHunk && diffFile._getIsPureDiffRender() && !currentHunk.splitInfo;
     if (!currentIsShow && !currentIsPureHunk)
         return null;
-    return React.createElement(_DiffSplitHunkLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    return React.createElement(InternalDiffSplitHunkLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
-const _DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
+const InternalDiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
     const { useWidget } = useDiffWidgetContext();
     const setWidget = useWidget.getReadonlyState().setWidget;
     const { useDiffContext } = useDiffViewContext();
@@ -1081,7 +1088,7 @@ const DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
     }, [diffFile, index]), (p, c) => p === c);
     if (!currentIsShow)
         return null;
-    return React.createElement(_DiffSplitWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    return React.createElement(InternalDiffSplitWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
 const createDiffConfigStore = (props, diffFileId) => {
@@ -1091,6 +1098,8 @@ const createDiffConfigStore = (props, diffFileId) => {
         const setId = (_id) => (id.value = _id);
         const mode = ref(props.diffViewMode);
         const setMode = (_mode) => (mode.value = _mode);
+        const mounted = ref(props.isMounted);
+        const setMounted = (_mounted) => (mounted.value = _mounted);
         const enableWrap = ref(props.diffViewWrap);
         const setEnableWrap = (_enableWrap) => (enableWrap.value = _enableWrap);
         const enableAddWidget = ref(props.diffViewAddWidget);
@@ -1137,6 +1146,8 @@ const createDiffConfigStore = (props, diffFileId) => {
             setId,
             mode,
             setMode,
+            mounted,
+            setMounted,
             enableWrap,
             setEnableWrap,
             enableAddWidget,
@@ -1363,7 +1374,7 @@ const DiffUnifiedContentLine = ({ index, diffFile, lineNumber, }) => {
     return React.createElement(_DiffUnifiedLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
-const _DiffUnifiedExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newLineExtend, }) => {
+const InternalDiffUnifiedExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newLineExtend, }) => {
     const { useDiffContext } = useDiffViewContext();
     const renderExtendLine = useDiffContext.useShallowStableSelector((s) => s.renderExtendLine);
     const unifiedItem = diffFile.getUnifiedLine(index);
@@ -1410,10 +1421,10 @@ const DiffUnifiedExtendLine = ({ index, diffFile, lineNumber, }) => {
     const hasExtend = (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) || (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data);
     if (!hasExtend || !unifiedItem || unifiedItem.isHidden)
         return null;
-    return (React.createElement(_DiffUnifiedExtendLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
+    return (React.createElement(InternalDiffUnifiedExtendLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
 };
 
-const _DiffUnifiedHunkLine = ({ index, diffFile, lineNumber, }) => {
+const InternalDiffUnifiedHunkLine = ({ index, diffFile, lineNumber, }) => {
     var _a;
     const currentHunk = diffFile.getUnifiedHunkLine(index);
     const expandEnabled = diffFile.getExpandEnabled();
@@ -1455,10 +1466,10 @@ const DiffUnifiedHunkLine = ({ index, diffFile, lineNumber, }) => {
     const currentIsPureHunk = currentHunk && diffFile._getIsPureDiffRender() && !currentHunk.unifiedInfo;
     if (!currentIsShow && !currentIsPureHunk)
         return null;
-    return React.createElement(_DiffUnifiedHunkLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    return React.createElement(InternalDiffUnifiedHunkLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
-const _DiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, }) => {
+const InternalDiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, }) => {
     const { useWidget } = useDiffWidgetContext();
     const setWidget = useWidget.getReadonlyState().setWidget;
     const unifiedItem = diffFile.getUnifiedLine(index);
@@ -1499,7 +1510,7 @@ const DiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, }) => {
     }, [diffFile, index]), (p, c) => p === c);
     if (!currentIsShow)
         return null;
-    return React.createElement(_DiffUnifiedWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    return React.createElement(InternalDiffUnifiedWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
 /* eslint-disable @typescript-eslint/ban-ts-comment */
@@ -1575,27 +1586,49 @@ var DiffModeEnum;
     DiffModeEnum[DiffModeEnum["Split"] = 3] = "Split";
     DiffModeEnum[DiffModeEnum["Unified"] = 4] = "Unified";
 })(DiffModeEnum || (DiffModeEnum = {}));
-const _InternalDiffView = (props) => {
-    const { diffFile, className, style, diffViewMode, diffViewWrap, diffViewFontSize, diffViewHighlight, renderWidgetLine, renderExtendLine, extendData, diffViewAddWidget, onAddWidgetClick, } = props;
+const InternalDiffView = (props) => {
+    const { diffFile, className, style, diffViewMode, diffViewWrap, diffViewFontSize, diffViewHighlight, renderWidgetLine, renderExtendLine, extendData, diffViewAddWidget, onAddWidgetClick, isMounted, } = props;
     const diffFileId = useMemo(() => diffFile.getId(), [diffFile]);
-    const isMounted = useIsMounted();
     const wrapperRef = useRef();
     // performance optimization
     const useDiffContext = useMemo(() => createDiffConfigStore(props, diffFileId), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
     useEffect(() => {
-        const { id, setId, mode, setMode, enableAddWidget, setEnableAddWidget, enableHighlight, setEnableHighlight, enableWrap, setEnableWrap, setExtendData, fontSize, setFontSize, onAddWidgetClick: _onAddWidgetClick, setOnAddWidgetClick, renderExtendLine: _renderExtendLine, setRenderExtendLine, renderWidgetLine: _renderWidgetLine, setRenderWidgetLine, } = useDiffContext.getReadonlyState();
-        diffFileId && diffFileId !== id && setId(diffFileId);
-        diffViewMode && diffViewMode !== mode && setMode(diffViewMode);
-        diffViewAddWidget !== enableAddWidget && setEnableAddWidget(diffViewAddWidget);
-        diffViewHighlight !== enableHighlight && setEnableHighlight(diffViewHighlight);
-        diffViewWrap !== enableWrap && setEnableWrap(diffViewWrap);
-        extendData && setExtendData(extendData);
-        diffViewFontSize && diffViewFontSize !== fontSize && setFontSize(diffViewFontSize);
-        onAddWidgetClick !== _onAddWidgetClick.current && setOnAddWidgetClick({ current: onAddWidgetClick });
-        renderExtendLine !== _renderExtendLine && setRenderExtendLine(renderExtendLine);
-        renderWidgetLine !== _renderWidgetLine && setRenderWidgetLine(renderWidgetLine);
+        const { id, setId, mode, setMode, mounted, setMounted, enableAddWidget, setEnableAddWidget, enableHighlight, setEnableHighlight, enableWrap, setEnableWrap, setExtendData, fontSize, setFontSize, onAddWidgetClick: _onAddWidgetClick, setOnAddWidgetClick, renderExtendLine: _renderExtendLine, setRenderExtendLine, renderWidgetLine: _renderWidgetLine, setRenderWidgetLine, } = useDiffContext.getReadonlyState();
+        if (diffFileId && diffFileId !== id) {
+            setId(diffFileId);
+        }
+        if (diffViewMode && diffViewMode !== mode) {
+            setMode(diffViewMode);
+        }
+        if (mounted !== isMounted) {
+            setMounted(isMounted);
+        }
+        if (diffViewAddWidget !== enableAddWidget) {
+            setEnableAddWidget(diffViewAddWidget);
+        }
+        if (diffViewHighlight !== enableHighlight) {
+            setEnableHighlight(diffViewHighlight);
+        }
+        if (diffViewWrap !== enableWrap) {
+            setEnableWrap(diffViewWrap);
+        }
+        if (extendData) {
+            setExtendData(extendData);
+        }
+        if (diffViewFontSize && diffViewFontSize !== fontSize) {
+            setFontSize(diffViewFontSize);
+        }
+        if (onAddWidgetClick !== _onAddWidgetClick.current) {
+            setOnAddWidgetClick({ current: onAddWidgetClick });
+        }
+        if (renderExtendLine !== _renderExtendLine) {
+            setRenderExtendLine(renderExtendLine);
+        }
+        if (renderWidgetLine !== _renderWidgetLine) {
+            setRenderWidgetLine(renderWidgetLine);
+        }
     }, [
         useDiffContext,
         diffViewFontSize,
@@ -1604,6 +1637,7 @@ const _InternalDiffView = (props) => {
         diffViewWrap,
         diffViewAddWidget,
         diffFileId,
+        isMounted,
         renderWidgetLine,
         renderExtendLine,
         extendData,
@@ -1619,14 +1653,14 @@ const _InternalDiffView = (props) => {
     }, [diffFile]);
     const value = useMemo(() => ({ useDiffContext }), [useDiffContext]);
     return (React.createElement(DiffViewContext.Provider, { value: value },
-        React.createElement("div", { className: "diff-tailwindcss-wrapper", "data-component": "git-diff-view", "data-theme": diffFile._getTheme() || "light", "data-version": "0.0.25", "data-highlighter": diffFile._getHighlighterName(), ref: wrapperRef },
+        React.createElement("div", { className: "diff-tailwindcss-wrapper", "data-component": "git-diff-view", "data-theme": diffFile._getTheme() || "light", "data-version": "0.0.26", "data-highlighter": diffFile._getHighlighterName(), ref: wrapperRef },
             React.createElement("div", { className: "diff-style-root", style: {
                     // @ts-ignore
                     [diffFontSizeName]: diffViewFontSize + "px",
                 } },
                 React.createElement("div", { id: isMounted ? `diff-root${diffFileId}` : undefined, className: "diff-view-wrapper" + (className ? ` ${className}` : ""), style: style }, diffViewMode & DiffModeEnum.Split ? (React.createElement(DiffSplitView, { diffFile: diffFile })) : (React.createElement(DiffUnifiedView, { diffFile: diffFile })))))));
 };
-const InternalDiffView = memo(_InternalDiffView);
+const MemoedInternalDiffView = memo(InternalDiffView);
 const DiffViewWithRef = (props, ref) => {
     var _a, _b;
     const { registerHighlighter, data, diffViewTheme, diffFile: _diffFile } = props, restProps = __rest(props, ["registerHighlighter", "data", "diffViewTheme", "diffFile"]);
@@ -1650,6 +1684,7 @@ const DiffViewWithRef = (props, ref) => {
         (_b = (_a = diffFileRef.current).clear) === null || _b === void 0 ? void 0 : _b.call(_a);
         diffFileRef.current = diffFile;
     }
+    const isMounted = useIsMounted();
     useEffect(() => {
         if (_diffFile && diffFile) {
             _diffFile._addClonedInstance(diffFile);
@@ -1679,12 +1714,12 @@ const DiffViewWithRef = (props, ref) => {
     useImperativeHandle(ref, () => ({ getDiffFileInstance: () => diffFile }), [diffFile]);
     if (!diffFile)
         return null;
-    return (React.createElement(InternalDiffView, Object.assign({ key: diffFile.getId() }, restProps, { diffFile: diffFile, diffViewMode: restProps.diffViewMode || DiffModeEnum.SplitGitHub, diffViewFontSize: restProps.diffViewFontSize || 14 })));
+    return (React.createElement(MemoedInternalDiffView, Object.assign({ key: diffFile.getId() }, restProps, { diffFile: diffFile, isMounted: isMounted, diffViewMode: restProps.diffViewMode || DiffModeEnum.SplitGitHub, diffViewFontSize: restProps.diffViewFontSize || 14 })));
 };
 const InnerDiffView = forwardRef(DiffViewWithRef);
 InnerDiffView.displayName = "DiffView";
 const DiffView = InnerDiffView;
-const version = "0.0.25";
+const version = "0.0.26";
 
 export { DiffModeEnum, DiffView, SplitSide, version };
 //# sourceMappingURL=index.mjs.map