@git-diff-view/react 0.0.22 → 0.0.24

package/dist/cjs/index.development.js

@@ -55,6 +55,28 @@ function __rest(s, e) {
     return t;
 }
 
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
 function __classPrivateFieldGet(receiver, state, kind, f) {
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
@@ -62,10 +84,8 @@ function __classPrivateFieldGet(receiver, state, kind, f) {
 }
 
 function __classPrivateFieldSet(receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
     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");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    return (state.set(receiver, value)), value;
 }
 
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
@@ -73,16 +93,6 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-const useUnmount = (cb, deps) => {
-    const ref = React.useRef(cb);
-    ref.current = cb;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    React.useEffect(() => ref.current, deps);
-};
-
-const isClient = typeof window !== "undefined";
-const useSafeLayout = isClient ? React.useLayoutEffect : React.useEffect;
-
 var _TextMeasure_instances, _TextMeasure_key, _TextMeasure_map, _TextMeasure_getInstance;
 let canvasCtx = null;
 const getKey = (font, text) => {
@@ -106,7 +116,7 @@ class TextMeasure {
         if (font) {
             const currentFontKey = `${font.fontFamily}-${font.fontStyle}-${font.fontSize}`;
             if (__classPrivateFieldGet(this, _TextMeasure_key, "f") !== currentFontKey) {
-                __classPrivateFieldSet(this, _TextMeasure_key, currentFontKey, "f");
+                __classPrivateFieldSet(this, _TextMeasure_key, currentFontKey);
                 instance.font = `${font.fontStyle || ""} ${font.fontSize || ""} ${font.fontFamily || ""}`;
             }
         }
@@ -121,19 +131,10 @@ _TextMeasure_key = new WeakMap(), _TextMeasure_map = new WeakMap(), _TextMeasure
     canvasCtx = canvasCtx || document.createElement("canvas").getContext("2d");
     return canvasCtx;
 };
-const measureInstance = new TextMeasure();
-const useTextWidth = ({ text, font, }) => {
-    const [width, setWidth] = React.useState(() => {
-        const fontSize = parseInt(font.fontSize);
-        let baseSize = 6;
-        baseSize += fontSize > 10 ? (fontSize - 10) * 0.6 : 0;
-        return baseSize * text.length;
-    });
-    useSafeLayout(() => {
-        const width = measureInstance.measure(text, font);
-        setWidth(width);
-    }, [text, font]);
-    return width;
+let instance = null;
+const getTextMeasureInstance = () => {
+    instance = instance || new TextMeasure();
+    return instance;
 };
 
 const addContentBGName = "--diff-add-content--";
@@ -202,6 +203,10 @@ const syncScroll = (left, right) => {
         right.onscroll = null;
     };
 };
+
+const diffFontSizeName = "--diff-font-size--";
+const diffAsideWidthName = "--diff-aside-width--";
+
 // eslint-disable-next-line @typescript-eslint/ban-types
 const memoFunc = (func) => {
     const cache = {};
@@ -214,106 +219,43 @@ const memoFunc = (func) => {
         return result;
     });
 };
-const createDiffConfigStore = (props, diffFileId) => {
-    return reactivityStore.createStore(() => {
-        var _a, _b;
-        const id = reactivityStore.ref(diffFileId);
-        const setId = (_id) => (id.value = _id);
-        const mode = reactivityStore.ref(props.diffViewMode);
-        const setMode = (_mode) => (mode.value = _mode);
-        const enableWrap = reactivityStore.ref(props.diffViewWrap);
-        const setEnableWrap = (_enableWrap) => (enableWrap.value = _enableWrap);
-        const enableAddWidget = reactivityStore.ref(props.diffViewAddWidget);
-        const setEnableAddWidget = (_enableAddWidget) => (enableAddWidget.value = _enableAddWidget);
-        const enableHighlight = reactivityStore.ref(props.diffViewHighlight);
-        const setEnableHighlight = (_enableHighlight) => (enableHighlight.value = _enableHighlight);
-        const fontSize = reactivityStore.ref(props.diffViewFontSize);
-        const setFontSize = (_fontSize) => (fontSize.value = _fontSize);
-        const extendData = reactivityStore.ref({
-            oldFile: Object.assign({}, (_a = props.extendData) === null || _a === void 0 ? void 0 : _a.oldFile),
-            newFile: Object.assign({}, (_b = props.extendData) === null || _b === void 0 ? void 0 : _b.newFile),
-        });
-        const setExtendData = (_extendData) => {
-            const existOldKeys = Object.keys(extendData.value.oldFile || {});
-            const inComingOldKeys = Object.keys(_extendData.oldFile || {});
-            for (const key of existOldKeys) {
-                if (!inComingOldKeys.includes(key)) {
-                    delete extendData.value.oldFile[key];
-                }
-            }
-            for (const key of inComingOldKeys) {
-                extendData.value.oldFile[key] = _extendData.oldFile[key];
-            }
-            const existNewKeys = Object.keys(extendData.value.newFile || {});
-            const inComingNewKeys = Object.keys(_extendData.newFile || {});
-            for (const key of existNewKeys) {
-                if (!inComingNewKeys.includes(key)) {
-                    delete extendData.value.newFile[key];
-                }
-            }
-            for (const key of inComingNewKeys) {
-                extendData.value.newFile[key] = _extendData.newFile[key];
-            }
-        };
-        const renderWidgetLine = reactivityStore.ref(props.renderWidgetLine);
-        const setRenderWidgetLine = (_renderWidgetLine) => (renderWidgetLine.value = _renderWidgetLine);
-        const renderExtendLine = reactivityStore.ref(props.renderExtendLine);
-        const setRenderExtendLine = (_renderExtendLine) => (renderExtendLine.value = _renderExtendLine);
-        // 避免无意义的订阅
-        const onAddWidgetClick = { current: props.onAddWidgetClick };
-        const setOnAddWidgetClick = (_onAddWidgetClick) => (onAddWidgetClick.current = _onAddWidgetClick.current);
-        return {
-            id,
-            setId,
-            mode,
-            setMode,
-            enableWrap,
-            setEnableWrap,
-            enableAddWidget,
-            setEnableAddWidget,
-            enableHighlight,
-            setEnableHighlight,
-            fontSize,
-            setFontSize,
-            extendData,
-            setExtendData,
-            renderWidgetLine,
-            setRenderWidgetLine,
-            renderExtendLine,
-            setRenderExtendLine,
-            onAddWidgetClick,
-            setOnAddWidgetClick,
-        };
-    });
+
+const getSymbol = (symbol) => {
+    switch (symbol) {
+        case core.NewLineSymbol.LF:
+            return "␊";
+        case core.NewLineSymbol.CR:
+            return "␍";
+        case core.NewLineSymbol.CRLF:
+            return "␍␊";
+        default:
+            return "";
+    }
 };
-const createDiffWidgetStore = (useDiffContextRef) => {
-    return reactivityStore.createStore(() => {
-        const widgetSide = reactivityStore.ref(undefined);
-        const widgetLineNumber = reactivityStore.ref(undefined);
-        const setWidget = ({ side, lineNumber }) => {
-            var _a, _b;
-            const { renderWidgetLine } = ((_b = (_a = useDiffContextRef.current) === null || _a === void 0 ? void 0 : _a.getReadonlyState) === null || _b === void 0 ? void 0 : _b.call(_a)) || {};
-            if (typeof renderWidgetLine !== "function")
-                return;
-            widgetSide.value = side;
-            widgetLineNumber.value = lineNumber;
-        };
-        return { widgetSide, widgetLineNumber, setWidget };
-    });
+
+const useUnmount = (cb, deps) => {
+    const ref = React.useRef(cb);
+    ref.current = cb;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    React.useEffect(() => ref.current, deps);
 };
-const createDiffSplitConfigStore = () => {
-    return reactivityStore.createStore(() => {
-        const splitRef = reactivityStore.ref(undefined);
-        const setSplit = (side) => {
-            reactDom.flushSync(() => {
-                splitRef.value = side;
-            });
-        };
-        return { splitRef, setSplit };
+
+const isClient = typeof window !== "undefined";
+const useSafeLayout = isClient ? React.useLayoutEffect : React.useEffect;
+
+const useTextWidth = ({ text, font, }) => {
+    const [width, setWidth] = React.useState(() => {
+        const fontSize = parseInt(font.fontSize);
+        let baseSize = 6;
+        baseSize += fontSize > 10 ? (fontSize - 10) * 0.6 : 0;
+        return baseSize * text.length;
     });
+    useSafeLayout(() => {
+        const width = getTextMeasureInstance().measure(text, font);
+        setWidth(width);
+    }, [text, font]);
+    return width;
 };
-const diffAsideWidthName = "--diff-aside-width--";
-const diffFontSizeName = "--diff-font-size--";
 
 const DiffSplitAddWidget = ({ side, className, lineNumber, onWidgetClick, onOpenAddWidget, }) => {
     return (React__namespace.createElement("div", { className: "diff-add-widget-wrapper invisible select-none transition-transform hover:scale-110 group-hover:visible" +
@@ -375,18 +317,6 @@ const getStyleObjectFromString = memoFunc((str) => {
     });
     return style;
 });
-const getSymbol = (symbol) => {
-    switch (symbol) {
-        case core.NewLineSymbol.LF:
-            return "␊";
-        case core.NewLineSymbol.CR:
-            return "␍";
-        case core.NewLineSymbol.CRLF:
-            return "␍␊";
-        default:
-            return "";
-    }
-};
 const DiffString = ({ rawLine, diffLine, operator, enableWrap, }) => {
     const changes = diffLine === null || diffLine === void 0 ? void 0 : diffLine.changes;
     if (changes === null || changes === void 0 ? void 0 : changes.hasLineChange) {
@@ -402,7 +332,9 @@ const DiffString = ({ rawLine, diffLine, operator, enableWrap, }) => {
                 str1,
                 React__namespace.createElement("span", { "data-diff-highlight": true, className: "rounded-[0.2em]", style: {
                         backgroundColor: operator === "add" ? `var(${addContentHighlightBGName})` : `var(${delContentHighlightBGName})`,
-                    } }, isLast ? `${_str2}${getSymbol(isNewLineSymbolChanged)}` : str2),
+                    } }, isLast ? (React__namespace.createElement(React__namespace.Fragment, null,
+                    _str2,
+                    React__namespace.createElement("span", { "data-newline-symbol": true }, getSymbol(isNewLineSymbolChanged)))) : (str2)),
                 str3),
             isNewLineSymbolChanged === core.NewLineSymbol.NEWLINE && (React__namespace.createElement("span", { "data-no-newline-at-end-of-file-symbol": true, className: enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500", style: {
                     width: `var(${diffFontSizeName})`,
@@ -445,7 +377,9 @@ const DiffSyntax = ({ rawLine, diffLine, operator, syntaxLine, enableWrap, }) =>
                                 borderBottomLeftRadius: isStart ? "0.2em" : undefined,
                                 borderTopRightRadius: isEnd || isLast ? "0.2em" : undefined,
                                 borderBottomRightRadius: isEnd || isLast ? "0.2em" : undefined,
-                            } }, isLast ? `${_str2}${getSymbol(isNewLineSymbolChanged)}` : str2),
+                            } }, isLast ? (React__namespace.createElement(React__namespace.Fragment, null,
+                            _str2,
+                            React__namespace.createElement("span", { "data-newline-symbol": true }, getSymbol(isNewLineSymbolChanged)))) : (str2)),
                         str3));
                 }
             })),
@@ -791,8 +725,18 @@ const DiffSplitHunkLine$1 = ({ index, diffFile, side, lineNumber, }) => {
     return React__namespace.createElement(_DiffSplitHunkLine$1, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
 };
 
-const _DiffSplitWidgetLine$1 = ({ diffFile, side, lineNumber, currentLine, setWidget, currentWidget, }) => {
+const _DiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) => {
+    const { useWidget } = useDiffWidgetContext();
     const { useDiffContext } = useDiffViewContext();
+    const oldLine = diffFile.getSplitLeftLine(index);
+    const newLine = diffFile.getSplitRightLine(index);
+    const widgetSide = useWidget.getReadonlyState().widgetSide;
+    const widgetLineNumber = useWidget.getReadonlyState().widgetLineNumber;
+    const setWidget = useWidget.getReadonlyState().setWidget;
+    const oldLineWidget = oldLine.lineNumber && widgetSide === exports.SplitSide.old && widgetLineNumber === oldLine.lineNumber;
+    const newLineWidget = newLine.lineNumber && widgetSide === exports.SplitSide.new && widgetLineNumber === newLine.lineNumber;
+    const currentLine = side === exports.SplitSide.old ? oldLine : newLine;
+    const currentWidget = side === exports.SplitSide.old ? oldLineWidget : newLineWidget;
     const renderWidgetLine = useDiffContext.useShallowStableSelector((s) => s.renderWidgetLine);
     const currentWidgetRendered = currentWidget &&
         (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({
@@ -818,23 +762,21 @@ const _DiffSplitWidgetLine$1 = ({ diffFile, side, lineNumber, currentLine, setWi
         React__namespace.createElement("div", { "data-line": `${lineNumber}-widget-content`, "data-side": exports.SplitSide[side] })))));
 };
 // TODO! improve performance
-const DiffSplitWidgetLine$1 = ({ index, diffFile, side, lineNumber, }) => {
+const DiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) => {
     const { useWidget } = useDiffWidgetContext();
-    const { widgetLineNumber, widgetSide, setWidget } = useWidget.useShallowStableSelector((s) => ({
-        widgetLineNumber: s.widgetLineNumber,
-        widgetSide: s.widgetSide,
-        setWidget: s.setWidget,
-    }));
-    const oldLine = diffFile.getSplitLeftLine(index);
-    const newLine = diffFile.getSplitRightLine(index);
-    const oldLineWidget = oldLine.lineNumber && widgetSide === exports.SplitSide.old && widgetLineNumber === oldLine.lineNumber;
-    const newLineWidget = newLine.lineNumber && widgetSide === exports.SplitSide.new && widgetLineNumber === newLine.lineNumber;
-    const currentLine = side === exports.SplitSide.old ? oldLine : newLine;
-    const currentWidget = side === exports.SplitSide.old ? oldLineWidget : newLineWidget;
-    const currentIsShow = oldLineWidget || newLineWidget;
+    const currentIsShow = useWidget.useShallowSelector(React__namespace.useCallback((s) => {
+        const widgetLineNumber = s.widgetLineNumber;
+        const widgetSide = s.widgetSide;
+        const oldLine = diffFile.getSplitLeftLine(index);
+        const newLine = diffFile.getSplitRightLine(index);
+        const oldLineWidget = oldLine.lineNumber && widgetSide === exports.SplitSide.old && widgetLineNumber === oldLine.lineNumber;
+        const newLineWidget = newLine.lineNumber && widgetSide === exports.SplitSide.new && widgetLineNumber === newLine.lineNumber;
+        const currentIsShow = oldLineWidget || newLineWidget;
+        return currentIsShow;
+    }, [diffFile, index]), (p, c) => p === c);
     if (!currentIsShow)
         return null;
-    return (React__namespace.createElement(_DiffSplitWidgetLine$1, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber, currentLine: currentLine, setWidget: setWidget, currentWidget: currentWidget }));
+    return React__namespace.createElement(_DiffSplitWidgetLine$1, { index: index, side: side, diffFile: diffFile, lineNumber: lineNumber });
 };
 
 /* eslint-disable @typescript-eslint/ban-ts-comment */
@@ -1079,7 +1021,7 @@ const DiffSplitHunkLineGitLab = ({ index, diffFile, lineNumber, }) => {
                 React__namespace.createElement(ExpandDown, { className: "fill-current" })),
             React__namespace.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
                 React__namespace.createElement(ExpandUp, { className: "fill-current" }))))) : (React__namespace.createElement("div", { className: "min-h-[28px]" }, "\u2002"))),
-        React__namespace.createElement("td", { className: "diff-line-hunk-content pr-[10px] align-middle", style: { backgroundColor: `var(${hunkContentBGName})` } },
+        React__namespace.createElement("td", { className: "diff-line-hunk-content relative pr-[10px] align-middle", style: { backgroundColor: `var(${hunkContentBGName})` } },
             React__namespace.createElement("div", { className: "pl-[1.5em]", style: {
                     color: `var(${hunkContentColorName})`,
                 } }, ((_b = currentHunk.splitInfo) === null || _b === void 0 ? void 0 : _b.plainText) || currentHunk.text))));
@@ -1107,13 +1049,17 @@ const DiffSplitHunkLine = ({ index, diffFile, lineNumber, }) => {
     return React__namespace.createElement(_DiffSplitHunkLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
-const _DiffSplitWidgetLine = ({ index, diffFile, lineNumber, oldLineWidget, newLineWidget, }) => {
+const _DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
     const { useWidget } = useDiffWidgetContext();
     const setWidget = useWidget.getReadonlyState().setWidget;
     const { useDiffContext } = useDiffViewContext();
     const renderWidgetLine = useDiffContext.useShallowStableSelector((s) => s.renderWidgetLine);
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
+    const widgetSide = useWidget.getReadonlyState().widgetSide;
+    const widgetLineNumber = useWidget.getReadonlyState().widgetLineNumber;
+    const oldLineWidget = oldLine.lineNumber && widgetSide === exports.SplitSide.old && widgetLineNumber === oldLine.lineNumber;
+    const newLineWidget = newLine.lineNumber && widgetSide === exports.SplitSide.new && widgetLineNumber === newLine.lineNumber;
     const oldWidgetRendered = oldLineWidget &&
         (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({ diffFile, side: exports.SplitSide.old, lineNumber: oldLine.lineNumber, onClose: () => setWidget({}) }));
     const newWidgetRendered = newLineWidget &&
@@ -1129,18 +1075,118 @@ const _DiffSplitWidgetLine = ({ index, diffFile, lineNumber, oldLineWidget, newL
 // TODO! improve performance
 const DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
     const { useWidget } = useDiffWidgetContext();
-    const { widgetLineNumber, widgetSide } = useWidget((s) => ({
-        widgetLineNumber: s.widgetLineNumber,
-        widgetSide: s.widgetSide,
-    }));
-    const oldLine = diffFile.getSplitLeftLine(index);
-    const newLine = diffFile.getSplitRightLine(index);
-    const oldLineWidget = oldLine.lineNumber && widgetSide === exports.SplitSide.old && widgetLineNumber === oldLine.lineNumber;
-    const newLineWidget = newLine.lineNumber && widgetSide === exports.SplitSide.new && widgetLineNumber === newLine.lineNumber;
-    const currentIsShow = oldLineWidget || newLineWidget;
+    const currentIsShow = useWidget.useShallowSelector(React__namespace.useCallback((s) => {
+        const widgetLineNumber = s.widgetLineNumber;
+        const widgetSide = s.widgetSide;
+        const oldLine = diffFile.getSplitLeftLine(index);
+        const newLine = diffFile.getSplitRightLine(index);
+        const oldLineWidget = oldLine.lineNumber && widgetSide === exports.SplitSide.old && widgetLineNumber === oldLine.lineNumber;
+        const newLineWidget = newLine.lineNumber && widgetSide === exports.SplitSide.new && widgetLineNumber === newLine.lineNumber;
+        const currentIsShow = oldLineWidget || newLineWidget;
+        return currentIsShow;
+    }, [diffFile, index]), (p, c) => p === c);
     if (!currentIsShow)
         return null;
-    return (React__namespace.createElement(_DiffSplitWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineWidget: oldLineWidget, newLineWidget: newLineWidget }));
+    return React__namespace.createElement(_DiffSplitWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+};
+
+const createDiffConfigStore = (props, diffFileId) => {
+    return reactivityStore.createStore(() => {
+        var _a, _b;
+        const id = reactivityStore.ref(diffFileId);
+        const setId = (_id) => (id.value = _id);
+        const mode = reactivityStore.ref(props.diffViewMode);
+        const setMode = (_mode) => (mode.value = _mode);
+        const enableWrap = reactivityStore.ref(props.diffViewWrap);
+        const setEnableWrap = (_enableWrap) => (enableWrap.value = _enableWrap);
+        const enableAddWidget = reactivityStore.ref(props.diffViewAddWidget);
+        const setEnableAddWidget = (_enableAddWidget) => (enableAddWidget.value = _enableAddWidget);
+        const enableHighlight = reactivityStore.ref(props.diffViewHighlight);
+        const setEnableHighlight = (_enableHighlight) => (enableHighlight.value = _enableHighlight);
+        const fontSize = reactivityStore.ref(props.diffViewFontSize);
+        const setFontSize = (_fontSize) => (fontSize.value = _fontSize);
+        const extendData = reactivityStore.ref({
+            oldFile: Object.assign({}, (_a = props.extendData) === null || _a === void 0 ? void 0 : _a.oldFile),
+            newFile: Object.assign({}, (_b = props.extendData) === null || _b === void 0 ? void 0 : _b.newFile),
+        });
+        const setExtendData = (_extendData) => {
+            const existOldKeys = Object.keys(extendData.value.oldFile || {});
+            const inComingOldKeys = Object.keys(_extendData.oldFile || {});
+            for (const key of existOldKeys) {
+                if (!inComingOldKeys.includes(key)) {
+                    delete extendData.value.oldFile[key];
+                }
+            }
+            for (const key of inComingOldKeys) {
+                extendData.value.oldFile[key] = _extendData.oldFile[key];
+            }
+            const existNewKeys = Object.keys(extendData.value.newFile || {});
+            const inComingNewKeys = Object.keys(_extendData.newFile || {});
+            for (const key of existNewKeys) {
+                if (!inComingNewKeys.includes(key)) {
+                    delete extendData.value.newFile[key];
+                }
+            }
+            for (const key of inComingNewKeys) {
+                extendData.value.newFile[key] = _extendData.newFile[key];
+            }
+        };
+        const renderWidgetLine = reactivityStore.ref(props.renderWidgetLine);
+        const setRenderWidgetLine = (_renderWidgetLine) => (renderWidgetLine.value = _renderWidgetLine);
+        const renderExtendLine = reactivityStore.ref(props.renderExtendLine);
+        const setRenderExtendLine = (_renderExtendLine) => (renderExtendLine.value = _renderExtendLine);
+        // 避免无意义的订阅
+        const onAddWidgetClick = { current: props.onAddWidgetClick };
+        const setOnAddWidgetClick = (_onAddWidgetClick) => (onAddWidgetClick.current = _onAddWidgetClick.current);
+        return {
+            id,
+            setId,
+            mode,
+            setMode,
+            enableWrap,
+            setEnableWrap,
+            enableAddWidget,
+            setEnableAddWidget,
+            enableHighlight,
+            setEnableHighlight,
+            fontSize,
+            setFontSize,
+            extendData,
+            setExtendData,
+            renderWidgetLine,
+            setRenderWidgetLine,
+            renderExtendLine,
+            setRenderExtendLine,
+            onAddWidgetClick,
+            setOnAddWidgetClick,
+        };
+    });
+};
+const createDiffWidgetStore = (useDiffContextRef) => {
+    return reactivityStore.createStore(() => {
+        const widgetSide = reactivityStore.ref(undefined);
+        const widgetLineNumber = reactivityStore.ref(undefined);
+        const setWidget = ({ side, lineNumber }) => {
+            var _a, _b;
+            const { renderWidgetLine } = ((_b = (_a = useDiffContextRef.current) === null || _a === void 0 ? void 0 : _a.getReadonlyState) === null || _b === void 0 ? void 0 : _b.call(_a)) || {};
+            if (typeof renderWidgetLine !== "function")
+                return;
+            widgetSide.value = side;
+            widgetLineNumber.value = lineNumber;
+        };
+        return { widgetSide, widgetLineNumber, setWidget };
+    });
+};
+const createDiffSplitConfigStore = () => {
+    return reactivityStore.createStore(() => {
+        const splitRef = reactivityStore.ref(undefined);
+        const setSplit = (side) => {
+            reactDom.flushSync(() => {
+                splitRef.value = side;
+            });
+        };
+        return { splitRef, setSplit };
+    });
 };
 
 /* eslint-disable @typescript-eslint/ban-ts-comment */
@@ -1418,9 +1464,15 @@ const DiffUnifiedHunkLine = ({ index, diffFile, lineNumber, }) => {
     return React__namespace.createElement(_DiffUnifiedHunkLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
-const _DiffUnifiedWidgetLine = ({ index, diffFile, oldWidget, newWidget, lineNumber, setWidget, }) => {
+const _DiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, }) => {
+    const { useWidget } = useDiffWidgetContext();
+    const setWidget = useWidget.getReadonlyState().setWidget;
     const unifiedItem = diffFile.getUnifiedLine(index);
     const onClose = () => setWidget({});
+    const widgetSide = useWidget.getReadonlyState().widgetSide;
+    const widgetLineNumber = useWidget.getReadonlyState().widgetLineNumber;
+    const oldWidget = unifiedItem.oldLineNumber && widgetSide === exports.SplitSide.old && widgetLineNumber === unifiedItem.oldLineNumber;
+    const newWidget = unifiedItem.newLineNumber && widgetSide === exports.SplitSide.new && widgetLineNumber === unifiedItem.newLineNumber;
     const { useDiffContext } = useDiffViewContext();
     // 需要显示的时候才进行方法订阅，可以大幅度提高性能
     const renderWidgetLine = useDiffContext.useShallowStableSelector((s) => s.renderWidgetLine);
@@ -1442,18 +1494,18 @@ const _DiffUnifiedWidgetLine = ({ index, diffFile, oldWidget, newWidget, lineNum
 };
 const DiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, }) => {
     const { useWidget } = useDiffWidgetContext();
-    const { widgetSide, widgetLineNumber, setWidget } = useWidget.useShallowStableSelector((s) => ({
-        widgetLineNumber: s.widgetLineNumber,
-        widgetSide: s.widgetSide,
-        setWidget: s.setWidget,
-    }));
-    const unifiedItem = diffFile.getUnifiedLine(index);
-    const oldWidget = unifiedItem.oldLineNumber && widgetSide === exports.SplitSide.old && widgetLineNumber === unifiedItem.oldLineNumber;
-    const newWidget = unifiedItem.newLineNumber && widgetSide === exports.SplitSide.new && widgetLineNumber === unifiedItem.newLineNumber;
-    const currentIsShow = oldWidget || newWidget;
+    const currentIsShow = useWidget.useShallowSelector(React__namespace.useCallback((s) => {
+        const widgetLineNumber = s.widgetLineNumber;
+        const widgetSide = s.widgetSide;
+        const unifiedItem = diffFile.getUnifiedLine(index);
+        const oldWidget = unifiedItem.oldLineNumber && widgetSide === exports.SplitSide.old && widgetLineNumber === unifiedItem.oldLineNumber;
+        const newWidget = unifiedItem.newLineNumber && widgetSide === exports.SplitSide.new && widgetLineNumber === unifiedItem.newLineNumber;
+        const currentIsShow = oldWidget || newWidget;
+        return currentIsShow;
+    }, [diffFile, index]), (p, c) => p === c);
     if (!currentIsShow)
         return null;
-    return (React__namespace.createElement(_DiffUnifiedWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, oldWidget: oldWidget, newWidget: newWidget, setWidget: setWidget }));
+    return React__namespace.createElement(_DiffUnifiedWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
 /* eslint-disable @typescript-eslint/ban-ts-comment */
@@ -1563,7 +1615,7 @@ const _InternalDiffView = (props) => {
     }, [diffFile]);
     const value = React.useMemo(() => ({ useDiffContext }), [useDiffContext]);
     return (React__namespace.createElement(DiffViewContext.Provider, { value: value },
-        React__namespace.createElement("div", { className: "diff-tailwindcss-wrapper", "data-component": "git-diff-view", "data-theme": diffFile._getTheme() || "light", "data-version": "0.0.22", "data-highlighter": diffFile._getHighlighterName(), ref: wrapperRef },
+        React__namespace.createElement("div", { className: "diff-tailwindcss-wrapper", "data-component": "git-diff-view", "data-theme": diffFile._getTheme() || "light", "data-version": "0.0.24", "data-highlighter": diffFile._getHighlighterName(), ref: wrapperRef },
             React__namespace.createElement("div", { className: "diff-style-root", style: {
                     // @ts-ignore
                     [diffFontSizeName]: diffViewFontSize + "px",
@@ -1628,7 +1680,7 @@ const DiffViewWithRef = (props, ref) => {
 const InnerDiffView = React.forwardRef(DiffViewWithRef);
 InnerDiffView.displayName = "DiffView";
 const DiffView = InnerDiffView;
-const version = "0.0.22";
+const version = "0.0.24";
 
 exports.DiffView = DiffView;
 exports.DiffViewContext = DiffViewContext;