update prop name, update type definition, update README

Author: Derek Hammond

README.md

@@ -76,7 +76,7 @@ class Diff extends PureComponent {
 |newValue          |`string`       |`''`          |New value as string.                          |
 |splitView         |`boolean`      |`true`        |Switch between `unified` and `split` view.    |
 |disableWordDiff   |`boolean`      |`false`       |Show and hide word diff in a diff line.       |
-|jsDiffCompareMethod   |`string`      |`'diffChars'`       |JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api       |
+|compareMethod   |`string`      |`'diffChars'`       |JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api       |
 |hideLineNumbers   |`boolean`      |`false`       |Show and hide line numbers.                   |
 |renderContent     |`function`     |`undefined`   |Render Prop API to render code in the diff viewer. Helpful for [syntax highlighting](#syntax-highlighting)   |
 |onLineNumberClick |`function`     |`undefined`   |Event handler for line number click. `(lineId: string) => void`          |
@@ -175,7 +175,7 @@ class Diff extends PureComponent {
       <ReactDiffViewer
         oldValue={oldCode}
         newValue={newCode}
-        jsDiffCompareMethod={DiffMethod.WORDS}
+        compareMethod={DiffMethod.WORDS}
         splitView={true}
         renderContent={this.highlightSyntax}
       />

examples/src/index.tsx

@@ -19,7 +19,7 @@ interface ExampleState {
   highlightLine?: string[];
   language?: string;
   enableSyntaxHighlighting?: boolean;
-  jsDiffCompareMethod?: string;
+  compareMethod?: string;
 }
 
 const P = (window as any).Prism;
@@ -32,7 +32,7 @@ class Example extends React.Component<{}, ExampleState> {
       highlightLine: [],
       language: 'javascript',
       enableSyntaxHighlighting: true,
-      jsDiffCompareMethod: 'diffChars'
+      compareMethod: 'diffChars'
     };
   }
 
@@ -47,8 +47,8 @@ class Example extends React.Component<{}, ExampleState> {
   private onLanguageChange = (e: any): void =>
     this.setState({ language: e.target.value, highlightLine: [] });
 
-  private onJsDiffCompareMethodChange = (e: any): void =>
-    this.setState({ jsDiffCompareMethod: e.target.value });
+  private onCompareMethodChange = (e: any): void =>
+    this.setState({ compareMethod: e.target.value });
 
   private onLineNumberClick = (
     id: string,
@@ -168,8 +168,8 @@ class Example extends React.Component<{}, ExampleState> {
             <select
               name="js_diff_compare_method"
               id="js_diff_compare_method"
-              onChange={this.onJsDiffCompareMethodChange}
-              value={this.state.jsDiffCompareMethod}
+              onChange={this.onCompareMethodChange}
+              value={this.state.compareMethod}
             >
               <option value="disabled">DISABLE</option>
               <option value="diffChars">diffChars</option>
@@ -220,8 +220,8 @@ class Example extends React.Component<{}, ExampleState> {
         </div>
         <div className="diff-viewer">
           <ReactDiff
-            disableWordDiff={ this.state.jsDiffCompareMethod === 'disabled' }
-            jsDiffCompareMethod={ this.state.jsDiffCompareMethod }
+            disableWordDiff={ this.state.compareMethod === 'disabled' }
+            compareMethod={ this.state.compareMethod }
             highlightLines={this.state.highlightLine}
             onLineNumberClick={this.onLineNumberClick}
             oldValue={oldValue}

src/compute-lines.ts

@@ -8,6 +8,7 @@ export enum DiffType {
   REMOVED = 2,
 }
 
+// See https://github.com/kpdecker/jsdiff/tree/v4.0.1#api for more info on the below JsDiff methods
 export enum DiffMethod {
   CHARS = 'diffChars',
   WORDS = 'diffWords',
@@ -19,8 +20,6 @@ export enum DiffMethod {
 }
 
 export interface DiffInformation {
-  added?: boolean;
-  removed?: boolean;
   value?: string | DiffInformation[];
   lineNumber?: number;
   type?: DiffType;
@@ -41,6 +40,13 @@ export interface ComputedDiffInformation {
   right?: DiffInformation[];
 }
 
+// See https://github.com/kpdecker/jsdiff/tree/v4.0.1#change-objects for more info on JsDiff Change Objects
+export interface JsDiffChangeObject {
+  added?: boolean;
+  removed?: boolean;
+  value?: string;
+}
+
 /**
  * Splits diff text by new line and computes final list of diff lines based on
  * conditions.
@@ -78,16 +84,16 @@ const constructLines = (value: string): string[] => {
  *
  * @param oldValue Old word in the line.
  * @param newValue New word in the line.
- * @param jsDiffCompareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
+ * @param compareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
  */
-const computeDiff = (oldValue: string, newValue: string, jsDiffCompareMethod: string): ComputedDiffInformation => {
-  const diffArray = jsDiff[jsDiffCompareMethod](oldValue, newValue);
+const computeDiff = (oldValue: string, newValue: string, compareMethod: string): ComputedDiffInformation => {
+  const diffArray: Array<JsDiffChangeObject> = jsDiff[compareMethod](oldValue, newValue);
   const computedDiff: ComputedDiffInformation = {
     left: [],
     right: [],
   };
   diffArray
-    .forEach(({ added, removed, value }: DiffInformation): DiffInformation => {
+    .forEach(({ added, removed, value }): DiffInformation => {
       const diffInformation: DiffInformation = {};
       if (added) {
         diffInformation.type = DiffType.ADDED;
@@ -121,13 +127,13 @@ const computeDiff = (oldValue: string, newValue: string, jsDiffCompareMethod: st
  * @param oldString Old string to compare.
  * @param newString New string to compare with old string.
  * @param disableWordDiff Flag to enable/disable word diff.
- * @param jsDiffCompareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
+ * @param compareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
  */
 const computeLineInformation = (
   oldString: string,
   newString: string,
   disableWordDiff: boolean = false,
-  jsDiffCompareMethod: string = DiffMethod.CHARS,
+  compareMethod: string = DiffMethod.CHARS,
 ): ComputedLineInformation => {
   const diffArray = diff.diffLines(
     oldString.trimRight(),
@@ -190,10 +196,10 @@ const computeLineInformation = (
               right.type = type;
               // Do word level diff and assign the corresponding values to the
               // left and right diff information object.
-              if (disableWordDiff || !(<any>Object).values(DiffMethod).includes(jsDiffCompareMethod)) {
+              if (disableWordDiff || !(<any>Object).values(DiffMethod).includes(compareMethod)) {
                 right.value = rightValue;
               } else {
-                const computedDiff = computeDiff(line, rightValue as string, jsDiffCompareMethod);
+                const computedDiff = computeDiff(line, rightValue as string, compareMethod);
                 right.value = computedDiff.right;
                 left.value = computedDiff.left;
               }

src/index.tsx

@@ -31,7 +31,7 @@ export interface ReactDiffViewerProps {
   // Enable/Disable word diff.
   disableWordDiff?: boolean;
   // JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
-  jsDiffCompareMethod?: string;
+  compareMethod?: string;
   // Number of unmodified lines surrounding each line diff.
   extraLinesSurroundingDiff?: number;
   // Show/hide line number.
@@ -71,7 +71,7 @@ class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerSt
     splitView: true,
     highlightLines: [],
     disableWordDiff: false,
-    jsDiffCompareMethod: DiffMethod.CHARS,
+    compareMethod: DiffMethod.CHARS,
     styles: {},
     hideLineNumbers: false,
     extraLinesSurroundingDiff: 3,
@@ -83,7 +83,7 @@ class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerSt
     newValue: PropTypes.string.isRequired,
     splitView: PropTypes.bool,
     disableWordDiff: PropTypes.bool,
-    jsDiffCompareMethod: PropTypes.oneOf(Object.values(DiffMethod)),
+    compareMethod: PropTypes.oneOf(Object.values(DiffMethod)),
     renderContent: PropTypes.func,
     onLineNumberClick: PropTypes.func,
     extraLinesSurroundingDiff: PropTypes.number,
@@ -425,12 +425,12 @@ class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerSt
    * Generates the entire diff view.
    */
   private renderDiff = (): JSX.Element[] => {
-    const { oldValue, newValue, splitView, disableWordDiff, jsDiffCompareMethod } = this.props;
+    const { oldValue, newValue, splitView, disableWordDiff, compareMethod } = this.props;
     const { lineInformation, diffLines } = computeLineInformation(
       oldValue,
       newValue,
       disableWordDiff,
-      jsDiffCompareMethod,
+      compareMethod,
     );
     const extraLines = this.props.extraLinesSurroundingDiff < 0
       ? 0

test/compute-lines-test.ts

@@ -199,7 +199,7 @@ describe('Testing compute lines utils', (): void => {
       });
   });
 
-  it('Should call "diffChars" jsDiff method when jsDiffCompareMethod is not provided', (): void => {
+  it('Should call "diffChars" jsDiff method when compareMethod is not provided', (): void => {
     const oldCode = `Hello World`;
     const newCode = `My Updated Name
 Also this info`;
@@ -277,7 +277,7 @@ Also this info`;
       });
   });
 
-  it('Should call "diffWords" jsDiff method when a jsDiffCompareMethod IS provided', (): void => {
+  it('Should call "diffWords" jsDiff method when a compareMethod IS provided', (): void => {
     const oldCode = `Hello World`;
     const newCode = `My Updated Name
 Also this info`;