moar stuff

* Update package.json

* Update package.json

* Update README.md

* Update README.md

* Use cmake for libwebp

* Minimize libwebp

_redirects.ejs

@@ -0,0 +1,2 @@
+/index.html / 301
+/* /index.html 301

codecs/imagequant/package.json

@@ -8,6 +8,6 @@
     "libimagequant": "ImageOptim/libimagequant#2.12.1"
   },
   "devDependencies": {
-    "napa": "^3.0.0"
+    "napa": "3.0.0"
   }
 }

codecs/mozjpeg_enc/package.json

@@ -8,6 +8,6 @@
     "mozjpeg": "mozilla/mozjpeg#v3.3.1"
   },
   "devDependencies": {
-    "napa": "^3.0.0"
+    "napa": "3.0.0"
   }
 }

codecs/optipng/README.md

@@ -1,6 +1,6 @@
 # OptiPNG
 
-- Source: <https://sourceforge.net/project/optipng>
+- Source: <http://optipng.sourceforge.net/>
 - Version: v0.7.7
 
 ## Dependencies

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"
   }
 }

codecs/oxipng/.gitignore

@@ -0,0 +1,5 @@
+/target
+**/*.rs.bk
+Cargo.lock
+bin/
+wasm-pack.log

codecs/oxipng/Cargo.toml

@@ -0,0 +1,36 @@
+[package]
+name = "test"
+version = "0.1.0"
+authors = ["Surma <surma@surma.link>"]
+
+[lib]
+path = "lib.rs"
+crate-type = ["cdylib", "rlib"]
+
+[features]
+default = ["console_error_panic_hook"]
+
+[dependencies]
+cfg-if = "0.1.2"
+wasm-bindgen = "0.2"
+oxipng = "2.2.0"
+
+# The `console_error_panic_hook` crate provides better debugging of panics by
+# logging them with `console.error`. This is great for development, but requires
+# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
+# code size when deploying.
+console_error_panic_hook = { version = "0.1.1", optional = true }
+
+# `wee_alloc` is a tiny allocator for wasm that is only ~1K in code size
+# compared to the default allocator's ~10K. It is slower than the default
+# allocator, however.
+#
+# Unfortunately, `wee_alloc` requires nightly Rust when targeting wasm for now.
+wee_alloc = { version = "0.4.2", optional = true }
+
+[dev-dependencies]
+wasm-bindgen-test = "0.2"
+
+[profile.release]
+# Tell `rustc` to optimize for small code size.
+opt-level = "s"

codecs/oxipng/README.md

@@ -0,0 +1,52 @@
+# 🦀🕸️ `wasm-pack-template`
+
+A template for kick starting a Rust and WebAssembly project using
+[`wasm-pack`](https://github.com/rustwasm/wasm-pack).
+
+This template is designed for compiling Rust libraries into WebAssembly and
+publishing the resulting package to NPM.
+
+* Want to use the published NPM package in a Website? [Check out
+  `create-wasm-app`.](https://github.com/rustwasm/create-wasm-app)
+* Want to make a monorepo-style Website without publishing to NPM? Check out
+  [`rust-webpack-template`](https://github.com/rustwasm/rust-webpack-template)
+  and/or
+  [`rust-parcel-template`](https://github.com/rustwasm/rust-parcel-template).
+
+## 🔋 Batteries Included
+
+* [`wasm-bindgen`](https://github.com/rustwasm/wasm-bindgen) for communicating
+  between WebAssembly and JavaScript.
+* [`console_error_panic_hook`](https://github.com/rustwasm/console_error_panic_hook)
+  for logging panic messages to the developer console.
+* [`wee_alloc`](https://github.com/rustwasm/wee_alloc), an allocator optimized
+  for small code size.
+
+## 🚴 Usage
+
+### 🐑 Use `cargo generate` to Clone this Template
+
+[Learn more about `cargo generate` here.](https://github.com/ashleygwilliams/cargo-generate)
+
+```
+cargo generate --git https://github.com/rustwasm/wasm-pack-template.git --name my-project
+cd my-project
+```
+
+### 🛠️ Build with `wasm-pack build`
+
+```
+wasm-pack build
+```
+
+### 🔬 Test in Headless Browsers with `wasm-pack test`
+
+```
+wasm-pack test --headless --firefox
+```
+
+### 🎁 Publish to NPM with `wasm-pack publish`
+
+```
+wasm-pack publish
+```

codecs/oxipng/Xargo.toml

@@ -0,0 +1,5 @@
+[target.wasm32-unknown-unknown.dependencies]
+time = {}
+
+[target.wasm32-unknown-unknown.dependencies.std]
+features = ["wasm_syscall"]

codecs/oxipng/pkg/README.md

@@ -0,0 +1,52 @@
+# 🦀🕸️ `wasm-pack-template`
+
+A template for kick starting a Rust and WebAssembly project using
+[`wasm-pack`](https://github.com/rustwasm/wasm-pack).
+
+This template is designed for compiling Rust libraries into WebAssembly and
+publishing the resulting package to NPM.
+
+* Want to use the published NPM package in a Website? [Check out
+  `create-wasm-app`.](https://github.com/rustwasm/create-wasm-app)
+* Want to make a monorepo-style Website without publishing to NPM? Check out
+  [`rust-webpack-template`](https://github.com/rustwasm/rust-webpack-template)
+  and/or
+  [`rust-parcel-template`](https://github.com/rustwasm/rust-parcel-template).
+
+## 🔋 Batteries Included
+
+* [`wasm-bindgen`](https://github.com/rustwasm/wasm-bindgen) for communicating
+  between WebAssembly and JavaScript.
+* [`console_error_panic_hook`](https://github.com/rustwasm/console_error_panic_hook)
+  for logging panic messages to the developer console.
+* [`wee_alloc`](https://github.com/rustwasm/wee_alloc), an allocator optimized
+  for small code size.
+
+## 🚴 Usage
+
+### 🐑 Use `cargo generate` to Clone this Template
+
+[Learn more about `cargo generate` here.](https://github.com/ashleygwilliams/cargo-generate)
+
+```
+cargo generate --git https://github.com/rustwasm/wasm-pack-template.git --name my-project
+cd my-project
+```
+
+### 🛠️ Build with `wasm-pack build`
+
+```
+wasm-pack build
+```
+
+### 🔬 Test in Headless Browsers with `wasm-pack test`
+
+```
+wasm-pack test --headless --firefox
+```
+
+### 🎁 Publish to NPM with `wasm-pack publish`
+
+```
+wasm-pack publish
+```

codecs/oxipng/pkg/lol.js

@@ -0,0 +1,14 @@
+const oxipng = require("./oxipng_wasm");
+const repl = require("repl");
+const fs = require("fs");
+
+async function init() {
+  // const img = fs.readFileSync("img.png")
+  // const output = oxipng.compress(img, 0);
+  // fs.writeFileSync("output.png", output);
+  console.log(">>>", oxipng.doit());
+  const r = repl.start("node> ");
+  r.context.i = oxipng;
+}
+
+init();

codecs/oxipng/pkg/oxipng.d.ts

@@ -0,0 +1,3 @@
+/* tslint:disable */
+export function compress(arg0: Uint8Array, arg1: number): Uint8Array;
+

codecs/oxipng/pkg/oxipng.js

@@ -0,0 +1,73 @@
+/* tslint:disable */
+var wasm;
+
+const TextDecoder = require('util').TextDecoder;
+
+let cachedTextDecoder = new TextDecoder('utf-8');
+
+let cachegetUint8Memory = null;
+function getUint8Memory() {
+    if (cachegetUint8Memory === null || cachegetUint8Memory.buffer !== wasm.memory.buffer) {
+        cachegetUint8Memory = new Uint8Array(wasm.memory.buffer);
+    }
+    return cachegetUint8Memory;
+}
+
+function getStringFromWasm(ptr, len) {
+    return cachedTextDecoder.decode(getUint8Memory().subarray(ptr, ptr + len));
+}
+
+module.exports.__wbg_log_64e6f53d8e6d5db5 = function(arg0, arg1) {
+    let varg0 = getStringFromWasm(arg0, arg1);
+    console.log(varg0);
+};
+
+let WASM_VECTOR_LEN = 0;
+
+function passArray8ToWasm(arg) {
+    const ptr = wasm.__wbindgen_malloc(arg.length * 1);
+    getUint8Memory().set(arg, ptr / 1);
+    WASM_VECTOR_LEN = arg.length;
+    return ptr;
+}
+
+function getArrayU8FromWasm(ptr, len) {
+    return getUint8Memory().subarray(ptr / 1, ptr / 1 + len);
+}
+
+let cachedGlobalArgumentPtr = null;
+function globalArgumentPtr() {
+    if (cachedGlobalArgumentPtr === null) {
+        cachedGlobalArgumentPtr = wasm.__wbindgen_global_argument_ptr();
+    }
+    return cachedGlobalArgumentPtr;
+}
+
+let cachegetUint32Memory = null;
+function getUint32Memory() {
+    if (cachegetUint32Memory === null || cachegetUint32Memory.buffer !== wasm.memory.buffer) {
+        cachegetUint32Memory = new Uint32Array(wasm.memory.buffer);
+    }
+    return cachegetUint32Memory;
+}
+/**
+* @param {Uint8Array} arg0
+* @param {number} arg1
+* @returns {Uint8Array}
+*/
+module.exports.compress = function(arg0, arg1) {
+    const ptr0 = passArray8ToWasm(arg0);
+    const len0 = WASM_VECTOR_LEN;
+    const retptr = globalArgumentPtr();
+    wasm.compress(retptr, ptr0, len0, arg1);
+    const mem = getUint32Memory();
+    const rustptr = mem[retptr / 4];
+    const rustlen = mem[retptr / 4 + 1];
+
+    const realRet = getArrayU8FromWasm(rustptr, rustlen).slice();
+    wasm.__wbindgen_free(rustptr, rustlen * 1);
+    return realRet;
+
+};
+
+wasm = require('./oxipng_bg');

codecs/oxipng/pkg/oxipng_bg.d.ts

@@ -0,0 +1,6 @@
+/* tslint:disable */
+export const memory: WebAssembly.Memory;
+export function __wbindgen_global_argument_ptr(): number;
+export function compress(a: number, b: number, c: number, d: number): void;
+export function __wbindgen_malloc(a: number): number;
+export function __wbindgen_free(a: number, b: number): void;

codecs/oxipng/pkg/oxipng_bg.js

@@ -0,0 +1,9 @@
+
+const path = require('path').join(__dirname, 'oxipng_bg.wasm');
+const bytes = require('fs').readFileSync(path);
+let imports = {};
+imports['./oxipng'] = require('./oxipng');
+
+const wasmModule = new WebAssembly.Module(bytes);
+const wasmInstance = new WebAssembly.Instance(wasmModule, imports);
+module.exports = wasmInstance.exports;

codecs/oxipng/pkg/oxipng_manual.d.ts

@@ -0,0 +1,3 @@
+/* tslint:disable */
+export function compress(arg0: Uint8Array, arg1: number): Promise<Uint8Array>;
+

codecs/oxipng/pkg/oxipng_manual.js

@@ -0,0 +1,77 @@
+/* tslint:disable */
+import wasmUrl from './oxipng_bg.wasm';
+
+let wasm;
+const instancePromise = WebAssembly.instantiateStreaming(fetch(wasmUrl), {
+  "./oxipng": {__wbg_log_64e6f53d8e6d5db5}
+});
+
+let cachedTextDecoder = new TextDecoder('utf-8');
+
+let cachegetUint8Memory = null;
+function getUint8Memory() {
+    if (cachegetUint8Memory === null || cachegetUint8Memory.buffer !== wasm.memory.buffer) {
+        cachegetUint8Memory = new Uint8Array(wasm.memory.buffer);
+    }
+    return cachegetUint8Memory;
+}
+
+function getStringFromWasm(ptr, len) {
+    return cachedTextDecoder.decode(getUint8Memory().subarray(ptr, ptr + len));
+}
+
+export function __wbg_log_64e6f53d8e6d5db5(arg0, arg1) {
+    let varg0 = getStringFromWasm(arg0, arg1);
+    console.log(varg0);
+}
+
+let WASM_VECTOR_LEN = 0;
+
+function passArray8ToWasm(arg) {
+    const ptr = wasm.__wbindgen_malloc(arg.length * 1);
+    getUint8Memory().set(arg, ptr / 1);
+    WASM_VECTOR_LEN = arg.length;
+    return ptr;
+}
+
+function getArrayU8FromWasm(ptr, len) {
+    return getUint8Memory().subarray(ptr / 1, ptr / 1 + len);
+}
+
+let cachedGlobalArgumentPtr = null;
+function globalArgumentPtr() {
+    if (cachedGlobalArgumentPtr === null) {
+        cachedGlobalArgumentPtr = wasm.__wbindgen_global_argument_ptr();
+    }
+    return cachedGlobalArgumentPtr;
+}
+
+let cachegetUint32Memory = null;
+function getUint32Memory() {
+    if (cachegetUint32Memory === null || cachegetUint32Memory.buffer !== wasm.memory.buffer) {
+        cachegetUint32Memory = new Uint32Array(wasm.memory.buffer);
+    }
+    return cachegetUint32Memory;
+}
+/**
+* @param {Uint8Array} arg0
+* @param {number} arg1
+* @returns {Uint8Array}
+*/
+export async function compress(arg0, arg1) {
+    wasm = (await instancePromise).instance.exports;
+    debugger;
+    const ptr0 = passArray8ToWasm(arg0);
+    const len0 = WASM_VECTOR_LEN;
+    const retptr = globalArgumentPtr();
+    wasm.compress(retptr, ptr0, len0, arg1);
+    const mem = getUint32Memory();
+    const rustptr = mem[retptr / 4];
+    const rustlen = mem[retptr / 4 + 1];
+
+    const realRet = getArrayU8FromWasm(rustptr, rustlen).slice();
+    wasm.__wbindgen_free(rustptr, rustlen * 1);
+    return realRet;
+
+}
+

codecs/oxipng/pkg/oxipng_wasm.d.ts

@@ -0,0 +1,3 @@
+/* tslint:disable */
+export function doit(): number;
+

codecs/oxipng/pkg/oxipng_wasm.js

@@ -0,0 +1,11 @@
+/* tslint:disable */
+var wasm;
+
+/**
+* @returns {number}
+*/
+module.exports.doit = function() {
+    return wasm.doit();
+};
+
+wasm = require('./oxipng_wasm_bg');

codecs/oxipng/pkg/oxipng_wasm_bg.d.ts

@@ -0,0 +1,3 @@
+/* tslint:disable */
+export const memory: WebAssembly.Memory;
+export function doit(): number;

codecs/oxipng/pkg/oxipng_wasm_bg.js

@@ -0,0 +1,8 @@
+
+const path = require('path').join(__dirname, 'oxipng_wasm_bg.wasm');
+const bytes = require('fs').readFileSync(path);
+let imports = {};
+
+const wasmModule = new WebAssembly.Module(bytes);
+const wasmInstance = new WebAssembly.Instance(wasmModule, imports);
+module.exports = wasmInstance.exports;

codecs/oxipng/pkg/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "oxipng-wasm",
+  "collaborators": [
+    "Surma <surma@surma.link>"
+  ],
+  "version": "0.1.0",
+  "files": [
+    "oxipng_wasm_bg.wasm",
+    "oxipng_wasm.js",
+    "oxipng_wasm_bg.js",
+    "oxipng_wasm.d.ts"
+  ],
+  "main": "oxipng_wasm.js",
+  "types": "oxipng_wasm.d.ts"
+}

codecs/oxipng/src/lib.rs

@@ -0,0 +1,42 @@
+extern crate cfg_if;
+extern crate wasm_bindgen;
+// extern crate oxipng;
+
+mod utils;
+
+use cfg_if::cfg_if;
+use wasm_bindgen::prelude::*;
+use std::time::{Instant};
+cfg_if! {
+    // When the `wee_alloc` feature is enabled, use `wee_alloc` as the global
+    // allocator.
+    if #[cfg(feature = "wee_alloc")] {
+        extern crate wee_alloc;
+        #[global_allocator]
+        static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
+    }
+}
+
+// #[wasm_bindgen]
+// extern {
+//   #[wasm_bindgen(js_namespace = console)]
+//   fn log(s: &str);
+// }
+
+// #[wasm_bindgen]
+// pub fn compress(img: Vec<u8>, level: u8) -> Vec<u8> {
+//   log(&format!("len: {}, level: {}", img.len(), level));
+//   let mut options = oxipng::Options::from_preset(level);
+//   options.threads = 0;
+//   let result = oxipng::optimize_from_memory(img.as_slice(), &options);
+//   match result {
+//     Ok(v) => v,
+//     Err(e) => e.to_string().as_bytes().to_vec()
+//   }
+// }
+
+#[wasm_bindgen]
+pub fn doit() -> u32 {
+  let start = Instant::now();
+  start.elapsed().as_secs() as u32
+}

codecs/oxipng/src/utils.rs

@@ -0,0 +1,17 @@
+use cfg_if::cfg_if;
+
+cfg_if! {
+    // When the `console_error_panic_hook` feature is enabled, we can call the
+    // `set_panic_hook` function at least once during initialization, and then
+    // we will get better error messages if our code ever panics.
+    //
+    // For more details see
+    // https://github.com/rustwasm/console_error_panic_hook#readme
+    if #[cfg(feature = "console_error_panic_hook")] {
+        extern crate console_error_panic_hook;
+        pub use self::console_error_panic_hook::set_once as set_panic_hook;
+    } else {
+        #[inline]
+        pub fn set_panic_hook() {}
+    }
+}

codecs/oxipng/tmp/.gitignore

@@ -0,0 +1 @@
+target

codecs/oxipng/tmp/Cargo.toml

@@ -0,0 +1,27 @@
+[package]
+name = "loltest"
+version = "0.1.0"
+authors = ["Surma <surma@surma.link>"]
+
+[lib]
+path = "lib.rs"
+crate-type = ["cdylib", "rlib"]
+
+[features]
+default = ["console_error_panic_hook"]
+
+[dependencies]
+wasm-bindgen = "0.2"
+
+# The `console_error_panic_hook` crate provides better debugging of panics by
+# logging them with `console.error`. This is great for development, but requires
+# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
+# code size when deploying.
+console_error_panic_hook = { version = "0.1.1", optional = true }
+
+[dev-dependencies]
+wasm-bindgen-test = "0.2"
+
+[profile.release]
+# Tell `rustc` to optimize for small code size.
+opt-level = "s"

codecs/oxipng/tmp/Xargo.toml

@@ -0,0 +1,2 @@
+[dependencies.std]
+features = ["wasm_syscall"]

codecs/oxipng/tmp/_README.md

@@ -0,0 +1,20 @@
+I’m trying to activate [the `wasm_syscall` feature][1] in Rust’s stdlib for WebAssembly.
+
+Here is my `Cargo.toml` and my `Xargo.toml`. But even with this setup the generated wasm file is still hard-coded to panic.
+
+**HELP?**
+
+My current command to compile is:
+
+```
+xargo build --target wasm32-unknown-unknown --release
+```
+
+If you have [`wasm2wat`][2] installed, you can verify the generate code via
+
+```
+wasm2wat target/wasm32-unknown-unknown/release/loltest.wasm | grep -A5 perform::
+```
+
+[1]: https://github.com/rust-lang/rust/blob/b139669f374eb5024a50eb13f116ff763b1c5935/src/libstd/sys/wasm/mod.rs#L309
+[2]: https://github.com/WebAssembly/wabt

codecs/oxipng/tmp/lib.rs

@@ -0,0 +1,14 @@
+extern crate wasm_bindgen;
+
+use wasm_bindgen::prelude::*;
+use std::thread::spawn;
+
+#[wasm_bindgen]
+pub fn doit() {
+  // let child = spawn(move || -> u32 {
+  //   5
+  // });
+  // let result = child.join().unwrap();
+  let result = spawn();
+  println!("Result: {}", result);
+}

codecs/oxipng/tmp/lol.js

@@ -0,0 +1,47 @@
+// const oxipng = require("./oxipng_wasm");
+const repl = require("repl");
+const fs = require("fs");
+
+const dec = new TextDecoder();
+let buffer = '';
+async function init() {
+  const { instance } = await WebAssembly.instantiate(
+    fs.readFileSync("./target/wasm32-unknown-unknown/release/loltest.wasm"),
+    {
+      __wbindgen_placeholder__: {
+        __wbindgen_describe(v) {
+          console.log(`__wbindgen_desribe(${v})`);
+        }
+      },
+      env: {
+        // See https://github.com/rust-lang/rust/blob/master/src/libstd/sys/wasm/mod.rs
+        rust_wasm_syscall(syscall, ptr) {
+          switch(syscall) {
+            case 1: // Write
+              const [fd, dataPtr, len] = new Uint32Array(instance.exports.memory.buffer, ptr, 3 * 4);
+              const fragment = new Uint8Array(instance.exports.memory.buffer, dataPtr, len);
+              buffer += dec.decode(fragment);
+              const idx = buffer.indexOf('\n');
+              if(idx !== -1) {
+                console.log(buffer.slice(0, idx));
+                buffer = buffer.slice(idx);
+              }
+              return 1;
+            case 6: // Time
+              return 1;
+            default:
+              return 0; // False, unimplemented
+          }
+        }
+      }
+    }
+  );
+
+  try {
+    instance.exports.doit();
+  } catch{}
+  const r = repl.start("node> ");
+  r.context.i = instance;
+}
+
+init();

codecs/webp_dec/README.md

@@ -1,7 +1,7 @@
 # WebP decoder
 
 - Source: <https://github.com/webmproject/libwebp>
-- Version: v0.6.1
+- Version: v1.0.2
 
 ## Example
 

codecs/webp_dec/build.sh

@@ -6,7 +6,33 @@ export OPTIMIZE="-Os"
 export LDFLAGS="${OPTIMIZE}"
 export CFLAGS="${OPTIMIZE}"
 export CPPFLAGS="${OPTIMIZE}"
+apt-get update
+apt-get install -qqy autoconf libtool libpng-dev pkg-config
 
+echo "============================================="
+echo "Compiling libwebp"
+echo "============================================="
+test -n "$SKIP_LIBWEBP" || (
+  cd node_modules/libwebp
+  autoreconf -fiv
+  rm -rf build || true
+  mkdir -p build && cd build
+  emconfigure ../configure \
+    --disable-libwebpdemux \
+    --disable-wic \
+    --disable-gif \
+    --disable-tiff \
+    --disable-jpeg \
+    --disable-png \
+    --disable-sdl \
+    --disable-gl \
+    --disable-threading \
+    --disable-neon-rtcd \
+    --disable-neon \
+    --disable-sse2 \
+    --disable-sse4.1
+  emmake make
+)
 echo "============================================="
 echo "Compiling wasm bindings"
 echo "============================================="
@@ -20,9 +46,9 @@ echo "============================================="
     --std=c++11 \
     -I node_modules/libwebp \
     -o ./webp_dec.js \
-    node_modules/libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c \
     -x c++ \
-    webp_dec.cpp
+    webp_dec.cpp \
+    node_modules/libwebp/build/src/.libs/libwebp.a
 )
 echo "============================================="
 echo "Compiling wasm bindings done"

codecs/webp_dec/package.json

@@ -5,9 +5,9 @@
     "build": "docker run --rm -v $(pwd):/src trzeci/emscripten ./build.sh"
   },
   "napa": {
-    "libwebp": "webmproject/libwebp#v1.0.0"
+    "libwebp": "webmproject/libwebp#v1.0.2"
   },
   "devDependencies": {
-    "napa": "^3.0.0"
+    "napa": "3.0.0"
   }
 }

codecs/webp_enc/README.md

@@ -1,7 +1,7 @@
 # WebP encoder
 
 - Source: <https://github.com/webmproject/libwebp>
-- Version: v0.6.1
+- Version: v1.0.2
 
 ## Dependencies
 

codecs/webp_enc/build.sh

@@ -7,6 +7,33 @@ export LDFLAGS="${OPTIMIZE}"
 export CFLAGS="${OPTIMIZE}"
 export CPPFLAGS="${OPTIMIZE}"
 
+apt-get update
+apt-get install -qqy autoconf libtool libpng-dev pkg-config
+
+echo "============================================="
+echo "Compiling libwebp"
+echo "============================================="
+test -n "$SKIP_LIBWEBP" || (
+  cd node_modules/libwebp
+  autoreconf -fiv
+  rm -rf build || true
+  mkdir -p build && cd build
+  emconfigure ../configure \
+    --disable-libwebpdemux \
+    --disable-wic \
+    --disable-gif \
+    --disable-tiff \
+    --disable-jpeg \
+    --disable-png \
+    --disable-sdl \
+    --disable-gl \
+    --disable-threading \
+    --disable-neon-rtcd \
+    --disable-neon \
+    --disable-sse2 \
+    --disable-sse4.1
+  emmake make
+)
 echo "============================================="
 echo "Compiling wasm bindings"
 echo "============================================="
@@ -20,9 +47,9 @@ echo "============================================="
     --std=c++11 \
     -I node_modules/libwebp \
     -o ./webp_enc.js \
-    node_modules/libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c \
     -x c++ \
-    webp_enc.cpp
+    webp_enc.cpp \
+    node_modules/libwebp/build/src/.libs/libwebp.a
 )
 echo "============================================="
 echo "Compiling wasm bindings done"

codecs/webp_enc/package.json

@@ -5,9 +5,9 @@
     "build": "docker run --rm -v $(pwd):/src trzeci/emscripten ./build.sh"
   },
   "napa": {
-    "libwebp": "webmproject/libwebp#v1.0.0"
+    "libwebp": "webmproject/libwebp#v1.0.2"
   },
   "devDependencies": {
-    "napa": "^3.0.0"
+    "napa": "3.0.0"
   }
 }

codecs/webp_enc/webp_enc.cpp

@@ -26,7 +26,8 @@ val encode(std::string img, int width, int height, WebPConfig config) {
     throw std::runtime_error("Unexpected error");
   }
 
-  pic.use_argb = !!config.lossless;
+  // 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.width = width;
   pic.height = height;
   pic.writer = WebPMemoryWrite;

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "squoosh",
-  "version": "1.2.1",
+  "version": "1.3.1",
   "license": "apache-2.0",
   "scripts": {
     "start": "webpack-dev-server --host 0.0.0.0 --hot",
@@ -15,55 +15,55 @@
     }
   },
   "devDependencies": {
-    "@types/node": "^10.12.6",
-    "@types/pretty-bytes": "^5.1.0",
-    "@types/webassembly-js-api": "0.0.1",
-    "@webcomponents/custom-elements": "^1.2.1",
-    "@webpack-cli/serve": "^0.1.2",
-    "assets-webpack-plugin": "^3.9.7",
-    "chokidar": "^2.0.4",
-    "classnames": "^2.2.6",
-    "clean-webpack-plugin": "^1.0.0",
-    "comlink": "^3.0.3",
-    "copy-webpack-plugin": "^4.6.0",
-    "critters-webpack-plugin": "^2.0.1",
-    "css-loader": "^1.0.1",
-    "ejs": "^2.6.1",
-    "exports-loader": "^0.7.0",
-    "file-drop-element": "^0.0.9",
-    "file-loader": "^2.0.0",
-    "html-webpack-plugin": "^3.2.0",
-    "husky": "^1.1.4",
-    "idb-keyval": "^3.1.0",
-    "linkstate": "^1.1.1",
-    "loader-utils": "^1.1.0",
-    "mini-css-extract-plugin": "^0.4.4",
-    "minimatch": "^3.0.4",
-    "node-sass": "^4.11.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "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.1.3",
-    "source-map-loader": "^0.2.4",
-    "style-loader": "^0.23.1",
-    "terser-webpack-plugin": "^1.1.0",
-    "ts-loader": "^5.3.0",
-    "tslint": "^5.11.0",
-    "tslint-config-airbnb": "^5.11.0",
-    "tslint-config-semistandard": "^7.0.0",
-    "tslint-react": "^3.6.0",
-    "typed-css-modules": "^0.3.7",
-    "typescript": "^3.1.6",
-    "url-loader": "^1.1.2",
-    "webpack": "^4.25.1",
-    "webpack-bundle-analyzer": "^3.0.3",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.10",
-    "worker-plugin": "^1.1.1"
+    "@types/node": "10.12.21",
+    "@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.1",
+    "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.2",
+    "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.3",
+    "webpack-dev-server": "3.1.14",
+    "worker-plugin": "3.0.0"
   }
 }

renovate.json

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "config:base"
+  ]
+}

src/codecs/encoders.ts

@@ -1,5 +1,6 @@
 import * as identity from './identity/encoder-meta';
 import * as optiPNG from './optipng/encoder-meta';
+import * as oxiPNG from './oxipng/encoder-meta';
 import * as mozJPEG from './mozjpeg/encoder-meta';
 import * as webP from './webp/encoder-meta';
 import * as browserPNG from './browser-png/encoder-meta';
@@ -18,6 +19,7 @@ export interface EncoderSupportMap {
 export type EncoderState =
   identity.EncoderState |
   optiPNG.EncoderState |
+  oxiPNG.EncoderState |
   mozJPEG.EncoderState |
   webP.EncoderState |
   browserPNG.EncoderState |
@@ -32,6 +34,7 @@ export type EncoderState =
 export type EncoderOptions =
   identity.EncodeOptions |
   optiPNG.EncodeOptions |
+  oxiPNG.EncodeOptions |
   mozJPEG.EncodeOptions |
   webP.EncodeOptions |
   browserPNG.EncodeOptions |
@@ -48,6 +51,7 @@ export type EncoderType = keyof typeof encoderMap;
 export const encoderMap = {
   [identity.type]: identity,
   [optiPNG.type]: optiPNG,
+  [oxiPNG.type]: oxiPNG,
   [mozJPEG.type]: mozJPEG,
   [webP.type]: webP,
   [browserPNG.type]: browserPNG,

src/codecs/optipng/encoder-meta.ts

@@ -3,7 +3,7 @@ export interface EncodeOptions {
 }
 export interface EncoderState { type: typeof type; options: EncodeOptions; }
 
-export const type = 'png';
+export const type = 'optipng';
 export const label = 'OptiPNG';
 export const mimeType = 'image/png';
 export const extension = 'png';

src/codecs/oxipng/encoder-meta.ts

@@ -0,0 +1,13 @@
+export interface EncodeOptions {
+  level: number;
+}
+export interface EncoderState { type: typeof type; options: EncodeOptions; }
+
+export const type = 'oxipng';
+export const label = 'OxiPNG';
+export const mimeType = 'image/png';
+export const extension = 'png';
+
+export const defaultOptions: EncodeOptions = {
+  level: 6,
+};

src/codecs/oxipng/encoder.ts

@@ -0,0 +1,18 @@
+import * as oxipng from '../../../codecs/oxipng/pkg/oxipng_manual';
+import { EncodeOptions } from './encoder-meta';
+
+export async function compress(data: BufferSource, { level }: EncodeOptions): Promise<ArrayBuffer> {
+  let buffer: ArrayBuffer;
+
+  if (ArrayBuffer.isView(data)) {
+    buffer = data.buffer;
+  } else {
+    buffer = data;
+  }
+  debugger;
+  const resultView = await oxipng.compress(new Uint8Array(buffer), level);
+  const result = new Uint8Array(resultView);
+
+  // wasm can’t run on SharedArrayBuffers, so we hard-cast to ArrayBuffer.
+  return result.buffer as ArrayBuffer;
+}

src/codecs/oxipng/options.tsx

@@ -0,0 +1,42 @@
+import { h, Component } from 'preact';
+import { bind } from '../../lib/initial-util';
+import { inputFieldValueAsNumber, preventDefault } from '../../lib/util';
+import { EncodeOptions } from './encoder-meta';
+import Range from '../../components/range';
+import * as style from '../../components/Options/style.scss';
+
+type Props = {
+  options: EncodeOptions;
+  onChange(newOptions: EncodeOptions): void;
+};
+
+export default class OxiPNGEncoderOptions extends Component<Props, {}> {
+  @bind
+  onChange(event: Event) {
+    const form = (event.currentTarget as HTMLInputElement).closest('form') as HTMLFormElement;
+
+    const options: EncodeOptions = {
+      level: inputFieldValueAsNumber(form.level),
+    };
+    this.props.onChange(options);
+  }
+
+  render({ options }: Props) {
+    return (
+      <form class={style.optionsSection} onSubmit={preventDefault}>
+        <div class={style.optionOneCell}>
+          <Range
+            name="level"
+            min="0"
+            max="9"
+            step="1"
+            value={options.level}
+            onInput={this.onChange}
+          >
+            Effort:
+          </Range>
+        </div>
+      </form>
+    );
+  }
+}

src/codecs/processor-worker/index.ts

@@ -41,6 +41,16 @@ async function optiPngEncode(
   return compress(data, options);
 }
 
+async function oxiPngEncode(
+  data: BufferSource, options: import('../oxipng/encoder-meta').EncodeOptions,
+): Promise<ArrayBuffer> {
+  const { compress } = await import(
+    /* webpackChunkName: "process-optipng" */
+    '../oxipng/encoder',
+  );
+  return compress(data, options);
+}
+
 async function webpEncode(
   data: ImageData, options: import('../webp/encoder-meta').EncodeOptions,
 ): Promise<ArrayBuffer> {
@@ -59,7 +69,15 @@ async function webpDecode(data: ArrayBuffer): Promise<ImageData> {
   return decode(data);
 }
 
-const exports = { mozjpegEncode, quantize, rotate, optiPngEncode, webpEncode, webpDecode };
+const exports = {
+  mozjpegEncode,
+  quantize,
+  rotate,
+  optiPngEncode,
+  oxiPngEncode,
+  webpEncode,
+  webpDecode,
+};
 export type ProcessorWorkerApi = typeof exports;
 
 expose(exports, self);

src/codecs/processor.ts

@@ -3,6 +3,7 @@ import { QuantizeOptions } from './imagequant/processor-meta';
 import { canvasEncode, blobToArrayBuffer } from '../lib/util';
 import { EncodeOptions as MozJPEGEncoderOptions } from './mozjpeg/encoder-meta';
 import { EncodeOptions as OptiPNGEncoderOptions } from './optipng/encoder-meta';
+import { EncodeOptions as OxiPNGEncoderOptions } from './oxipng/encoder-meta';
 import { EncodeOptions as WebPEncoderOptions } from './webp/encoder-meta';
 import { EncodeOptions as BrowserJPEGOptions } from './browser-jpeg/encoder-meta';
 import { EncodeOptions as BrowserWebpEncodeOptions } from './browser-webp/encoder-meta';
@@ -20,7 +21,7 @@ import * as browserPDF from './browser-pdf/encoder';
 type ProcessorWorkerApi = import('./processor-worker').ProcessorWorkerApi;
 
 /** How long the worker should be idle before terminating. */
-const workerTimeout = 1000;
+const workerTimeout = 10000;
 
 interface ProcessingJobOptions {
   needsWorker?: boolean;
@@ -147,6 +148,16 @@ export default class Processor {
     return this._workerApi!.optiPngEncode(pngBuffer, opts);
   }
 
+  @Processor._processingJob({ needsWorker: true })
+  async oxiPngEncode(
+    data: ImageData, opts: OxiPNGEncoderOptions,
+  ): Promise<ArrayBuffer> {
+    // OptiPNG expects PNG input.
+    const pngBlob = await canvasEncode(data, 'image/png');
+    const pngBuffer = await blobToArrayBuffer(pngBlob);
+    return this._workerApi!.oxiPngEncode(pngBuffer, opts);
+  }
+
   @Processor._processingJob({ needsWorker: true })
   webpEncode(data: ImageData, opts: WebPEncoderOptions): Promise<ArrayBuffer> {
     return this._workerApi!.webpEncode(data, opts);

src/codecs/rotate/processor.ts

@@ -1,13 +1,7 @@
 import { RotateOptions } from './processor-meta';
 
-const bpp = 4;
-
 export function rotate(data: ImageData, opts: RotateOptions): ImageData {
   const { rotate } = opts;
-
-  // Early exit if there's no transform.
-  if (rotate === 0) return data;
-
   const flipDimensions = rotate % 180 !== 0;
   const { width: inputWidth, height: inputHeight } = data;
   const outputWidth = flipDimensions ? inputHeight : inputWidth;
@@ -65,14 +59,13 @@ export function rotate(data: ImageData, opts: RotateOptions): ImageData {
     d2Multiplier = 1;
   }
 
+  const inB = new Uint32Array(data.data.buffer);
+  const outB = new Uint32Array(out.data.buffer);
   for (let d2 = d2Start; d2 >= 0 && d2 < d2Limit; d2 += d2Advance) {
     for (let d1 = d1Start; d1 >= 0 && d1 < d1Limit; d1 += d1Advance) {
-      // Iterate over channels:
-      const start = ((d1 * d1Multiplier) + (d2 * d2Multiplier)) * bpp;
-      for (let j = 0; j < bpp; j += 1) {
-        out.data[i] = data.data[start + j];
-        i += 1;
-      }
+      const start = ((d1 * d1Multiplier) + (d2 * d2Multiplier));
+      outB[i] = inB[start];
+      i += 1;
     }
   }
 

src/components/App/index.tsx

@@ -9,6 +9,8 @@ import '../../lib/SnackBar';
 import Intro from '../intro';
 import '../custom-els/LoadingSpinner';
 
+const ROUTE_EDITOR = '/editor';
+
 const compressPromise = import(
   /* webpackChunkName: "main-app" */
   '../compress',
@@ -18,15 +20,21 @@ const offlinerPromise = import(
   '../../lib/offliner',
 );
 
+function back() {
+  window.history.back();
+}
+
 interface Props {}
 
 interface State {
   file?: File | Fileish;
+  isEditorOpen: Boolean;
   Compress?: typeof import('../compress').default;
 }
 
 export default class App extends Component<Props, State> {
   state: State = {
+    isEditorOpen: false,
     file: undefined,
     Compress: undefined,
   };
@@ -48,22 +56,33 @@ 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) => {
-        if (oldCDU) oldCDU.call(this, props, state);
+      this.componentDidUpdate = (props, state, prev) => {
+        if (oldCDU) oldCDU.call(this, props, state, prev);
         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(event: FileDropEvent) {
-    const { file } = event;
+  private onFileDrop({ file }: FileDropEvent) {
     if (!file) return;
+    this.openEditor();
     this.setState({ file });
   }
 
   @bind
   private onIntroPickFile(file: File | Fileish) {
+    this.openEditor();
     this.setState({ file });
   }
 
@@ -74,18 +93,25 @@ export default class App extends Component<Props, State> {
   }
 
   @bind
-  private onBack() {
-    this.setState({ file: undefined });
+  private onPopState() {
+    this.setState({ isEditorOpen: location.pathname === ROUTE_EDITOR });
   }
 
-  render({}: Props, { file, Compress }: State) {
+  @bind
+  private openEditor() {
+    if (this.state.isEditorOpen) return;
+    history.pushState(null, '', ROUTE_EDITOR);
+    this.setState({ isEditorOpen: true });
+  }
+
+  render({}: Props, { file, isEditorOpen, Compress }: State) {
     return (
       <div id="app" class={style.app}>
         <file-drop accept="image/*" onfiledrop={this.onFileDrop} class={style.drop}>
-          {(!file)
+          {!isEditorOpen
             ? <Intro onFile={this.onIntroPickFile} showSnack={this.showSnack} />
             : (Compress)
-              ? <Compress file={file} showSnack={this.showSnack} onBack={this.onBack} />
+              ? <Compress file={file!} showSnack={this.showSnack} onBack={back} />
               : <loading-spinner class={style.appLoader}/>
           }
           <snack-bar ref={linkRef(this, 'snackbar')} />

src/components/Options/index.tsx

@@ -40,7 +40,9 @@ import Checkbox from '../checkbox';
 import Expander from '../expander';
 import Select from '../select';
 
-const encoderOptionsComponentMap = {
+const encoderOptionsComponentMap: {
+  [x: string]: (new (...args: any[]) => Component<any, any>) | undefined;
+} = {
   [identity.type]: undefined,
   [optiPNG.type]: OptiPNGEncoderOptions,
   [mozJPEG.type]: MozJpegEncoderOptions,

src/components/Options/style.scss

@@ -43,6 +43,7 @@ $horizontalPadding: 15px;
 
 .text-field {
   background: #fff;
+  color: #000;
   font: inherit;
   border: none;
   padding: 2px 0 2px 10px;

src/components/Output/style.scss

@@ -36,6 +36,8 @@
   // 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 {

src/components/compress/index.tsx

@@ -8,6 +8,7 @@ import Options from '../Options';
 import ResultCache from './result-cache';
 import * as identity from '../../codecs/identity/encoder-meta';
 import * as optiPNG from '../../codecs/optipng/encoder-meta';
+import * as oxiPNG from '../../codecs/oxipng/encoder-meta';
 import * as mozJPEG from '../../codecs/mozjpeg/encoder-meta';
 import * as webP from '../../codecs/webp/encoder-meta';
 import * as browserPNG from '../../codecs/browser-png/encoder-meta';
@@ -85,12 +86,18 @@ interface UpdateImageOptions {
   skipPreprocessing?: boolean;
 }
 
-function processInput(
+async function processInput(
   data: ImageData,
   inputProcessData: InputProcessorState,
   processor: Processor,
 ) {
-  return processor.rotate(data, inputProcessData.rotate);
+  let processedData = data;
+
+  if (inputProcessData.rotate.rotate !== 0) {
+    processedData = await processor.rotate(processedData, inputProcessData.rotate);
+  }
+
+  return processedData;
 }
 
 async function preprocessImage(
@@ -125,6 +132,7 @@ async function compressImage(
   const compressedData = await (() => {
     switch (encodeData.type) {
       case optiPNG.type: return processor.optiPngEncode(image, encodeData.options);
+      case oxiPNG.type: return processor.oxiPngEncode(image, encodeData.options);
       case mozJPEG.type: return processor.mozjpegEncode(image, encodeData.options);
       case webP.type: return processor.webpEncode(image, encodeData.options);
       case browserPNG.type: return processor.browserPngEncode(image);
@@ -154,7 +162,7 @@ function stateForNewSourceData(state: State, newSource: SourceImage): State {
   for (const i of [0, 1]) {
     // Ditch previous encodings
     const downloadUrl = state.sides[i].downloadUrl;
-    if (downloadUrl) URL.revokeObjectURL(downloadUrl!);
+    if (downloadUrl) URL.revokeObjectURL(downloadUrl);
 
     newState = cleanMerge(state, `sides.${i}`, {
       preprocessed: undefined,
@@ -234,6 +242,8 @@ 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);
@@ -301,10 +311,8 @@ export default class Compress extends Component<Props, State> {
       // The image only needs updated if the encoder/preprocessor settings have changed, or the
       // source has changed.
       if (sourceDataChanged || encoderChanged || preprocessorChanged) {
-        this.updateImage(i, {
+        this.queueUpdateImage(i, {
           skipPreprocessing: !sourceDataChanged && !preprocessorChanged,
-        }).catch((err) => {
-          console.error(err);
         });
       }
     }
@@ -313,9 +321,14 @@ 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);
 
     this.setState({
-      sides: cleanSet(this.state.sides, otherIndex, this.state.sides[index]),
+      sides: cleanSet(this.state.sides, otherIndex, newSettings),
     });
 
     const result = await this.props.showSnack('Settings copied across', {
@@ -446,6 +459,27 @@ export default class Compress extends Component<Props, State> {
     }
   }
 
+  /**
+   * 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,
@@ -544,9 +578,9 @@ export default class Compress extends Component<Props, State> {
         mobileView={mobileView}
         preprocessorState={side.latestSettings.preprocessorState}
         encoderState={side.latestSettings.encoderState}
-        onEncoderTypeChange={this.onEncoderTypeChange.bind(this, index)}
-        onEncoderOptionsChange={this.onEncoderOptionsChange.bind(this, index)}
-        onPreprocessorOptionsChange={this.onPreprocessorOptionsChange.bind(this, index)}
+        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)}
       />
     ));
 
@@ -560,7 +594,7 @@ export default class Compress extends Component<Props, State> {
         source={source}
         loading={loading || side.loading}
         copyDirection={copyDirections[index]}
-        onCopyToOtherClick={this.onCopyToOtherClick.bind(this, index)}
+        onCopyToOtherClick={this.onCopyToOtherClick.bind(this, index as 0|1)}
         buttonPosition={mobileView ? 'stack-right' : buttonPositions[index]}
       >
         {!mobileView ? null : [

src/components/compress/style.scss

@@ -40,6 +40,7 @@
   position: relative;
   display: flex;
   flex-flow: column;
+  overflow: hidden;
 
   // Reorder so headings appear after content:
   & > :nth-child(1) {

webpack.config.js

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