Allow TS in modules

Adding module
wip
2018-11-09 14:19:23 -08:00 · 2018-11-09 12:45:58 -08:00 · 2018-11-09 12:45:58 -08:00
64 changed files with 3137 additions and 5801 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,13 @@
+{
+  "plugins": [
+    "transform-class-properties",
+    "transform-react-constant-elements",
+    "transform-react-remove-prop-types",
+    [
+      "transform-react-jsx",
+      {
+        "pragma": "h"
+      }
+    ]
+  ]
+}
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@ -1,36 +0,0 @@
---
-name: Bug report
-about: Something is not working as expected
-labels: 
-
---
-
-**Before you start**
-Please take a look at the [FAQ](https://github.com/GoogleChromeLabs/squoosh/wiki/FAQ) as well as the already opened issues! If nothing fits your problem, go ahead and fill out the following template:
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Version:**
- - OS w/ version: [e.g. iOS 12]
- - Browser w/ version [e.g. Chrome 70]
- - Node version: [e.g. 10.11.0]
- - npm version: [e.g. 6.4.1]
-
-**Is your issue related to the quality of image compression?**
-Please attach original and output images (you can drag & drop to attach). 
- Original image 
- Output image from Squoosh
-
-**Additional context, screenshots, screencasts**
-Add any other context about the problem here.
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@ -1,18 +0,0 @@
---
-name: Feature request
-about: Suggest an idea for this project
-labels: 
-
---
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Does other service/app have this feature?**
-Add any service you know/use that has this feature (We want to know for research)
-
-**Additional context**
-Add any other context or screenshots about the feature request here.
--- a/.travis.yml
+++ b/.travis.yml
@ -1,7 +1,5 @@
 language: node_js
 node_js:
 - node
- 10
- 8
 cache: npm
-script: npm run build
+script: npm run build || npm run build # scss ts definitions need to be generated before an actual build
--- a/README.md
+++ b/README.md
@ -1,31 +1,5 @@
-# [Squoosh]!
+# Squoosh!

-[Squoosh] is an image compression web app that allows you to dive into the advanced options provided
-by various image compressors.
+Squoosh will be an image compression web app that allows you to dive into the
+advanced options provided by various image compressors.

-# Privacy
-
-Google Analytics is used to record the following:
-
-* [Basic visit data](https://support.google.com/analytics/answer/6004245?ref_topic=2919631).
-* Before and after image size once an image is downloaded. These values are rounded to the nearest
-  kilobyte.
-
-Image compression is handled locally; no additional data is sent to the server.
-
-# Building locally
-
-Clone the repo, and:
-
-```sh
-npm install
-npm run build
-```
-
-You can run the development server with:
-
-```sh
-npm start
-```
-
-[Squoosh]: https://squoosh.app
--- a/_redirects.ejs
+++ b/_redirects.ejs
@ -1,2 +0,0 @@
-/index.html / 301
-/* /index.html 301
--- a/codecs/README.md
+++ b/codecs/README.md
@ -11,6 +11,6 @@ $ npm install
 $ npm run build
 ```

-This will build two files: `<codec name>_<enc or dec>.js` and `<codec name>_<enc or dec>.wasm`. It will most likely be necessary to set [`Module["locateFile"]`](https://kripken.github.io/emscripten-site/docs/api_reference/module.html#affecting-execution) to successfully load the `.wasm` file. When the `.js` file is loaded, a global `<codec name>_<enc or dec>` is created with the same API as an [Emscripten `Module`](https://kripken.github.io/emscripten-site/docs/api_reference/module.html).
+This will build two files: `<codec name>_<enc or dec>.js` and `<codec name>_<enc or dec>.wasm`. It will most likely be necessary to set [`Module["locateFile"]`](https://kripken.github.io/emscripten-site/docs/api_reference/module.html#affecting-execution) to sucessfully load the `.wasm` file. When the `.js` file is loaded, a global `<codec name>_<enc or dec>` is created with the same API as an [Emscripten `Module`](https://kripken.github.io/emscripten-site/docs/api_reference/module.html).

 Each codec will document its API in its README.
--- a/codecs/imagequant/package.json
+++ b/codecs/imagequant/package.json
@ -8,6 +8,6 @@
    "libimagequant": "ImageOptim/libimagequant#2.12.1"
  },
  "devDependencies": {
-    "napa": "3.0.0"
+    "napa": "^3.0.0"
  }
 }
--- a/codecs/mozjpeg_enc/package.json
+++ b/codecs/mozjpeg_enc/package.json
@ -8,6 +8,6 @@
    "mozjpeg": "mozilla/mozjpeg#v3.3.1"
  },
  "devDependencies": {
-    "napa": "3.0.0"
+    "napa": "^3.0.0"
  }
 }
--- a/codecs/optipng/README.md
+++ b/codecs/optipng/README.md
@ -1,6 +1,6 @@
 # OptiPNG

- Source: <http://optipng.sourceforge.net/>
+- Source: <https://sourceforge.net/project/optipng>
 - Version: v0.7.7

 ## Dependencies
--- a/codecs/optipng/package.json
+++ b/codecs/optipng/package.json
@ -16,7 +16,7 @@
    "zlib": "emscripten-ports/zlib"
  },
  "dependencies": {
-    "napa": "3.0.0",
+    "napa": "^3.0.0",
    "tar-dependency": "0.0.3"
  }
 }
--- a/codecs/rotate/package-lock.json
+++ b/codecs/rotate/package-lock.json
@ -1,124 +0,0 @@
-{
-  "name": "rotate",
-  "requires": true,
-  "lockfileVersion": 1,
-  "dependencies": {
-    "@protobufjs/utf8": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
-      "integrity": "sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA=",
-      "dev": true
-    },
-    "assemblyscript": {
-      "version": "github:AssemblyScript/assemblyscript#54b02c287c4d42092e4b01cc5d11bce1a53e9fb2",
-      "from": "github:AssemblyScript/assemblyscript",
-      "dev": true,
-      "requires": {
-        "@protobufjs/utf8": "^1.1.0",
-        "binaryen": "63.0.0-nightly.20190107",
-        "glob": "^7.1.3",
-        "long": "^4.0.0"
-      }
-    },
-    "balanced-match": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-      "dev": true
-    },
-    "binaryen": {
-      "version": "63.0.0-nightly.20190107",
-      "resolved": "https://registry.npmjs.org/binaryen/-/binaryen-63.0.0-nightly.20190107.tgz",
-      "integrity": "sha512-vck6ZESU9q6DeEK9v/Fk2O8d2jBsSrNlia8jpmdLZv5eqmNWpkNli+QMRa9Ezfb4wi3c+NVMuxT3Ck0g9GYe8A==",
-      "dev": true
-    },
-    "brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "requires": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-      "dev": true
-    },
-    "fs.realpath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
-      "dev": true
-    },
-    "glob": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
-      "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
-      "dev": true,
-      "requires": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.0.4",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      }
-    },
-    "inflight": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-      "dev": true,
-      "requires": {
-        "once": "^1.3.0",
-        "wrappy": "1"
-      }
-    },
-    "inherits": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-      "dev": true
-    },
-    "long": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
-      "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==",
-      "dev": true
-    },
-    "minimatch": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-      "dev": true,
-      "requires": {
-        "brace-expansion": "^1.1.7"
-      }
-    },
-    "once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-      "dev": true,
-      "requires": {
-        "wrappy": "1"
-      }
-    },
-    "path-is-absolute": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
-      "dev": true
-    },
-    "wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-      "dev": true
-    }
-  }
-}
--- a/codecs/rotate/package.json
+++ b/codecs/rotate/package.json
@ -1,9 +0,0 @@
-{
-  "name": "rotate",
-  "scripts": {
-    "build": "mv rotate.{as,ts} && asc rotate.ts -b rotate.wasm --validate -O3 --importMemory && mv rotate.{ts,as}"
-  },
-  "devDependencies": {
-    "assemblyscript": "github:AssemblyScript/assemblyscript"
-  }
-}
--- a/codecs/rotate/rotate.as
+++ b/codecs/rotate/rotate.as
@ -1,64 +0,0 @@
-export function rotate(inputWidth: i32, inputHeight: i32, rotate: i32): void {
-  const bpp = 4;
-  let offset = inputWidth * inputHeight * bpp;
-  let i = 0;
-
-  // In the straight-copy case, d1 is x, d2 is y.
-  // x starts at 0 and increases.
-  // y starts at 0 and increases.
-  let d1Start = 0;
-  let d1Limit = inputWidth;
-  let d1Advance = 1;
-  let d1Multiplier = 1;
-  let d2Start = 0;
-  let d2Limit = inputHeight;
-  let d2Advance = 1;
-  let d2Multiplier = inputWidth;
-
-  if (rotate === 90) {
-    // d1 is y, d2 is x.
-    // y starts at its max value and decreases.
-    // x starts at 0 and increases.
-    d1Start = inputHeight - 1;
-    d1Limit = inputHeight;
-    d1Advance = -1;
-    d1Multiplier = inputWidth;
-    d2Start = 0;
-    d2Limit = inputWidth;
-    d2Advance = 1;
-    d2Multiplier = 1;
-  } else if (rotate === 180) {
-    // d1 is x, d2 is y.
-    // x starts at its max and decreases.
-    // y starts at its max and decreases.
-    d1Start = inputWidth - 1;
-    d1Limit = inputWidth;
-    d1Advance = -1;
-    d1Multiplier = 1;
-    d2Start = inputHeight - 1;
-    d2Limit = inputHeight;
-    d2Advance = -1;
-    d2Multiplier = inputWidth;
-  } else if (rotate === 270) {
-    // d1 is y, d2 is x.
-    // y starts at 0 and increases.
-    // x starts at its max and decreases.
-    d1Start = 0;
-    d1Limit = inputHeight;
-    d1Advance = 1;
-    d1Multiplier = inputWidth;
-    d2Start = inputWidth - 1;
-    d2Limit = inputWidth;
-    d2Advance = -1;
-    d2Multiplier = 1;
-  }
-
-  for (let d2 = d2Start; d2 >= 0 && d2 < d2Limit; d2 += d2Advance) {
-    let d2offset = d2 * d2Multiplier;
-    for (let d1 = d1Start; d1 >= 0 && d1 < d1Limit; d1 += d1Advance) {
-      let start = ((d1 * d1Multiplier) + d2offset);
-      store<u32>(offset + i * 4, load<u32>(start * 4));
-      i += 1;
-    }
-  }
-}
--- a/codecs/rotate/rotate.wasm
+++ b/codecs/rotate/rotate.wasm
--- a/codecs/rotate/tsconfig.json
+++ b/codecs/rotate/tsconfig.json
@ -1,6 +0,0 @@
-{
-  "extends": "./node_modules/assemblyscript/std/assembly.json",
-  "include": [
-    "./**/*.ts"
-  ]
-}
--- a/codecs/webp_dec/package.json
+++ b/codecs/webp_dec/package.json
@ -8,6 +8,6 @@
    "libwebp": "webmproject/libwebp#v1.0.0"
  },
  "devDependencies": {
-    "napa": "3.0.0"
+    "napa": "^3.0.0"
  }
 }
--- a/codecs/webp_enc/package.json
+++ b/codecs/webp_enc/package.json
@ -8,6 +8,6 @@
    "libwebp": "webmproject/libwebp#v1.0.0"
  },
  "devDependencies": {
-    "napa": "3.0.0"
+    "napa": "^3.0.0"
  }
 }
--- a/codecs/webp_enc/webp_enc.cpp
+++ b/codecs/webp_enc/webp_enc.cpp
@ -26,8 +26,7 @@ val encode(std::string img, int width, int height, WebPConfig config) {
    throw std::runtime_error("Unexpected error");
  }

-  // Only use use_argb if we really need it, as it's slower.
-  pic.use_argb = config.lossless || config.use_sharp_yuv || config.preprocessing > 0;
+  pic.use_argb = !!config.lossless;
  pic.width = width;
  pic.height = height;
  pic.writer = WebPMemoryWrite;
--- 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/config/add-css-types.js
+++ b/config/add-css-types.js
@ -1,74 +0,0 @@
-const DtsCreator = require('typed-css-modules');
-const chokidar = require('chokidar');
-const util = require('util');
-const sass = require('node-sass');
-
-const sassRender = util.promisify(sass.render);
-
-async function sassToCss(path) {
-  const result = await sassRender({ file: path });
-  return result.css;
-}
-
-/**
- * @typedef {Object} Opts
- * @property {boolean} watch Watch for changes
- */
-/**
- * Create typing files for CSS & SCSS.
- *
- * @param {string[]} rootPaths Paths to search within
- * @param {Opts} [opts={}] Options.
- */
-function addCssTypes(rootPaths, opts = {}) {
-  return new Promise((resolve) => {
-    const { watch = false } = opts;
-
-    const paths = [];
-    const preReadyPromises = [];
-    let ready = false;
-
-    for (const rootPath of rootPaths) {
-      // Look for scss & css in each path.
-      paths.push(rootPath + '/**/*.scss');
-      paths.push(rootPath + '/**/*.css');
-    }
-
-    // For simplicity, the watcher is used even if we're not watching.
-    // If we're not watching, we stop the watcher after the initial files are found.
-    const watcher = chokidar.watch(paths, {
-      // Avoid processing already-processed files.
-      ignored: '*.d.*',
-      // Without this, travis and netlify builds never complete. I'm not sure why, but it might be
-      // related to https://github.com/paulmillr/chokidar/pull/758
-      persistent: watch,
-    });
-
-    function change(path) {
-      const promise = (async function() {
-        const creator = new DtsCreator({ camelCase: true });
-        const result = path.endsWith('.scss') ?
-          await creator.create(path, await sassToCss(path)) :
-          await creator.create(path);
-
-        await result.writeFile();
-      })();
-
-      if (!ready) preReadyPromises.push(promise);
-    }
-
-    watcher.on('change', change);
-    watcher.on('add', change);
-
-    // 'ready' is when events have been fired for file discovery.
-    watcher.on('ready', () => {
-      ready = true;
-      // Wait for the current set of processing to finish.
-      Promise.all(preReadyPromises).then(resolve);
-      // And if we're not watching, close the watcher.
-      if (!watch) watcher.close();
-    });
-  })
-}
-
-module.exports = addCssTypes;
--- a/global.d.ts
+++ b/global.d.ts
@ -6,8 +6,7 @@ declare interface NodeModule {
 }

 declare interface Window {
-  STATE: any;
-  ga: typeof ga;
+  STATE: any
 }

 declare namespace JSX {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,13 +1,13 @@
 {
  "private": true,
  "name": "squoosh",
-  "version": "1.3.1",
+  "version": "0.1.0",
  "license": "apache-2.0",
  "scripts": {
-    "start": "webpack-dev-server --host 0.0.0.0 --hot",
+    "start": "webpack serve --host 0.0.0.0 --hot",
    "build": "webpack -p",
-    "lint": "tslint -c tslint.json  -p tsconfig.json -t verbose 'src/**/*.{ts,tsx,js,jsx}'",
-    "lintfix": "tslint -c tslint.json -p tsconfig.json -t verbose --fix 'src/**/*.{ts,tsx,js,jsx}'"
+    "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": {
@ -15,55 +15,65 @@
    }
  },
  "devDependencies": {
-    "@types/node": "10.12.18",
-    "@types/pretty-bytes": "5.1.0",
-    "@types/webassembly-js-api": "0.0.2",
-    "@webcomponents/custom-elements": "1.2.1",
-    "@webpack-cli/serve": "0.1.3",
-    "assets-webpack-plugin": "3.9.7",
-    "chokidar": "2.0.4",
-    "classnames": "2.2.6",
-    "clean-webpack-plugin": "1.0.1",
-    "comlink": "3.1.1",
-    "copy-webpack-plugin": "4.6.0",
-    "critters-webpack-plugin": "2.2.0",
-    "css-loader": "1.0.1",
-    "ejs": "2.6.1",
-    "exports-loader": "0.7.0",
-    "file-drop-element": "0.0.9",
-    "file-loader": "3.0.1",
-    "html-webpack-plugin": "3.2.0",
-    "husky": "1.3.1",
-    "idb-keyval": "3.1.0",
-    "linkstate": "1.1.1",
-    "loader-utils": "1.2.0",
-    "mini-css-extract-plugin": "0.5.0",
-    "minimatch": "3.0.4",
-    "node-sass": "4.11.0",
-    "optimize-css-assets-webpack-plugin": "5.0.1",
-    "pointer-tracker": "2.0.3",
-    "preact": "8.4.2",
-    "prerender-loader": "1.2.0",
-    "pretty-bytes": "5.1.0",
-    "progress-bar-webpack-plugin": "1.12.0",
-    "raw-loader": "1.0.0",
-    "sass-loader": "7.1.0",
-    "script-ext-html-webpack-plugin": "2.1.3",
-    "source-map-loader": "0.2.4",
-    "style-loader": "0.23.1",
-    "terser-webpack-plugin": "1.2.1",
-    "ts-loader": "5.3.3",
-    "tslint": "5.12.1",
-    "tslint-config-airbnb": "5.11.1",
-    "tslint-config-semistandard": "7.0.0",
-    "tslint-react": "3.6.0",
-    "typed-css-modules": "0.3.7",
-    "typescript": "3.2.4",
-    "url-loader": "1.1.2",
-    "webpack": "4.28.0",
-    "webpack-bundle-analyzer": "3.0.3",
-    "webpack-cli": "3.2.1",
-    "webpack-dev-server": "3.1.14",
-    "worker-plugin": "3.0.0"
+    "@types/node": "^9.6.35",
+    "@types/pretty-bytes": "^5.1.0",
+    "@types/webassembly-js-api": "0.0.1",
+    "@webcomponents/custom-elements": "^1.2.1",
+    "assets-webpack-plugin": "^3.9.7",
+    "babel-loader": "^7.1.5",
+    "babel-plugin-jsx-pragmatic": "^1.0.2",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.5",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-react-constant-elements": "^6.23.0",
+    "babel-plugin-transform-react-jsx": "^6.24.1",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.19",
+    "babel-preset-env": "^1.7.0",
+    "babel-register": "^6.26.0",
+    "classnames": "^2.2.6",
+    "clean-webpack-plugin": "^0.1.19",
+    "comlink": "^3.0.3",
+    "copy-webpack-plugin": "^4.5.3",
+    "critters-webpack-plugin": "^2.0.1",
+    "css-loader": "^0.28.11",
+    "ejs": "^2.6.1",
+    "exports-loader": "^0.7.0",
+    "file-drop-element": "^0.0.9",
+    "file-loader": "^1.1.11",
+    "html-webpack-plugin": "^3.2.0",
+    "husky": "^1.1.2",
+    "idb-keyval": "^3.1.0",
+    "if-env": "^1.0.4",
+    "linkstate": "^1.1.1",
+    "loader-utils": "^1.1.0",
+    "mini-css-extract-plugin": "^0.4.4",
+    "minimatch": "^3.0.4",
+    "node-sass": "^4.9.4",
+    "optimize-css-assets-webpack-plugin": "^4.0.3",
+    "pinch-zoom-element": "^1.0.0",
+    "pointer-tracker": "^2.0.3",
+    "preact": "^8.3.1",
+    "prerender-loader": "^1.2.0",
+    "pretty-bytes": "^5.1.0",
+    "progress-bar-webpack-plugin": "^1.11.0",
+    "raw-loader": "^0.5.1",
+    "sass-loader": "^7.1.0",
+    "script-ext-html-webpack-plugin": "^2.0.1",
+    "source-map-loader": "^0.2.3",
+    "style-loader": "^0.22.1",
+    "ts-loader": "^4.4.2",
+    "tslint": "^5.11.0",
+    "tslint-config-airbnb": "^5.9.2",
+    "tslint-config-semistandard": "^7.0.0",
+    "tslint-react": "^3.6.0",
+    "typescript": "^2.9.2",
+    "typings-for-css-modules-loader": "^1.7.0",
+    "url-loader": "^1.1.2",
+    "webpack": "^4.19.1",
+    "webpack-bundle-analyzer": "^2.13.1",
+    "webpack-cli": "^2.1.5",
+    "webpack-dev-server": "^3.1.5",
+    "worker-plugin": "^1.1.1"
  }
 }
--- a/renovate.json
+++ b/renovate.json
@ -1,5 +0,0 @@
-{
-  "extends": [
-    "config:base"
-  ]
-}
--- a/src/codecs/imagequant/options.tsx
+++ b/src/codecs/imagequant/options.tsx
@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
-import { inputFieldValueAsNumber, konami, preventDefault } from '../../lib/util';
+import { inputFieldValueAsNumber, konami } from '../../lib/util';
 import { QuantizeOptions } from './processor-meta';
 import * as style from '../../components/Options/style.scss';
 import Expander from '../../components/expander';
@ -42,7 +42,7 @@ export default class QuantizerOptions extends Component<Props, State> {

  render({ options }: Props, { extendedSettings }: State) {
    return (
-      <form class={style.optionsSection} onSubmit={preventDefault}>
+      <form class={style.optionsSection}>
        <Expander>
          {extendedSettings ?
            <label class={style.optionTextFirst}>
--- a/src/codecs/input-processors.ts
+++ b/src/codecs/input-processors.ts
@ -1,9 +0,0 @@
-import { defaultOptions as rotateDefaultOptions } from './rotate/processor-meta';
-
-export interface InputProcessorState {
-  rotate: import('./rotate/processor-meta').RotateOptions;
-}
-
-export const defaultInputProcessorState: InputProcessorState = {
-  rotate: rotateDefaultOptions,
-};
--- a/src/codecs/mozjpeg/options.tsx
+++ b/src/codecs/mozjpeg/options.tsx
@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
-import { inputFieldChecked, inputFieldValueAsNumber, preventDefault } from '../../lib/util';
+import { inputFieldChecked, inputFieldValueAsNumber } from '../../lib/util';
 import { EncodeOptions, MozJpegColorSpace } from './encoder-meta';
 import * as style from '../../components/Options/style.scss';
 import Checkbox from '../../components/checkbox';
@ -58,7 +58,7 @@ export default class MozJPEGEncoderOptions extends Component<Props, State> {
    // I'm rendering both lossy and lossless forms, as it becomes much easier when
    // gathering the data.
    return (
-      <form class={style.optionsSection} onSubmit={preventDefault}>
+      <form class={style.optionsSection}>
        <div class={style.optionOneCell}>
          <Range
            name="quality"
--- a/src/codecs/optipng/options.tsx
+++ b/src/codecs/optipng/options.tsx
@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
-import { inputFieldValueAsNumber, preventDefault } from '../../lib/util';
+import { inputFieldValueAsNumber } from '../../lib/util';
 import { EncodeOptions } from './encoder-meta';
 import Range from '../../components/range';
 import * as style from '../../components/Options/style.scss';
@ -23,7 +23,7 @@ export default class OptiPNGEncoderOptions extends Component<Props, {}> {

  render({ options }: Props) {
    return (
-      <form class={style.optionsSection} onSubmit={preventDefault}>
+      <form class={style.optionsSection}>
        <div class={style.optionOneCell}>
          <Range
            name="level"
--- a/src/codecs/processor-worker/index.ts
+++ b/src/codecs/processor-worker/index.ts
@ -1,52 +1,43 @@
 import { expose } from 'comlink';
+import { EncodeOptions as MozJPEGEncoderOptions } from './mozjpeg/encoder-meta';
+import { QuantizeOptions } from './imagequant/processor-meta';
+import { EncodeOptions as OptiPNGEncoderOptions } from './optipng/encoder-meta';
+import { EncodeOptions as WebPEncoderOptions } from './webp/encoder-meta';

 async function mozjpegEncode(
-  data: ImageData, options: import('../mozjpeg/encoder-meta').EncodeOptions,
+  data: ImageData, options: MozJPEGEncoderOptions,
 ): Promise<ArrayBuffer> {
  const { encode } = await import(
    /* webpackChunkName: "process-mozjpeg-enc" */
-    '../mozjpeg/encoder',
+    './mozjpeg/encoder',
  );
  return encode(data, options);
 }

-async function quantize(
-  data: ImageData, opts: import('../imagequant/processor-meta').QuantizeOptions,
-): Promise<ImageData> {
+async function quantize(data: ImageData, opts: QuantizeOptions): Promise<ImageData> {
  const { process } = await import(
    /* webpackChunkName: "process-imagequant" */
-    '../imagequant/processor',
+    './imagequant/processor',
  );
  return process(data, opts);
 }

-async function rotate(
-  data: ImageData, opts: import('../rotate/processor-meta').RotateOptions,
-): Promise<ImageData> {
-  const { rotate } = await import(
-    /* webpackChunkName: "process-rotate" */
-    '../rotate/processor',
-  );
-
-  return rotate(data, opts);
-}
-
 async function optiPngEncode(
-  data: BufferSource, options: import('../optipng/encoder-meta').EncodeOptions,
+  data: BufferSource, options: OptiPNGEncoderOptions,
 ): Promise<ArrayBuffer> {
  const { compress } = await import(
    /* webpackChunkName: "process-optipng" */
-    '../optipng/encoder',
+    './optipng/encoder',
  );
  return compress(data, options);
 }

 async function webpEncode(
-  data: ImageData, options: import('../webp/encoder-meta').EncodeOptions,
+  data: ImageData, options: WebPEncoderOptions,
 ): Promise<ArrayBuffer> {
  const { encode } = await import(
    /* webpackChunkName: "process-webp-enc" */
-    '../webp/encoder',
+    './webp/encoder',
  );
  return encode(data, options);
 }
@ -54,12 +45,12 @@ async function webpEncode(
 async function webpDecode(data: ArrayBuffer): Promise<ImageData> {
  const { decode } = await import(
    /* webpackChunkName: "process-webp-dec" */
-    '../webp/decoder',
+    './webp/decoder',
  );
  return decode(data);
 }

-const exports = { mozjpegEncode, quantize, rotate, optiPngEncode, webpEncode, webpDecode };
+const exports = { mozjpegEncode, quantize, optiPngEncode, webpEncode, webpDecode };
 export type ProcessorWorkerApi = typeof exports;

 expose(exports, self);
--- a/src/codecs/processor-worker/tsconfig.json
+++ b/src/codecs/processor-worker/tsconfig.json
@ -1,18 +0,0 @@
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "strict": true,
-    "target": "esnext",
-    "module": "esnext",
-    "lib": [
-      "webworker",
-      "esnext"
-    ],
-    "moduleResolution": "node",
-    "experimentalDecorators": true,
-    "noUnusedLocals": true,
-    "sourceMap": true,
-    "allowJs": false,
-    "baseUrl": "."
-  }
-}
--- a/src/codecs/processor.ts
+++ b/src/codecs/processor.ts
@ -1,5 +1,6 @@
 import { proxy } from 'comlink';
 import { QuantizeOptions } from './imagequant/processor-meta';
+import { ProcessorWorkerApi } from './processor-worker';
 import { canvasEncode, blobToArrayBuffer } from '../lib/util';
 import { EncodeOptions as MozJPEGEncoderOptions } from './mozjpeg/encoder-meta';
 import { EncodeOptions as OptiPNGEncoderOptions } from './optipng/encoder-meta';
@ -17,10 +18,8 @@ import * as browserTIFF from './browser-tiff/encoder';
 import * as browserJP2 from './browser-jp2/encoder';
 import * as browserPDF from './browser-pdf/encoder';

-type ProcessorWorkerApi = import('./processor-worker').ProcessorWorkerApi;
-
 /** How long the worker should be idle before terminating. */
-const workerTimeout = 10000;
+const workerTimeout = 1000;

 interface ProcessingJobOptions {
  needsWorker?: boolean;
@ -63,7 +62,7 @@ export default class Processor {
          // @ts-ignore - Typescript doesn't know about the 2nd param to new Worker, and the
          // definition can't be overwritten.
          this._worker = new Worker(
-            './processor-worker',
+            './processor-worker.ts',
            { name: 'processor-worker', type: 'module' },
          ) as Worker;
          // Need to do some TypeScript trickery to make the type match.
@ -118,18 +117,12 @@ export default class Processor {
  }

  // Off main thread jobs:
+
  @Processor._processingJob({ needsWorker: true })
  imageQuant(data: ImageData, opts: QuantizeOptions): Promise<ImageData> {
    return this._workerApi!.quantize(data, opts);
  }

-  @Processor._processingJob({ needsWorker: true })
-  rotate(
-    data: ImageData, opts: import('./rotate/processor-meta').RotateOptions,
-  ): Promise<ImageData> {
-    return this._workerApi!.rotate(data, opts);
-  }
-
  @Processor._processingJob({ needsWorker: true })
  mozjpegEncode(
    data: ImageData, opts: MozJPEGEncoderOptions,
--- a/src/codecs/resize/options.tsx
+++ b/src/codecs/resize/options.tsx
@ -1,7 +1,7 @@
 import { h, Component } from 'preact';
 import linkState from 'linkstate';
 import { bind, linkRef } from '../../lib/initial-util';
-import { inputFieldValueAsNumber, inputFieldValue, preventDefault } from '../../lib/util';
+import { inputFieldValueAsNumber, inputFieldValue } from '../../lib/util';
 import { ResizeOptions } from './processor-meta';
 import * as style from '../../components/Options/style.scss';
 import Checkbox from '../../components/checkbox';
@ -78,7 +78,7 @@ export default class ResizerOptions extends Component<Props, State> {

  render({ options, isVector }: Props, { maintainAspect }: State) {
    return (
-      <form ref={linkRef(this, 'form')} class={style.optionsSection} onSubmit={preventDefault}>
+      <form ref={linkRef(this, 'form')} class={style.optionsSection}>
        <label class={style.optionTextFirst}>
          Method:
          <Select
@ -135,7 +135,7 @@ export default class ResizerOptions extends Component<Props, State> {
                onChange={this.onChange}
              >
                <option value="stretch">Stretch</option>
-                <option value="contain">Contain</option>
+                <option value="cover">Cover</option>
              </Select>
            </label>
          }
--- a/src/codecs/resize/processor-meta.ts
+++ b/src/codecs/resize/processor-meta.ts
@ -4,7 +4,7 @@ export interface ResizeOptions {
  width: number;
  height: number;
  method: 'vector' | BitmapResizeMethods;
-  fitMethod: 'stretch' | 'contain';
+  fitMethod: 'stretch' | 'cover';
 }

 export interface BitmapResizeOptions extends ResizeOptions {
--- a/src/codecs/resize/processor.ts
+++ b/src/codecs/resize/processor.ts
@ -1,7 +1,7 @@
 import { nativeResize, NativeResizeMethod, drawableToImageData } from '../../lib/util';
 import { BitmapResizeOptions, VectorResizeOptions } from './processor-meta';

-function getContainOffsets(sw: number, sh: number, dw: number, dh: number) {
+function getCoverOffsets(sw: number, sh: number, dw: number, dh: number) {
  const currentAspect = sw / sh;
  const endAspect = dw / dh;

@ -22,8 +22,8 @@ export function resize(data: ImageData, opts: BitmapResizeOptions): ImageData {
  let sw = data.width;
  let sh = data.height;

-  if (opts.fitMethod === 'contain') {
-    ({ sx, sy, sw, sh } = getContainOffsets(sw, sh, opts.width, opts.height));
+  if (opts.fitMethod === 'cover') {
+    ({ sx, sy, sw, sh } = getCoverOffsets(sw, sh, opts.width, opts.height));
  }

  return nativeResize(
@ -38,8 +38,8 @@ export function vectorResize(data: HTMLImageElement, opts: VectorResizeOptions):
  let sw = data.width;
  let sh = data.height;

-  if (opts.fitMethod === 'contain') {
-    ({ sx, sy, sw, sh } = getContainOffsets(sw, sh, opts.width, opts.height));
+  if (opts.fitMethod === 'cover') {
+    ({ sx, sy, sw, sh } = getCoverOffsets(sw, sh, opts.width, opts.height));
  }

  return drawableToImageData(data, {
--- a/src/codecs/rotate/processor-meta.ts
+++ b/src/codecs/rotate/processor-meta.ts
@ -1,12 +0,0 @@
-export interface RotateOptions {
-  rotate: 0 | 90 | 180 | 270;
-}
-
-export const defaultOptions: RotateOptions = { rotate: 0 };
-
-export interface RotateModuleInstance {
-  exports: {
-    memory: WebAssembly.Memory;
-    rotate(width: number, height: number, rotate: 0 | 90 | 180 | 270): void;
-  };
-}
--- a/src/codecs/rotate/processor.ts
+++ b/src/codecs/rotate/processor.ts
@ -1,30 +0,0 @@
-import wasmUrl from '../../../codecs/rotate/rotate.wasm';
-import { RotateOptions, RotateModuleInstance } from './processor-meta';
-
-export async function rotate(
-  data: ImageData,
-  opts: RotateOptions,
-): Promise<ImageData> {
-  const flipDimensions = opts.rotate % 180 !== 0;
-  // Number of wasm memory pages (á 64KiB) needed to store the image twice.
-  const bytesPerImage = data.width * data.height * 4;
-  const numPagesNeeded = Math.ceil(bytesPerImage * 2 / (64 * 1024));
-  const { instance } = (await (WebAssembly as any).instantiateStreaming(
-    fetch(wasmUrl),
-    {
-      env: {
-        memory: new WebAssembly.Memory({ initial: numPagesNeeded }),
-      },
-    },
-  )) as { instance: RotateModuleInstance };
-
-  const view = new Uint8ClampedArray(instance.exports.memory.buffer);
-  view.set(data.data);
-
-  instance.exports.rotate(data.width, data.height, opts.rotate);
-  return new ImageData(
-    view.slice(bytesPerImage, bytesPerImage * 2),
-    flipDimensions ? data.height : data.width,
-    flipDimensions ? data.width : data.height,
-  );
-}
--- a/src/codecs/webp/options.tsx
+++ b/src/codecs/webp/options.tsx
@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
-import { inputFieldCheckedAsNumber, inputFieldValueAsNumber, preventDefault } from '../../lib/util';
+import { inputFieldCheckedAsNumber, inputFieldValueAsNumber } from '../../lib/util';
 import { EncodeOptions, WebPImageHint } from './encoder-meta';
 import * as style from '../../components/Options/style.scss';
 import Checkbox from '../../components/checkbox';
@ -319,7 +319,7 @@ export default class WebPEncoderOptions extends Component<Props, State> {
    // I'm rendering both lossy and lossless forms, as it becomes much easier when
    // gathering the data.
    return (
-      <form class={style.optionsSection} onSubmit={preventDefault}>
+      <form class={style.optionsSection}>
        <label class={style.optionInputFirst}>
          <Checkbox
            name="lossless"
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@ -9,7 +9,8 @@ import '../../lib/SnackBar';
 import Intro from '../intro';
 import '../custom-els/LoadingSpinner';

-const ROUTE_EDITOR = '/editor';
+// This is imported for TypeScript only. It isn't used.
+import Compress from '../compress';

 const compressPromise = import(
  /* webpackChunkName: "main-app" */
@ -20,21 +21,21 @@ const offlinerPromise = import(
  '../../lib/offliner',
 );

-function back() {
-  window.history.back();
+export interface SourceImage {
+  file: File | Fileish;
+  data: ImageData;
+  vectorImage?: HTMLImageElement;
 }

 interface Props {}

 interface State {
  file?: File | Fileish;
-  isEditorOpen: Boolean;
-  Compress?: typeof import('../compress').default;
+  Compress?: typeof Compress;
 }

 export default class App extends Component<Props, State> {
  state: State = {
-    isEditorOpen: false,
    file: undefined,
    Compress: undefined,
  };
@ -56,33 +57,22 @@ export default class App extends Component<Props, State> {
    if (process.env.NODE_ENV === 'development') {
      this.setState(window.STATE);
      const oldCDU = this.componentDidUpdate;
-      this.componentDidUpdate = (props, state, prev) => {
-        if (oldCDU) oldCDU.call(this, props, state, prev);
+      this.componentDidUpdate = (props, state) => {
+        if (oldCDU) oldCDU.call(this, props, state);
        window.STATE = this.state;
      };
    }
-
-    // Since iOS 10, Apple tries to prevent disabling pinch-zoom. This is great in theory, but
-    // really breaks things on Squoosh, as you can easily end up zooming the UI when you mean to
-    // zoom the image. Once you've done this, it's really difficult to undo. Anyway, this seems to
-    // prevent it.
-    document.body.addEventListener('gesturestart', (event) => {
-      event.preventDefault();
-    });
-
-    window.addEventListener('popstate', this.onPopState);
  }

  @bind
-  private onFileDrop({ file }: FileDropEvent) {
+  private onFileDrop(event: FileDropEvent) {
+    const { file } = event;
    if (!file) return;
-    this.openEditor();
    this.setState({ file });
  }

  @bind
  private onIntroPickFile(file: File | Fileish) {
-    this.openEditor();
    this.setState({ file });
  }

@ -93,25 +83,18 @@ export default class App extends Component<Props, State> {
  }

  @bind
-  private onPopState() {
-    this.setState({ isEditorOpen: location.pathname === ROUTE_EDITOR });
+  private onBack() {
+    this.setState({ file: undefined });
  }

-  @bind
-  private openEditor() {
-    if (this.state.isEditorOpen) return;
-    history.pushState(null, '', ROUTE_EDITOR);
-    this.setState({ isEditorOpen: true });
-  }
-
-  render({}: Props, { file, isEditorOpen, Compress }: State) {
+  render({}: Props, { file, Compress }: State) {
    return (
      <div id="app" class={style.app}>
        <file-drop accept="image/*" onfiledrop={this.onFileDrop} class={style.drop}>
-          {!isEditorOpen
+          {(!file)
            ? <Intro onFile={this.onIntroPickFile} showSnack={this.showSnack} />
            : (Compress)
-              ? <Compress file={file!} showSnack={this.showSnack} onBack={back} />
+              ? <Compress file={file} showSnack={this.showSnack} onBack={this.onBack} />
              : <loading-spinner class={style.appLoader}/>
          }
          <snack-bar ref={linkRef(this, 'snackbar')} />
--- a/src/components/Options/index.tsx
+++ b/src/components/Options/index.tsx
@ -35,14 +35,12 @@ import {
 import { QuantizeOptions } from '../../codecs/imagequant/processor-meta';
 import { ResizeOptions } from '../../codecs/resize/processor-meta';
 import { PreprocessorState } from '../../codecs/preprocessors';
-import { SourceImage } from '../compress';
+import { SourceImage } from '../App';
 import Checkbox from '../checkbox';
 import Expander from '../expander';
 import Select from '../select';

-const encoderOptionsComponentMap: {
-  [x: string]: (new (...args: any[]) => Component<any, any>) | undefined;
-} = {
+const encoderOptionsComponentMap = {
  [identity.type]: undefined,
  [optiPNG.type]: OptiPNGEncoderOptions,
  [mozJPEG.type]: MozJpegEncoderOptions,
@ -83,7 +81,7 @@ export default class Options extends Component<Props, State> {
  }

  @bind
-  private onEncoderTypeChange(event: Event) {
+  onEncoderTypeChange(event: Event) {
    const el = event.currentTarget as HTMLSelectElement;

    // The select element only has values matching encoder types,
@ -93,7 +91,7 @@ export default class Options extends Component<Props, State> {
  }

  @bind
-  private onPreprocessorEnabledChange(event: Event) {
+  onPreprocessorEnabledChange(event: Event) {
    const el = event.currentTarget as HTMLInputElement;
    const preprocessor = el.name.split('.')[0] as keyof PreprocessorState;

@ -103,14 +101,14 @@ export default class Options extends Component<Props, State> {
  }

  @bind
-  private onQuantizerOptionsChange(opts: QuantizeOptions) {
+  onQuantizerOptionsChange(opts: QuantizeOptions) {
    this.props.onPreprocessorOptionsChange(
      cleanMerge(this.props.preprocessorState, 'quantizer', opts),
    );
  }

  @bind
-  private onResizeOptionsChange(opts: ResizeOptions) {
+  onResizeOptionsChange(opts: ResizeOptions) {
    this.props.onPreprocessorOptionsChange(
      cleanMerge(this.props.preprocessorState, 'resize', opts),
    );
@ -146,7 +144,7 @@ export default class Options extends Component<Props, State> {
                {preprocessorState.resize.enabled ?
                  <ResizeOptionsComponent
                    isVector={Boolean(source && source.vectorImage)}
-                    aspect={source ? source.processed.width / source.processed.height : 1}
+                    aspect={source ? (source.data.width / source.data.height) : 1}
                    options={preprocessorState.resize}
                    onChange={this.onResizeOptionsChange}
                  />
--- a/src/components/Options/style.scss
+++ b/src/components/Options/style.scss
@ -43,7 +43,6 @@ $horizontalPadding: 15px;

 .text-field {
  background: #fff;
-  color: #000;
  font: inherit;
  border: none;
  padding: 2px 0 2px 10px;
--- a/src/components/Output/custom-els/PinchZoom/index.ts
+++ b/src/components/Output/custom-els/PinchZoom/index.ts
@ -1,374 +0,0 @@
-import PointerTracker, { Pointer } from 'pointer-tracker';
-import './styles.css';
-
-interface Point {
-  clientX: number;
-  clientY: number;
-}
-
-interface ChangeOptions {
-  /**
-   * Fire a 'change' event if values are different to current values
-   */
-  allowChangeEvent?: boolean;
-}
-
-interface ApplyChangeOpts extends ChangeOptions {
-  panX?: number;
-  panY?: number;
-  scaleDiff?: number;
-  originX?: number;
-  originY?: number;
-}
-
-interface SetTransformOpts extends ChangeOptions {
-  scale?: number;
-  x?: number;
-  y?: number;
-}
-
-type ScaleRelativeToValues = 'container' | 'content';
-
-export interface ScaleToOpts extends ChangeOptions {
-  /** Transform origin. Can be a number, or string percent, eg "50%" */
-  originX?: number | string;
-  /** Transform origin. Can be a number, or string percent, eg "50%" */
-  originY?: number | string;
-  /** Should the transform origin be relative to the container, or content? */
-  relativeTo?: ScaleRelativeToValues;
-}
-
-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 {
-  if (!b) return a;
-
-  return {
-    clientX: (a.clientX + b.clientX) / 2,
-    clientY: (a.clientY + b.clientY) / 2,
-  };
-}
-
-function getAbsoluteValue(value: string | number, max: number): number {
-  if (typeof value === 'number') return value;
-
-  if (value.trimRight().endsWith('%')) {
-    return max * parseFloat(value) / 100;
-  }
-  return parseFloat(value);
-}
-
-// I'd rather use DOMMatrix/DOMPoint here, but the browser support isn't good enough.
-// Given that, better to use something everything supports.
-let cachedSvg: SVGSVGElement;
-
-function getSVG(): SVGSVGElement {
-  return cachedSvg || (cachedSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'));
-}
-
-function createMatrix(): SVGMatrix {
-  return getSVG().createSVGMatrix();
-}
-
-function createPoint(): SVGPoint {
-  return getSVG().createSVGPoint();
-}
-
-const MIN_SCALE = 0.01;
-
-export default class PinchZoom extends HTMLElement {
-  // The element that we'll transform.
-  // Ideally this would be shadow DOM, but we don't have the browser
-  // support yet.
-  private _positioningEl?: Element;
-  // Current transform.
-  private _transform: SVGMatrix = createMatrix();
-
-  constructor() {
-    super();
-
-    // Watch for children changes.
-    // Note this won't fire for initial contents,
-    // so _stageElChange is also called in connectedCallback.
-    new MutationObserver(() => this._stageElChange())
-      .observe(this, { childList: true });
-
-    // Watch for pointers
-    const pointerTracker: PointerTracker = new PointerTracker(this, {
-      start: (pointer, event) => {
-        // We only want to track 2 pointers at most
-        if (pointerTracker.currentPointers.length === 2 || !this._positioningEl) return false;
-        event.preventDefault();
-        return true;
-      },
-      move: (previousPointers) => {
-        this._onPointerMove(previousPointers, pointerTracker.currentPointers);
-      },
-    });
-
-    this.addEventListener('wheel', event => this._onWheel(event));
-  }
-
-  connectedCallback() {
-    this._stageElChange();
-  }
-
-  get x() {
-    return this._transform.e;
-  }
-
-  get y() {
-    return this._transform.f;
-  }
-
-  get scale() {
-    return this._transform.a;
-  }
-
-  /**
-   * Change the scale, adjusting x/y by a given transform origin.
-   */
-  scaleTo(scale: number, opts: ScaleToOpts = {}) {
-    let {
-      originX = 0,
-      originY = 0,
-    } = opts;
-
-    const {
-      relativeTo = 'content',
-      allowChangeEvent = false,
-    } = opts;
-
-    const relativeToEl = (relativeTo === 'content' ? this._positioningEl : this);
-
-    // No content element? Fall back to just setting scale
-    if (!relativeToEl || !this._positioningEl) {
-      this.setTransform({ scale, allowChangeEvent });
-      return;
-    }
-
-    const rect = relativeToEl.getBoundingClientRect();
-    originX = getAbsoluteValue(originX, rect.width);
-    originY = getAbsoluteValue(originY, rect.height);
-
-    if (relativeTo === 'content') {
-      originX += this.x;
-      originY += this.y;
-    } else {
-      const currentRect = this._positioningEl.getBoundingClientRect();
-      originX -= currentRect.left;
-      originY -= currentRect.top;
-    }
-
-    this._applyChange({
-      allowChangeEvent,
-      originX,
-      originY,
-      scaleDiff: scale / this.scale,
-    });
-  }
-
-  /**
-   * Update the stage with a given scale/x/y.
-   */
-  setTransform(opts: SetTransformOpts = {}) {
-    const {
-      scale = this.scale,
-      allowChangeEvent = false,
-    } = opts;
-
-    let {
-      x = this.x,
-      y = this.y,
-    } = opts;
-
-    // If we don't have an element to position, just set the value as given.
-    // We'll check bounds later.
-    if (!this._positioningEl) {
-      this._updateTransform(scale, x, y, allowChangeEvent);
-      return;
-    }
-
-    // Get current layout
-    const thisBounds = this.getBoundingClientRect();
-    const positioningElBounds = this._positioningEl.getBoundingClientRect();
-
-    // Not displayed. May be disconnected or display:none.
-    // Just take the values, and we'll check bounds later.
-    if (!thisBounds.width || !thisBounds.height) {
-      this._updateTransform(scale, x, y, allowChangeEvent);
-      return;
-    }
-
-    // Create points for _positioningEl.
-    let topLeft = createPoint();
-    topLeft.x = positioningElBounds.left - thisBounds.left;
-    topLeft.y = positioningElBounds.top - thisBounds.top;
-    let bottomRight = createPoint();
-    bottomRight.x = positioningElBounds.width + topLeft.x;
-    bottomRight.y = positioningElBounds.height + topLeft.y;
-
-    // Calculate the intended position of _positioningEl.
-    const matrix = createMatrix()
-      .translate(x, y)
-      .scale(scale)
-      // Undo current transform
-      .multiply(this._transform.inverse());
-
-    topLeft = topLeft.matrixTransform(matrix);
-    bottomRight = bottomRight.matrixTransform(matrix);
-
-    // Ensure _positioningEl can't move beyond out-of-bounds.
-    // Correct for x
-    if (topLeft.x > thisBounds.width) {
-      x += thisBounds.width - topLeft.x;
-    } else if (bottomRight.x < 0) {
-      x += -bottomRight.x;
-    }
-
-    // Correct for y
-    if (topLeft.y > thisBounds.height) {
-      y += thisBounds.height - topLeft.y;
-    } else if (bottomRight.y < 0) {
-      y += -bottomRight.y;
-    }
-
-    this._updateTransform(scale, x, y, allowChangeEvent);
-  }
-
-  /**
-   * Update transform values without checking bounds. This is only called in setTransform.
-   */
-  private _updateTransform(scale: number, x: number, y: number, allowChangeEvent: boolean) {
-    // Avoid scaling to zero
-    if (scale < MIN_SCALE) return;
-
-    // Return if there's no change
-    if (
-      scale === this.scale &&
-      x === this.x &&
-      y === this.y
-    ) return;
-
-    this._transform.e = x;
-    this._transform.f = y;
-    this._transform.d = this._transform.a = scale;
-
-    this.style.setProperty('--x', this.x + 'px');
-    this.style.setProperty('--y', this.y + 'px');
-    this.style.setProperty('--scale', this.scale + '');
-
-    if (allowChangeEvent) {
-      const event = new Event('change', { bubbles: true });
-      this.dispatchEvent(event);
-    }
-  }
-
-  /**
-   * Called when the direct children of this element change.
-   * Until we have have shadow dom support across the board, we
-   * require a single element to be the child of <pinch-zoom>, and
-   * that's the element we pan/scale.
-   */
-  private _stageElChange() {
-    this._positioningEl = undefined;
-
-    if (this.children.length === 0) return;
-
-    this._positioningEl = this.children[0];
-
-    if (this.children.length > 1) {
-      console.warn('<pinch-zoom> must not have more than one child.');
-    }
-
-    // Do a bounds check
-    this.setTransform({ allowChangeEvent: true });
-  }
-
-  private _onWheel(event: WheelEvent) {
-    if (!this._positioningEl) return;
-    event.preventDefault();
-
-    const currentRect = this._positioningEl.getBoundingClientRect();
-    let { deltaY } = event;
-    const { ctrlKey, deltaMode } = event;
-
-    if (deltaMode === 1) { // 1 is "lines", 0 is "pixels"
-      // Firefox uses "lines" for some types of mouse
-      deltaY *= 15;
-    }
-
-    // ctrlKey is true when pinch-zooming on a trackpad.
-    const divisor = ctrlKey ? 100 : 300;
-    const scaleDiff = 1 - deltaY / divisor;
-
-    this._applyChange({
-      scaleDiff,
-      originX: event.clientX - currentRect.left,
-      originY: event.clientY - currentRect.top,
-      allowChangeEvent: true,
-    });
-  }
-
-  private _onPointerMove(previousPointers: Pointer[], currentPointers: Pointer[]) {
-    if (!this._positioningEl) return;
-
-    // Combine next points with previous points
-    const currentRect = this._positioningEl.getBoundingClientRect();
-
-    // For calculating panning movement
-    const prevMidpoint = getMidpoint(previousPointers[0], previousPointers[1]);
-    const newMidpoint = getMidpoint(currentPointers[0], currentPointers[1]);
-
-    // Midpoint within the element
-    const originX = prevMidpoint.clientX - currentRect.left;
-    const originY = prevMidpoint.clientY - currentRect.top;
-
-    // Calculate the desired change in scale
-    const prevDistance = getDistance(previousPointers[0], previousPointers[1]);
-    const newDistance = getDistance(currentPointers[0], currentPointers[1]);
-    const scaleDiff = prevDistance ? newDistance / prevDistance : 1;
-
-    this._applyChange({
-      originX, originY, scaleDiff,
-      panX: newMidpoint.clientX - prevMidpoint.clientX,
-      panY: newMidpoint.clientY - prevMidpoint.clientY,
-      allowChangeEvent: true,
-    });
-  }
-
-  /** Transform the view & fire a change event */
-  private _applyChange(opts: ApplyChangeOpts = {}) {
-    const {
-      panX = 0, panY = 0,
-      originX = 0, originY = 0,
-      scaleDiff = 1,
-      allowChangeEvent = false,
-    } = opts;
-
-    const matrix = createMatrix()
-      // Translate according to panning.
-      .translate(panX, panY)
-      // Scale about the origin.
-      .translate(originX, originY)
-      // Apply current translate
-      .translate(this.x, this.y)
-      .scale(scaleDiff)
-      .translate(-originX, -originY)
-      // Apply current scale.
-      .scale(this.scale);
-
-    // Convert the transform into basic translate & scale.
-    this.setTransform({
-      allowChangeEvent,
-      scale: matrix.a,
-      x: matrix.e,
-      y: matrix.f,
-    });
-  }
-}
-
-customElements.define('pinch-zoom', PinchZoom);
--- a/src/components/Output/custom-els/PinchZoom/missing-types.d.ts
+++ b/src/components/Output/custom-els/PinchZoom/missing-types.d.ts
@ -1,16 +0,0 @@
-declare interface CSSStyleDeclaration {
-  willChange: string | null;
-}
-
-// TypeScript, you make me sad.
-// https://github.com/Microsoft/TypeScript/issues/18756
-interface Window {
-  PointerEvent: typeof PointerEvent;
-  Touch: typeof Touch;
-}
-
-declare namespace JSX {
-  interface IntrinsicElements {
-    'pinch-zoom': HTMLAttributes;
-  }
-}
--- a/src/components/Output/custom-els/PinchZoom/styles.css
+++ b/src/components/Output/custom-els/PinchZoom/styles.css
@ -1,14 +0,0 @@
-pinch-zoom {
-  display: block;
-  overflow: hidden;
-  touch-action: none;
-  --scale: 1;
-  --x: 0;
-  --y: 0;
-}
-
-pinch-zoom > * {
-  transform: translate(var(--x), var(--y)) scale(var(--scale));
-  transform-origin: 0 0;
-  will-change: transform;
-}
--- a/src/components/Output/index.tsx
+++ b/src/components/Output/index.tsx
@ -1,33 +1,21 @@
 import { h, Component } from 'preact';
-import PinchZoom, { ScaleToOpts } from './custom-els/PinchZoom';
-import './custom-els/PinchZoom';
+import PinchZoom, { ScaleToOpts } from 'pinch-zoom-element/lib';
+import 'pinch-zoom-element/lib';
 import './custom-els/TwoUp';
 import * as style from './style.scss';
 import { bind, linkRef } from '../../lib/initial-util';
 import { shallowEqual, drawDataToCanvas } from '../../lib/util';
-import {
-    ToggleBackgroundIcon,
-    AddIcon,
-    RemoveIcon,
-    BackIcon,
-    ToggleBackgroundActiveIcon,
-    RotateIcon,
-} from '../../lib/icons';
+import { ToggleIcon, AddIcon, RemoveIcon, BackIcon } from '../../lib/icons';
 import { twoUpHandle } from './custom-els/TwoUp/styles.css';
-import { InputProcessorState } from '../../codecs/input-processors';
-import { cleanSet } from '../../lib/clean-modify';
-import { SourceImage } from '../compress';

 interface Props {
-  source?: SourceImage;
-  inputProcessorState?: InputProcessorState;
+  originalImage?: ImageData;
  mobileView: boolean;
  leftCompressed?: ImageData;
  rightCompressed?: ImageData;
  leftImgContain: boolean;
  rightImgContain: boolean;
  onBack: () => void;
-  onInputProcessorChange: (newState: InputProcessorState) => void;
 }

 interface State {
@ -60,15 +48,6 @@ export default class Output extends Component<Props, State> {
    const leftDraw = this.leftDrawable();
    const rightDraw = this.rightDrawable();

-    // Reset the pinch zoom, which may have an position set from the previous view, after pressing
-    // the back button.
-    this.pinchZoomLeft!.setTransform({
-      allowChangeEvent: true,
-      x: 0,
-      y: 0,
-      scale: 1,
-    });
-
    if (this.canvasLeft && leftDraw) {
      drawDataToCanvas(this.canvasLeft, leftDraw);
    }
@ -82,38 +61,6 @@ export default class Output extends Component<Props, State> {
    const prevRightDraw = this.rightDrawable(prevProps);
    const leftDraw = this.leftDrawable();
    const rightDraw = this.rightDrawable();
-    const sourceFileChanged =
-      // Has the value become (un)defined?
-      (!!this.props.source !== !!prevProps.source) ||
-      // Or has the file changed?
-      (this.props.source && prevProps.source && this.props.source.file !== prevProps.source.file);
-
-    const oldSourceData = prevProps.source && prevProps.source.processed;
-    const newSourceData = this.props.source && this.props.source.processed;
-    const pinchZoom = this.pinchZoomLeft!;
-
-    if (sourceFileChanged) {
-      // New image? Reset the pinch-zoom.
-      pinchZoom.setTransform({
-        allowChangeEvent: true,
-        x: 0,
-        y: 0,
-        scale: 1,
-      });
-    } else if (oldSourceData && newSourceData && oldSourceData !== newSourceData) {
-      // Since the pinch zoom transform origin is the top-left of the content, we need to flip
-      // things around a bit when the content size changes, so the new content appears as if it were
-      // central to the previous content.
-      const scaleChange = 1 - pinchZoom.scale;
-      const oldXScaleOffset = oldSourceData.width / 2 * scaleChange;
-      const oldYScaleOffset = oldSourceData.height / 2 * scaleChange;
-
-      pinchZoom.setTransform({
-        allowChangeEvent: true,
-        x: pinchZoom.x - oldXScaleOffset + oldYScaleOffset,
-        y: pinchZoom.y - oldYScaleOffset + oldXScaleOffset,
-      });
-    }

    if (leftDraw && leftDraw !== prevLeftDraw && this.canvasLeft) {
      drawDataToCanvas(this.canvasLeft, leftDraw);
@ -121,6 +68,16 @@ export default class Output extends Component<Props, State> {
    if (rightDraw && rightDraw !== prevRightDraw && this.canvasRight) {
      drawDataToCanvas(this.canvasRight, rightDraw);
    }
+
+    if (this.props.originalImage !== prevProps.originalImage && this.pinchZoomLeft) {
+      // New image? Reset the pinch-zoom.
+      this.pinchZoomLeft.setTransform({
+        allowChangeEvent: true,
+        x: 0,
+        y: 0,
+        scale: 1,
+      });
+    }
  }

  shouldComponentUpdate(nextProps: Props, nextState: State) {
@ -128,11 +85,11 @@ export default class Output extends Component<Props, State> {
  }

  private leftDrawable(props: Props = this.props): ImageData | undefined {
-    return props.leftCompressed || (props.source && props.source.processed);
+    return props.leftCompressed || props.originalImage;
  }

  private rightDrawable(props: Props = this.props): ImageData | undefined {
-    return props.rightCompressed || (props.source && props.source.processed);
+    return props.rightCompressed || props.originalImage;
  }

  @bind
@ -156,20 +113,6 @@ export default class Output extends Component<Props, State> {
    this.pinchZoomLeft.scaleTo(this.state.scale / 1.25, scaleToOpts);
  }

-  @bind
-  private onRotateClick() {
-    const { inputProcessorState } = this.props;
-    if (!inputProcessorState) return;
-
-    const newState = cleanSet(
-      inputProcessorState,
-      'rotate.rotate',
-      (inputProcessorState.rotate.rotate + 90) % 360,
-    );
-
-    this.props.onInputProcessorChange(newState);
-  }
-
  @bind
  private onScaleValueFocus() {
    this.setState({ editingScale: true }, () => {
@ -249,13 +192,11 @@ export default class Output extends Component<Props, State> {
  }

  render(
-    { mobileView, leftImgContain, rightImgContain, source, onBack }: Props,
+    { mobileView, leftImgContain, rightImgContain, originalImage, onBack }: Props,
    { scale, editingScale, altBackground }: State,
  ) {
    const leftDraw = this.leftDrawable();
    const rightDraw = this.rightDrawable();
-    // To keep position stable, the output is put in a square using the longest dimension.
-    const originalImage = source && source.processed;

    return (
      <div class={`${style.output} ${altBackground ? style.altBackground : ''}`}>
@ -277,7 +218,7 @@ export default class Output extends Component<Props, State> {
            ref={linkRef(this, 'pinchZoomLeft')}
          >
            <canvas
-              class={style.pinchTarget}
+              class={style.outputCanvas}
              ref={linkRef(this, 'canvasLeft')}
              width={leftDraw && leftDraw.width}
              height={leftDraw && leftDraw.height}
@ -290,7 +231,7 @@ export default class Output extends Component<Props, State> {
          </pinch-zoom>
          <pinch-zoom class={style.pinchZoom} ref={linkRef(this, 'pinchZoomRight')}>
            <canvas
-              class={style.pinchTarget}
+              class={style.outputCanvas}
              ref={linkRef(this, 'canvasRight')}
              width={rightDraw && rightDraw.width}
              height={rightDraw && rightDraw.height}
@ -336,21 +277,10 @@ export default class Output extends Component<Props, State> {
              <AddIcon />
            </button>
          </div>
-          <div class={style.buttonsNoWrap}>
-            <button class={style.button} onClick={this.onRotateClick} title="Rotate image">
-              <RotateIcon />
-            </button>
-            <button
-              class={`${style.button} ${altBackground ? style.active : ''}`}
-              onClick={this.toggleBackground}
-              title="Change canvas color"
-            >
-              {altBackground
-                ? <ToggleBackgroundActiveIcon />
-                : <ToggleBackgroundIcon />
-              }
-            </button>
-          </div>
+          <button class={style.button} onClick={this.toggleBackground}>
+            <ToggleIcon />
+            Toggle Background
+          </button>
        </div>
      </div>
    );
--- a/src/components/Output/missing-types.d.ts
+++ b/src/components/Output/missing-types.d.ts
@ -0,0 +1,5 @@
+declare namespace JSX {
+  interface IntrinsicElements {
+    'pinch-zoom': HTMLAttributes;
+  }
+}
--- a/src/components/Output/style.scss
+++ b/src/components/Output/style.scss
@ -31,15 +31,6 @@
  align-items: center;
 }

-.pinch-target {
-  // This fixes a severe painting bug in Chrome.
-  // We should try to remove this once the issue is fixed.
-  // https://bugs.chromium.org/p/chromium/issues/detail?id=870222#c10
-  will-change: auto;
-  // Prevent the image becoming misshapen due to default flexbox layout.
-  flex-shrink: 0;
-}
-
 .controls {
  position: absolute;
  display: flex;
@ -64,7 +55,6 @@
    left: 320px;
    right: 320px;
    bottom: 0;
-    flex-wrap: wrap-reverse;
  }
 }

@ -97,7 +87,6 @@
  white-space: nowrap;
  height: 36px;
  padding: 0 8px;
-  cursor: pointer;

  @media (min-width: 600px) {
    height: 48px;
@ -112,20 +101,15 @@
 }

 .button {
+  text-transform: uppercase;
  color: var(--button-fg);
+  cursor: pointer;
+  text-indent: 6px;
+  font-size: 110%;

  &:hover {
    background-color: #eee;
  }
-
-  &.active {
-    background: #34B9EB;
-    color: #fff;
-
-    &:hover {
-      background: #32a3ce;
-    }
-  }
 }

 .zoom {
@ -149,18 +133,17 @@
  border-bottom: 1px dashed #999;
 }

+.output-canvas {
+  flex-shrink: 0;
+  // This fixes a severe painting bug in Chrome.
+  // We should try to remove this once the issue is fixed.
+  // https://bugs.chromium.org/p/chromium/issues/detail?id=870222#c10
+  will-change: auto;
+}
+
 .back {
  position: absolute;
  top: 0;
  left: 0;
  padding: 9px;
 }
-
-.buttons-no-wrap {
-  display: flex;
-  pointer-events: none;
-
-  & > * {
-    pointer-events: auto;
-  }
-}
--- a/src/components/compress/custom-els/MultiPanel/index.ts
+++ b/src/components/compress/custom-els/MultiPanel/index.ts
@ -103,7 +103,7 @@ export default class MultiPanel extends HTMLElement {

  // KeyDown event handler
  private _onKeyDown(event: KeyboardEvent) {
-    const selectedEl = document.activeElement!;
+    const selectedEl = document.activeElement;
    const heading = getClosestHeading(selectedEl);

    // if keydown event is not on heading element, ignore
@ -252,8 +252,8 @@ export default class MultiPanel extends HTMLElement {
      return this.firstElementChild as HTMLElement;
    }
    // previous Element of active Element is previous Content,
-    // previous Element of previous Content is previousHeading
-    const previousContent = document.activeElement!.previousElementSibling;
+    // previous Element of previous Content  is previousHeading
+    const previousContent = document.activeElement.previousElementSibling;
    if (previousContent) {
      return previousContent.previousElementSibling as HTMLElement;
    }
@ -263,7 +263,7 @@ export default class MultiPanel extends HTMLElement {
  private _nextHeading() {
    // activeElement would be the currently selected heading
    // 2 elemements after that would be the next heading.
-    const nextContent = document.activeElement!.nextElementSibling;
+    const nextContent = document.activeElement.nextElementSibling;
    if (nextContent) {
      return nextContent.nextElementSibling as HTMLElement;
    }
--- a/src/components/compress/index.tsx
+++ b/src/components/compress/index.tsx
@ -35,29 +35,21 @@ import { VectorResizeOptions, BitmapResizeOptions } from '../../codecs/resize/pr
 import './custom-els/MultiPanel';
 import Results from '../results';
 import { ExpandIcon, CopyAcrossIconProps } from '../../lib/icons';
-import SnackBarElement from '../../lib/SnackBar';
-import { InputProcessorState, defaultInputProcessorState } from '../../codecs/input-processors';
+import SnackBarElement from 'src/lib/SnackBar';

 export interface SourceImage {
  file: File | Fileish;
-  decoded: ImageData;
-  processed: ImageData;
+  data: ImageData;
  vectorImage?: HTMLImageElement;
-  inputProcessorState: InputProcessorState;
 }

-interface SideSettings {
-  preprocessorState: PreprocessorState;
-  encoderState: EncoderState;
-}
-
-interface Side {
+interface EncodedImage {
  preprocessed?: ImageData;
  file?: Fileish;
  downloadUrl?: string;
  data?: ImageData;
-  latestSettings: SideSettings;
-  encodedSettings?: SideSettings;
+  preprocessorState: PreprocessorState;
+  encoderState: EncoderState;
  loading: boolean;
  /** Counter of the latest bmp currently encoding */
  loadingCounter: number;
@ -73,7 +65,7 @@ interface Props {

 interface State {
  source?: SourceImage;
-  sides: [Side, Side];
+  images: [EncodedImage, EncodedImage];
  /** Source image load */
  loading: boolean;
  loadingCounter: number;
@ -85,27 +77,12 @@ interface UpdateImageOptions {
  skipPreprocessing?: boolean;
 }

-async function processInput(
-  data: ImageData,
-  inputProcessData: InputProcessorState,
-  processor: Processor,
-) {
-  let processedData = data;
-
-  if (inputProcessData.rotate.rotate !== 0) {
-    processedData = await processor.rotate(processedData, inputProcessData.rotate);
-  }
-
-  return processedData;
-}
-
 async function preprocessImage(
  source: SourceImage,
  preprocessData: PreprocessorState,
  processor: Processor,
 ): Promise<ImageData> {
-  let result = source.processed;
-
+  let result = source.data;
  if (preprocessData.resize.enabled) {
    if (preprocessData.resize.method === 'vector' && source.vectorImage) {
      result = processor.vectorResize(
@ -154,26 +131,6 @@ async function compressImage(
  );
 }

-function stateForNewSourceData(state: State, newSource: SourceImage): State {
-  let newState = { ...state };
-
-  for (const i of [0, 1]) {
-    // Ditch previous encodings
-    const downloadUrl = state.sides[i].downloadUrl;
-    if (downloadUrl) URL.revokeObjectURL(downloadUrl);
-
-    newState = cleanMerge(state, `sides.${i}`, {
-      preprocessed: undefined,
-      file: undefined,
-      downloadUrl: undefined,
-      data: undefined,
-      encodedSettings: undefined,
-    });
-  }
-
-  return newState;
-}
-
 async function processSvg(blob: Blob): Promise<HTMLImageElement> {
  // Firefox throws if you try to draw an SVG to canvas that doesn't have width/height.
  // In Chrome it loads, but drawImage behaves weirdly.
@ -205,8 +162,6 @@ const resultTitles = ['Top', 'Bottom'];
 const buttonPositions =
  ['download-left', 'download-right'] as ('download-left' | 'download-right')[];

-const originalDocumentTitle = document.title;
-
 export default class Compress extends Component<Props, State> {
  widthQuery = window.matchMedia('(max-width: 599px)');

@ -214,21 +169,17 @@ export default class Compress extends Component<Props, State> {
    source: undefined,
    loading: false,
    loadingCounter: 0,
-    sides: [
+    images: [
      {
-        latestSettings: {
-          preprocessorState: defaultPreprocessorState,
-          encoderState: { type: identity.type, options: identity.defaultOptions },
-        },
+        preprocessorState: defaultPreprocessorState,
+        encoderState: { type: identity.type, options: identity.defaultOptions },
        loadingCounter: 0,
        loadedCounter: 0,
        loading: false,
      },
      {
-        latestSettings: {
-          preprocessorState: defaultPreprocessorState,
-          encoderState: { type: mozJPEG.type, options: mozJPEG.defaultOptions },
-        },
+        preprocessorState: defaultPreprocessorState,
+        encoderState: { type: mozJPEG.type, options: mozJPEG.defaultOptions },
        loadingCounter: 0,
        loadedCounter: 0,
        loading: false,
@ -240,8 +191,6 @@ export default class Compress extends Component<Props, State> {
  private readonly encodeCache = new ResultCache();
  private readonly leftProcessor = new Processor();
  private readonly rightProcessor = new Processor();
-  // For debouncing calls to updateImage for each side.
-  private readonly updateImageTimeoutIds: [number?, number?] = [undefined, undefined];

  constructor(props: Props) {
    super(props);
@ -258,7 +207,7 @@ export default class Compress extends Component<Props, State> {

  private onEncoderTypeChange(index: 0 | 1, newType: EncoderType): void {
    this.setState({
-      sides: cleanSet(this.state.sides, `${index}.latestSettings.encoderState`, {
+      images: cleanSet(this.state.images, `${index}.encoderState`, {
        type: newType,
        options: encoderMap[newType].defaultOptions,
      }),
@ -267,50 +216,39 @@ export default class Compress extends Component<Props, State> {

  private onPreprocessorOptionsChange(index: 0 | 1, options: PreprocessorState): void {
    this.setState({
-      sides: cleanSet(this.state.sides, `${index}.latestSettings.preprocessorState`, options),
+      images: cleanSet(this.state.images, `${index}.preprocessorState`, options),
    });
  }

  private onEncoderOptionsChange(index: 0 | 1, options: EncoderOptions): void {
    this.setState({
-      sides: cleanSet(this.state.sides, `${index}.latestSettings.encoderState.options`, options),
+      images: cleanSet(this.state.images, `${index}.encoderState.options`, options),
    });
  }

-  private updateDocumentTitle(filename: string = ''): void {
-    document.title = filename ? `${filename} - ${originalDocumentTitle}` : originalDocumentTitle;
-  }
-
  componentWillReceiveProps(nextProps: Props): void {
    if (nextProps.file !== this.props.file) {
      this.updateFile(nextProps.file);
    }
  }

-  componentWillUnmount(): void {
-    this.updateDocumentTitle();
-  }
-
  componentDidUpdate(prevProps: Props, prevState: State): void {
-    const { source, sides } = this.state;
+    const { source, images } = this.state;

-    const sourceDataChanged =
-      // Has the source object become set/unset?
-      !!source !== !!prevState.source ||
-      // Or has the processed data changed?
-      (source && prevState.source && source.processed !== prevState.source.processed);
-
-    for (const [i, side] of sides.entries()) {
-      const prevSettings = prevState.sides[i].latestSettings;
-      const encoderChanged = side.latestSettings.encoderState !== prevSettings.encoderState;
-      const preprocessorChanged =
-        side.latestSettings.preprocessorState !== prevSettings.preprocessorState;
+    for (const [i, image] of images.entries()) {
+      const prevImage = prevState.images[i];
+      const sourceChanged = source !== prevState.source;
+      const encoderChanged = image.encoderState !== prevImage.encoderState;
+      const preprocessorChanged = image.preprocessorState !== prevImage.preprocessorState;

      // The image only needs updated if the encoder/preprocessor settings have changed, or the
      // source has changed.
-      if (sourceDataChanged || encoderChanged || preprocessorChanged) {
-        this.queueUpdateImage(i, {
-          skipPreprocessing: !sourceDataChanged && !preprocessorChanged,
+      if (sourceChanged || encoderChanged || preprocessorChanged) {
+        if (prevImage.downloadUrl) URL.revokeObjectURL(prevImage.downloadUrl);
+        this.updateImage(i, {
+          skipPreprocessing: !sourceChanged && !preprocessorChanged,
+        }).catch((err) => {
+          console.error(err);
        });
      }
    }
@ -318,15 +256,10 @@ export default class Compress extends Component<Props, State> {

  private async onCopyToOtherClick(index: 0 | 1) {
    const otherIndex = (index + 1) % 2;
-    const oldSettings = this.state.sides[otherIndex];
-    const newSettings = { ...this.state.sides[index] };
-
-    // Create a new object URL for the new settings. This avoids both sides sharing a URL, which
-    // means it can be safely revoked without impacting the other side.
-    if (newSettings.file) newSettings.downloadUrl = URL.createObjectURL(newSettings.file);
+    const oldSettings = this.state.images[otherIndex];

    this.setState({
-      sides: cleanSet(this.state.sides, otherIndex, newSettings),
+      images: cleanSet(this.state.images, otherIndex, this.state.images[index]),
    });

    const result = await this.props.showSnack('Settings copied across', {
@ -337,67 +270,13 @@ export default class Compress extends Component<Props, State> {
    if (result !== 'undo') return;

    this.setState({
-      sides: cleanSet(this.state.sides, otherIndex, oldSettings),
+      images: cleanSet(this.state.images, otherIndex, oldSettings),
    });
  }

-  @bind
-  private async onInputProcessorChange(options: InputProcessorState): Promise<void> {
-    const source = this.state.source;
-    if (!source) return;
-
-    const oldRotate = source.inputProcessorState.rotate.rotate;
-    const newRotate = options.rotate.rotate;
-    const orientationChanged = oldRotate % 180 !== newRotate % 180;
-    const loadingCounter = this.state.loadingCounter + 1;
-    // Either processor is good enough here.
-    const processor = this.leftProcessor;
-
-    this.setState({
-      loadingCounter, loading: true,
-      source: cleanSet(source, 'inputProcessorState', options),
-    });
-
-    // Abort any current encode jobs, as they're redundant now.
-    this.leftProcessor.abortCurrent();
-    this.rightProcessor.abortCurrent();
-
-    try {
-      const processed = await processInput(source.decoded, options, processor);
-
-      // Another file has been opened/processed before this one processed.
-      if (this.state.loadingCounter !== loadingCounter) return;
-
-      let newState = { ...this.state, loading: false };
-      newState = cleanSet(newState, 'source.processed', processed);
-      newState = stateForNewSourceData(newState, newState.source!);
-
-      if (orientationChanged) {
-        // If orientation has changed, we should flip the resize values.
-        for (const i of [0, 1]) {
-          const resizeSettings = newState.sides[i].latestSettings.preprocessorState.resize;
-          newState = cleanMerge(newState, `sides.${i}.latestSettings.preprocessorState.resize`, {
-            width: resizeSettings.height,
-            height: resizeSettings.width,
-          });
-        }
-      }
-      this.setState(newState);
-    } catch (err) {
-      if (err.name === 'AbortError') return;
-      console.error(err);
-      // Another file has been opened/processed before this one processed.
-      if (this.state.loadingCounter !== loadingCounter) return;
-      this.props.showSnack('Processing error');
-      this.setState({ loading: false });
-    }
-  }
-
  @bind
  private async updateFile(file: File | Fileish) {
    const loadingCounter = this.state.loadingCounter + 1;
-    // Either processor is good enough here.
-    const processor = this.leftProcessor;

    this.setState({ loadingCounter, loading: true });

@ -406,7 +285,7 @@ export default class Compress extends Component<Props, State> {
    this.rightProcessor.abortCurrent();

    try {
-      let decoded: ImageData;
+      let data: ImageData;
      let vectorImage: HTMLImageElement | undefined;

      // Special-case SVG. We need to avoid createImageBitmap because of
@ -414,96 +293,73 @@ export default class Compress extends Component<Props, State> {
      // Also, we cache the HTMLImageElement so we can perform vector resizing later.
      if (file.type.startsWith('image/svg+xml')) {
        vectorImage = await processSvg(file);
-        decoded = drawableToImageData(vectorImage);
+        data = drawableToImageData(vectorImage);
      } else {
        // Either processor is good enough here.
-        decoded = await decodeImage(file, processor);
+        data = await decodeImage(file, this.leftProcessor);
      }

-      const processed = await processInput(decoded, defaultInputProcessorState, processor);
-
-      // Another file has been opened/processed before this one processed.
+      // Another file has been opened before this one processed.
      if (this.state.loadingCounter !== loadingCounter) return;

      let newState: State = {
        ...this.state,
-        source: {
-          decoded, file, vectorImage, processed,
-          inputProcessorState: defaultInputProcessorState,
-        },
+        source: { data, file, vectorImage },
        loading: false,
      };

-      newState = stateForNewSourceData(newState, newState.source!);
-
      for (const i of [0, 1]) {
+        // Ditch previous encodings
+        const downloadUrl = this.state.images[i].downloadUrl;
+        if (downloadUrl) URL.revokeObjectURL(downloadUrl!);
+
+        newState = cleanMerge(newState, `images.${i}`, {
+          preprocessed: undefined,
+          file: undefined,
+          downloadUrl: undefined,
+          data: undefined,
+        });
+
        // Default resize values come from the image:
-        newState = cleanMerge(newState, `sides.${i}.latestSettings.preprocessorState.resize`, {
-          width: processed.width,
-          height: processed.height,
+        newState = cleanMerge(newState, `images.${i}.preprocessorState.resize`, {
+          width: data.width,
+          height: data.height,
          method: vectorImage ? 'vector' : 'browser-high',
        });
      }

-      this.updateDocumentTitle(file.name);
      this.setState(newState);
    } catch (err) {
      if (err.name === 'AbortError') return;
      console.error(err);
-      // Another file has been opened/processed before this one processed.
+      // Another file has been opened before this one processed.
      if (this.state.loadingCounter !== loadingCounter) return;
      this.props.showSnack('Invalid image');
      this.setState({ loading: false });
    }
  }

-  /**
-   * Debounce the heavy lifting of updateImage.
-   * Otherwise, the thrashing causes jank, and sometimes crashes iOS Safari.
-   */
-  private queueUpdateImage(index: number, options: UpdateImageOptions = {}): void {
-    // Call updateImage after this delay, unless queueUpdateImage is called again, in which case the
-    // timeout is reset.
-    const delay = 100;
-
-    clearTimeout(this.updateImageTimeoutIds[index]);
-
-    this.updateImageTimeoutIds[index] = self.setTimeout(
-      () => {
-        this.updateImage(index, options).catch((err) => {
-          console.error(err);
-        });
-      },
-      delay,
-    );
-  }
-
  private async updateImage(index: number, options: UpdateImageOptions = {}): Promise<void> {
-    const {
-      skipPreprocessing = false,
-    } = options;
+    const { skipPreprocessing = false } = options;
    const { source } = this.state;
    if (!source) return;

    // Each time we trigger an async encode, the counter changes.
-    const loadingCounter = this.state.sides[index].loadingCounter + 1;
+    const loadingCounter = this.state.images[index].loadingCounter + 1;

-    let sides = cleanMerge(this.state.sides, index, {
+    let images = cleanMerge(this.state.images, index, {
      loadingCounter,
      loading: true,
    });

-    this.setState({ sides });
+    this.setState({ images });

-    const side = sides[index];
-    const settings = side.latestSettings;
+    const image = images[index];

    let file: File | Fileish | undefined;
    let preprocessed: ImageData | undefined;
    let data: ImageData | undefined;
-    const cacheResult = this.encodeCache.match(
-      source.processed, settings.preprocessorState, settings.encoderState,
-    );
+    const cacheResult = this.encodeCache.match(source, image.preprocessorState, image.encoderState);
    const processor = (index === 0) ? this.leftProcessor : this.rightProcessor;

    // Abort anything the processor is currently doing.
@ -516,113 +372,96 @@ export default class Compress extends Component<Props, State> {
    } else {
      try {
        // Special case for identity
-        if (settings.encoderState.type === identity.type) {
-          file = source.file;
-          data = source.processed;
+        if (image.encoderState.type === identity.type) {
+          ({ file, data } = source);
        } else {
-          preprocessed = (skipPreprocessing && side.preprocessed)
-            ? side.preprocessed
-            : await preprocessImage(source, settings.preprocessorState, processor);
+          preprocessed = (skipPreprocessing && image.preprocessed)
+            ? image.preprocessed
+            : await preprocessImage(source, image.preprocessorState, processor);

-          file = await compressImage(
-            preprocessed, settings.encoderState, source.file.name, processor,
-          );
+          file = await compressImage(preprocessed, image.encoderState, source.file.name, processor);
          data = await decodeImage(file, processor);

          this.encodeCache.add({
+            source,
            data,
            preprocessed,
            file,
-            sourceData: source.processed,
-            encoderState: settings.encoderState,
-            preprocessorState: settings.preprocessorState,
+            encoderState: image.encoderState,
+            preprocessorState: image.preprocessorState,
          });
        }
      } catch (err) {
        if (err.name === 'AbortError') return;
-        this.props.showSnack(`Processing error (type=${settings.encoderState.type}): ${err}`);
+        this.props.showSnack(`Processing error (type=${image.encoderState.type}): ${err}`);
        throw err;
      }
    }

-    const latestData = this.state.sides[index];
+    const latestImage = this.state.images[index];
    // If a later encode has landed before this one, return.
-    if (loadingCounter < latestData.loadedCounter) {
+    if (loadingCounter < latestImage.loadedCounter) {
      return;
    }

-    if (latestData.downloadUrl) URL.revokeObjectURL(latestData.downloadUrl);
-
-    sides = cleanMerge(this.state.sides, index, {
+    images = cleanMerge(this.state.images, index, {
      file,
      data,
      preprocessed,
      downloadUrl: URL.createObjectURL(file),
-      loading: sides[index].loadingCounter !== loadingCounter,
+      loading: images[index].loadingCounter !== loadingCounter,
      loadedCounter: loadingCounter,
-      encodedSettings: settings,
    });

-    this.setState({ sides });
+    this.setState({ images });
  }

-  render({ onBack }: Props, { loading, sides, source, mobileView }: State) {
-    const [leftSide, rightSide] = sides;
-    const [leftImageData, rightImageData] = sides.map(i => i.data);
+  render({ onBack }: Props, { loading, images, source, mobileView }: State) {
+    const [leftImage, rightImage] = images;
+    const [leftImageData, rightImageData] = images.map(i => i.data);

-    const options = sides.map((side, index) => (
+    const options = images.map((image, index) => (
      <Options
        source={source}
        mobileView={mobileView}
-        preprocessorState={side.latestSettings.preprocessorState}
-        encoderState={side.latestSettings.encoderState}
-        onEncoderTypeChange={this.onEncoderTypeChange.bind(this, index as 0|1)}
-        onEncoderOptionsChange={this.onEncoderOptionsChange.bind(this, index as 0|1)}
-        onPreprocessorOptionsChange={this.onPreprocessorOptionsChange.bind(this, index as 0|1)}
+        preprocessorState={image.preprocessorState}
+        encoderState={image.encoderState}
+        onEncoderTypeChange={this.onEncoderTypeChange.bind(this, index)}
+        onEncoderOptionsChange={this.onEncoderOptionsChange.bind(this, index)}
+        onPreprocessorOptionsChange={this.onPreprocessorOptionsChange.bind(this, index)}
      />
    ));

    const copyDirections =
      (mobileView ? ['down', 'up'] : ['right', 'left']) as CopyAcrossIconProps['copyDirection'][];

-    const results = sides.map((side, index) => (
+    const results = images.map((image, index) => (
      <Results
-        downloadUrl={side.downloadUrl}
-        imageFile={side.file}
+        downloadUrl={image.downloadUrl}
+        imageFile={image.file}
        source={source}
-        loading={loading || side.loading}
+        loading={loading || image.loading}
        copyDirection={copyDirections[index]}
-        onCopyToOtherClick={this.onCopyToOtherClick.bind(this, index as 0|1)}
+        onCopyToOtherClick={this.onCopyToOtherClick.bind(this, index)}
        buttonPosition={mobileView ? 'stack-right' : buttonPositions[index]}
      >
        {!mobileView ? null : [
          <ExpandIcon class={style.expandIcon} key="expand-icon"/>,
-          `${resultTitles[index]} (${encoderMap[side.latestSettings.encoderState.type].label})`,
+          `${resultTitles[index]} (${encoderMap[image.encoderState.type].label})`,
        ]}
      </Results>
    ));

-    // For rendering, we ideally want the settings that were used to create the data, not the latest
-    // settings.
-    const leftDisplaySettings = leftSide.encodedSettings || leftSide.latestSettings;
-    const rightDisplaySettings = rightSide.encodedSettings || rightSide.latestSettings;
-    const leftImgContain = leftDisplaySettings.preprocessorState.resize.enabled &&
-      leftDisplaySettings.preprocessorState.resize.fitMethod === 'contain';
-    const rightImgContain = rightDisplaySettings.preprocessorState.resize.enabled &&
-      rightDisplaySettings.preprocessorState.resize.fitMethod === 'contain';
-
    return (
      <div class={style.compress}>
        <Output
-          source={source}
+          originalImage={source && source.data}
          mobileView={mobileView}
          leftCompressed={leftImageData}
          rightCompressed={rightImageData}
-          leftImgContain={leftImgContain}
-          rightImgContain={rightImgContain}
+          leftImgContain={leftImage.preprocessorState.resize.fitMethod === 'cover'}
+          rightImgContain={rightImage.preprocessorState.resize.fitMethod === 'cover'}
          onBack={onBack}
-          inputProcessorState={source && source.inputProcessorState}
-          onInputProcessorChange={this.onInputProcessorChange}
        />
        {mobileView
          ? (
--- a/src/components/compress/result-cache.ts
+++ b/src/components/compress/result-cache.ts
@ -1,6 +1,7 @@
 import { EncoderState } from '../../codecs/encoders';
 import { Fileish } from '../../lib/initial-util';
 import { shallowEqual } from '../../lib/util';
+import { SourceImage } from '.';
 import { PreprocessorState } from '../../codecs/preprocessors';

 import * as identity from '../../codecs/identity/encoder-meta';
@ -14,7 +15,7 @@ interface CacheResult {
 interface CacheEntry extends CacheResult {
  preprocessorState: PreprocessorState;
  encoderState: EncoderState;
-  sourceData: ImageData;
+  source: SourceImage;
 }

 const SIZE = 5;
@ -31,13 +32,13 @@ export default class ResultCache {
  }

  match(
-    sourceData: ImageData,
+    source: SourceImage,
    preprocessorState: PreprocessorState,
    encoderState: EncoderState,
  ): CacheResult | undefined {
    const matchingIndex = this._entries.findIndex((entry) => {
      // Check for quick exits:
-      if (entry.sourceData !== sourceData) return false;
+      if (entry.source !== source) return false;
      if (entry.encoderState.type !== encoderState.type) return false;

      // Check that each set of options in the preprocessor are the same
--- a/src/components/intro/imgs/logo.svg
+++ b/src/components/intro/imgs/logo.svg
--- a/src/components/intro/index.tsx
+++ b/src/components/intro/index.tsx
@ -129,11 +129,6 @@ export default class Intro extends Component<Props, State> {
        <ul class={style.relatedLinks}>
          <li><a href="https://github.com/GoogleChromeLabs/squoosh/">View the code</a></li>
          <li><a href="https://github.com/GoogleChromeLabs/squoosh/issues">Report a bug</a></li>
-          <li>
-            <a href="https://github.com/GoogleChromeLabs/squoosh/blob/master/README.md#privacy">
-              Privacy
-            </a>
-          </li>
        </ul>
      </div>
    );
--- a/src/components/intro/style.scss
+++ b/src/components/intro/style.scss
@ -48,7 +48,6 @@

 .logo {
  composes: abs-fill from '../../lib/util.scss';
-  pointer-events: none;
 }

 .open-image-guide {
@ -145,7 +144,6 @@

 .demo-icon {
  composes: abs-fill from '../../lib/util.scss';
-  pointer-events: none;
 }

 .demo-description {
--- a/src/components/range/index.tsx
+++ b/src/components/range/index.tsx
@ -13,8 +13,6 @@ export default class Range extends Component<Props, State> {
  @bind
  private onTextInput(event: Event) {
    const input = event.target as HTMLInputElement;
-    const value = input.value.trim();
-    if (!value) return;
    this.rangeWc!.value = input.value;
    const { onInput } = this.props;
    if (onInput) onInput(event);
--- a/src/components/results/index.tsx
+++ b/src/components/results/index.tsx
@ -60,16 +60,11 @@ export default class Results extends Component<Props, State> {

  @bind
  onDownload() {
-    // GA can’t do floats. So we round to ints. We're deliberately rounding to nearest kilobyte to
-    // avoid cases where exact image sizes leak something interesting about the user.
-    const before = Math.round(this.props.source!.file.size / 1024);
-    const after = Math.round(this.props.imageFile!.size / 1024);
-    const change = Math.round(after / before * 1000);
-
    ga('send', 'event', 'compression', 'download', {
-      metric1: before,
-      metric2: after,
-      metric3: change,
+      // GA can’t do floats. So we round to ints.
+      metric1: Math.floor(this.props.source!.file.size),
+      metric2: Math.floor(this.props.imageFile!.size),
+      metric3: Math.floor(this.props.imageFile!.size / this.props.source!.file.size * 1000),
    });
  }

--- a/src/index.ts
+++ b/src/index.ts
@ -13,13 +13,11 @@ if (!('customElements' in self)) {
  init();
 }

-if (typeof PRERENDER === 'undefined') {
-  window.ga = window.ga || ((...args) => (ga.q = ga.q || []).push(args));
-  ga('create', 'UA-128752250-1', 'auto');
-  ga('set', 'transport', 'beacon');
-  ga('send', 'pageview');
-    // Load the GA script
-  const s = document.createElement('script');
-  s.src = 'https://www.google-analytics.com/analytics.js';
-  document.head!.appendChild(s);
-}
+window.ga = window.ga || ((...args) => (ga.q = ga.q || []).push(args));
+ga('create', 'UA-128752250-1', 'auto');
+ga('set', 'transport', 'beacon');
+ga('send', 'pageview');
+  // Load the GA script
+const s = document.createElement('script');
+s.src = 'https://www.google-analytics.com/analytics.js';
+document.head!.appendChild(s);
--- a/src/lib/icons.tsx
+++ b/src/lib/icons.tsx
@ -12,21 +12,9 @@ export const DownloadIcon = (props: JSX.HTMLAttributes) => (
  </Icon>
 );

-export const ToggleBackgroundIcon = (props: JSX.HTMLAttributes) => (
+export const ToggleIcon = (props: JSX.HTMLAttributes) => (
  <Icon {...props}>
-    <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.9 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h10a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z"/>
-  </Icon>
-);
-
-export const ToggleBackgroundActiveIcon = (props: JSX.HTMLAttributes) => (
-  <Icon {...props}>
-    <path d="M9 7H7v2h2V7zm0 4H7v2h2v-2zm0-8a2 2 0 0 0-2 2h2V3zm4 12h-2v2h2v-2zm6-12v2h2a2 2 0 0 0-2-2zm-6 0h-2v2h2V3zM9 17v-2H7c0 1.1.9 2 2 2zm10-4h2v-2h-2v2zm0-4h2V7h-2v2zm0 8a2 2 0 0 0 2-2h-2v2zM5 7H3v12c0 1.1.9 2 2 2h12v-2H5V7zm10-2h2V3h-2v2zm0 12h2v-2h-2v2z"/>
-  </Icon>
-);
-
-export const RotateIcon = (props: JSX.HTMLAttributes) => (
-  <Icon {...props}>
-    <path d="M15.6 5.5L11 1v3a8 8 0 0 0 0 16v-2a6 6 0 0 1 0-12v4l4.5-4.5zm4.3 5.5a8 8 0 0 0-1.6-3.9L17 8.5c.5.8.9 1.6 1 2.5h2zM13 17.9v2a8 8 0 0 0 3.9-1.6L15.5 17c-.8.5-1.6.9-2.5 1zm3.9-2.4l1.4 1.4A8 8 0 0 0 20 13h-2c-.1.9-.5 1.7-1 2.5z"/>
+    <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.89 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9c-1.11 0-2 .9-2 2v10c0 1.1.89 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z" />
  </Icon>
 );

--- a/src/lib/offliner.ts
+++ b/src/lib/offliner.ts
@ -63,10 +63,6 @@ export async function offliner(showSnack: SnackBarElement['showSnackbar']) {
    location.reload();
  });

-  // If we don't have a controller, we don't need to check for updates – we've just loaded from the
-  // network.
-  if (!hasController) return;
-
  const reg = await navigator.serviceWorker.getRegistration();
  // Service worker not registered yet.
  if (!reg) return;
--- a/src/lib/util.ts
+++ b/src/lib/util.ts
@ -297,10 +297,3 @@ export async function transitionHeight(el: HTMLElement, opts: TransitionOptions)
    el.addEventListener('transitioncancel', listener);
  });
 }
-
-/**
- * Simple event listener that prevents the default.
- */
-export function preventDefault(event: Event) {
-  event.preventDefault();
-}
--- a/src/manifest.json
+++ b/src/manifest.json
@ -3,7 +3,7 @@
  "short_name": "Squoosh",
  "start_url": "/",
  "display": "standalone",
-  "orientation": "any",
+  "orientation": "portrait",
  "background_color": "#fff",
  "theme_color": "#f78f21",
  "icons": [
--- a/src/missing-types.d.ts
+++ b/src/missing-types.d.ts
@ -39,3 +39,7 @@ declare var ga: {
  (...args: any[]): void;
  q: any[];
 };
+
+interface Window {
+  ga: typeof ga;
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -13,8 +13,5 @@
    "allowJs": false,
    "baseUrl": "."
  },
-  "exclude": [
-    "src/sw/**/*",
-    "src/codecs/processor-worker/**/*"
-  ]
+  "exclude": ["src/sw/**/*"]
 }
--- a/webpack.config.js
+++ b/webpack.config.js
@ -2,7 +2,7 @@ const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
 const CleanPlugin = require('clean-webpack-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
@ -15,7 +15,6 @@ const WorkerPlugin = require('worker-plugin');
 const AutoSWPlugin = require('./config/auto-sw-plugin');
 const CrittersPlugin = require('critters-webpack-plugin');
 const AssetTemplatePlugin = require('./config/asset-template-plugin');
-const addCssTypes = require('./config/add-css-types');

 function readJson (filename) {
  return JSON.parse(fs.readFileSync(filename));
@ -23,7 +22,7 @@ function readJson (filename) {

 const VERSION = readJson('./package.json').version;

-module.exports = async function (_, env) {
+module.exports = function (_, env) {
  const isProd = env.mode === 'production';
  const nodeModules = path.join(__dirname, 'node_modules');
  const componentStyleDirs = [
@ -33,8 +32,6 @@ module.exports = async function (_, env) {
    path.join(__dirname, 'src/lib'),
  ];

-  await addCssTypes(componentStyleDirs, { watch: !isProd });
-
  return {
    mode: isProd ? 'production' : 'development',
    entry: {
@ -112,7 +109,9 @@ module.exports = async function (_, env) {
            // In production, CSS is extracted to files on disk. In development, it's inlined into JS:
            isProd ? MiniCssExtractPlugin.loader : 'style-loader',
            {
-              loader: 'css-loader',
+              // This is a fork of css-loader that auto-generates .d.ts files for CSS module imports.
+              // The result is a definition file with the exported String classname mappings.
+              loader: 'typings-for-css-modules-loader',
              options: {
                modules: true,
                localIdentName: isProd ? '[hash:base64:5]' : '[local]__[hash:base64:5]',
@ -142,8 +141,8 @@ module.exports = async function (_, env) {
        },
        {
          test: /\.tsx?$/,
-          exclude: nodeModules,
-          loader: 'ts-loader'
+          loader: 'ts-loader',
+          options: { allowTsInNodeModules: true }
        },
        {
          // All the codec files define a global with the same name as their file name. `exports-loader` attaches those to `module.exports`.
@ -170,11 +169,7 @@ module.exports = async function (_, env) {
      ]
    },
    plugins: [
-      new webpack.IgnorePlugin(
-        /(fs|crypto|path)/,
-        new RegExp(`${path.sep}codecs${path.sep}`)
-      ),
-
+      new webpack.IgnorePlugin(/(fs|crypto|path)/, /\/codecs\//),
      // Pretty progressbar showing build progress:
      new ProgressBarPlugin({
        format: '\u001b[90m\u001b[44mBuild\u001b[49m\u001b[39m [:bar] \u001b[32m\u001b[1m:percent\u001b[22m\u001b[39m (:elapseds) \u001b[2m:msg\u001b[22m\r',
@ -231,7 +226,7 @@ module.exports = async function (_, env) {
      // For now we're not doing SSR.
      new HtmlPlugin({
        filename: path.join(__dirname, 'build/index.html'),
-        template: isProd ? '!!prerender-loader?string!src/index.html' : 'src/index.html',
+        template: '!!prerender-loader?string!src/index.html',
        minify: isProd && {
          collapseWhitespace: true,
          removeScriptTypeAttributes: true,
@ -251,11 +246,6 @@ module.exports = async function (_, env) {
        filename: '_headers',
      }),

-      isProd && new AssetTemplatePlugin({
-        template: path.join(__dirname, '_redirects.ejs'),
-        filename: '_redirects',
-      }),
-
      new ScriptExtHtmlPlugin({
        inline: ['first']
      }),
@ -300,10 +290,12 @@ module.exports = async function (_, env) {

    optimization: {
      minimizer: [
-        new TerserPlugin({
+        new UglifyJsPlugin({
          sourceMap: isProd,
-          extractComments: 'build/licenses.txt',
-          terserOptions: {
+          extractComments: {
+            file: 'build/licenses.txt'
+          },
+          uglifyOptions: {
            compress: {
              inline: 1
            },
Author	SHA1	Message	Date
Jake Archibald	eb5a2e5583	Allow TS in modules	2018-11-09 14:19:23 -08:00
Jake Archibald	676e460654	Adding module	2018-11-09 12:45:58 -08:00
Jake Archibald	aff038e894	wip	2018-11-09 12:45:58 -08:00