Fix lint issues resulting from switching to airbnb (#94)

* Fix lint issues resulting from switching to airbnb.

* Case sensitivity change

* Fix lint script to actually lint tsx files

package.json

@@ -8,8 +8,8 @@
     "build:codecs": "npm run build:mozjpeg_enc",
     "start": "webpack serve --host 0.0.0.0 --hot",
     "build": "webpack -p",
-    "lint": "tslint -c tslint.json -t verbose 'src/**/*.{ts,js}'",
-    "lintfix": "tslint -c tslint.json -t verbose --fix 'src/**/*.{ts,js}'"
+    "lint": "tslint -c tslint.json -t verbose 'src/**/*.{ts,tsx,js,jsx}'",
+    "lintfix": "tslint -c tslint.json -t verbose --fix 'src/**/*.{ts,tsx,js,jsx}'"
   },
   "husky": {
     "hooks": {

src/components/app/index.tsx → src/components/App/index.tsx

@@ -3,8 +3,8 @@ import { partial } from 'filesize';
 
 import { bind, bitmapToImageData } from '../../lib/util';
 import * as style from './style.scss';
-import Output from '../output';
-import Options from '../options';
+import Output from '../Output';
+import Options from '../Options';
 import { FileDropEvent } from './custom-els/FileDrop';
 import './custom-els/FileDrop';
 

src/components/options/index.tsx → src/components/Options/index.tsx

@@ -68,6 +68,7 @@ export default class Options extends Component<Props, State> {
   }
 
   render({ class: className, encoderState, onOptionsChange }: Props, { encoderSupportMap }: State) {
+    // tslint:disable variable-name
     const EncoderOptionComponent = encoderOptionsComponentMap[encoderState.type];
 
     return (

src/components/output/index.tsx → src/components/Output/index.tsx

@@ -3,7 +3,7 @@ import PinchZoom from './custom-els/PinchZoom';
 import './custom-els/PinchZoom';
 import './custom-els/TwoUp';
 import * as style from './style.scss';
-import { bind, drawBitmapToCanvas } from '../../lib/util';
+import { bind, drawBitmapToCanvas, linkRef } from '../../lib/util';
 import { twoUpHandle } from './custom-els/TwoUp/styles.css';
 
 type Props = {
@@ -92,11 +92,21 @@ export default class Output extends Component<Props, State> {
           onMouseDownCapture={this.onRetargetableEvent}
           onWheelCapture={this.onRetargetableEvent}
         >
-          <pinch-zoom onChange={this.onPinchZoomLeftChange} ref={p => this.pinchZoomLeft = p as PinchZoom}>
-            <canvas class={style.outputCanvas} ref={c => this.canvasLeft = c as HTMLCanvasElement} width={leftImg.width} height={leftImg.height} />
+          <pinch-zoom onChange={this.onPinchZoomLeftChange} ref={linkRef(this, 'pinchZoomLeft')}>
+            <canvas
+              class={style.outputCanvas}
+              ref={linkRef(this, 'canvasLeft')}
+              width={leftImg.width}
+              height={leftImg.height}
+            />
           </pinch-zoom>
-          <pinch-zoom ref={p => this.pinchZoomRight = p as PinchZoom}>
-            <canvas class={style.outputCanvas} ref={c => this.canvasRight = c as HTMLCanvasElement} width={rightImg.width} height={rightImg.height} />
+          <pinch-zoom ref={linkRef(this, 'pinchZoomRight')}>
+            <canvas
+              class={style.outputCanvas}
+              ref={linkRef(this, 'canvasRight')}
+              width={rightImg.width}
+              height={rightImg.height}
+            />
           </pinch-zoom>
         </two-up>
       </div>

src/index.tsx

@@ -1,7 +1,7 @@
 import { h, render } from 'preact';
 import './lib/fix-pmc';
 import './style';
-import App from './components/app';
+import App from './components/App';
 
 // Find the outermost Element in our server-rendered HTML structure.
 let root = document.querySelector('#app') || undefined;
@@ -15,8 +15,9 @@ if (process.env.NODE_ENV === 'development') {
   require('preact/debug');
 
   // When an update to any module is received, re-import the app and trigger a full re-render:
-  module.hot.accept('./components/app', () => {
-    import('./components/app').then(({ default: App }) => {
+  module.hot.accept('./components/App', () => {
+    // tslint:disable-next-line variable-name
+    import('./components/App').then(({ default: App }) => {
       root = render(<App />, document.body, root);
     });
   });

src/lib/util.ts

@@ -25,6 +25,22 @@ export function bind(target: any, propertyKey: string, descriptor: PropertyDescr
   };
 }
 
+/** Creates a function ref that assigns its value to a given property of an object.
+ *  @example
+ *  // element is stored as `this.foo` when rendered.
+ *  <div ref={linkRef(this, 'foo')} />
+ */
+export function linkRef<T>(obj: any, name: string) {
+  const refName = `$$ref_${name}`;
+  let ref = obj[refName];
+  if (!ref) {
+    ref = obj[refName] = (c: T) => {
+      obj[name] = c;
+    };
+  }
+  return ref;
+}
+
 /**
  * Turns a given `ImageBitmap` into `ImageData`.
  */

tslint.json

@@ -9,7 +9,9 @@
     "jsx-no-bind": true,
     "jsx-no-lambda": true,
     "function-name": false,
-    "variable-name": [true, "check-format", "allow-leading-underscore"]
+    "variable-name": [true, "check-format", "allow-leading-underscore"],
+    "no-duplicate-imports": false,
+    "import-name": false
   },
   "linterOptions": {
     "exclude": [