add missing chai dep

merge master
remove prettier
2018-07-01 15:02:42 +00:00 · 2018-07-01 15:00:53 +00:00 · 2018-07-01 14:57:52 +00:00 · 2018-06-30 17:32:57 +00:00 · 2018-06-30 00:25:02 +01:00 · 2018-06-29 21:12:17 +00:00
46 changed files with 5369 additions and 4754 deletions
--- a/codecs/example.webp
+++ b/codecs/example.webp
--- a/codecs/mozjpeg_enc/example.html
+++ b/codecs/mozjpeg_enc/example.html
@@ -27,6 +27,7 @@
      get_result_pointer: Module.cwrap('get_result_pointer', 'number', []),
      get_result_size: Module.cwrap('get_result_size', 'number', []),
    };
    console.log('Version:', api.version().toString(16));
    const image = await loadImage('../example.png');
    const p = api.create_buffer(image.width, image.height);
    Module.HEAP8.set(image.data, p);
--- a/codecs/webp_dec/README.md
+++ b/codecs/webp_dec/README.md
@@ -0,0 +1,42 @@
 # WebP decoder
 - Source: <https://github.com/webmproject/libwebp>
 - Version: v0.6.1
 ## Example
 See `example.html`
 ## API
 ### `int version()`
 Returns the version of libwebp as a number. va.b.c is encoded as 0x0a0b0c
 ### `uint8_t* create_buffer(int size)`
 Allocates an buffer for the file data.
 ### `void destroy_buffer(uint8_t* p)`
 Frees a buffer created with `create_buffer`.
 ### `void decode(uint8_t* img_in, int size)`
 Decodes the given webp file into raw RGBA. The result is implicitly stored and can be accessed using the `get_result_*()` functions.
 ### `void free_result()`
 Frees the result created by `decode()`.
 ### `int get_result_pointer()`
 Returns the pointer to the start of the buffer holding the encoded data. Length is width x height x 4 bytes.
 ### `int get_result_width()`
 Returns the width of the image.
 ### `int get_result_height()`
 Returns the height of the image.
--- a/codecs/webp_dec/example.html
+++ b/codecs/webp_dec/example.html
@@ -0,0 +1,45 @@
 <!doctype html>
 <script src='webp_dec.js'></script>
 <script>
  const Module = webp_dec();
  async function loadFile(src) {
    const resp = await fetch(src);
    return await resp.arrayBuffer();
  }
  Module.onRuntimeInitialized = async _ => {
    const api = {
      version: Module.cwrap('version', 'number', []),
      create_buffer: Module.cwrap('create_buffer', 'number', ['number', 'number']),
      destroy_buffer: Module.cwrap('destroy_buffer', '', ['number']),
      decode: Module.cwrap('decode', '', ['number', 'number']),
      free_result: Module.cwrap('free_result', '', ['number']),
      get_result_pointer: Module.cwrap('get_result_pointer', 'number', []),
      get_result_width: Module.cwrap('get_result_width', 'number', []),
      get_result_height: Module.cwrap('get_result_height', 'number', []),
    };
    console.log('Version:', api.version().toString(16));
    const image = await loadFile('../example.webp');
    const p = api.create_buffer(image.byteLength);
    Module.HEAP8.set(new Uint8Array(image), p);
    api.decode(p, image.byteLength);
    const resultPointer = api.get_result_pointer();
    if(resultPointer === 0) {
      throw new Error("Could not decode image");
    }
    const resultWidth = api.get_result_width();
    const resultHeight = api.get_result_height();
    const resultView = new Uint8Array(Module.HEAP8.buffer, resultPointer, resultWidth * resultHeight * 4);
    const result = new Uint8ClampedArray(resultView);
    const imageData = new ImageData(result, resultWidth, resultHeight);
    api.free_result(resultPointer);
    api.destroy_buffer(p);
    const canvas = document.createElement('canvas');
    canvas.width = resultWidth;
    canvas.height = resultHeight;
    document.body.appendChild(canvas);
    const ctx = canvas.getContext('2d');
    ctx.putImageData(imageData, 0, 0);
  };
 </script>
--- a/codecs/webp_dec/package-lock.json
+++ b/codecs/webp_dec/package-lock.json
--- a/codecs/webp_dec/package.json
+++ b/codecs/webp_dec/package.json
@@ -0,0 +1,13 @@
 {
  "name": "webp_dec",
  "scripts": {
    "install": "napa",
    "build": "docker run --rm -v $(pwd):/src trzeci/emscripten emcc -O3 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='[\"cwrap\"]' -s ALLOW_MEMORY_GROWTH=1 -s MODULARIZE=1 -s 'EXPORT_NAME=\"webp_dec\"' -I node_modules/libwebp -o ./webp_dec.js webp_dec.c node_modules/libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c"
  },
  "napa": {
    "libwebp": "webmproject/libwebp#v1.0.0"
  },
  "devDependencies": {
    "napa": "^3.0.0"
  }
 }
--- a/codecs/webp_dec/webp_dec.c
+++ b/codecs/webp_dec/webp_dec.c
@@ -0,0 +1,51 @@
 #include "emscripten.h"
 #include "src/webp/decode.h"
 #include "src/webp/demux.h"
 #include <stdlib.h>
 EMSCRIPTEN_KEEPALIVE
 int version() {
  return WebPGetDecoderVersion();
 }
 EMSCRIPTEN_KEEPALIVE
 uint8_t* create_buffer(int size) {
  return malloc(size);
 }
 EMSCRIPTEN_KEEPALIVE
 void destroy_buffer(uint8_t* p) {
  free(p);
 }
 int result[3];
 EMSCRIPTEN_KEEPALIVE
 void decode(uint8_t* img_in, int size) {
  int width, height;
  uint8_t* img_out = WebPDecodeRGBA(img_in, size, &width, &height);
  result[0] = (int)img_out;
  result[1] = width;
  result[2] = height;
 }
 EMSCRIPTEN_KEEPALIVE
 void free_result() {
  WebPFree(result[0]);
 }
 EMSCRIPTEN_KEEPALIVE
 int get_result_pointer() {
  return result[0];
 }
 EMSCRIPTEN_KEEPALIVE
 int get_result_width() {
  return result[1];
 }
 EMSCRIPTEN_KEEPALIVE
 int get_result_height() {
  return result[2];
 }
--- a/codecs/webp_dec/webp_dec.js
+++ b/codecs/webp_dec/webp_dec.js
--- a/codecs/webp_dec/webp_dec.wasm
+++ b/codecs/webp_dec/webp_dec.wasm
--- a/codecs/webp_enc/example.html
+++ b/codecs/webp_enc/example.html
@@ -27,6 +27,7 @@
      get_result_pointer: Module.cwrap('get_result_pointer', 'number', []),
      get_result_size: Module.cwrap('get_result_size', 'number', []),
    };
    console.log('Version:', api.version().toString(16));
    const image = await loadImage('../example.png');
    const p = api.create_buffer(image.width, image.height);
    Module.HEAP8.set(image.data, p);
@@ -38,7 +39,7 @@
    api.free_result(resultPointer);
    api.destroy_buffer(p);
-    const blob = new Blob([result], {type: 'image/jpeg'});
+    const blob = new Blob([result], {type: 'image/webp'});
    const blobURL = URL.createObjectURL(blob);
    const img = document.createElement('img');
    img.src = blobURL;
--- a/codecs/webp_enc/package.json
+++ b/codecs/webp_enc/package.json
@@ -5,7 +5,7 @@
    "build": "docker run --rm -v $(pwd):/src trzeci/emscripten emcc -O3 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='[\"cwrap\"]' -s ALLOW_MEMORY_GROWTH=1 -s MODULARIZE=1 -s 'EXPORT_NAME=\"webp_enc\"' -I node_modules/libwebp -o ./webp_enc.js webp_enc.c node_modules/libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c"
  },
  "napa": {
-    "libwebp": "webmproject/libwebp#v0.6.1"
+    "libwebp": "webmproject/libwebp#v1.0.0"
  },
  "devDependencies": {
    "napa": "^3.0.0"
--- a/codecs/webp_enc/webp_enc.js
+++ b/codecs/webp_enc/webp_enc.js
--- a/codecs/webp_enc/webp_enc.wasm
+++ b/codecs/webp_enc/webp_enc.wasm
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -1,113 +0,0 @@
 const fs = require("fs");
 function readJsonFile(path) {
  // TypeScript puts lots of comments in the default `tsconfig.json`, so you
  // can’t use `require()` to read it. Hence this hack.
  return eval("(" + fs.readFileSync(path).toString("utf-8") + ")");
 }
 const typeScriptConfig = readJsonFile("./tsconfig.json");
 const babel = readJsonFile("./.babelrc");
 module.exports = function(config) {
  const options = {
    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: "",
    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ["mocha", "chai", "karma-typescript"],
    // list of files / patterns to load in the browser
    files: [
      {
        pattern: "test/**/*.ts",
        type: "module"
      },
      {
        pattern: "src/**/*.ts",
        included: false
      }
    ],
    // list of files / patterns to exclude
    exclude: [],
 // preprocess matching files before serving them to the browser // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      "src/**/*.ts": ["karma-typescript", "babel"],
      "test/**/*.ts": ["karma-typescript", "babel"]
    },
    babelPreprocessor: {
      options: babel
    },
    karmaTypescriptConfig: {
      // Inline `tsconfig.json` so that the right TS libs are loaded
      ...typeScriptConfig,
      // Coverage is a thing that karma-typescript forces on you and only
      // creates problems. This is the simplest way of disabling it that I
      // could find.
      coverageOptions: {
        exclude: /.*/
      }
    },
    mime: {
      // Default mimetype for .ts files is video/mp2t but we need
      // text/javascript for modules to work.
      "text/javascript": ["ts"]
    },
    plugins: [
      // Load all modules whose name starts with "karma" (usually the default).
      "karma-*",
      // We don’t have file extensions on our imports as they are primarily
      // consumed by webpack.  With Karma, however, this turns into a real HTTP
      // request for a non-existent file. This inline plugin is a middleware
      // that appends `.ts` to the request URL.
      {
        "middleware:redirect_to_ts": [
          "value",
          (req, res, next) => {
            if (req.url.startsWith("/base/src")) {
              req.url += '.ts';
            }
            next();
          }
        ]
      }
    ],
    // Run our middleware before all other middlewares.
    beforeMiddleware: ["redirect_to_ts"],
    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ["progress"],
    // web server port
    port: 9876,
    // enable / disable colors in the output (reporters and logs)
    colors: true,
    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,
    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: false,
    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ["ChromeHeadless"],
    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true,
    // These custom files allow us to use ES6 modules in our tests.
    // Remove these 2 lines (and files) once https://github.com/karma-runner/karma/pull/2834 lands.
    customContextFile: "test/context.html",
    customDebugFile: "test/debug.html"
  };
  config.set(options);
 };
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -8,29 +8,17 @@
    "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}'",
-    "test": "npm run build && mocha -R spec && karma start"
+    "lintfix": "tslint -c tslint.json -t verbose --fix 'src/**/*.{ts,js}'",
    "test": "npm run lint && npm run build && npm run test:e2e && npm run test:unit",
    "test:e2e": "mocha -R spec test/e2e",
    "test:unit": "karmatic"
  },
-  "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/chai": "^4.1.3",
    "@types/karma": "^1.7.3",
@@ -52,31 +40,18 @@
    "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",
    "express": "^4.16.3",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.0.6",
    "husky": "^1.0.0-rc.9",
    "if-env": "^1.0.4",
-    "karma": "^2.0.2",
+    "karmatic": "^1.1.7",
    "karma-babel-preprocessor": "^7.0.0",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-mocha": "^1.3.0",
    "karma-typescript": "^3.0.12",
    "loader-utils": "^1.1.0",
    "mini-css-extract-plugin": "^0.3.0",
    "mocha": "^5.2.0",
    "node-sass": "^4.7.2",
    "optimize-css-assets-webpack-plugin": "^4.0.0",
    "prettier": "^1.12.1",
    "progress-bar-webpack-plugin": "^1.11.0",
    "puppeteer": "^1.3.0",
    "raw-loader": "^0.5.1",
@@ -85,7 +60,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",
@@ -98,12 +74,12 @@
  },
  "dependencies": {
    "classnames": "^2.2.5",
    "comlink": "^3.0.3",
    "comlink-loader": "^1.0.0",
    "material-components-web": "^0.32.0",
    "material-radial-progress": "git+https://gist.github.com/02134901c77c5309924bfcf8b4435ebe.git",
    "preact": "^8.2.7",
    "preact-i18n": "^1.2.0",
    "preact-material-components": "^1.3.7",
    "preact-material-components-drawer": "git+https://gist.github.com/a78fceed440b98e62582e4440b86bfab.git",
    "preact-router": "^2.6.0"
  }
 }
--- a/src/codecs/encoders.ts
+++ b/src/codecs/encoders.ts
@@ -0,0 +1,13 @@
 import * as mozJPEG from './mozjpeg/encoder';
 import * as identity from './identity/encoder';
 export type EncoderState = identity.EncoderState | mozJPEG.EncoderState;
 export type EncoderOptions = identity.EncodeOptions | mozJPEG.EncodeOptions;
 export type EncoderType = keyof typeof encoderMap;
 export const encoderMap = {
  [identity.type]: identity,
  [mozJPEG.type]: mozJPEG,
 };
 export const encoders = Array.from(Object.values(encoderMap));
--- a/src/codecs/identity/encoder.ts
+++ b/src/codecs/identity/encoder.ts
@@ -0,0 +1,6 @@
 export interface EncodeOptions {}
 export interface EncoderState { type: typeof type; options: EncodeOptions; }
 export const type = 'identity';
 export const label = 'Original image';
 export const defaultOptions: EncodeOptions = {};
--- a/src/lib/codec-wrappers/mozjpeg-enc.ts
+++ b/src/lib/codec-wrappers/mozjpeg-enc.ts
@@ -1,7 +1,6 @@
 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.
 import { EncodeOptions } from './encoder';
 const wasmBinaryUrl = require('../../../codecs/mozjpeg_enc/mozjpeg_enc.wasm');
 // API exposed by wasm module. Details in the codec’s README.
@@ -15,17 +14,18 @@ interface ModuleAPI {
  get_result_size(): number;
 }
-export class MozJpegEncoder implements Encoder {
+export default class MozJpegEncoder {
  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', []),
@@ -57,13 +59,13 @@ export class MozJpegEncoder implements Encoder {
    })();
  }
-  async encode(data: ImageData): Promise<ArrayBuffer> {
+  async encode(data: ImageData, options: EncodeOptions): Promise<ArrayBuffer> {
    const m = await this.emscriptenModule;
    const api = await this.api;
    const p = api.create_buffer(data.width, data.height);
    m.HEAP8.set(data.data, p);
-    api.encode(p, data.width, data.height, 2);
+    api.encode(p, data.width, data.height, options.quality);
    const resultPointer = api.get_result_pointer();
    const resultSize = api.get_result_size();
    const resultView = new Uint8Array(m.HEAP8.buffer, resultPointer, resultSize);
--- a/src/codecs/mozjpeg/encoder.ts
+++ b/src/codecs/mozjpeg/encoder.ts
@@ -0,0 +1,16 @@
 import EncoderWorker from './EncoderWorker';
 export interface EncodeOptions { quality: number; }
 export interface EncoderState { type: typeof type; options: EncodeOptions; }
 export const type = 'mozjpeg';
 export const label = 'MozJPEG';
 export const mimeType = 'image/jpeg';
 export const extension = 'jpg';
 export const defaultOptions: EncodeOptions = { quality: 7 };
 export async function encode(data: ImageData, options: EncodeOptions) {
  // We need to await this because it's been comlinked.
  const encoder = await new EncoderWorker();
  return encoder.encode(data, options);
 }
--- a/src/codecs/mozjpeg/options.tsx
+++ b/src/codecs/mozjpeg/options.tsx
@@ -0,0 +1,35 @@
 import { h, Component } from 'preact';
 import { EncodeOptions } from './encoder';
 import { bind } from '../../lib/util';
 type Props = {
  options: EncodeOptions,
  onChange(newOptions: EncodeOptions): void
 };
 export default class MozJpegCodecOptions extends Component<Props, {}> {
  @bind
  onChange(event: Event) {
    const el = event.currentTarget as HTMLInputElement;
    this.props.onChange({ quality: Number(el.value) });
  }
  render({ options }: Props) {
    return (
      <div>
        <label>
          Quality:
          <input
            name="quality"
            type="range"
            min="1"
            max="100"
            step="1"
            value={'' + options.quality}
            onChange={this.onChange}
          />
        </label>
      </div>
    );
  }
 }
--- a/src/components/app/custom-els/FileDrop/index.ts
+++ b/src/components/app/custom-els/FileDrop/index.ts
@@ -0,0 +1,117 @@
 import { bind } from '../../../../lib/util';
 import './styles.css';
 // tslint:disable-next-line:max-line-length
 function firstMatchingItem(list: DataTransferItemList, acceptVal: string): DataTransferItem | undefined {
  // Split accepts values by ',' then by '/'. Trim everything & lowercase.
  const accepts = acceptVal.toLowerCase().split(',').map((accept) => {
    return accept.trim().split('/').map(part => part.trim());
  }).filter(acceptParts => acceptParts.length === 2); // Filter invalid values
  return Array.from(list).find((item) => {
    if (item.kind !== 'file') return false;
    // 'Parse' the type.
    const [typeMain, typeSub] = item.type.toLowerCase().split('/').map(s => s.trim());
    for (const [acceptMain, acceptSub] of accepts) {
      // Look for an exact match, or a partial match if * is accepted, eg image/*.
      if (typeMain === acceptMain && (acceptSub === '*' || typeSub === acceptSub)) {
        return true;
      }
    }
    return false;
  });
 }
 interface FileDropEventInit extends EventInit {
  file: File;
 }
 export class FileDropEvent extends Event {
  private _file: File;
  constructor(typeArg: string, eventInitDict: FileDropEventInit) {
    super(typeArg, eventInitDict);
    this._file = eventInitDict.file;
  }
  get file(): File {
    return this._file;
  }
 }
 /*
  Example Usage.
  <file-drop
    accept='image/*'
    class='drop-valid|drop-invalid'
  >
   [everything in here is a drop target.]
  </file-drop>
  dropElement.addEventListner('dropfile', (event) => console.log(event.detail))
 */
 export class FileDrop extends HTMLElement {
  private _dragEnterCount = 0;
  constructor() {
    super();
    this.addEventListener('dragover', event => event.preventDefault());
    this.addEventListener('drop', this._onDrop);
    this.addEventListener('dragenter', this._onDragEnter);
    this.addEventListener('dragend', () => this._reset());
    this.addEventListener('dragleave', this._onDragLeave);
  }
  get accept() {
    return this.getAttribute('accept') || '';
  }
  set accept(val: string) {
    this.setAttribute('accept', val);
  }
  @bind
  private _onDragEnter(event: DragEvent) {
    this._dragEnterCount += 1;
    if (this._dragEnterCount > 1) return;
    // We don't have data, attempt to get it and if it matches, set the correct state.
    const dragDataItem = firstMatchingItem(event.dataTransfer.items, this.accept);
    if (dragDataItem) {
      this.classList.add('drop-valid');
    } else {
      this.classList.add('drop-invalid');
    }
  }
  @bind
  private _onDragLeave() {
    this._dragEnterCount -= 1;
    if (this._dragEnterCount === 0) {
      this._reset();
    }
  }
  @bind
  private _onDrop(event: DragEvent) {
    event.preventDefault();
    this._reset();
    const dragDataItem = firstMatchingItem(event.dataTransfer.items, this.accept);
    if (!dragDataItem) return;
    const file = dragDataItem.getAsFile();
    if (file === null) return;
    this.dispatchEvent(new FileDropEvent('filedrop', { file }));
  }
  private _reset() {
    this._dragEnterCount = 0;
    this.classList.remove('drop-valid');
    this.classList.remove('drop-invalid');
  }
 }
 customElements.define('file-drop', FileDrop);
--- a/src/components/app/custom-els/FileDrop/missing-types.d.ts
+++ b/src/components/app/custom-els/FileDrop/missing-types.d.ts
@@ -0,0 +1,19 @@
 import { FileDropEvent, FileDrop } from '.';
 declare global {
  interface HTMLElementEventMap {
    'filedrop': FileDropEvent;
  }
  namespace JSX {
    interface IntrinsicElements {
      'file-drop': FileDropAttributes;
    }
    interface FileDropAttributes extends HTMLAttributes {
      accept?: string;
      onfiledrop?: ((this: FileDrop, ev: FileDropEvent) => any) | null;
    }
  }
 }
--- a/src/components/app/custom-els/FileDrop/styles.css
+++ b/src/components/app/custom-els/FileDrop/styles.css
@@ -0,0 +1,3 @@
 file-drop {
  display: block;
 }
--- a/src/components/app/index.tsx
+++ b/src/components/app/index.tsx
@@ -2,56 +2,217 @@ import { h, Component } from 'preact';
 import { bind, bitmapToImageData } from '../../lib/util';
 import * as style from './style.scss';
 import Output from '../output';
 import Options from '../options';
 import { FileDropEvent } from './custom-els/FileDrop';
 import './custom-els/FileDrop';
-import {MozJpegEncoder} from '../../lib/codec-wrappers/mozjpeg-enc';
+import * as mozJPEG from '../../codecs/mozjpeg/encoder';
 import * as identity from '../../codecs/identity/encoder';
 import { EncoderState, EncoderType, EncoderOptions, encoderMap } from '../../codecs/encoders';
-type Props = {};
+interface SourceImage {
  file: File;
  bmp: ImageBitmap;
  data: ImageData;
 }
-type State = {
+interface EncodedImage {
-  img?: ImageBitmap
+  encoderState: EncoderState;
-};
+  bmp?: ImageBitmap;
  loading: boolean;
  /** Counter of the latest bmp currently encoding */
  loadingCounter: number;
  /** Counter of the latest bmp encoded */
  loadedCounter: number;
 }
 interface Props {}
 interface State {
  source?: SourceImage;
  images: [EncodedImage, EncodedImage];
  loading: boolean;
  error?: string;
 }
 export default class App extends Component<Props, State> {
-  state: State = {};
+  state: State = {
    loading: false,
    images: [
      {
        encoderState: { type: identity.type, options: identity.defaultOptions },
        loadingCounter: 0,
        loadedCounter: 0,
        loading: false
      },
      {
        encoderState: { type: mozJPEG.type, options: mozJPEG.defaultOptions },
        loadingCounter: 0,
        loadedCounter: 0,
        loading: false
      }
    ]
  };
  constructor() {
    super();
    // In development, persist application state across hot reloads:
    if (process.env.NODE_ENV === 'development') {
      this.setState(window.STATE);
-      this.componentDidUpdate = () => {
+      const oldCDU = this.componentDidUpdate;
      this.componentDidUpdate = (props, state) => {
        if (oldCDU) oldCDU.call(this, props, state);
        window.STATE = this.state;
      };
    }
  }
-  @bind
+  onEncoderChange(index: 0 | 1, type: EncoderType, options?: EncoderOptions): void {
-  async onFileChange(event: Event) {
+    const images = this.state.images.slice() as [EncodedImage, EncodedImage];
-    const fileInput = event.target as HTMLInputElement;
+    const image = images[index];
-    if (!fileInput.files || !fileInput.files[0]) return;
+
-    // TODO: handle decode error
+    // Some type cheating here.
-    const bitmap = await createImageBitmap(fileInput.files[0]);
+    // encoderMap[type].defaultOptions is always safe.
-    const data = await bitmapToImageData(bitmap);
+    // options should always be correct for the type, but TypeScript isn't smart enough.
-    const encoder = new MozJpegEncoder();
+    const encoderState: EncoderState = {
-    const compressedData = await encoder.encode(data);
+      type,
-    const blob = new Blob([compressedData], {type: 'image/jpeg'});
+      options: options ? options : encoderMap[type].defaultOptions
-    const compressedImage = await createImageBitmap(blob);
+    } as EncoderState;
-    this.setState({ img: compressedImage });
+
    images[index] = {
      ...image,
      encoderState,
    };
    this.setState({ images });
  }
-  render({ }: Props, { img }: State) {
+  onOptionsChange(index: 0 | 1, options: EncoderOptions): void {
    this.onEncoderChange(index, this.state.images[index].encoderState.type, options);
  }
  componentDidUpdate(prevProps: Props, prevState: State): void {
    const { source, images } = this.state;
    for (const [i, image] of images.entries()) {
      if (source !== prevState.source || image !== prevState.images[i]) {
        this.updateImage(i);
      }
    }
  }
  @bind
  async onFileChange(event: Event): Promise<void> {
    const fileInput = event.target as HTMLInputElement;
    const file = fileInput.files && fileInput.files[0];
    if (!file) return;
    await this.updateFile(file);
  }
  @bind
  async onFileDrop(event: FileDropEvent) {
    const { file } = event;
    if (!file) return;
    await this.updateFile(file);
  }
  async updateFile(file: File) {
    this.setState({ loading: true });
    try {
      const bmp = await createImageBitmap(file);
      // compute the corresponding ImageData once since it only changes when the file changes:
      const data = await bitmapToImageData(bmp);
      this.setState({
        source: { data, bmp, file },
        error: undefined,
        loading: false,
      });
    } catch (err) {
      this.setState({ error: 'IMAGE_INVALID', loading: false });
    }
  }
  async updateImage(index: number): Promise<void> {
    const { source, images } = this.state;
    if (!source) return;
    let image = images[index];
    // Each time we trigger an async encode, the ID changes.
    image.loadingCounter = image.loadingCounter + 1;
    const loadingCounter = image.loadingCounter;
    image.loading = true;
    this.setState({ });
    const result = await this.updateCompressedImage(source, image.encoderState);
    image = this.state.images[index];
    // If a later encode has landed before this one, return.
    if (loadingCounter < image.loadedCounter) return;
    image.bmp = result;
    image.loading = image.loadingCounter !== loadingCounter;
    image.loadedCounter = loadingCounter;
    this.setState({ });
  }
  async updateCompressedImage(source: SourceImage, encodeData: EncoderState): Promise<ImageBitmap> {
    // Special case for identity
    if (encodeData.type === identity.type) return source.bmp;
    try {
      const compressedData = await (() => {
        switch (encodeData.type) {
          case mozJPEG.type: return mozJPEG.encode(source.data, encodeData.options);
          default: throw Error(`Unexpected encoder name`);
        }
      })();
      const blob = new Blob([compressedData], {
        type: encoderMap[encodeData.type].mimeType
      });
      const bitmap = await createImageBitmap(blob);
      this.setState({ error: '' });
      return bitmap;
    } catch (err) {
      this.setState({ error: `Encoding error (type=${encodeData.type}): ${err}` });
      throw err;
    }
  }
  render({ }: Props, { loading, error, images, source }: State) {
    const [leftImageBmp, rightImageBmp] = images.map(i => i.bmp);
    loading = loading || images.some(image => image.loading);
    return (
      <file-drop accept="image/*" onfiledrop={this.onFileDrop}>
        <div id="app" class={style.app}>
-        {img ?
+          {(leftImageBmp && rightImageBmp) ? (
-          <Output img={img} />
+            <Output leftImg={leftImageBmp} rightImg={rightImageBmp} />
-          :
+          ) : (
-          <div>
+              <div class={style.welcome}>
                <h1>Select an image</h1>
                <input type="file" onChange={this.onFileChange} />
              </div>
-        }
+            )}
          {images.map((image, index) => (
            <span class={index ? style.rightLabel : style.leftLabel}>
              {encoderMap[image.encoderState.type].label}
            </span>
          ))}
          {images.map((image, index) => (
            <Options
              class={index ? style.rightOptions : style.leftOptions}
              encoderState={image.encoderState}
              onTypeChange={this.onEncoderChange.bind(this, index)}
              onOptionsChange={this.onOptionsChange.bind(this, index)}
            />
          ))}
          {loading && <span style={{ position: 'fixed', top: 0, left: 0 }}>Loading...</span>}
          {error && <span style={{ position: 'fixed', top: 0, left: 0 }}>Error: {error}</span>}
        </div>
      </file-drop>
    );
  }
 }
--- a/src/components/app/style.scss
+++ b/src/components/app/style.scss
@@ -1,3 +1,83 @@
-.app h1 {
+/*
-  color: green;
+Note: These styles are temporary. They will be replaced before going live.
 */
 .app {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  contain: strict;
  .leftLabel,
  .rightLabel {
    position: fixed;
    bottom: 0;
    padding: 5px 10px;
    background: rgba(0,0,0,0.5);
    color: #fff;
  }
  .leftLabel { left: 0; }
  .rightLabel { right: 0; }
  .leftOptions,
  .rightOptions {
    position: fixed;
    bottom: 40px;
  }
  .leftOptions { left: 10px; }
  .rightOptions { right: 10px; }
 }
 .welcome {
  position: absolute;
  display: inline-block;
  left: 50%;
  top: 50%;
  padding: 20px;
  transform: translate(-50%, -50%);
  h1 {
    font-weight: inherit;
    font-size: 150%;
    text-align: center;
  }
  input {
    display: inline-block;
    width: 16em;
    padding: 5px;
    margin: 0 auto;
    -webkit-appearance: none;
    border: 1px solid #b68c86;
    background: #f0d3cf;
    box-shadow: inset 0 0 1px #fff;
    border-radius: 3px;
    cursor: pointer;
  }
 }
 :global { 
  file-drop {
    overflow: hidden;
    touch-action: none;
    height:100%;
    width:100%;
    &.drop-valid {
      transition: opacity 200ms ease-in-out, background-color 200ms;
      opacity: 0.5;
      background-color:green;
    }
    &.drop-invalid {
      transition: opacity 200ms ease-in-out, background-color 200ms;
      opacity: 0.5;
      background-color:red;
    }
  }
 }
--- a/src/components/options/index.tsx
+++ b/src/components/options/index.tsx
@@ -0,0 +1,63 @@
 import { h, Component } from 'preact';
 import * as style from './style.scss';
 import { bind } from '../../lib/util';
 import MozJpegEncoderOptions from '../../codecs/mozjpeg/options';
 import { type as mozJPEGType } from '../../codecs/mozjpeg/encoder';
 import { type as identityType } from '../../codecs/identity/encoder';
 import { EncoderState, EncoderType, EncoderOptions, encoders } from '../../codecs/encoders';
 const encoderOptionsComponentMap = {
  [mozJPEGType]: MozJpegEncoderOptions,
  [identityType]: undefined
 };
 interface Props {
  class?: string;
  encoderState: EncoderState;
  onTypeChange(newType: EncoderType): void;
  onOptionsChange(newOptions: EncoderOptions): void;
 }
 interface State {}
 export default class Options extends Component<Props, State> {
  typeSelect?: HTMLSelectElement;
  @bind
  onTypeChange(event: Event) {
    const el = event.currentTarget as HTMLSelectElement;
    // The select element only has values matching encoder types,
    // so 'as' is safe here.
    const type = el.value as EncoderType;
    this.props.onTypeChange(type);
  }
  render({ class: className, encoderState, onOptionsChange }: Props) {
    const EncoderOptionComponent = encoderOptionsComponentMap[encoderState.type];
    return (
      <div class={`${style.options}${className ? (' ' + className) : ''}`}>
        <label>
          Mode:
          <select value={encoderState.type} onChange={this.onTypeChange}>
            {encoders.map(encoder => (
              <option value={encoder.type}>{encoder.label}</option>
            ))}
          </select>
        </label>
        {EncoderOptionComponent &&
          <EncoderOptionComponent
            options={
              // Casting options, as encoderOptionsComponentMap[encodeData.type] ensures the correct type,
              // but typescript isn't smart enough.
              encoderState.options as typeof EncoderOptionComponent['prototype']['props']['options']
            }
            onChange={onOptionsChange}
          />
        }
      </div>
    );
  }
 }
--- a/src/components/options/style.scss
+++ b/src/components/options/style.scss
@@ -0,0 +1,38 @@
 /*
 Note: These styles are temporary. They will be replaced before going live.
 */
 .options {
    width: 180px;
    padding: 10px;
    background: rgba(50,50,50,0.8);
    border: 1px solid #222;
    box-shadow: inset 0 0 1px #fff, 0 0 1px #fff;
    border-radius: 3px;
    color: #eee;
    overflow: auto;
    z-index: 1;
    transition: opacity 300ms ease;
    &:not(:hover) {
        opacity: .6;
    }
    label {
        display: block;
        padding: 5px;
        font-weight: bold;
        select {
            margin-left: 5px;
        }
        input {
            vertical-align: middle;
        }
    }
    pre {
        font-size: 10px;
    }
 }
--- a/src/components/output/custom-els/PinchZoom/index.ts
+++ b/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();
 }
@@ -62,7 +62,7 @@ export default class PinchZoom extends HTMLElement {
  // Current transform.
  private _transform: SVGMatrix = createMatrix();
-  constructor () {
+  constructor() {
    super();
    // Watch for children changes.
@@ -79,42 +79,42 @@ 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));
  }
-  connectedCallback () {
+  connectedCallback() {
    this._stageElChange();
  }
-  get x () {
+  get x() {
    return this._transform.e;
  }
-  get y () {
+  get y() {
    return this._transform.f;
  }
-  get scale () {
+  get scale() {
    return this._transform.a;
  }
  /**
   * Update the stage with a given scale/x/y.
   */
-  setTransform (opts: SetTransformOpts = {}) {
+  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
@@ -174,7 +174,7 @@ export default class PinchZoom extends HTMLElement {
  /**
   * Update transform values without checking bounds. This is only called in setTransform.
   */
-  _updateTransform (scale: number, x: number, y: number, allowChangeEvent: boolean) {
+  _updateTransform(scale: number, x: number, y: number, allowChangeEvent: boolean) {
    // Return if there's no change
    if (
      scale === this.scale &&
@@ -202,7 +202,7 @@ export default class PinchZoom extends HTMLElement {
   * require a single element to be the child of <pinch-zoom>, and
   * that's the element we pan/scale.
   */
-  private _stageElChange () {
+  private _stageElChange() {
    this._positioningEl = undefined;
    if (this.children.length === 0) {
@@ -220,7 +220,7 @@ export default class PinchZoom extends HTMLElement {
    this.setTransform();
  }
-  private _onWheel (event: WheelEvent) {
+  private _onWheel(event: WheelEvent) {
    event.preventDefault();
    const thisRect = this.getBoundingClientRect();
@@ -239,11 +239,11 @@ export default class PinchZoom extends HTMLElement {
    this._applyChange({
      scaleDiff,
      originX: event.clientX - thisRect.left,
-      originY: event.clientY - thisRect.top
+      originY: event.clientY - thisRect.top,
    });
  }
-  private _onPointerMove (previousPointers: Pointer[], currentPointers: Pointer[]) {
+  private _onPointerMove(previousPointers: Pointer[], currentPointers: Pointer[]) {
    // Combine next points with previous points
    const thisRect = this.getBoundingClientRect();
@@ -263,16 +263,16 @@ 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,
    });
  }
  /** Transform the view & fire a change event */
-  private _applyChange (opts: ApplyChangeOpts = {}) {
+  private _applyChange(opts: ApplyChangeOpts = {}) {
    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,
    });
  }
 }
--- a/src/components/output/custom-els/TwoUp/index.ts
+++ b/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],
        );
-      }
+      },
    });
  }
--- a/src/components/output/custom-els/TwoUp/missing-types.d.ts
+++ b/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;
  }
 }
--- a/src/components/output/index.tsx
+++ b/src/components/output/index.tsx
@@ -3,16 +3,17 @@ import PinchZoom from './custom-els/PinchZoom';
 import './custom-els/PinchZoom';
 import './custom-els/TwoUp';
 import * as style from './style.scss';
-import { bind } from '../../lib/util';
+import { bind, drawBitmapToCanvas } from '../../lib/util';
 import { twoUpHandle } from './custom-els/TwoUp/styles.css';
 type Props = {
-  img: ImageBitmap
+  leftImg: ImageBitmap,
  rightImg: ImageBitmap
 };
 type State = {};
-export default class App extends Component<Props, State> {
+export default class Output extends Component<Props, State> {
  state: State = {};
  canvasLeft?: HTMLCanvasElement;
  canvasRight?: HTMLCanvasElement;
@@ -20,26 +21,22 @@ export default class App extends Component<Props, State> {
  pinchZoomRight?: PinchZoom;
  retargetedEvents = new WeakSet<Event>();
  updateCanvases(img: ImageBitmap) {
    for (const [i, canvas] of [this.canvasLeft, this.canvasRight].entries()) {
      if (!canvas) throw Error('Missing canvas');
      const ctx = canvas.getContext('2d');
      if (!ctx) throw Error('Expected 2d canvas context');
      if (i === 1) {
        // This is temporary, to show the images are different
        ctx.filter = 'hue-rotate(180deg)';
      }
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0);
    }
  }
  componentDidMount() {
-    this.updateCanvases(this.props.img);
+    if (this.canvasLeft) {
      drawBitmapToCanvas(this.canvasLeft, this.props.leftImg);
    }
    if (this.canvasRight) {
      drawBitmapToCanvas(this.canvasRight, this.props.rightImg);
    }
  }
-  componentDidUpdate({ img }: Props) {
+  componentDidUpdate(prevProps: Props) {
-    if (img !== this.props.img) this.updateCanvases(this.props.img);
+    if (prevProps.leftImg !== this.props.leftImg && this.canvasLeft) {
      drawBitmapToCanvas(this.canvasLeft, this.props.leftImg);
    }
    if (prevProps.rightImg !== this.props.rightImg && this.canvasRight) {
      drawBitmapToCanvas(this.canvasRight, this.props.rightImg);
    }
  }
  @bind
@@ -78,9 +75,9 @@ export default class App extends Component<Props, State> {
    this.pinchZoomLeft.dispatchEvent(clonedEvent);
  }
-  render({ img }: Props, { }: State) {
+  render({ leftImg, rightImg }: Props, { }: State) {
    return (
-      <div>
+      <div class={style.output}>
        <two-up
          // Event redirecting. See onRetargetableEvent.
          onTouchStartCapture={this.onRetargetableEvent}
@@ -91,13 +88,12 @@ export default class App extends Component<Props, State> {
          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={img.width} height={img.height} />
+            <canvas class={style.outputCanvas} ref={c => this.canvasLeft = c as HTMLCanvasElement} 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={img.width} height={img.height} />
+            <canvas class={style.outputCanvas} ref={c => this.canvasRight = c as HTMLCanvasElement} width={rightImg.width} height={rightImg.height} />
          </pinch-zoom>
        </two-up>
        <p>And that's all the app does so far!</p>
      </div>
    );
  }
--- a/src/components/output/style.scss
+++ b/src/components/output/style.scss
@@ -1,3 +1,29 @@
 /*
 Note: These styles are temporary. They will be replaced before going live.
 */
 %fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  contain: strict;
 }
 .output {
  @extend %fill;
  > two-up {
    @extend %fill;
    > pinch-zoom {
      @extend %fill;
    }
  }
 }
 .outputCanvas {
  image-rendering: pixelated;
 }
--- a/src/lib/PointerTracker/index.ts
+++ b/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;
--- a/src/lib/codec-wrappers/codec.ts
+++ b/src/lib/codec-wrappers/codec.ts
@@ -1,7 +0,0 @@
 export interface Encoder {
  encode(data: ImageData): Promise<ArrayBuffer>;
 }
 export interface Decoder {
  decode(data: ArrayBuffer): Promise<ImageBitmap>;
 }
--- a/src/lib/util.ts
+++ b/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,16 @@ 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);
 }
 /** Replace the contents of a canvas with the given bitmap */
 export function drawBitmapToCanvas(canvas: HTMLCanvasElement, img: ImageBitmap) {
  const ctx = canvas.getContext('2d');
  if (!ctx) throw Error('Canvas not initialized');
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(img, 0, 0);
 }
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -1,3 +1,7 @@
 /*
 Note: These styles are temporary. They will be replaced before going live.
 */
@import './reset.scss';
 html, body {
@@ -5,6 +9,8 @@ html, body {
  width: 100%;
  padding: 0;
  margin: 0;
  font: 14px/1.3 Roboto,'Helvetica Neue',arial,helvetica,sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  contain: strict;
 }
--- a/src/style/reset.scss
+++ b/src/style/reset.scss
@@ -1,3 +1,7 @@
 /*
 Note: These styles are temporary. They will be replaced before going live.
 */
 button, a, img, input, select, textarea {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
 }
--- a/test/context.html
+++ b/test/context.html
@@ -1,41 +0,0 @@
 <!DOCTYPE html>
 <!--
  This file is taken from https://github.com/karma-runner/karma/pull/2834. It allows us to use ES6 module imports in our test suite files.
 -->
 <!--
 This is the execution context.
 Loaded within the iframe.
 Reloaded before every execution run.
 -->
 <html>
 <head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
 </head>
 <body>
  <!-- The scripts need to be in the body DOM element, as some test running frameworks need the body
       to have already been created so they can insert their magic into it. For example, if loaded
       before body, Angular Scenario test framework fails to find the body and crashes and burns in
       an epic manner. -->
  <script src="context.js"></script>
  <script type="text/javascript">
    // Configure our Karma and set up bindings
    %CLIENT_CONFIG%
    window.__karma__.setupContext(window);
    // All served files with the latest timestamps
    %MAPPINGS%
  </script>
  <!-- Dynamically replaced with <script> tags -->
  %SCRIPTS%
  <!-- Since %SCRIPTS% might include modules, the `loaded()` call needs to be in a module too.
   This ensures all the tests will have been declared before karma tries to run them. -->
  <script type="module">
    window.__karma__.loaded();
  </script>
  <script nomodule>
    window.__karma__.loaded();
  </script>
 </body>
 </html>
--- a/test/debug.html
+++ b/test/debug.html
@@ -1,43 +0,0 @@
 <!doctype html>
 <!--
  This file is taken from https://github.com/karma-runner/karma/pull/2834. It allows us to use ES6 module imports in our test suite files.
 -->
 <!--
 This file is almost the same as context.html - loads all source files,
 but its purpose is to be loaded in the main frame (not within an iframe),
 just for immediate execution, without reporting to Karma server.
 -->
 <html>
 <head>
 %X_UA_COMPATIBLE%
  <title>Karma DEBUG RUNNER</title>
  <link href="favicon.ico" rel="icon" type="image/x-icon" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
 </head>
 <body>
  <!-- The scripts need to be at the end of body, so that some test running frameworks
   (Angular Scenario, for example) need the body to be loaded so that it can insert its magic
   into it. If it is before body, then it fails to find the body and crashes and burns in an epic
   manner. -->
  <script src="context.js"></script>
  <script src="debug.js"></script>
  <script type="text/javascript">
    // Configure our Karma
    %CLIENT_CONFIG%
    // All served files with the latest timestamps
    %MAPPINGS%
  </script>
  <!-- Dynamically replaced with <script> tags -->
  %SCRIPTS%
  <!-- Since %SCRIPTS% might include modules, the `loaded()` call needs to be in a module too.
   This ensures all the tests will have been declared before karma tries to run them. -->
  <script type="module">
    window.__karma__.loaded();
  </script>
  <script nomodule>
    window.__karma__.loaded();
  </script>
 </body>
 </html>
--- a/test/e2e/index.js
+++ b/test/e2e/index.js
@@ -1,40 +1,42 @@
-const express = require("express");
+/* eslint-env mocha */
 const app = express();
 const http = require("http");
 const puppeteer = require("puppeteer");
 const { fingerDown } = require("./finger.js");
 const { expect } = require("chai");
-async function staticWebServer(path) {
+const path = require('path');
 const express = require('express');
 const http = require('http');
 const puppeteer = require('puppeteer');
 const { fingerDown } = require('../lib/finger');
 const { expect } = require('chai');
 async function staticWebServer (path) {
  // Start a static web server
  const app = express();
  app.use(express.static(path));
  // Port 0 means let the OS select a port
-  const server = http.createServer(app).listen(0, "localhost");
+  const server = http.createServer(app).listen(0, 'localhost');
-  await new Promise(resolve => server.on("listening", resolve));
+  await new Promise(resolve => server.on('listening', resolve));
  // Read back the bound address
  const address = server.address();
  return { server, address };
 }
-describe("some e2e test", function() {
+describe('some e2e test', function () {
-  before(async function() {
+  before(async function () {
    // Start webserver
-    const { address, server } = await staticWebServer(".");
+    const { address, server } = await staticWebServer(path.resolve(__dirname, '../fixtures'));
    this.address = `http://${address.address}:${address.port}`;
    this.server = server;
    // Start browser
    this.browser = await puppeteer.launch();
    this.page = await this.browser.newPage();
-    await this.page.goto(`${this.address}/test/sample.html`, {
+    await this.page.goto(`${this.address}/sample.html`, {
-      waitUntil: "networkidle2"
+      waitUntil: 'networkidle2'
    });
  });
-  it("can tap", async function() {
+  it('can tap', async function () {
-    const btn = await this.page.$("button");
+    const btn = await this.page.$('button');
    await btn.tap();
    const result = await this.page.evaluate(_ => {
      return window.lol;
@@ -42,8 +44,8 @@ describe("some e2e test", function() {
    expect(result).to.equal(true);
  });
-  it("can tap manually", async function() {
+  it('can tap manually', async function () {
-    const btn = await this.page.$("button");
+    const btn = await this.page.$('button');
    const box = await btn.boundingBox();
    const finger = fingerDown(
      this.page,
@@ -57,9 +59,9 @@ describe("some e2e test", function() {
    expect(result).to.equal(true);
  });
-  it("does some taps", async function() {});
+  it('does some taps', async function () {});
-  after(async function() {
+  after(async function () {
    this.server.close();
    await this.browser.close();
  });
--- a/test/fixtures/sample.html
+++ b/test/fixtures/sample.html
--- a/test/lib/finger.js
+++ b/test/lib/finger.js
@@ -2,37 +2,37 @@ let touchPoints = [];
 let idCnt = 0;
 class Finger {
-  constructor(point, page) {
+  constructor (point, page) {
    this._point = point;
    this._page = page;
  }
-  move(x, y) {
+  move (x, y) {
    if (!this._point) return;
    Object.assign(this._point, {
      x: Math.floor(x),
      y: Math.floor(y)
    });
-    this._page.touchscreen._client.send("Input.dispatchTouchEvent", {
+    this._page.touchscreen._client.send('Input.dispatchTouchEvent', {
-      type: "touchMove",
+      type: 'touchMove',
      touchPoints,
-      modifiers: page._keyboard._modifiers
+      modifiers: this._page._keyboard._modifiers
    });
  }
-  up() {
+  up () {
    if (!this._point) return;
    const idx = touchPoints.indexOf(this._point);
    touchPoints = touchPoints.splice(idx, 1);
    this._point = null;
    if (touchPoints.length === 0) {
-      this._page.touchscreen._client.send("Input.dispatchTouchEvent", {
+      this._page.touchscreen._client.send('Input.dispatchTouchEvent', {
-        type: "touchEnd",
+        type: 'touchEnd',
        modifiers: this._page._keyboard._modifiers
      });
    } else {
-      this._page.touchscreen._client.send("Input.dispatchTouchEvent", {
+      this._page.touchscreen._client.send('Input.dispatchTouchEvent', {
-        type: "touchMove",
+        type: 'touchMove',
        touchPoints,
        modifiers: this._page._keyboard._modifiers
      });
@@ -40,7 +40,7 @@ class Finger {
  }
 }
-function fingerDown(page, x, y) {
+function fingerDown (page, x, y) {
  const id = idCnt++;
  const point = {
    x: Math.round(x),
@@ -48,8 +48,8 @@ function fingerDown(page, x, y) {
    id
  };
  touchPoints.push(point);
-  page.touchscreen._client.send("Input.dispatchTouchEvent", {
+  page.touchscreen._client.send('Input.dispatchTouchEvent', {
-    type: "touchStart",
+    type: 'touchStart',
    touchPoints,
    modifiers: page._keyboard._modifiers
  });
--- a/test/unit/index.test.js
+++ b/test/unit/index.test.js
@@ -0,0 +1,27 @@
 /* eslint-env jest */
 import { h, Component, render } from 'preact';
 import App from '../../src/components/app';
 describe('<App />', () => {
  let scratch;
  beforeEach(() => {
    scratch = document.createElement('div');
    document.body.appendChild(scratch);
  });
  afterEach(() => {
    render(<span />, scratch, scratch.firstChild);
    scratch.remove();
  });
  it('should render', () => {
    let app;
    render(<App ref={c => { app = c; }} />, scratch);
    expect(app instanceof Component).toBe(true);
    expect(scratch.innerHTML).toBe(
      `<div id="app" class="app__1wROX"><div><h1>Select an image</h1><input type="file"></div></div>`
    );
  });
 });
--- a/tslint.json
+++ b/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"
    ]
  }
 }
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -33,7 +33,8 @@ module.exports = function (_, env) {
      filename: isProd ? '[name].[chunkhash:5].js' : '[name].js',
      chunkFilename: '[name].chunk.[chunkhash:5].js',
      path: path.join(__dirname, 'build'),
-      publicPath: '/'
+      publicPath: '/',
      globalObject: 'self'
    },
    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss', '.css'],
@@ -97,6 +98,10 @@ module.exports = function (_, env) {
            }
          ]
        },
        {
          test: /\.worker.[tj]sx?$/,
          loader: 'comlink-loader'
        },
        {
          test: /\.tsx?$/,
          exclude: nodeModules,
@@ -111,16 +116,16 @@ module.exports = function (_, env) {
        {
          // All the codec files define a global with the same name as their file name. `exports-loader` attaches those to `module.exports`.
          test: /\/codecs\/.*\.js$/,
-          loader: 'exports-loader',
+          loader: 'exports-loader'
        },
        {
          test: /\/codecs\/.*\.wasm$/,
          // This is needed to make webpack NOT process wasm files.
          // See https://github.com/webpack/webpack/issues/6725
          type: 'javascript/auto',
-          loader: 'file-loader',
+          loader: 'file-loader'
        }
-      ],
+      ]
    },
    plugins: [
      new webpack.IgnorePlugin(/(fs)/, /\/codecs\//),
Author	SHA1	Message	Date
Jason Miller	34be93b0f0	add missing chai dep	2018-07-01 15:02:42 +00:00
Jason Miller	e95ea80c4f	merge master	2018-07-01 15:00:53 +00:00
Jason Miller	44412f6217	remove prettier	2018-07-01 14:57:52 +00:00
Jason Miller	08362a4b2d	Remove unused deps	2018-06-30 17:32:57 +00:00
Surma	cc3ed168d8	Merge pull request #70 from GoogleChromeLabs/lint-fix Fixing issues raised by the linter. Fixes #68	2018-06-30 00:25:02 +01:00
Paul Kinlan	3b9b1e9f2e	Fixing issues raised by the linter. Fixes #68 + just cleans up issues, and disables one test that can't be fixed. + biggest change is encoders not using multiple imports now.	2018-06-29 21:12:17 +00:00
Jason Miller	10de559a0c	Try karmatic! +test reorg	2018-06-29 20:12:40 +00:00
Paul Kinlan	7c220b1a92	Adding in Drag and Drop support to fix #45 (#56 ) * Merging file drop * Fixing double drop	2018-06-29 16:37:48 +01:00
Jason Miller	3035a68b90	Options UI (#39 ) * Initial work to add Options config * Use a single encoder instance and retry up to 10 times on failure. * Switch both sides to allow encoding from the source image, add options configuration for each. * Styling for options (and a few tweaks for the app) * Dep updates. * Remove commented out code. * Fix Encoder typing * Fix lint issues * Apparently I didnt have tslint autofix enabled on the chromebook * Attempt to fix layout/panning issues * Fix missing custom element import! * Fix variable naming, remove dynamic encoder names, remove retry, allow encoders to return ImageData. * Refactor state management to use an Array of objects and immutable updates instead of relying on explicit update notifications. * Add Identity encoder, which is a passthrough encoder that handles the "original" view. * Drop comlink-loader into the project and add ".worker" to the jpeg encoder filename so it runs in a worker (🦄) * lint fixes. * cleanup * smaller PR feedback fixes * rename "jpeg" codec to "MozJpeg" * Formatting fixes for Options * Colocate codecs and their options UIs in src/codecs, and standardize the namings * Handle canvas errors * Throw if quality is undefined, add default quality * add note about temp styles * add note about temp styles [2] * Renaming updateOption * Clarify option input bindings * Move updateCanvas() to util and rename to drawBitmapToCanvas * use generics to pass through encoder options * Remove unused dependencies * fix options type * const * Use `Array.prototype.some()` for image loading check * Display encoding errors in the UI. * I fought typescript and I think I won * This doesn't need to be optional * Quality isn't optional * Simplifying comlink casting * Splitting counters into loading and displaying * Still loading if the loading counter isn't equal.	2018-06-29 16:29:18 +01:00
Jason Miller	e9dad3d884	Use Puppeteer's chrome install	2018-06-29 01:43:13 +00:00
Surma	65847c0ed7	Merge pull request #62 from GoogleChromeLabs/linting Switch to tslint and run it as commit hook	2018-06-26 15:16:42 +01:00
Surma	5303afe9ad	Fix code lint complaints	2018-06-26 15:11:07 +01:00
Surma	579b8a494a	Use better exclude option	2018-06-26 15:10:54 +01:00
Surma	56faf619d0	Allow leading underscores on variable names	2018-06-26 14:44:31 +01:00
Surma	85e3a12c84	Add lint fix script	2018-06-26 14:43:33 +01:00
Surma	cab8d3f13c	Allow leading underscores in private methods	2018-06-26 14:40:28 +01:00
Surma	5c651a1716	Switch to tslint and run it as commit hook	2018-06-26 11:19:44 +01:00
Surma	ba0ad81646	Merge pull request #52 from GoogleChromeLabs/codec-fixes Codec fixes	2018-06-14 13:39:22 +01:00
Surma	695bbed12b	Update webp to v1.0.0	2018-06-14 13:32:05 +01:00
Surma	6a6d478f77	Commit webp decoder binaries	2018-06-14 13:29:11 +01:00
Surma	d75a3aca9b	Merge pull request #50 from GoogleChromeLabs/webp-dec Decoder for webp	2018-06-14 13:25:49 +01:00
Surma	91945da5ae	Add documentation	2018-06-13 23:44:46 +01:00
Surma	00e73daabd	Decoder for webp	2018-06-13 23:40:24 +01:00