Promisify emscripten modules & fix webp examples (#817)

GoogleChromeLabs · Sep 29, 2020 · 63ac34a · 63ac34a
1 parent 42f9e4a
commit 63ac34a
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 36 deletions.
diff --git a/codecs/avif/dec/avif_dec.d.ts b/codecs/avif/dec/avif_dec.d.ts
@@ -2,5 +2,5 @@ interface AVIFModule extends EmscriptenWasm.Module {
   decode(data: BufferSource): ImageData | null;
 }
 
-export default function(opts: EmscriptenWasm.ModuleOpts): AVIFModule;
+export default function(opts: EmscriptenWasm.ModuleOpts): Promise<AVIFModule>;
 
diff --git a/codecs/avif/enc/avif_enc.d.ts b/codecs/avif/enc/avif_enc.d.ts
@@ -4,4 +4,4 @@ interface AVIFModule extends EmscriptenWasm.Module {
   encode(data: BufferSource, width: number, height: number, options: EncodeOptions): Uint8Array | null;
 }
 
-export default function(opts: EmscriptenWasm.ModuleOpts): AVIFModule;
+export default function(opts: EmscriptenWasm.ModuleOpts): Promise<AVIFModule>;
diff --git a/codecs/imagequant/imagequant.d.ts b/codecs/imagequant/imagequant.d.ts
@@ -3,4 +3,4 @@ interface QuantizerModule extends EmscriptenWasm.Module {
   zx_quantize(data: BufferSource, width: number, height: number, dither: number): Uint8ClampedArray;
 }
 
-export default function(opts: EmscriptenWasm.ModuleOpts): QuantizerModule;
+export default function(opts: EmscriptenWasm.ModuleOpts): Promise<QuantizerModule>;
diff --git a/codecs/mozjpeg_enc/mozjpeg_enc.d.ts b/codecs/mozjpeg_enc/mozjpeg_enc.d.ts
@@ -4,4 +4,4 @@ interface MozJPEGModule extends EmscriptenWasm.Module {
   encode(data: BufferSource, width: number, height: number, options: EncodeOptions): Uint8Array;
 }
 
-export default function(opts: EmscriptenWasm.ModuleOpts): MozJPEGModule;
+export default function(opts: EmscriptenWasm.ModuleOpts): Promise<MozJPEGModule>;
diff --git a/codecs/webp/dec/example.html b/codecs/webp/dec/example.html
@@ -1,22 +1,20 @@
 <!doctype html>
 <script src='webp_dec.js'></script>
 <script>
-  const Module = webp_dec();
-
   async function loadFile(src) {
     const resp = await fetch(src);
     return await resp.arrayBuffer();
   }
 
-  Module.onRuntimeInitialized = async _ => {
-    console.log('Version:', Module.version().toString(16));
+  webp_dec().then(async module => {
+    console.log('Version:', module.version().toString(16));
     const image = await loadFile('../../example.webp');
-    const imageData = Module.decode(image);
+    const imageData = module.decode(image);
     const canvas = document.createElement('canvas');
-    canvas.width = result.width;
-    canvas.height = result.height;
+    canvas.width = imageData.width;
+    canvas.height = imageData.height;
     document.body.appendChild(canvas);
     const ctx = canvas.getContext('2d');
     ctx.putImageData(imageData, 0, 0);
-  };
+  });
 </script>
diff --git a/codecs/webp/dec/webp_dec.d.ts b/codecs/webp/dec/webp_dec.d.ts
@@ -2,4 +2,4 @@ interface WebPModule extends EmscriptenWasm.Module {
   decode(data: BufferSource): ImageData | null;
 }
 
-export default function(opts: EmscriptenWasm.ModuleOpts): WebPModule;
+export default function(opts: EmscriptenWasm.ModuleOpts): Promise<WebPModule>;
diff --git a/codecs/webp/enc/example.html b/codecs/webp/enc/example.html
@@ -1,8 +1,6 @@
 <!doctype html>
 <script src='webp_enc.js'></script>
 <script>
-  const module = webp_enc();
-
   async function loadImage(src) {
     // Load image
     const img = document.createElement('img');
@@ -17,7 +15,7 @@
     return ctx.getImageData(0, 0, img.width, img.height);
   }
 
-  module.onRuntimeInitialized = async _ => {
+  webp_enc().then(async module => {
     console.log('Version:', module.version().toString(16));
     const image = await loadImage('../../example.png');
     const result = module.encode(image.data, image.width, image.height, {
@@ -56,5 +54,5 @@
     const img = document.createElement('img');
     img.src = blobURL;
     document.body.appendChild(img);
-  };
+  });
 </script>
diff --git a/codecs/webp/enc/webp_enc.d.ts b/codecs/webp/enc/webp_enc.d.ts
@@ -4,4 +4,4 @@ interface WebPModule extends EmscriptenWasm.Module {
   encode(data: BufferSource, width: number, height: number, options: EncodeOptions): Uint8Array | null;
 }
 
-export default function(opts: EmscriptenWasm.ModuleOpts): WebPModule;
+export default function(opts: EmscriptenWasm.ModuleOpts): Promise<WebPModule>;
diff --git a/src/codecs/util.ts b/src/codecs/util.ts
@@ -1,28 +1,19 @@
 type ModuleFactory<M extends EmscriptenWasm.Module> = (
   opts: EmscriptenWasm.ModuleOpts,
-) => M;
+) => Promise<M>;
 
 export function initEmscriptenModule<T extends EmscriptenWasm.Module>(
   moduleFactory: ModuleFactory<T>,
   wasmUrl: string,
 ): Promise<T> {
-  return new Promise((resolve) => {
-    const module = moduleFactory({
-      // Just to be safe, don't automatically invoke any wasm functions
-      noInitialRun: true,
-      locateFile(url: string): string {
-        // Redirect the request for the wasm binary to whatever webpack gave us.
-        if (url.endsWith('.wasm')) return wasmUrl;
-        return url;
-      },
-      onRuntimeInitialized() {
-        // An Emscripten is a then-able that resolves with itself, causing an infite loop when you
-        // wrap it in a real promise. Delete the `then` prop solves this for now.
-        // https://github.com/kripken/emscripten/issues/5820
-        delete (module as any).then;
-        resolve(module);
-      },
-    });
+  return moduleFactory({
+    // Just to be safe, don't automatically invoke any wasm functions
+    noInitialRun: true,
+    locateFile(url: string): string {
+      // Redirect the request for the wasm binary to whatever webpack gave us.
+      if (url.endsWith('.wasm')) return wasmUrl;
+      return url;
+    },
   });
 }