Two workers & worker termination (#198)

* Refactoring codecs

* Plugging in new processor

* Fixing decorator

* MozJPEG free issue

* Better worker aborting, and terminate workers that aren't used for 10 seconds

* Better comment

* Ooops, half-typed comment

* Uncommenting problematic line

* Surma fixed it!

* Abstracting WASM initialisation

* Better comment

* Don't need this.

* Adding ticket

* noInitalRun

* Reverting MozJPEG issue demo

* Making a const for worker timeout

* Inline docs

* Bail early rather than nesting

* Addressing nits

src/codecs/imagequant/Quantizer.worker.ts

@@ -1,46 +0,0 @@
-import { QuantizeOptions } from './quantizer';
-import imagequant, { QuantizerModule } from '../../../codecs/imagequant/imagequant';
-// Using require() so TypeScript doesn’t complain about this not being a module.
-const wasmBinaryUrl = require('../../../codecs/imagequant/imagequant.wasm');
-
-export default class ImageQuant {
-  private emscriptenModule: Promise<QuantizerModule>;
-
-  constructor() {
-    this.emscriptenModule = new Promise((resolve) => {
-      const m = imagequant({
-        // Just to be safe, don’t automatically invoke any wasm functions
-        noInitialRun: false,
-        locateFile(url: string): string {
-          // Redirect the request for the wasm binary to whatever webpack gave us.
-          if (url.endsWith('.wasm')) {
-            return wasmBinaryUrl;
-          }
-          return url;
-        },
-        onRuntimeInitialized() {
-          // An Emscripten is a then-able that, for some reason, `then()`s itself,
-          // causing an infite loop when you wrap it in a real promise. Deleting the `then`
-          // prop solves this for now.
-          // See: https://github.com/kripken/emscripten/blob/incoming/src/postamble.js#L129
-          // TODO(surma@): File a bug with Emscripten on this.
-          delete (m as any).then;
-          resolve(m);
-        },
-      });
-    });
-  }
-
-  async quantize(data: ImageData, opts: QuantizeOptions): Promise<ImageData> {
-    const m = await this.emscriptenModule;
-
-    const result = opts.zx ?
-        m.zx_quantize(data.data, data.width, data.height, opts.dither)
-      :
-        m.quantize(data.data, data.width, data.height, opts.maxNumColors, opts.dither);
-
-    m.free_result();
-
-    return new ImageData(new Uint8ClampedArray(result.buffer), result.width, result.height);
-  }
-}

src/codecs/imagequant/options.tsx

@@ -1,7 +1,7 @@
 import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
 import { inputFieldValueAsNumber, konami } from '../../lib/util';
-import { QuantizeOptions } from './quantizer';
+import { QuantizeOptions } from './processor-meta';
 
 const konamiPromise = konami();
 

src/codecs/imagequant/processor-meta.ts

@@ -0,0 +1,11 @@
+export interface QuantizeOptions {
+  zx: number;
+  maxNumColors: number;
+  dither: number;
+}
+
+export const defaultOptions: QuantizeOptions = {
+  zx: 0,
+  maxNumColors: 256,
+  dither: 1.0,
+};

src/codecs/imagequant/processor.ts

@@ -0,0 +1,21 @@
+import imagequant, { QuantizerModule } from '../../../codecs/imagequant/imagequant';
+import wasmUrl from '../../../codecs/imagequant/imagequant.wasm';
+import { QuantizeOptions } from './processor-meta';
+import { initWasmModule } from '../util';
+
+let emscriptenModule: Promise<QuantizerModule>;
+
+export async function process(data: ImageData, opts: QuantizeOptions): Promise<ImageData> {
+  if (!emscriptenModule) emscriptenModule = initWasmModule(imagequant, wasmUrl);
+
+  const module = await emscriptenModule;
+
+  const result = opts.zx ?
+      module.zx_quantize(data.data, data.width, data.height, opts.dither)
+    :
+      module.quantize(data.data, data.width, data.height, opts.maxNumColors, opts.dither);
+
+  module.free_result();
+
+  return new ImageData(new Uint8ClampedArray(result.buffer), result.width, result.height);
+}

src/codecs/imagequant/quantizer.ts

@@ -1,18 +0,0 @@
-import QuantizerWorker from './Quantizer.worker';
-
-export async function quantize(data: ImageData, opts: QuantizeOptions): Promise<ImageData> {
-  const quantizer = await new QuantizerWorker();
-  return quantizer.quantize(data, opts);
-}
-
-export interface QuantizeOptions {
-  zx: number;
-  maxNumColors: number;
-  dither: number;
-}
-
-export const defaultOptions: QuantizeOptions = {
-  zx: 0,
-  maxNumColors: 256,
-  dither: 1.0,
-};