Set up eslint (#197)

* set up eslint

* fix autofixable eslint issues

* set up jsdiff; some test failures

* use diffArrays; one more test passing

* all tests passing!

* allWhitespace

* more efficient whitespace check

* split up utility / diff tests

* add comment

* totally gut difflib

* this is no longer jsdifflib

* difflib -> string-utils

* truly no more difflib

* ESM jest config

* disable eslint for webpack config

* knip ignore

* lint on CI

* bump node version

Author: danvk

.circleci/config.yml

@@ -36,7 +36,7 @@ jobs:
 
   test-js:
     docker:
-      - image: cimg/node:18.8.0
+      - image: cimg/node:20.14
     steps:
       - checkout
       - run: node --version
@@ -54,6 +54,7 @@ jobs:
             yarn run format:check
             yarn run knip
             yarn run tsc --noEmit
+            yarn run lint
 
 workflows:
   main:

ts/AnnotatedImage.tsx

@@ -14,7 +14,7 @@ export function AnnotatedImage(props: Props) {
     return <span>None</span>;
   }
 
-  var im = props.filePair[side === 'a' ? 'image_a' : 'image_b'];
+  const im = props.filePair[side === 'a' ? 'image_a' : 'image_b'];
   return (
     <div className={'image-' + side}>
       <SingleImage {...props} />

ts/CodeDiffContainer.tsx

@@ -3,6 +3,7 @@ import {DiffOptions, encodeDiffOptions} from './diff-options';
 import {CodeDiff, PatchOptions} from './codediff/codediff';
 import {guessLanguageUsingContents, guessLanguageUsingFileName} from './codediff/language';
 import {GitConfig} from './options';
+import {DiffRange} from './codediff/codes';
 
 interface BaseFilePair {
   idx: number;
@@ -11,6 +12,8 @@ interface BaseFilePair {
   /** file name of right side of diff */
   b: string;
   type: 'add' | 'delete' | 'move' | 'change'; // XXX check "change"
+  /** Are there any changes to the file? Only set for "thick" diffs. */
+  no_changes?: boolean;
 }
 
 interface TextFilePair extends BaseFilePair {
@@ -48,7 +51,7 @@ export interface ImageDiffData {
 }
 
 // A "no changes" sign which only appears when applicable.
-export function NoChanges(props: {filePair: any}) {
+export function NoChanges(props: {filePair: FilePair}) {
   const {filePair} = props;
   if (filePair.no_changes) {
     return <div className="no-changes">(File content is identical)</div>;
@@ -80,7 +83,7 @@ export function CodeDiffContainer(props: {filePair: FilePair; diffOptions: Parti
   const {filePair, diffOptions} = props;
   const codediffRef = React.useRef<HTMLDivElement>(null);
   const [contents, setContents] = React.useState<
-    {before: string | null; after: string | null; diffOps: any} | undefined
+    {before: string | null; after: string | null; diffOps: DiffRange[]} | undefined
   >();
 
   React.useEffect(() => {
@@ -137,11 +140,11 @@ interface FileDiffProps {
   pathAfter: string;
   contentsBefore: string | null;
   contentsAfter: string | null;
-  diffOps: any[];
+  diffOps: DiffRange[];
 }
 
 function extractFilename(path: string) {
-  var parts = path.split('/');
+  const parts = path.split('/');
   return parts[parts.length - 1];
 }
 const HIGHLIGHT_BLACKLIST = ['TODO', 'README', 'NOTES'];
@@ -162,7 +165,7 @@ function FileDiff(props: FileDiffProps) {
   const path = pathBefore || pathAfter;
   let language = guessLanguageUsingFileName(path);
 
-  const lengthOrZero = function (data: any[] | string | null | undefined) {
+  const lengthOrZero = function (data: unknown[] | string | null | undefined) {
     return data ? data.length : 0;
   };
   const lastOp = diffOps[diffOps.length - 1];
@@ -173,7 +176,7 @@ function FileDiff(props: FileDiffProps) {
     HIGHLIGHT_BLACKLIST.indexOf(extractFilename(path)) === -1 &&
     numLines < GIT_CONFIG.webdiff.maxLinesForSyntax
   ) {
-    var byLength = [contentsBefore, contentsAfter];
+    let byLength = [contentsBefore, contentsAfter];
     if (contentsAfter && lengthOrZero(contentsAfter) > lengthOrZero(contentsBefore)) {
       byLength = [byLength![1], byLength![0]];
     }

ts/ImageDiff.tsx

@@ -34,7 +34,7 @@ export function ImageDiff(props: Props) {
   };
 
   let mode = props.imageDiffMode;
-  let pair = props.filePair;
+  const pair = props.filePair;
   if (isOneSided(pair)) {
     mode = 'side-by-side'; // Only one that makes sense for one-sided diffs.
   }
@@ -80,15 +80,15 @@ export function ImageDiff(props: Props) {
     'onion-skin': ImageOnionSkin,
     swipe: ImageSwipe,
   }[mode];
-  var image = React.createElement(component, {
+  const image = React.createElement(component, {
     filePair: pair,
     shrinkToFit,
     pdiffMode: props.pdiffMode,
   });
-  var diffBoxEnabled = isSameSizeImagePair(pair);
-  var boxClasses = diffBoxEnabled ? '' : 'diff-box-disabled';
-  var boxStyles = {display: HAS_IMAGE_MAGICK ? '' : 'none'};
-  var imageMagickCallout = !HAS_IMAGE_MAGICK ? (
+  const diffBoxEnabled = isSameSizeImagePair(pair);
+  const boxClasses = diffBoxEnabled ? '' : 'diff-box-disabled';
+  const boxStyles = {display: HAS_IMAGE_MAGICK ? '' : 'none'};
+  const imageMagickCallout = !HAS_IMAGE_MAGICK ? (
     <span className="magick">
       Install <a href="http://www.imagemagick.org/script/binary-releases.php">ImageMagick</a> to see
       perceptual diffs

ts/ImageDiffModeSelector.tsx

@@ -20,8 +20,8 @@ export function ImageDiffModeSelector(props: Props) {
   }
 
   // Returns the text, optionally wrapped in a link and/or <b> tag.
-  var linkOrB = (isLink: boolean, isB: boolean, val: ImageDiffMode, text: string) => {
-    var inner = isB ? <b>{text}</b> : text;
+  const linkOrB = (isLink: boolean, isB: boolean, val: ImageDiffMode, text: string) => {
+    const inner = isB ? <b>{text}</b> : text;
     if (isLink) {
       return (
         <a href="#" onClick={() => props.changeImageDiffModeHandler(val)}>

ts/ImageSideBySide.tsx

@@ -4,7 +4,7 @@ import {ImageDiffProps} from './ImageDiff';
 
 // Two images placed side-by-side.
 export function ImageSideBySide(props: ImageDiffProps) {
-  var maxWidth = props.shrinkToFit ? (window.innerWidth - 30) / 2 : null;
+  const maxWidth = props.shrinkToFit ? (window.innerWidth - 30) / 2 : null;
   return (
     <table id="imagediff">
       <tbody>

ts/ImageSwipe.tsx

@@ -39,7 +39,7 @@ export function ImageSwipe(props: ImageSwipeProps) {
     imB.height *= scaleDown;
     containerWidth = Math.max(imA.width, imB.width);
   }
-  var diffBoxDiv = makePerceptualBoxDiv(props.pdiffMode, pair, scaleDown);
+  const diffBoxDiv = makePerceptualBoxDiv(props.pdiffMode, pair, scaleDown);
   const urlA = '/a/image/' + pair.a;
   const urlB = '/b/image/' + pair.b;
   const styleA: React.CSSProperties = {
@@ -73,12 +73,12 @@ export function ImageSwipe(props: ImageSwipeProps) {
   }
 
   // Add an opaque grid under each image to expose transparency.
-  [styleA, styleB].forEach(function (o) {
-    (o as any)['backgroundImage'] += ', url(/static/img/trans_bg.gif)';
+  for (const o of [styleA, styleB]) {
+    o.backgroundImage += ', url(/static/img/trans_bg.gif)';
     if (_.has(o, 'backgroundSize')) {
-      (o as any)['backgroundSize'] += ', auto auto';
+      o.backgroundSize += ', auto auto';
     }
-  });
+  }
 
   return (
     <div>

ts/__tests__/util.test.ts

@@ -18,7 +18,7 @@ test('util.filePairDisplayName', () => {
   expect(rename('dir/file.json', 'dir/renamed.json')).toEqual('dir/{file → renamed}.json');
   expect(rename('file.json', 'dir/file.json')).toEqual('{ → dir/}file.json');
   expect(rename('/foo/bar/file.json', '/foo/baz/file.json')).toEqual('/foo/{bar → baz}/file.json');
-  expect(rename('/foo/bar/file.json', '/foo/file.json')).toEqual('/foo{/bar → }/file.json');
+  expect(rename('/foo/bar/file.json', '/foo/file.json')).toEqual('/foo/{bar/ → }file.json');
 
   // this one is controversial, maybe better not to factor out anything?
   expect(rename('/foo/bar/file.json', '/fox/bar/file.js')).toEqual(

ts/codediff/__tests__/addcharacterdiffs_test.ts

@@ -21,7 +21,7 @@ function htmlToText(html: string) {
   return div.textContent ?? '';
 }
 
-describe('add character diffs', () => {
+describe('utility code', () => {
   test('simplifyCodes', () => {
     const x = 'replace';
     const y = 'equal';
@@ -69,6 +69,50 @@ describe('add character diffs', () => {
     );
   });
 
+  test('splitIntoWords', () => {
+    expect(splitIntoWords('<ImageDiffModeSelector filePair={filePair}')).toEqual([
+      '<',
+      'Image',
+      'Diff',
+      'Mode',
+      'Selector',
+      ' ',
+      'file',
+      'Pair',
+      '=',
+      '{',
+      'file',
+      'Pair',
+      '}',
+    ]);
+    expect(splitIntoWords('<DiffView filePair={filePair}')).toEqual([
+      '<',
+      'Diff',
+      'View',
+      ' ',
+      'file',
+      'Pair',
+      '=',
+      '{',
+      'file',
+      'Pair',
+      '}',
+    ]);
+    expect(splitIntoWords('Test1TEST23testAbc{}')).toEqual([
+      'Test',
+      '1',
+      'TEST',
+      '23',
+      'test',
+      'Abc',
+      '{',
+      '}',
+    ]);
+    expect(splitIntoWords('   FooBar')).toEqual([' ', ' ', ' ', 'Foo', 'Bar']);
+  });
+});
+
+describe('add character diffs', () => {
   test('char diffs -- simple', () => {
     const beforeText = "    return '' + date.getFullYear();";
     const afterText = "    return 'xx' + date.getFullYear();";
@@ -109,8 +153,9 @@ describe('add character diffs', () => {
   });
 
   test('mixed inserts and markup', () => {
-    var beforeHtml = '<span class="hljs-string">"q"</span>, s';
-    var afterHtml = '<span class="hljs-string">"q"</span><span class="hljs-comment">/*, s*/</span>';
+    const beforeHtml = '<span class="hljs-string">"q"</span>, s';
+    const afterHtml =
+      '<span class="hljs-string">"q"</span><span class="hljs-comment">/*, s*/</span>';
 
     const beforeText = htmlToText(beforeHtml);
     const afterText = htmlToText(afterHtml);
@@ -132,20 +177,20 @@ describe('add character diffs', () => {
     expect(codes).not.toBeNull();
     // 'Declined to generate a diff when one was expected.');
 
-    var beforeCodes = codes[0],
+    const beforeCodes = codes[0],
       afterCodes = codes[1];
 
-    var process = function (codes: CharacterDiff[], txt: string) {
+    const process = function (codes: CharacterDiff[], txt: string) {
       return codes
         .map(function (code) {
-          var part = txt.substring(code[1], code[2]);
+          let part = txt.substring(code[1], code[2]);
           if (code[0] != null) part = '[' + part + ']';
           return part;
         })
         .join('');
     };
 
-    var beforeActual = process(beforeCodes, beforeText),
+    const beforeActual = process(beforeCodes, beforeText),
       afterActual = process(afterCodes, afterText);
 
     expect(beforeActual).toEqual(beforeExpectation);
@@ -162,48 +207,6 @@ describe('add character diffs', () => {
     );
   });
 
-  test('splitIntoWords', () => {
-    expect(splitIntoWords('<ImageDiffModeSelector filePair={filePair}')).toEqual([
-      '<',
-      'Image',
-      'Diff',
-      'Mode',
-      'Selector',
-      ' ',
-      'file',
-      'Pair',
-      '=',
-      '{',
-      'file',
-      'Pair',
-      '}',
-    ]);
-    expect(splitIntoWords('<DiffView filePair={filePair}')).toEqual([
-      '<',
-      'Diff',
-      'View',
-      ' ',
-      'file',
-      'Pair',
-      '=',
-      '{',
-      'file',
-      'Pair',
-      '}',
-    ]);
-    expect(splitIntoWords('Test1TEST23testAbc{}')).toEqual([
-      'Test',
-      '1',
-      'TEST',
-      '23',
-      'test',
-      'Abc',
-      '{',
-      '}',
-    ]);
-    expect(splitIntoWords('   FooBar')).toEqual([' ', ' ', ' ', 'Foo', 'Bar']);
-  });
-
   test('char diffs on word boundaries', () => {
     assertCharDiff(
       '<ImageDiffModeSelector filePair={filePair}',
@@ -243,7 +246,7 @@ describe('add character diffs', () => {
 
     assertCharDiff(
       'import net.sf.samtools._',
-      'import [net.sf].samtools._',
+      'import [net].[sf.]samtools._',
       'import htsjdk.samtools._',
       'import [htsjdk].samtools._',
     );
@@ -262,7 +265,7 @@ describe('add character diffs', () => {
       '       <div className="examine-page">',
       '       <div className="examine-page">',
       '        <div className="examine-page">',
-      '[ ]       <div className="examine-page">',
+      '       [ ]<div className="examine-page">',
     );
 
     assertCharDiff('foobar', 'foobar', '  foobar', '[  ]foobar');

ts/codediff/__tests__/diffranges_test.ts

@@ -1,9 +1,8 @@
-import {addSkips} from '../codes';
-import {OpCode} from '../difflib';
+import {addSkips, OpCode} from '../codes';
 
 test('generates same diff ranges as jsdifflib', () => {
   // These are the opcodes for test.html
-  var opcodes: OpCode[] = [
+  const opcodes: OpCode[] = [
     ['equal', 0, 9, 0, 9],
     ['replace', 9, 11, 9, 11],
     ['equal', 11, 14, 11, 14],
@@ -17,7 +16,7 @@ test('generates same diff ranges as jsdifflib', () => {
     ['equal', 32, 43, 30, 41],
   ];
 
-  var ranges = addSkips(opcodes, 3, 0);
+  let ranges = addSkips(opcodes, 3, 0);
   expect(ranges).toEqual([
     {type: 'skip', before: [0, 6], after: [0, 6]},
     {type: 'equal', before: [6, 9], after: [6, 9]},
@@ -36,7 +35,7 @@ test('generates same diff ranges as jsdifflib', () => {
     {type: 'skip', before: [35, 43], after: [33, 41]},
   ]);
 
-  var ranges = addSkips(opcodes, 3, 5); // minJumpSize = 5
+  ranges = addSkips(opcodes, 3, 5); // minJumpSize = 5
   expect(ranges).toEqual([
     {type: 'skip', before: [0, 6], after: [0, 6]},
     {type: 'equal', before: [6, 9], after: [6, 9]},
@@ -53,7 +52,7 @@ test('generates same diff ranges as jsdifflib', () => {
     {type: 'skip', before: [35, 43], after: [33, 41]},
   ]);
 
-  var ranges = addSkips(opcodes, 3, 10); // minJumpSize = 10
+  ranges = addSkips(opcodes, 3, 10); // minJumpSize = 10
   expect(ranges).toEqual([
     {type: 'equal', before: [0, 9], after: [0, 9]}, // was skip
     {type: 'replace', before: [9, 11], after: [9, 11]},