@git-diff-view/react 0.0.28 → 0.0.30

package/index.d.ts

@@ -26,6 +26,7 @@ declare class File$1 {
 	highlighterName?: DiffHighlighter["name"];
 	highlighterType?: DiffHighlighter["type"];
 	maxLineNumber: number;
+	enableTemplate: boolean;
 	static createInstance(data: File$1): File$1;
 	constructor(row: string, lang: DiffHighlighterLang, fileName?: string);
 	constructor(row: string, lang: string, fileName?: string);
@@ -87,6 +88,9 @@ export declare class DiffFile {
 		registerHighlighter?: Omit<DiffHighlighter, "getHighlighterEngine">;
 	}): void;
 	init(): void;
+	enableTemplate(): void;
+	disableTemplate(): void;
+	getIsEnableTemplate(): boolean;
 	buildSplitDiffLines(): void;
 	buildUnifiedDiffLines(): void;
 	getSplitLeftLine: (index: number) => SplitLineItem;
@@ -165,6 +169,7 @@ export declare class DiffFile {
 		};
 		version: string;
 		theme: "light" | "dark";
+		enableTemplate: boolean;
 		isFullMerge: boolean;
 	};
 	mergeBundle: (data: ReturnType<DiffFile["getBundle"]>, notifyUpdate?: boolean) => void;
@@ -222,6 +227,7 @@ export declare class DiffFile {
 		};
 		version: string;
 		theme: "light" | "dark";
+		enableTemplate: boolean;
 	};
 	_mergeFullBundle: (data: ReturnType<DiffFile["_getFullBundle"]>, notifyUpdate?: boolean) => void;
 	_destroy: () => void;
@@ -787,6 +793,12 @@ export type SyntaxNode = {
 	};
 	children?: SyntaxNode[];
 };
+export declare enum DiffModeEnum {
+	SplitGitHub = 1,
+	SplitGitLab = 2,
+	Split = 3,
+	Unified = 4
+}
 declare const createDiffConfigStore: (props: DiffViewProps<any> & {
 	isMounted: boolean;
 }, diffFileId: string) => import("reactivity-store").UseSelectorWithStore<{
@@ -932,12 +944,6 @@ declare const createDiffWidgetStore: (useDiffContextRef: RefObject<ReturnType<ty
 		lineNumber?: number;
 	}) => void;
 }>;
-export declare enum DiffModeEnum {
-	SplitGitHub = 1,
-	SplitGitLab = 2,
-	Split = 3,
-	Unified = 4
-}
 export type DiffViewProps<T> = {
 	data?: {
 		oldFile?: {

package/package.json

@@ -3,7 +3,7 @@
   "description": "@git-diff-view/react",
   "author": "MrWangJustToDo",
   "license": "MIT",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "main": "index.js",
   "types": "index.d.ts",
   "files": [
@@ -61,18 +61,18 @@
     "react diff component"
   ],
   "dependencies": {
-    "@git-diff-view/core": "^0.0.28",
+    "@git-diff-view/core": "^0.0.30",
     "@types/hast": "^3.0.0",
     "fast-diff": "^1.3.0",
     "highlight.js": "^11.11.0",
     "lowlight": "^3.3.0",
-    "reactivity-store": "^0.3.10",
+    "reactivity-store": "^0.3.11",
     "use-sync-external-store": "^1.4.0"
   },
   "devDependencies": {
     "@types/use-sync-external-store": "^0.0.6",
     "autoprefixer": "^10.4.20",
-    "postcss": "^8.5.1",
+    "postcss": "^8.5.6",
     "react": "^18.0.0",
     "tailwindcss": "^3.4.17"
   },

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/components/DiffContent.tsx

@@ -54,23 +54,25 @@ 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 (!diffLine?.plainTemplate && typeof getPlainDiffTemplate === "function") {
+    if (enableTemplate && !diffLine?.plainTemplate && typeof getPlainDiffTemplate === "function") {
       getPlainDiffTemplate({ diffLine, rawLine, operator });
     }
 
-    if (diffLine?.plainTemplate) {
+    if (enableTemplate && diffLine?.plainTemplate) {
       return (
         <span className="diff-line-content-raw">
           <span data-template dangerouslySetInnerHTML={{ __html: diffLine.plainTemplate }} />
@@ -136,11 +138,11 @@ const DiffString = ({
     }
   }
 
-  if (plainLine && !plainLine?.template) {
+  if (enableTemplate && plainLine && !plainLine?.template) {
     plainLine.template = getPlainLineTemplate(plainLine.value);
   }
 
-  if (plainLine?.template) {
+  if (enableTemplate && plainLine?.template) {
     return (
       <span className="diff-line-content-raw">
         <span data-template dangerouslySetInnerHTML={{ __html: plainLine.template }} />
@@ -157,15 +159,25 @@ const DiffSyntax = ({
   operator,
   syntaxLine,
   enableWrap,
+  enableTemplate,
 }: {
   rawLine: string;
   diffLine?: DiffLine;
   syntaxLine?: File["syntaxFile"][number];
   operator?: "add" | "del";
   enableWrap?: boolean;
+  enableTemplate?: boolean;
 }) => {
   if (!syntaxLine) {
-    return <DiffString rawLine={rawLine} diffLine={diffLine} operator={operator} />;
+    return (
+      <DiffString
+        rawLine={rawLine}
+        diffLine={diffLine}
+        operator={operator}
+        enableWrap={enableWrap}
+        enableTemplate={enableTemplate}
+      />
+    );
   }
 
   const changes = diffLine?.changes;
@@ -173,11 +185,11 @@ const DiffSyntax = ({
   if (changes?.hasLineChange) {
     const isNewLineSymbolChanged = changes.newLineSymbol;
 
-    if (!diffLine?.syntaxTemplate && typeof getSyntaxDiffTemplate === "function") {
+    if (enableTemplate && !diffLine?.syntaxTemplate && typeof getSyntaxDiffTemplate === "function") {
       getSyntaxDiffTemplate({ diffLine, syntaxLine, operator });
     }
 
-    if (diffLine?.syntaxTemplate) {
+    if (enableTemplate && diffLine?.syntaxTemplate) {
       return (
         <span className="diff-line-syntax-raw">
           <span data-template dangerouslySetInnerHTML={{ __html: diffLine.syntaxTemplate }} />
@@ -279,11 +291,11 @@ const DiffSyntax = ({
     }
   }
 
-  if (!syntaxLine.template) {
+  if (enableTemplate && !syntaxLine.template) {
     syntaxLine.template = getSyntaxLineTemplate(syntaxLine);
   }
 
-  if (syntaxLine?.template) {
+  if (enableTemplate && syntaxLine?.template) {
     return (
       <span className="diff-line-syntax-raw">
         <span data-template dangerouslySetInnerHTML={{ __html: syntaxLine.template }} />
@@ -310,6 +322,7 @@ const DiffSyntax = ({
 
 export const DiffContent = ({
   diffLine,
+  diffFile,
   rawLine,
   plainLine,
   syntaxLine,
@@ -330,6 +343,8 @@ export const DiffContent = ({
 
   const isMaxLineLengthToIgnoreSyntax = syntaxLine?.nodeList?.length > 150;
 
+  const isEnableTemplate = diffFile.getIsEnableTemplate?.() ?? true;
+
   return (
     <div
       className="diff-line-content-item pl-[2.0em]"
@@ -352,6 +367,7 @@ export const DiffContent = ({
           diffLine={diffLine}
           syntaxLine={syntaxLine}
           enableWrap={enableWrap}
+          enableTemplate={isEnableTemplate}
         />
       ) : (
         <DiffString
@@ -360,6 +376,7 @@ export const DiffContent = ({
           diffLine={diffLine}
           plainLine={plainLine}
           enableWrap={enableWrap}
+          enableTemplate={isEnableTemplate}
         />
       )}
     </div>

package/src/components/DiffContent_v2.tsx

@@ -1,10 +1,4 @@
-import {
-  DiffLineType,
-  type DiffFile,
-  type DiffLine,
-  type diffChanges,
-  type SyntaxLine,
-} from "@git-diff-view/core";
+import { DiffLineType, type DiffFile, type DiffLine, type diffChanges, type SyntaxLine } from "@git-diff-view/core";
 import {
   addContentHighlightBGName,
   delContentHighlightBGName,

package/src/components/DiffSplitContentLineNormal.tsx

@@ -44,7 +44,7 @@ const InternalDiffSplitLine = ({
 
   const hasDiff = !!currentLine?.diff;
 
-  const hasContent = !!currentLine.lineNumber;
+  const hasContent = !!currentLine?.lineNumber;
 
   const hasChange = checkDiffLineIncludeChange(currentLine?.diff);
 
@@ -78,7 +78,7 @@ const InternalDiffSplitLine = ({
       {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`}
+            className={`diff-line-${SplitSide[side]}-num sticky left-0 z-[1] w-[1%] min-w-[40px] select-none pl-[10px] pr-[10px] text-right align-top`}
             style={{
               backgroundColor: lineNumberBG,
               color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
@@ -109,8 +109,8 @@ const InternalDiffSplitLine = ({
             <DiffContent
               enableWrap={false}
               diffFile={diffFile}
-              rawLine={currentLine.value!}
-              diffLine={currentLine.diff}
+              rawLine={currentLine?.value || ""}
+              diffLine={currentLine?.diff}
               plainLine={plainLine}
               syntaxLine={syntaxLine}
               enableHighlight={enableHighlight}

package/src/components/DiffSplitViewNormal.tsx

@@ -85,6 +85,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();
@@ -139,13 +141,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;

package/src/components/DiffSplitViewWrap.tsx

@@ -24,6 +24,8 @@ export const DiffSplitViewWrap = memo(({ diffFile }: { diffFile: DiffFile }) =>
 
   const ref = useRef<HTMLStyleElement>(null);
 
+  const tempRef = useRef<SplitSide>();
+
   const { fontSize, enableAddWidget, enableHighlight } = useDiffContext.useShallowStableSelector((s) => ({
     fontSize: s.fontSize,
     enableAddWidget: s.enableAddWidget,
@@ -67,13 +69,19 @@ export const DiffSplitViewWrap = 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;

package/src/components/DiffSplitWidgetLineNormal.tsx

@@ -29,7 +29,7 @@ const InternalDiffSplitWidgetLine = ({
 
   const newLine = diffFile.getSplitRightLine(index);
 
-  const widgetSide = useWidget.getReadonlyState().widgetSide;
+  const widgetSide = useWidget.useShallowStableSelector((s) => s.widgetSide);
 
   const widgetLineNumber = useWidget.getReadonlyState().widgetLineNumber;
 

package/src/components/DiffSplitWidgetLineWrap.tsx

@@ -29,7 +29,7 @@ const InternalDiffSplitWidgetLine = ({
 
   const newLine = diffFile.getSplitRightLine(index);
 
-  const widgetSide = useWidget.getReadonlyState().widgetSide;
+  const widgetSide = useWidget.useShallowStableSelector((s) => s.widgetSide);
 
   const widgetLineNumber = useWidget.getReadonlyState().widgetLineNumber;
 

package/src/components/DiffUnifiedContentLine.tsx

@@ -53,7 +53,7 @@ const DiffUnifiedOldLine = ({
   return (
     <tr data-line={index} data-state="diff" className="diff-line group">
       <td
-        className="diff-line-num sticky left-0 w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top"
+        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(${plainLineNumberColorName})`,
           backgroundColor: `var(${delLineNumberBGName})`,
@@ -125,7 +125,7 @@ const DiffUnifiedNewLine = ({
   return (
     <tr data-line={index} data-state="diff" className="diff-line group">
       <td
-        className="diff-line-num sticky left-0 w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top"
+        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(${plainLineNumberColorName})`,
           backgroundColor: `var(${addLineNumberBGName})`,
@@ -257,7 +257,7 @@ const _DiffUnifiedLine = memo(
       return (
         <tr data-line={lineNumber} data-state={unifiedLine.diff ? "diff" : "plain"} className="diff-line group">
           <td
-            className="diff-line-num sticky left-0 w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top"
+            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)`,

package/src/components/DiffUnifiedView.tsx

@@ -23,6 +23,8 @@ export const DiffUnifiedView = memo(({ diffFile }: { diffFile: DiffFile }) => {
 
   const ref = useRef<HTMLStyleElement>(null);
 
+  const tempRef = useRef<SplitSide>();
+
   const useDiffContextRef = useRef(useDiffContext);
 
   useDiffContextRef.current = useDiffContext;
@@ -87,12 +89,18 @@ export const DiffUnifiedView = memo(({ diffFile }: { diffFile: DiffFile }) => {
       const state = ele.getAttribute("data-state");
       if (state) {
         if (state === "extend" || state === "hunk" || state === "widget") {
-          setStyle(undefined);
-          removeAllSelection();
+          if (tempRef.current !== undefined) {
+            tempRef.current = undefined;
+            setStyle(undefined);
+            removeAllSelection();
+          }
           return;
         } else {
-          setStyle(SplitSide.new);
-          removeAllSelection();
+          if (tempRef.current !== SplitSide.new) {
+            tempRef.current = SplitSide.new;
+            setStyle(SplitSide.new);
+            removeAllSelection();
+          }
           return;
         }
       }

package/src/components/DiffView.tsx

@@ -1,7 +1,7 @@
 /* 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 { diffFontSizeName } from "@git-diff-view/utils";
+import { diffFontSizeName, DiffModeEnum } from "@git-diff-view/utils";
 import { memo, useEffect, useMemo, forwardRef, useImperativeHandle, useRef } from "react";
 import * as React from "react";
 
@@ -16,20 +16,11 @@ import { createDiffConfigStore } from "./tools";
 
 import type { createDiffWidgetStore } from "./tools";
 import type { DiffHighlighter, DiffHighlighterLang } from "@git-diff-view/core";
-import type { CSSProperties, ForwardedRef, ReactNode } from "react";
+import type { CSSProperties, ForwardedRef, ReactNode, RefObject } from "react";
 
 _cacheMap.name = "@git-diff-view/react";
 
-export { SplitSide };
-
-export enum DiffModeEnum {
-  // github like
-  SplitGitHub = 1,
-  // gitlab like
-  SplitGitLab = 2,
-  Split = 1 | 2,
-  Unified = 4,
-}
+export { SplitSide, DiffModeEnum };
 
 export type DiffViewProps<T> = {
   data?: {
@@ -97,12 +88,16 @@ type DiffViewProps_2<T> = Omit<DiffViewProps<T>, "data"> & {
 };
 
 const InternalDiffView = <T extends unknown>(
-  props: Omit<DiffViewProps<T>, "data" | "registerHighlighter"> & { isMounted: boolean }
+  props: Omit<DiffViewProps<T>, "data" | "registerHighlighter"> & {
+    isMounted: boolean;
+    wrapperRef?: RefObject<HTMLDivElement>;
+  }
 ) => {
   const {
     diffFile,
     className,
     style,
+    wrapperRef,
     diffViewMode,
     diffViewWrap,
     diffViewFontSize,
@@ -118,8 +113,6 @@ const InternalDiffView = <T extends unknown>(
 
   const diffFileId = useMemo(() => diffFile.getId(), [diffFile]);
 
-  const wrapperRef = useRef<HTMLDivElement>();
-
   // performance optimization
   const useDiffContext = useMemo(
     () => createDiffConfigStore(props, diffFileId),
@@ -217,15 +210,6 @@ const InternalDiffView = <T extends unknown>(
     onCreateUseWidgetHook,
   ]);
 
-  useEffect(() => {
-    const cb = diffFile.subscribe(() => {
-      wrapperRef.current?.setAttribute("data-theme", diffFile._getTheme() || "light");
-      wrapperRef.current?.setAttribute("data-highlighter", diffFile._getHighlighterName());
-    });
-
-    return cb;
-  }, [diffFile]);
-
   const value = useMemo(() => ({ useDiffContext }), [useDiffContext]);
 
   return (
@@ -294,6 +278,8 @@ const DiffViewWithRef = <T extends unknown>(
 
   const diffFileRef = useRef(diffFile);
 
+  const wrapperRef = useRef<HTMLDivElement>();
+
   if (diffFileRef.current && diffFileRef.current !== diffFile) {
     diffFileRef.current.clear?.();
     diffFileRef.current = diffFile;
@@ -320,11 +306,27 @@ const DiffViewWithRef = <T extends unknown>(
 
   useEffect(() => {
     if (!diffFile) return;
+    
     if (props.diffViewHighlight) {
       diffFile.initSyntax({ registerHighlighter });
       diffFile.notifyAll();
     }
-  }, [diffFile, props.diffViewHighlight, registerHighlighter, diffViewTheme]);
+  }, [diffFile, props.diffViewHighlight, registerHighlighter]);
+
+  useEffect(() => {
+    if (!diffFile) return;
+
+    const init = () => {
+      wrapperRef.current?.setAttribute("data-theme", diffFile._getTheme() || "light");
+      wrapperRef.current?.setAttribute("data-highlighter", diffFile._getHighlighterName());
+    };
+
+    init();
+
+    const cb = diffFile.subscribe(init);
+
+    return cb;
+  }, [diffFile, diffViewTheme]);
 
   // fix react strict mode error
   useUnmount(() => (__DEV__ ? diffFile?._destroy?.() : diffFile?.clear?.()), [diffFile]);
@@ -339,6 +341,8 @@ const DiffViewWithRef = <T extends unknown>(
       {...restProps}
       diffFile={diffFile}
       isMounted={isMounted}
+      wrapperRef={wrapperRef}
+      diffViewTheme={diffViewTheme}
       diffViewMode={restProps.diffViewMode || DiffModeEnum.SplitGitHub}
       diffViewFontSize={restProps.diffViewFontSize || 14}
     />

package/src/components/v2/DiffSplitContentLineNormal_v2.tsx

@@ -76,7 +76,7 @@ const InternalDiffSplitLine = ({
       {hasContent ? (
         <>
           <div
-            className={`diff-line-${SplitSide[side]}-num sticky left-0 flex w-[1%] min-w-[40px] select-none items-center px-[10px] text-right`}
+            className={`diff-line-${SplitSide[side]}-num sticky left-0 z-[1] flex w-[1%] min-w-[40px] select-none items-center px-[10px] text-right`}
             style={{
               backgroundColor: lineNumberBG,
               color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,