@git-diff-view/react 0.0.35 → 0.0.37

package/src/components/DiffContent.tsx

@@ -6,14 +6,7 @@ import {
   getPlainDiffTemplate,
   getPlainLineTemplate,
 } from "@git-diff-view/core";
-import {
-  memoFunc,
-  addContentHighlightBGName,
-  delContentHighlightBGName,
-  diffFontSizeName,
-  getSymbol,
-  NewLineSymbol,
-} from "@git-diff-view/utils";
+import { memoFunc, diffFontSizeName, NewLineSymbol } from "@git-diff-view/utils";
 import * as React from "react";
 
 import { DiffNoNewLine } from "./DiffNoNewLine";
@@ -54,25 +47,23 @@ const DiffString = ({
   operator,
   plainLine,
   enableWrap,
-  enableTemplate,
 }: {
   rawLine: string;
   diffLine?: DiffLine;
   operator?: "add" | "del";
   plainLine?: File["plainFile"][number];
   enableWrap?: boolean;
-  enableTemplate?: boolean;
 }) => {
   const changes = diffLine?.changes;
 
   if (changes?.hasLineChange) {
     const isNewLineSymbolChanged = changes.newLineSymbol;
 
-    if (enableTemplate && !diffLine?.plainTemplate && typeof getPlainDiffTemplate === "function") {
+    if (!diffLine?.plainTemplate && typeof getPlainDiffTemplate === "function") {
       getPlainDiffTemplate({ diffLine, rawLine, operator });
     }
 
-    if (enableTemplate && diffLine?.plainTemplate) {
+    if (diffLine?.plainTemplate) {
       return (
         <span className="diff-line-content-raw">
           <span data-template dangerouslySetInnerHTML={{ __html: diffLine.plainTemplate }} />
@@ -90,59 +81,14 @@ const DiffString = ({
           )}
         </span>
       );
-    } else {
-      // TODO remove
-      const range = changes.range;
-      const str1 = rawLine.slice(0, range.location);
-      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", "").replace("\r", "") : str2;
-      return (
-        <span className="diff-line-content-raw">
-          <span data-range-start={range.location} data-range-end={range.location + range.length}>
-            {str1}
-            <span
-              data-diff-highlight
-              className="rounded-[0.2em]"
-              style={{
-                backgroundColor:
-                  operator === "add" ? `var(${addContentHighlightBGName})` : `var(${delContentHighlightBGName})`,
-              }}
-            >
-              {isLast ? (
-                <>
-                  {_str2}
-                  <span data-newline-symbol>{getSymbol(isNewLineSymbolChanged)}</span>
-                </>
-              ) : (
-                str2
-              )}
-            </span>
-            {str3}
-          </span>
-          {isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (
-            <span
-              data-no-newline-at-end-of-file-symbol
-              className={enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500"}
-              style={{
-                width: `var(${diffFontSizeName})`,
-                height: `var(${diffFontSizeName})`,
-              }}
-            >
-              <DiffNoNewLine />
-            </span>
-          )}
-        </span>
-      );
     }
   }
 
-  if (enableTemplate && plainLine && !plainLine?.template) {
+  if (plainLine && !plainLine?.template) {
     plainLine.template = getPlainLineTemplate(plainLine.value);
   }
 
-  if (enableTemplate && plainLine?.template) {
+  if (plainLine?.template) {
     return (
       <span className="diff-line-content-raw">
         <span data-template dangerouslySetInnerHTML={{ __html: plainLine.template }} />
@@ -155,29 +101,21 @@ const DiffString = ({
 
 const DiffSyntax = ({
   rawLine,
+  diffFile,
   diffLine,
   operator,
   syntaxLine,
   enableWrap,
-  enableTemplate,
 }: {
   rawLine: string;
+  diffFile: DiffFile;
   diffLine?: DiffLine;
   syntaxLine?: File["syntaxFile"][number];
   operator?: "add" | "del";
   enableWrap?: boolean;
-  enableTemplate?: boolean;
 }) => {
   if (!syntaxLine) {
-    return (
-      <DiffString
-        rawLine={rawLine}
-        diffLine={diffLine}
-        operator={operator}
-        enableWrap={enableWrap}
-        enableTemplate={enableTemplate}
-      />
-    );
+    return <DiffString rawLine={rawLine} diffLine={diffLine} operator={operator} enableWrap={enableWrap} />;
   }
 
   const changes = diffLine?.changes;
@@ -185,11 +123,11 @@ const DiffSyntax = ({
   if (changes?.hasLineChange) {
     const isNewLineSymbolChanged = changes.newLineSymbol;
 
-    if (enableTemplate && !diffLine?.syntaxTemplate && typeof getSyntaxDiffTemplate === "function") {
-      getSyntaxDiffTemplate({ diffLine, syntaxLine, operator });
+    if (!diffLine?.syntaxTemplate && typeof getSyntaxDiffTemplate === "function") {
+      getSyntaxDiffTemplate({ diffFile, diffLine, syntaxLine, operator });
     }
 
-    if (enableTemplate && diffLine?.syntaxTemplate) {
+    if (diffLine?.syntaxTemplate) {
       return (
         <span className="diff-line-syntax-raw">
           <span data-template dangerouslySetInnerHTML={{ __html: diffLine.syntaxTemplate }} />
@@ -207,95 +145,14 @@ const DiffSyntax = ({
           )}
         </span>
       );
-    } else {
-      // TODO remove
-      const range = changes.range;
-
-      return (
-        <span className="diff-line-syntax-raw">
-          <span data-range-start={range.location} data-range-end={range.location + range.length}>
-            {syntaxLine.nodeList?.map(({ node, wrapper }, index) => {
-              if (node.endIndex < range.location || range.location + range.length < node.startIndex) {
-                return (
-                  <span
-                    key={index}
-                    data-start={node.startIndex}
-                    data-end={node.endIndex}
-                    className={wrapper?.properties?.className?.join(" ")}
-                    style={getStyleObjectFromString(wrapper?.properties?.style || "")}
-                  >
-                    {node.value}
-                  </span>
-                );
-              } else {
-                const index1 = range.location - node.startIndex;
-                const index2 = index1 < 0 ? 0 : index1;
-                const str1 = node.value.slice(0, index2);
-                const str2 = node.value.slice(index2, index1 + range.length);
-                const str3 = node.value.slice(index1 + range.length);
-                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", "").replace("\r", "") : str2;
-                return (
-                  <span
-                    key={index}
-                    data-start={node.startIndex}
-                    data-end={node.endIndex}
-                    className={wrapper?.properties?.className?.join(" ")}
-                    style={getStyleObjectFromString(wrapper?.properties?.style || "")}
-                  >
-                    {str1}
-                    <span
-                      data-diff-highlight
-                      style={{
-                        backgroundColor:
-                          operator === "add"
-                            ? `var(${addContentHighlightBGName})`
-                            : `var(${delContentHighlightBGName})`,
-                        borderTopLeftRadius: isStart ? "0.2em" : undefined,
-                        borderBottomLeftRadius: isStart ? "0.2em" : undefined,
-                        borderTopRightRadius: isEnd || isLast ? "0.2em" : undefined,
-                        borderBottomRightRadius: isEnd || isLast ? "0.2em" : undefined,
-                      }}
-                    >
-                      {isLast ? (
-                        <>
-                          {_str2}
-                          <span data-newline-symbol>{getSymbol(isNewLineSymbolChanged)}</span>
-                        </>
-                      ) : (
-                        str2
-                      )}
-                    </span>
-                    {str3}
-                  </span>
-                );
-              }
-            })}
-          </span>
-          {isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (
-            <span
-              data-no-newline-at-end-of-file-symbol
-              className={enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500"}
-              style={{
-                width: `var(${diffFontSizeName})`,
-                height: `var(${diffFontSizeName})`,
-              }}
-            >
-              <DiffNoNewLine />
-            </span>
-          )}
-        </span>
-      );
     }
   }
 
-  if (enableTemplate && !syntaxLine.template) {
+  if (!syntaxLine.template) {
     syntaxLine.template = getSyntaxLineTemplate(syntaxLine);
   }
 
-  if (enableTemplate && syntaxLine?.template) {
+  if (syntaxLine?.template) {
     return (
       <span className="diff-line-syntax-raw">
         <span data-template dangerouslySetInnerHTML={{ __html: syntaxLine.template }} />
@@ -321,8 +178,8 @@ const DiffSyntax = ({
 };
 
 export const DiffContent = ({
-  diffLine,
   diffFile,
+  diffLine,
   rawLine,
   plainLine,
   syntaxLine,
@@ -343,8 +200,6 @@ export const DiffContent = ({
 
   const isMaxLineLengthToIgnoreSyntax = syntaxLine?.nodeList?.length > 150;
 
-  const isEnableTemplate = diffFile.getIsEnableTemplate?.() ?? true;
-
   return (
     <div
       className="diff-line-content-item pl-[2.0em]"
@@ -364,10 +219,10 @@ export const DiffContent = ({
         <DiffSyntax
           operator={isAdded ? "add" : isDelete ? "del" : undefined}
           rawLine={rawLine}
+          diffFile={diffFile}
           diffLine={diffLine}
           syntaxLine={syntaxLine}
           enableWrap={enableWrap}
-          enableTemplate={isEnableTemplate}
         />
       ) : (
         <DiffString
@@ -376,7 +231,6 @@ export const DiffContent = ({
           diffLine={diffLine}
           plainLine={plainLine}
           enableWrap={enableWrap}
-          enableTemplate={isEnableTemplate}
         />
       )}
     </div>

package/src/components/DiffUnifiedContentLine.tsx

@@ -12,7 +12,6 @@ import {
   expandLineNumberColorName,
 } from "@git-diff-view/utils";
 import * as React from "react";
-import { memo } from "react";
 
 import { SplitSide } from "..";
 
@@ -167,148 +166,144 @@ const DiffUnifiedNewLine = ({
   );
 };
 
-const _DiffUnifiedLine = memo(
-  ({
-    index,
-    diffFile,
-    lineNumber,
-    enableWrap,
-    enableAddWidget,
-    enableHighlight,
-  }: {
-    index: number;
-    diffFile: DiffFile;
-    lineNumber: number;
-    enableWrap: boolean;
-    enableHighlight: boolean;
-    enableAddWidget: boolean;
-  }) => {
-    const unifiedLine = diffFile.getUnifiedLine(index);
+const InternalDiffUnifiedLine = ({
+  index,
+  diffFile,
+  lineNumber,
+  enableWrap,
+  enableAddWidget,
+  enableHighlight,
+}: {
+  index: number;
+  diffFile: DiffFile;
+  lineNumber: number;
+  enableWrap: boolean;
+  enableHighlight: boolean;
+  enableAddWidget: boolean;
+}) => {
+  const unifiedLine = diffFile.getUnifiedLine(index);
 
-    const { useDiffContext } = useDiffViewContext();
+  const { useDiffContext } = useDiffViewContext();
 
-    const onAddWidgetClick = useDiffContext.getReadonlyState().onAddWidgetClick;
+  const onAddWidgetClick = useDiffContext.getReadonlyState().onAddWidgetClick;
 
-    const { useWidget } = useDiffWidgetContext();
+  const { useWidget } = useDiffWidgetContext();
 
-    const setWidget = useWidget.getReadonlyState().setWidget;
+  const setWidget = useWidget.getReadonlyState().setWidget;
 
-    const hasDiff = unifiedLine.diff;
+  const hasDiff = unifiedLine.diff;
 
-    const hasChange = checkDiffLineIncludeChange(unifiedLine.diff);
+  const hasChange = checkDiffLineIncludeChange(unifiedLine.diff);
 
-    const rawLine = unifiedLine.value || "";
+  const rawLine = unifiedLine.value || "";
 
-    const diffLine = unifiedLine.diff;
+  const diffLine = unifiedLine.diff;
 
-    const newLineNumber = unifiedLine.newLineNumber;
+  const newLineNumber = unifiedLine.newLineNumber;
 
-    const oldLinenumber = unifiedLine.oldLineNumber;
+  const oldLinenumber = unifiedLine.oldLineNumber;
 
-    const syntaxLine = newLineNumber
-      ? diffFile.getNewSyntaxLine(newLineNumber)
-      : oldLinenumber
-        ? diffFile.getOldSyntaxLine(oldLinenumber)
-        : undefined;
+  const syntaxLine = newLineNumber
+    ? diffFile.getNewSyntaxLine(newLineNumber)
+    : oldLinenumber
+      ? diffFile.getOldSyntaxLine(oldLinenumber)
+      : undefined;
 
-    const plainLine = newLineNumber
-      ? diffFile.getNewPlainLine(newLineNumber)
-      : oldLinenumber
-        ? diffFile.getOldPlainLine(oldLinenumber)
-        : undefined;
+  const plainLine = newLineNumber
+    ? diffFile.getNewPlainLine(newLineNumber)
+    : oldLinenumber
+      ? diffFile.getOldPlainLine(oldLinenumber)
+      : undefined;
 
-    if (hasChange) {
-      if (unifiedLine.oldLineNumber) {
-        return (
-          <DiffUnifiedOldLine
-            index={lineNumber}
+  if (hasChange) {
+    if (unifiedLine.oldLineNumber) {
+      return (
+        <DiffUnifiedOldLine
+          index={lineNumber}
+          enableWrap={enableWrap}
+          diffFile={diffFile}
+          rawLine={rawLine}
+          diffLine={diffLine}
+          setWidget={setWidget}
+          plainLine={plainLine}
+          syntaxLine={syntaxLine}
+          enableHighlight={enableHighlight}
+          enableAddWidget={enableAddWidget}
+          lineNumber={unifiedLine.oldLineNumber}
+          onAddWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
+        />
+      );
+    } else {
+      return (
+        <DiffUnifiedNewLine
+          index={lineNumber}
+          enableWrap={enableWrap}
+          rawLine={rawLine}
+          diffLine={diffLine}
+          diffFile={diffFile}
+          setWidget={setWidget}
+          plainLine={plainLine}
+          syntaxLine={syntaxLine}
+          enableHighlight={enableHighlight}
+          enableAddWidget={enableAddWidget}
+          lineNumber={unifiedLine.newLineNumber!}
+          onAddWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
+        />
+      );
+    }
+  } else {
+    return (
+      <tr data-line={lineNumber} data-state={unifiedLine.diff ? "diff" : "plain"} className="diff-line group">
+        <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)`,
+            minWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+            backgroundColor: hasDiff ? `var(${plainLineNumberBGName})` : `var(${expandContentBGName})`,
+          }}
+        >
+          {enableAddWidget && hasDiff && (
+            <DiffUnifiedAddWidget
+              index={index}
+              diffFile={diffFile}
+              lineNumber={unifiedLine.newLineNumber}
+              side={SplitSide.new}
+              onWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
+              onOpenAddWidget={(lineNumber, side) => setWidget({ lineNumber, side })}
+            />
+          )}
+          <div className="flex opacity-[0.5]">
+            <span data-line-old-num={unifiedLine.oldLineNumber} className="inline-block w-[50%]">
+              {unifiedLine.oldLineNumber}
+            </span>
+            <span className="w-[10px] shrink-0" />
+            <span data-line-new-num={unifiedLine.newLineNumber} className="inline-block w-[50%]">
+              {unifiedLine.newLineNumber}
+            </span>
+          </div>
+        </td>
+        <td
+          className="diff-line-content pr-[10px] align-top"
+          style={{
+            backgroundColor: hasDiff ? `var(${plainContentBGName})` : `var(${expandContentBGName})`,
+          }}
+        >
+          <DiffContent
             enableWrap={enableWrap}
             diffFile={diffFile}
-            rawLine={rawLine}
-            diffLine={diffLine}
-            setWidget={setWidget}
-            plainLine={plainLine}
-            syntaxLine={syntaxLine}
             enableHighlight={enableHighlight}
-            enableAddWidget={enableAddWidget}
-            lineNumber={unifiedLine.oldLineNumber}
-            onAddWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
-          />
-        );
-      } else {
-        return (
-          <DiffUnifiedNewLine
-            index={lineNumber}
-            enableWrap={enableWrap}
             rawLine={rawLine}
             diffLine={diffLine}
-            diffFile={diffFile}
-            setWidget={setWidget}
             plainLine={plainLine}
             syntaxLine={syntaxLine}
-            enableHighlight={enableHighlight}
-            enableAddWidget={enableAddWidget}
-            lineNumber={unifiedLine.newLineNumber!}
-            onAddWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
           />
-        );
-      }
-    } else {
-      return (
-        <tr data-line={lineNumber} data-state={unifiedLine.diff ? "diff" : "plain"} className="diff-line group">
-          <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)`,
-              minWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
-              backgroundColor: hasDiff ? `var(${plainLineNumberBGName})` : `var(${expandContentBGName})`,
-            }}
-          >
-            {enableAddWidget && hasDiff && (
-              <DiffUnifiedAddWidget
-                index={index}
-                diffFile={diffFile}
-                lineNumber={unifiedLine.newLineNumber}
-                side={SplitSide.new}
-                onWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
-                onOpenAddWidget={(lineNumber, side) => setWidget({ lineNumber, side })}
-              />
-            )}
-            <div className="flex opacity-[0.5]">
-              <span data-line-old-num={unifiedLine.oldLineNumber} className="inline-block w-[50%]">
-                {unifiedLine.oldLineNumber}
-              </span>
-              <span className="w-[10px] shrink-0" />
-              <span data-line-new-num={unifiedLine.newLineNumber} className="inline-block w-[50%]">
-                {unifiedLine.newLineNumber}
-              </span>
-            </div>
-          </td>
-          <td
-            className="diff-line-content pr-[10px] align-top"
-            style={{
-              backgroundColor: hasDiff ? `var(${plainContentBGName})` : `var(${expandContentBGName})`,
-            }}
-          >
-            <DiffContent
-              enableWrap={enableWrap}
-              diffFile={diffFile}
-              enableHighlight={enableHighlight}
-              rawLine={rawLine}
-              diffLine={diffLine}
-              plainLine={plainLine}
-              syntaxLine={syntaxLine}
-            />
-          </td>
-        </tr>
-      );
-    }
+        </td>
+      </tr>
+    );
   }
-);
-
-_DiffUnifiedLine.displayName = "_DiffUnifiedLine";
+};
 
 export const DiffUnifiedContentLine = ({
   index,
@@ -330,7 +325,7 @@ export const DiffUnifiedContentLine = ({
   if (unifiedLine?.isHidden) return null;
 
   return (
-    <_DiffUnifiedLine
+    <InternalDiffUnifiedLine
       index={index}
       diffFile={diffFile}
       lineNumber={lineNumber}

package/src/components/DiffView.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import { DiffFile, _cacheMap, SplitSide } from "@git-diff-view/core";
+import { DiffFile, _cacheMap, SplitSide, highlighter as buildInHighlighter } from "@git-diff-view/core";
 import { diffFontSizeName, DiffModeEnum } from "@git-diff-view/utils";
 import { memo, useEffect, useMemo, forwardRef, useImperativeHandle, useRef } from "react";
 import * as React from "react";
@@ -315,10 +315,19 @@ const DiffViewWithRef = <T extends unknown>(
     if (!diffFile) return;
 
     if (props.diffViewHighlight) {
-      diffFile.initSyntax({ registerHighlighter });
+      const finalHighlighter = registerHighlighter || buildInHighlighter;
+
+      if (
+        finalHighlighter.name !== diffFile._getHighlighterName() ||
+        finalHighlighter.type !== diffFile._getHighlighterType()
+      ) {
+        diffFile.initSyntax({ registerHighlighter: finalHighlighter });
+        diffFile.notifyAll();
+      } else {
+        diffFile.initSyntax({ registerHighlighter: finalHighlighter });
+        if (finalHighlighter.type !== "class") diffFile.notifyAll();
+      }
     }
-
-    diffFile.notifyAll();
   }, [diffFile, props.diffViewHighlight, registerHighlighter, diffViewTheme]);
 
   useEffect(() => {
@@ -334,7 +343,7 @@ const DiffViewWithRef = <T extends unknown>(
     const cb = diffFile.subscribe(init);
 
     return cb;
-  }, [diffFile]);
+  }, [diffFile, diffViewTheme]);
 
   // fix react strict mode error
   useUnmount(() => (__DEV__ ? diffFile?._destroy?.() : diffFile?.clear?.()), [diffFile]);

package/styles/diff-view-pure.css

@@ -187,9 +187,6 @@
 .diff-tailwindcss-wrapper .break-all {
   word-break: break-all;
 }
-.diff-tailwindcss-wrapper .rounded-\[0\.2em\] {
-  border-radius: 0.2em;
-}
 .diff-tailwindcss-wrapper .rounded-\[2px\] {
   border-radius: 2px;
 }