Skip to content

Commit

Permalink
Support JSON diff (Aeolun#3)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ericmorgan1
ericmorgan1 authored Nov 11, 2022
1 parent a3782f8 commit 9262303
Show file tree
Hide file tree
Showing 5 changed files with 48 additions and 35 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,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. |
Expand Down
28 changes: 14 additions & 14 deletions examples/src/diff/json/new.json
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,18 @@
{
"name": "react-diff-viewer",
"license": "BSD",
"version": "1.0.0",
"description": "Text diff viewer for React",
"main": "lib/index.js",
"repository": "git@github.com:praneshr/react-diff-viewer.git",
"author": "Pranesh Ravi<praneshpranesh@gmail.com>",
"private": false,
"scripts": {
"build": "tsc --outDir lib/",
"build:watch": "tsc --outDir lib/ -w",
"start:examples": "webpack-dev-server --open --hot --inline",
"start": "webpack-dev-server --open --hot --inline"
},
"devDependencies": {
"@types/classnames": "^2.2.6",
"@types/diff": "^3.5.1",
Expand All @@ -18,20 +32,6 @@
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.9"
},
"name": "react-diff-viewer",
"version": "1.0.0",
"description": "Text diff viewer for React",
"main": "lib/index.js",
"repository": "git@github.com:praneshr/react-diff-viewer.git",
"author": "Pranesh Ravi<praneshpranesh@gmail.com>",
"license": "BSD",
"private": false,
"scripts": {
"build": "tsc --outDir lib/",
"build:watch": "tsc --outDir lib/ -w",
"start:examples": "webpack-dev-server --open --hot --inline",
"start": "webpack-dev-server --open --hot --inline"
},
"dependencies": {
"classnames": "^2.2.6"
},
Expand Down
3 changes: 3 additions & 0 deletions examples/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ import ReactDiff, { DiffMethod } from '../../src/index';
const oldJs = require('./diff/javascript/old.rjs').default;
const newJs = require('./diff/javascript/new.rjs').default;

const oldJson = require('./diff/json/old.json');
const newJson = require('./diff/json/new.json');

import logo from '../../logo.png';
import cn from 'classnames';

Expand Down
34 changes: 21 additions & 13 deletions src/compute-lines.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export enum DiffMethod {
TRIMMED_LINES = 'diffTrimmedLines',
SENTENCES = 'diffSentences',
CSS = 'diffCss',
JSON = 'diffJson',
}

export interface DiffInformation {
Expand Down Expand Up @@ -71,8 +72,8 @@ const constructLines = (value: string): string[] => {
* @param compareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
*/
const computeDiff = (
oldValue: string,
newValue: string,
oldValue: string | Object,
newValue: string | Object,
compareMethod: string = DiffMethod.CHARS,
): ComputedDiffInformation => {
const diffArray: JsDiffChangeObject[] = jsDiff[compareMethod](
Expand Down Expand Up @@ -121,21 +122,28 @@ const computeDiff = (
* @param linesOffset line number to start counting from
*/
const computeLineInformation = (
oldString: string,
newString: string,
oldString: string | Object,
newString: string | Object,
disableWordDiff: boolean = false,
compareMethod: string = DiffMethod.CHARS,
linesOffset: number = 0,
): ComputedLineInformation => {
const diffArray = diff.diffLines(
oldString.trimRight(),
newString.trimRight(),
{
newlineIsToken: false,
ignoreWhitespace: false,
ignoreCase: false,
},
);
let diffArray: Diff.Change[] = [];

// 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;
Expand Down
14 changes: 8 additions & 6 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ export enum LineNumberPrefix {

export interface ReactDiffViewerProps {
// Old value to compare.
oldValue: string;
oldValue: string | Object;
// New value to compare.
newValue: string;
newValue: string | Object;
// Enable/Disable split view.
splitView?: boolean;
// Set line Offset
Expand Down Expand Up @@ -104,8 +104,8 @@ class DiffViewer extends React.Component<
};

public static 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(DiffMethod)),
Expand Down Expand Up @@ -582,8 +582,10 @@ class DiffViewer extends React.Component<
hideLineNumbers,
} = this.props;

if (typeof oldValue !== 'string' || typeof newValue !== 'string') {
throw Error('"oldValue" and "newValue" should be strings');
if (this.props.compareMethod !== 'diffJson') {
if (typeof oldValue !== 'string' || typeof newValue !== 'string') {
throw Error('"oldValue" and "newValue" should be strings');
}
}

this.styles = this.computeStyles(this.props.styles, useDarkTheme);
Expand Down

0 comments on commit 9262303

Please sign in to comment.