react-diff-viewer-continued 3.2.2 → 3.2.4

package/.all-contributorsrc

@@ -0,0 +1,34 @@
+{
+  "files": [
+    "README.md"
+  ],
+  "imageSize": 100,
+  "commit": false,
+  "commitConvention": "angular",
+  "contributors": [
+    {
+      "login": "ericmorgan1",
+      "name": "Eric M.",
+      "avatar_url": "https://avatars.githubusercontent.com/u/10346191?v=4",
+      "profile": "https://github.com/ericmorgan1",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "spyroid",
+      "name": "Andrei Kovalevsky",
+      "avatar_url": "https://avatars.githubusercontent.com/u/844495?v=4",
+      "profile": "https://github.com/spyroid",
+      "contributions": [
+        "code"
+      ]
+    }
+  ],
+  "contributorsPerLine": 7,
+  "skipCi": true,
+  "repoType": "github",
+  "repoHost": "https://github.com",
+  "projectName": "react-diff-viewer-continued",
+  "projectOwner": "Aeolun"
+}

package/.github/workflows/release.yml

@@ -9,14 +9,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 'lts/*'
-      - uses: pnpm/action-setup@v2.2.2
+      - uses: pnpm/action-setup@v2.2.4
         with:
           version: latest
       - name: Install dependencies

package/.github/workflows/test.yml

@@ -9,14 +9,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 'lts/*'
-      - uses: pnpm/action-setup@v2.2.2
+      - uses: pnpm/action-setup@v2.2.4
         with:
           version: latest
       - name: Install dependencies

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [3.2.4](https://github.com/aeolun/react-diff-viewer-continued/compare/v3.2.3...v3.2.4) (2022-12-23)
+
+
+### Bug Fixes
+
+* to deploy previous fixes ([06d8361](https://github.com/aeolun/react-diff-viewer-continued/commit/06d83614204d0c48c3ac654b06c43ba42f679c56))
+
+## [3.2.3](https://github.com/aeolun/react-diff-viewer-continued/compare/v3.2.2...v3.2.3) (2022-11-11)
+
+
+### Bug Fixes
+
+* update example with JSON ([f61c977](https://github.com/aeolun/react-diff-viewer-continued/commit/f61c977302415774dd32d48aca3addb7122ffa55))
+
 ## [3.2.2](https://github.com/aeolun/react-diff-viewer-continued/compare/v3.2.1...v3.2.2) (2022-10-10)
 
 

package/README.md

@@ -1,12 +1,18 @@
 <img src='https://github.com/Aeolun/react-diff-viewer-continued/raw/master/logo_dark.png' width="100%" alt='React Diff Viewer' />
+
 <br/>
 
-[![npm version](https://badge.fury.io/js/react-diff-viewer-continued.svg)](https://badge.fury.io/js/react-diff-viewer-continued)
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat)](#contributors)
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
+
+[![npm version](https://img.shields.io/npm/v/react-diff-viewer-continued)](https://www.npmjs.com/package/react-diff-viewer-continued)
+[![npm downloads](https://img.shields.io/npm/dw/react-diff-viewer-continued)](https://www.npmjs.com/package/react-diff-viewer-continued)
 [![GitHub license](https://img.shields.io/github/license/aeolun/react-diff-viewer-continued.svg)](https://github.com/aeolun/react-diff-viewer-continued/blob/master/LICENSE)
 
 A simple and beautiful text diff viewer component made with [Diff](https://github.com/kpdecker/jsdiff) and [React](https://reactjs.org).
 
-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.
+Inspired by the 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.
 
 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.
 
@@ -63,8 +69,8 @@ class Diff extends PureComponent {
 
 | Prop                      | Type                      | Default                        | Description                                                                                                                                                                                                                                                                                                                                                                                                      |
 | ------------------------- | ------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| oldValue                  | `string`                  | `''`                           | Old value as string.                                                                                                                                                                                                                                                                                                                                                                                             |
-| newValue                  | `string`                  | `''`                           | New value as string.                                                                                                                                                                                                                                                                                                                                                                                             |
+| oldValue                  | `string | Object`                  | `''`                           | Old value as string (or Object if using `diffJson`).                                                                                                                                                                                                                                                                                                                                                                                             |
+| newValue                  | `string | Object`                  | `''`                           | New value as string (or Object if using `diffJson`).                                                                                                                                                                                                                                                                                                                                                                                             |
 | splitView                 | `boolean`                 | `true`                         | Switch between `unified` and `split` view.                                                                                                                                                                                                                                                                                                                                                                       |
 | disableWordDiff           | `boolean`                 | `false`                        | Show and hide word diff in a diff line.                                                                                                                                                                                                                                                                                                                                                                          |
 | 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.                                                                                                                                                                                                                          |
@@ -362,6 +368,32 @@ pnpm start:examples
 
 Check package.json for more build scripts.
 
+## Contributors
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tbody>
+    <tr>
+      <td align="center"><a href="https://github.com/ericmorgan1"><img src="https://avatars.githubusercontent.com/u/10346191?v=4?s=100" width="100px;" alt="Eric M."/><br /><sub><b>Eric M.</b></sub></a><br /><a href="https://github.com/Aeolun/react-diff-viewer-continued/commits?author=ericmorgan1" title="Code">💻</a></td>
+      <td align="center"><a href="https://github.com/spyroid"><img src="https://avatars.githubusercontent.com/u/844495?v=4?s=100" width="100px;" alt="Andrei Kovalevsky"/><br /><sub><b>Andrei Kovalevsky</b></sub></a><br /><a href="https://github.com/Aeolun/react-diff-viewer-continued/commits?author=spyroid" title="Code">💻</a></td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
 ## License
 
 MIT

package/lib/compute-lines.d.ts

@@ -1,7 +1,8 @@
 export declare enum DiffType {
     DEFAULT = 0,
     ADDED = 1,
-    REMOVED = 2
+    REMOVED = 2,
+    CHANGED = 3
 }
 export declare enum DiffMethod {
     CHARS = "diffChars",
@@ -10,7 +11,8 @@ export declare enum DiffMethod {
     LINES = "diffLines",
     TRIMMED_LINES = "diffTrimmedLines",
     SENTENCES = "diffSentences",
-    CSS = "diffCss"
+    CSS = "diffCss",
+    JSON = "diffJson"
 }
 export interface DiffInformation {
     value?: string | DiffInformation[];
@@ -45,8 +47,8 @@ export interface JsDiffChangeObject {
  * @param oldString Old string to compare.
  * @param newString New string to compare with old string.
  * @param disableWordDiff Flag to enable/disable word diff.
- * @param compareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
+ * @param lineCompareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
  * @param linesOffset line number to start counting from
  */
-declare const computeLineInformation: (oldString: string, newString: string, disableWordDiff?: boolean, compareMethod?: string, linesOffset?: number) => ComputedLineInformation;
+declare const computeLineInformation: (oldString: string | Object, newString: string | Object, disableWordDiff?: boolean, lineCompareMethod?: string, linesOffset?: number) => ComputedLineInformation;
 export { computeLineInformation };

package/lib/compute-lines.js

@@ -8,6 +8,7 @@ var DiffType;
     DiffType[DiffType["DEFAULT"] = 0] = "DEFAULT";
     DiffType[DiffType["ADDED"] = 1] = "ADDED";
     DiffType[DiffType["REMOVED"] = 2] = "REMOVED";
+    DiffType[DiffType["CHANGED"] = 3] = "CHANGED";
 })(DiffType = exports.DiffType || (exports.DiffType = {}));
 // See https://github.com/kpdecker/jsdiff/tree/v4.0.1#api for more info on the below JsDiff methods
 var DiffMethod;
@@ -19,6 +20,7 @@ var DiffMethod;
     DiffMethod["TRIMMED_LINES"] = "diffTrimmedLines";
     DiffMethod["SENTENCES"] = "diffSentences";
     DiffMethod["CSS"] = "diffCss";
+    DiffMethod["JSON"] = "diffJson";
 })(DiffMethod = exports.DiffMethod || (exports.DiffMethod = {}));
 /**
  * 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) => {
  * @param oldString Old string to compare.
  * @param newString New string to compare with old string.
  * @param disableWordDiff Flag to enable/disable word diff.
- * @param compareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
+ * @param lineCompareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
  * @param linesOffset line number to start counting from
  */
-const computeLineInformation = (oldString, newString, disableWordDiff = false, compareMethod = DiffMethod.CHARS, linesOffset = 0) => {
-    const diffArray = diff.diffLines(oldString.trimRight(), newString.trimRight(), {
-        newlineIsToken: false,
-        ignoreWhitespace: false,
-        ignoreCase: false,
-    });
+const computeLineInformation = (oldString, newString, disableWordDiff = false, lineCompareMethod = DiffMethod.CHARS, linesOffset = 0) => {
+    let diffArray = [];
+    // Use diffLines for strings, and diffJson for objects...
+    if (typeof oldString === 'string' && typeof newString === 'string') {
+        diffArray = diff.diffLines(oldString.trimRight(), newString.trimRight(), {
+            newlineIsToken: false,
+            ignoreWhitespace: false,
+            ignoreCase: false,
+        });
+    }
+    else {
+        diffArray = diff.diffJson(oldString, newString);
+    }
     let rightLineNumber = linesOffset;
     let leftLineNumber = linesOffset;
     let lineInformation = [];
@@ -135,13 +144,13 @@ const computeLineInformation = (oldString, newString, disableWordDiff = false, c
                             }
                             else {
                                 right.type = type;
-                                // Do word level diff and assign the corresponding values to the
+                                // Do char level diff and assign the corresponding values to the
                                 // left and right diff information object.
                                 if (disableWordDiff) {
                                     right.value = rightValue;
                                 }
                                 else {
-                                    const computedDiff = computeDiff(line, rightValue, compareMethod);
+                                    const computedDiff = computeDiff(line, rightValue, lineCompareMethod);
                                     right.value = computedDiff.right;
                                     left.value = computedDiff.left;
                                 }

package/lib/index.d.ts

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { LineInformation, DiffInformation, DiffType, DiffMethod } from './compute-lines';
+import { DiffInformation, DiffMethod, DiffType, LineInformation } from './compute-lines';
 import { ReactDiffViewerStyles, ReactDiffViewerStylesOverride } from './styles';
 export declare enum LineNumberPrefix {
     LEFT = "L",
     RIGHT = "R"
 }
 export interface ReactDiffViewerProps {
-    oldValue: string;
-    newValue: string;
+    oldValue: string | Object;
+    newValue: string | Object;
     splitView?: boolean;
     linesOffset?: number;
     disableWordDiff?: boolean;
@@ -41,8 +41,8 @@ declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiff
     private styles;
     static defaultProps: ReactDiffViewerProps;
     static propTypes: {
-        oldValue: PropTypes.Validator<string>;
-        newValue: PropTypes.Validator<string>;
+        oldValue: PropTypes.Validator<any>;
+        newValue: PropTypes.Validator<any>;
         splitView: PropTypes.Requireable<boolean>;
         disableWordDiff: PropTypes.Requireable<boolean>;
         compareMethod: PropTypes.Requireable<DiffMethod>;

package/lib/index.js

@@ -94,6 +94,7 @@ class DiffViewer extends React.Component {
                 this.props.highlightLines.includes(additionalLineNumberTemplate);
             const added = type === compute_lines_1.DiffType.ADDED;
             const removed = type === compute_lines_1.DiffType.REMOVED;
+            const changed = type === compute_lines_1.DiffType.CHANGED;
             let content;
             if (Array.isArray(value)) {
                 content = this.renderWordDiff(value, this.props.renderContent);
@@ -109,6 +110,7 @@ class DiffViewer extends React.Component {
                         [this.styles.emptyGutter]: !lineNumber,
                         [this.styles.diffAdded]: added,
                         [this.styles.diffRemoved]: removed,
+                        [this.styles.diffChanged]: changed,
                         [this.styles.highlightedGutter]: highlightLine,
                     }) },
                     React.createElement("pre", { className: this.styles.lineNumber }, lineNumber))),
@@ -117,6 +119,7 @@ class DiffViewer extends React.Component {
                         [this.styles.emptyGutter]: !additionalLineNumber,
                         [this.styles.diffAdded]: added,
                         [this.styles.diffRemoved]: removed,
+                        [this.styles.diffChanged]: changed,
                         [this.styles.highlightedGutter]: highlightLine,
                     }) },
                     React.createElement("pre", { className: this.styles.lineNumber }, additionalLineNumber))),
@@ -135,6 +138,7 @@ class DiffViewer extends React.Component {
                         [this.styles.emptyLine]: !content,
                         [this.styles.diffAdded]: added,
                         [this.styles.diffRemoved]: removed,
+                        [this.styles.diffChanged]: changed,
                         [this.styles.highlightedLine]: highlightLine,
                     }) },
                     React.createElement("pre", null,
@@ -144,6 +148,7 @@ class DiffViewer extends React.Component {
                         [this.styles.emptyLine]: !content,
                         [this.styles.diffAdded]: added,
                         [this.styles.diffRemoved]: removed,
+                        [this.styles.diffChanged]: changed,
                         [this.styles.highlightedLine]: highlightLine,
                     }) },
                     React.createElement("pre", { className: this.styles.contentText }, content))));
@@ -249,10 +254,14 @@ class DiffViewer extends React.Component {
                             typeof diffBlockStart === 'undefined') &&
                         !this.state.expandedBlocks.includes(diffBlockStart)) {
                         skippedLines.push(i + 1);
+                        // show skipped line indicator only if there is more than one line to hide
                         if (i === lineInformation.length - 1 && skippedLines.length > 1) {
                             return this.renderSkippedLineIndicator(skippedLines.length, diffBlockStart, line.left.lineNumber, line.right.lineNumber);
+                            // if we are trying to hide the last line, just show it
+                        }
+                        else if (i < lineInformation.length - 1) {
+                            return null;
                         }
-                        return null;
                     }
                 }
                 const diffNodes = splitView
@@ -270,8 +279,10 @@ class DiffViewer extends React.Component {
         };
         this.render = () => {
             const { oldValue, newValue, useDarkTheme, leftTitle, rightTitle, splitView, hideLineNumbers, } = this.props;
-            if (typeof oldValue !== 'string' || typeof newValue !== 'string') {
-                throw Error('"oldValue" and "newValue" should be strings');
+            if (this.props.compareMethod !== compute_lines_1.DiffMethod.JSON) {
+                if (typeof oldValue !== 'string' || typeof newValue !== 'string') {
+                    throw Error('"oldValue" and "newValue" should be strings');
+                }
             }
             this.styles = this.computeStyles(this.props.styles, useDarkTheme);
             const nodes = this.renderDiff();
@@ -311,8 +322,8 @@ DiffViewer.defaultProps = {
     linesOffset: 0,
 };
 DiffViewer.propTypes = {
-    oldValue: PropTypes.string.isRequired,
-    newValue: PropTypes.string.isRequired,
+    oldValue: PropTypes.any.isRequired,
+    newValue: PropTypes.any.isRequired,
     splitView: PropTypes.bool,
     disableWordDiff: PropTypes.bool,
     compareMethod: PropTypes.oneOf(Object.values(compute_lines_1.DiffMethod)),

package/lib/styles.d.ts

@@ -3,6 +3,7 @@ export interface ReactDiffViewerStyles {
     diffContainer?: string;
     diffRemoved?: string;
     diffAdded?: string;
+    diffChanged?: string;
     line?: string;
     highlightedGutter?: string;
     contentText?: string;
@@ -32,6 +33,7 @@ export interface ReactDiffViewerStylesVariables {
     addedColor?: string;
     removedBackground?: string;
     removedColor?: string;
+    changedBackground?: string;
     wordAddedBackground?: string;
     wordRemovedBackground?: string;
     addedGutterBackground?: string;
@@ -56,6 +58,7 @@ export interface ReactDiffViewerStylesOverride {
     diffContainer?: Interpolation;
     diffRemoved?: Interpolation;
     diffAdded?: Interpolation;
+    diffChanged?: Interpolation;
     marker?: Interpolation;
     emptyGutter?: Interpolation;
     highlightedLine?: Interpolation;
@@ -68,6 +71,7 @@ export interface ReactDiffViewerStylesOverride {
     wordAdded?: Interpolation;
     wordRemoved?: Interpolation;
     codeFoldGutter?: Interpolation;
+    codeFold?: Interpolation;
     emptyLine?: Interpolation;
     content?: Interpolation;
     titleBlock?: Interpolation;

package/lib/styles.js

@@ -23,6 +23,7 @@ exports.default = (styleOverride, useDarkTheme = false) => {
             addedColor: '#24292e',
             removedBackground: '#ffeef0',
             removedColor: '#24292e',
+            changedBackground: '#fffbdd',
             wordAddedBackground: '#acf2bd',
             wordRemovedBackground: '#fdb8c0',
             addedGutterBackground: '#cdffd8',
@@ -49,6 +50,7 @@ exports.default = (styleOverride, useDarkTheme = false) => {
             addedColor: 'white',
             removedBackground: '#632F34',
             removedColor: 'white',
+            changedBackground: '#3e302c',
             wordAddedBackground: '#055d67',
             wordRemovedBackground: '#7d383f',
             addedGutterBackground: '#034148',
@@ -137,6 +139,13 @@ exports.default = (styleOverride, useDarkTheme = false) => {
         },
         label: 'diff-added',
     });
+    const diffChanged = (0, emotion_1.css)({
+        background: variables.changedBackground,
+        [`.${lineNumber}`]: {
+            color: variables.gutterColor,
+        },
+        label: 'diff-changed',
+    });
     const wordDiff = (0, emotion_1.css)({
         padding: 2,
         display: 'inline-flex',
@@ -246,6 +255,7 @@ exports.default = (styleOverride, useDarkTheme = false) => {
         diffContainer,
         diffRemoved,
         diffAdded,
+        diffChanged,
         splitView,
         marker,
         highlightedGutter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-diff-viewer-continued",
-  "version": "3.2.2",
+  "version": "3.2.4",
   "private": false,
   "description": "Continuation of a simple and beautiful text diff viewer component made with diff and React",
   "keywords": [
@@ -48,7 +48,7 @@
     "@babel/preset-typescript": "^7.18.6",
     "@semantic-release/changelog": "6.0.1",
     "@semantic-release/git": "10.0.1",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^13.4.0",
     "@types/diff": "^5.0.2",
     "@types/expect": "^1.20.3",
     "@types/memoize-one": "^4.1.1",
@@ -77,8 +77,8 @@
     "mocha": "^10.0.0",
     "prettier": "^2.7.1",
     "raw-loader": "^4.0.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "sass": "^1.53.0",
     "sass-loader": "^13.0.2",
     "semantic-release": "^19.0.3",
@@ -91,8 +91,8 @@
     "webpack-dev-server": "^4.9.3"
   },
   "peerDependencies": {
-    "react": "^15.3.0 || ^16.0.0 || ^17.0.0",
-    "react-dom": "^15.3.0 || ^16.0.0 || ^17.0.0"
+    "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
   },
   "engines": {
     "node": ">= 8"

package/tsconfig.examples.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "experimentalDecorators": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "module": "es6",
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,