react-diff-viewer-continued 4.0.2 → 4.0.4
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.
- package/.github/workflows/release.yml +7 -7
- package/CHANGELOG.md +16 -0
- package/README.md +3 -3
- package/biome.json +14 -0
- package/lib/cjs/src/compute-hidden-blocks.d.ts +1 -1
- package/lib/cjs/src/compute-hidden-blocks.js +9 -9
- package/lib/cjs/src/compute-lines.d.ts +2 -1
- package/lib/cjs/src/compute-lines.js +27 -14
- package/lib/cjs/src/expand.js +2 -3
- package/lib/cjs/src/fold.js +2 -3
- package/lib/cjs/src/index.d.ts +9 -8
- package/lib/cjs/src/index.js +66 -47
- package/lib/cjs/src/styles.d.ts +29 -25
- package/lib/cjs/src/styles.js +162 -135
- package/lib/esm/src/compute-hidden-blocks.js +8 -7
- package/lib/esm/src/compute-lines.js +11 -8
- package/lib/esm/src/expand.js +2 -2
- package/lib/esm/src/fold.js +2 -2
- package/lib/esm/src/index.js +50 -41
- package/lib/esm/src/styles.js +163 -136
- package/package.json +33 -25
- package/release.config.js +13 -13
- package/.travis.yml +0 -13
|
@@ -8,14 +8,14 @@ jobs:
|
|
|
8
8
|
runs-on: ubuntu-latest
|
|
9
9
|
steps:
|
|
10
10
|
- name: Checkout
|
|
11
|
-
uses: actions/checkout@
|
|
11
|
+
uses: actions/checkout@v4
|
|
12
12
|
with:
|
|
13
13
|
fetch-depth: 0
|
|
14
14
|
- name: Setup Node.js
|
|
15
|
-
uses: actions/setup-node@
|
|
15
|
+
uses: actions/setup-node@v4
|
|
16
16
|
with:
|
|
17
17
|
node-version: 'lts/*'
|
|
18
|
-
- uses: pnpm/action-setup@
|
|
18
|
+
- uses: pnpm/action-setup@v4
|
|
19
19
|
with:
|
|
20
20
|
version: latest
|
|
21
21
|
- name: Install dependencies
|
|
@@ -29,14 +29,14 @@ jobs:
|
|
|
29
29
|
runs-on: ubuntu-latest
|
|
30
30
|
steps:
|
|
31
31
|
- name: Checkout
|
|
32
|
-
uses: actions/checkout@
|
|
32
|
+
uses: actions/checkout@v4
|
|
33
33
|
with:
|
|
34
34
|
fetch-depth: 0
|
|
35
35
|
- name: Setup Node.js
|
|
36
|
-
uses: actions/setup-node@
|
|
36
|
+
uses: actions/setup-node@v4
|
|
37
37
|
with:
|
|
38
38
|
node-version: 'lts/*'
|
|
39
|
-
- uses: pnpm/action-setup@
|
|
39
|
+
- uses: pnpm/action-setup@v4
|
|
40
40
|
with:
|
|
41
41
|
version: latest
|
|
42
42
|
- name: Install dependencies
|
|
@@ -47,4 +47,4 @@ jobs:
|
|
|
47
47
|
env:
|
|
48
48
|
GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
|
|
49
49
|
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
|
|
50
|
-
run: pnpm
|
|
50
|
+
run: pnpm semantic-release
|
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,19 @@
|
|
|
1
|
+
## [4.0.4](https://github.com/aeolun/react-diff-viewer-continued/compare/v4.0.3...v4.0.4) (2025-01-28)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* added line number for inline view onLineNumberClick ([0e92dfe](https://github.com/aeolun/react-diff-viewer-continued/commit/0e92dfee2102b42bdd0c51af57c66b0152ad2186))
|
|
7
|
+
* fix several type issues and update packages ([23aa832](https://github.com/aeolun/react-diff-viewer-continued/commit/23aa83222e85d303b939eb20699348e449a9174f))
|
|
8
|
+
* line break anywhere ([17c51e6](https://github.com/aeolun/react-diff-viewer-continued/commit/17c51e62afd6ffcacee2fe731f1ff0ee44c08e37))
|
|
9
|
+
|
|
10
|
+
## [4.0.3](https://github.com/aeolun/react-diff-viewer-continued/compare/v4.0.2...v4.0.3) (2024-05-23)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Reverts
|
|
14
|
+
|
|
15
|
+
* Revert "refactoring attempt" ([6a9789b](https://github.com/aeolun/react-diff-viewer-continued/commit/6a9789b0af0221bf32be11d1af9d4db3337008f4))
|
|
16
|
+
|
|
1
17
|
## [4.0.2](https://github.com/aeolun/react-diff-viewer-continued/compare/v4.0.1...v4.0.2) (2024-02-14)
|
|
2
18
|
|
|
3
19
|
|
package/README.md
CHANGED
|
@@ -71,11 +71,11 @@ class Diff extends PureComponent {
|
|
|
71
71
|
|
|
72
72
|
| Prop | Type | Default | Description |
|
|
73
73
|
|---------------------------|---------------------------|--------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
74
|
-
| oldValue | `string
|
|
75
|
-
| newValue | `string
|
|
74
|
+
| oldValue | `string \| Object` | `''` | Old value as string (or Object if using `diffJson`). |
|
|
75
|
+
| newValue | `string \| Object` | `''` | New value as string (or Object if using `diffJson`). |
|
|
76
76
|
| splitView | `boolean` | `true` | Switch between `unified` and `split` view. |
|
|
77
77
|
| disableWordDiff | `boolean` | `false` | Show and hide word diff in a diff line. |
|
|
78
|
-
| compareMethod | `DiffMethod` | `DiffMethod.CHARS` | JsDiff text diff method used for diffing strings. Check out the [guide](https://github.com/praneshr/react-diff-viewer/tree/v3.0.0#text-block-diff-comparison) to use different methods.
|
|
78
|
+
| compareMethod | `DiffMethod \| (string, string) => diff.Change[]` | `DiffMethod.CHARS` | Uses an existing diff method when a `DiffMethod` enum is passed. If a function is passed, that function is used as the diff method. <br /> <br /> JsDiff text diff method used for diffing strings. Check out the [guide](https://github.com/praneshr/react-diff-viewer/tree/v3.0.0#text-block-diff-comparison) to use different methods. |
|
|
79
79
|
| renderGutter | `(diffData) => ReactNode` | `undefined` | Function that can be used to render an extra gutter with various information next to the line number. |
|
|
80
80
|
| hideLineNumbers | `boolean` | `false` | Show and hide line numbers. |
|
|
81
81
|
| alwaysShowLines | `string[]` | `[]` | List of lines to always be shown, regardless of diff status. Line number are prefixed with `L` and `R` for the left and right section of the diff viewer, respectively. For example, `L-20` means 20th line in the left pane. `extraLinesSurroundingDiff` applies to these lines as well. |
|
package/biome.json
ADDED
|
@@ -1,26 +1,27 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.computeHiddenBlocks =
|
|
3
|
+
exports.computeHiddenBlocks = computeHiddenBlocks;
|
|
4
4
|
function computeHiddenBlocks(lineInformation, diffLines, extraLines) {
|
|
5
5
|
let newBlockIndex = 0;
|
|
6
6
|
let currentBlock;
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
const lineBlocks = {};
|
|
8
|
+
const blocks = [];
|
|
9
9
|
lineInformation.forEach((line, lineIndex) => {
|
|
10
|
-
const isDiffLine = diffLines.some(diffLine => diffLine >= lineIndex - extraLines &&
|
|
11
|
-
|
|
10
|
+
const isDiffLine = diffLines.some((diffLine) => diffLine >= lineIndex - extraLines &&
|
|
11
|
+
diffLine <= lineIndex + extraLines);
|
|
12
|
+
if (!isDiffLine && currentBlock === undefined) {
|
|
12
13
|
// block begins
|
|
13
14
|
currentBlock = {
|
|
14
15
|
index: newBlockIndex,
|
|
15
16
|
startLine: lineIndex,
|
|
16
17
|
endLine: lineIndex,
|
|
17
|
-
lines: 1
|
|
18
|
+
lines: 1,
|
|
18
19
|
};
|
|
19
20
|
blocks.push(currentBlock);
|
|
20
21
|
lineBlocks[lineIndex] = currentBlock.index;
|
|
21
22
|
newBlockIndex++;
|
|
22
23
|
}
|
|
23
|
-
else if (!isDiffLine) {
|
|
24
|
+
else if (!isDiffLine && currentBlock) {
|
|
24
25
|
// block continues
|
|
25
26
|
currentBlock.endLine = lineIndex;
|
|
26
27
|
currentBlock.lines++;
|
|
@@ -33,7 +34,6 @@ function computeHiddenBlocks(lineInformation, diffLines, extraLines) {
|
|
|
33
34
|
});
|
|
34
35
|
return {
|
|
35
36
|
lineBlocks,
|
|
36
|
-
blocks: blocks
|
|
37
|
+
blocks: blocks,
|
|
37
38
|
};
|
|
38
39
|
}
|
|
39
|
-
exports.computeHiddenBlocks = computeHiddenBlocks;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as diff from "diff";
|
|
1
2
|
export declare enum DiffType {
|
|
2
3
|
DEFAULT = 0,
|
|
3
4
|
ADDED = 1,
|
|
@@ -51,5 +52,5 @@ export interface JsDiffChangeObject {
|
|
|
51
52
|
* @param linesOffset line number to start counting from
|
|
52
53
|
* @param showLines lines that are always shown, regardless of diff
|
|
53
54
|
*/
|
|
54
|
-
declare const computeLineInformation: (oldString: string |
|
|
55
|
+
declare const computeLineInformation: (oldString: string | Record<string, unknown>, newString: string | Record<string, unknown>, disableWordDiff?: boolean, lineCompareMethod?: DiffMethod | ((oldStr: string, newStr: string) => diff.Change[]), linesOffset?: number, showLines?: string[]) => ComputedLineInformation;
|
|
55
56
|
export { computeLineInformation };
|
|
@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
|
|
|
15
15
|
}) : function(o, v) {
|
|
16
16
|
o["default"] = v;
|
|
17
17
|
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
};
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
25
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
36
|
exports.computeLineInformation = exports.DiffMethod = exports.DiffType = void 0;
|
|
27
37
|
const diff = __importStar(require("diff"));
|
|
@@ -52,9 +62,9 @@ var DiffMethod;
|
|
|
52
62
|
* @param value Diff text from the js diff module.
|
|
53
63
|
*/
|
|
54
64
|
const constructLines = (value) => {
|
|
55
|
-
if (value ===
|
|
65
|
+
if (value === "")
|
|
56
66
|
return [];
|
|
57
|
-
const lines = value.replace(/\n$/,
|
|
67
|
+
const lines = value.replace(/\n$/, "").split("\n");
|
|
58
68
|
return lines;
|
|
59
69
|
};
|
|
60
70
|
/**
|
|
@@ -66,7 +76,8 @@ const constructLines = (value) => {
|
|
|
66
76
|
* @param compareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
|
|
67
77
|
*/
|
|
68
78
|
const computeDiff = (oldValue, newValue, compareMethod = DiffMethod.CHARS) => {
|
|
69
|
-
const
|
|
79
|
+
const compareFunc = typeof compareMethod === "string" ? jsDiff[compareMethod] : compareMethod;
|
|
80
|
+
const diffArray = compareFunc(oldValue, newValue);
|
|
70
81
|
const computedDiff = {
|
|
71
82
|
left: [],
|
|
72
83
|
right: [],
|
|
@@ -111,7 +122,7 @@ const computeDiff = (oldValue, newValue, compareMethod = DiffMethod.CHARS) => {
|
|
|
111
122
|
const computeLineInformation = (oldString, newString, disableWordDiff = false, lineCompareMethod = DiffMethod.CHARS, linesOffset = 0, showLines = []) => {
|
|
112
123
|
let diffArray = [];
|
|
113
124
|
// Use diffLines for strings, and diffJson for objects...
|
|
114
|
-
if (typeof oldString ===
|
|
125
|
+
if (typeof oldString === "string" && typeof newString === "string") {
|
|
115
126
|
diffArray = diff.diffLines(oldString, newString, {
|
|
116
127
|
newlineIsToken: false,
|
|
117
128
|
ignoreWhitespace: false,
|
|
@@ -143,13 +154,13 @@ const computeLineInformation = (oldString, newString, disableWordDiff = false, l
|
|
|
143
154
|
leftLineNumber += 1;
|
|
144
155
|
left.lineNumber = leftLineNumber;
|
|
145
156
|
left.type = DiffType.REMOVED;
|
|
146
|
-
left.value = line ||
|
|
157
|
+
left.value = line || " ";
|
|
147
158
|
// When the current line is of type REMOVED, check the next item in
|
|
148
159
|
// the diff array whether it is of type ADDED. If true, the current
|
|
149
160
|
// diff will be marked as both REMOVED and ADDED. Meaning, the
|
|
150
161
|
// current line is a modification.
|
|
151
162
|
const nextDiff = diffArray[diffIndex + 1];
|
|
152
|
-
if (nextDiff
|
|
163
|
+
if (nextDiff === null || nextDiff === void 0 ? void 0 : nextDiff.added) {
|
|
153
164
|
const nextDiffLines = constructLines(nextDiff.value)[lineIndex];
|
|
154
165
|
if (nextDiffLines) {
|
|
155
166
|
const nextDiffLineInfo = getLineInformation(nextDiffLines, diffIndex, true, false, true);
|
|
@@ -204,7 +215,9 @@ const computeLineInformation = (oldString, newString, disableWordDiff = false, l
|
|
|
204
215
|
right.type = DiffType.DEFAULT;
|
|
205
216
|
right.value = line;
|
|
206
217
|
}
|
|
207
|
-
if ((showLines === null || showLines === void 0 ? void 0 : showLines.includes(`L-${left.lineNumber}`)) ||
|
|
218
|
+
if ((showLines === null || showLines === void 0 ? void 0 : showLines.includes(`L-${left.lineNumber}`)) ||
|
|
219
|
+
((showLines === null || showLines === void 0 ? void 0 : showLines.includes(`R-${right.lineNumber}`)) &&
|
|
220
|
+
!diffLines.includes(counter))) {
|
|
208
221
|
diffLines.push(counter);
|
|
209
222
|
}
|
|
210
223
|
if (!evaluateOnlyFirstLine) {
|
package/lib/cjs/src/expand.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Expand =
|
|
3
|
+
exports.Expand = Expand;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
function Expand() {
|
|
6
|
-
return (0, jsx_runtime_1.
|
|
6
|
+
return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", children: [(0, jsx_runtime_1.jsx)("title", { children: "expand" }), (0, jsx_runtime_1.jsx)("path", { d: "m8.177.677 2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25a.75.75 0 0 1-1.5 0V4H5.104a.25.25 0 0 1-.177-.427L7.823.677a.25.25 0 0 1 .354 0ZM7.25 10.75a.75.75 0 0 1 1.5 0V12h2.146a.25.25 0 0 1 .177.427l-2.896 2.896a.25.25 0 0 1-.354 0l-2.896-2.896A.25.25 0 0 1 5.104 12H7.25v-1.25Zm-5-2a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z" })] }));
|
|
7
7
|
}
|
|
8
|
-
exports.Expand = Expand;
|
package/lib/cjs/src/fold.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Fold =
|
|
3
|
+
exports.Fold = Fold;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
function Fold() {
|
|
6
|
-
return (0, jsx_runtime_1.
|
|
6
|
+
return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", children: [(0, jsx_runtime_1.jsx)("title", { children: "fold" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.896 2H8.75V.75a.75.75 0 0 0-1.5 0V2H5.104a.25.25 0 0 0-.177.427l2.896 2.896a.25.25 0 0 0 .354 0l2.896-2.896A.25.25 0 0 0 10.896 2ZM8.75 15.25a.75.75 0 0 1-1.5 0V14H5.104a.25.25 0 0 1-.177-.427l2.896-2.896a.25.25 0 0 1 .354 0l2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25Zm-6.5-6.5a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z" })] }));
|
|
7
7
|
}
|
|
8
|
-
exports.Fold = Fold;
|
package/lib/cjs/src/index.d.ts
CHANGED
|
@@ -1,18 +1,19 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import { ReactElement } from
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { ReactElement } from "react";
|
|
3
|
+
import type { Change } from "diff";
|
|
4
|
+
import { type DiffInformation, DiffMethod, DiffType, type LineInformation } from "./compute-lines";
|
|
5
|
+
import { type ReactDiffViewerStyles, type ReactDiffViewerStylesOverride } from "./styles";
|
|
5
6
|
export declare enum LineNumberPrefix {
|
|
6
7
|
LEFT = "L",
|
|
7
8
|
RIGHT = "R"
|
|
8
9
|
}
|
|
9
10
|
export interface ReactDiffViewerProps {
|
|
10
|
-
oldValue: string |
|
|
11
|
-
newValue: string |
|
|
11
|
+
oldValue: string | Record<string, unknown>;
|
|
12
|
+
newValue: string | Record<string, unknown>;
|
|
12
13
|
splitView?: boolean;
|
|
13
14
|
linesOffset?: number;
|
|
14
15
|
disableWordDiff?: boolean;
|
|
15
|
-
compareMethod?: DiffMethod;
|
|
16
|
+
compareMethod?: DiffMethod | ((oldStr: string, newStr: string) => Change[]);
|
|
16
17
|
extraLinesSurroundingDiff?: number;
|
|
17
18
|
hideLineNumbers?: boolean;
|
|
18
19
|
/**
|
|
@@ -45,7 +46,7 @@ export interface ReactDiffViewerProps {
|
|
|
45
46
|
}
|
|
46
47
|
export interface ReactDiffViewerState {
|
|
47
48
|
expandedBlocks?: number[];
|
|
48
|
-
noSelect?:
|
|
49
|
+
noSelect?: "left" | "right";
|
|
49
50
|
}
|
|
50
51
|
declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerState> {
|
|
51
52
|
private styles;
|
package/lib/cjs/src/index.js
CHANGED
|
@@ -15,27 +15,37 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
|
|
|
15
15
|
}) : function(o, v) {
|
|
16
16
|
o["default"] = v;
|
|
17
17
|
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
};
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
25
35
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
36
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
37
|
};
|
|
28
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
39
|
exports.DiffMethod = exports.LineNumberPrefix = void 0;
|
|
30
40
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
31
|
-
const React = __importStar(require("react"));
|
|
32
41
|
const classnames_1 = __importDefault(require("classnames"));
|
|
42
|
+
const React = __importStar(require("react"));
|
|
43
|
+
const memoize_one_1 = __importDefault(require("memoize-one"));
|
|
44
|
+
const compute_hidden_blocks_1 = require("./compute-hidden-blocks");
|
|
33
45
|
const compute_lines_1 = require("./compute-lines");
|
|
34
46
|
Object.defineProperty(exports, "DiffMethod", { enumerable: true, get: function () { return compute_lines_1.DiffMethod; } });
|
|
35
|
-
const styles_1 = __importDefault(require("./styles"));
|
|
36
|
-
const compute_hidden_blocks_1 = require("./compute-hidden-blocks");
|
|
37
47
|
const expand_1 = require("./expand");
|
|
38
|
-
const
|
|
48
|
+
const styles_1 = __importDefault(require("./styles"));
|
|
39
49
|
const fold_1 = require("./fold");
|
|
40
50
|
var LineNumberPrefix;
|
|
41
51
|
(function (LineNumberPrefix) {
|
|
@@ -96,16 +106,16 @@ class DiffViewer extends React.Component {
|
|
|
96
106
|
*/
|
|
97
107
|
this.renderWordDiff = (diffArray, renderer) => {
|
|
98
108
|
return diffArray.map((wordDiff, i) => {
|
|
99
|
-
const content = renderer
|
|
100
|
-
|
|
109
|
+
const content = renderer
|
|
110
|
+
? renderer(wordDiff.value)
|
|
111
|
+
: wordDiff.value;
|
|
112
|
+
if (typeof content !== "string")
|
|
101
113
|
return;
|
|
102
|
-
return wordDiff.type === compute_lines_1.DiffType.ADDED ?
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
:
|
|
107
|
-
[this.styles.wordRemoved]: wordDiff.type === compute_lines_1.DiffType.REMOVED,
|
|
108
|
-
}), children: content }, i) : (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)(this.styles.wordDiff), children: content }, i);
|
|
114
|
+
return wordDiff.type === compute_lines_1.DiffType.ADDED ? ((0, jsx_runtime_1.jsx)("ins", { className: (0, classnames_1.default)(this.styles.wordDiff, {
|
|
115
|
+
[this.styles.wordAdded]: wordDiff.type === compute_lines_1.DiffType.ADDED,
|
|
116
|
+
}), children: content }, i)) : wordDiff.type === compute_lines_1.DiffType.REMOVED ? ((0, jsx_runtime_1.jsx)("del", { className: (0, classnames_1.default)(this.styles.wordDiff, {
|
|
117
|
+
[this.styles.wordRemoved]: wordDiff.type === compute_lines_1.DiffType.REMOVED,
|
|
118
|
+
}), children: content }, i)) : ((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)(this.styles.wordDiff), children: content }, i));
|
|
109
119
|
});
|
|
110
120
|
};
|
|
111
121
|
/**
|
|
@@ -140,12 +150,12 @@ class DiffViewer extends React.Component {
|
|
|
140
150
|
else {
|
|
141
151
|
content = value;
|
|
142
152
|
}
|
|
143
|
-
let ElementType =
|
|
153
|
+
let ElementType = "div";
|
|
144
154
|
if (added && !hasWordDiff) {
|
|
145
|
-
ElementType =
|
|
155
|
+
ElementType = "ins";
|
|
146
156
|
}
|
|
147
157
|
else if (removed && !hasWordDiff) {
|
|
148
|
-
ElementType =
|
|
158
|
+
ElementType = "del";
|
|
149
159
|
}
|
|
150
160
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!this.props.hideLineNumbers && ((0, jsx_runtime_1.jsx)("td", { onClick: lineNumber && this.onLineNumberClickProxy(lineNumberTemplate), className: (0, classnames_1.default)(this.styles.gutter, {
|
|
151
161
|
[this.styles.emptyGutter]: !lineNumber,
|
|
@@ -176,7 +186,7 @@ class DiffViewer extends React.Component {
|
|
|
176
186
|
[this.styles.diffRemoved]: removed,
|
|
177
187
|
[this.styles.diffChanged]: changed,
|
|
178
188
|
[this.styles.highlightedLine]: highlightLine,
|
|
179
|
-
}), children: (0, jsx_runtime_1.jsxs)("pre", { children: [added &&
|
|
189
|
+
}), children: (0, jsx_runtime_1.jsxs)("pre", { children: [added && "+", removed && "-"] }) }), (0, jsx_runtime_1.jsx)("td", { className: (0, classnames_1.default)(this.styles.content, {
|
|
180
190
|
[this.styles.emptyLine]: !content,
|
|
181
191
|
[this.styles.diffAdded]: added,
|
|
182
192
|
[this.styles.diffRemoved]: removed,
|
|
@@ -185,12 +195,16 @@ class DiffViewer extends React.Component {
|
|
|
185
195
|
left: prefix === LineNumberPrefix.LEFT,
|
|
186
196
|
right: prefix === LineNumberPrefix.RIGHT,
|
|
187
197
|
}), onMouseDown: () => {
|
|
188
|
-
const elements = document.getElementsByClassName(prefix === LineNumberPrefix.LEFT ?
|
|
198
|
+
const elements = document.getElementsByClassName(prefix === LineNumberPrefix.LEFT ? "right" : "left");
|
|
189
199
|
for (let i = 0; i < elements.length; i++) {
|
|
190
200
|
const element = elements.item(i);
|
|
191
201
|
element.classList.add(this.styles.noSelect);
|
|
192
202
|
}
|
|
193
|
-
}, title: added && !hasWordDiff
|
|
203
|
+
}, title: added && !hasWordDiff
|
|
204
|
+
? "Added line"
|
|
205
|
+
: removed && !hasWordDiff
|
|
206
|
+
? "Removed line"
|
|
207
|
+
: undefined, children: (0, jsx_runtime_1.jsx)(ElementType, { className: this.styles.contentText, children: content }) })] }));
|
|
194
208
|
};
|
|
195
209
|
/**
|
|
196
210
|
* Generates lines for split view.
|
|
@@ -214,7 +228,7 @@ class DiffViewer extends React.Component {
|
|
|
214
228
|
this.renderInlineView = ({ left, right }, index) => {
|
|
215
229
|
let content;
|
|
216
230
|
if (left.type === compute_lines_1.DiffType.REMOVED && right.type === compute_lines_1.DiffType.ADDED) {
|
|
217
|
-
return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)("tr", { className: this.styles.line, children: this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, null) }), (0, jsx_runtime_1.jsx)("tr", { className: this.styles.line, children: this.renderLine(null, right.type, LineNumberPrefix.RIGHT, right.value, right.lineNumber) })] }, index));
|
|
231
|
+
return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)("tr", { className: this.styles.line, children: this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, null) }), (0, jsx_runtime_1.jsx)("tr", { className: this.styles.line, children: this.renderLine(null, right.type, LineNumberPrefix.RIGHT, right.value, right.lineNumber, LineNumberPrefix.RIGHT) })] }, index));
|
|
218
232
|
}
|
|
219
233
|
if (left.type === compute_lines_1.DiffType.REMOVED) {
|
|
220
234
|
content = this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, null);
|
|
@@ -244,8 +258,8 @@ class DiffViewer extends React.Component {
|
|
|
244
258
|
*/
|
|
245
259
|
this.renderSkippedLineIndicator = (num, blockNumber, leftBlockLineNumber, rightBlockLineNumber) => {
|
|
246
260
|
const { hideLineNumbers, splitView } = this.props;
|
|
247
|
-
const message = this.props.codeFoldMessageRenderer ? (this.props.codeFoldMessageRenderer(num, leftBlockLineNumber, rightBlockLineNumber)) : ((0, jsx_runtime_1.jsxs)("
|
|
248
|
-
const content = ((0, jsx_runtime_1.jsx)("td", { className: this.styles.codeFoldContentContainer, children: (0, jsx_runtime_1.jsx)("
|
|
261
|
+
const message = this.props.codeFoldMessageRenderer ? (this.props.codeFoldMessageRenderer(num, leftBlockLineNumber, rightBlockLineNumber)) : ((0, jsx_runtime_1.jsxs)("span", { className: this.styles.codeFoldContent, children: ["Expand ", num, " lines ..."] }));
|
|
262
|
+
const content = ((0, jsx_runtime_1.jsx)("td", { className: this.styles.codeFoldContentContainer, children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: this.styles.codeFoldExpandButton, onClick: this.onBlockClickProxy(blockNumber), tabIndex: 0, children: message }) }));
|
|
249
263
|
const isUnifiedViewWithoutLineNumbers = !splitView && !hideLineNumbers;
|
|
250
264
|
return ((0, jsx_runtime_1.jsxs)("tr", { className: this.styles.codeFold, children: [!hideLineNumbers && (0, jsx_runtime_1.jsx)("td", { className: this.styles.codeFoldGutter }), this.props.renderGutter ? ((0, jsx_runtime_1.jsx)("td", { className: this.styles.codeFoldGutter })) : null, (0, jsx_runtime_1.jsx)("td", { className: (0, classnames_1.default)({
|
|
251
265
|
[this.styles.codeFoldGutter]: isUnifiedViewWithoutLineNumbers,
|
|
@@ -266,10 +280,11 @@ class DiffViewer extends React.Component {
|
|
|
266
280
|
const blockIndex = lineBlocks[lineIndex];
|
|
267
281
|
if (blockIndex !== undefined) {
|
|
268
282
|
const lastLineOfBlock = blocks[blockIndex].endLine === lineIndex;
|
|
269
|
-
if (!this.state.expandedBlocks.includes(blockIndex) &&
|
|
283
|
+
if (!this.state.expandedBlocks.includes(blockIndex) &&
|
|
284
|
+
lastLineOfBlock) {
|
|
270
285
|
return ((0, jsx_runtime_1.jsx)(React.Fragment, { children: this.renderSkippedLineIndicator(blocks[blockIndex].lines, blockIndex, line.left.lineNumber, line.right.lineNumber) }, lineIndex));
|
|
271
286
|
}
|
|
272
|
-
|
|
287
|
+
if (!this.state.expandedBlocks.includes(blockIndex)) {
|
|
273
288
|
return null;
|
|
274
289
|
}
|
|
275
290
|
}
|
|
@@ -281,13 +296,14 @@ class DiffViewer extends React.Component {
|
|
|
281
296
|
return {
|
|
282
297
|
diffNodes,
|
|
283
298
|
blocks,
|
|
284
|
-
lineInformation
|
|
299
|
+
lineInformation,
|
|
285
300
|
};
|
|
286
301
|
};
|
|
287
302
|
this.render = () => {
|
|
288
|
-
const { oldValue, newValue, useDarkTheme, leftTitle, rightTitle, splitView, hideLineNumbers, nonce, } = this.props;
|
|
289
|
-
if (
|
|
290
|
-
|
|
303
|
+
const { oldValue, newValue, useDarkTheme, leftTitle, rightTitle, splitView, compareMethod, hideLineNumbers, nonce, } = this.props;
|
|
304
|
+
if (typeof compareMethod === "string" &&
|
|
305
|
+
compareMethod !== compute_lines_1.DiffMethod.JSON) {
|
|
306
|
+
if (typeof oldValue !== "string" || typeof newValue !== "string") {
|
|
291
307
|
throw Error('"oldValue" and "newValue" should be strings');
|
|
292
308
|
}
|
|
293
309
|
}
|
|
@@ -303,8 +319,9 @@ class DiffViewer extends React.Component {
|
|
|
303
319
|
colSpanOnSplitView += 1;
|
|
304
320
|
colSpanOnInlineView += 1;
|
|
305
321
|
}
|
|
306
|
-
let deletions = 0
|
|
307
|
-
|
|
322
|
+
let deletions = 0;
|
|
323
|
+
let additions = 0;
|
|
324
|
+
for (const l of nodes.lineInformation) {
|
|
308
325
|
if (l.left.type === compute_lines_1.DiffType.ADDED) {
|
|
309
326
|
additions++;
|
|
310
327
|
}
|
|
@@ -317,7 +334,7 @@ class DiffViewer extends React.Component {
|
|
|
317
334
|
if (l.right.type === compute_lines_1.DiffType.REMOVED) {
|
|
318
335
|
deletions++;
|
|
319
336
|
}
|
|
320
|
-
}
|
|
337
|
+
}
|
|
321
338
|
const totalChanges = deletions + additions;
|
|
322
339
|
const percentageAddition = Math.round((additions / totalChanges) * 100);
|
|
323
340
|
const blocks = [];
|
|
@@ -330,24 +347,26 @@ class DiffViewer extends React.Component {
|
|
|
330
347
|
}
|
|
331
348
|
}
|
|
332
349
|
const allExpanded = this.state.expandedBlocks.length === nodes.blocks.length;
|
|
333
|
-
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: this.styles.summary, role:
|
|
350
|
+
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: this.styles.summary, role: "banner", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: this.styles.allExpandButton, onClick: () => {
|
|
334
351
|
this.setState({
|
|
335
|
-
expandedBlocks: allExpanded
|
|
352
|
+
expandedBlocks: allExpanded
|
|
353
|
+
? []
|
|
354
|
+
: nodes.blocks.map((b) => b.index),
|
|
336
355
|
});
|
|
337
|
-
}, children: allExpanded ? (0, jsx_runtime_1.jsx)(fold_1.Fold, {}) : (0, jsx_runtime_1.jsx)(expand_1.Expand, {}) }), " ", totalChanges, (0, jsx_runtime_1.jsx)("div", { style: { display:
|
|
356
|
+
}, children: allExpanded ? (0, jsx_runtime_1.jsx)(fold_1.Fold, {}) : (0, jsx_runtime_1.jsx)(expand_1.Expand, {}) }), " ", totalChanges, (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", gap: "1px" }, children: blocks }), this.props.summary ? (0, jsx_runtime_1.jsx)("span", { children: this.props.summary }) : null] }), (0, jsx_runtime_1.jsx)("table", { className: (0, classnames_1.default)(this.styles.diffContainer, {
|
|
338
357
|
[this.styles.splitView]: splitView,
|
|
339
358
|
}), onMouseUp: () => {
|
|
340
|
-
const elements = document.getElementsByClassName(
|
|
359
|
+
const elements = document.getElementsByClassName("right");
|
|
341
360
|
for (let i = 0; i < elements.length; i++) {
|
|
342
361
|
const element = elements.item(i);
|
|
343
362
|
element.classList.remove(this.styles.noSelect);
|
|
344
363
|
}
|
|
345
|
-
const elementsLeft = document.getElementsByClassName(
|
|
364
|
+
const elementsLeft = document.getElementsByClassName("left");
|
|
346
365
|
for (let i = 0; i < elementsLeft.length; i++) {
|
|
347
366
|
const element = elementsLeft.item(i);
|
|
348
367
|
element.classList.remove(this.styles.noSelect);
|
|
349
368
|
}
|
|
350
|
-
}, children: (0, jsx_runtime_1.jsxs)("tbody", { children: [(0, jsx_runtime_1.jsxs)("tr", { children: [!this.props.hideLineNumbers ? (0, jsx_runtime_1.jsx)("td", { width:
|
|
369
|
+
}, children: (0, jsx_runtime_1.jsxs)("tbody", { children: [(0, jsx_runtime_1.jsxs)("tr", { children: [!this.props.hideLineNumbers ? (0, jsx_runtime_1.jsx)("td", { width: "50px" }) : null, !splitView && !this.props.hideLineNumbers ? ((0, jsx_runtime_1.jsx)("td", { width: "50px" })) : null, this.props.renderGutter ? (0, jsx_runtime_1.jsx)("td", { width: "50px" }) : null, (0, jsx_runtime_1.jsx)("td", { width: "28px" }), (0, jsx_runtime_1.jsx)("td", { width: "100%" }), splitView ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!this.props.hideLineNumbers ? (0, jsx_runtime_1.jsx)("td", { width: "50px" }) : null, this.props.renderGutter ? (0, jsx_runtime_1.jsx)("td", { width: "50px" }) : null, (0, jsx_runtime_1.jsx)("td", { width: "28px" }), (0, jsx_runtime_1.jsx)("td", { width: "100%" })] })) : null] }), leftTitle || rightTitle ? ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { colSpan: splitView ? colSpanOnSplitView : colSpanOnInlineView, className: (0, classnames_1.default)(this.styles.titleBlock, this.styles.column), children: leftTitle ? ((0, jsx_runtime_1.jsx)("pre", { className: this.styles.contentText, children: leftTitle })) : null }), splitView ? ((0, jsx_runtime_1.jsx)("th", { colSpan: colSpanOnSplitView, className: (0, classnames_1.default)(this.styles.titleBlock, this.styles.column), children: rightTitle ? ((0, jsx_runtime_1.jsx)("pre", { className: this.styles.contentText, children: rightTitle })) : null })) : null] })) : null, nodes.diffNodes] }) })] }));
|
|
351
370
|
};
|
|
352
371
|
this.state = {
|
|
353
372
|
expandedBlocks: [],
|
|
@@ -356,8 +375,8 @@ class DiffViewer extends React.Component {
|
|
|
356
375
|
}
|
|
357
376
|
}
|
|
358
377
|
DiffViewer.defaultProps = {
|
|
359
|
-
oldValue:
|
|
360
|
-
newValue:
|
|
378
|
+
oldValue: "",
|
|
379
|
+
newValue: "",
|
|
361
380
|
splitView: true,
|
|
362
381
|
highlightLines: [],
|
|
363
382
|
disableWordDiff: false,
|
|
@@ -368,6 +387,6 @@ DiffViewer.defaultProps = {
|
|
|
368
387
|
showDiffOnly: true,
|
|
369
388
|
useDarkTheme: false,
|
|
370
389
|
linesOffset: 0,
|
|
371
|
-
nonce:
|
|
390
|
+
nonce: "",
|
|
372
391
|
};
|
|
373
392
|
exports.default = DiffViewer;
|