Merge pull request #62 from GoogleChromeLabs/linting

Switch to tslint and run it as commit hook

package.json

@@ -8,28 +8,14 @@
     "build:codecs": "npm run build:mozjpeg_enc",
     "start": "webpack serve --host 0.0.0.0 --hot",
     "build": "webpack -p",
-    "lint": "eslint src"
+    "lint": "tslint -c tslint.json -t verbose 'src/**/*.{ts,js}'",
+    "lintfix": "tslint -c tslint.json -t verbose --fix 'src/**/*.{ts,js}'"
   },
-  "eslintConfig": {
+  "husky": {
-    "extends": [
+    "hooks": {
-      "standard",
+      "pre-commit": "npm run lint"
-      "standard-jsx"
-    ],
-    "rules": {
-      "indent": [
-        2,
-        2
-      ],
-      "semi": [
-        2,
-        "always"
-      ],
-      "prefer-const": 1
     }
   },
-  "eslintIgnore": [
-    "build/*"
-  ],
   "devDependencies": {
     "@types/node": "^9.4.7",
     "@types/webassembly-js-api": "0.0.1",
@@ -47,17 +33,10 @@
     "clean-webpack-plugin": "^0.1.19",
     "copy-webpack-plugin": "^4.5.1",
     "css-loader": "^0.28.11",
-    "eslint": "^4.18.2",
-    "eslint-config-standard": "^11.0.0",
-    "eslint-config-standard-jsx": "^5.0.0",
-    "eslint-plugin-import": "^2.10.0",
-    "eslint-plugin-node": "^6.0.1",
-    "eslint-plugin-promise": "^3.7.0",
-    "eslint-plugin-react": "^7.7.0",
-    "eslint-plugin-standard": "^3.0.1",
     "exports-loader": "^0.7.0",
     "file-loader": "^1.1.11",
     "html-webpack-plugin": "^3.0.6",
+    "husky": "^1.0.0-rc.9",
     "if-env": "^1.0.4",
     "loader-utils": "^1.1.0",
     "mini-css-extract-plugin": "^0.3.0",
@@ -70,7 +49,8 @@
     "source-map-loader": "^0.2.3",
     "style-loader": "^0.20.3",
     "ts-loader": "^4.0.1",
-    "tslint": "^5.9.1",
+    "tslint": "^5.10.0",
+    "tslint-config-airbnb": "^5.9.2",
     "tslint-config-semistandard": "^7.0.0",
     "tslint-react": "^3.5.1",
     "typescript": "^2.7.2",

src/components/output/custom-els/PinchZoom/index.ts

@@ -24,17 +24,17 @@ interface SetTransformOpts {
   allowChangeEvent?: boolean;
 }
 
-function getDistance (a: Point, b?: Point): number {
+function getDistance(a: Point, b?: Point): number {
   if (!b) return 0;
   return Math.sqrt((b.clientX - a.clientX) ** 2 + (b.clientY - a.clientY) ** 2);
 }
 
-function getMidpoint (a: Point, b?: Point): Point {
+function getMidpoint(a: Point, b?: Point): Point {
   if (!b) return a;
 
   return {
     clientX: (a.clientX + b.clientX) / 2,
-    clientY: (a.clientY + b.clientY) / 2
+    clientY: (a.clientY + b.clientY) / 2,
   };
 }
 
@@ -42,15 +42,15 @@ function getMidpoint (a: Point, b?: Point): Point {
 // Given that, better to use something everything supports.
 let cachedSvg: SVGSVGElement;
 
-function getSVG (): SVGSVGElement {
+function getSVG(): SVGSVGElement {
   return cachedSvg || (cachedSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'));
 }
 
-function createMatrix (): SVGMatrix {
+function createMatrix(): SVGMatrix {
   return getSVG().createSVGMatrix();
 }
 
-function createPoint (): SVGPoint {
+function createPoint(): SVGPoint {
   return getSVG().createSVGPoint();
 }
 
@@ -79,9 +79,9 @@ export default class PinchZoom extends HTMLElement {
         event.preventDefault();
         return true;
       },
-      move: previousPointers => {
+      move: (previousPointers) => {
         this._onPointerMove(previousPointers, pointerTracker.currentPointers);
-      }
+      },
     });
 
     this.addEventListener('wheel', event => this._onWheel(event));
@@ -109,12 +109,12 @@ export default class PinchZoom extends HTMLElement {
   setTransform (opts: SetTransformOpts = {}) {
     const {
       scale = this.scale,
-      allowChangeEvent = false
+      allowChangeEvent = false,
     } = opts;
 
     let {
       x = this.x,
-      y = this.y
+      y = this.y,
     } = opts;
 
     // If we don't have an element to position, just set the value as given.
@@ -144,7 +144,7 @@ export default class PinchZoom extends HTMLElement {
     bottomRight.y = positioningElBounds.height + topLeft.y;
 
     // Calculate the intended position of _positioningEl.
-    let matrix = createMatrix()
+    const matrix = createMatrix()
       .translate(x, y)
       .scale(scale)
       // Undo current transform
@@ -239,7 +239,7 @@ export default class PinchZoom extends HTMLElement {
     this._applyChange({
       scaleDiff,
       originX: event.clientX - thisRect.left,
-      originY: event.clientY - thisRect.top
+      originY: event.clientY - thisRect.top,
     });
   }
 
@@ -263,7 +263,7 @@ export default class PinchZoom extends HTMLElement {
     this._applyChange({
       originX, originY, scaleDiff,
       panX: newMidpoint.clientX - prevMidpoint.clientX,
-      panY: newMidpoint.clientY - prevMidpoint.clientY
+      panY: newMidpoint.clientY - prevMidpoint.clientY,
     });
   }
 
@@ -272,7 +272,7 @@ export default class PinchZoom extends HTMLElement {
     const {
       panX = 0, panY = 0,
       originX = 0, originY = 0,
-      scaleDiff = 1
+      scaleDiff = 1,
     } = opts;
 
     const matrix = createMatrix()
@@ -290,7 +290,7 @@ export default class PinchZoom extends HTMLElement {
       scale: matrix.a,
       x: matrix.e,
       y: matrix.f,
-      allowChangeEvent: true
+      allowChangeEvent: true,
     });
   }
 }

src/components/output/custom-els/TwoUp/index.ts

@@ -46,9 +46,9 @@ export default class TwoUp extends HTMLElement {
       move: () => {
         this._pointerChange(
           pointerTracker.startPointers[0],
-          pointerTracker.currentPointers[0]
+          pointerTracker.currentPointers[0],
         );
-      }
+      },
     });
   }
 

src/components/output/custom-els/TwoUp/missing-types.d.ts

@@ -11,6 +11,6 @@ interface Window {
 
 declare namespace JSX {
   interface IntrinsicElements {
-    "two-up": HTMLAttributes
+    'two-up': HTMLAttributes;
   }
 }

src/lib/PointerTracker/index.ts

@@ -32,9 +32,10 @@ const isPointerEvent = (event: any): event is PointerEvent =>
 
 const noop = () => {};
 
-type StartCallback = ((pointer: Pointer, event: TouchEvent | PointerEvent | MouseEvent) => boolean);
+export type InputEvent = TouchEvent | PointerEvent | MouseEvent;
-type MoveCallback = ((previousPointers: Pointer[], event: TouchEvent | PointerEvent | MouseEvent) => void);
+type StartCallback = ((pointer: Pointer, event: InputEvent) => boolean);
-type EndCallback = ((pointer: Pointer, event: TouchEvent | PointerEvent | MouseEvent) => void);
+type MoveCallback = ((previousPointers: Pointer[], event: InputEvent) => void);
+type EndCallback = ((pointer: Pointer, event: InputEvent) => void);
 
 interface PointerTrackerCallbacks {
   /**
@@ -95,7 +96,7 @@ export class PointerTracker {
     const {
       start = () => true,
       move = noop,
-      end = noop
+      end = noop,
     } = callbacks;
 
     this._startCallback = start;
@@ -120,7 +121,7 @@ export class PointerTracker {
    * @param event Related event
    * @returns Whether the pointer is being tracked.
    */
-  private _triggerPointerStart (pointer: Pointer, event: PointerEvent | MouseEvent | TouchEvent): boolean {
+  private _triggerPointerStart (pointer: Pointer, event: InputEvent): boolean {
     if (!this._startCallback(pointer, event)) return false;
     this.currentPointers.push(pointer);
     this.startPointers.push(pointer);
@@ -193,7 +194,7 @@ export class PointerTracker {
    * @param event Related event
    */
   @bind
-  private _triggerPointerEnd (pointer: Pointer, event: PointerEvent | MouseEvent | TouchEvent): boolean {
+  private _triggerPointerEnd (pointer: Pointer, event: InputEvent): boolean {
     const index = this.currentPointers.findIndex(p => p.id === pointer.id);
     // Not a pointer we're interested in?
     if (index === -1) return false;

src/lib/codec-wrappers/mozjpeg-enc.ts

@@ -1,4 +1,4 @@
-import {Encoder} from './codec';
+import { Encoder } from './codec';
 
 import mozjpeg_enc from '../../../codecs/mozjpeg_enc/mozjpeg_enc';
 // Using require() so TypeScript doesn’t complain about this not being a module.
@@ -19,13 +19,13 @@ export class MozJpegEncoder implements Encoder {
   private emscriptenModule: Promise<EmscriptenWasm.Module>;
   private api: Promise<ModuleAPI>;
   constructor() {
-    this.emscriptenModule = new Promise(resolve => {
+    this.emscriptenModule = new Promise((resolve) => {
       const m = mozjpeg_enc({
         // Just to be safe, don’t automatically invoke any wasm functions
         noInitialRun: false,
         locateFile(url: string): string {
           // Redirect the request for the wasm binary to whatever webpack gave us.
-          if(url.endsWith('.wasm')) {
+          if (url.endsWith('.wasm')) {
             return wasmBinaryUrl;
           }
           return url;
@@ -38,12 +38,14 @@ export class MozJpegEncoder implements Encoder {
           // TODO(surma@): File a bug with Emscripten on this.
           delete (m as any).then;
           resolve(m);
-        }
+        },
       });
     });
 
     this.api = (async () => {
-      // Not sure why, but TypeScript complains that I am using `emscriptenModule` before it’s getting assigned, which is clearly not true :shrug: Using `any`
+      // Not sure why, but TypeScript complains that I am using
+      // `emscriptenModule` before it’s getting assigned, which is clearly not
+      // true :shrug: Using `any`
       const m = await (this as any).emscriptenModule;
       return {
         version: m.cwrap('version', 'number', []),

src/lib/util.ts

@@ -16,12 +16,12 @@ export function bind(target: any, propertyKey: string, descriptor: PropertyDescr
     // define an instance property pointing to the bound function.
     // This effectively "caches" the bound prototype method as an instance property.
     get() {
-      let bound = descriptor.value.bind(this);
+      const bound = descriptor.value.bind(this);
       Object.defineProperty(this, propertyKey, {
-        value: bound
+        value: bound,
       });
       return bound;
-    }
+    },
   };
 }
 
@@ -37,9 +37,8 @@ export async function bitmapToImageData(bitmap: ImageBitmap): Promise<ImageData>
   // Draw image onto canvas
   const ctx = canvas.getContext('2d');
   if (!ctx) {
-    throw new Error("Could not create canvas context");
+    throw new Error('Could not create canvas context');
   }
   ctx.drawImage(bitmap, 0, 0);
   return ctx.getImageData(0, 0, bitmap.width, bitmap.height);
 }
-

tslint.json

@@ -1,16 +1,19 @@
 {
   "extends": [
-    "tslint-config-semistandard",
+    "tslint-config-airbnb",
     "tslint-react"
   ],
   "rules": {
-    "quotemark": [true, "single", "jsx-double", "avoid-escape"],
-    "no-use-before-declare": false,
-    "no-floating-promises": false,
-    "space-before-function-paren": [true, false],
     "jsx-boolean-value": [true, "never"],
     "jsx-no-multiline-js": false,
     "jsx-no-bind": true,
-    "jsx-no-lambda": true
+    "jsx-no-lambda": true,
+    "function-name": false,
+    "variable-name": [true, "check-format", "allow-leading-underscore"]
+  },
+  "linterOptions": {
+    "exclude": [
+      "build"
+    ]
   }
 }