@git-diff-view/react 0.0.29 → 0.0.31

package/index.d.ts

@@ -1,5 +1,6 @@
 // Generated by dts-bundle-generator v9.5.1
 
+import { Root } from 'hast';
 import { CSSProperties, ForwardedRef, ReactNode, RefObject } from 'react';
 
 declare class Cache$1<K, V> extends Map<K, V> {
@@ -276,8 +277,10 @@ export declare class DiffLine {
 	changes?: IRange;
 	diffChanges?: DiffRange;
 	plainTemplate?: string;
+	plainTemplateMode?: "fast-diff" | "relative";
 	syntaxTemplate?: string;
-	constructor(text: string, type: DiffLineType, originalLineNumber: number | null, oldLineNumber: number | null, newLineNumber: number | null, noTrailingNewLine?: boolean, changes?: IRange, diffChanges?: DiffRange, plainTemplate?: string, syntaxTemplate?: string);
+	syntaxTemplateMode?: "fast-diff" | "relative";
+	constructor(text: string, type: DiffLineType, originalLineNumber: number | null, oldLineNumber: number | null, newLineNumber: number | null, noTrailingNewLine?: boolean, changes?: IRange, diffChanges?: DiffRange, plainTemplate?: string, plainTemplateMode?: "fast-diff" | "relative", syntaxTemplate?: string, syntaxTemplateMode?: "fast-diff" | "relative");
 	withNoTrailingNewLine(noTrailingNewLine: boolean): DiffLine;
 	isIncludeableLine(): boolean;
 	equals(other: DiffLine): boolean;
@@ -426,6 +429,7 @@ export declare const checkCurrentLineIsHidden: (diffFile: DiffFile, lineNumber:
 	unified: boolean;
 };
 export declare const checkDiffLineIncludeChange: (diffLine?: DiffLine) => boolean;
+export declare const defaultTransform: (content: string) => string;
 export declare const disableCache: () => void;
 export declare const getCurrentComposeLength: () => number;
 export declare const getDiffRange: (additions: DiffLine[], deletions: DiffLine[], { getAdditionRaw, getDeletionRaw, getAdditionSyntax, getDeletionSyntax, }: {
@@ -434,12 +438,18 @@ export declare const getDiffRange: (additions: DiffLine[], deletions: DiffLine[]
 	getAdditionSyntax: (lineNumber: number) => SyntaxLineWithTemplate;
 	getDeletionSyntax: (lineNumber: number) => SyntaxLineWithTemplate;
 }) => void;
+export declare const getEnableFastDiffTemplate: () => boolean;
 export declare const getLang: (fileName: string) => string;
 export declare const getPlainDiffTemplate: ({ diffLine, rawLine, operator, }: {
 	diffLine: DiffLine;
 	rawLine: string;
 	operator: "add" | "del";
 }) => void;
+export declare const getPlainDiffTemplateByFastDiff: ({ diffLine, rawLine, operator, }: {
+	diffLine: DiffLine;
+	rawLine: string;
+	operator: "add" | "del";
+}) => void;
 export declare const getPlainLineTemplate: (line: string) => string;
 export declare const getSplitContentLines: (diffFile: DiffFile) => DiffSplitContentLineItem[];
 export declare const getSplitLines: (diffFile: DiffFile) => DiffSplitLineItem[];
@@ -448,6 +458,11 @@ export declare const getSyntaxDiffTemplate: ({ diffLine, syntaxLine, operator, }
 	syntaxLine: SyntaxLineWithTemplate;
 	operator: "add" | "del";
 }) => void;
+export declare const getSyntaxDiffTemplateByFastDiff: ({ diffLine, syntaxLine, operator, }: {
+	diffLine: DiffLine;
+	syntaxLine: SyntaxLineWithTemplate;
+	operator: "add" | "del";
+}) => void;
 export declare const getSyntaxLineTemplate: (line: SyntaxLine) => string;
 export declare const getUnifiedContentLine: (diffFile: DiffFile) => DiffUnifiedContentLineItem[];
 export declare const getUnifiedLines: (diffFile: DiffFile) => DiffUnifiedLineItem[];
@@ -496,6 +511,7 @@ export declare const processTransformForFile: (content: string) => string;
  */
 export declare const processTransformTemplateContent: (content: string) => string;
 export declare const resetDefaultComposeLength: () => void;
+export declare const resetEnableFastDiffTemplate: () => void;
 /**
  * Resets all transformation functions to their default state and disables transformation.
  *
@@ -505,6 +521,7 @@ export declare const resetDefaultComposeLength: () => void;
  * ```
  */
 export declare const resetTransform: () => void;
+export declare const setEnableFastDiffTemplate: (enable: boolean) => void;
 /**
  * ⚠️ **WARNING: DANGEROUS OPERATION** ⚠️
  *
@@ -617,7 +634,8 @@ export interface DiffRange {
 	readonly range: {
 		type: 1 | -1 | 0;
 		str: string;
-		location: number;
+		startIndex: number;
+		endIndex: number;
 		length: number;
 	}[];
 	readonly hasLineChange?: boolean;
@@ -682,7 +700,7 @@ export interface UnifiedLineItem {
 	isHidden?: boolean;
 	_isHidden?: boolean;
 }
-export type DiffAST = ReturnType<typeof lowlight.highlight>;
+export type DiffAST = Root;
 export type DiffHighlighter = {
 	name: string;
 	type: "class" | "style" | string;
@@ -780,7 +798,6 @@ export type SyntaxLine = {
 export type SyntaxLineWithTemplate = SyntaxLine & {
 	template?: string;
 };
-// Generated by dts-bundle-generator v9.5.1
 export type SyntaxNode = {
 	type: string;
 	value: string;

package/package.json

@@ -3,7 +3,7 @@
   "description": "@git-diff-view/react",
   "author": "MrWangJustToDo",
   "license": "MIT",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "main": "index.js",
   "types": "index.d.ts",
   "files": [
@@ -61,7 +61,7 @@
     "react diff component"
   ],
   "dependencies": {
-    "@git-diff-view/core": "^0.0.29",
+    "@git-diff-view/core": "^0.0.31",
     "@types/hast": "^3.0.0",
     "fast-diff": "^1.3.0",
     "highlight.js": "^11.11.0",

package/readme.md

@@ -95,9 +95,9 @@ const diffFile = DiffFile.createInstance(data || {}, bundle);
 | extendData       | a list to store the extend data to show in the `Diff View`, type: {oldFile: {lineNumber: {data: any}}, newFile: {lineNumber: {data: any}}}   |
 | diffViewFontSize | the fontSize for the DiffView component, type: number |
 | diffViewHighlight | enable syntax highlight, type: boolean |
-| diffViewMode     | the mode for the DiffView component, type: `DiffModeEnum.Split` or `DiffModeEnum.Unified` |
+| diffViewMode     | the mode for the DiffView component, type: `DiffModeEnum.Split` / `DiffModeEnum.Unified` |
 | diffViewWrap     | enable code line auto wrap, type: boolean |
-| diffViewTheme    | the theme for the DiffView component, type: `light` or `dark` |
+| diffViewTheme    | the theme for the DiffView component, type: `light` / `dark` |
 | diffViewAddWidget| enable `addWidget` button, type: boolean |
-| onAddWidgetClick | when the `addWidget` button clicked, type: `({ side: "old" | "new", lineNumber: number }) => void` |
+| onAddWidgetClick | when the `addWidget` button clicked, type: `({ side: "old" / "new", lineNumber: number }) => void` |
 

package/src/_com.css

@@ -71,6 +71,10 @@ td {
   text-align: left;
 }
 
+td {
+  padding: 0;
+}
+
 .diff-line-old-num,
 .diff-line-new-num,
 .diff-line-num {

package/src/components/DiffSplitContentLineNormal.tsx

@@ -13,7 +13,6 @@ 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";
 

package/src/components/DiffSplitContentLineWrap.tsx

@@ -13,7 +13,6 @@ 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";
 
@@ -77,7 +76,10 @@ const InternalDiffSplitLine = ({
           <td
             className="diff-line-old-num group relative w-[1%] min-w-[40px] select-none pl-[10px] pr-[10px] text-right align-top"
             data-side={SplitSide[SplitSide.old]}
-            style={{ backgroundColor: oldLineNumberBG, color: `var(${plainLineNumberColorName})` }}
+            style={{
+              backgroundColor: oldLineNumberBG,
+              color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
+            }}
           >
             {hasDiff && enableAddWidget && (
               <DiffSplitAddWidget

package/src/components/DiffSplitViewNormal.tsx

@@ -51,7 +51,7 @@ const DiffSplitViewTable = ({
           <th scope="col">{SplitSide[side]} line content</th>
         </tr>
       </thead>
-      <tbody className="diff-table-body leading-[1.4]" onMouseDownCapture={onMouseDown}>
+      <tbody className="diff-table-body leading-[1.6]" onMouseDownCapture={onMouseDown}>
         {lines.map((line) => (
           <Fragment key={line.index}>
             <DiffSplitHunkLine index={line.index} side={side} lineNumber={line.lineNumber} diffFile={diffFile} />

package/src/components/DiffSplitViewWrap.tsx

@@ -119,7 +119,7 @@ export const DiffSplitViewWrap = memo(({ diffFile }: { diffFile: DiffFile }) =>
               <th scope="col">new line content</th>
             </tr>
           </thead>
-          <tbody className="diff-table-body leading-[1.4]" onMouseDownCapture={onMouseDown}>
+          <tbody className="diff-table-body leading-[1.6]" onMouseDownCapture={onMouseDown}>
             {lines.map((line) => (
               <Fragment key={line.index}>
                 <DiffSplitHunkLine index={line.index} lineNumber={line.lineNumber} diffFile={diffFile} />

package/src/components/DiffUnifiedView.tsx

@@ -135,7 +135,7 @@ export const DiffUnifiedView = memo(({ diffFile }: { diffFile: DiffFile }) => {
                 <th scope="col">line content</th>
               </tr>
             </thead>
-            <tbody className="diff-table-body leading-[1.4]" onMouseDownCapture={onMouseDown}>
+            <tbody className="diff-table-body leading-[1.6]" onMouseDownCapture={onMouseDown}>
               {lines.map((item) => (
                 <Fragment key={item.index}>
                   <DiffUnifiedHunkLine index={item.index} lineNumber={item.lineNumber} diffFile={diffFile} />

package/src/components/DiffView.tsx

@@ -299,20 +299,27 @@ const DiffViewWithRef = <T extends unknown>(
   useEffect(() => {
     if (!diffFile) return;
     diffFile.initTheme(diffViewTheme);
+
     diffFile.initRaw();
+
     diffFile.buildSplitDiffLines();
+
     diffFile.buildUnifiedDiffLines();
   }, [diffFile, diffViewTheme]);
 
   useEffect(() => {
     if (!diffFile) return;
+
     if (props.diffViewHighlight) {
       diffFile.initSyntax({ registerHighlighter });
-      diffFile.notifyAll();
     }
-  }, [diffFile, props.diffViewHighlight, registerHighlighter]);
+
+    diffFile.notifyAll();
+  }, [diffFile, props.diffViewHighlight, registerHighlighter, diffViewTheme]);
 
   useEffect(() => {
+    if (!diffFile) return;
+
     const init = () => {
       wrapperRef.current?.setAttribute("data-theme", diffFile._getTheme() || "light");
       wrapperRef.current?.setAttribute("data-highlighter", diffFile._getHighlighterName());
@@ -323,7 +330,7 @@ const DiffViewWithRef = <T extends unknown>(
     const cb = diffFile.subscribe(init);
 
     return cb;
-  }, [diffFile, diffViewTheme]);
+  }, [diffFile]);
 
   // fix react strict mode error
   useUnmount(() => (__DEV__ ? diffFile?._destroy?.() : diffFile?.clear?.()), [diffFile]);

package/src/components/v2/DiffSplitViewNormal_v2.tsx

@@ -55,6 +55,8 @@ export const DiffSplitViewNormal = memo(({ diffFile }: { diffFile: DiffFile }) =
 
   const ref = useRef<HTMLStyleElement>();
 
+  const tempRef = useRef<SplitSide>();
+
   const splitLineLength = Math.max(diffFile.splitLineLength, diffFile.fileLineLength);
 
   const { useDiffContext } = useDiffViewContext();
@@ -105,13 +107,19 @@ export const DiffSplitViewNormal = memo(({ diffFile }: { diffFile: DiffFile }) =
       const state = ele.getAttribute("data-state");
       const side = ele.getAttribute("data-side");
       if (side) {
-        setStyle(SplitSide[side]);
-        removeAllSelection();
+        if (tempRef.current !== SplitSide[side]) {
+          tempRef.current = SplitSide[side];
+          setStyle(SplitSide[side]);
+          removeAllSelection();
+        }
       }
       if (state) {
         if (state === "extend" || state === "hunk" || state === "widget") {
-          setStyle(undefined);
-          removeAllSelection();
+          if (tempRef.current !== undefined) {
+            tempRef.current = undefined;
+            setStyle(undefined);
+            removeAllSelection();
+          }
           return;
         } else {
           return;
@@ -125,6 +133,16 @@ export const DiffSplitViewNormal = memo(({ diffFile }: { diffFile: DiffFile }) =
   return (
     <div className="split-diff-view split-diff-view-normal flex w-full basis-[50%]">
       <style data-select-style ref={ref} />
+      <style>
+        {`
+.diff-tailwindcss-wrapper .diff-add-widget-wrapper.diff-add-widget-wrapper.diff-add-widget-wrapper {
+  transform: translate(-50%, -50%) !important;
+}
+.diff-tailwindcss-wrapper .diff-add-widget-wrapper.diff-add-widget-wrapper.diff-add-widget-wrapper:hover {
+  transform: translate(-50%, -50%) scale(1.1) !important;
+}
+        `}
+      </style>
       <div
         className="old-diff-table-wrapper diff-table-scroll-container w-full overflow-x-auto overflow-y-hidden"
         ref={ref1}

package/styles/diff-view-pure.css

@@ -155,6 +155,9 @@
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.diff-tailwindcss-wrapper .transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .diff-tailwindcss-wrapper .cursor-pointer {
   cursor: pointer;
 }
@@ -247,9 +250,6 @@
 .diff-tailwindcss-wrapper .text-\[1\.2em\] {
   font-size: 1.2em;
 }
-.diff-tailwindcss-wrapper .leading-\[1\.4\] {
-  line-height: 1.4;
-}
 .diff-tailwindcss-wrapper .leading-\[1\.6\] {
   line-height: 1.6;
 }
@@ -260,9 +260,6 @@
 .diff-tailwindcss-wrapper .opacity-\[0\.5\] {
   opacity: 0.5;
 }
-.diff-tailwindcss-wrapper .filter {
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .diff-tailwindcss-wrapper .transition-transform {
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -335,6 +332,9 @@
   border-width: 0px;
   text-align: left;
 }
+.diff-tailwindcss-wrapper td {
+  padding: 0;
+}
 .diff-tailwindcss-wrapper .diff-line-old-num,
 .diff-tailwindcss-wrapper .diff-line-new-num,
 .diff-tailwindcss-wrapper .diff-line-num {

package/styles/diff-view.css

@@ -661,6 +661,9 @@ video {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.diff-tailwindcss-wrapper .transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .diff-tailwindcss-wrapper .cursor-pointer {
   cursor: pointer;
 }
@@ -753,9 +756,6 @@ video {
 .diff-tailwindcss-wrapper .text-\[1\.2em\] {
   font-size: 1.2em;
 }
-.diff-tailwindcss-wrapper .leading-\[1\.4\] {
-  line-height: 1.4;
-}
 .diff-tailwindcss-wrapper .leading-\[1\.6\] {
   line-height: 1.6;
 }
@@ -766,9 +766,6 @@ video {
 .diff-tailwindcss-wrapper .opacity-\[0\.5\] {
   opacity: 0.5;
 }
-.diff-tailwindcss-wrapper .filter {
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .diff-tailwindcss-wrapper .transition-transform {
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -841,6 +838,9 @@ video {
   border-width: 0px;
   text-align: left;
 }
+.diff-tailwindcss-wrapper td {
+  padding: 0;
+}
 .diff-tailwindcss-wrapper .diff-line-old-num,
 .diff-tailwindcss-wrapper .diff-line-new-num,
 .diff-tailwindcss-wrapper .diff-line-num {