Run wasm-opt on hqx module

2025-11-13 17:27:09 +00:00 · 2019-06-19 00:27:13 +01:00
29 changed files with 1172 additions and 819 deletions
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-10.16.1
+10.16.0
--- a/codecs/hqx/Dockerfile
+++ b/codecs/hqx/Dockerfile
@@ -1,12 +1,23 @@
 FROM ubuntu
 RUN apt-get update && \
  apt-get install -qqy git build-essential cmake python2.7
 RUN git clone --recursive https://github.com/WebAssembly/wabt /usr/src/wabt
 RUN mkdir -p /usr/src/wabt/build
 WORKDIR /usr/src/wabt/build
 RUN cmake .. -DCMAKE_INSTALL_PREFIX=/opt/wabt && \
  make && \
  make install
 FROM rust
-RUN rustup target add wasm32-unknown-unknown
+RUN rustup install nightly && \
-RUN curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
+  rustup target add --toolchain nightly wasm32-unknown-unknown && \
  cargo install wasm-pack
 COPY --from=0 /opt/wabt /opt/wabt
 RUN mkdir /opt/binaryen && \
- curl -L https://github.com/WebAssembly/binaryen/releases/download/1.38.32/binaryen-1.38.32-x86-linux.tar.gz  | tar -xzf - -C /opt/binaryen --strip 1
+  curl -L https://github.com/WebAssembly/binaryen/releases/download/1.38.32/binaryen-1.38.32-x86-linux.tar.gz  | tar -xzf - -C /opt/binaryen --strip 1
-RUN mkdir /opt/wabt && \
+ENV PATH="/opt/binaryen:/opt/wabt/bin:${PATH}"
 curl -L https://github.com/WebAssembly/wabt/releases/download/1.0.11/wabt-1.0.11-linux.tar.gz  | tar -xzf - -C /opt/wabt --strip 1
 ENV PATH="/opt/binaryen:/opt/wabt:${PATH}"
 WORKDIR /src
--- a/codecs/hqx/build.sh
+++ b/codecs/hqx/build.sh
@@ -6,11 +6,11 @@ echo "============================================="
 echo "Compiling wasm"
 echo "============================================="
 (
-  wasm-pack build
+  rustup run nightly \
    wasm-pack build --target no-modules
  mv pkg/squooshhqx_bg.wasm pkg/squooshhqx_bg.unopt.wasm
  wasm-opt -Os --no-validation pkg/squooshhqx_bg.unopt.wasm -o pkg/squooshhqx_bg.wasm
  wasm-strip pkg/squooshhqx_bg.wasm
  echo "Optimising Wasm so it doesn't break Chrome (this takes like 10-15mins. get a cup of tea)"
  echo "Once https://crbug.com/974804 is fixed, we can remove this step"
  wasm-opt -Os --no-validation -o pkg/squooshhqx_bg.wasm pkg/squooshhqx_bg.wasm
  rm pkg/.gitignore
 )
 echo "============================================="
--- a/codecs/hqx/index.html
+++ b/codecs/hqx/index.html
@@ -0,0 +1,24 @@
 <!doctype html>
 <script src ="./pkg/squooshhqx.js"></script>
 <script type="module">
  async function run() {
    await wasm_bindgen("./pkg/squooshhqx_bg.wasm");
    const bitmap = await createImageBitmap(await fetch("https://i.imgur.com/MNDnBSc.png").then(r => r.blob()));
    const canvas = document.createElement("canvas");
    canvas.width = bitmap.width;
    canvas.height = bitmap.height;
    const ctx = canvas.getContext("2d");
    ctx.drawImage(bitmap, 0, 0);
    const imgdata = ctx.getImageData(0, 0, bitmap.width, bitmap.height);
    const factor = 4;
    const r = wasm_bindgen.resize(new Uint32Array(imgdata.data.buffer), bitmap.width, bitmap.height, factor);
    canvas.width = bitmap.width * factor;
    canvas.height = bitmap.height * factor;
    const output = new ImageData(new Uint8ClampedArray(r.buffer), canvas.width, canvas.height);
    ctx.putImageData(output, 0, 0);
    canvas.style = `width: ${canvas.width}px; height: ${canvas.height}px; image-rendering: pixelated;`;
    document.body.append(canvas);
  }
  run();
 </script>
--- a/codecs/hqx/loading_benchmark.js
+++ b/codecs/hqx/loading_benchmark.js
@@ -0,0 +1,11 @@
 // THIS IS NOT A NODE SCRIPT
 // This is a d8 script. Please install jsvu[1] and install v8.
 // Then run `npm run --silent benchmark`.
 // [1]: https://github.com/GoogleChromeLabs/jsvu
 async function init() {
  const start = Date.now();
  const module = await WebAssembly.compile(readbuffer("pkg/squooshhqx_bg.wasm"));
  print(`${Date.now()/1000 - start/1000}`);
 }
 init().catch(e => console.error(e.stack));
--- a/codecs/hqx/pkg/package.json
+++ b/codecs/hqx/pkg/package.json
@@ -9,7 +9,6 @@
    "squooshhqx.js",
    "squooshhqx.d.ts"
  ],
-  "module": "squooshhqx.js",
+  "browser": "squooshhqx.js",
-  "types": "squooshhqx.d.ts",
+  "types": "squooshhqx.d.ts"
  "sideEffects": "false"
 }
--- a/codecs/hqx/pkg/squooshhqx.d.ts
+++ b/codecs/hqx/pkg/squooshhqx.d.ts
@@ -7,3 +7,14 @@
 * @returns {Uint32Array} 
 */
 export function resize(input_image: Uint32Array, input_width: number, input_height: number, factor: number): Uint32Array;
 /**
 * If `module_or_path` is {RequestInfo}, makes a request and
 * for everything else, calls `WebAssembly.instantiate` directly.
 *
 * @param {RequestInfo | BufferSource | WebAssembly.Module} module_or_path
 *
 * @returns {Promise<any>}
 */
 export default function init (module_or_path: RequestInfo | BufferSource | WebAssembly.Module): Promise<any>;
--- a/codecs/hqx/pkg/squooshhqx.js
+++ b/codecs/hqx/pkg/squooshhqx.js
@@ -1,46 +1,97 @@
-import * as wasm from './squooshhqx_bg.wasm';
+(function() {
    const __exports = {};
    let wasm;
-let cachegetUint32Memory = null;
+    let cachegetUint32Memory = null;
-function getUint32Memory() {
+    function getUint32Memory() {
-    if (cachegetUint32Memory === null || cachegetUint32Memory.buffer !== wasm.memory.buffer) {
+        if (cachegetUint32Memory === null || cachegetUint32Memory.buffer !== wasm.memory.buffer) {
-        cachegetUint32Memory = new Uint32Array(wasm.memory.buffer);
+            cachegetUint32Memory = new Uint32Array(wasm.memory.buffer);
        }
        return cachegetUint32Memory;
    }
    return cachegetUint32Memory;
 }
-let WASM_VECTOR_LEN = 0;
+    let WASM_VECTOR_LEN = 0;
-function passArray32ToWasm(arg) {
+    function passArray32ToWasm(arg) {
-    const ptr = wasm.__wbindgen_malloc(arg.length * 4);
+        const ptr = wasm.__wbindgen_malloc(arg.length * 4);
-    getUint32Memory().set(arg, ptr / 4);
+        getUint32Memory().set(arg, ptr / 4);
-    WASM_VECTOR_LEN = arg.length;
+        WASM_VECTOR_LEN = arg.length;
-    return ptr;
+        return ptr;
 }
 let cachegetInt32Memory = null;
 function getInt32Memory() {
    if (cachegetInt32Memory === null || cachegetInt32Memory.buffer !== wasm.memory.buffer) {
        cachegetInt32Memory = new Int32Array(wasm.memory.buffer);
    }
    return cachegetInt32Memory;
 }
-function getArrayU32FromWasm(ptr, len) {
+    function getArrayU32FromWasm(ptr, len) {
-    return getUint32Memory().subarray(ptr / 4, ptr / 4 + len);
+        return getUint32Memory().subarray(ptr / 4, ptr / 4 + len);
-}
+    }
 /**
 * @param {Uint32Array} input_image
 * @param {number} input_width
 * @param {number} input_height
 * @param {number} factor
 * @returns {Uint32Array}
 */
 export function resize(input_image, input_width, input_height, factor) {
    const retptr = 8;
    const ret = wasm.resize(retptr, passArray32ToWasm(input_image), WASM_VECTOR_LEN, input_width, input_height, factor);
    const memi32 = getInt32Memory();
    const v0 = getArrayU32FromWasm(memi32[retptr / 4 + 0], memi32[retptr / 4 + 1]).slice();
    wasm.__wbindgen_free(memi32[retptr / 4 + 0], memi32[retptr / 4 + 1] * 4);
    return v0;
 }
    let cachedGlobalArgumentPtr = null;
    function globalArgumentPtr() {
        if (cachedGlobalArgumentPtr === null) {
            cachedGlobalArgumentPtr = wasm.__wbindgen_global_argument_ptr();
        }
        return cachedGlobalArgumentPtr;
    }
    /**
    * @param {Uint32Array} input_image
    * @param {number} input_width
    * @param {number} input_height
    * @param {number} factor
    * @returns {Uint32Array}
    */
    __exports.resize = function(input_image, input_width, input_height, factor) {
        const ptr0 = passArray32ToWasm(input_image);
        const len0 = WASM_VECTOR_LEN;
        const retptr = globalArgumentPtr();
        wasm.resize(retptr, ptr0, len0, input_width, input_height, factor);
        const mem = getUint32Memory();
        const rustptr = mem[retptr / 4];
        const rustlen = mem[retptr / 4 + 1];
        const realRet = getArrayU32FromWasm(rustptr, rustlen).slice();
        wasm.__wbindgen_free(rustptr, rustlen * 4);
        return realRet;
    };
    function init(module) {
        let result;
        const imports = {};
        if (module instanceof URL || typeof module === 'string' || module instanceof Request) {
            const response = fetch(module);
            if (typeof WebAssembly.instantiateStreaming === 'function') {
                result = WebAssembly.instantiateStreaming(response, imports)
                .catch(e => {
                    console.warn("`WebAssembly.instantiateStreaming` failed. Assuming this is because your server does not serve wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e);
                    return response
                    .then(r => r.arrayBuffer())
                    .then(bytes => WebAssembly.instantiate(bytes, imports));
                });
            } else {
                result = response
                .then(r => r.arrayBuffer())
                .then(bytes => WebAssembly.instantiate(bytes, imports));
            }
        } else {
            result = WebAssembly.instantiate(module, imports)
            .then(result => {
                if (result instanceof WebAssembly.Instance) {
                    return { instance: result, module };
                } else {
                    return result;
                }
            });
        }
        return result.then(({instance, module}) => {
            wasm = instance.exports;
            init.__wbindgen_wasm_module = module;
            return wasm;
        });
    }
    self.wasm_bindgen = Object.assign(init, __exports);
 })();
--- a/codecs/hqx/pkg/squooshhqx_bg.d.ts
+++ b/codecs/hqx/pkg/squooshhqx_bg.d.ts
@@ -1,5 +1,6 @@
 /* tslint:disable */
 export const memory: WebAssembly.Memory;
 export function resize(a: number, b: number, c: number, d: number, e: number, f: number): void;
 export function __wbindgen_global_argument_ptr(): number;
 export function __wbindgen_malloc(a: number): number;
 export function __wbindgen_free(a: number, b: number): void;
 export function resize(a: number, b: number, c: number, d: number, e: number, f: number): void;
--- a/codecs/hqx/pkg/squooshhqx_bg.wasm
+++ b/codecs/hqx/pkg/squooshhqx_bg.wasm
--- a/codecs/resize/Cargo.toml
+++ b/codecs/resize/Cargo.toml
@@ -1,5 +1,5 @@
 [package]
-name = "resize"
+name = "squooshresize"
 version = "0.1.0"
 authors = ["Surma <surma@surma.link>"]
--- a/codecs/resize/Dockerfile
+++ b/codecs/resize/Dockerfile
@@ -1,9 +1,18 @@
 FROM ubuntu
 RUN apt-get update && \
  apt-get install -qqy git build-essential cmake python2.7
 RUN git clone --recursive https://github.com/WebAssembly/wabt /usr/src/wabt
 RUN mkdir -p /usr/src/wabt/build
 WORKDIR /usr/src/wabt/build
 RUN cmake .. -DCMAKE_INSTALL_PREFIX=/opt/wabt && \
  make && \
  make install
 FROM rust
-RUN rustup target add wasm32-unknown-unknown
+RUN rustup install nightly && \
-RUN curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
+  rustup target add --toolchain nightly wasm32-unknown-unknown && \
  cargo install wasm-pack
-RUN mkdir /opt/wabt && \
+COPY --from=0 /opt/wabt /opt/wabt
- curl -L https://github.com/WebAssembly/wabt/releases/download/1.0.11/wabt-1.0.11-linux.tar.gz  | tar -xzf - -C /opt/wabt --strip 1
+ENV PATH="/opt/wabt/bin:${PATH}"
 ENV PATH="/opt/wabt:${PATH}"
 WORKDIR /src
--- a/codecs/resize/benchmark.js
+++ b/codecs/resize/benchmark.js
@@ -0,0 +1,53 @@
 // THIS IS NOT A NODE SCRIPT
 // This is a d8 script. Please install jsvu[1] and install v8.
 // Then run `npm run --silent benchmark`.
 // [1]: https://github.com/GoogleChromeLabs/jsvu
 self = global = this;
 load("./pkg/resize.js");
 async function init() {
  //  Adjustable constants.
  const inputDimensions = 2000;
  const outputDimensions = 1500;
  const algorithm = 3; // Lanczos
  const iterations = new Array(100);
  // Constants. Don’t change.
  const imageByteSize = inputDimensions * inputDimensions * 4;
  const imageBuffer = new Uint8ClampedArray(imageByteSize);
  const module = await WebAssembly.compile(readbuffer("./pkg/resize_bg.wasm"));
  await wasm_bindgen(module);
  [[false, false], [true, false], [false, true], [true, true]].forEach(
    opts => {
      print(`\npremultiplication: ${opts[0]}`);
      print(`color space conversion: ${opts[1]}`);
      print(`==============================`);
      for (let i = 0; i < 100; i++) {
        const start = Date.now();
        wasm_bindgen.resize(
          imageBuffer,
          inputDimensions,
          inputDimensions,
          outputDimensions,
          outputDimensions,
          algorithm,
          ...opts
        );
        iterations[i] = Date.now() - start;
      }
      const average =
        iterations.reduce((sum, c) => sum + c) / iterations.length;
      const stddev = Math.sqrt(
        iterations
          .map(i => Math.pow(i - average, 2))
          .reduce((sum, c) => sum + c) / iterations.length
      );
      print(`n = ${iterations.length}`);
      print(`Average: ${average}`);
      print(`StdDev: ${stddev}`);
    }
  );
 }
 init().catch(e => console.error(e, e.stack));
--- a/codecs/resize/build.sh
+++ b/codecs/resize/build.sh
@@ -6,9 +6,9 @@ echo "============================================="
 echo "Compiling wasm"
 echo "============================================="
 (
-  wasm-pack build
+  rustup run nightly \
    wasm-pack build --target no-modules
  wasm-strip pkg/resize_bg.wasm
  rm pkg/.gitignore
 )
 echo "============================================="
 echo "Compiling wasm  done"
--- a/codecs/resize/package.json
+++ b/codecs/resize/package.json
@@ -2,6 +2,7 @@
  "name": "resize",
  "scripts": {
    "build:image": "docker build -t squoosh-resize .",
-    "build": "docker run --rm -v $(pwd):/src squoosh-resize ./build.sh"
+    "build": "docker run --rm -v $(pwd):/src squoosh-resize ./build.sh",
    "benchmark": "v8 --no-liftoff --no-wasm-tier-up ./benchmark.js"
  }
 }
--- a/codecs/resize/pkg/package.json
+++ b/codecs/resize/pkg/package.json
@@ -1,15 +0,0 @@
 {
  "name": "resize",
  "collaborators": [
    "Surma <surma@surma.link>"
  ],
  "version": "0.1.0",
  "files": [
    "resize_bg.wasm",
    "resize.js",
    "resize.d.ts"
  ],
  "module": "resize.js",
  "types": "resize.d.ts",
  "sideEffects": "false"
 }
--- a/codecs/resize/pkg/resize.d.ts
+++ b/codecs/resize/pkg/resize.d.ts
@@ -1,13 +1,13 @@
 /* tslint:disable */
 /**
-* @param {Uint8Array} input_image 
+* @param {Uint8Array} arg0 
-* @param {number} input_width 
+* @param {number} arg1 
-* @param {number} input_height 
+* @param {number} arg2 
-* @param {number} output_width 
+* @param {number} arg3 
-* @param {number} output_height 
+* @param {number} arg4 
-* @param {number} typ_idx 
+* @param {number} arg5 
-* @param {boolean} premultiply 
+* @param {boolean} arg6 
-* @param {boolean} color_space_conversion 
+* @param {boolean} arg7 
 * @returns {Uint8Array} 
 */
-export function resize(input_image: Uint8Array, input_width: number, input_height: number, output_width: number, output_height: number, typ_idx: number, premultiply: boolean, color_space_conversion: boolean): Uint8Array;
+export function resize(arg0: Uint8Array, arg1: number, arg2: number, arg3: number, arg4: number, arg5: number, arg6: boolean, arg7: boolean): Uint8Array;
--- a/codecs/resize/pkg/resize.js
+++ b/codecs/resize/pkg/resize.js
@@ -1,50 +1,114 @@
-import * as wasm from './resize_bg.wasm';
+(function() {
    var wasm;
    const __exports = {};
-let cachegetUint8Memory = null;
+
-function getUint8Memory() {
+    let cachegetUint8Memory = null;
-    if (cachegetUint8Memory === null || cachegetUint8Memory.buffer !== wasm.memory.buffer) {
+    function getUint8Memory() {
-        cachegetUint8Memory = new Uint8Array(wasm.memory.buffer);
+        if (cachegetUint8Memory === null || cachegetUint8Memory.buffer !== wasm.memory.buffer) {
            cachegetUint8Memory = new Uint8Array(wasm.memory.buffer);
        }
        return cachegetUint8Memory;
    }
    return cachegetUint8Memory;
 }
-let WASM_VECTOR_LEN = 0;
+    let WASM_VECTOR_LEN = 0;
-function passArray8ToWasm(arg) {
+    function passArray8ToWasm(arg) {
-    const ptr = wasm.__wbindgen_malloc(arg.length * 1);
+        const ptr = wasm.__wbindgen_malloc(arg.length * 1);
-    getUint8Memory().set(arg, ptr / 1);
+        getUint8Memory().set(arg, ptr / 1);
-    WASM_VECTOR_LEN = arg.length;
+        WASM_VECTOR_LEN = arg.length;
-    return ptr;
+        return ptr;
 }
 let cachegetInt32Memory = null;
 function getInt32Memory() {
    if (cachegetInt32Memory === null || cachegetInt32Memory.buffer !== wasm.memory.buffer) {
        cachegetInt32Memory = new Int32Array(wasm.memory.buffer);
    }
    return cachegetInt32Memory;
 }
-function getArrayU8FromWasm(ptr, len) {
+    function getArrayU8FromWasm(ptr, len) {
-    return getUint8Memory().subarray(ptr / 1, ptr / 1 + len);
+        return getUint8Memory().subarray(ptr / 1, ptr / 1 + len);
-}
+    }
 /**
 * @param {Uint8Array} input_image
 * @param {number} input_width
 * @param {number} input_height
 * @param {number} output_width
 * @param {number} output_height
 * @param {number} typ_idx
 * @param {boolean} premultiply
 * @param {boolean} color_space_conversion
 * @returns {Uint8Array}
 */
 export function resize(input_image, input_width, input_height, output_width, output_height, typ_idx, premultiply, color_space_conversion) {
    const retptr = 8;
    const ret = wasm.resize(retptr, passArray8ToWasm(input_image), WASM_VECTOR_LEN, input_width, input_height, output_width, output_height, typ_idx, premultiply, color_space_conversion);
    const memi32 = getInt32Memory();
    const v0 = getArrayU8FromWasm(memi32[retptr / 4 + 0], memi32[retptr / 4 + 1]).slice();
    wasm.__wbindgen_free(memi32[retptr / 4 + 0], memi32[retptr / 4 + 1] * 1);
    return v0;
 }
    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
    * @param {number} arg2
    * @param {number} arg3
    * @param {number} arg4
    * @param {number} arg5
    * @param {boolean} arg6
    * @param {boolean} arg7
    * @returns {Uint8Array}
    */
    __exports.resize = function(arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7) {
        const ptr0 = passArray8ToWasm(arg0);
        const len0 = WASM_VECTOR_LEN;
        const retptr = globalArgumentPtr();
        wasm.resize(retptr, ptr0, len0, arg1, arg2, arg3, arg4, arg5, arg6, arg7);
        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;
    };
    const heap = new Array(32);
    heap.fill(undefined);
    heap.push(undefined, null, true, false);
    let heap_next = heap.length;
    function dropObject(idx) {
        if (idx < 36) return;
        heap[idx] = heap_next;
        heap_next = idx;
    }
    __exports.__wbindgen_object_drop_ref = function(i) { dropObject(i); };
    function init(path_or_module) {
        let instantiation;
        const imports = { './resize': __exports };
        if (path_or_module instanceof WebAssembly.Module) {
            instantiation = WebAssembly.instantiate(path_or_module, imports)
            .then(instance => {
            return { instance, module: path_or_module }
        });
    } else {
        const data = fetch(path_or_module);
        if (typeof WebAssembly.instantiateStreaming === 'function') {
            instantiation = WebAssembly.instantiateStreaming(data, imports)
            .catch(e => {
                console.warn("`WebAssembly.instantiateStreaming` failed. Assuming this is because your server does not serve wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e);
                return data
                .then(r => r.arrayBuffer())
                .then(bytes => WebAssembly.instantiate(bytes, imports));
            });
        } else {
            instantiation = data
            .then(response => response.arrayBuffer())
            .then(buffer => WebAssembly.instantiate(buffer, imports));
        }
    }
    return instantiation.then(({instance}) => {
        wasm = init.wasm = instance.exports;
    });
 };
 self.wasm_bindgen = Object.assign(init, __exports);
 })();
--- a/codecs/resize/pkg/resize_bg.d.ts
+++ b/codecs/resize/pkg/resize_bg.d.ts
@@ -1,5 +1,6 @@
 /* tslint:disable */
 export const memory: WebAssembly.Memory;
 export function __wbindgen_global_argument_ptr(): number;
 export function __wbindgen_malloc(a: number): number;
 export function __wbindgen_free(a: number, b: number): void;
 export function resize(a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number): void;
--- a/codecs/resize/pkg/resize_bg.wasm
+++ b/codecs/resize/pkg/resize_bg.wasm
--- a/codecs/rotate/Dockerfile
+++ b/codecs/rotate/Dockerfile
@@ -1,8 +1,17 @@
 FROM ubuntu
 RUN apt-get update && \
  apt-get install -qqy git build-essential cmake python2.7
 RUN git clone --recursive https://github.com/WebAssembly/wabt /usr/src/wabt
 RUN mkdir -p /usr/src/wabt/build
 WORKDIR /usr/src/wabt/build
 RUN cmake .. -DCMAKE_INSTALL_PREFIX=/opt/wabt && \
  make && \
  make install
 FROM rust
-RUN rustup target add wasm32-unknown-unknown
+RUN rustup install nightly && \
  rustup target add --toolchain nightly wasm32-unknown-unknown
-RUN mkdir /opt/wabt && \
+COPY --from=0 /opt/wabt /opt/wabt
- curl -L https://github.com/WebAssembly/wabt/releases/download/1.0.11/wabt-1.0.11-linux.tar.gz  | tar -xzf - -C /opt/wabt --strip 1
+ENV PATH="/opt/wabt/bin:${PATH}"
 ENV PATH="/opt/wabt:${PATH}"
 WORKDIR /src
--- a/codecs/rotate/build.sh
+++ b/codecs/rotate/build.sh
@@ -6,7 +6,8 @@ echo "============================================="
 echo "Compiling wasm"
 echo "============================================="
 (
-  cargo build \
+  rustup run nightly \
    cargo build \
    --target wasm32-unknown-unknown \
    --release
  cp target/wasm32-unknown-unknown/release/rotate.wasm .
--- a/codecs/rotate/rotate.wasm
+++ b/codecs/rotate/rotate.wasm
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "private": true,
  "name": "squoosh",
-  "version": "1.8.1",
+  "version": "1.8.0",
  "license": "apache-2.0",
  "scripts": {
    "start": "webpack-dev-server --host 0.0.0.0 --hot",
@@ -16,32 +16,32 @@
    }
  },
  "devDependencies": {
-    "@types/node": "10.14.14",
+    "@types/node": "10.14.9",
    "@types/pretty-bytes": "5.1.0",
    "@types/webassembly-js-api": "0.0.3",
    "@webcomponents/custom-elements": "1.2.4",
    "@webpack-cli/serve": "0.1.8",
    "assets-webpack-plugin": "3.9.10",
    "chalk": "2.4.2",
-    "chokidar": "3.0.2",
+    "chokidar": "3.0.1",
    "classnames": "2.2.6",
    "clean-webpack-plugin": "1.0.1",
    "comlink": "3.1.1",
-    "copy-webpack-plugin": "5.0.4",
+    "copy-webpack-plugin": "5.0.3",
-    "critters-webpack-plugin": "2.4.0",
+    "critters-webpack-plugin": "2.3.0",
    "css-loader": "1.0.1",
    "ejs": "2.6.2",
    "escape-string-regexp": "2.0.0",
    "exports-loader": "0.7.0",
    "file-drop-element": "0.2.0",
-    "file-loader": "4.1.0",
+    "file-loader": "4.0.0",
    "gzip-size": "5.1.1",
    "html-webpack-plugin": "3.2.0",
-    "husky": "3.0.2",
+    "husky": "2.4.1",
    "idb-keyval": "3.2.0",
    "linkstate": "1.1.1",
    "loader-utils": "1.2.3",
-    "mini-css-extract-plugin": "0.8.0",
+    "mini-css-extract-plugin": "0.7.0",
    "minimatch": "3.0.4",
    "node-fetch": "2.6.0",
    "node-sass": "4.12.0",
@@ -49,28 +49,28 @@
    "pointer-tracker": "2.0.3",
    "preact": "8.4.2",
    "prerender-loader": "1.3.0",
-    "pretty-bytes": "5.3.0",
+    "pretty-bytes": "5.2.0",
    "progress-bar-webpack-plugin": "1.12.1",
-    "raw-loader": "3.1.0",
+    "raw-loader": "3.0.0",
-    "readdirp": "3.1.1",
+    "readdirp": "3.0.2",
    "sass-loader": "7.1.0",
-    "script-ext-html-webpack-plugin": "2.1.4",
+    "script-ext-html-webpack-plugin": "2.1.3",
    "source-map-loader": "0.2.4",
    "style-loader": "0.23.1",
-    "terser-webpack-plugin": "1.4.1",
+    "terser-webpack-plugin": "1.3.0",
-    "travis-size-report": "1.1.0",
+    "travis-size-report": "1.0.1",
    "ts-loader": "6.0.3",
-    "tslint": "5.18.0",
+    "tslint": "5.17.0",
    "tslint-config-airbnb": "5.11.1",
    "tslint-config-semistandard": "8.0.1",
    "tslint-react": "4.0.0",
    "typed-css-modules": "0.4.2",
-    "typescript": "3.5.3",
+    "typescript": "3.5.2",
-    "url-loader": "2.1.0",
+    "url-loader": "2.0.0",
    "webpack": "4.28.0",
-    "webpack-bundle-analyzer": "3.4.1",
+    "webpack-bundle-analyzer": "3.3.2",
    "webpack-cli": "3.3.4",
-    "webpack-dev-server": "3.7.2",
+    "webpack-dev-server": "3.7.1",
    "worker-plugin": "3.1.0"
  }
 }
--- a/src/codecs/hqx/processor.ts
+++ b/src/codecs/hqx/processor.ts
@@ -1,12 +1,24 @@
-import { resize } from '../../../codecs/hqx/pkg';
+import wasmUrl from '../../../codecs/hqx/pkg/squooshhqx_bg.wasm';
 import '../../../codecs/hqx/pkg/squooshhqx';
 import { HqxOptions } from './processor-meta';
 interface WasmBindgenExports {
  resize: typeof import('../../../codecs/hqx/pkg/squooshhqx').resize;
 }
 type WasmBindgen = ((url: string) => Promise<void>) & WasmBindgenExports;
 declare var wasm_bindgen: WasmBindgen;
 const ready = wasm_bindgen(wasmUrl);
 export async function hqx(
  data: ImageData,
  opts: HqxOptions,
 ): Promise<ImageData> {
  const input = data;
-  const result = resize(
+  await ready;
  const result = wasm_bindgen.resize(
    new Uint32Array(input.data.buffer),
    input.width,
    input.height,
--- a/src/codecs/resize/options.tsx
+++ b/src/codecs/resize/options.tsx
@@ -24,6 +24,19 @@ interface State {
 const sizePresets = [0.25, 0.3333, 0.5, 1, 2, 3, 4];
 /**
 * Should we allow the user to select hqx? Chrome currently has a wasm bug, so we currently avoid it
 * there, unless overridden.
 * crbug.com/974804
 */
 const allowHqx: boolean = (() => {
  const url = new URL(location.href);
  return url.searchParams.has('allow-hqx')
    // Yep. UA sniffing. Let's hope we can remove this soon.
    // Block browsers with Chrome/, unless they also have Edge/ (since the Edge UA includes Chrome/)
    || !navigator.userAgent.includes('Chrome/') || navigator.userAgent.includes('Edge/');
 })();
 export default class ResizerOptions extends Component<Props, State> {
  state: State = {
    maintainAspect: true,
@@ -150,7 +163,7 @@ export default class ResizerOptions extends Component<Props, State> {
            <option value="mitchell">Mitchell</option>
            <option value="catrom">Catmull-Rom</option>
            <option value="triangle">Triangle (bilinear)</option>
-            <option value="hqx">hqx (pixel art)</option>
+            {allowHqx && <option value="hqx">hqx (pixel art)</option>}
            <option value="browser-pixelated">Browser pixelated</option>
            <option value="browser-low">Browser low quality</option>
            <option value="browser-medium">Browser medium quality</option>
--- a/src/codecs/resize/processor.ts
+++ b/src/codecs/resize/processor.ts
@@ -1,6 +1,17 @@
 import wasmUrl from '../../../codecs/resize/pkg/resize_bg.wasm';
 import '../../../codecs/resize/pkg/resize';
 import { WorkerResizeOptions } from './processor-meta';
 import { getContainOffsets } from './util';
-import { resize as codecResize } from '../../../codecs/resize/pkg';
+
 interface WasmBindgenExports {
  resize: typeof import('../../../codecs/resize/pkg/resize').resize;
 }
 type WasmBindgen = ((url: string) => Promise<void>) & WasmBindgenExports;
 declare var wasm_bindgen: WasmBindgen;
 const ready = wasm_bindgen(wasmUrl);
 function crop(data: ImageData, sx: number, sy: number, sw: number, sh: number): ImageData {
  const inputPixels = new Uint32Array(data.data.buffer);
@@ -30,7 +41,9 @@ export async function resize(data: ImageData, opts: WorkerResizeOptions): Promis
    input = crop(input, Math.round(sx), Math.round(sy), Math.round(sw), Math.round(sh));
  }
-  const result = codecResize(
+  await ready;
  const result = wasm_bindgen.resize(
    new Uint8Array(input.data.buffer), input.width, input.height, opts.width, opts.height,
    resizeMethods.indexOf(opts.method), opts.premultiply, opts.linearRGB,
  );
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,3 +1,4 @@
 const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
 const CleanPlugin = require('clean-webpack-plugin');
@@ -16,7 +17,11 @@ const CrittersPlugin = require('critters-webpack-plugin');
 const AssetTemplatePlugin = require('./config/asset-template-plugin');
 const addCssTypes = require('./config/add-css-types');
-const VERSION = require('./package.json').version;
+function readJson (filename) {
  return JSON.parse(fs.readFileSync(filename));
 }
 const VERSION = readJson('./package.json').version;
 module.exports = async function (_, env) {
  const isProd = env.mode === 'production';
@@ -142,14 +147,11 @@ module.exports = async function (_, env) {
        },
        {
          // All the codec files define a global with the same name as their file name. `exports-loader` attaches those to `module.exports`.
-          test: /\.js$/,
+          test: /\/codecs\/.*\.js$/,
          include: path.join(__dirname, 'src/codecs'),
          loader: 'exports-loader'
        },
        {
-          // Emscripten modules don't work with Webpack's Wasm loader.
+          test: /\/codecs\/.*\.wasm$/,
          test: /\.wasm$/,
          exclude: /_bg\.wasm$/,
          // This is needed to make webpack NOT process wasm files.
          // See https://github.com/webpack/webpack/issues/6725
          type: 'javascript/auto',
@@ -158,11 +160,6 @@ module.exports = async function (_, env) {
            name: '[name].[hash:5].[ext]',
          },
        },
        {
          // Wasm modules generated by Rust + wasm-pack work great with Webpack.
          test: /_bg\.wasm$/,
          type: 'webassembly/experimental',
        },
        {
          test: /\.(png|svg|jpg|gif)$/,
          loader: 'file-loader',
@@ -175,7 +172,7 @@ module.exports = async function (_, env) {
    plugins: [
      new webpack.IgnorePlugin(
        /(fs|crypto|path)/,
-        /[/\\]codecs[/\\]/
+        new RegExp(`${path.sep}codecs${path.sep}`)
      ),
      // Pretty progressbar showing build progress:
@@ -242,7 +239,7 @@ module.exports = async function (_, env) {
          removeRedundantAttributes: true,
          removeComments: true
        },
-        manifest: require('./src/manifest.json'),
+        manifest: readJson('./src/manifest.json'),
        inject: 'body',
        compile: true
      }),