improve package

MrWangJustToDo · Jan 24, 2024 · eedc8e2 · eedc8e2
1 parent 6bd0151
commit eedc8e2
Show file tree

Hide file tree

Showing 37 changed files with 339 additions and 267 deletions.
diff --git a/packages/core/src/diff-file.ts b/packages/core/src/diff-file.ts
@@ -138,6 +138,7 @@ export class DiffFile {
     _oldFileLang?: string,
     _newFileLang?: string
   ) {
+    Object.defineProperty(this, "__v_skip", { value: true });
     let oldContent = _oldFileContent;
     let newContent = _newFileContent;
     Object.defineProperties(this, {

diff --git a/packages/react/src/components/DiffAddWidget.tsx b/packages/react/src/components/DiffAddWidget.tsx
@@ -3,19 +3,20 @@ import * as React from "react";
 import { addWidgetBGName, addWidgetColorName } from "./color";
 
 import type { SplitSide } from "..";
-import type { DiffFileExtends } from "../utils/diff-file-extend";
+import type { DiffFile } from "@git-diff-view/core";
 
 export const DiffSplitAddWidget = ({
-  diffFile,
   side,
   lineNumber,
   onWidgetClick,
+  onOpenAddWidget,
 }: {
   index: number;
   lineNumber: number;
-  diffFile: DiffFileExtends;
+  diffFile: DiffFile;
   side: SplitSide;
   onWidgetClick?: (lineNumber: number, side: SplitSide) => void;
+  onOpenAddWidget: (lineNumber: number, side: SplitSide) => void;
 }) => {
   return (
     <div
@@ -34,7 +35,7 @@ export const DiffSplitAddWidget = ({
           backgroundColor: `var(${addWidgetBGName})`,
         }}
         onClick={() => {
-          diffFile.onOpenAddWidget(lineNumber, side);
+          onOpenAddWidget(lineNumber, side);
           onWidgetClick?.(lineNumber, side);
         }}
       >
@@ -45,16 +46,17 @@ export const DiffSplitAddWidget = ({
 };
 
 export const DiffUnifiedAddWidget = ({
-  diffFile,
   lineNumber,
   side,
   onWidgetClick,
+  onOpenAddWidget,
 }: {
   index: number;
-  diffFile: DiffFileExtends;
+  diffFile: DiffFile;
   lineNumber: number;
   side: SplitSide;
   onWidgetClick?: (lineNumber: number, side: SplitSide) => void;
+  onOpenAddWidget: (lineNumber: number, side: SplitSide) => void;
 }) => {
   return (
     <div
@@ -73,7 +75,7 @@ export const DiffUnifiedAddWidget = ({
           backgroundColor: `var(${addWidgetBGName})`,
         }}
         onClick={() => {
-          diffFile.onOpenAddWidget(lineNumber, side);
+          onOpenAddWidget(lineNumber, side);
           onWidgetClick?.(lineNumber, side);
         }}
       >

diff --git a/packages/react/src/components/DiffSplitExtendLine.tsx b/packages/react/src/components/DiffSplitExtendLine.tsx
@@ -5,10 +5,9 @@ import { useDomWidth } from "../hooks/useDomWidth";
 import { useSyncHeight } from "../hooks/useSyncHeight";
 
 import { emptyBGName } from "./color";
+import { DiffFile } from "@git-diff-view/core";
 
-import type { DiffFileExtends } from "../utils";
-
-const _DiffSplitExtendLine = ({ index, diffFile, side, lineNumber }: { index: number; side: SplitSide; diffFile: DiffFileExtends; lineNumber: number }) => {
+const _DiffSplitExtendLine = ({ index, diffFile, side, lineNumber }: { index: number; side: SplitSide; diffFile: DiffFile; lineNumber: number }) => {
   const { extendData, renderExtendLine } = useDiffViewContext();
 
   const oldItem = diffFile.getSplitLeftLine(index);
@@ -55,17 +54,7 @@ const _DiffSplitExtendLine = ({ index, diffFile, side, lineNumber }: { index: nu
   );
 };
 
-export const DiffSplitExtendLine = ({
-  index,
-  diffFile,
-  side,
-  lineNumber,
-}: {
-  index: number;
-  side: SplitSide;
-  diffFile: DiffFileExtends;
-  lineNumber: number;
-}) => {
+export const DiffSplitExtendLine = ({ index, diffFile, side, lineNumber }: { index: number; side: SplitSide; diffFile: DiffFile; lineNumber: number }) => {
   const { extendData } = useDiffViewContext();
 
   const oldItem = diffFile.getSplitLeftLine(index);

diff --git a/packages/react/src/components/DiffSplitLine.tsx b/packages/react/src/components/DiffSplitLine.tsx
@@ -7,8 +7,7 @@ import { useSyncHeight } from "../hooks/useSyncHeight";
 import { emptyBGName, getContentBG, getLineNumberBG, plainLineNumberColorName } from "./color";
 import { DiffSplitAddWidget } from "./DiffAddWidget";
 import { DiffContent } from "./DiffContent";
-
-import type { DiffFileExtends } from "../utils";
+import { useDiffWidgetContext } from "./DiffWidgetContext";
 
 const _DiffSplitLine = ({ index, diffFile, lineNumber, side }: { index: number; side: SplitSide; diffFile: DiffFile; lineNumber: number }) => {
   const getCurrentItem = side === SplitSide.old ? diffFile.getSplitLeftLine : diffFile.getSplitRightLine;
@@ -27,6 +26,8 @@ const _DiffSplitLine = ({ index, diffFile, lineNumber, side }: { index: number;
 
   const { enableWrap, enableHighlight, enableAddWidget, onAddWidgetClick } = useDiffViewContext();
 
+  const { setWidget } = useDiffWidgetContext();
+
   useSyncHeight({
     selector: `tr[data-line="${lineNumber}"]`,
     enable: hasDiff,
@@ -60,7 +61,14 @@ const _DiffSplitLine = ({ index, diffFile, lineNumber, side }: { index: number;
           }}
         >
           {hasDiff && enableAddWidget && (
-            <DiffSplitAddWidget index={index} lineNumber={currentItem.lineNumber} side={side} diffFile={diffFile as DiffFileExtends} onWidgetClick={onAddWidgetClick} />
+            <DiffSplitAddWidget
+              index={index}
+              lineNumber={currentItem.lineNumber}
+              side={side}
+              diffFile={diffFile}
+              onWidgetClick={onAddWidgetClick}
+              onOpenAddWidget={(lineNumber, side) => setWidget({ widgetLineNumber: lineNumber, widgetSide: side })}
+            />
           )}
           <span data-line-num={currentItem.lineNumber} style={{ opacity: hasChange ? undefined : 0.5 }}>
             {currentItem.lineNumber}

diff --git a/packages/react/src/components/DiffSplitView.tsx b/packages/react/src/components/DiffSplitView.tsx
@@ -1,5 +1,5 @@
 import { numIterator } from "@git-diff-view/core";
-import { Fragment, useEffect, useRef } from "react";
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
 import * as React from "react";
 
 import { DiffSplitExtendLine } from "./DiffSplitExtendLine";
@@ -8,8 +8,9 @@ import { DiffSplitLine } from "./DiffSplitLine";
 import { DiffSplitWidgetLine } from "./DiffSplitWidgetLine";
 import { SplitSide } from "./DiffView";
 import { useDiffViewContext } from "./DiffViewContext";
+import { DiffWidgetContext } from "./DiffWidgetContext";
 
-import type { DiffFileExtends } from "../utils";
+import type { DiffWidgetContextType } from "./DiffWidgetContext";
 import type { DiffFile } from "@git-diff-view/core";
 
 const syncScroll = (left: HTMLElement, right: HTMLElement) => {
@@ -62,8 +63,8 @@ const DiffSplitViewTable = ({ side, lineLength, diffFile }: { side: SplitSide; l
           <Fragment key={index}>
             <DiffSplitHunkLine index={index} side={side} lineNumber={index + 1} diffFile={diffFile} />
             <DiffSplitLine index={index} side={side} lineNumber={index + 1} diffFile={diffFile} />
-            <DiffSplitWidgetLine index={index} side={side} lineNumber={index + 1} diffFile={diffFile as DiffFileExtends} />
-            <DiffSplitExtendLine index={index} side={side} lineNumber={index + 1} diffFile={diffFile as DiffFileExtends} />
+            <DiffSplitWidgetLine index={index} side={side} lineNumber={index + 1} diffFile={diffFile} />
+            <DiffSplitExtendLine index={index} side={side} lineNumber={index + 1} diffFile={diffFile} />
           </Fragment>
         ))}
         <DiffSplitExpandLastLine side={side} key="last" diffFile={diffFile} />
@@ -75,6 +76,10 @@ const DiffSplitViewTable = ({ side, lineLength, diffFile }: { side: SplitSide; l
 export const DiffSplitView = ({ diffFile }: { diffFile: DiffFile }) => {
   const { enableWrap } = useDiffViewContext();
 
+  const [widget, setWidget] = useState<DiffWidgetContextType>({});
+
+  const contextValue = useMemo(() => ({ widget, setWidget }), [widget, setWidget]);
+
   const ref1 = useRef<HTMLDivElement>(null);
 
   const ref2 = useRef<HTMLDivElement>(null);
@@ -88,15 +93,21 @@ export const DiffSplitView = ({ diffFile }: { diffFile: DiffFile }) => {
     return syncScroll(left, right);
   }, [enableWrap]);
 
+  useEffect(() => {
+    setWidget({});
+  }, [diffFile]);
+
   return (
-    <div className="split-diff-view w-full flex basis-[50%]">
-      <div className="old-diff-table-wrapper overflow-auto w-full" ref={ref1} style={{ overscrollBehaviorX: "none" }}>
-        <DiffSplitViewTable side={SplitSide.old} lineLength={lineLength} diffFile={diffFile} />
-      </div>
-      <div className="diff-split-line w-[1.5px] bg-[grey] opacity-[0.4]" />
-      <div className="new-diff-table-wrapper overflow-auto w-full" ref={ref2} style={{ overscrollBehaviorX: "none" }}>
-        <DiffSplitViewTable side={SplitSide.new} lineLength={lineLength} diffFile={diffFile} />
+    <DiffWidgetContext.Provider value={contextValue}>
+      <div className="split-diff-view w-full flex basis-[50%]">
+        <div className="old-diff-table-wrapper overflow-auto w-full" ref={ref1} style={{ overscrollBehaviorX: "none" }}>
+          <DiffSplitViewTable side={SplitSide.old} lineLength={lineLength} diffFile={diffFile} />
+        </div>
+        <div className="diff-split-line w-[1.5px] bg-[grey] opacity-[0.4]" />
+        <div className="new-diff-table-wrapper overflow-auto w-full" ref={ref2} style={{ overscrollBehaviorX: "none" }}>
+          <DiffSplitViewTable side={SplitSide.new} lineLength={lineLength} diffFile={diffFile} />
+        </div>
       </div>
-    </div>
+    </DiffWidgetContext.Provider>
   );
 };
diff --git a/packages/react/src/components/DiffSplitWidgetLine.tsx b/packages/react/src/components/DiffSplitWidgetLine.tsx
@@ -5,17 +5,20 @@ import { useDomWidth } from "../hooks/useDomWidth";
 import { useSyncHeight } from "../hooks/useSyncHeight";
 
 import { emptyBGName } from "./color";
+import { useDiffWidgetContext } from "./DiffWidgetContext";
 
-import type { DiffFileExtends } from "../utils";
+import type { DiffFile } from "@git-diff-view/core";
 
-const _DiffSplitWidgetLine = ({ index, diffFile, side, lineNumber }: { index: number; side: SplitSide; diffFile: DiffFileExtends; lineNumber: number }) => {
+const _DiffSplitWidgetLine = ({ index, diffFile, side, lineNumber }: { index: number; side: SplitSide; diffFile: DiffFile; lineNumber: number }) => {
   const leftItem = diffFile.getSplitLeftLine(index);
 
   const rightItem = diffFile.getSplitRightLine(index);
 
-  const leftWidget = leftItem.lineNumber ? diffFile.checkWidgetLine(leftItem.lineNumber, SplitSide.old) : undefined;
+  const { widget, setWidget } = useDiffWidgetContext();
 
-  const rightWidget = rightItem.lineNumber ? diffFile.checkWidgetLine(rightItem.lineNumber, SplitSide.new) : undefined;
+  const leftWidget = leftItem.lineNumber && widget.widgetSide === SplitSide.old && widget.widgetLineNumber === leftItem.lineNumber;
+
+  const rightWidget = rightItem.lineNumber && widget.widgetSide === SplitSide.new && widget.widgetLineNumber === rightItem.lineNumber;
 
   const currentItem = side === SplitSide.old ? leftItem : rightItem;
 
@@ -46,31 +49,30 @@ const _DiffSplitWidgetLine = ({ index, diffFile, side, lineNumber }: { index: nu
     >
       <td className="diff-line-widget-content p-0" colSpan={2}>
         <div className="diff-line-widget-wrapper sticky left-0" style={{ width }}>
-          {width > 0 && currentWidget && renderWidgetLine?.({ diffFile, side, lineNumber: currentItem.lineNumber, onClose: diffFile.onCloseAddWidget })}
+          {width > 0 &&
+            currentWidget &&
+            renderWidgetLine?.({
+              diffFile,
+              side,
+              lineNumber: currentItem.lineNumber,
+              onClose: () => setWidget({}),
+            })}
         </div>
       </td>
     </tr>
   );
 };
 
-export const DiffSplitWidgetLine = ({
-  index,
-  diffFile,
-  side,
-  lineNumber,
-}: {
-  index: number;
-  side: SplitSide;
-  diffFile: DiffFileExtends;
-  lineNumber: number;
-}) => {
+export const DiffSplitWidgetLine = ({ index, diffFile, side, lineNumber }: { index: number; side: SplitSide; diffFile: DiffFile; lineNumber: number }) => {
+  const { widget } = useDiffWidgetContext();
+
   const leftItem = diffFile.getSplitLeftLine(index);
 
   const rightItem = diffFile.getSplitRightLine(index);
 
-  const leftWidget = leftItem.lineNumber ? diffFile.checkWidgetLine(leftItem.lineNumber, SplitSide.old) : undefined;
+  const leftWidget = leftItem.lineNumber && widget.widgetSide === SplitSide.old && widget.widgetLineNumber === leftItem.lineNumber;
 
-  const rightWidget = rightItem.lineNumber ? diffFile.checkWidgetLine(rightItem.lineNumber, SplitSide.new) : undefined;
+  const rightWidget = rightItem.lineNumber && widget.widgetSide === SplitSide.new && widget.widgetLineNumber === rightItem.lineNumber;
 
   const currentIsShow = leftWidget || rightWidget;
 

diff --git a/packages/react/src/components/DiffUnifiedExtendLine.tsx b/packages/react/src/components/DiffUnifiedExtendLine.tsx
@@ -2,10 +2,9 @@ import * as React from "react";
 
 import { useDiffViewContext, SplitSide } from "..";
 import { useDomWidth } from "../hooks/useDomWidth";
+import { DiffFile } from "@git-diff-view/core";
 
-import type { DiffFileExtends } from "../utils";
-
-const _DiffUnifiedExtendLine = ({ index, diffFile, lineNumber }: { index: number; diffFile: DiffFileExtends; lineNumber: number }) => {
+const _DiffUnifiedExtendLine = ({ index, diffFile, lineNumber }: { index: number; diffFile: DiffFile; lineNumber: number }) => {
   const { extendData, renderExtendLine } = useDiffViewContext();
 
   const unifiedItem = diffFile.getUnifiedLine(index);
@@ -35,7 +34,7 @@ const _DiffUnifiedExtendLine = ({ index, diffFile, lineNumber }: { index: number
   );
 };
 
-export const DiffUnifiedExtendLine = ({ index, diffFile, lineNumber }: { index: number; diffFile: DiffFileExtends; lineNumber: number }) => {
+export const DiffUnifiedExtendLine = ({ index, diffFile, lineNumber }: { index: number; diffFile: DiffFile; lineNumber: number }) => {
   const { extendData } = useDiffViewContext();
 
   const unifiedItem = diffFile.getUnifiedLine(index);