@git-diff-view/react 0.0.35 → 0.0.37

package/index.d.ts

@@ -14,6 +14,7 @@ declare class File$1 {
 	readonly lang: DiffHighlighterLang | string;
 	readonly fileName?: string;
 	ast?: DiffAST;
+	theme?: "light" | "dark";
 	rawFile: Record<number, string>;
 	hasDoRaw: boolean;
 	rawLength?: number;
@@ -27,6 +28,9 @@ declare class File$1 {
 	highlighterName?: DiffHighlighter["name"];
 	highlighterType?: DiffHighlighter["type"];
 	maxLineNumber: number;
+	/**
+	 * @deprecated
+	 */
 	enableTemplate: boolean;
 	static createInstance(data: File$1): File$1;
 	constructor(row: string, lang: DiffHighlighterLang, fileName?: string);
@@ -110,12 +114,9 @@ export declare class DiffFile {
 	initTheme(theme?: "light" | "dark"): void;
 	initRaw(): void;
 	initSyntax({ registerHighlighter }?: {
-		registerHighlighter?: Omit<DiffHighlighter, "getHighlighterEngine">;
+		registerHighlighter?: DiffFileHighlighter;
 	}): void;
 	init(): void;
-	enableTemplate(): void;
-	disableTemplate(): void;
-	getIsEnableTemplate(): boolean;
 	buildSplitDiffLines(): void;
 	buildUnifiedDiffLines(): void;
 	getSplitLeftLine: (index: number) => SplitLineItem;
@@ -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;
@@ -202,11 +203,11 @@ export declare class DiffFile {
 		};
 		version: string;
 		theme: "light" | "dark";
-		enableTemplate: boolean;
 		isFullMerge: boolean;
 	};
 	mergeBundle: (data: ReturnType<DiffFile["getBundle"]>, notifyUpdate?: boolean) => void;
 	_getHighlighterName: () => string;
+	_getHighlighterType: () => string;
 	_getIsPureDiffRender: () => boolean;
 	_getTheme: () => "light" | "dark";
 	_addClonedInstance: (instance: DiffFile) => void;
@@ -264,7 +265,6 @@ export declare class DiffFile {
 		};
 		version: string;
 		theme: "light" | "dark";
-		enableTemplate: boolean;
 	};
 	_mergeFullBundle: (data: ReturnType<DiffFile["_getFullBundle"]>, notifyUpdate?: boolean) => void;
 	_destroy: () => void;
@@ -312,11 +312,13 @@ export declare class DiffLine {
 	readonly noTrailingNewLine: boolean;
 	changes?: IRange;
 	diffChanges?: DiffRange;
+	_diffChanges?: DiffRange;
 	plainTemplate?: string;
 	plainTemplateMode?: "fast-diff" | "relative";
 	syntaxTemplate?: string;
+	syntaxTemplateName?: 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, syntaxTemplateName?: string, syntaxTemplateMode?: "fast-diff" | "relative");
 	withNoTrailingNewLine(noTrailingNewLine: boolean): DiffLine;
 	isIncludeableLine(): boolean;
 	equals(other: DiffLine): boolean;
@@ -482,12 +484,14 @@ export declare const getPlainDiffTemplateByFastDiff: ({ diffLine, rawLine, opera
 export declare const getPlainLineTemplate: (line: string) => string;
 export declare const getSplitContentLines: (diffFile: DiffFile) => DiffSplitContentLineItem[];
 export declare const getSplitLines: (diffFile: DiffFile) => DiffSplitLineItem[];
-export declare const getSyntaxDiffTemplate: ({ diffLine, syntaxLine, operator, }: {
+export declare const getSyntaxDiffTemplate: ({ diffFile, diffLine, syntaxLine, operator, }: {
+	diffFile: DiffFile;
 	diffLine: DiffLine;
 	syntaxLine: SyntaxLine;
 	operator: "add" | "del";
 }) => void;
-export declare const getSyntaxDiffTemplateByFastDiff: ({ diffLine, syntaxLine, operator, }: {
+export declare const getSyntaxDiffTemplateByFastDiff: ({ diffFile, diffLine, syntaxLine, operator, }: {
+	diffFile: DiffFile;
 	diffLine: DiffLine;
 	syntaxLine: SyntaxLine;
 	operator: "add" | "del";
@@ -714,6 +718,7 @@ export interface UnifiedLineItem {
 	_isHidden?: boolean;
 }
 export type DiffAST = Root;
+export type DiffFileHighlighter = Omit<DiffHighlighter, "getHighlighterEngine">;
 export type DiffHighlighter = {
 	name: string;
 	type: "class" | "style" | string;

package/package.json

@@ -3,7 +3,7 @@
   "description": "@git-diff-view/react",
   "author": "MrWangJustToDo",
   "license": "MIT",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "main": "index.js",
   "types": "index.d.ts",
   "files": [
@@ -61,7 +61,7 @@
     "react diff component"
   ],
   "dependencies": {
-    "@git-diff-view/core": "^0.0.35",
+    "@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/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)`,