@git-diff-view/react 0.0.24 → 0.0.25

package/dist/cjs/index.development.js

@@ -233,6 +233,14 @@ const getSymbol = (symbol) => {
     }
 };
 
+const useIsMounted = () => {
+    const [isMounted, setIsMounted] = React.useState(false);
+    React.useEffect(() => {
+        setIsMounted(true);
+    }, []);
+    return isMounted;
+};
+
 const useUnmount = (cb, deps) => {
     const ref = React.useRef(cb);
     ref.current = cb;
@@ -409,6 +417,10 @@ const DiffContent = ({ diffLine, rawLine, syntaxLine, enableWrap, enableHighligh
         enableHighlight && syntaxLine && !isMaxLineLengthToIgnoreSyntax ? (React__namespace.createElement(DiffSyntax, { operator: isAdded ? "add" : isDelete ? "del" : undefined, rawLine: rawLine, diffLine: diffLine, syntaxLine: syntaxLine, enableWrap: enableWrap })) : (React__namespace.createElement(DiffString, { operator: isAdded ? "add" : isDelete ? "del" : undefined, rawLine: rawLine, diffLine: diffLine, enableWrap: enableWrap }))));
 };
 
+const DiffViewContext = React.createContext(null);
+DiffViewContext.displayName = "DiffViewContext";
+const useDiffViewContext = () => React.useContext(DiffViewContext);
+
 const DiffWidgetContext = React.createContext(null);
 DiffWidgetContext.displayName = "DiffWidgetContext";
 const useDiffWidgetContext = () => React.useContext(DiffWidgetContext);
@@ -500,19 +512,6 @@ const useDomWidth = ({ selector, enable }) => {
     return width;
 };
 
-exports.DiffModeEnum = void 0;
-(function (DiffModeEnum) {
-    // github like
-    DiffModeEnum[DiffModeEnum["SplitGitHub"] = 1] = "SplitGitHub";
-    // gitlab like
-    DiffModeEnum[DiffModeEnum["SplitGitLab"] = 2] = "SplitGitLab";
-    DiffModeEnum[DiffModeEnum["Split"] = 3] = "Split";
-    DiffModeEnum[DiffModeEnum["Unified"] = 4] = "Unified";
-})(exports.DiffModeEnum || (exports.DiffModeEnum = {}));
-const DiffViewContext = React.createContext(null);
-DiffViewContext.displayName = "DiffViewContext";
-const useDiffViewContext = () => React.useContext(DiffViewContext);
-
 // TODO
 const useSyncHeight = ({ selector, wrapper, side, enable, }) => {
     const { useDiffContext } = useDiffViewContext();
@@ -890,12 +889,17 @@ const _DiffSplitLine = ({ index, diffFile, lineNumber }) => {
                     backgroundColor: newLineNumberBG,
                     color: `var(${plainLineNumberColorName})`,
                     borderLeftColor: `var(${borderColorName})`,
+                    borderLeftStyle: "solid",
                 } },
                 hasDiff && enableAddWidget && (React__namespace.createElement(DiffSplitAddWidget, { index: index, lineNumber: newLine.lineNumber, side: exports.SplitSide.new, diffFile: diffFile, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, className: "absolute left-[100%] z-[1] translate-x-[-50%]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
                 React__namespace.createElement("span", { "data-line-num": newLine.lineNumber, style: { opacity: hasChange ? undefined : 0.5 } }, newLine.lineNumber)),
             React__namespace.createElement("td", { className: "diff-line-new-content group relative pr-[10px] align-top", "data-side": exports.SplitSide[exports.SplitSide.new], style: { backgroundColor: newLineContentBG } },
                 hasDiff && enableAddWidget && (React__namespace.createElement(DiffSplitAddWidget, { index: index, lineNumber: newLine.lineNumber, side: exports.SplitSide.new, diffFile: diffFile, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, className: "absolute right-[100%] z-[1] translate-x-[50%]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
-                React__namespace.createElement(DiffContent, { enableWrap: true, diffFile: diffFile, rawLine: newLine.value || "", diffLine: newLine.diff, syntaxLine: newSyntaxLine, enableHighlight: enableHighlight })))) : (React__namespace.createElement("td", { className: "diff-line-new-placeholder select-none border-l-[1px]", style: { backgroundColor: `var(${emptyBGName})`, borderLeftColor: `var(${borderColorName})` }, "data-side": exports.SplitSide[exports.SplitSide.new], colSpan: 2 },
+                React__namespace.createElement(DiffContent, { enableWrap: true, diffFile: diffFile, rawLine: newLine.value || "", diffLine: newLine.diff, syntaxLine: newSyntaxLine, enableHighlight: enableHighlight })))) : (React__namespace.createElement("td", { className: "diff-line-new-placeholder select-none border-l-[1px]", style: {
+                backgroundColor: `var(${emptyBGName})`,
+                borderLeftColor: `var(${borderColorName})`,
+                borderLeftStyle: "solid",
+            }, "data-side": exports.SplitSide[exports.SplitSide.new], colSpan: 2 },
             React__namespace.createElement("span", null, "\u2002")))));
 };
 const DiffSplitContentLine = ({ index, diffFile, lineNumber, }) => {
@@ -933,8 +937,12 @@ const _DiffSplitExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newL
     return (React__namespace.createElement("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", className: "diff-line diff-line-extend" },
         oldExtendRendered ? (React__namespace.createElement("td", { className: "diff-line-extend-old-content p-0", colSpan: 2 },
             React__namespace.createElement("div", { className: "diff-line-extend-wrapper" }, oldExtendRendered))) : (React__namespace.createElement("td", { className: "diff-line-extend-old-placeholder select-none p-0", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 }, newExtendRendered && React__namespace.createElement("span", null, "\u2002"))),
-        newExtendRendered ? (React__namespace.createElement("td", { className: "diff-line-extend-new-content border-l-[1px] p-0", style: { borderLeftColor: `var(${borderColorName})` }, colSpan: 2 },
-            React__namespace.createElement("div", { className: "diff-line-extend-wrapper" }, newExtendRendered))) : (React__namespace.createElement("td", { className: "diff-line-extend-new-placeholder select-none border-l-[1px] p-0", style: { backgroundColor: `var(${emptyBGName})`, borderLeftColor: `var(${borderColorName})` }, colSpan: 2 }, oldExtendRendered && React__namespace.createElement("span", null, "\u2002")))));
+        newExtendRendered ? (React__namespace.createElement("td", { className: "diff-line-extend-new-content border-l-[1px] p-0", style: { borderLeftColor: `var(${borderColorName})`, borderLeftStyle: "solid" }, colSpan: 2 },
+            React__namespace.createElement("div", { className: "diff-line-extend-wrapper" }, newExtendRendered))) : (React__namespace.createElement("td", { className: "diff-line-extend-new-placeholder select-none border-l-[1px] p-0", style: {
+                backgroundColor: `var(${emptyBGName})`,
+                borderLeftColor: `var(${borderColorName})`,
+                borderLeftStyle: "solid",
+            }, colSpan: 2 }, oldExtendRendered && React__namespace.createElement("span", null, "\u2002")))));
 };
 const DiffSplitExtendLine = ({ index, diffFile, lineNumber, }) => {
     const { useDiffContext } = useDiffViewContext();
@@ -1009,10 +1017,11 @@ const DiffSplitHunkLineGitLab = ({ index, diffFile, lineNumber, }) => {
             React__namespace.createElement("div", { className: "pl-[1.5em]", style: {
                     color: `var(${hunkContentColorName})`,
                 } }, ((_a = currentHunk.splitInfo) === null || _a === void 0 ? void 0 : _a.plainText) || currentHunk.text)),
-        React__namespace.createElement("td", { className: "diff-line-hunk-action relative w-[1%] min-w-[40px] select-none border-l-[1px] p-[1px]", style: {
+        React__namespace.createElement("td", { className: "diff-line-hunk-action relative z-[1] w-[1%] min-w-[40px] select-none border-l-[1px] p-[1px]", style: {
                 backgroundColor: `var(${hunkLineNumberBGName})`,
                 color: `var(${plainLineNumberColorName})`,
                 borderLeftColor: `var(${borderColorName})`,
+                borderLeftStyle: "solid",
             } }, couldExpand ? (isFirstLine ? (React__namespace.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__namespace.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React__namespace.createElement("button", { className: "diff-widget-tooltip 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__namespace.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React__namespace.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) },
@@ -1069,8 +1078,12 @@ const _DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
     return (React__namespace.createElement("tr", { "data-line": `${lineNumber}-widget`, "data-state": "widget", className: "diff-line diff-line-widget" },
         oldWidgetRendered ? (React__namespace.createElement("td", { className: "diff-line-widget-old-content p-0", colSpan: 2 },
             React__namespace.createElement("div", { className: "diff-line-widget-wrapper" }, oldWidgetRendered))) : (React__namespace.createElement("td", { className: "diff-line-widget-old-placeholder select-none p-0", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 }, newWidgetRendered && React__namespace.createElement("span", null, "\u2002"))),
-        newWidgetRendered ? (React__namespace.createElement("td", { className: "diff-line-widget-new-content border-l-[1px] p-0", colSpan: 2, style: { borderLeftColor: `var(${borderColorName})` } },
-            React__namespace.createElement("div", { className: "diff-line-widget-wrapper" }, newWidgetRendered))) : (React__namespace.createElement("td", { className: "diff-line-widget-new-placeholder select-none border-l-[1px] p-0", style: { backgroundColor: `var(${emptyBGName})`, borderLeftColor: `var(${borderColorName})` }, colSpan: 2 }, oldWidgetRendered && React__namespace.createElement("span", null, "\u2002")))));
+        newWidgetRendered ? (React__namespace.createElement("td", { className: "diff-line-widget-new-content border-l-[1px] p-0", colSpan: 2, style: { borderLeftColor: `var(${borderColorName})`, borderLeftStyle: "solid" } },
+            React__namespace.createElement("div", { className: "diff-line-widget-wrapper" }, newWidgetRendered))) : (React__namespace.createElement("td", { className: "diff-line-widget-new-placeholder select-none border-l-[1px] p-0", style: {
+                backgroundColor: `var(${emptyBGName})`,
+                borderLeftColor: `var(${borderColorName})`,
+                borderLeftStyle: "solid",
+            }, colSpan: 2 }, oldWidgetRendered && React__namespace.createElement("span", null, "\u2002")))));
 };
 // TODO! improve performance
 const DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
@@ -1414,7 +1427,7 @@ const DiffUnifiedExtendLine = ({ index, diffFile, lineNumber, }) => {
         });
     }, [unifiedItem.oldLineNumber, unifiedItem.newLineNumber]));
     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 || !unifiedItem.diff)
+    if (!hasExtend || !unifiedItem || unifiedItem.isHidden)
         return null;
     return (React__namespace.createElement(_DiffUnifiedExtendLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
 };
@@ -1438,13 +1451,13 @@ const _DiffUnifiedHunkLine = ({ index, diffFile, lineNumber, }) => {
                 width: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
                 maxWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
                 minWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
-            } }, couldExpand ? (isFirstLine ? (React__namespace.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onUnifiedHunkExpand("up", index) },
-            React__namespace.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React__namespace.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onUnifiedHunkExpand("down", index) },
-            React__namespace.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React__namespace.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300", title: "Expand All", "data-title": "Expand All", onClick: () => diffFile.onUnifiedHunkExpand("all", index) },
+            } }, couldExpand ? (isFirstLine ? (React__namespace.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.onUnifiedHunkExpand("up", index) },
+            React__namespace.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React__namespace.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onUnifiedHunkExpand("down", index) },
+            React__namespace.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React__namespace.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.onUnifiedHunkExpand("all", index) },
             React__namespace.createElement(ExpandAll, { className: "fill-current" }))) : (React__namespace.createElement(React__namespace.Fragment, null,
-            React__namespace.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px] hover:bg-blue-300", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onUnifiedHunkExpand("down", index) },
+            React__namespace.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.onUnifiedHunkExpand("down", index) },
                 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] hover:bg-blue-300", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onUnifiedHunkExpand("up", index) },
+            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.onUnifiedHunkExpand("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("div", { className: "pl-[1.5em]", style: {
@@ -1572,9 +1585,19 @@ exports.SplitSide = void 0;
     SplitSide[SplitSide["old"] = 1] = "old";
     SplitSide[SplitSide["new"] = 2] = "new";
 })(exports.SplitSide || (exports.SplitSide = {}));
+exports.DiffModeEnum = void 0;
+(function (DiffModeEnum) {
+    // github like
+    DiffModeEnum[DiffModeEnum["SplitGitHub"] = 1] = "SplitGitHub";
+    // gitlab like
+    DiffModeEnum[DiffModeEnum["SplitGitLab"] = 2] = "SplitGitLab";
+    DiffModeEnum[DiffModeEnum["Split"] = 3] = "Split";
+    DiffModeEnum[DiffModeEnum["Unified"] = 4] = "Unified";
+})(exports.DiffModeEnum || (exports.DiffModeEnum = {}));
 const _InternalDiffView = (props) => {
     const { diffFile, className, style, diffViewMode, diffViewWrap, diffViewFontSize, diffViewHighlight, renderWidgetLine, renderExtendLine, extendData, diffViewAddWidget, onAddWidgetClick, } = props;
     const diffFileId = React.useMemo(() => diffFile.getId(), [diffFile]);
+    const isMounted = useIsMounted();
     const wrapperRef = React.useRef();
     // performance optimization
     const useDiffContext = React.useMemo(() => createDiffConfigStore(props, diffFileId), 
@@ -1615,12 +1638,12 @@ 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.24", "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.25", "data-highlighter": diffFile._getHighlighterName(), ref: wrapperRef },
             React__namespace.createElement("div", { className: "diff-style-root", style: {
                     // @ts-ignore
                     [diffFontSizeName]: diffViewFontSize + "px",
                 } },
-                React__namespace.createElement("div", { suppressHydrationWarning: true, id: `diff-root${diffFileId}`, className: "diff-view-wrapper" + (className ? ` ${className}` : ""), style: style }, diffViewMode & exports.DiffModeEnum.Split ? (React__namespace.createElement(DiffSplitView, { diffFile: diffFile })) : (React__namespace.createElement(DiffUnifiedView, { diffFile: diffFile })))))));
+                React__namespace.createElement("div", { id: isMounted ? `diff-root${diffFileId}` : undefined, className: "diff-view-wrapper" + (className ? ` ${className}` : ""), style: style }, diffViewMode & exports.DiffModeEnum.Split ? (React__namespace.createElement(DiffSplitView, { diffFile: diffFile })) : (React__namespace.createElement(DiffUnifiedView, { diffFile: diffFile })))))));
 };
 const InternalDiffView = React.memo(_InternalDiffView);
 const DiffViewWithRef = (props, ref) => {
@@ -1680,11 +1703,9 @@ const DiffViewWithRef = (props, ref) => {
 const InnerDiffView = React.forwardRef(DiffViewWithRef);
 InnerDiffView.displayName = "DiffView";
 const DiffView = InnerDiffView;
-const version = "0.0.24";
+const version = "0.0.25";
 
 exports.DiffView = DiffView;
-exports.DiffViewContext = DiffViewContext;
-exports.useDiffViewContext = useDiffViewContext;
 exports.version = version;
 Object.keys(core).forEach(function (k) {
     if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {