@git-diff-view/react - npm Package Compare versions

Comparing version 0.0.28 to 0.0.29

index.d.ts

@@ -29,2 +29,3 @@ // Generated by dts-bundle-generator v9.5.1
 	maxLineNumber: number;
+	enableTemplate: boolean;
 	static createInstance(data: File$1): File$1;
@@ -91,2 +92,5 @@ constructor(row: string, lang: DiffHighlighterLang, fileName?: string);
 	init(): void;
+	enableTemplate(): void;
+	disableTemplate(): void;
+	getIsEnableTemplate(): boolean;
 	buildSplitDiffLines(): void;
@@ -170,2 +174,3 @@ buildUnifiedDiffLines(): void;
 		theme: "light" | "dark";
+		enableTemplate: boolean;
 		isFullMerge: boolean;
@@ -228,2 +233,3 @@ };
 		theme: "light" | "dark";
+		enableTemplate: boolean;
 	};
@@ -794,2 +800,8 @@ _mergeFullBundle: (data: ReturnType<DiffFile["_getFullBundle"]>, notifyUpdate?: boolean) => void;
 };
+export declare enum DiffModeEnum {
+	SplitGitHub = 1,
+	SplitGitLab = 2,
+	Split = 3,
+	Unified = 4
+}
 declare const createDiffConfigStore: (props: DiffViewProps<any> & {
@@ -940,8 +952,2 @@ isMounted: boolean;
 }>;
-export declare enum DiffModeEnum {
-	SplitGitHub = 1,
-	SplitGitLab = 2,
-	Split = 3,
-	Unified = 4
-}
 export type DiffViewProps<T> = {
@@ -948,0 +954,0 @@ data?: {

package.json

@@ -6,3 +6,3 @@ {
   "license": "MIT",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "main": "index.js",
@@ -65,3 +65,3 @@ "types": "index.d.ts",
   "dependencies": {
-    "@git-diff-view/core": "^0.0.28",
+    "@git-diff-view/core": "^0.0.29",
     "@types/hast": "^3.0.0",
@@ -71,3 +71,3 @@ "fast-diff": "^1.3.0",
     "lowlight": "^3.3.0",
-    "reactivity-store": "^0.3.10",
+    "reactivity-store": "^0.3.11",
     "use-sync-external-store": "^1.4.0"
@@ -78,3 +78,3 @@ },
     "autoprefixer": "^10.4.20",
-    "postcss": "^8.5.1",
+    "postcss": "^8.5.6",
     "react": "^18.0.0",
@@ -81,0 +81,0 @@ "tailwindcss": "^3.4.17"

src/components/DiffContent_v2.tsx

@@ -0,9 +1,3 @@
+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,
@@ -10,0 +4,0 @@ delContentHighlightBGName,

src/components/DiffContent.tsx

@@ -57,2 +57,3 @@ /* eslint-disable max-lines */
   enableWrap,
+  enableTemplate,
 }: {
@@ -64,2 +65,3 @@ rawLine: string;
   enableWrap?: boolean;
+  enableTemplate?: boolean;
 }) => {
@@ -71,7 +73,7 @@ const changes = diffLine?.changes;
 
-    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 (
@@ -142,7 +144,7 @@ <span className="diff-line-content-raw">
 
-  if (plainLine && !plainLine?.template) {
+  if (enableTemplate && plainLine && !plainLine?.template) {
     plainLine.template = getPlainLineTemplate(plainLine.value);
   }
 
-  if (plainLine?.template) {
+  if (enableTemplate && plainLine?.template) {
     return (
@@ -164,2 +166,3 @@ <span className="diff-line-content-raw">
   enableWrap,
+  enableTemplate,
 }: {
@@ -171,5 +174,14 @@ rawLine: string;
   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}
+      />
+    );
   }
@@ -182,7 +194,7 @@
 
-    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 (
@@ -289,7 +301,7 @@ <span className="diff-line-syntax-raw">
 
-  if (!syntaxLine.template) {
+  if (enableTemplate && !syntaxLine.template) {
     syntaxLine.template = getSyntaxLineTemplate(syntaxLine);
   }
 
-  if (syntaxLine?.template) {
+  if (enableTemplate && syntaxLine?.template) {
     return (
@@ -321,2 +333,3 @@ <span className="diff-line-syntax-raw">
   diffLine,
+  diffFile,
   rawLine,
@@ -342,2 +355,4 @@ plainLine,
 
+  const isEnableTemplate = diffFile.getIsEnableTemplate?.() ?? true;
+
   return (
@@ -365,2 +380,3 @@ <div
           enableWrap={enableWrap}
+          enableTemplate={isEnableTemplate}
         />
@@ -374,2 +390,3 @@ ) : (
           enableWrap={enableWrap}
+          enableTemplate={isEnableTemplate}
         />
@@ -376,0 +393,0 @@ )}

src/components/DiffSplitContentLineNormal.tsx

@@ -47,3 +47,3 @@ import { DiffLineType, type DiffFile, checkDiffLineIncludeChange } from "@git-diff-view/core";
 
-  const hasContent = !!currentLine.lineNumber;
+  const hasContent = !!currentLine?.lineNumber;
 
@@ -82,3 +82,3 @@ const hasChange = checkDiffLineIncludeChange(currentLine?.diff);
           <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={{
@@ -114,4 +114,4 @@ backgroundColor: lineNumberBG,
               diffFile={diffFile}
-              rawLine={currentLine.value!}
-              diffLine={currentLine.diff}
+              rawLine={currentLine?.value || ""}
+              diffLine={currentLine?.diff}
               plainLine={plainLine}
@@ -118,0 +118,0 @@ syntaxLine={syntaxLine}

src/components/DiffSplitViewNormal.tsx

@@ -88,2 +88,4 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */
 
+  const tempRef = useRef<SplitSide>();
+
   const splitLineLength = Math.max(diffFile.splitLineLength, diffFile.fileLineLength);
@@ -143,9 +145,15 @@
       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;
@@ -152,0 +160,0 @@ } else {

src/components/DiffSplitViewWrap.tsx

@@ -27,2 +27,4 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */
 
+  const tempRef = useRef<SplitSide>();
+
   const { fontSize, enableAddWidget, enableHighlight } = useDiffContext.useShallowStableSelector((s) => ({
@@ -71,9 +73,15 @@ fontSize: s.fontSize,
       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;
@@ -80,0 +88,0 @@ } else {

src/components/DiffSplitWidgetLineNormal.tsx

@@ -32,3 +32,3 @@ import { emptyBGName } from "@git-diff-view/utils";
 
-  const widgetSide = useWidget.getReadonlyState().widgetSide;
+  const widgetSide = useWidget.useShallowStableSelector((s) => s.widgetSide);
 
@@ -35,0 +35,0 @@ const widgetLineNumber = useWidget.getReadonlyState().widgetLineNumber;

src/components/DiffSplitWidgetLineWrap.tsx

@@ -32,3 +32,3 @@ import { borderColorName, emptyBGName } from "@git-diff-view/utils";
 
-  const widgetSide = useWidget.getReadonlyState().widgetSide;
+  const widgetSide = useWidget.useShallowStableSelector((s) => s.widgetSide);
 
@@ -35,0 +35,0 @@ const widgetLineNumber = useWidget.getReadonlyState().widgetLineNumber;

src/components/DiffUnifiedContentLine.tsx

@@ -56,3 +56,3 @@ import { type DiffFile, type DiffLine, checkDiffLineIncludeChange, type File } from "@git-diff-view/core";
       <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={{
@@ -129,3 +129,3 @@ color: `var(${plainLineNumberColorName})`,
       <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={{
@@ -262,3 +262,3 @@ color: `var(${plainLineNumberColorName})`,
           <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={{
@@ -265,0 +265,0 @@ color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,

src/components/DiffUnifiedView.tsx

@@ -26,2 +26,4 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */
 
+  const tempRef = useRef<SplitSide>();
+
   const useDiffContextRef = useRef(useDiffContext);
@@ -91,8 +93,14 @@
         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;
@@ -99,0 +107,0 @@ }

src/components/DiffView.tsx

 /* 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";
@@ -19,17 +19,8 @@ import * as React from "react";
 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 { SplitSide, DiffModeEnum };
 
-export enum DiffModeEnum {
-  // github like
-  SplitGitHub = 1,
-  // gitlab like
-  SplitGitLab = 2,
-  Split = 1 | 2,
-  Unified = 4,
-}
-
 export type DiffViewProps<T> = {
@@ -101,3 +92,6 @@ 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>;
+  }
 ) => {
@@ -108,2 +102,3 @@ const {
     style,
+    wrapperRef,
     diffViewMode,
@@ -124,4 +119,2 @@ diffViewWrap,
 
-  const wrapperRef = useRef<HTMLDivElement>();
-
   // performance optimization
@@ -224,11 +217,2 @@ const useDiffContext = useMemo(
 
-  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]);
@@ -302,2 +286,4 @@
 
+  const wrapperRef = useRef<HTMLDivElement>();
+
   if (diffFileRef.current && diffFileRef.current !== diffFile) {
@@ -333,4 +319,17 @@ diffFileRef.current.clear?.();
     }
-  }, [diffFile, props.diffViewHighlight, registerHighlighter, diffViewTheme]);
+  }, [diffFile, props.diffViewHighlight, registerHighlighter]);
 
+  useEffect(() => {
+    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
@@ -349,2 +348,4 @@ useUnmount(() => (__DEV__ ? diffFile?._destroy?.() : diffFile?.clear?.()), [diffFile]);
       isMounted={isMounted}
+      wrapperRef={wrapperRef}
+      diffViewTheme={diffViewTheme}
       diffViewMode={restProps.diffViewMode || DiffModeEnum.SplitGitHub}
@@ -351,0 +352,0 @@ diffViewFontSize={restProps.diffViewFontSize || 14}

src/components/v2/DiffSplitContentLineNormal_v2.tsx

@@ -79,3 +79,3 @@ import { DiffLineType, type DiffFile, checkDiffLineIncludeChange } from "@git-diff-view/core";
           <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={{
@@ -82,0 +82,0 @@ backgroundColor: lineNumberBG,

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1309208

1.09%

Lines of code

15990

0.69%

Dependency changes

• + Added

  @git-diff-view/core@0.0.29
  (transitive)

• + Added

  @git-diff-view/lowlight@0.0.29
  (transitive)

• - Removed

  @git-diff-view/core@0.0.28
  (transitive)

• - Removed

  @git-diff-view/lowlight@0.0.28
  (transitive)

• Updated

  @git-diff-view/core@^0.0.29

• Updated

  reactivity-store@^0.3.11