@git-diff-view/react 0.0.26 → 0.0.27

package/src/components/DiffContent_v2.tsx

@@ -0,0 +1,344 @@
+import {
+  DiffLineType,
+  NewLineSymbol,
+  type DiffFile,
+  type DiffLine,
+  type diffChanges,
+  type SyntaxLine,
+} from "@git-diff-view/core";
+import {
+  addContentHighlightBGName,
+  delContentHighlightBGName,
+  diffFontSizeName,
+  getSymbol,
+} from "@git-diff-view/utils";
+import * as React from "react";
+
+import { getStyleObjectFromString } from "./DiffContent";
+import { DiffNoNewLine } from "./DiffNoNewLine";
+
+const RenderRange = ({
+  str,
+  startIndex,
+  endIndex,
+  ranges,
+  isAdd,
+  indexRef,
+}: {
+  str: string;
+  startIndex: number;
+  endIndex: number;
+  isAdd: boolean;
+  ranges: ReturnType<typeof diffChanges>["addRange"]["range"];
+  indexRef: { current: number };
+}) => {
+  if (!str) return null;
+
+  const index = indexRef.current;
+
+  const range = ranges[index];
+
+  if (!range || endIndex < range.location || range.location + range.length < startIndex) return str.replace("\n", "");
+
+  const index1 = range.location - startIndex;
+  const index2 = index1 < 0 ? 0 : index1;
+  const str1 = str.slice(0, index2);
+  const str2 = str.slice(index2, index1 + range.length);
+  const str3 = str.slice(index1 + range.length);
+  const isStart = str1.length || range.location === startIndex;
+
+  const isEnd = str3.length || endIndex === range.location + range.length - 1;
+
+  if (isEnd && str3.length) indexRef.current++;
+
+  const isLast = str2.includes("\n");
+
+  const _str2 = isLast ? str2.replace("\n", "").replace("\r", "") : str2;
+
+  return (
+    <span
+      data-range-start={range.location}
+      data-range-end={range.location + range.length}
+      data-total={ranges.length}
+      data-index={index}
+    >
+      <span data-start={startIndex} data-end={endIndex}>
+        {str1}
+        <span
+          data-diff-highlight
+          style={{
+            backgroundColor: isAdd ? `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,
+          }}
+        >
+          {_str2}
+        </span>
+        {/* 可能会出现一个node跨越多个range的情况 */}
+        {RenderRange({
+          str: str3,
+          startIndex: startIndex + str1.length + str2.length,
+          endIndex,
+          ranges,
+          isAdd,
+          indexRef,
+        })}
+      </span>
+    </span>
+  );
+};
+
+// TODO
+const DiffSyntax = ({
+  rawLine,
+  diffLine,
+  operator,
+  syntaxLine,
+  enableWrap,
+}: {
+  rawLine: string;
+  diffLine?: DiffLine;
+  syntaxLine?: SyntaxLine;
+  operator?: "add" | "del";
+  enableWrap?: boolean;
+}) => {
+  if (!syntaxLine) {
+    return <DiffString rawLine={rawLine} diffLine={diffLine} operator={operator} />;
+  }
+
+  const diffRange = diffLine?.diffChanges;
+
+  if (diffRange?.hasLineChange) {
+    const isAdd = operator === "add";
+
+    const targetRange = diffRange.range.filter((i) => i.type === (isAdd ? 1 : -1));
+
+    const isNewLineSymbolChanged = diffRange.newLineSymbol;
+
+    const newLineSymbol = getSymbol(isNewLineSymbolChanged);
+
+    const hasNoTrailingNewLine = isNewLineSymbolChanged === NewLineSymbol.NEWLINE;
+
+    const rangeIndexRef = { current: 0 };
+
+    return (
+      <span className="diff-line-syntax-raw">
+        {syntaxLine.nodeList?.map(({ node, wrapper }, index) => {
+          const range = targetRange[rangeIndexRef.current];
+          if (!range || 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.replace("\n", "")}
+              </span>
+            );
+          } else {
+            return (
+              <span
+                key={index}
+                data-start={node.startIndex}
+                data-end={node.endIndex}
+                className={wrapper?.properties?.className?.join(" ")}
+                style={getStyleObjectFromString(wrapper?.properties?.style || "")}
+              >
+                {/* 将组件转换为函数调用，避免同级渲染时后续组件的index没有正确更新的问题 */}
+                {RenderRange({
+                  str: node.value,
+                  startIndex: node.startIndex,
+                  endIndex: node.endIndex,
+                  ranges: targetRange,
+                  isAdd,
+                  indexRef: rangeIndexRef,
+                })}
+              </span>
+            );
+          }
+        })}
+
+        {newLineSymbol && (
+          <span
+            data-newline-symbol
+            data-diff-highlight
+            className="rounded-[0.2em]"
+            style={{
+              backgroundColor: isAdd ? `var(${addContentHighlightBGName})` : `var(${delContentHighlightBGName})`,
+            }}
+          >
+            {newLineSymbol}
+          </span>
+        )}
+
+        {hasNoTrailingNewLine && (
+          <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>
+    );
+  }
+
+  return (
+    <span className="diff-line-syntax-raw">
+      {syntaxLine?.nodeList?.map(({ node, wrapper }, index) => (
+        <span
+          key={index}
+          data-start={node.startIndex}
+          data-end={node.endIndex}
+          className={wrapper?.properties?.className?.join(" ")}
+          style={getStyleObjectFromString(wrapper?.properties?.style || "")}
+        >
+          {node.value}
+        </span>
+      ))}
+    </span>
+  );
+};
+
+// TODO
+const DiffString = ({
+  rawLine,
+  diffLine,
+  operator,
+  enableWrap,
+}: {
+  rawLine: string;
+  diffLine?: DiffLine;
+  operator?: "add" | "del";
+  enableWrap?: boolean;
+}) => {
+  const diffRange = diffLine?.diffChanges;
+
+  const isAdd = operator === "add";
+
+  if (diffRange?.hasLineChange) {
+    const targetRange = diffRange.range;
+
+    const isNewLineSymbolChanged = diffRange.newLineSymbol;
+
+    const newLineSymbol = getSymbol(isNewLineSymbolChanged);
+
+    const hasNoTrailingNewLine = isNewLineSymbolChanged === NewLineSymbol.NEWLINE;
+
+    return (
+      <span className="diff-line-content-raw">
+        {targetRange.map(({ type, str, location, length }, index) => {
+          if (type === 0) {
+            return <span key={index}>{str}</span>;
+          } else {
+            return (
+              <span key={index} data-range-start={location} data-range-end={location + length}>
+                <span
+                  data-diff-highlight
+                  className="rounded-[0.2em]"
+                  style={{
+                    backgroundColor: isAdd ? `var(${addContentHighlightBGName})` : `var(${delContentHighlightBGName})`,
+                  }}
+                >
+                  {str}
+                </span>
+              </span>
+            );
+          }
+        })}
+
+        {newLineSymbol && (
+          <span
+            data-newline-symbol
+            data-diff-highlight
+            className="rounded-[0.2em]"
+            style={{
+              backgroundColor: isAdd ? `var(${addContentHighlightBGName})` : `var(${delContentHighlightBGName})`,
+            }}
+          >
+            {newLineSymbol}
+          </span>
+        )}
+
+        {hasNoTrailingNewLine && (
+          <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>
+    );
+  } else {
+    return <span className="diff-line-content-raw">{rawLine}</span>;
+  }
+};
+
+// TODO
+export const DiffContent_v2 = ({
+  diffLine,
+  rawLine,
+  syntaxLine,
+  enableWrap,
+  enableHighlight,
+}: {
+  rawLine: string;
+  syntaxLine?: SyntaxLine;
+  diffLine?: DiffLine;
+  diffFile: DiffFile;
+  enableWrap: boolean;
+  enableHighlight: boolean;
+}) => {
+  const isAdded = diffLine?.type === DiffLineType.Add;
+
+  const isDelete = diffLine?.type === DiffLineType.Delete;
+
+  const isMaxLineLengthToIgnoreSyntax = syntaxLine?.nodeList?.length > 150;
+
+  return (
+    <div
+      className="diff-line-content-item pl-[2.0em]"
+      // data-val={rawLine}
+      style={{
+        whiteSpace: enableWrap ? "pre-wrap" : "pre",
+        wordBreak: enableWrap ? "break-all" : "initial",
+      }}
+    >
+      <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 ? "-" : " "}
+      </span>
+      {enableHighlight && syntaxLine && !isMaxLineLengthToIgnoreSyntax ? (
+        <DiffSyntax
+          operator={isAdded ? "add" : isDelete ? "del" : undefined}
+          rawLine={rawLine}
+          diffLine={diffLine}
+          syntaxLine={syntaxLine}
+          enableWrap={enableWrap}
+        />
+      ) : (
+        <DiffString
+          operator={isAdded ? "add" : isDelete ? "del" : undefined}
+          rawLine={rawLine}
+          diffLine={diffLine}
+          enableWrap={enableWrap}
+        />
+      )}
+    </div>
+  );
+};

package/src/components/DiffExpand.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+export const ExpandDown = ({ className }: { className?: string }) => {
+  return (
+    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" className={className}>
+      <path d="m8.177 14.323 2.896-2.896a.25.25 0 0 0-.177-.427H8.75V7.764a.75.75 0 1 0-1.5 0V11H5.104a.25.25 0 0 0-.177.427l2.896 2.896a.25.25 0 0 0 .354 0ZM2.25 5a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 4.25a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5a.75.75 0 0 1 .75.75ZM8.25 5a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 4.25a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5a.75.75 0 0 1 .75.75Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z"></path>
+    </svg>
+  );
+};
+
+export const ExpandUp = ({ className }: { className?: string }) => {
+  return (
+    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" className={className}>
+      <path d="M7.823 1.677 4.927 4.573A.25.25 0 0 0 5.104 5H7.25v3.236a.75.75 0 1 0 1.5 0V5h2.146a.25.25 0 0 0 .177-.427L8.177 1.677a.25.25 0 0 0-.354 0ZM13.75 11a.75.75 0 0 0 0 1.5h.5a.75.75 0 0 0 0-1.5h-.5Zm-3.75.75a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75ZM7.75 11a.75.75 0 0 0 0 1.5h.5a.75.75 0 0 0 0-1.5h-.5ZM4 11.75a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75ZM1.75 11a.75.75 0 0 0 0 1.5h.5a.75.75 0 0 0 0-1.5h-.5Z"></path>
+    </svg>
+  );
+};
+
+export const ExpandAll = ({ className }: { className?: string }) => {
+  return (
+    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" className={className}>
+      <path d="m8.177.677 2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25a.75.75 0 0 1-1.5 0V4H5.104a.25.25 0 0 1-.177-.427L7.823.677a.25.25 0 0 1 .354 0ZM7.25 10.75a.75.75 0 0 1 1.5 0V12h2.146a.25.25 0 0 1 .177.427l-2.896 2.896a.25.25 0 0 1-.354 0l-2.896-2.896A.25.25 0 0 1 5.104 12H7.25v-1.25Zm-5-2a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z"></path>
+    </svg>
+  );
+};

package/src/components/DiffNoNewLine.tsx

@@ -0,0 +1,10 @@
+import * as React from "react";
+
+export const DiffNoNewLine = () => {
+  return (
+    <svg aria-label="No newline at end of file" role="img" viewBox="0 0 16 16" version="1.1" fill="currentColor">
+      <path d="M4.25 7.25a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5h-7.5Z"></path>
+      <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"></path>
+    </svg>
+  );
+};

package/src/components/DiffSplitContentLineNormal.tsx

@@ -0,0 +1,164 @@
+import { DiffLineType, type DiffFile, checkDiffLineIncludeChange } from "@git-diff-view/core";
+import {
+  getContentBG,
+  getLineNumberBG,
+  plainLineNumberColorName,
+  diffAsideWidthName,
+  emptyBGName,
+  expandLineNumberColorName,
+} from "@git-diff-view/utils";
+import * as React from "react";
+
+import { SplitSide } from "..";
+
+import { DiffSplitAddWidget } from "./DiffAddWidget";
+import { DiffContent } from "./DiffContent";
+// import { DiffContent_v2 } from "./DiffContent_v2";
+import { useDiffViewContext } from "./DiffViewContext";
+import { useDiffWidgetContext } from "./DiffWidgetContext";
+
+const InternalDiffSplitLine = ({
+  index,
+  diffFile,
+  lineNumber,
+  side,
+  enableAddWidget,
+  enableHighlight,
+}: {
+  index: number;
+  side: SplitSide;
+  diffFile: DiffFile;
+  lineNumber: number;
+  enableHighlight: boolean;
+  enableAddWidget: boolean;
+}) => {
+  const getCurrentSyntaxLine = side === SplitSide.old ? diffFile.getOldSyntaxLine : diffFile.getNewSyntaxLine;
+
+  const getCurrentPlainLine = side === SplitSide.old ? diffFile.getOldPlainLine : diffFile.getNewPlainLine;
+
+  const oldLine = diffFile.getSplitLeftLine(index);
+
+  const newLine = diffFile.getSplitRightLine(index);
+
+  const currentLine = side === SplitSide.old ? oldLine : newLine;
+
+  const hasDiff = !!currentLine?.diff;
+
+  const hasContent = !!currentLine.lineNumber;
+
+  const hasChange = checkDiffLineIncludeChange(currentLine?.diff);
+
+  const isAdded = currentLine?.diff?.type === DiffLineType.Add;
+
+  const isDelete = currentLine?.diff?.type === DiffLineType.Delete;
+
+  const { useDiffContext } = useDiffViewContext();
+
+  const onAddWidgetClick = useDiffContext.getReadonlyState().onAddWidgetClick;
+
+  const { useWidget } = useDiffWidgetContext();
+
+  const setWidget = useWidget.getReadonlyState().setWidget;
+
+  const contentBG = getContentBG(isAdded, isDelete, hasDiff);
+
+  const lineNumberBG = getLineNumberBG(isAdded, isDelete, hasDiff);
+
+  const syntaxLine = getCurrentSyntaxLine(currentLine.lineNumber);
+
+  const plainLine = getCurrentPlainLine(currentLine.lineNumber);
+
+  return (
+    <tr
+      data-line={lineNumber}
+      data-state={hasDiff || !hasContent ? "diff" : "plain"}
+      data-side={SplitSide[side]}
+      className={"diff-line" + (hasContent ? " group" : "")}
+    >
+      {hasContent ? (
+        <>
+          <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={{
+              backgroundColor: lineNumberBG,
+              color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
+              width: `var(${diffAsideWidthName})`,
+              minWidth: `var(${diffAsideWidthName})`,
+              maxWidth: `var(${diffAsideWidthName})`,
+            }}
+          >
+            {hasDiff && enableAddWidget && (
+              <DiffSplitAddWidget
+                index={index}
+                lineNumber={currentLine.lineNumber}
+                side={side}
+                diffFile={diffFile}
+                onWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
+                className="absolute left-[100%] z-[1] translate-x-[-50%]"
+                onOpenAddWidget={(lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side })}
+              />
+            )}
+            <span data-line-num={currentLine.lineNumber} style={{ opacity: hasChange ? undefined : 0.5 }}>
+              {currentLine.lineNumber}
+            </span>
+          </td>
+          <td
+            className={`diff-line-${SplitSide[side]}-content pr-[10px] align-top`}
+            style={{ backgroundColor: contentBG }}
+          >
+            <DiffContent
+              enableWrap={false}
+              diffFile={diffFile}
+              rawLine={currentLine.value!}
+              diffLine={currentLine.diff}
+              plainLine={plainLine}
+              syntaxLine={syntaxLine}
+              enableHighlight={enableHighlight}
+            />
+          </td>
+        </>
+      ) : (
+        <td
+          className={`diff-line-${SplitSide[side]}-placeholder select-none`}
+          style={{ backgroundColor: `var(${emptyBGName})` }}
+          colSpan={2}
+        >
+          <span>&ensp;</span>
+        </td>
+      )}
+    </tr>
+  );
+};
+
+export const DiffSplitContentLine = ({
+  index,
+  diffFile,
+  lineNumber,
+  side,
+  enableAddWidget,
+  enableHighlight,
+}: {
+  index: number;
+  side: SplitSide;
+  diffFile: DiffFile;
+  lineNumber: number;
+  enableHighlight: boolean;
+  enableAddWidget: boolean;
+}) => {
+  const getCurrentLine = side === SplitSide.old ? diffFile.getSplitLeftLine : diffFile.getSplitRightLine;
+
+  const currentLine = getCurrentLine(index);
+
+  if (currentLine?.isHidden) return null;
+
+  return (
+    <InternalDiffSplitLine
+      index={index}
+      diffFile={diffFile}
+      lineNumber={lineNumber}
+      side={side}
+      enableAddWidget={enableAddWidget}
+      enableHighlight={enableHighlight}
+    />
+  );
+};