@git-diff-view/react 0.0.28 → 0.0.30

package/dist/esm/index.mjs

@@ -224,6 +224,15 @@ const getSymbol = (symbol) => {
             return "";
     }
 };
+var DiffModeEnum;
+(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";
+})(DiffModeEnum || (DiffModeEnum = {}));
 
 const useIsMounted = () => {
     const [isMounted, setIsMounted] = useState(false);
@@ -318,14 +327,14 @@ const getStyleObjectFromString = memoFunc((str) => {
     });
     return style;
 });
-const DiffString = ({ rawLine, diffLine, operator, plainLine, enableWrap, }) => {
+const DiffString = ({ rawLine, diffLine, operator, plainLine, enableWrap, enableTemplate, }) => {
     const changes = diffLine === null || diffLine === void 0 ? void 0 : diffLine.changes;
     if (changes === null || changes === void 0 ? void 0 : changes.hasLineChange) {
         const isNewLineSymbolChanged = changes.newLineSymbol;
-        if (!(diffLine === null || diffLine === void 0 ? void 0 : diffLine.plainTemplate) && typeof getPlainDiffTemplate === "function") {
+        if (enableTemplate && !(diffLine === null || diffLine === void 0 ? void 0 : diffLine.plainTemplate) && typeof getPlainDiffTemplate === "function") {
             getPlainDiffTemplate({ diffLine, rawLine, operator });
         }
-        if (diffLine === null || diffLine === void 0 ? void 0 : diffLine.plainTemplate) {
+        if (enableTemplate && (diffLine === null || diffLine === void 0 ? void 0 : diffLine.plainTemplate)) {
             return (React.createElement("span", { className: "diff-line-content-raw" },
                 React.createElement("span", { "data-template": true, dangerouslySetInnerHTML: { __html: diffLine.plainTemplate } }),
                 isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (React.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: {
@@ -358,27 +367,27 @@ const DiffString = ({ rawLine, diffLine, operator, plainLine, enableWrap, }) =>
                     React.createElement(DiffNoNewLine, null)))));
         }
     }
-    if (plainLine && !(plainLine === null || plainLine === void 0 ? void 0 : plainLine.template)) {
+    if (enableTemplate && plainLine && !(plainLine === null || plainLine === void 0 ? void 0 : plainLine.template)) {
         plainLine.template = getPlainLineTemplate(plainLine.value);
     }
-    if (plainLine === null || plainLine === void 0 ? void 0 : plainLine.template) {
+    if (enableTemplate && (plainLine === null || plainLine === void 0 ? void 0 : plainLine.template)) {
         return (React.createElement("span", { className: "diff-line-content-raw" },
             React.createElement("span", { "data-template": true, dangerouslySetInnerHTML: { __html: plainLine.template } })));
     }
     return React.createElement("span", { className: "diff-line-content-raw" }, rawLine);
 };
-const DiffSyntax = ({ rawLine, diffLine, operator, syntaxLine, enableWrap, }) => {
+const DiffSyntax = ({ rawLine, diffLine, operator, syntaxLine, enableWrap, enableTemplate, }) => {
     var _a, _b;
     if (!syntaxLine) {
-        return React.createElement(DiffString, { rawLine: rawLine, diffLine: diffLine, operator: operator });
+        return (React.createElement(DiffString, { rawLine: rawLine, diffLine: diffLine, operator: operator, enableWrap: enableWrap, enableTemplate: enableTemplate }));
     }
     const changes = diffLine === null || diffLine === void 0 ? void 0 : diffLine.changes;
     if (changes === null || changes === void 0 ? void 0 : changes.hasLineChange) {
         const isNewLineSymbolChanged = changes.newLineSymbol;
-        if (!(diffLine === null || diffLine === void 0 ? void 0 : diffLine.syntaxTemplate) && typeof getSyntaxDiffTemplate === "function") {
+        if (enableTemplate && !(diffLine === null || diffLine === void 0 ? void 0 : diffLine.syntaxTemplate) && typeof getSyntaxDiffTemplate === "function") {
             getSyntaxDiffTemplate({ diffLine, syntaxLine, operator });
         }
-        if (diffLine === null || diffLine === void 0 ? void 0 : diffLine.syntaxTemplate) {
+        if (enableTemplate && (diffLine === null || diffLine === void 0 ? void 0 : diffLine.syntaxTemplate)) {
             return (React.createElement("span", { className: "diff-line-syntax-raw" },
                 React.createElement("span", { "data-template": true, dangerouslySetInnerHTML: { __html: diffLine.syntaxTemplate } }),
                 isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (React.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: {
@@ -429,10 +438,10 @@ const DiffSyntax = ({ rawLine, diffLine, operator, syntaxLine, enableWrap, }) =>
                     React.createElement(DiffNoNewLine, null)))));
         }
     }
-    if (!syntaxLine.template) {
+    if (enableTemplate && !syntaxLine.template) {
         syntaxLine.template = getSyntaxLineTemplate(syntaxLine);
     }
-    if (syntaxLine === null || syntaxLine === void 0 ? void 0 : syntaxLine.template) {
+    if (enableTemplate && (syntaxLine === null || syntaxLine === void 0 ? void 0 : syntaxLine.template)) {
         return (React.createElement("span", { className: "diff-line-syntax-raw" },
             React.createElement("span", { "data-template": true, dangerouslySetInnerHTML: { __html: syntaxLine.template } })));
     }
@@ -441,11 +450,12 @@ const DiffSyntax = ({ rawLine, diffLine, operator, syntaxLine, enableWrap, }) =>
         return (React.createElement("span", { key: index, "data-start": node.startIndex, "data-end": node.endIndex, className: (_b = (_a = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _a === void 0 ? void 0 : _a.className) === null || _b === void 0 ? void 0 : _b.join(" "), style: getStyleObjectFromString(((_c = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _c === void 0 ? void 0 : _c.style) || "") }, node.value));
     })));
 };
-const DiffContent = ({ diffLine, rawLine, plainLine, syntaxLine, enableWrap, enableHighlight, }) => {
-    var _a;
+const DiffContent = ({ diffLine, diffFile, rawLine, plainLine, syntaxLine, enableWrap, enableHighlight, }) => {
+    var _a, _b, _c;
     const isAdded = (diffLine === null || diffLine === void 0 ? void 0 : diffLine.type) === DiffLineType.Add;
     const isDelete = (diffLine === null || diffLine === void 0 ? void 0 : diffLine.type) === DiffLineType.Delete;
     const isMaxLineLengthToIgnoreSyntax = ((_a = syntaxLine === null || syntaxLine === void 0 ? void 0 : syntaxLine.nodeList) === null || _a === void 0 ? void 0 : _a.length) > 150;
+    const isEnableTemplate = (_c = (_b = diffFile.getIsEnableTemplate) === null || _b === void 0 ? void 0 : _b.call(diffFile)) !== null && _c !== void 0 ? _c : true;
     return (React.createElement("div", { className: "diff-line-content-item pl-[2.0em]", 
         // data-val={rawLine}
         style: {
@@ -453,7 +463,7 @@ const DiffContent = ({ diffLine, rawLine, plainLine, syntaxLine, enableWrap, ena
             wordBreak: enableWrap ? "break-all" : "initial",
         } },
         React.createElement("span", { "data-operator": isAdded ? "+" : isDelete ? "-" : undefined, className: "diff-line-content-operator ml-[-1.5em] inline-block w-[1.5em] select-none indent-[0.2em]" }, isAdded ? "+" : isDelete ? "-" : " "),
-        enableHighlight && syntaxLine && !isMaxLineLengthToIgnoreSyntax ? (React.createElement(DiffSyntax, { operator: isAdded ? "add" : isDelete ? "del" : undefined, rawLine: rawLine, diffLine: diffLine, syntaxLine: syntaxLine, enableWrap: enableWrap })) : (React.createElement(DiffString, { operator: isAdded ? "add" : isDelete ? "del" : undefined, rawLine: rawLine, diffLine: diffLine, plainLine: plainLine, enableWrap: enableWrap }))));
+        enableHighlight && syntaxLine && !isMaxLineLengthToIgnoreSyntax ? (React.createElement(DiffSyntax, { operator: isAdded ? "add" : isDelete ? "del" : undefined, rawLine: rawLine, diffLine: diffLine, syntaxLine: syntaxLine, enableWrap: enableWrap, enableTemplate: isEnableTemplate })) : (React.createElement(DiffString, { operator: isAdded ? "add" : isDelete ? "del" : undefined, rawLine: rawLine, diffLine: diffLine, plainLine: plainLine, enableWrap: enableWrap, enableTemplate: isEnableTemplate }))));
 };
 
 const DiffViewContext = createContext(null);
@@ -472,7 +482,7 @@ const InternalDiffSplitLine$1 = ({ index, diffFile, lineNumber, side, enableAddW
     const newLine = diffFile.getSplitRightLine(index);
     const currentLine = side === SplitSide.old ? oldLine : newLine;
     const hasDiff = !!(currentLine === null || currentLine === void 0 ? void 0 : currentLine.diff);
-    const hasContent = !!currentLine.lineNumber;
+    const hasContent = !!(currentLine === null || currentLine === void 0 ? void 0 : currentLine.lineNumber);
     const hasChange = checkDiffLineIncludeChange(currentLine === null || currentLine === void 0 ? void 0 : currentLine.diff);
     const isAdded = ((_a = currentLine === null || currentLine === void 0 ? void 0 : currentLine.diff) === null || _a === void 0 ? void 0 : _a.type) === DiffLineType.Add;
     const isDelete = ((_b = currentLine === null || currentLine === void 0 ? void 0 : currentLine.diff) === null || _b === void 0 ? void 0 : _b.type) === DiffLineType.Delete;
@@ -485,7 +495,7 @@ const InternalDiffSplitLine$1 = ({ index, diffFile, lineNumber, side, enableAddW
     const syntaxLine = getCurrentSyntaxLine(currentLine.lineNumber);
     const plainLine = getCurrentPlainLine(currentLine.lineNumber);
     return (React.createElement("tr", { "data-line": lineNumber, "data-state": hasDiff || !hasContent ? "diff" : "plain", "data-side": SplitSide[side], className: "diff-line" + (hasContent ? " group" : "") }, hasContent ? (React.createElement(React.Fragment, null,
-        React.createElement("td", { className: `diff-line-${SplitSide[side]}-num sticky left-0 w-[1%] min-w-[40px] select-none pl-[10px] pr-[10px] text-right align-top`, style: {
+        React.createElement("td", { className: `diff-line-${SplitSide[side]}-num sticky left-0 z-[1] w-[1%] min-w-[40px] select-none pl-[10px] pr-[10px] text-right align-top`, style: {
                 backgroundColor: lineNumberBG,
                 color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
                 width: `var(${diffAsideWidthName})`,
@@ -495,7 +505,7 @@ const InternalDiffSplitLine$1 = ({ index, diffFile, lineNumber, side, enableAddW
             hasDiff && enableAddWidget && (React.createElement(DiffSplitAddWidget, { index: index, lineNumber: currentLine.lineNumber, side: side, 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.createElement("span", { "data-line-num": currentLine.lineNumber, style: { opacity: hasChange ? undefined : 0.5 } }, currentLine.lineNumber)),
         React.createElement("td", { className: `diff-line-${SplitSide[side]}-content pr-[10px] align-top`, style: { backgroundColor: contentBG } },
-            React.createElement(DiffContent, { enableWrap: false, diffFile: diffFile, rawLine: currentLine.value, diffLine: currentLine.diff, plainLine: plainLine, syntaxLine: syntaxLine, enableHighlight: enableHighlight })))) : (React.createElement("td", { className: `diff-line-${SplitSide[side]}-placeholder select-none`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+            React.createElement(DiffContent, { enableWrap: false, diffFile: diffFile, rawLine: (currentLine === null || currentLine === void 0 ? void 0 : currentLine.value) || "", diffLine: currentLine === null || currentLine === void 0 ? void 0 : currentLine.diff, plainLine: plainLine, syntaxLine: syntaxLine, enableHighlight: enableHighlight })))) : (React.createElement("td", { className: `diff-line-${SplitSide[side]}-placeholder select-none`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
         React.createElement("span", null, "\u2002")))));
 };
 const DiffSplitContentLine$1 = ({ index, diffFile, lineNumber, side, enableAddWidget, enableHighlight, }) => {
@@ -771,7 +781,7 @@ const InternalDiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) =
     const { useDiffContext } = useDiffViewContext();
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
-    const widgetSide = useWidget.getReadonlyState().widgetSide;
+    const widgetSide = useWidget.useShallowStableSelector((s) => s.widgetSide);
     const widgetLineNumber = useWidget.getReadonlyState().widgetLineNumber;
     const setWidget = useWidget.getReadonlyState().setWidget;
     const oldLineWidget = oldLine.lineNumber && widgetSide === SplitSide.old && widgetLineNumber === oldLine.lineNumber;
@@ -850,6 +860,7 @@ const DiffSplitViewNormal = memo(({ diffFile }) => {
     const ref1 = useRef(null);
     const ref2 = useRef(null);
     const ref = useRef();
+    const tempRef = useRef();
     const splitLineLength = Math.max(diffFile.splitLineLength, diffFile.fileLineLength);
     const { useDiffContext } = useDiffViewContext();
     const { fontSize, enableAddWidget, enableHighlight } = useDiffContext.useShallowStableSelector((s) => ({
@@ -893,13 +904,19 @@ const DiffSplitViewNormal = memo(({ diffFile }) => {
             const state = ele.getAttribute("data-state");
             const side = ele.getAttribute("data-side");
             if (side) {
-                setStyle(SplitSide[side]);
-                removeAllSelection();
+                if (tempRef.current !== SplitSide[side]) {
+                    tempRef.current = SplitSide[side];
+                    setStyle(SplitSide[side]);
+                    removeAllSelection();
+                }
             }
             if (state) {
                 if (state === "extend" || state === "hunk" || state === "widget") {
-                    setStyle(undefined);
-                    removeAllSelection();
+                    if (tempRef.current !== undefined) {
+                        tempRef.current = undefined;
+                        setStyle(undefined);
+                        removeAllSelection();
+                    }
                     return;
                 }
                 else {
@@ -1143,7 +1160,7 @@ const InternalDiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
     const renderWidgetLine = useDiffContext.useShallowStableSelector((s) => s.renderWidgetLine);
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
-    const widgetSide = useWidget.getReadonlyState().widgetSide;
+    const widgetSide = useWidget.useShallowStableSelector((s) => s.widgetSide);
     const widgetLineNumber = useWidget.getReadonlyState().widgetLineNumber;
     const oldLineWidget = oldLine.lineNumber && widgetSide === SplitSide.old && widgetLineNumber === oldLine.lineNumber;
     const newLineWidget = newLine.lineNumber && widgetSide === SplitSide.new && widgetLineNumber === newLine.lineNumber;
@@ -1186,6 +1203,7 @@ const DiffSplitViewWrap = memo(({ diffFile }) => {
     const splitLineLength = Math.max(diffFile.splitLineLength, diffFile.fileLineLength);
     const { useDiffContext } = useDiffViewContext();
     const ref = useRef(null);
+    const tempRef = useRef();
     const { fontSize, enableAddWidget, enableHighlight } = useDiffContext.useShallowStableSelector((s) => ({
         fontSize: s.fontSize,
         enableAddWidget: s.enableAddWidget,
@@ -1222,13 +1240,19 @@ const DiffSplitViewWrap = memo(({ diffFile }) => {
             const state = ele.getAttribute("data-state");
             const side = ele.getAttribute("data-side");
             if (side) {
-                setStyle(SplitSide[side]);
-                removeAllSelection();
+                if (tempRef.current !== SplitSide[side]) {
+                    tempRef.current = SplitSide[side];
+                    setStyle(SplitSide[side]);
+                    removeAllSelection();
+                }
             }
             if (state) {
                 if (state === "extend" || state === "hunk" || state === "widget") {
-                    setStyle(undefined);
-                    removeAllSelection();
+                    if (tempRef.current !== undefined) {
+                        tempRef.current = undefined;
+                        setStyle(undefined);
+                        removeAllSelection();
+                    }
                     return;
                 }
                 else {
@@ -1388,7 +1412,7 @@ DiffSplitView.displayName = "DiffSplitView";
 
 const DiffUnifiedOldLine = ({ index, diffLine, rawLine, plainLine, syntaxLine, lineNumber, diffFile, setWidget, enableWrap, enableAddWidget, enableHighlight, onAddWidgetClick, }) => {
     return (React.createElement("tr", { "data-line": index, "data-state": "diff", className: "diff-line group" },
-        React.createElement("td", { className: "diff-line-num sticky left-0 w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top", style: {
+        React.createElement("td", { className: "diff-line-num sticky left-0 z-[1] w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top", style: {
                 color: `var(${plainLineNumberColorName})`,
                 backgroundColor: `var(${delLineNumberBGName})`,
                 width: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
@@ -1405,7 +1429,7 @@ const DiffUnifiedOldLine = ({ index, diffLine, rawLine, plainLine, syntaxLine, l
 };
 const DiffUnifiedNewLine = ({ index, diffLine, rawLine, plainLine, syntaxLine, lineNumber, diffFile, setWidget, enableWrap, enableAddWidget, enableHighlight, onAddWidgetClick, }) => {
     return (React.createElement("tr", { "data-line": index, "data-state": "diff", className: "diff-line group" },
-        React.createElement("td", { className: "diff-line-num sticky left-0 w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top", style: {
+        React.createElement("td", { className: "diff-line-num sticky left-0 z-[1] w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top", style: {
                 color: `var(${plainLineNumberColorName})`,
                 backgroundColor: `var(${addLineNumberBGName})`,
                 width: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
@@ -1452,7 +1476,7 @@ const _DiffUnifiedLine = memo(({ index, diffFile, lineNumber, enableWrap, enable
     }
     else {
         return (React.createElement("tr", { "data-line": lineNumber, "data-state": unifiedLine.diff ? "diff" : "plain", className: "diff-line group" },
-            React.createElement("td", { className: "diff-line-num sticky left-0 w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top", style: {
+            React.createElement("td", { className: "diff-line-num sticky left-0 z-[1] w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top", style: {
                     color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
                     width: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
                     maxWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
@@ -1621,6 +1645,7 @@ const DiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, }) => {
 const DiffUnifiedView = memo(({ diffFile }) => {
     const { useDiffContext } = useDiffViewContext();
     const ref = useRef(null);
+    const tempRef = useRef();
     const useDiffContextRef = useRef(useDiffContext);
     useDiffContextRef.current = useDiffContext;
     // performance optimization
@@ -1670,13 +1695,19 @@ const DiffUnifiedView = memo(({ diffFile }) => {
             const state = ele.getAttribute("data-state");
             if (state) {
                 if (state === "extend" || state === "hunk" || state === "widget") {
-                    setStyle(undefined);
-                    removeAllSelection();
+                    if (tempRef.current !== undefined) {
+                        tempRef.current = undefined;
+                        setStyle(undefined);
+                        removeAllSelection();
+                    }
                     return;
                 }
                 else {
-                    setStyle(SplitSide.new);
-                    removeAllSelection();
+                    if (tempRef.current !== SplitSide.new) {
+                        tempRef.current = SplitSide.new;
+                        setStyle(SplitSide.new);
+                        removeAllSelection();
+                    }
                     return;
                 }
             }
@@ -1711,19 +1742,9 @@ const DiffUnifiedView = memo(({ diffFile }) => {
 DiffUnifiedView.displayName = "DiffUnifiedView";
 
 _cacheMap.name = "@git-diff-view/react";
-var DiffModeEnum;
-(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";
-})(DiffModeEnum || (DiffModeEnum = {}));
 const InternalDiffView = (props) => {
-    const { diffFile, className, style, diffViewMode, diffViewWrap, diffViewFontSize, diffViewHighlight, renderWidgetLine, renderExtendLine, extendData, diffViewAddWidget, onAddWidgetClick, onCreateUseWidgetHook, isMounted, } = props;
+    const { diffFile, className, style, wrapperRef, diffViewMode, diffViewWrap, diffViewFontSize, diffViewHighlight, renderWidgetLine, renderExtendLine, extendData, diffViewAddWidget, onAddWidgetClick, onCreateUseWidgetHook, isMounted, } = props;
     const diffFileId = useMemo(() => diffFile.getId(), [diffFile]);
-    const wrapperRef = useRef();
     // performance optimization
     const useDiffContext = useMemo(() => createDiffConfigStore(props, diffFileId), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -1781,17 +1802,9 @@ const InternalDiffView = (props) => {
         onAddWidgetClick,
         onCreateUseWidgetHook,
     ]);
-    useEffect(() => {
-        const cb = diffFile.subscribe(() => {
-            var _a, _b;
-            (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute("data-theme", diffFile._getTheme() || "light");
-            (_b = wrapperRef.current) === null || _b === void 0 ? void 0 : _b.setAttribute("data-highlighter", diffFile._getHighlighterName());
-        });
-        return cb;
-    }, [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.28", "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.30", "data-highlighter": diffFile._getHighlighterName(), ref: wrapperRef },
             React.createElement("div", { className: "diff-style-root", style: {
                     // @ts-ignore
                     [diffFontSizeName]: diffViewFontSize + "px",
@@ -1818,6 +1831,7 @@ const DiffViewWithRef = (props, ref) => {
         return null;
     }, [data, _diffFile]);
     const diffFileRef = useRef(diffFile);
+    const wrapperRef = useRef();
     if (diffFileRef.current && diffFileRef.current !== diffFile) {
         (_b = (_a = diffFileRef.current).clear) === null || _b === void 0 ? void 0 : _b.call(_a);
         diffFileRef.current = diffFile;
@@ -1846,18 +1860,30 @@ const DiffViewWithRef = (props, ref) => {
             diffFile.initSyntax({ registerHighlighter });
             diffFile.notifyAll();
         }
-    }, [diffFile, props.diffViewHighlight, registerHighlighter, diffViewTheme]);
+    }, [diffFile, props.diffViewHighlight, registerHighlighter]);
+    useEffect(() => {
+        if (!diffFile)
+            return;
+        const init = () => {
+            var _a, _b;
+            (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute("data-theme", diffFile._getTheme() || "light");
+            (_b = wrapperRef.current) === null || _b === void 0 ? void 0 : _b.setAttribute("data-highlighter", diffFile._getHighlighterName());
+        };
+        init();
+        const cb = diffFile.subscribe(init);
+        return cb;
+    }, [diffFile, diffViewTheme]);
     // fix react strict mode error
     useUnmount(() => { var _a, _b; return (process.env.NODE_ENV === "development" ? (_a = diffFile === null || diffFile === void 0 ? void 0 : diffFile._destroy) === null || _a === void 0 ? void 0 : _a.call(diffFile) : (_b = diffFile === null || diffFile === void 0 ? void 0 : diffFile.clear) === null || _b === void 0 ? void 0 : _b.call(diffFile)); }, [diffFile]);
     useImperativeHandle(ref, () => ({ getDiffFileInstance: () => diffFile }), [diffFile]);
     if (!diffFile)
         return null;
-    return (React.createElement(MemoedInternalDiffView, Object.assign({ key: diffFile.getId() }, restProps, { diffFile: diffFile, isMounted: isMounted, diffViewMode: restProps.diffViewMode || DiffModeEnum.SplitGitHub, diffViewFontSize: restProps.diffViewFontSize || 14 })));
+    return (React.createElement(MemoedInternalDiffView, Object.assign({ key: diffFile.getId() }, restProps, { diffFile: diffFile, isMounted: isMounted, wrapperRef: wrapperRef, diffViewTheme: diffViewTheme, diffViewMode: restProps.diffViewMode || DiffModeEnum.SplitGitHub, diffViewFontSize: restProps.diffViewFontSize || 14 })));
 };
 const InnerDiffView = forwardRef(DiffViewWithRef);
 InnerDiffView.displayName = "DiffView";
 const DiffView = InnerDiffView;
-const version = "0.0.28";
+const version = "0.0.30";
 
 export { DiffModeEnum, DiffView, version };
 //# sourceMappingURL=index.mjs.map