refactor: Extract matching algorithm in line-by-line diff

src/line-by-line-renderer.ts

@@ -87,7 +87,7 @@ export default class LineByLineRenderer {
 
     return file.blocks
       .map(block => {
-        let lines = this.hoganUtils.render(genericTemplatesPath, "column-line-number", {
+        let lines = this.hoganUtils.render(genericTemplatesPath, "block-header", {
           CSSLineClass: renderUtils.CSSLineClass,
           blockHeader: block.header,
           lineClass: "d2h-code-linenumber",
@@ -96,33 +96,70 @@ export default class LineByLineRenderer {
         let oldLines: DiffLine[] = [];
         let newLines: DiffLine[] = [];
 
-        const processChangeBlock = (): void => {
+        for (let i = 0; i < block.lines.length; i++) {
-          let matches;
+          const diffLine = block.lines[i];
-          let insertType: renderUtils.CSSLineClass;
+          const { prefix, content } = renderUtils.deconstructLine(diffLine.content, file.isCombined);
-          let deleteType: renderUtils.CSSLineClass;
 
+          if (
+            diffLine.type !== LineType.INSERT &&
+            (newLines.length > 0 || (diffLine.type !== LineType.DELETE && oldLines.length > 0))
+          ) {
+            lines += this.processChangeBlock(file, oldLines, newLines, matcher);
+            oldLines = [];
+            newLines = [];
+          }
+
+          if (diffLine.type === LineType.CONTEXT || (diffLine.type === LineType.INSERT && !oldLines.length)) {
+            lines += this.makeLineHtml(
+              file.isCombined,
+              renderUtils.toCSSClass(diffLine.type),
+              content,
+              diffLine.oldNumber,
+              diffLine.newNumber,
+              prefix
+            );
+          } else if (diffLine.type === LineType.DELETE) {
+            oldLines.push(diffLine);
+          } else if (diffLine.type === LineType.INSERT && Boolean(oldLines.length)) {
+            newLines.push(diffLine);
+          } else {
+            console.error("Unknown state in html line-by-line generator");
+            lines += this.processChangeBlock(file, oldLines, newLines, matcher);
+            oldLines = [];
+            newLines = [];
+          }
+        }
+
+        lines += this.processChangeBlock(file, oldLines, newLines, matcher);
+        oldLines = [];
+        newLines = [];
+
+        return lines;
+      })
+      .join("\n");
+  }
+
+  processChangeBlock(
+    file: DiffFile,
+    oldLines: DiffLine[],
+    newLines: DiffLine[],
+    matcher: Rematch.MatcherFn<DiffLine>
+  ): string {
     const comparisons = oldLines.length * newLines.length;
-
     const maxLineSizeInBlock = Math.max.apply(
       null,
       [0].concat(oldLines.concat(newLines).map(elem => elem.content.length))
     );
-
     const doMatching =
       comparisons < this.config.matchingMaxComparisons &&
       maxLineSizeInBlock < this.config.maxLineSizeInBlockForComparison &&
       (this.config.matching === "lines" || this.config.matching === "words");
 
-          if (doMatching) {
+    const [matches, insertType, deleteType] = doMatching
-            matches = matcher(oldLines, newLines);
+      ? [matcher(oldLines, newLines), renderUtils.CSSLineClass.INSERT_CHANGES, renderUtils.CSSLineClass.DELETE_CHANGES]
-            insertType = renderUtils.CSSLineClass.INSERT_CHANGES;
+      : [[[oldLines, newLines]], renderUtils.CSSLineClass.INSERTS, renderUtils.CSSLineClass.DELETES];
-            deleteType = renderUtils.CSSLineClass.DELETE_CHANGES;
-          } else {
-            matches = [[oldLines, newLines]];
-            insertType = renderUtils.CSSLineClass.INSERTS;
-            deleteType = renderUtils.CSSLineClass.DELETES;
-          }
 
+    let lines = "";
     matches.forEach(match => {
       oldLines = match[0];
       newLines = match[1];
@@ -161,54 +198,7 @@ export default class LineByLineRenderer {
       lines += this.processLines(file.isCombined, oldLines.slice(common), newLines.slice(common));
     });
 
-          oldLines = [];
-          newLines = [];
-        };
-
-        for (let i = 0; i < block.lines.length; i++) {
-          const diffLine = block.lines[i];
-          const { prefix, content } = renderUtils.deconstructLine(diffLine.content, file.isCombined);
-
-          if (
-            diffLine.type !== LineType.INSERT &&
-            (newLines.length > 0 || (diffLine.type !== LineType.DELETE && oldLines.length > 0))
-          ) {
-            processChangeBlock();
-          }
-
-          if (diffLine.type === LineType.CONTEXT) {
-            lines += this.makeLineHtml(
-              file.isCombined,
-              renderUtils.toCSSClass(diffLine.type),
-              content,
-              diffLine.oldNumber,
-              diffLine.newNumber,
-              prefix
-            );
-          } else if (diffLine.type === LineType.INSERT && !oldLines.length) {
-            lines += this.makeLineHtml(
-              file.isCombined,
-              renderUtils.toCSSClass(diffLine.type),
-              content,
-              diffLine.oldNumber,
-              diffLine.newNumber,
-              prefix
-            );
-          } else if (diffLine.type === LineType.DELETE) {
-            oldLines.push(diffLine);
-          } else if (diffLine.type === LineType.INSERT && Boolean(oldLines.length)) {
-            newLines.push(diffLine);
-          } else {
-            console.error("Unknown state in html line-by-line generator");
-            processChangeBlock();
-          }
-        }
-
-        processChangeBlock();
-
     return lines;
-      })
-      .join("\n");
   }
 
   // TODO: Make this private after improving tests

src/side-by-side-renderer.ts

@@ -223,7 +223,7 @@ export default class SideBySideRenderer {
 
   // TODO: Make this private after improving tests
   makeSideHtml(blockHeader: string): string {
-    return this.hoganUtils.render(genericTemplatesPath, "column-line-number", {
+    return this.hoganUtils.render(genericTemplatesPath, "block-header", {
       CSSLineClass: renderUtils.CSSLineClass,
       blockHeader: blockHeader,
       lineClass: "d2h-code-side-linenumber",