@git-diff-view/react 0.0.20 → 0.0.22

package/dist/cjs/index.development.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var core = require('@git-diff-view/core');
@@ -84,6 +85,12 @@ const useSafeLayout = isClient ? React.useLayoutEffect : React.useEffect;
 
 var _TextMeasure_instances, _TextMeasure_key, _TextMeasure_map, _TextMeasure_getInstance;
 let canvasCtx = null;
+const getKey = (font, text) => {
+    return `${font.fontFamily}-${font.fontStyle}-${font.fontSize}-${text}`;
+};
+const getStableKey = (font, text) => {
+    return getKey(font, "0".repeat(text.length));
+};
 class TextMeasure {
     constructor() {
         _TextMeasure_instances.add(this);
@@ -91,7 +98,7 @@ class TextMeasure {
         _TextMeasure_map.set(this, {});
     }
     measure(text, font) {
-        const currentKey = `${font === null || font === void 0 ? void 0 : font.fontFamily}-${font === null || font === void 0 ? void 0 : font.fontStyle}-${font === null || font === void 0 ? void 0 : font.fontSize}-${text}`;
+        const currentKey = getStableKey(font, text);
         if (__classPrivateFieldGet(this, _TextMeasure_map, "f")[currentKey]) {
             return __classPrivateFieldGet(this, _TextMeasure_map, "f")[currentKey];
         }
@@ -116,7 +123,12 @@ _TextMeasure_key = new WeakMap(), _TextMeasure_map = new WeakMap(), _TextMeasure
 };
 const measureInstance = new TextMeasure();
 const useTextWidth = ({ text, font, }) => {
-    const [width, setWidth] = React.useState(0);
+    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);
@@ -363,6 +375,18 @@ 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) {
@@ -371,24 +395,16 @@ const DiffString = ({ rawLine, diffLine, operator, enableWrap, }) => {
         const str2 = rawLine.slice(range.location, range.location + range.length);
         const str3 = rawLine.slice(range.location + range.length);
         const isLast = str2.includes("\n");
-        const _str2 = isLast ? str2.replace("\n", "") : str2;
+        const _str2 = isLast ? str2.replace("\n", "").replace("\r", "") : str2;
         const isNewLineSymbolChanged = changes.newLineSymbol;
         return (React__namespace.createElement("span", { className: "diff-line-content-raw" },
             React__namespace.createElement("span", { "data-range-start": range.location, "data-range-end": range.location + range.length },
                 str1,
                 React__namespace.createElement("span", { "data-diff-highlight": true, className: "rounded-[0.2em]", style: {
                         backgroundColor: operator === "add" ? `var(${addContentHighlightBGName})` : `var(${delContentHighlightBGName})`,
-                    } }, isLast
-                    ? `${_str2}${isNewLineSymbolChanged === core.NewLineSymbol.LF
-                        ? "␊"
-                        : isNewLineSymbolChanged === core.NewLineSymbol.CR
-                            ? "␍"
-                            : isNewLineSymbolChanged === core.NewLineSymbol.CRLF
-                                ? "␍␊"
-                                : ""}`
-                    : str2),
+                    } }, isLast ? `${_str2}${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: {
+            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})`,
                     height: `var(${diffFontSizeName})`,
                 } },
@@ -420,7 +436,7 @@ const DiffSyntax = ({ rawLine, diffLine, operator, syntaxLine, enableWrap, }) =>
                     const isStart = str1.length || range.location === node.startIndex;
                     const isEnd = str3.length || node.endIndex === range.location + range.length - 1;
                     const isLast = str2.includes("\n");
-                    const _str2 = isLast ? str2.replace("\n", "") : str2;
+                    const _str2 = isLast ? str2.replace("\n", "").replace("\r", "") : str2;
                     return (React__namespace.createElement("span", { key: index, "data-start": node.startIndex, "data-end": node.endIndex, className: (_e = (_d = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _d === void 0 ? void 0 : _d.className) === null || _e === void 0 ? void 0 : _e.join(" "), style: getStyleObjectFromString(((_f = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _f === void 0 ? void 0 : _f.style) || "") },
                         str1,
                         React__namespace.createElement("span", { "data-diff-highlight": true, style: {
@@ -429,19 +445,11 @@ 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}${isNewLineSymbolChanged === core.NewLineSymbol.LF
-                                ? "␊"
-                                : isNewLineSymbolChanged === core.NewLineSymbol.CR
-                                    ? "␍"
-                                    : isNewLineSymbolChanged === core.NewLineSymbol.CRLF
-                                        ? "␍␊"
-                                        : ""}`
-                            : str2),
+                            } }, isLast ? `${_str2}${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: {
+            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})`,
                     height: `var(${diffFontSizeName})`,
                 } },
@@ -809,6 +817,7 @@ const _DiffSplitWidgetLine$1 = ({ diffFile, side, lineNumber, currentLine, setWi
         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] })))));
 };
+// TODO! improve performance
 const DiffSplitWidgetLine$1 = ({ index, diffFile, side, lineNumber, }) => {
     const { useWidget } = useDiffWidgetContext();
     const { widgetLineNumber, widgetSide, setWidget } = useWidget.useShallowStableSelector((s) => ({
@@ -866,7 +875,7 @@ const DiffSplitViewNormal = React.memo(({ diffFile }) => {
     const splitLineLength = Math.max(diffFile.splitLineLength, diffFile.fileLineLength);
     const { useDiffContext } = useDiffViewContext();
     const fontSize = useDiffContext.useShallowStableSelector((s) => s.fontSize);
-    index_js.useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount);
+    index_js.useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount, diffFile.getUpdateCount);
     React.useEffect(() => {
         const left = ref1.current;
         const right = ref2.current;
@@ -1117,6 +1126,7 @@ const _DiffSplitWidgetLine = ({ index, diffFile, lineNumber, oldLineWidget, newL
         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")))));
 };
+// TODO! improve performance
 const DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
     const { useWidget } = useDiffWidgetContext();
     const { widgetLineNumber, widgetSide } = useWidget((s) => ({
@@ -1147,7 +1157,7 @@ const DiffSplitViewWrap = React.memo(({ diffFile }) => {
     const { useDiffContext } = useDiffViewContext();
     const useSplitConfig = React.useMemo(() => createDiffSplitConfigStore(), []);
     const fontSize = useDiffContext.useShallowStableSelector((s) => s.fontSize);
-    index_js.useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount);
+    index_js.useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount, diffFile.getUpdateCount);
     const onMouseDown = React.useCallback((e) => {
         let ele = e.target;
         const setSelectSide = useSplitConfig.getReadonlyState().setSplit;
@@ -1466,7 +1476,7 @@ const DiffUnifiedView = React.memo(({ diffFile }) => {
         fontSize: s.fontSize,
         enableWrap: s.enableWrap,
     }));
-    index_js.useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount);
+    index_js.useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount, diffFile.getUpdateCount);
     React.useEffect(() => {
         const { setWidget } = useWidget.getReadonlyState();
         setWidget({});
@@ -1553,12 +1563,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.20", "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.22", "data-highlighter": diffFile._getHighlighterName(), ref: wrapperRef },
             React__namespace.createElement("div", { className: "diff-style-root", style: {
                     // @ts-ignore
                     [diffFontSizeName]: diffViewFontSize + "px",
                 } },
-                React__namespace.createElement("div", { 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", { 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 })))))));
 };
 const InternalDiffView = React.memo(_InternalDiffView);
 const DiffViewWithRef = (props, ref) => {
@@ -1615,9 +1625,10 @@ const DiffViewWithRef = (props, ref) => {
         return null;
     return (React__namespace.createElement(InternalDiffView, Object.assign({ key: diffFile.getId() }, restProps, { diffFile: diffFile, diffViewMode: restProps.diffViewMode || exports.DiffModeEnum.SplitGitHub, diffViewFontSize: restProps.diffViewFontSize || 14 })));
 };
-const DiffView = React.forwardRef(DiffViewWithRef);
-DiffView.displayName = "DiffView";
-const version = "0.0.20";
+const InnerDiffView = React.forwardRef(DiffViewWithRef);
+InnerDiffView.displayName = "DiffView";
+const DiffView = InnerDiffView;
+const version = "0.0.22";
 
 exports.DiffView = DiffView;
 exports.DiffViewContext = DiffViewContext;