Set up typescript-eslint (#198)

* eslint-plugin-react-hooks

* fix most strict/stylistic errors

* enable type-checked linting; 86 problems

* number in template literal is A-OK (70)

* down to 7 lint errors

* object-shorthand

* down to 6

* 5 eslint errors; just before/after undefined issue

* no errors!

* target es2019 for webpack

* delete extra package files

Author: danvk

ts/CodeDiffContainer.tsx

@@ -94,9 +94,9 @@ export function CodeDiffContainer(props: {filePair: FilePair; diffOptions: Parti
           Accept: 'application/json',
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify({options: encodeDiffOptions(diffOptions ?? {})}),
+        body: JSON.stringify({options: encodeDiffOptions(diffOptions)}),
       });
-      return response.json();
+      return response.json() as Promise<DiffRange[]>;
     };
 
     const {a, b} = filePair;
@@ -109,7 +109,7 @@ export function CodeDiffContainer(props: {filePair: FilePair; diffOptions: Parti
         getDiff(),
       ]);
       setContents({before, after, diffOps});
-    })().catch(e => {
+    })().catch((e: unknown) => {
       alert('Unable to get diff!');
       console.error(e);
     });
@@ -150,6 +150,10 @@ function extractFilename(path: string) {
 const HIGHLIGHT_BLACKLIST = ['TODO', 'README', 'NOTES'];
 declare const GIT_CONFIG: GitConfig;
 
+function lengthOrZero(data: unknown[] | string | null | undefined) {
+  return data?.length ?? 0;
+}
+
 function FileDiff(props: FileDiffProps) {
   const {pathBefore, pathAfter, contentsBefore, contentsAfter, diffOps} = props;
   // build the diff view and add it to the current DOM
@@ -165,35 +169,27 @@ function FileDiff(props: FileDiffProps) {
   const path = pathBefore || pathAfter;
   let language = guessLanguageUsingFileName(path);
 
-  const lengthOrZero = function (data: unknown[] | string | null | undefined) {
-    return data ? data.length : 0;
-  };
   const lastOp = diffOps[diffOps.length - 1];
   const numLines = Math.max(lastOp.before[1], lastOp.after[1]);
 
   if (
     !language &&
-    HIGHLIGHT_BLACKLIST.indexOf(extractFilename(path)) === -1 &&
+    !HIGHLIGHT_BLACKLIST.includes(extractFilename(path)) &&
     numLines < GIT_CONFIG.webdiff.maxLinesForSyntax
   ) {
     let byLength = [contentsBefore, contentsAfter];
     if (contentsAfter && lengthOrZero(contentsAfter) > lengthOrZero(contentsBefore)) {
-      byLength = [byLength![1], byLength![0]];
+      byLength = [byLength[1], byLength[0]];
     }
-    language = guessLanguageUsingContents(byLength[0]!) ?? null;
+    language = byLength[0] ? guessLanguageUsingContents(byLength[0]) ?? null : null;
   }
   if (language) {
     opts.language = language;
   }
 
   return (
     <div className="diff">
-      <CodeDiff
-        beforeText={contentsBefore!}
-        afterText={contentsAfter!}
-        ops={diffOps}
-        params={opts}
-      />
+      <CodeDiff beforeText={contentsBefore} afterText={contentsAfter} ops={diffOps} params={opts} />
     </div>
   );
 }

ts/DiffOptions.tsx

@@ -57,7 +57,9 @@ export function DiffOptionsControl(props: Props) {
   const {options, setOptions} = props;
   const [isPopupVisible, setIsPopupVisible] = React.useState(false);
 
-  const togglePopup = () => setIsPopupVisible(oldVal => !oldVal);
+  const togglePopup = () => {
+    setIsPopupVisible(oldVal => !oldVal);
+  };
   const toggleIgnoreAllSpace = () => {
     setOptions({...options, ignoreAllSpace: !options.ignoreAllSpace});
   };

ts/DiffView.tsx

@@ -28,7 +28,9 @@ export function DiffView(props: Props) {
         ...newFilePair,
         idx: thinFilePair.idx,
       });
-    })();
+    })().catch((e: unknown) => {
+      console.error(e);
+    });
   }, [thinFilePair, setFilePair]);
 
   if (!filePair) {

ts/FileDropdown.tsx

@@ -17,7 +17,11 @@ export function FileDropdown(props: Props) {
       return <i>none</i>;
     } else {
       return (
-        <a href="#" onClick={() => fileChangeHandler(idx)}>
+        <a
+          href="#"
+          onClick={() => {
+            fileChangeHandler(idx);
+          }}>
           {filePairDisplayName(filePairs[idx])}
         </a>
       );
@@ -37,7 +41,11 @@ export function FileDropdown(props: Props) {
     <div className="file-dropdown">
       Prev (k): {prevLink}
       <br />
-      <select value={selectedIndex} onChange={e => fileChangeHandler(Number(e.target.value))}>
+      <select
+        value={selectedIndex}
+        onChange={e => {
+          fileChangeHandler(Number(e.target.value));
+        }}>
         {options}
       </select>
       <br />

ts/FileList.tsx

@@ -19,7 +19,11 @@ export function FileList(props: Props) {
     const displayName = filePairDisplayName(filePair);
     const content =
       idx !== selectedIndex ? (
-        <a onClick={() => fileChangeHandler(idx)} href="#">
+        <a
+          onClick={() => {
+            fileChangeHandler(idx);
+          }}
+          href="#">
           {displayName}
         </a>
       ) : (

ts/ImageBlinker.tsx

@@ -42,8 +42,12 @@ export function ImageBlinker(props: ImageDiffProps) {
 
   React.useEffect(() => {
     if (autoBlink) {
-      const interval = setInterval(() => setIdx(idx => 1 - idx), 500 /* ms */);
-      return () => clearInterval(interval);
+      const interval = setInterval(() => {
+        setIdx(idx => 1 - idx);
+      }, 500 /* ms */);
+      return () => {
+        clearInterval(interval);
+      };
     }
   }, [autoBlink, setIdx]);
 

ts/ImageDiff.tsx

@@ -33,10 +33,11 @@ export function ImageDiff(props: Props) {
     setShrinkToFit(e.target.checked);
   };
 
-  let mode = props.imageDiffMode;
+  const {changePDiffMode, pdiffMode} = props;
+  let {imageDiffMode} = props;
   const pair = props.filePair;
   if (isOneSided(pair)) {
-    mode = 'side-by-side'; // Only one that makes sense for one-sided diffs.
+    imageDiffMode = 'side-by-side'; // Only one that makes sense for one-sided diffs.
   }
 
   const [, forceUpdate] = React.useState(0);
@@ -49,17 +50,17 @@ export function ImageDiff(props: Props) {
       const {diffData} = fp;
       // XXX are there other fields?
       fp.diffData = {
-        ...(diffData || {}),
+        ...diffData,
         diffBounds: bbox,
       };
       console.log('forcing update');
       forceUpdate(n => n + 1); // tell react about this change
-    })().catch(error => {
+    })().catch((error: unknown) => {
       console.error(error);
     });
   };
 
-  if (props.pdiffMode === 'bbox' && !pair.diffData) {
+  if (pdiffMode === 'bbox' && !pair.diffData) {
     // XXX this might shoot off unnecessary XHRs--use a Promise!
     computePerceptualDiffBox(pair);
   }
@@ -79,11 +80,11 @@ export function ImageDiff(props: Props) {
     blink: ImageBlinker,
     'onion-skin': ImageOnionSkin,
     swipe: ImageSwipe,
-  }[mode];
+  }[imageDiffMode];
   const image = React.createElement(component, {
     filePair: pair,
     shrinkToFit,
-    pdiffMode: props.pdiffMode,
+    pdiffMode,
   });
   const diffBoxEnabled = isSameSizeImagePair(pair);
   const boxClasses = diffBoxEnabled ? '' : 'diff-box-disabled';
@@ -114,36 +115,42 @@ export function ImageDiff(props: Props) {
               type="radio"
               name="pdiff-mode"
               id="pdiff-off"
-              checked={props.pdiffMode === 'off'}
+              checked={pdiffMode === 'off'}
               disabled={!diffBoxEnabled}
-              onChange={() => props.changePDiffMode('off')}
+              onChange={() => {
+                changePDiffMode('off');
+              }}
             />
             <label htmlFor="pdiff-off"> None</label>
             &nbsp;
             <input
               type="radio"
               name="pdiff-mode"
               id="pdiff-bbox"
-              checked={props.pdiffMode === 'bbox'}
+              checked={pdiffMode === 'bbox'}
               disabled={!diffBoxEnabled}
-              onChange={() => props.changePDiffMode('bbox')}
+              onChange={() => {
+                changePDiffMode('bbox');
+              }}
             />
             <label htmlFor="pdiff-bbox"> Box</label>
             &nbsp;
             <input
               type="radio"
               name="pdiff-mode"
               id="pdiff-pixels"
-              checked={props.pdiffMode === 'pixels'}
+              checked={pdiffMode === 'pixels'}
               disabled={!diffBoxEnabled}
-              onChange={() => props.changePDiffMode('pixels')}
+              onChange={() => {
+                changePDiffMode('pixels');
+              }}
             />
             <label htmlFor="pdiff-pixels"> Differing Pixels</label>
           </span>
           {imageMagickCallout}
         </span>
       </div>
-      <div className={'image-diff ' + mode}>
+      <div className={'image-diff ' + imageDiffMode}>
         <NoChanges filePair={props.filePair} />
         {image}
       </div>

ts/ImageDiffModeSelector.tsx

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

ts/ImageSwipe.tsx

@@ -16,11 +16,13 @@ export function ImageOnionSkin(props: ImageDiffProps) {
 // Two images on top of one another with a slider to move the divider from left
 // to right.
 export function ImageSwipe(props: ImageSwipeProps) {
-  const mode = props.mode || 'swipe';
+  const mode = props.mode ?? 'swipe';
   const [rangePosition, setRangePosition] = React.useState<number | null>(null);
   const sliderRef = React.createRef<HTMLInputElement>();
   const onSlide = () => {
-    setRangePosition(Number(sliderRef.current!.value));
+    if (sliderRef.current) {
+      setRangePosition(Number(sliderRef.current.value));
+    }
   };
 
   const pair = props.filePair;
@@ -40,33 +42,34 @@ export function ImageSwipe(props: ImageSwipeProps) {
     containerWidth = Math.max(imA.width, imB.width);
   }
   const diffBoxDiv = makePerceptualBoxDiv(props.pdiffMode, pair, scaleDown);
-  const urlA = '/a/image/' + pair.a;
-  const urlB = '/b/image/' + pair.b;
-  const styleA: React.CSSProperties = {
-    backgroundImage: 'url(' + urlA + ')',
-    backgroundSize: imA.width + 'px ' + imA.height + 'px',
-    width: imA.width + 'px',
-    height: imA.height + 'px',
+  const urlA = `/a/image/${pair.a}`;
+  const urlB = `/b/image/${pair.b}`;
+  const styleA: React.CSSProperties & {backgroundSize: string; backgroundImage: string} = {
+    backgroundImage: `url(${urlA})`,
+    backgroundSize: `${imA.width}px ${imA.height}px`,
+    width: `${imA.width}px`,
+    height: `${imA.height}px`,
   };
-  const styleB: React.CSSProperties = {
-    backgroundImage: 'url(' + urlB + ')',
-    backgroundSize: imB.width + 'px ' + imB.height + 'px',
-    width: imB.width + 'px',
-    height: imB.height + 'px',
+  const styleB: React.CSSProperties & {backgroundSize: string; backgroundImage: string} = {
+    backgroundImage: `url(${urlB})`,
+    backgroundSize: `${imB.width}px ${imB.height}px`,
+    width: `${imB.width}px`,
+    height: `${imB.height}px`,
   };
   const styleContainer: React.CSSProperties = {
-    width: containerWidth + 'px',
-    height: Math.max(imA.height, imB.height) + 'px',
+    width: containerWidth,
+    height: Math.max(imA.height, imB.height),
   };
   if (mode === 'swipe') {
     _.extend(styleA, {
-      width: Math.floor(frac * imA.width) + 'px',
+      width: Math.floor(frac * imA.width),
     });
+    const bgTop = -Math.floor(frac * imB.width);
     _.extend(styleB, {
-      left: Math.floor(frac * imB.width) + 'px',
+      left: Math.floor(frac * imB.width),
       width: null,
-      right: containerWidth - imB.width + 'px',
-      backgroundPosition: -Math.floor(frac * imB.width) + 'px top',
+      right: containerWidth - imB.width,
+      backgroundPosition: `${bgTop} px top`,
     });
   } else {
     _.extend(styleB, {opacity: frac});

ts/Root.tsx

@@ -23,9 +23,12 @@ export function Root(props: Props) {
   const [diffOptions, setDiffOptions] = React.useState<Partial<DiffOptions>>({});
 
   const history = useHistory();
-  const selectIndex = (idx: number) => {
-    history.push(`/${idx}`);
-  };
+  const selectIndex = React.useCallback(
+    (idx: number) => {
+      history.push(`/${idx}`);
+    },
+    [history],
+  );
 
   const idx = Number(props.match.params.index ?? initialIdx);
   const filePair = pairs[idx];
@@ -57,14 +60,14 @@ export function Root(props: Props) {
     return () => {
       document.removeEventListener('keydown', handleKeydown);
     };
-  }, [idx, pairs, selectIndex, setImageDiffMode, setPDiffMode]);
+  }, [idx, pdiffMode, selectIndex, setImageDiffMode, setPDiffMode]);
 
   return (
     <div>
       <DiffOptionsControl options={diffOptions} setOptions={setDiffOptions} />
       <FileSelector selectedFileIndex={idx} filePairs={pairs} fileChangeHandler={selectIndex} />
       <DiffView
-        key={'diff-' + idx}
+        key={`diff-${idx}`}
         thinFilePair={filePair}
         imageDiffMode={imageDiffMode}
         pdiffMode={pdiffMode}