@git-diff-view/react 0.0.34 → 0.0.36

package/index.d.ts

@@ -14,11 +14,12 @@ declare class File$1 {
 	readonly lang: DiffHighlighterLang | string;
 	readonly fileName?: string;
 	ast?: DiffAST;
+	theme?: "light" | "dark";
 	rawFile: Record<number, string>;
 	hasDoRaw: boolean;
 	rawLength?: number;
-	syntaxFile: Record<number, SyntaxLineWithTemplate>;
-	plainFile: Record<number, {
+	syntaxFile: Record<number | string, SyntaxLineWithTemplate>;
+	plainFile: Record<number | string, {
 		value: string;
 		template?: string;
 	}>;
@@ -123,12 +124,12 @@ export declare class DiffFile {
 	getSplitLineIndexByLineNumber: (lineNumber: number, side: SplitSide) => number;
 	getSplitRightLine: (index: number) => SplitLineItem;
 	getSplitHunkLine: (index: number) => DiffHunkItem;
-	onSplitHunkExpand: (dir: "up" | "down" | "all", index: number, needTrigger?: boolean) => void;
+	onSplitHunkExpand: (dir: "up" | "down" | "all" | "up-all" | "down-all", index: number, needTrigger?: boolean) => void;
 	getUnifiedLine: (index: number) => UnifiedLineItem;
 	getUnifiedLineByLineNumber: (lienNumber: number, side: SplitSide) => UnifiedLineItem;
 	getUnifiedLineIndexByLineNumber: (lineNumber: number, side: SplitSide) => number;
 	getUnifiedHunkLine: (index: number) => DiffHunkItem;
-	onUnifiedHunkExpand: (dir: "up" | "down" | "all", index: number, needTrigger?: boolean) => void;
+	onUnifiedHunkExpand: (dir: "up" | "down" | "all" | "up-all" | "down-all", index: number, needTrigger?: boolean) => void;
 	onAllExpand: (mode: "split" | "unified") => void;
 	get hasExpandSplitAll(): boolean;
 	get hasExpandUnifiedAll(): boolean;
@@ -162,21 +163,21 @@ export declare class DiffFile {
 		hasBuildUnified: boolean;
 		oldFileLines: Record<number, string>;
 		oldFileDiffLines: Record<string, DiffLineItem>;
-		oldFilePlainLines: Record<number, {
+		oldFilePlainLines: Record<string | number, {
 			value: string;
 			template?: string;
 		}>;
-		oldFileSyntaxLines: Record<number, SyntaxLine & {
+		oldFileSyntaxLines: Record<string | number, SyntaxLine & {
 			template?: string;
 		}>;
 		oldFilePlaceholderLines: Record<string, boolean>;
 		newFileLines: Record<number, string>;
 		newFileDiffLines: Record<string, DiffLineItem>;
-		newFilePlainLines: Record<number, {
+		newFilePlainLines: Record<string | number, {
 			value: string;
 			template?: string;
 		}>;
-		newFileSyntaxLines: Record<number, SyntaxLine & {
+		newFileSyntaxLines: Record<string | number, SyntaxLine & {
 			template?: string;
 		}>;
 		newFilePlaceholderLines: Record<string, boolean>;
@@ -224,21 +225,21 @@ export declare class DiffFile {
 		hasBuildUnified: boolean;
 		oldFileLines: Record<number, string>;
 		oldFileDiffLines: Record<string, DiffLineItem>;
-		oldFilePlainLines: Record<number, {
+		oldFilePlainLines: Record<string | number, {
 			value: string;
 			template?: string;
 		}>;
-		oldFileSyntaxLines: Record<number, SyntaxLine & {
+		oldFileSyntaxLines: Record<string | number, SyntaxLine & {
 			template?: string;
 		}>;
 		oldFilePlaceholderLines: Record<string, boolean>;
 		newFileLines: Record<number, string>;
 		newFileDiffLines: Record<string, DiffLineItem>;
-		newFilePlainLines: Record<number, {
+		newFilePlainLines: Record<string | number, {
 			value: string;
 			template?: string;
 		}>;
-		newFileSyntaxLines: Record<number, SyntaxLine & {
+		newFileSyntaxLines: Record<string | number, SyntaxLine & {
 			template?: string;
 		}>;
 		newFilePlaceholderLines: Record<string, boolean>;
@@ -312,11 +313,12 @@ export declare class DiffLine {
 	readonly noTrailingNewLine: boolean;
 	changes?: IRange;
 	diffChanges?: DiffRange;
+	_diffChanges?: DiffRange;
 	plainTemplate?: string;
 	plainTemplateMode?: "fast-diff" | "relative";
 	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");
+	constructor(text: string, type: DiffLineType, originalLineNumber: number | null, oldLineNumber: number | null, newLineNumber: number | null, noTrailingNewLine?: boolean, changes?: IRange, diffChanges?: DiffRange, _diffChanges?: DiffRange, plainTemplate?: string, plainTemplateMode?: "fast-diff" | "relative", syntaxTemplate?: string, syntaxTemplateMode?: "fast-diff" | "relative");
 	withNoTrailingNewLine(noTrailingNewLine: boolean): DiffLine;
 	isIncludeableLine(): boolean;
 	equals(other: DiffLine): boolean;

package/package.json

@@ -3,7 +3,7 @@
   "description": "@git-diff-view/react",
   "author": "MrWangJustToDo",
   "license": "MIT",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "main": "index.js",
   "types": "index.d.ts",
   "files": [
@@ -61,7 +61,7 @@
     "react diff component"
   ],
   "dependencies": {
-    "@git-diff-view/core": "^0.0.34",
+    "@git-diff-view/core": "^0.0.36",
     "@types/hast": "^3.0.0",
     "fast-diff": "^1.3.0",
     "highlight.js": "^11.11.0",
@@ -83,7 +83,7 @@
   "scripts": {
     "gen:type": "dts-bundle-generator -o index.d.ts dist/types/index.d.ts",
     "gen:css1": "postcss src/tailwind.css -o dist/css/diff-view.css",
-    "gen:css2": "postcss src/tailwind_pure.css -o dist/css/diff-view-pure.css",
+    "gen:css2": "postcss src/tailwind.css -o dist/css/diff-view-pure.css",
     "gen:css": "npm run gen:css1 && npm run gen:css2"
   }
 }

package/readme.md

@@ -1,103 +1,154 @@
-## A React DiffView Component like GitHub, Easy to use and feature complete. 
+# @git-diff-view/react
 
-### Usage
+> A high-performance React diff view component with GitHub-style UI
 
-#### There are two ways to use this component:
+[![npm version](https://img.shields.io/npm/v/@git-diff-view/react)](https://www.npmjs.com/package/@git-diff-view/react)
+[![npm downloads](https://img.shields.io/npm/dm/@git-diff-view/react)](https://www.npmjs.com/package/@git-diff-view/react)
 
-1. Use the `DiffView` component directly.
+## Features
+
+- ✅ Split & Unified views
+- ✅ Syntax highlighting with full context
+- ✅ Light & Dark themes
+- ✅ SSR & RSC support
+- ✅ Widget & extend data system
+- ✅ High performance with Web Worker support
+
+## Installation
+
+```bash
+npm install @git-diff-view/react
+# or
+pnpm add @git-diff-view/react
+# or
+yarn add @git-diff-view/react
+```
+
+## Quick Start
+
+### Basic Usage
 
 ```tsx
 import { DiffView, DiffModeEnum } from "@git-diff-view/react";
 import "@git-diff-view/react/styles/diff-view.css";
 
-<DiffView<string>
-  // use data
-  data={{
-    oldFile?: { fileName?: string | null; fileLang?: string | null; content?: string | null };
-    newFile?: { fileName?: string | null; fileLang?: string | null; content?: string | null };
-    hunks: string[];
-  }}
-  extendData={{oldFile: {10: {data: 'foo'}}, newFile: {20: {data: 'bar'}}}}
-  renderExtendLine={({ data }) => ReactNode}
-  diffViewFontSize={number}
-  diffViewHighlight={boolean}
-  diffViewMode={DiffModeEnum.Split | DiffModeEnum.Unified}
-  diffViewWrap={boolean}
-  diffViewTheme={'light' | 'dark'}
-  diffViewAddWidget
-  onAddWidgetClick={({ side, lineNumber }) => void}
-  renderWidgetLine={({ onClose, side, lineNumber }) => ReactNode}
-/>
-
+function MyDiffView() {
+  return (
+    <DiffView
+      data={{
+        oldFile: { fileName: "old.ts", content: "..." },
+        newFile: { fileName: "new.ts", content: "..." },
+        hunks: ["..."]
+      }}
+      diffViewMode={DiffModeEnum.Split}
+      diffViewTheme="dark"
+      diffViewHighlight
+    />
+  );
+}
 ```
 
-2. Use the `DiffView` component with `@git-diff-view/core` or `@git-diff-view/file`
+### Advanced Usage with DiffFile
+
+**File Comparison Mode**
 
 ```tsx
-// with @git-diff-view/file
+import { DiffView } from "@git-diff-view/react";
 import { DiffFile, generateDiffFile } from "@git-diff-view/file";
+import "@git-diff-view/react/styles/diff-view.css";
+
 const file = generateDiffFile(
-  data?.oldFile?.fileName || "",
-  data?.oldFile?.content || "",
-  data?.newFile?.fileName || "",
-  data?.newFile?.content || "",
-  data?.oldFile?.fileLang || "",
-  data?.newFile?.fileLang || ""
+  "old.ts", oldContent,
+  "new.ts", newContent,
+  "typescript", "typescript"
 );
-file.initTheme('light' / 'dark');
+file.initTheme('dark');
 file.init();
 file.buildSplitDiffLines();
-file.buildUnifiedDiffLines();
 
-// with @git-diff-view/core
+<DiffView diffFile={file} />
+```
+
+**Git Diff Mode**
+
+```tsx
+import { DiffView } from "@git-diff-view/react";
 import { DiffFile } from "@git-diff-view/core";
+import "@git-diff-view/react/styles/diff-view.css";
+
 const file = new DiffFile(
-  data?.oldFile?.fileName || "",
-  data?.oldFile?.content || "",
-  data?.newFile?.fileName || "",
-  data?.newFile?.content || "",
-  data?.hunks || [],
-  data?.oldFile?.fileLang || "",
-  data?.newFile?.fileLang || ""
+  oldFileName,
+  oldContent,
+  newFileName,
+  newContent,
+  hunks,
+  oldFileLang,
+  newFileLang
 );
-file.initTheme('light' / 'dark');
+file.initTheme('dark');
 file.init();
 file.buildSplitDiffLines();
-file.buildUnifiedDiffLines();
-
-// use current data to render
-<DiffView diffFile={file} {...props} />;
-// or use the bundle data to render, eg: postMessage/httpRequest
-const bundle = file.getBundle();
-const diffFile = DiffFile.createInstance(data || {}, bundle);
-<DiffView diffFile={diffFile} {...props} />;
+
+<DiffView diffFile={file} />
 ```
-### example
 
-#### [react-example](https://github.com/MrWangJustToDo/git-diff-view/tree/main/ui/react-example)
-#### [react-ssr-example](https://github.com/MrWangJustToDo/git-diff-view/tree/main/ui/next-page-example)
-#### [react-rsc-example](https://github.com/MrWangJustToDo/git-diff-view/tree/main/ui/next-app-example)
+## Styling
 
-### Screen Shot
+```tsx
+// Default styles with Tailwind (next release will be pure CSS)
+import "@git-diff-view/react/styles/diff-view.css";
+
+// Pure CSS (no Tailwind conflicts)
+import "@git-diff-view/react/styles/diff-view-pure.css";
+```
 
-![Screenshot](https://raw.githubusercontent.com/MrWangJustToDo/git-diff-view/aa2e918498270f737d28e7531eab08fa3f1b8831/1.png)
-![Screenshot](https://raw.githubusercontent.com/MrWangJustToDo/git-diff-view/69c801e5eb5fcabc9c9655825eb1228f18dc1e0c/5.png)
-![Screenshot](https://raw.githubusercontent.com/MrWangJustToDo/git-diff-view/aa2e918498270f737d28e7531eab08fa3f1b8831/theme.png)
+## API Reference
 
 ### Props
 
-| Props  | Description  |
-| :--------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| data             | The diff data need to show, type: `{ oldFile: {fileName?: string, content?: string}, newFile: {fileName?: string, content?: string}, hunks: string[] }`, you can only pass hunks data, and the component will generate the oldFile and newFile data automatically |
-| diffFile         | the target data to render |
-| renderWidgetLine | return a valid `react` element to show the widget, this element will render when you click the `addWidget` button in the diff view  |
-| renderExtendLine | return a valid `react` element to show the extend data |
-| 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` / `DiffModeEnum.Unified` |
-| diffViewWrap     | enable code line auto wrap, type: boolean |
-| 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` |
+| Prop | Type | Description |
+|------|------|-------------|
+| `data` | `DiffData` | Diff data with `oldFile`, `newFile`, and `hunks` |
+| `diffFile` | `DiffFile` | Pre-processed diff file instance |
+| `diffViewMode` | `Split \| Unified` | View mode (default: `Split`) |
+| `diffViewTheme` | `light \| dark` | Theme (default: `light`) |
+| `diffViewHighlight` | `boolean` | Enable syntax highlighting |
+| `diffViewWrap` | `boolean` | Enable line wrapping |
+| `diffViewFontSize` | `number` | Font size in pixels |
+| `diffViewAddWidget` | `boolean` | Enable widget button |
+| `renderWidgetLine` | `(props) => ReactNode` | Custom widget renderer |
+| `renderExtendLine` | `(props) => ReactNode` | Custom extend data renderer |
+| `extendData` | `ExtendData` | Additional data per line |
+| `onAddWidgetClick` | `(props) => void` | Widget button click handler |
+
+### DiffData Type
+
+```typescript
+type DiffData = {
+  oldFile?: {
+    fileName?: string | null;
+    fileLang?: string | null;
+    content?: string | null;
+  };
+  newFile?: {
+    fileName?: string | null;
+    fileLang?: string | null;
+    content?: string | null;
+  };
+  hunks: string[];
+};
+```
+
+## Examples
+
+- [Basic React Example](https://github.com/MrWangJustToDo/git-diff-view/tree/main/ui/react-example)
+- [Next.js SSR Example](https://github.com/MrWangJustToDo/git-diff-view/tree/main/ui/next-page-example)
+- [Next.js RSC Example](https://github.com/MrWangJustToDo/git-diff-view/tree/main/ui/next-app-example)
+
+## Live Demo
+
+Try it online: [https://mrwangjusttodo.github.io/git-diff-view](https://mrwangjusttodo.github.io/git-diff-view)
+
+## License
 
+MIT © [MrWangJustToDo](https://github.com/MrWangJustToDo)

package/src/_base.css

@@ -1,3 +1,2 @@
-@tailwind base;
 @tailwind components;
 @tailwind utilities;

package/src/_com.css

@@ -4,10 +4,10 @@
 
 [data-theme="light"] .diff-style-root {
   --diff-border--: #dedede;
-  --diff-add-content--: #e6ffec;
+  --diff-add-content--: #dafbe1;
   --diff-del-content--: #ffebe9;
-  --diff-add-lineNumber--: #ccffd8;
-  --diff-del-lineNumber--: #ffd7d5;
+  --diff-add-lineNumber--: #aceebb;
+  --diff-del-lineNumber--: #ffcecb;
   --diff-plain-content--: #ffffff;
   --diff-expand-content--: #fafafa;
   --diff-plain-lineNumber--: #fafafa;
@@ -15,10 +15,10 @@
   --diff-plain-lineNumber-color--: #555555;
   --diff-expand-lineNumber-color--: #555555;
   --diff-hunk-content--: #ddf4ff;
-  --diff-hunk-lineNumber--: #c7ecff;
+  --diff-hunk-lineNumber--: #b6e3ff;
   --diff-hunk-lineNumber-hover--: #0969da;
-  --diff-add-content-highlight--: #abf2bc;
-  --diff-del-content-highlight--: #ffb3ad;
+  --diff-add-content-highlight--: #aceebb;
+  --diff-del-content-highlight--: #ffcecb;
   --diff-add-widget--: #0969d2;
   --diff-add-widget-color--: #ffffff;
   --diff-empty-content--: #fafafa;
@@ -35,10 +35,10 @@
 
 [data-theme="dark"] .diff-style-root {
   --diff-border--: #3d444d;
-  --diff-add-content--: #14261f;
-  --diff-del-content--: #311b1f;
-  --diff-add-lineNumber--: #1f4429;
-  --diff-del-lineNumber--: #552527;
+  --diff-add-content--: #18271f;
+  --diff-del-content--: #23191c;
+  --diff-add-lineNumber--: #284228;
+  --diff-del-lineNumber--: #4f2828;
   --diff-plain-content--: #0d1117;
   --diff-expand-content--: #161b22;
   --diff-plain-lineNumber--: #161b22;
@@ -46,10 +46,10 @@
   --diff-plain-lineNumber-color--: #a0aaab;
   --diff-expand-lineNumber-color--: #a0aaab;
   --diff-hunk-content--: #131d2e;
-  --diff-hunk-lineNumber--: #204274;
+  --diff-hunk-lineNumber--: #0c2d6b;
   --diff-hunk-lineNumber-hover--: #1f6feb;
-  --diff-add-content-highlight--: #1f572d;
-  --diff-del-content-highlight--: #80312f;
+  --diff-add-content-highlight--: #2f5732;
+  --diff-del-content-highlight--: #713431;
   --diff-add-widget--: #0969d2;
   --diff-add-widget-color--: #ffffff;
   --diff-empty-content--: #161b22;

package/src/components/DiffAddWidget.tsx

@@ -1,7 +1,8 @@
 import { addWidgetBGName, addWidgetColorName, diffFontSizeName } from "@git-diff-view/utils";
 import * as React from "react";
 
-import type { SplitSide } from "./DiffView";
+import { SplitSide } from "./DiffView";
+
 import type { DiffFile } from "@git-diff-view/core";
 
 export const DiffSplitAddWidget = ({
@@ -21,6 +22,7 @@ export const DiffSplitAddWidget = ({
 }) => {
   return (
     <div
+      data-add-widget={SplitSide[side]}
       className={
         "diff-add-widget-wrapper invisible select-none transition-transform hover:scale-110 group-hover:visible" +
         (className ? " " + className : "")
@@ -63,6 +65,7 @@ export const DiffUnifiedAddWidget = ({
 }) => {
   return (
     <div
+      data-add-widget={SplitSide[side]}
       className="diff-add-widget-wrapper invisible absolute left-[100%] translate-x-[-50%] select-none transition-transform hover:scale-110 group-hover:visible"
       style={{
         width: `calc(var(${diffFontSizeName}) * 1.4)`,

package/src/components/DiffSplitHunkLineNormal.tsx

@@ -163,8 +163,8 @@ const InternalDiffSplitHunkLineGitLab = ({
 
   useSyncHeight({
     selector: `tr[data-line="${lineNumber}-hunk"]`,
-    side: SplitSide[side],
-    enable: true,
+    side: SplitSide[SplitSide.old],
+    enable: side === SplitSide.new,
   });
 
   const couldExpand = expandEnabled && currentHunk && currentHunk.splitInfo;

package/src/components/DiffUnifiedExtendLine.tsx

@@ -32,7 +32,7 @@ const InternalDiffUnifiedExtendLine = ({
   // TODO use css variable to get width
   const width = useDomWidth({
     selector: ".unified-diff-table-wrapper",
-    enable: typeof renderExtendLine === "function" && !enableWrap,
+    enable: typeof renderExtendLine === "function",
   });
 
   if (!renderExtendLine) return null;

package/src/components/DiffUnifiedWidgetLine.tsx

@@ -44,7 +44,7 @@ const InternalDiffUnifiedWidgetLine = ({
 
   const width = useDomWidth({
     selector: ".unified-diff-table-wrapper",
-    enable: typeof renderWidgetLine === "function" && !enableWrap,
+    enable: typeof renderWidgetLine === "function",
   });
 
   if (!renderWidgetLine) return null;

package/src/components/v2/DiffSplitHunkLineNormal_v2.tsx

@@ -154,8 +154,8 @@ const InternalDiffSplitHunkLineGitLab = ({
 
   useSyncHeight({
     selector: `div[data-state="hunk"][data-line="${lineNumber}-hunk"]`,
-    side: SplitSide[side],
-    enable: true,
+    side: SplitSide[SplitSide.old],
+    enable: side === SplitSide.new,
   });
 
   const couldExpand = expandEnabled && currentHunk && currentHunk.splitInfo;

package/styles/diff-view-pure.css

@@ -267,10 +267,10 @@
 }
 .diff-tailwindcss-wrapper[data-theme="light"] .diff-style-root {
   --diff-border--: #dedede;
-  --diff-add-content--: #e6ffec;
+  --diff-add-content--: #dafbe1;
   --diff-del-content--: #ffebe9;
-  --diff-add-lineNumber--: #ccffd8;
-  --diff-del-lineNumber--: #ffd7d5;
+  --diff-add-lineNumber--: #aceebb;
+  --diff-del-lineNumber--: #ffcecb;
   --diff-plain-content--: #ffffff;
   --diff-expand-content--: #fafafa;
   --diff-plain-lineNumber--: #fafafa;
@@ -278,10 +278,10 @@
   --diff-plain-lineNumber-color--: #555555;
   --diff-expand-lineNumber-color--: #555555;
   --diff-hunk-content--: #ddf4ff;
-  --diff-hunk-lineNumber--: #c7ecff;
+  --diff-hunk-lineNumber--: #b6e3ff;
   --diff-hunk-lineNumber-hover--: #0969da;
-  --diff-add-content-highlight--: #abf2bc;
-  --diff-del-content-highlight--: #ffb3ad;
+  --diff-add-content-highlight--: #aceebb;
+  --diff-del-content-highlight--: #ffcecb;
   --diff-add-widget--: #0969d2;
   --diff-add-widget-color--: #ffffff;
   --diff-empty-content--: #fafafa;
@@ -296,10 +296,10 @@
 }
 .diff-tailwindcss-wrapper[data-theme="dark"] .diff-style-root {
   --diff-border--: #3d444d;
-  --diff-add-content--: #14261f;
-  --diff-del-content--: #311b1f;
-  --diff-add-lineNumber--: #1f4429;
-  --diff-del-lineNumber--: #552527;
+  --diff-add-content--: #18271f;
+  --diff-del-content--: #23191c;
+  --diff-add-lineNumber--: #284228;
+  --diff-del-lineNumber--: #4f2828;
   --diff-plain-content--: #0d1117;
   --diff-expand-content--: #161b22;
   --diff-plain-lineNumber--: #161b22;
@@ -307,10 +307,10 @@
   --diff-plain-lineNumber-color--: #a0aaab;
   --diff-expand-lineNumber-color--: #a0aaab;
   --diff-hunk-content--: #131d2e;
-  --diff-hunk-lineNumber--: #204274;
+  --diff-hunk-lineNumber--: #0c2d6b;
   --diff-hunk-lineNumber-hover--: #1f6feb;
-  --diff-add-content-highlight--: #1f572d;
-  --diff-del-content-highlight--: #80312f;
+  --diff-add-content-highlight--: #2f5732;
+  --diff-del-content-highlight--: #713431;
   --diff-add-widget--: #0969d2;
   --diff-add-widget-color--: #ffffff;
   --diff-empty-content--: #161b22;