react-diff-viewer-continued 3.2.1 → 3.2.3

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 (12) hide show
  1. package/.github/workflows/release.yml +2 -2
  2. package/.github/workflows/test.yml +2 -2
  3. package/CHANGELOG.md +14 -0
  4. package/README.md +4 -2
  5. package/lib/compute-lines.d.ts +6 -4
  6. package/lib/compute-lines.js +19 -9
  7. package/lib/index.d.ts +5 -5
  8. package/lib/index.js +18 -6
  9. package/lib/styles.d.ts +4 -0
  10. package/lib/styles.js +10 -0
  11. package/package.json +15 -15
  12. package/tsconfig.examples.json +1 -1
package/.github/workflows/release.yml CHANGED
@@ -9,11 +9,11 @@ jobs:
9
9
  runs-on: ubuntu-latest
10
10
  steps:
11
11
  - name: Checkout
12
- uses: actions/checkout@v2
12
+ uses: actions/checkout@v3
13
13
  with:
14
14
  fetch-depth: 0
15
15
  - name: Setup Node.js
16
- uses: actions/setup-node@v2
16
+ uses: actions/setup-node@v3
17
17
  with:
18
18
  node-version: 'lts/*'
19
19
  - uses: pnpm/action-setup@v2.2.2
package/.github/workflows/test.yml CHANGED
@@ -9,11 +9,11 @@ jobs:
9
9
  runs-on: ubuntu-latest
10
10
  steps:
11
11
  - name: Checkout
12
- uses: actions/checkout@v2
12
+ uses: actions/checkout@v3
13
13
  with:
14
14
  fetch-depth: 0
15
15
  - name: Setup Node.js
16
- uses: actions/setup-node@v2
16
+ uses: actions/setup-node@v3
17
17
  with:
18
18
  node-version: 'lts/*'
19
19
  - uses: pnpm/action-setup@v2.2.2
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ ## [3.2.3](https://github.com/aeolun/react-diff-viewer-continued/compare/v3.2.2...v3.2.3) (2022-11-11)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * update example with JSON ([f61c977](https://github.com/aeolun/react-diff-viewer-continued/commit/f61c977302415774dd32d48aca3addb7122ffa55))
7
+
8
+ ## [3.2.2](https://github.com/aeolun/react-diff-viewer-continued/compare/v3.2.1...v3.2.2) (2022-10-10)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * move the dependencies for development only to `devDependencies` ([206394c](https://github.com/aeolun/react-diff-viewer-continued/commit/206394cb16352f2c3601383b8510b4dee9578405))
14
+
1
15
  ## [3.2.1](https://github.com/aeolun/react-diff-viewer-continued/compare/v3.2.0...v3.2.1) (2022-07-07)
2
16
 
3
17
 
package/README.md CHANGED
@@ -8,6 +8,8 @@ A simple and beautiful text diff viewer component made with [Diff](https://githu
8
8
 
9
9
  Inspired from Github diff viewer, it includes features like split view, inline view, word diff, line highlight and more. It is highly customizable and it supports almost all languages.
10
10
 
11
+ Most credit goes to [Pranesh Ravi](https://praneshravi.in) who created the [original diff viewer](https://github.com/praneshr/react-diff-viewer). I've just made a few modifications and updated the dependencies so they work with modern stacks.
12
+
11
13
  ## Install
12
14
 
13
15
  ```bash
@@ -61,8 +63,8 @@ class Diff extends PureComponent {
61
63
 
62
64
  | Prop | Type | Default | Description |
63
65
  | ------------------------- | ------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
64
- | oldValue | `string` | `''` | Old value as string. |
65
- | newValue | `string` | `''` | New value as string. |
66
+ | oldValue | `string | Object` | `''` | Old value as string (or Object if using `diffJson`). |
67
+ | newValue | `string | Object` | `''` | New value as string (or Object if using `diffJson`). |
66
68
  | splitView | `boolean` | `true` | Switch between `unified` and `split` view. |
67
69
  | disableWordDiff | `boolean` | `false` | Show and hide word diff in a diff line. |
68
70
  | 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. |
package/lib/compute-lines.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  export declare enum DiffType {
2
2
  DEFAULT = 0,
3
3
  ADDED = 1,
4
- REMOVED = 2
4
+ REMOVED = 2,
5
+ CHANGED = 3
5
6
  }
6
7
  export declare enum DiffMethod {
7
8
  CHARS = "diffChars",
@@ -10,7 +11,8 @@ export declare enum DiffMethod {
10
11
  LINES = "diffLines",
11
12
  TRIMMED_LINES = "diffTrimmedLines",
12
13
  SENTENCES = "diffSentences",
13
- CSS = "diffCss"
14
+ CSS = "diffCss",
15
+ JSON = "diffJson"
14
16
  }
15
17
  export interface DiffInformation {
16
18
  value?: string | DiffInformation[];
@@ -45,8 +47,8 @@ export interface JsDiffChangeObject {
45
47
  * @param oldString Old string to compare.
46
48
  * @param newString New string to compare with old string.
47
49
  * @param disableWordDiff Flag to enable/disable word diff.
48
- * @param compareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
50
+ * @param lineCompareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
49
51
  * @param linesOffset line number to start counting from
50
52
  */
51
- declare const computeLineInformation: (oldString: string, newString: string, disableWordDiff?: boolean, compareMethod?: string, linesOffset?: number) => ComputedLineInformation;
53
+ declare const computeLineInformation: (oldString: string | Object, newString: string | Object, disableWordDiff?: boolean, lineCompareMethod?: string, linesOffset?: number) => ComputedLineInformation;
52
54
  export { computeLineInformation };
package/lib/compute-lines.js CHANGED
@@ -8,6 +8,7 @@ var DiffType;
8
8
  DiffType[DiffType["DEFAULT"] = 0] = "DEFAULT";
9
9
  DiffType[DiffType["ADDED"] = 1] = "ADDED";
10
10
  DiffType[DiffType["REMOVED"] = 2] = "REMOVED";
11
+ DiffType[DiffType["CHANGED"] = 3] = "CHANGED";
11
12
  })(DiffType = exports.DiffType || (exports.DiffType = {}));
12
13
  // See https://github.com/kpdecker/jsdiff/tree/v4.0.1#api for more info on the below JsDiff methods
13
14
  var DiffMethod;
@@ -19,6 +20,7 @@ var DiffMethod;
19
20
  DiffMethod["TRIMMED_LINES"] = "diffTrimmedLines";
20
21
  DiffMethod["SENTENCES"] = "diffSentences";
21
22
  DiffMethod["CSS"] = "diffCss";
23
+ DiffMethod["JSON"] = "diffJson";
22
24
  })(DiffMethod = exports.DiffMethod || (exports.DiffMethod = {}));
23
25
  /**
24
26
  * Splits diff text by new line and computes final list of diff lines based on
@@ -79,15 +81,22 @@ const computeDiff = (oldValue, newValue, compareMethod = DiffMethod.CHARS) => {
79
81
  * @param oldString Old string to compare.
80
82
  * @param newString New string to compare with old string.
81
83
  * @param disableWordDiff Flag to enable/disable word diff.
82
- * @param compareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
84
+ * @param lineCompareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
83
85
  * @param linesOffset line number to start counting from
84
86
  */
85
- const computeLineInformation = (oldString, newString, disableWordDiff = false, compareMethod = DiffMethod.CHARS, linesOffset = 0) => {
86
- const diffArray = diff.diffLines(oldString.trimRight(), newString.trimRight(), {
87
- newlineIsToken: false,
88
- ignoreWhitespace: false,
89
- ignoreCase: false,
90
- });
87
+ const computeLineInformation = (oldString, newString, disableWordDiff = false, lineCompareMethod = DiffMethod.CHARS, linesOffset = 0) => {
88
+ let diffArray = [];
89
+ // Use diffLines for strings, and diffJson for objects...
90
+ if (typeof oldString === 'string' && typeof newString === 'string') {
91
+ diffArray = diff.diffLines(oldString.trimRight(), newString.trimRight(), {
92
+ newlineIsToken: false,
93
+ ignoreWhitespace: false,
94
+ ignoreCase: false,
95
+ });
96
+ }
97
+ else {
98
+ diffArray = diff.diffJson(oldString, newString);
99
+ }
91
100
  let rightLineNumber = linesOffset;
92
101
  let leftLineNumber = linesOffset;
93
102
  let lineInformation = [];
@@ -135,13 +144,13 @@ const computeLineInformation = (oldString, newString, disableWordDiff = false, c
135
144
  }
136
145
  else {
137
146
  right.type = type;
138
- // Do word level diff and assign the corresponding values to the
147
+ // Do char level diff and assign the corresponding values to the
139
148
  // left and right diff information object.
140
149
  if (disableWordDiff) {
141
150
  right.value = rightValue;
142
151
  }
143
152
  else {
144
- const computedDiff = computeDiff(line, rightValue, compareMethod);
153
+ const computedDiff = computeDiff(line, rightValue, lineCompareMethod);
145
154
  right.value = computedDiff.right;
146
155
  left.value = computedDiff.left;
147
156
  }
@@ -184,6 +193,7 @@ const computeLineInformation = (oldString, newString, disableWordDiff = false, c
184
193
  ...getLineInformation(value, index, added, removed),
185
194
  ];
186
195
  });
196
+ console.log(lineInformation);
187
197
  return {
188
198
  lineInformation,
189
199
  diffLines,
package/lib/index.d.ts CHANGED
@@ -1,14 +1,14 @@
1
1
  import * as React from 'react';
2
2
  import * as PropTypes from 'prop-types';
3
- import { LineInformation, DiffInformation, DiffType, DiffMethod } from './compute-lines';
3
+ import { DiffInformation, DiffMethod, DiffType, LineInformation } from './compute-lines';
4
4
  import { ReactDiffViewerStyles, ReactDiffViewerStylesOverride } from './styles';
5
5
  export declare enum LineNumberPrefix {
6
6
  LEFT = "L",
7
7
  RIGHT = "R"
8
8
  }
9
9
  export interface ReactDiffViewerProps {
10
- oldValue: string;
11
- newValue: string;
10
+ oldValue: string | Object;
11
+ newValue: string | Object;
12
12
  splitView?: boolean;
13
13
  linesOffset?: number;
14
14
  disableWordDiff?: boolean;
@@ -41,8 +41,8 @@ declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiff
41
41
  private styles;
42
42
  static defaultProps: ReactDiffViewerProps;
43
43
  static propTypes: {
44
- oldValue: PropTypes.Validator<string>;
45
- newValue: PropTypes.Validator<string>;
44
+ oldValue: PropTypes.Validator<any>;
45
+ newValue: PropTypes.Validator<any>;
46
46
  splitView: PropTypes.Requireable<boolean>;
47
47
  disableWordDiff: PropTypes.Requireable<boolean>;
48
48
  compareMethod: PropTypes.Requireable<DiffMethod>;
package/lib/index.js CHANGED
@@ -94,6 +94,7 @@ class DiffViewer extends React.Component {
94
94
  this.props.highlightLines.includes(additionalLineNumberTemplate);
95
95
  const added = type === compute_lines_1.DiffType.ADDED;
96
96
  const removed = type === compute_lines_1.DiffType.REMOVED;
97
+ const changed = type === compute_lines_1.DiffType.CHANGED;
97
98
  let content;
98
99
  if (Array.isArray(value)) {
99
100
  content = this.renderWordDiff(value, this.props.renderContent);
@@ -109,6 +110,7 @@ class DiffViewer extends React.Component {
109
110
  [this.styles.emptyGutter]: !lineNumber,
110
111
  [this.styles.diffAdded]: added,
111
112
  [this.styles.diffRemoved]: removed,
113
+ [this.styles.diffChanged]: changed,
112
114
  [this.styles.highlightedGutter]: highlightLine,
113
115
  }) },
114
116
  React.createElement("pre", { className: this.styles.lineNumber }, lineNumber))),
@@ -117,6 +119,7 @@ class DiffViewer extends React.Component {
117
119
  [this.styles.emptyGutter]: !additionalLineNumber,
118
120
  [this.styles.diffAdded]: added,
119
121
  [this.styles.diffRemoved]: removed,
122
+ [this.styles.diffChanged]: changed,
120
123
  [this.styles.highlightedGutter]: highlightLine,
121
124
  }) },
122
125
  React.createElement("pre", { className: this.styles.lineNumber }, additionalLineNumber))),
@@ -135,6 +138,7 @@ class DiffViewer extends React.Component {
135
138
  [this.styles.emptyLine]: !content,
136
139
  [this.styles.diffAdded]: added,
137
140
  [this.styles.diffRemoved]: removed,
141
+ [this.styles.diffChanged]: changed,
138
142
  [this.styles.highlightedLine]: highlightLine,
139
143
  }) },
140
144
  React.createElement("pre", null,
@@ -144,6 +148,7 @@ class DiffViewer extends React.Component {
144
148
  [this.styles.emptyLine]: !content,
145
149
  [this.styles.diffAdded]: added,
146
150
  [this.styles.diffRemoved]: removed,
151
+ [this.styles.diffChanged]: changed,
147
152
  [this.styles.highlightedLine]: highlightLine,
148
153
  }) },
149
154
  React.createElement("pre", { className: this.styles.contentText }, content))));
@@ -231,7 +236,7 @@ class DiffViewer extends React.Component {
231
236
  */
232
237
  this.renderDiff = () => {
233
238
  const { oldValue, newValue, splitView, disableWordDiff, compareMethod, linesOffset, } = this.props;
234
- const { lineInformation, diffLines } = (0, compute_lines_1.computeLineInformation)(oldValue, newValue, disableWordDiff, compareMethod, linesOffset);
239
+ const { lineInformation, diffLines } = (0, compute_lines_1.computeLineInformation)(oldValue, newValue, disableWordDiff, compute_lines_1.DiffMethod.CHARS, linesOffset);
235
240
  const extraLines = this.props.extraLinesSurroundingDiff < 0
236
241
  ? 0
237
242
  : this.props.extraLinesSurroundingDiff;
@@ -248,11 +253,16 @@ class DiffViewer extends React.Component {
248
253
  (currentPosition > extraLines ||
249
254
  typeof diffBlockStart === 'undefined') &&
250
255
  !this.state.expandedBlocks.includes(diffBlockStart)) {
256
+ console.log('skipping', line);
251
257
  skippedLines.push(i + 1);
258
+ // show skipped line indicator only if there is more than one line to hide
252
259
  if (i === lineInformation.length - 1 && skippedLines.length > 1) {
253
260
  return this.renderSkippedLineIndicator(skippedLines.length, diffBlockStart, line.left.lineNumber, line.right.lineNumber);
261
+ // if we are trying to hide the last line, just show it
262
+ }
263
+ else if (i < lineInformation.length - 1) {
264
+ return null;
254
265
  }
255
- return null;
256
266
  }
257
267
  }
258
268
  const diffNodes = splitView
@@ -270,8 +280,10 @@ class DiffViewer extends React.Component {
270
280
  };
271
281
  this.render = () => {
272
282
  const { oldValue, newValue, useDarkTheme, leftTitle, rightTitle, splitView, hideLineNumbers, } = this.props;
273
- if (typeof oldValue !== 'string' || typeof newValue !== 'string') {
274
- throw Error('"oldValue" and "newValue" should be strings');
283
+ if (this.props.compareMethod !== compute_lines_1.DiffMethod.JSON) {
284
+ if (typeof oldValue !== 'string' || typeof newValue !== 'string') {
285
+ throw Error('"oldValue" and "newValue" should be strings');
286
+ }
275
287
  }
276
288
  this.styles = this.computeStyles(this.props.styles, useDarkTheme);
277
289
  const nodes = this.renderDiff();
@@ -311,8 +323,8 @@ DiffViewer.defaultProps = {
311
323
  linesOffset: 0,
312
324
  };
313
325
  DiffViewer.propTypes = {
314
- oldValue: PropTypes.string.isRequired,
315
- newValue: PropTypes.string.isRequired,
326
+ oldValue: PropTypes.any.isRequired,
327
+ newValue: PropTypes.any.isRequired,
316
328
  splitView: PropTypes.bool,
317
329
  disableWordDiff: PropTypes.bool,
318
330
  compareMethod: PropTypes.oneOf(Object.values(compute_lines_1.DiffMethod)),
package/lib/styles.d.ts CHANGED
@@ -3,6 +3,7 @@ export interface ReactDiffViewerStyles {
3
3
  diffContainer?: string;
4
4
  diffRemoved?: string;
5
5
  diffAdded?: string;
6
+ diffChanged?: string;
6
7
  line?: string;
7
8
  highlightedGutter?: string;
8
9
  contentText?: string;
@@ -32,6 +33,7 @@ export interface ReactDiffViewerStylesVariables {
32
33
  addedColor?: string;
33
34
  removedBackground?: string;
34
35
  removedColor?: string;
36
+ changedBackground?: string;
35
37
  wordAddedBackground?: string;
36
38
  wordRemovedBackground?: string;
37
39
  addedGutterBackground?: string;
@@ -56,6 +58,7 @@ export interface ReactDiffViewerStylesOverride {
56
58
  diffContainer?: Interpolation;
57
59
  diffRemoved?: Interpolation;
58
60
  diffAdded?: Interpolation;
61
+ diffChanged?: Interpolation;
59
62
  marker?: Interpolation;
60
63
  emptyGutter?: Interpolation;
61
64
  highlightedLine?: Interpolation;
@@ -68,6 +71,7 @@ export interface ReactDiffViewerStylesOverride {
68
71
  wordAdded?: Interpolation;
69
72
  wordRemoved?: Interpolation;
70
73
  codeFoldGutter?: Interpolation;
74
+ codeFold?: Interpolation;
71
75
  emptyLine?: Interpolation;
72
76
  content?: Interpolation;
73
77
  titleBlock?: Interpolation;
package/lib/styles.js CHANGED
@@ -23,6 +23,7 @@ exports.default = (styleOverride, useDarkTheme = false) => {
23
23
  addedColor: '#24292e',
24
24
  removedBackground: '#ffeef0',
25
25
  removedColor: '#24292e',
26
+ changedBackground: '#fffbdd',
26
27
  wordAddedBackground: '#acf2bd',
27
28
  wordRemovedBackground: '#fdb8c0',
28
29
  addedGutterBackground: '#cdffd8',
@@ -49,6 +50,7 @@ exports.default = (styleOverride, useDarkTheme = false) => {
49
50
  addedColor: 'white',
50
51
  removedBackground: '#632F34',
51
52
  removedColor: 'white',
53
+ changedBackground: '#3e302c',
52
54
  wordAddedBackground: '#055d67',
53
55
  wordRemovedBackground: '#7d383f',
54
56
  addedGutterBackground: '#034148',
@@ -137,6 +139,13 @@ exports.default = (styleOverride, useDarkTheme = false) => {
137
139
  },
138
140
  label: 'diff-added',
139
141
  });
142
+ const diffChanged = (0, emotion_1.css)({
143
+ background: variables.changedBackground,
144
+ [`.${lineNumber}`]: {
145
+ color: variables.gutterColor,
146
+ },
147
+ label: 'diff-changed',
148
+ });
140
149
  const wordDiff = (0, emotion_1.css)({
141
150
  padding: 2,
142
151
  display: 'inline-flex',
@@ -246,6 +255,7 @@ exports.default = (styleOverride, useDarkTheme = false) => {
246
255
  diffContainer,
247
256
  diffRemoved,
248
257
  diffAdded,
258
+ diffChanged,
249
259
  splitView,
250
260
  marker,
251
261
  highlightedGutter,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-diff-viewer-continued",
3
- "version": "3.2.1",
3
+ "version": "3.2.3",
4
4
  "private": false,
5
5
  "description": "Continuation of a simple and beautiful text diff viewer component made with diff and React",
6
6
  "keywords": [
@@ -35,24 +35,20 @@
35
35
  "prettier": "prettier --write ."
36
36
  },
37
37
  "dependencies": {
38
- "@babel/core": "^7.18.6",
39
- "@babel/preset-env": "^7.18.6",
40
- "@babel/preset-react": "^7.18.6",
41
- "@babel/preset-typescript": "^7.18.6",
42
38
  "classnames": "^2.3.1",
43
39
  "diff": "^5.1.0",
44
40
  "emotion": "^10.0.27",
45
- "jest": "^28.1.2",
46
- "jest-environment-jsdom": "^28.1.2",
47
41
  "memoize-one": "^6.0.0",
48
- "prettier": "^2.7.1",
49
- "prop-types": "^15.8.1",
50
- "sass": "^1.53.0"
42
+ "prop-types": "^15.8.1"
51
43
  },
52
44
  "devDependencies": {
45
+ "@babel/core": "^7.18.6",
46
+ "@babel/preset-env": "^7.18.6",
47
+ "@babel/preset-react": "^7.18.6",
48
+ "@babel/preset-typescript": "^7.18.6",
53
49
  "@semantic-release/changelog": "6.0.1",
54
50
  "@semantic-release/git": "10.0.1",
55
- "@testing-library/react": "^12.1.5",
51
+ "@testing-library/react": "^13.4.0",
56
52
  "@types/diff": "^5.0.2",
57
53
  "@types/expect": "^1.20.3",
58
54
  "@types/memoize-one": "^4.1.1",
@@ -75,11 +71,15 @@
75
71
  "file-loader": "^6.2.0",
76
72
  "gh-pages": "^4.0.0",
77
73
  "html-webpack-plugin": "^5.5.0",
74
+ "jest": "^28.1.2",
75
+ "jest-environment-jsdom": "^28.1.2",
78
76
  "mini-css-extract-plugin": "^2.6.1",
79
77
  "mocha": "^10.0.0",
78
+ "prettier": "^2.7.1",
80
79
  "raw-loader": "^4.0.2",
81
- "react": "^17.0.2",
82
- "react-dom": "^17.0.2",
80
+ "react": "^18.0.0",
81
+ "react-dom": "^18.0.0",
82
+ "sass": "^1.53.0",
83
83
  "sass-loader": "^13.0.2",
84
84
  "semantic-release": "^19.0.3",
85
85
  "spy": "^1.0.0",
@@ -91,8 +91,8 @@
91
91
  "webpack-dev-server": "^4.9.3"
92
92
  },
93
93
  "peerDependencies": {
94
- "react": "^15.3.0 || ^16.0.0 || ^17.0.0",
95
- "react-dom": "^15.3.0 || ^16.0.0 || ^17.0.0"
94
+ "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
95
+ "react-dom": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
96
96
  },
97
97
  "engines": {
98
98
  "node": ">= 8"
package/tsconfig.examples.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "compilerOptions": {
3
3
  "experimentalDecorators": true,
4
- "jsx": "react",
4
+ "jsx": "react-jsx",
5
5
  "module": "es6",
6
6
  "moduleResolution": "node",
7
7
  "allowSyntheticDefaultImports": true,