fix: update example with JSON

Aeolun · Nov 11, 2022 · f61c977 · f61c977
1 parent 656cefb
commit f61c977
Show file tree

Hide file tree

Showing 10 changed files with 103 additions and 9,787 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -9,11 +9,11 @@ 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

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -9,11 +9,11 @@ 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

diff --git a/examples/src/index.tsx b/examples/src/index.tsx
@@ -1,18 +1,17 @@
 import './style.scss';
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import {Component, MouseEvent} from 'react';
 
-import ReactDiff, { DiffMethod } from '../../src/index';
+import ReactDiff, {DiffMethod} from '../../src/index';
+import logo from '../../logo.png';
+import cn from 'classnames';
+import {render} from "react-dom";
 
 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';
-
 interface ExampleState {
   splitView?: boolean;
   highlightLine?: string[];
@@ -25,7 +24,7 @@ interface ExampleState {
 
 const P = (window as any).Prism;
 
-class Example extends React.Component<{}, ExampleState> {
+class Example extends Component<{}, ExampleState> {
   public constructor(props: any) {
     super(props);
     this.state = {
@@ -34,12 +33,13 @@ class Example extends React.Component<{}, ExampleState> {
       splitView: true,
       customGutter: true,
       enableSyntaxHighlighting: true,
+      compareMethod: DiffMethod.CHARS
     };
   }
 
   private onLineNumberClick = (
     id: string,
-    e: React.MouseEvent<HTMLTableCellElement>,
+    e: MouseEvent<HTMLTableCellElement>,
   ): void => {
     let highlightLine = [id];
     if (e.shiftKey && this.state.highlightLine.length === 1) {
@@ -160,15 +160,31 @@ class Example extends React.Component<{}, ExampleState> {
               </label>
               <span>Custom gutter</span>
             </div>
+            <div>
+              <label className={'switch'}>
+                <input
+                  type="checkbox"
+                  checked={this.state.compareMethod === DiffMethod.JSON}
+                  onChange={() => {
+                    this.setState({
+                      compareMethod: this.state.compareMethod === DiffMethod.JSON ? DiffMethod.CHARS : DiffMethod.JSON,
+                    });
+                  }}
+                />
+                <span className="slider round"></span>
+              </label>
+              <span>JSON</span>
+            </div>
           </div>
         </div>
         <div className="diff-viewer">
           <ReactDiff
             highlightLines={this.state.highlightLine}
             onLineNumberClick={this.onLineNumberClick}
-            oldValue={oldJs}
+            oldValue={this.state.compareMethod === DiffMethod.JSON ? oldJson : oldJs}
+            compareMethod={this.state.compareMethod}
             splitView={this.state.splitView}
-            newValue={newJs}
+            newValue={this.state.compareMethod === DiffMethod.JSON ? newJson : newJs}
             renderGutter={
               this.state.customGutter
                 ? (diffData) => {
@@ -186,7 +202,9 @@ class Example extends React.Component<{}, ExampleState> {
                         title={'extra info'}
                       >
                         <pre className={cn(diffData.styles.lineNumber, {})}>
-                          {diffData.type == 2
+                          {diffData.type == 3
+                            ? 'CHG'
+                            : diffData.type == 2
                             ? 'DEL'
                             : diffData.type == 1
                             ? 'ADD'
@@ -205,8 +223,8 @@ class Example extends React.Component<{}, ExampleState> {
                 : undefined
             }
             useDarkTheme={this.state.theme === 'dark'}
-            leftTitle="webpack.config.js master@2178133 - pushed 2 hours ago."
-            rightTitle="webpack.config.js master@64207ee - pushed 13 hours ago."
+            leftTitle={`${this.state.compareMethod === DiffMethod.JSON ? 'package.json' : 'webpack.config.js'} master@2178133 - pushed 2 hours ago.`}
+            rightTitle={`${this.state.compareMethod === DiffMethod.JSON ? 'package.json' : 'webpack.config.js'} master@64207ee - pushed 13 hours ago.`}
           />
         </div>
         <footer>
@@ -224,4 +242,4 @@ class Example extends React.Component<{}, ExampleState> {
   }
 }
 
-ReactDOM.render(<Example />, document.getElementById('app'));
+render(<Example />, document.getElementById('app'));
diff --git a/package.json b/package.json
@@ -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",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/compute-lines.ts b/src/compute-lines.ts
@@ -6,6 +6,7 @@ export enum DiffType {
   DEFAULT = 0,
   ADDED = 1,
   REMOVED = 2,
+  CHANGED = 3
 }
 
 // See https://github.com/kpdecker/jsdiff/tree/v4.0.1#api for more info on the below JsDiff methods
@@ -118,14 +119,14 @@ const computeDiff = (
  * @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: string | Object,
   newString: string | Object,
   disableWordDiff: boolean = false,
-  compareMethod: string = DiffMethod.CHARS,
+  lineCompareMethod: string = DiffMethod.CHARS,
   linesOffset: number = 0,
 ): ComputedLineInformation => {
   let diffArray: Diff.Change[] = [];
@@ -213,15 +214,15 @@ const computeLineInformation = (
                   right.value = rightValue;
                 } 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 as string,
-                        compareMethod,
+                        lineCompareMethod
                     );
                     right.value = computedDiff.right;
                     left.value = computedDiff.left;
@@ -260,13 +261,14 @@ const computeLineInformation = (
       .filter(Boolean);
   };
 
+
   diffArray.forEach(({ added, removed, value }: diff.Change, index): void => {
     lineInformation = [
       ...lineInformation,
       ...getLineInformation(value, index, added, removed),
     ];
   });
-
+  console.log(lineInformation)
   return {
     lineInformation,
     diffLines,