Delete .gitignore in resize codec

Use native Wasm+Webpack support for Rust codecs
This delegates loading of Wasm modules to Webpack itself, making wrapper code simpler. Emscripten-generated modules are still using custom loading glue as they're not compatible with Webpack.
2019-08-05 15:07:33 +01:00 · 2019-08-05 14:50:18 +01:00
15 changed files with 116 additions and 308 deletions
--- a/codecs/hqx/build.sh
+++ b/codecs/hqx/build.sh
@@ -6,7 +6,7 @@ echo "============================================="
 echo "Compiling wasm"
 echo "============================================="
 (
-  wasm-pack build --target no-modules
+  wasm-pack build
  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"
--- a/codecs/hqx/index.html
+++ b/codecs/hqx/index.html
@@ -1,24 +0,0 @@
 <!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/pkg/package.json
+++ b/codecs/hqx/pkg/package.json
@@ -9,6 +9,7 @@
    "squooshhqx.js",
    "squooshhqx.d.ts"
  ],
-  "browser": "squooshhqx.js",
+  "module": "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,14 +7,3 @@
 * @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,91 +1,46 @@
-(function() {
+import * as wasm from './squooshhqx_bg.wasm';
    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;
 }
-    let cachegetInt32Memory = null;
+function getArrayU32FromWasm(ptr, len) {
-    function getInt32Memory() {
+    return getUint32Memory().subarray(ptr / 4, ptr / 4 + len);
-        if (cachegetInt32Memory === null || cachegetInt32Memory.buffer !== wasm.memory.buffer) {
+}
-            cachegetInt32Memory = new Int32Array(wasm.memory.buffer);
+/**
-        }
+* @param {Uint32Array} input_image
-        return cachegetInt32Memory;
+* @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;
 }
    function getArrayU32FromWasm(ptr, 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}
    */
    __exports.resize = function(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;
    };
    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/resize/benchmark.js
+++ b/codecs/resize/benchmark.js
@@ -1,53 +0,0 @@
 // 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,8 +6,9 @@ echo "============================================="
 echo "Compiling wasm"
 echo "============================================="
 (
-  wasm-pack build --target no-modules
+  wasm-pack build
  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,7 +2,6 @@
  "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
@@ -0,0 +1,15 @@
 {
  "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
@@ -11,14 +11,3 @@
 * @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;
 /**
 * 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/resize/pkg/resize.js
+++ b/codecs/resize/pkg/resize.js
@@ -1,95 +1,50 @@
-(function() {
+import * as wasm from './resize_bg.wasm';
    const __exports = {};
    let wasm;
-    let cachegetUint8Memory = null;
+let cachegetUint8Memory = null;
-    function getUint8Memory() {
+function getUint8Memory() {
-        if (cachegetUint8Memory === null || cachegetUint8Memory.buffer !== wasm.memory.buffer) {
+    if (cachegetUint8Memory === null || cachegetUint8Memory.buffer !== wasm.memory.buffer) {
-            cachegetUint8Memory = new Uint8Array(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;
 }
-    let cachegetInt32Memory = null;
+function getArrayU8FromWasm(ptr, len) {
-    function getInt32Memory() {
+    return getUint8Memory().subarray(ptr / 1, ptr / 1 + len);
-        if (cachegetInt32Memory === null || cachegetInt32Memory.buffer !== wasm.memory.buffer) {
+}
-            cachegetInt32Memory = new Int32Array(wasm.memory.buffer);
+/**
-        }
+* @param {Uint8Array} input_image
-        return cachegetInt32Memory;
+* @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;
 }
    function getArrayU8FromWasm(ptr, 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}
    */
    __exports.resize = function(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;
    };
    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/resize/pkg/resize_bg.wasm
+++ b/codecs/resize/pkg/resize_bg.wasm
--- a/src/codecs/hqx/processor.ts
+++ b/src/codecs/hqx/processor.ts
@@ -1,24 +1,12 @@
-import wasmUrl from '../../../codecs/hqx/pkg/squooshhqx_bg.wasm';
+import { resize } from '../../../codecs/hqx/pkg';
 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;
-  await ready;
+  const result = resize(
  const result = wasm_bindgen.resize(
    new Uint32Array(input.data.buffer),
    input.width,
    input.height,
--- a/src/codecs/resize/processor.ts
+++ b/src/codecs/resize/processor.ts
@@ -1,17 +1,6 @@
 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);
@@ -41,9 +30,7 @@ export async function resize(data: ImageData, opts: WorkerResizeOptions): Promis
    input = crop(input, Math.round(sx), Math.round(sy), Math.round(sw), Math.round(sh));
  }
-  await ready;
+  const result = codecResize(
  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
@@ -147,8 +147,9 @@ module.exports = async function (_, env) {
          loader: 'exports-loader'
        },
        {
-          // For some reason using `include` here breaks the build.
+          // 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',
@@ -157,6 +158,11 @@ 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',
Author	SHA1	Message	Date
Ingvar Stepanyan	e0ee830a9a	Delete .gitignore in resize codec	2019-08-05 15:07:33 +01:00
Ingvar Stepanyan	73d1aa0332	Use native Wasm+Webpack support for Rust codecs This delegates loading of Wasm modules to Webpack itself, making wrapper code simpler. Emscripten-generated modules are still using custom loading glue as they're not compatible with Webpack.	2019-08-05 14:50:18 +01:00