@git-diff-view/react 0.0.35 → 0.0.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/cjs/index.development.js +4 -4
  2. package/dist/cjs/index.development.js.map +1 -1
  3. package/dist/cjs/index.production.js +4 -4
  4. package/dist/cjs/index.production.js.map +1 -1
  5. package/dist/css/diff-view.css +0 -506
  6. package/dist/esm/index.mjs +5 -5
  7. package/dist/esm/index.mjs.map +1 -1
  8. package/index.d.ts +5 -3
  9. package/package.json +3 -3
  10. package/readme.md +123 -72
  11. package/src/_base.css +0 -1
  12. package/src/components/DiffAddWidget.tsx +4 -1
  13. package/styles/diff-view.css +0 -506
  14. package/src/_base_pure.css +0 -2
  15. package/src/tailwind_pure.css +0 -3
package/index.d.ts CHANGED
@@ -14,6 +14,7 @@ declare class File$1 {
14
14
  readonly lang: DiffHighlighterLang | string;
15
15
  readonly fileName?: string;
16
16
  ast?: DiffAST;
17
+ theme?: "light" | "dark";
17
18
  rawFile: Record<number, string>;
18
19
  hasDoRaw: boolean;
19
20
  rawLength?: number;
@@ -123,12 +124,12 @@ export declare class DiffFile {
123
124
  getSplitLineIndexByLineNumber: (lineNumber: number, side: SplitSide) => number;
124
125
  getSplitRightLine: (index: number) => SplitLineItem;
125
126
  getSplitHunkLine: (index: number) => DiffHunkItem;
126
- onSplitHunkExpand: (dir: "up" | "down" | "all", index: number, needTrigger?: boolean) => void;
127
+ onSplitHunkExpand: (dir: "up" | "down" | "all" | "up-all" | "down-all", index: number, needTrigger?: boolean) => void;
127
128
  getUnifiedLine: (index: number) => UnifiedLineItem;
128
129
  getUnifiedLineByLineNumber: (lienNumber: number, side: SplitSide) => UnifiedLineItem;
129
130
  getUnifiedLineIndexByLineNumber: (lineNumber: number, side: SplitSide) => number;
130
131
  getUnifiedHunkLine: (index: number) => DiffHunkItem;
131
- onUnifiedHunkExpand: (dir: "up" | "down" | "all", index: number, needTrigger?: boolean) => void;
132
+ onUnifiedHunkExpand: (dir: "up" | "down" | "all" | "up-all" | "down-all", index: number, needTrigger?: boolean) => void;
132
133
  onAllExpand: (mode: "split" | "unified") => void;
133
134
  get hasExpandSplitAll(): boolean;
134
135
  get hasExpandUnifiedAll(): boolean;
@@ -312,11 +313,12 @@ export declare class DiffLine {
312
313
  readonly noTrailingNewLine: boolean;
313
314
  changes?: IRange;
314
315
  diffChanges?: DiffRange;
316
+ _diffChanges?: DiffRange;
315
317
  plainTemplate?: string;
316
318
  plainTemplateMode?: "fast-diff" | "relative";
317
319
  syntaxTemplate?: string;
318
320
  syntaxTemplateMode?: "fast-diff" | "relative";
319
- 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");
321
+ 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");
320
322
  withNoTrailingNewLine(noTrailingNewLine: boolean): DiffLine;
321
323
  isIncludeableLine(): boolean;
322
324
  equals(other: DiffLine): boolean;
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "@git-diff-view/react",
4
4
  "author": "MrWangJustToDo",
5
5
  "license": "MIT",
6
- "version": "0.0.35",
6
+ "version": "0.0.36",
7
7
  "main": "index.js",
8
8
  "types": "index.d.ts",
9
9
  "files": [
@@ -61,7 +61,7 @@
61
61
  "react diff component"
62
62
  ],
63
63
  "dependencies": {
64
- "@git-diff-view/core": "^0.0.35",
64
+ "@git-diff-view/core": "^0.0.36",
65
65
  "@types/hast": "^3.0.0",
66
66
  "fast-diff": "^1.3.0",
67
67
  "highlight.js": "^11.11.0",
@@ -83,7 +83,7 @@
83
83
  "scripts": {
84
84
  "gen:type": "dts-bundle-generator -o index.d.ts dist/types/index.d.ts",
85
85
  "gen:css1": "postcss src/tailwind.css -o dist/css/diff-view.css",
86
- "gen:css2": "postcss src/tailwind_pure.css -o dist/css/diff-view-pure.css",
86
+ "gen:css2": "postcss src/tailwind.css -o dist/css/diff-view-pure.css",
87
87
  "gen:css": "npm run gen:css1 && npm run gen:css2"
88
88
  }
89
89
  }
package/readme.md CHANGED
@@ -1,103 +1,154 @@
1
- ## A React DiffView Component like GitHub, Easy to use and feature complete.
1
+ # @git-diff-view/react
2
2
 
3
- ### Usage
3
+ > A high-performance React diff view component with GitHub-style UI
4
4
 
5
- #### There are two ways to use this component:
5
+ [![npm version](https://img.shields.io/npm/v/@git-diff-view/react)](https://www.npmjs.com/package/@git-diff-view/react)
6
+ [![npm downloads](https://img.shields.io/npm/dm/@git-diff-view/react)](https://www.npmjs.com/package/@git-diff-view/react)
6
7
 
7
- 1. Use the `DiffView` component directly.
8
+ ## Features
9
+
10
+ - ✅ Split & Unified views
11
+ - ✅ Syntax highlighting with full context
12
+ - ✅ Light & Dark themes
13
+ - ✅ SSR & RSC support
14
+ - ✅ Widget & extend data system
15
+ - ✅ High performance with Web Worker support
16
+
17
+ ## Installation
18
+
19
+ ```bash
20
+ npm install @git-diff-view/react
21
+ # or
22
+ pnpm add @git-diff-view/react
23
+ # or
24
+ yarn add @git-diff-view/react
25
+ ```
26
+
27
+ ## Quick Start
28
+
29
+ ### Basic Usage
8
30
 
9
31
  ```tsx
10
32
  import { DiffView, DiffModeEnum } from "@git-diff-view/react";
11
33
  import "@git-diff-view/react/styles/diff-view.css";
12
34
 
13
- <DiffView<string>
14
- // use data
15
- data={{
16
- oldFile?: { fileName?: string | null; fileLang?: string | null; content?: string | null };
17
- newFile?: { fileName?: string | null; fileLang?: string | null; content?: string | null };
18
- hunks: string[];
19
- }}
20
- extendData={{oldFile: {10: {data: 'foo'}}, newFile: {20: {data: 'bar'}}}}
21
- renderExtendLine={({ data }) => ReactNode}
22
- diffViewFontSize={number}
23
- diffViewHighlight={boolean}
24
- diffViewMode={DiffModeEnum.Split | DiffModeEnum.Unified}
25
- diffViewWrap={boolean}
26
- diffViewTheme={'light' | 'dark'}
27
- diffViewAddWidget
28
- onAddWidgetClick={({ side, lineNumber }) => void}
29
- renderWidgetLine={({ onClose, side, lineNumber }) => ReactNode}
30
- />
31
-
35
+ function MyDiffView() {
36
+ return (
37
+ <DiffView
38
+ data={{
39
+ oldFile: { fileName: "old.ts", content: "..." },
40
+ newFile: { fileName: "new.ts", content: "..." },
41
+ hunks: ["..."]
42
+ }}
43
+ diffViewMode={DiffModeEnum.Split}
44
+ diffViewTheme="dark"
45
+ diffViewHighlight
46
+ />
47
+ );
48
+ }
32
49
  ```
33
50
 
34
- 2. Use the `DiffView` component with `@git-diff-view/core` or `@git-diff-view/file`
51
+ ### Advanced Usage with DiffFile
52
+
53
+ **File Comparison Mode**
35
54
 
36
55
  ```tsx
37
- // with @git-diff-view/file
56
+ import { DiffView } from "@git-diff-view/react";
38
57
  import { DiffFile, generateDiffFile } from "@git-diff-view/file";
58
+ import "@git-diff-view/react/styles/diff-view.css";
59
+
39
60
  const file = generateDiffFile(
40
- data?.oldFile?.fileName || "",
41
- data?.oldFile?.content || "",
42
- data?.newFile?.fileName || "",
43
- data?.newFile?.content || "",
44
- data?.oldFile?.fileLang || "",
45
- data?.newFile?.fileLang || ""
61
+ "old.ts", oldContent,
62
+ "new.ts", newContent,
63
+ "typescript", "typescript"
46
64
  );
47
- file.initTheme('light' / 'dark');
65
+ file.initTheme('dark');
48
66
  file.init();
49
67
  file.buildSplitDiffLines();
50
- file.buildUnifiedDiffLines();
51
68
 
52
- // with @git-diff-view/core
69
+ <DiffView diffFile={file} />
70
+ ```
71
+
72
+ **Git Diff Mode**
73
+
74
+ ```tsx
75
+ import { DiffView } from "@git-diff-view/react";
53
76
  import { DiffFile } from "@git-diff-view/core";
77
+ import "@git-diff-view/react/styles/diff-view.css";
78
+
54
79
  const file = new DiffFile(
55
- data?.oldFile?.fileName || "",
56
- data?.oldFile?.content || "",
57
- data?.newFile?.fileName || "",
58
- data?.newFile?.content || "",
59
- data?.hunks || [],
60
- data?.oldFile?.fileLang || "",
61
- data?.newFile?.fileLang || ""
80
+ oldFileName,
81
+ oldContent,
82
+ newFileName,
83
+ newContent,
84
+ hunks,
85
+ oldFileLang,
86
+ newFileLang
62
87
  );
63
- file.initTheme('light' / 'dark');
88
+ file.initTheme('dark');
64
89
  file.init();
65
90
  file.buildSplitDiffLines();
66
- file.buildUnifiedDiffLines();
67
-
68
- // use current data to render
69
- <DiffView diffFile={file} {...props} />;
70
- // or use the bundle data to render, eg: postMessage/httpRequest
71
- const bundle = file.getBundle();
72
- const diffFile = DiffFile.createInstance(data || {}, bundle);
73
- <DiffView diffFile={diffFile} {...props} />;
91
+
92
+ <DiffView diffFile={file} />
74
93
  ```
75
- ### example
76
94
 
77
- #### [react-example](https://github.com/MrWangJustToDo/git-diff-view/tree/main/ui/react-example)
78
- #### [react-ssr-example](https://github.com/MrWangJustToDo/git-diff-view/tree/main/ui/next-page-example)
79
- #### [react-rsc-example](https://github.com/MrWangJustToDo/git-diff-view/tree/main/ui/next-app-example)
95
+ ## Styling
80
96
 
81
- ### Screen Shot
97
+ ```tsx
98
+ // Default styles with Tailwind (next release will be pure CSS)
99
+ import "@git-diff-view/react/styles/diff-view.css";
100
+
101
+ // Pure CSS (no Tailwind conflicts)
102
+ import "@git-diff-view/react/styles/diff-view-pure.css";
103
+ ```
82
104
 
83
- ![Screenshot](https://raw.githubusercontent.com/MrWangJustToDo/git-diff-view/aa2e918498270f737d28e7531eab08fa3f1b8831/1.png)
84
- ![Screenshot](https://raw.githubusercontent.com/MrWangJustToDo/git-diff-view/69c801e5eb5fcabc9c9655825eb1228f18dc1e0c/5.png)
85
- ![Screenshot](https://raw.githubusercontent.com/MrWangJustToDo/git-diff-view/aa2e918498270f737d28e7531eab08fa3f1b8831/theme.png)
105
+ ## API Reference
86
106
 
87
107
  ### Props
88
108
 
89
- | Props | Description |
90
- | :--------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
91
- | 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 |
92
- | diffFile | the target data to render |
93
- | renderWidgetLine | return a valid `react` element to show the widget, this element will render when you click the `addWidget` button in the diff view |
94
- | renderExtendLine | return a valid `react` element to show the extend data |
95
- | extendData | a list to store the extend data to show in the `Diff View`, type: {oldFile: {lineNumber: {data: any}}, newFile: {lineNumber: {data: any}}} |
96
- | diffViewFontSize | the fontSize for the DiffView component, type: number |
97
- | diffViewHighlight | enable syntax highlight, type: boolean |
98
- | diffViewMode | the mode for the DiffView component, type: `DiffModeEnum.Split` / `DiffModeEnum.Unified` |
99
- | diffViewWrap | enable code line auto wrap, type: boolean |
100
- | diffViewTheme | the theme for the DiffView component, type: `light` / `dark` |
101
- | diffViewAddWidget| enable `addWidget` button, type: boolean |
102
- | onAddWidgetClick | when the `addWidget` button clicked, type: `({ side: "old" / "new", lineNumber: number }) => void` |
109
+ | Prop | Type | Description |
110
+ |------|------|-------------|
111
+ | `data` | `DiffData` | Diff data with `oldFile`, `newFile`, and `hunks` |
112
+ | `diffFile` | `DiffFile` | Pre-processed diff file instance |
113
+ | `diffViewMode` | `Split \| Unified` | View mode (default: `Split`) |
114
+ | `diffViewTheme` | `light \| dark` | Theme (default: `light`) |
115
+ | `diffViewHighlight` | `boolean` | Enable syntax highlighting |
116
+ | `diffViewWrap` | `boolean` | Enable line wrapping |
117
+ | `diffViewFontSize` | `number` | Font size in pixels |
118
+ | `diffViewAddWidget` | `boolean` | Enable widget button |
119
+ | `renderWidgetLine` | `(props) => ReactNode` | Custom widget renderer |
120
+ | `renderExtendLine` | `(props) => ReactNode` | Custom extend data renderer |
121
+ | `extendData` | `ExtendData` | Additional data per line |
122
+ | `onAddWidgetClick` | `(props) => void` | Widget button click handler |
123
+
124
+ ### DiffData Type
125
+
126
+ ```typescript
127
+ type DiffData = {
128
+ oldFile?: {
129
+ fileName?: string | null;
130
+ fileLang?: string | null;
131
+ content?: string | null;
132
+ };
133
+ newFile?: {
134
+ fileName?: string | null;
135
+ fileLang?: string | null;
136
+ content?: string | null;
137
+ };
138
+ hunks: string[];
139
+ };
140
+ ```
141
+
142
+ ## Examples
143
+
144
+ - [Basic React Example](https://github.com/MrWangJustToDo/git-diff-view/tree/main/ui/react-example)
145
+ - [Next.js SSR Example](https://github.com/MrWangJustToDo/git-diff-view/tree/main/ui/next-page-example)
146
+ - [Next.js RSC Example](https://github.com/MrWangJustToDo/git-diff-view/tree/main/ui/next-app-example)
147
+
148
+ ## Live Demo
149
+
150
+ Try it online: [https://mrwangjusttodo.github.io/git-diff-view](https://mrwangjusttodo.github.io/git-diff-view)
151
+
152
+ ## License
103
153
 
154
+ MIT © [MrWangJustToDo](https://github.com/MrWangJustToDo)
package/src/_base.css CHANGED
@@ -1,3 +1,2 @@
1
- @tailwind base;
2
1
  @tailwind components;
3
2
  @tailwind utilities;
package/src/components/DiffAddWidget.tsx CHANGED
@@ -1,7 +1,8 @@
1
1
  import { addWidgetBGName, addWidgetColorName, diffFontSizeName } from "@git-diff-view/utils";
2
2
  import * as React from "react";
3
3
 
4
- import type { SplitSide } from "./DiffView";
4
+ import { SplitSide } from "./DiffView";
5
+
5
6
  import type { DiffFile } from "@git-diff-view/core";
6
7
 
7
8
  export const DiffSplitAddWidget = ({
@@ -21,6 +22,7 @@ export const DiffSplitAddWidget = ({
21
22
  }) => {
22
23
  return (
23
24
  <div
25
+ data-add-widget={SplitSide[side]}
24
26
  className={
25
27
  "diff-add-widget-wrapper invisible select-none transition-transform hover:scale-110 group-hover:visible" +
26
28
  (className ? " " + className : "")
@@ -63,6 +65,7 @@ export const DiffUnifiedAddWidget = ({
63
65
  }) => {
64
66
  return (
65
67
  <div
68
+ data-add-widget={SplitSide[side]}
66
69
  className="diff-add-widget-wrapper invisible absolute left-[100%] translate-x-[-50%] select-none transition-transform hover:scale-110 group-hover:visible"
67
70
  style={{
68
71
  width: `calc(var(${diffFontSizeName}) * 1.4)`,