fix: correct diff line numbering

Aeolun · Jul 7, 2022 · bab9977 · bab9977
1 parent 3e8b5fa
commit bab9977
Show file tree

Hide file tree

Showing 9 changed files with 97 additions and 56 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -15,7 +15,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: "lts/*"
+          node-version: 'lts/*'
       - uses: pnpm/action-setup@v2.2.2
         with:
           version: latest

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -15,7 +15,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: "lts/*"
+          node-version: 'lts/*'
       - uses: pnpm/action-setup@v2.2.2
         with:
           version: latest

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,5 @@
 # [3.2.0](https://github.com/aeolun/react-diff-viewer-continued/compare/v3.1.1...v3.2.0) (2022-07-07)
 
-
 ### Features
 
-* update library for react 17, and add custom gutters ([7193350](https://github.com/aeolun/react-diff-viewer-continued/commit/7193350187ed5b13989e6d5e5ade40f3a45c943b))
+- update library for react 17, and add custom gutters ([7193350](https://github.com/aeolun/react-diff-viewer-continued/commit/7193350187ed5b13989e6d5e5ade40f3a45c943b))
diff --git a/README.md b/README.md
@@ -60,7 +60,7 @@ class Diff extends PureComponent {
 ## Props
 
 | Prop                      | Type                      | Default                        | Description                                                                                                                                                                                                                                                                                                                                                                                                      |
-|---------------------------|---------------------------|--------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| ------------------------- | ------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | oldValue                  | `string`                  | `''`                           | Old value as string.                                                                                                                                                                                                                                                                                                                                                                                             |
 | newValue                  | `string`                  | `''`                           | New value as string.                                                                                                                                                                                                                                                                                                                                                                                             |
 | splitView                 | `boolean`                 | `true`                         | Switch between `unified` and `split` view.                                                                                                                                                                                                                                                                                                                                                                       |

diff --git a/examples/src/index.tsx b/examples/src/index.tsx
@@ -8,7 +8,7 @@ const oldJs = require('./diff/javascript/old.rjs').default;
 const newJs = require('./diff/javascript/new.rjs').default;
 
 import logo from '../../logo.png';
-import cn from "classnames"
+import cn from 'classnames';
 
 interface ExampleState {
   splitView?: boolean;
@@ -149,8 +149,7 @@ class Example extends React.Component<{}, ExampleState> {
                   checked={this.state.customGutter}
                   onChange={() => {
                     this.setState({
-                      customGutter:
-                        !this.state.customGutter,
+                      customGutter: !this.state.customGutter,
                     });
                   }}
                 />
@@ -167,15 +166,36 @@ class Example extends React.Component<{}, ExampleState> {
             oldValue={oldJs}
             splitView={this.state.splitView}
             newValue={newJs}
-            renderGutter={this.state.customGutter ? (diffData) => {
-              return (
-                <td className={diffData.type !== undefined ? cn(diffData.styles.gutter) : cn(diffData.styles.gutter, diffData.styles.emptyGutter, {})} title={"extra info"}>
-                  <pre className={cn(diffData.styles.lineNumber, {})}>
-                    {diffData.type == 2 ? 'DEL' : diffData.type == 1 ? "ADD" : diffData.type ? "===" : undefined}
-                  </pre>
-                </td>
-              )
-            } : undefined}
+            renderGutter={
+              this.state.customGutter
+                ? (diffData) => {
+                    return (
+                      <td
+                        className={
+                          diffData.type !== undefined
+                            ? cn(diffData.styles.gutter)
+                            : cn(
+                                diffData.styles.gutter,
+                                diffData.styles.emptyGutter,
+                                {},
+                              )
+                        }
+                        title={'extra info'}
+                      >
+                        <pre className={cn(diffData.styles.lineNumber, {})}>
+                          {diffData.type == 2
+                            ? 'DEL'
+                            : diffData.type == 1
+                            ? 'ADD'
+                            : diffData.type
+                            ? '==='
+                            : undefined}
+                        </pre>
+                      </td>
+                    );
+                  }
+                : undefined
+            }
             renderContent={
               this.state.enableSyntaxHighlighting
                 ? this.syntaxHighlight

diff --git a/release.config.js b/release.config.js
@@ -1,17 +1,24 @@
 module.exports = {
-  branches: ["master"],
+  branches: ['master'],
   plugins: [
-    "@semantic-release/commit-analyzer",
-    "@semantic-release/release-notes-generator",
-    "@semantic-release/npm",
-    "@semantic-release/changelog",
-    "@semantic-release/github",
+    '@semantic-release/commit-analyzer',
+    '@semantic-release/release-notes-generator',
+    '@semantic-release/npm',
+    '@semantic-release/changelog',
+    '@semantic-release/github',
     [
-      "@semantic-release/git",
+      '@semantic-release/git',
       {
-        message: "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}",
-        assets: ["CHANGELOG.md", "package.json", "package-lock.json", "pnpm-lock.yaml", "npm-shrinkwrap.json"],
+        message:
+          'chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}',
+        assets: [
+          'CHANGELOG.md',
+          'package.json',
+          'package-lock.json',
+          'pnpm-lock.yaml',
+          'npm-shrinkwrap.json',
+        ],
       },
     ],
   ],
-}
+};
diff --git a/src/compute-lines.ts b/src/compute-lines.ts
@@ -163,9 +163,7 @@ const computeLineInformation = (
           return undefined;
         }
         if (added || removed) {
-          if (!diffLines.includes(counter)) {
-            diffLines.push(counter);
-          }
+          let countAsChange = true
           if (removed) {
             leftLineNumber += 1;
             left.lineNumber = leftLineNumber;
@@ -186,6 +184,7 @@ const computeLineInformation = (
                   false,
                   true,
                 );
+
                 const {
                   value: rightValue,
                   lineNumber,
@@ -196,20 +195,29 @@ const computeLineInformation = (
                 // list as the next value will be added in this line computation as
                 // right and left values.
                 ignoreDiffIndexes.push(`${diffIndex + 1}-${lineIndex}`);
+
                 right.lineNumber = lineNumber;
-                right.type = type;
-                // Do word level diff and assign the corresponding values to the
-                // left and right diff information object.
-                if (disableWordDiff) {
+                if (left.value === rightValue) {
+                  // The new value is exactly the same as the old
+                  countAsChange = false
+                  right.type = 0;
+                  left.type = 0;
                   right.value = rightValue;
                 } else {
-                  const computedDiff = computeDiff(
-                    line,
-                    rightValue as string,
-                    compareMethod,
-                  );
-                  right.value = computedDiff.right;
-                  left.value = computedDiff.left;
+                  right.type = type;
+                  // Do word 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,
+                    );
+                    right.value = computedDiff.right;
+                    left.value = computedDiff.left;
+                  }
                 }
               }
             }
@@ -219,6 +227,11 @@ const computeLineInformation = (
             right.type = DiffType.ADDED;
             right.value = line;
           }
+          if (countAsChange && !evaluateOnlyFirstLine) {
+            if (!diffLines.includes(counter)) {
+              diffLines.push(counter);
+            }
+          }
         } else {
           leftLineNumber += 1;
           rightLineNumber += 1;
@@ -231,7 +244,9 @@ const computeLineInformation = (
           right.value = line;
         }
 
-        counter += 1;
+        if (!evaluateOnlyFirstLine) {
+          counter += 1;
+        }
         return { right, left };
       })
       .filter(Boolean);

diff --git a/src/index.tsx b/src/index.tsx
@@ -278,14 +278,14 @@ class DiffViewer extends React.Component<
         )}
         {this.props.renderGutter
           ? this.props.renderGutter({
-            lineNumber,
-            type,
-            prefix,
-            value,
-            additionalLineNumber,
-            additionalPrefix,
-            styles: this.styles,
-          })
+              lineNumber,
+              type,
+              prefix,
+              value,
+              additionalLineNumber,
+              additionalPrefix,
+              styles: this.styles,
+            })
           : null}
         <td
           className={cn(this.styles.marker, {

diff --git a/test/compute-lines.test.ts b/test/compute-lines.test.ts
@@ -2,7 +2,7 @@ import expect from 'expect';
 import { computeLineInformation, DiffMethod } from '../src/compute-lines';
 
 describe('Testing compute lines utils', (): void => {
-  it('Should it avoid trailing spaces', (): void => {
+  it('It should avoid trailing spaces', (): void => {
     const oldCode = `test
 
 
@@ -35,7 +35,7 @@ describe('Testing compute lines utils', (): void => {
     const newCode = `test
     newLine`;
 
-    expect(computeLineInformation(oldCode, newCode)).toMatchObject({
+    expect(computeLineInformation(oldCode, newCode, true)).toMatchObject({
       lineInformation: [
         {
           right: {
@@ -264,7 +264,7 @@ Also this info`;
           left: {},
         },
       ],
-      diffLines: [0, 2],
+      diffLines: [0, 1],
     });
   });
 
@@ -324,7 +324,7 @@ Also this info`;
           left: {},
         },
       ],
-      diffLines: [0, 2],
+      diffLines: [0, 1],
     });
   });
 
@@ -356,7 +356,7 @@ Also this info`;
           left: {},
         },
       ],
-      diffLines: [0, 2],
+      diffLines: [0, 1],
     });
   });
 
@@ -390,7 +390,7 @@ Also this info`;
           left: {},
         },
       ],
-      diffLines: [0, 2],
+      diffLines: [0, 1],
     });
   });
 });