@git-diff-view/react 0.0.18 → 0.0.20

package/dist/cjs/index.production.js

@@ -575,37 +575,45 @@ const useDiffViewContext = () => React.useContext(DiffViewContext);
 const useSyncHeight = ({ selector, wrapper, side, enable, }) => {
     const { useDiffContext } = useDiffViewContext();
     const id = useDiffContext(React.useCallback((s) => s.id, []));
-    useSafeLayout(() => {
+    React.useEffect(() => {
         if (enable) {
-            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");
-                return () => {
-                    observer.disconnect();
-                    target === null || target === void 0 ? void 0 : target.removeAttribute("data-observe");
-                };
-            }
+            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");
+                    };
+                }
+            });
+            return () => {
+                clean();
+                clearTimeout(timer);
+            };
         }
     }, [selector, enable, side, id, wrapper]);
 };
@@ -617,28 +625,29 @@ const _DiffSplitExtendLine$1 = ({ index, diffFile, oldLineExtend, newLineExtend,
     const renderExtendLine = useDiffContext.useShallowStableSelector((s) => s.renderExtendLine);
     const currentExtend = side === exports.SplitSide.old ? oldLineExtend : newLineExtend;
     const currentLineNumber = side === exports.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 currentExtendRendered = hasExtend &&
+        (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
+            diffFile,
+            side,
+            lineNumber: currentLineNumber,
+            data: currentExtend.data,
+            onUpdate: diffFile.notifyAll,
+        }));
     useSyncHeight({
         selector: `div[data-line="${lineNumber}-extend-content"]`,
         wrapper: `tr[data-line="${lineNumber}-extend"]`,
         side: exports.SplitSide[side],
-        enable: !!(currentExtend === null || currentExtend === void 0 ? void 0 : currentExtend.data) && typeof renderExtendLine === "function",
+        enable: hasExtend && typeof renderExtendLine === "function",
     });
     const width = useDomWidth({
         selector: side === exports.SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper",
-        enable: !!(currentExtend === null || currentExtend === void 0 ? void 0 : currentExtend.data) && typeof renderExtendLine === "function",
+        enable: hasExtend && typeof renderExtendLine === "function",
     });
     if (!renderExtendLine)
         return null;
-    return (React__namespace.createElement("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", "data-side": exports.SplitSide[side], className: "diff-line diff-line-extend" }, currentExtend ? (React__namespace.createElement("td", { className: `diff-line-extend-${exports.SplitSide[side]}-content p-0`, colSpan: 2 },
-        React__namespace.createElement("div", { "data-line": `${lineNumber}-extend-content`, "data-side": exports.SplitSide[side], className: "diff-line-extend-wrapper sticky left-0", style: { width } }, width > 0 &&
-            (currentExtend === null || currentExtend === void 0 ? void 0 : currentExtend.data) &&
-            (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
-                diffFile,
-                side,
-                lineNumber: currentLineNumber,
-                data: currentExtend.data,
-                onUpdate: diffFile.notifyAll,
-            }))))) : (React__namespace.createElement("td", { className: `diff-line-extend-${exports.SplitSide[side]}-placeholder select-none p-0`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+    return (React__namespace.createElement("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", "data-side": exports.SplitSide[side], className: "diff-line diff-line-extend" }, hasExtend ? (React__namespace.createElement("td", { className: `diff-line-extend-${exports.SplitSide[side]}-content p-0`, colSpan: 2 },
+        React__namespace.createElement("div", { "data-line": `${lineNumber}-extend-content`, "data-side": exports.SplitSide[side], className: "diff-line-extend-wrapper sticky left-0", style: { width } }, width > 0 && currentExtendRendered))) : (React__namespace.createElement("td", { className: `diff-line-extend-${exports.SplitSide[side]}-placeholder select-none p-0`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
         React__namespace.createElement("div", { "data-line": `${lineNumber}-extend-content`, "data-side": exports.SplitSide[side] })))));
 };
 const DiffSplitExtendLine$1 = ({ index, diffFile, side, lineNumber, }) => {
@@ -777,11 +786,18 @@ const DiffSplitHunkLine$1 = ({ index, diffFile, side, lineNumber, }) => {
 const _DiffSplitWidgetLine$1 = ({ diffFile, side, lineNumber, currentLine, setWidget, currentWidget, }) => {
     const { useDiffContext } = useDiffViewContext();
     const renderWidgetLine = useDiffContext.useShallowStableSelector((s) => s.renderWidgetLine);
+    const currentWidgetRendered = currentWidget &&
+        (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({
+            diffFile,
+            side,
+            lineNumber: currentLine.lineNumber,
+            onClose: () => setWidget({}),
+        }));
     useSyncHeight({
         selector: `div[data-line="${lineNumber}-widget-content"]`,
         wrapper: `tr[data-line="${lineNumber}-widget"]`,
         side: exports.SplitSide[side],
-        enable: currentWidget && typeof renderWidgetLine === "function",
+        enable: !!currentWidget && typeof renderWidgetLine === "function",
     });
     const width = useDomWidth({
         selector: side === exports.SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper",
@@ -790,13 +806,7 @@ const _DiffSplitWidgetLine$1 = ({ diffFile, side, lineNumber, currentLine, setWi
     if (!renderWidgetLine)
         return null;
     return (React__namespace.createElement("tr", { "data-line": `${lineNumber}-widget`, "data-state": "widget", "data-side": exports.SplitSide[side], className: "diff-line diff-line-widget" }, currentWidget ? (React__namespace.createElement("td", { className: `diff-line-widget-${exports.SplitSide[side]}-content p-0`, colSpan: 2 },
-        React__namespace.createElement("div", { "data-line": `${lineNumber}-widget-content`, "data-side": exports.SplitSide[side], className: "diff-line-widget-wrapper sticky left-0", style: { width } }, width > 0 &&
-            (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({
-                diffFile,
-                side,
-                lineNumber: currentLine.lineNumber,
-                onClose: () => setWidget({}),
-            }))))) : (React__namespace.createElement("td", { className: `diff-line-widget-${exports.SplitSide[side]}-placeholder p-0`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+        React__namespace.createElement("div", { "data-line": `${lineNumber}-widget-content`, "data-side": exports.SplitSide[side], className: "diff-line-widget-wrapper sticky left-0", style: { width } }, width > 0 && currentWidgetRendered))) : (React__namespace.createElement("td", { className: `diff-line-widget-${exports.SplitSide[side]}-placeholder p-0`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
         React__namespace.createElement("div", { "data-line": `${lineNumber}-widget-content`, "data-side": exports.SplitSide[side] })))));
 };
 const DiffSplitWidgetLine$1 = ({ index, diffFile, side, lineNumber, }) => {
@@ -953,27 +963,27 @@ const _DiffSplitExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newL
     const renderExtendLine = useDiffContext.useShallowStableSelector((s) => s.renderExtendLine);
     if (!renderExtendLine)
         return null;
+    const oldExtendRendered = (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) &&
+        (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
+            diffFile,
+            side: exports.SplitSide.old,
+            lineNumber: oldLine.lineNumber,
+            data: oldLineExtend.data,
+            onUpdate: diffFile.notifyAll,
+        }));
+    const newExtendRendered = (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data) &&
+        (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
+            diffFile,
+            side: exports.SplitSide.new,
+            lineNumber: newLine.lineNumber,
+            data: newLineExtend.data,
+            onUpdate: diffFile.notifyAll,
+        }));
     return (React__namespace.createElement("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", className: "diff-line diff-line-extend" },
-        oldLineExtend ? (React__namespace.createElement("td", { className: "diff-line-extend-old-content p-0", colSpan: 2 },
-            React__namespace.createElement("div", { className: "diff-line-extend-wrapper" }, (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) &&
-                (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
-                    diffFile,
-                    side: exports.SplitSide.old,
-                    lineNumber: oldLine.lineNumber,
-                    data: oldLineExtend.data,
-                    onUpdate: diffFile.notifyAll,
-                }))))) : (React__namespace.createElement("td", { className: "diff-line-extend-old-placeholder select-none p-0", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
-            React__namespace.createElement("span", null, "\u2002"))),
-        newLineExtend ? (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" }, (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data) &&
-                (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
-                    diffFile,
-                    side: exports.SplitSide.new,
-                    lineNumber: newLine.lineNumber,
-                    data: newLineExtend.data,
-                    onUpdate: diffFile.notifyAll,
-                }))))) : (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 },
-            React__namespace.createElement("span", null, "\u2002")))));
+        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")))));
 };
 const DiffSplitExtendLine = ({ index, diffFile, lineNumber, }) => {
     const { useDiffContext } = useDiffViewContext();
@@ -1095,25 +1105,17 @@ const _DiffSplitWidgetLine = ({ index, diffFile, lineNumber, oldLineWidget, newL
     const renderWidgetLine = useDiffContext.useShallowStableSelector((s) => s.renderWidgetLine);
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
+    const oldWidgetRendered = oldLineWidget &&
+        (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({ diffFile, side: exports.SplitSide.old, lineNumber: oldLine.lineNumber, onClose: () => setWidget({}) }));
+    const newWidgetRendered = newLineWidget &&
+        (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({ diffFile, side: exports.SplitSide.new, lineNumber: newLine.lineNumber, onClose: () => setWidget({}) }));
     if (!renderWidgetLine)
         return null;
     return (React__namespace.createElement("tr", { "data-line": `${lineNumber}-widget`, "data-state": "widget", className: "diff-line diff-line-widget" },
-        oldLineWidget ? (React__namespace.createElement("td", { className: "diff-line-widget-old-content p-0", colSpan: 2 },
-            React__namespace.createElement("div", { className: "diff-line-widget-wrapper" }, renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({
-                diffFile,
-                side: exports.SplitSide.old,
-                lineNumber: oldLine.lineNumber,
-                onClose: () => setWidget({}),
-            })))) : (React__namespace.createElement("td", { className: "diff-line-widget-old-placeholder select-none p-0", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
-            React__namespace.createElement("span", null, "\u2002"))),
-        newLineWidget ? (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" }, renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({
-                diffFile,
-                side: exports.SplitSide.new,
-                lineNumber: newLine.lineNumber,
-                onClose: () => setWidget({}),
-            })))) : (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 },
-            React__namespace.createElement("span", null, "\u2002")))));
+        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")))));
 };
 const DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
     const { useWidget } = useDiffWidgetContext();
@@ -1325,7 +1327,8 @@ const _DiffUnifiedExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, ne
         React__namespace.createElement("td", { className: "diff-line-extend-content p-0 align-top", colSpan: 2 },
             React__namespace.createElement("div", { className: "diff-line-extend-wrapper sticky left-0", style: { width } },
                 width > 0 &&
-                    (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) &&
+                    (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) !== undefined &&
+                    (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) !== null &&
                     (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
                         diffFile,
                         side: exports.SplitSide.old,
@@ -1334,7 +1337,8 @@ const _DiffUnifiedExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, ne
                         onUpdate: diffFile.notifyAll,
                     })),
                 width > 0 &&
-                    (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data) &&
+                    (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data) !== undefined &&
+                    (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data) !== null &&
                     (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
                         diffFile,
                         side: exports.SplitSide.new,
@@ -1541,14 +1545,15 @@ const _InternalDiffView = (props) => {
     ]);
     React.useEffect(() => {
         const cb = diffFile.subscribe(() => {
-            var _a;
+            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 = 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.18", "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.20", "data-highlighter": diffFile._getHighlighterName(), ref: wrapperRef },
             React__namespace.createElement("div", { className: "diff-style-root", style: {
                     // @ts-ignore
                     [diffFontSizeName]: diffViewFontSize + "px",
@@ -1562,6 +1567,9 @@ const DiffViewWithRef = (props, ref) => {
     const diffFile = React.useMemo(() => {
         var _a, _b, _c, _d, _e, _f;
         if (_diffFile) {
+            // missing data for plain file render
+            // TODO next release update ?
+            // will cause more complex for diffFile flow control, keep current
             const diffFile = core.DiffFile.createInstance({});
             diffFile._mergeFullBundle(_diffFile._getFullBundle());
             return diffFile;
@@ -1576,6 +1584,14 @@ const DiffViewWithRef = (props, ref) => {
         (_b = (_a = diffFileRef.current).clear) === null || _b === void 0 ? void 0 : _b.call(_a);
         diffFileRef.current = diffFile;
     }
+    React.useEffect(() => {
+        if (_diffFile && diffFile) {
+            _diffFile._addClonedInstance(diffFile);
+            return () => {
+                _diffFile._delClonedInstance(diffFile);
+            };
+        }
+    }, [diffFile, _diffFile]);
     React.useEffect(() => {
         if (!diffFile)
             return;
@@ -1592,16 +1608,8 @@ const DiffViewWithRef = (props, ref) => {
             diffFile.notifyAll();
         }
     }, [diffFile, props.diffViewHighlight, registerHighlighter, diffViewTheme]);
-    React.useEffect(() => {
-        if (_diffFile && diffFile) {
-            _diffFile._addClonedInstance(diffFile);
-            return () => {
-                _diffFile._delClonedInstance(diffFile);
-            };
-        }
-    }, [diffFile, _diffFile]);
     // fix react strict mode error
-    useUnmount(() => { var _a; return (_a = diffFile === null || diffFile === void 0 ? void 0 : diffFile._destroy) === null || _a === void 0 ? void 0 : _a.call(diffFile); }, [diffFile]);
+    useUnmount(() => { var _b; return ((_b = diffFile === null || diffFile === void 0 ? void 0 : diffFile.clear) === null || _b === void 0 ? void 0 : _b.call(diffFile)); }, [diffFile]);
     React.useImperativeHandle(ref, () => ({ getDiffFileInstance: () => diffFile }), [diffFile]);
     if (!diffFile)
         return null;
@@ -1609,7 +1617,7 @@ const DiffViewWithRef = (props, ref) => {
 };
 const DiffView = React.forwardRef(DiffViewWithRef);
 DiffView.displayName = "DiffView";
-const version = "0.0.18";
+const version = "0.0.20";
 
 exports.DiffView = DiffView;
 exports.DiffViewContext = DiffViewContext;