Trick to avoid duplicating the SVG in the source

Improve `encode` API and its types

cli/src/index.js

@@ -4,6 +4,7 @@ import { program } from 'commander/esm.mjs';
 import JSON5 from 'json5';
 import path from 'path';
 import { promises as fsp } from 'fs';
+import { cpus } from 'os';
 import ora from 'ora';
 import kleur from 'kleur';
 
@@ -75,7 +76,9 @@ async function getInputFiles(paths) {
 
   for (const inputPath of paths) {
     const files = (await fsp.lstat(inputPath)).isDirectory()
-      ? (await fsp.readdir(inputPath, {withFileTypes: true})).filter(dirent => dirent.isFile()).map(dirent => path.join(inputPath, dirent.name))
+      ? (await fsp.readdir(inputPath, { withFileTypes: true }))
+          .filter((dirent) => dirent.isFile())
+          .map((dirent) => path.join(inputPath, dirent.name))
       : [inputPath];
     for (const file of files) {
       try {
@@ -101,7 +104,7 @@ async function getInputFiles(paths) {
 async function processFiles(files) {
   files = await getInputFiles(files);
 
-  const imagePool = new ImagePool();
+  const imagePool = new ImagePool(cpus().length);
 
   const results = new Map();
   const progress = progressTracker(results);
@@ -116,7 +119,8 @@ async function processFiles(files) {
   let decoded = 0;
   let decodedFiles = await Promise.all(
     files.map(async (file) => {
-      const image = imagePool.ingestImage(file);
+      const buffer = await fsp.readFile(file);
+      const image = imagePool.ingestImage(buffer);
       await image.decoded;
       results.set(image, {
         file,
@@ -178,7 +182,7 @@ async function processFiles(files) {
       const outputPath = path.join(
         program.opts().outputDir,
         path.basename(originalFile, path.extname(originalFile)) +
-        program.opts().suffix
+          program.opts().suffix,
       );
       for (const output of Object.values(image.encodedWith)) {
         const outputFile = `${outputPath}.${(await output).extension}`;

codecs/avif/enc/avif_enc_mt.worker.js

@@ -1 +1 @@
-"use strict";var Module={};var initializedJS=false;function threadPrintErr(){var text=Array.prototype.slice.call(arguments).join(" ");console.error(text)}function threadAlert(){var text=Array.prototype.slice.call(arguments).join(" ");postMessage({cmd:"alert",text:text,threadId:Module["_pthread_self"]()})}var err=threadPrintErr;self.alert=threadAlert;function moduleLoaded(){}self.onmessage=function(e){try{if(e.data.cmd==="load"){var imports={};imports["wasm"]=e.data.wasmModule;imports["wasmMemory"]=e.data.wasmMemory;imports["buffer"]=imports["wasmMemory"].buffer;imports["ENVIRONMENT_IS_PTHREAD"]=true;(e.data.urlOrBlob?import(e.data.urlOrBlob):import("./avif_enc_mt.js")).then(function(exports){return exports.default(Module)}).then(function(instance){Module=instance;moduleLoaded()})}else if(e.data.cmd==="objectTransfer"){Module["PThread"].receiveObjectTransfer(e.data)}else if(e.data.cmd==="run"){Module["__performance_now_clock_drift"]=performance.now()-e.data.time;Module["__emscripten_thread_init"](e.data.threadInfoStruct,0,0);var max=e.data.stackBase;var top=e.data.stackBase+e.data.stackSize;Module["establishStackSpace"](top,max);Module["PThread"].receiveObjectTransfer(e.data);Module["PThread"].threadInit();if(!initializedJS){Module["___embind_register_native_and_builtin_types"]();initializedJS=true}try{var result=Module["invokeEntryPoint"](e.data.start_routine,e.data.arg);Module["PThread"].threadExit(result)}catch(ex){if(ex==="Canceled!"){Module["PThread"].threadCancel()}else if(ex!="unwind"){{Module["PThread"].threadExit(-2);throw ex}}}}else if(e.data.cmd==="cancel"){if(Module["_pthread_self"]()){Module["PThread"].threadCancel()}}else if(e.data.target==="setimmediate"){}else if(e.data.cmd==="processThreadQueue"){if(Module["_pthread_self"]()){Module["_emscripten_current_thread_process_queued_calls"]()}}else{err("worker.js received unknown command "+e.data.cmd);err(e.data)}}catch(ex){err("worker.js onmessage() captured an uncaught exception: "+ex);if(ex&&ex.stack)err(ex.stack);throw ex}};
+"use strict";var Module={};var initializedJS=false;function threadPrintErr(){var text=Array.prototype.slice.call(arguments).join(" ");console.error(text)}function threadAlert(){var text=Array.prototype.slice.call(arguments).join(" ");postMessage({cmd:"alert",text:text,threadId:Module["_pthread_self"]()})}var err=threadPrintErr;self.alert=threadAlert;Module["instantiateWasm"]=function(info,receiveInstance){var instance=new WebAssembly.Instance(Module["wasmModule"],info);receiveInstance(instance);Module["wasmModule"]=null;return instance.exports};function moduleLoaded(){}self.onmessage=function(e){try{if(e.data.cmd==="load"){Module["wasmModule"]=e.data.wasmModule;Module["wasmMemory"]=e.data.wasmMemory;Module["buffer"]=Module["wasmMemory"].buffer;Module["ENVIRONMENT_IS_PTHREAD"]=true;(e.data.urlOrBlob?import(e.data.urlOrBlob):import("./avif_enc_mt.js")).then(function(exports){return exports.default(Module)}).then(function(instance){Module=instance;moduleLoaded()})}else if(e.data.cmd==="objectTransfer"){Module["PThread"].receiveObjectTransfer(e.data)}else if(e.data.cmd==="run"){Module["__performance_now_clock_drift"]=performance.now()-e.data.time;Module["__emscripten_thread_init"](e.data.threadInfoStruct,0,0);var max=e.data.stackBase;var top=e.data.stackBase+e.data.stackSize;Module["establishStackSpace"](top,max);Module["PThread"].receiveObjectTransfer(e.data);Module["PThread"].threadInit();if(!initializedJS){Module["___embind_register_native_and_builtin_types"]();initializedJS=true}try{var result=Module["invokeEntryPoint"](e.data.start_routine,e.data.arg);if(Module["keepRuntimeAlive"]()){Module["PThread"].setExitStatus(result)}else{Module["PThread"].threadExit(result)}}catch(ex){if(ex==="Canceled!"){Module["PThread"].threadCancel()}else if(ex!="unwind"){if(ex instanceof Module["ExitStatus"]){if(Module["keepRuntimeAlive"]()){}else{Module["PThread"].threadExit(ex.status)}}else{Module["PThread"].threadExit(-2);throw ex}}}}else if(e.data.cmd==="cancel"){if(Module["_pthread_self"]()){Module["PThread"].threadCancel()}}else if(e.data.target==="setimmediate"){}else if(e.data.cmd==="processThreadQueue"){if(Module["_pthread_self"]()){Module["_emscripten_current_thread_process_queued_calls"]()}}else{err("worker.js received unknown command "+e.data.cmd);err(e.data)}}catch(ex){err("worker.js onmessage() captured an uncaught exception: "+ex);if(ex&&ex.stack)err(ex.stack);throw ex}};

codecs/cpp.Dockerfile

@@ -8,7 +8,6 @@ ENV LDFLAGS "${CFLAGS} \
 -s ALLOW_MEMORY_GROWTH=1 \
 -s TEXTDECODER=2 \
 -s NODEJS_CATCH_EXIT=0 -s NODEJS_CATCH_REJECTION=0 \
--s MINIMAL_RUNTIME=1 \
 "
 # Build and cache standard libraries with these flags + Embind.
 RUN emcc ${CXXFLAGS} ${LDFLAGS} --bind -xc++ /dev/null -o /dev/null

codecs/jxl/Makefile

@@ -1,5 +1,5 @@
 CODEC_URL = https://github.com/libjxl/libjxl.git
-CODEC_VERSION = 3f76321a7cbcf4f452894dc173eb7be60f508ecb
+CODEC_VERSION = v0.5
 CODEC_DIR = node_modules/jxl
 CODEC_BUILD_ROOT := $(CODEC_DIR)/build
 CODEC_MT_BUILD_DIR := $(CODEC_BUILD_ROOT)/mt

codecs/jxl/enc/jxl_enc.cpp

@@ -10,15 +10,13 @@ using namespace emscripten;
 thread_local const val Uint8Array = val::global("Uint8Array");
 
 struct JXLOptions {
-  // 1 = slowest
-  // 7 = fastest
-  int speed;
+  int effort;
   float quality;
   bool progressive;
   int epf;
-  int nearLossless;
   bool lossyPalette;
   size_t decodingSpeedTier;
+  float photonNoiseIso;
 };
 
 val encode(std::string image, int width, int height, JXLOptions options) {
@@ -33,11 +31,14 @@ val encode(std::string image, int width, int height, JXLOptions options) {
   pool_ptr = &pool;
 #endif
 
-  cparams.epf = options.epf;
-  cparams.speed_tier = static_cast<jxl::SpeedTier>(options.speed);
-  cparams.decoding_speed_tier = options.decodingSpeedTier;
+  size_t st = 10 - options.effort;
+  cparams.speed_tier = jxl::SpeedTier(st);
 
-  if (options.lossyPalette || options.nearLossless) {
+  cparams.epf = options.epf;
+  cparams.decoding_speed_tier = options.decodingSpeedTier;
+  cparams.photon_noise_iso = options.photonNoiseIso;
+
+  if (options.lossyPalette) {
     cparams.lossy_palette = true;
     cparams.palette_colors = 0;
     cparams.options.predictor = jxl::Predictor::Zero;
@@ -106,12 +107,12 @@ val encode(std::string image, int width, int height, JXLOptions options) {
 
 EMSCRIPTEN_BINDINGS(my_module) {
   value_object<JXLOptions>("JXLOptions")
-      .field("speed", &JXLOptions::speed)
+      .field("effort", &JXLOptions::effort)
       .field("quality", &JXLOptions::quality)
       .field("progressive", &JXLOptions::progressive)
-      .field("nearLossless", &JXLOptions::nearLossless)
       .field("lossyPalette", &JXLOptions::lossyPalette)
       .field("decodingSpeedTier", &JXLOptions::decodingSpeedTier)
+      .field("photonNoiseIso", &JXLOptions::photonNoiseIso)
       .field("epf", &JXLOptions::epf);
 
   function("encode", &encode);

codecs/jxl/enc/jxl_enc.d.ts

@@ -1,11 +1,11 @@
 export interface EncodeOptions {
-  speed: number;
+  effort: number;
   quality: number;
   progressive: boolean;
   epf: number;
-  nearLossless: number;
   lossyPalette: boolean;
   decodingSpeedTier: number;
+  photonNoiseIso: number;
 }
 
 export interface JXLModule extends EmscriptenWasm.Module {

codecs/jxl/enc/jxl_enc_mt.worker.js

@@ -1 +1 @@
-"use strict";var Module={};var initializedJS=false;function threadPrintErr(){var text=Array.prototype.slice.call(arguments).join(" ");console.error(text)}function threadAlert(){var text=Array.prototype.slice.call(arguments).join(" ");postMessage({cmd:"alert",text:text,threadId:Module["_pthread_self"]()})}var err=threadPrintErr;self.alert=threadAlert;function moduleLoaded(){}self.onmessage=function(e){try{if(e.data.cmd==="load"){var imports={};imports["wasm"]=e.data.wasmModule;imports["wasmMemory"]=e.data.wasmMemory;imports["buffer"]=imports["wasmMemory"].buffer;imports["ENVIRONMENT_IS_PTHREAD"]=true;(e.data.urlOrBlob?import(e.data.urlOrBlob):import("./jxl_enc_mt.js")).then(function(exports){return exports.default(Module)}).then(function(instance){Module=instance;moduleLoaded()})}else if(e.data.cmd==="objectTransfer"){Module["PThread"].receiveObjectTransfer(e.data)}else if(e.data.cmd==="run"){Module["__performance_now_clock_drift"]=performance.now()-e.data.time;Module["__emscripten_thread_init"](e.data.threadInfoStruct,0,0);var max=e.data.stackBase;var top=e.data.stackBase+e.data.stackSize;Module["establishStackSpace"](top,max);Module["PThread"].receiveObjectTransfer(e.data);Module["PThread"].threadInit();if(!initializedJS){Module["___embind_register_native_and_builtin_types"]();initializedJS=true}try{var result=Module["invokeEntryPoint"](e.data.start_routine,e.data.arg);Module["PThread"].threadExit(result)}catch(ex){if(ex==="Canceled!"){Module["PThread"].threadCancel()}else if(ex!="unwind"){{Module["PThread"].threadExit(-2);throw ex}}}}else if(e.data.cmd==="cancel"){if(Module["_pthread_self"]()){Module["PThread"].threadCancel()}}else if(e.data.target==="setimmediate"){}else if(e.data.cmd==="processThreadQueue"){if(Module["_pthread_self"]()){Module["_emscripten_current_thread_process_queued_calls"]()}}else{err("worker.js received unknown command "+e.data.cmd);err(e.data)}}catch(ex){err("worker.js onmessage() captured an uncaught exception: "+ex);if(ex&&ex.stack)err(ex.stack);throw ex}};
+"use strict";var Module={};var initializedJS=false;function threadPrintErr(){var text=Array.prototype.slice.call(arguments).join(" ");console.error(text)}function threadAlert(){var text=Array.prototype.slice.call(arguments).join(" ");postMessage({cmd:"alert",text:text,threadId:Module["_pthread_self"]()})}var err=threadPrintErr;self.alert=threadAlert;Module["instantiateWasm"]=function(info,receiveInstance){var instance=new WebAssembly.Instance(Module["wasmModule"],info);receiveInstance(instance);Module["wasmModule"]=null;return instance.exports};function moduleLoaded(){}self.onmessage=function(e){try{if(e.data.cmd==="load"){Module["wasmModule"]=e.data.wasmModule;Module["wasmMemory"]=e.data.wasmMemory;Module["buffer"]=Module["wasmMemory"].buffer;Module["ENVIRONMENT_IS_PTHREAD"]=true;(e.data.urlOrBlob?import(e.data.urlOrBlob):import("./jxl_enc_mt.js")).then(function(exports){return exports.default(Module)}).then(function(instance){Module=instance;moduleLoaded()})}else if(e.data.cmd==="objectTransfer"){Module["PThread"].receiveObjectTransfer(e.data)}else if(e.data.cmd==="run"){Module["__performance_now_clock_drift"]=performance.now()-e.data.time;Module["__emscripten_thread_init"](e.data.threadInfoStruct,0,0);var max=e.data.stackBase;var top=e.data.stackBase+e.data.stackSize;Module["establishStackSpace"](top,max);Module["PThread"].receiveObjectTransfer(e.data);Module["PThread"].threadInit();if(!initializedJS){Module["___embind_register_native_and_builtin_types"]();initializedJS=true}try{var result=Module["invokeEntryPoint"](e.data.start_routine,e.data.arg);if(Module["keepRuntimeAlive"]()){Module["PThread"].setExitStatus(result)}else{Module["PThread"].threadExit(result)}}catch(ex){if(ex==="Canceled!"){Module["PThread"].threadCancel()}else if(ex!="unwind"){if(ex instanceof Module["ExitStatus"]){if(Module["keepRuntimeAlive"]()){}else{Module["PThread"].threadExit(ex.status)}}else{Module["PThread"].threadExit(-2);throw ex}}}}else if(e.data.cmd==="cancel"){if(Module["_pthread_self"]()){Module["PThread"].threadCancel()}}else if(e.data.target==="setimmediate"){}else if(e.data.cmd==="processThreadQueue"){if(Module["_pthread_self"]()){Module["_emscripten_current_thread_process_queued_calls"]()}}else{err("worker.js received unknown command "+e.data.cmd);err(e.data)}}catch(ex){err("worker.js onmessage() captured an uncaught exception: "+ex);if(ex&&ex.stack)err(ex.stack);throw ex}};

codecs/jxl/enc/jxl_enc_mt_simd.worker.js

@@ -1 +1 @@
-"use strict";var Module={};var initializedJS=false;function threadPrintErr(){var text=Array.prototype.slice.call(arguments).join(" ");console.error(text)}function threadAlert(){var text=Array.prototype.slice.call(arguments).join(" ");postMessage({cmd:"alert",text:text,threadId:Module["_pthread_self"]()})}var err=threadPrintErr;self.alert=threadAlert;function moduleLoaded(){}self.onmessage=function(e){try{if(e.data.cmd==="load"){var imports={};imports["wasm"]=e.data.wasmModule;imports["wasmMemory"]=e.data.wasmMemory;imports["buffer"]=imports["wasmMemory"].buffer;imports["ENVIRONMENT_IS_PTHREAD"]=true;(e.data.urlOrBlob?import(e.data.urlOrBlob):import("./jxl_enc_mt_simd.js")).then(function(exports){return exports.default(Module)}).then(function(instance){Module=instance;moduleLoaded()})}else if(e.data.cmd==="objectTransfer"){Module["PThread"].receiveObjectTransfer(e.data)}else if(e.data.cmd==="run"){Module["__performance_now_clock_drift"]=performance.now()-e.data.time;Module["__emscripten_thread_init"](e.data.threadInfoStruct,0,0);var max=e.data.stackBase;var top=e.data.stackBase+e.data.stackSize;Module["establishStackSpace"](top,max);Module["PThread"].receiveObjectTransfer(e.data);Module["PThread"].threadInit();if(!initializedJS){Module["___embind_register_native_and_builtin_types"]();initializedJS=true}try{var result=Module["invokeEntryPoint"](e.data.start_routine,e.data.arg);Module["PThread"].threadExit(result)}catch(ex){if(ex==="Canceled!"){Module["PThread"].threadCancel()}else if(ex!="unwind"){{Module["PThread"].threadExit(-2);throw ex}}}}else if(e.data.cmd==="cancel"){if(Module["_pthread_self"]()){Module["PThread"].threadCancel()}}else if(e.data.target==="setimmediate"){}else if(e.data.cmd==="processThreadQueue"){if(Module["_pthread_self"]()){Module["_emscripten_current_thread_process_queued_calls"]()}}else{err("worker.js received unknown command "+e.data.cmd);err(e.data)}}catch(ex){err("worker.js onmessage() captured an uncaught exception: "+ex);if(ex&&ex.stack)err(ex.stack);throw ex}};
+"use strict";var Module={};var initializedJS=false;function threadPrintErr(){var text=Array.prototype.slice.call(arguments).join(" ");console.error(text)}function threadAlert(){var text=Array.prototype.slice.call(arguments).join(" ");postMessage({cmd:"alert",text:text,threadId:Module["_pthread_self"]()})}var err=threadPrintErr;self.alert=threadAlert;Module["instantiateWasm"]=function(info,receiveInstance){var instance=new WebAssembly.Instance(Module["wasmModule"],info);receiveInstance(instance);Module["wasmModule"]=null;return instance.exports};function moduleLoaded(){}self.onmessage=function(e){try{if(e.data.cmd==="load"){Module["wasmModule"]=e.data.wasmModule;Module["wasmMemory"]=e.data.wasmMemory;Module["buffer"]=Module["wasmMemory"].buffer;Module["ENVIRONMENT_IS_PTHREAD"]=true;(e.data.urlOrBlob?import(e.data.urlOrBlob):import("./jxl_enc_mt_simd.js")).then(function(exports){return exports.default(Module)}).then(function(instance){Module=instance;moduleLoaded()})}else if(e.data.cmd==="objectTransfer"){Module["PThread"].receiveObjectTransfer(e.data)}else if(e.data.cmd==="run"){Module["__performance_now_clock_drift"]=performance.now()-e.data.time;Module["__emscripten_thread_init"](e.data.threadInfoStruct,0,0);var max=e.data.stackBase;var top=e.data.stackBase+e.data.stackSize;Module["establishStackSpace"](top,max);Module["PThread"].receiveObjectTransfer(e.data);Module["PThread"].threadInit();if(!initializedJS){Module["___embind_register_native_and_builtin_types"]();initializedJS=true}try{var result=Module["invokeEntryPoint"](e.data.start_routine,e.data.arg);if(Module["keepRuntimeAlive"]()){Module["PThread"].setExitStatus(result)}else{Module["PThread"].threadExit(result)}}catch(ex){if(ex==="Canceled!"){Module["PThread"].threadCancel()}else if(ex!="unwind"){if(ex instanceof Module["ExitStatus"]){if(Module["keepRuntimeAlive"]()){}else{Module["PThread"].threadExit(ex.status)}}else{Module["PThread"].threadExit(-2);throw ex}}}}else if(e.data.cmd==="cancel"){if(Module["_pthread_self"]()){Module["PThread"].threadCancel()}}else if(e.data.target==="setimmediate"){}else if(e.data.cmd==="processThreadQueue"){if(Module["_pthread_self"]()){Module["_emscripten_current_thread_process_queued_calls"]()}}else{err("worker.js received unknown command "+e.data.cmd);err(e.data)}}catch(ex){err("worker.js onmessage() captured an uncaught exception: "+ex);if(ex&&ex.stack)err(ex.stack);throw ex}};

codecs/mozjpeg/enc/mozjpeg_enc.cpp

@@ -158,6 +158,11 @@ val encode(std::string image_in, int image_width, int image_height, MozJpegOptio
   if (!opts.auto_subsample && opts.color_space == JCS_YCbCr) {
     cinfo.comp_info[0].h_samp_factor = opts.chroma_subsample;
     cinfo.comp_info[0].v_samp_factor = opts.chroma_subsample;
+
+    if (opts.chroma_subsample > 2) {
+      // Otherwise encoding fails.
+      jpeg_c_set_int_param(&cinfo, JINT_DC_SCAN_OPT_MODE, 1);
+    }
   }
 
   if (!opts.baseline && opts.progressive) {

codecs/wp2/enc/wp2_enc_mt.worker.js

@@ -1 +1 @@
-"use strict";var Module={};var initializedJS=false;function threadPrintErr(){var text=Array.prototype.slice.call(arguments).join(" ");console.error(text)}function threadAlert(){var text=Array.prototype.slice.call(arguments).join(" ");postMessage({cmd:"alert",text:text,threadId:Module["_pthread_self"]()})}var err=threadPrintErr;self.alert=threadAlert;function moduleLoaded(){}self.onmessage=function(e){try{if(e.data.cmd==="load"){var imports={};imports["wasm"]=e.data.wasmModule;imports["wasmMemory"]=e.data.wasmMemory;imports["buffer"]=imports["wasmMemory"].buffer;imports["ENVIRONMENT_IS_PTHREAD"]=true;(e.data.urlOrBlob?import(e.data.urlOrBlob):import("./wp2_enc_mt.js")).then(function(exports){return exports.default(Module)}).then(function(instance){Module=instance;moduleLoaded()})}else if(e.data.cmd==="objectTransfer"){Module["PThread"].receiveObjectTransfer(e.data)}else if(e.data.cmd==="run"){Module["__performance_now_clock_drift"]=performance.now()-e.data.time;Module["__emscripten_thread_init"](e.data.threadInfoStruct,0,0);var max=e.data.stackBase;var top=e.data.stackBase+e.data.stackSize;Module["establishStackSpace"](top,max);Module["PThread"].receiveObjectTransfer(e.data);Module["PThread"].threadInit();if(!initializedJS){Module["___embind_register_native_and_builtin_types"]();initializedJS=true}try{var result=Module["invokeEntryPoint"](e.data.start_routine,e.data.arg);Module["PThread"].threadExit(result)}catch(ex){if(ex==="Canceled!"){Module["PThread"].threadCancel()}else if(ex!="unwind"){{Module["PThread"].threadExit(-2);throw ex}}}}else if(e.data.cmd==="cancel"){if(Module["_pthread_self"]()){Module["PThread"].threadCancel()}}else if(e.data.target==="setimmediate"){}else if(e.data.cmd==="processThreadQueue"){if(Module["_pthread_self"]()){Module["_emscripten_current_thread_process_queued_calls"]()}}else{err("worker.js received unknown command "+e.data.cmd);err(e.data)}}catch(ex){err("worker.js onmessage() captured an uncaught exception: "+ex);if(ex&&ex.stack)err(ex.stack);throw ex}};
+"use strict";var Module={};var initializedJS=false;function threadPrintErr(){var text=Array.prototype.slice.call(arguments).join(" ");console.error(text)}function threadAlert(){var text=Array.prototype.slice.call(arguments).join(" ");postMessage({cmd:"alert",text:text,threadId:Module["_pthread_self"]()})}var err=threadPrintErr;self.alert=threadAlert;Module["instantiateWasm"]=function(info,receiveInstance){var instance=new WebAssembly.Instance(Module["wasmModule"],info);receiveInstance(instance);Module["wasmModule"]=null;return instance.exports};function moduleLoaded(){}self.onmessage=function(e){try{if(e.data.cmd==="load"){Module["wasmModule"]=e.data.wasmModule;Module["wasmMemory"]=e.data.wasmMemory;Module["buffer"]=Module["wasmMemory"].buffer;Module["ENVIRONMENT_IS_PTHREAD"]=true;(e.data.urlOrBlob?import(e.data.urlOrBlob):import("./wp2_enc_mt.js")).then(function(exports){return exports.default(Module)}).then(function(instance){Module=instance;moduleLoaded()})}else if(e.data.cmd==="objectTransfer"){Module["PThread"].receiveObjectTransfer(e.data)}else if(e.data.cmd==="run"){Module["__performance_now_clock_drift"]=performance.now()-e.data.time;Module["__emscripten_thread_init"](e.data.threadInfoStruct,0,0);var max=e.data.stackBase;var top=e.data.stackBase+e.data.stackSize;Module["establishStackSpace"](top,max);Module["PThread"].receiveObjectTransfer(e.data);Module["PThread"].threadInit();if(!initializedJS){Module["___embind_register_native_and_builtin_types"]();initializedJS=true}try{var result=Module["invokeEntryPoint"](e.data.start_routine,e.data.arg);if(Module["keepRuntimeAlive"]()){Module["PThread"].setExitStatus(result)}else{Module["PThread"].threadExit(result)}}catch(ex){if(ex==="Canceled!"){Module["PThread"].threadCancel()}else if(ex!="unwind"){if(ex instanceof Module["ExitStatus"]){if(Module["keepRuntimeAlive"]()){}else{Module["PThread"].threadExit(ex.status)}}else{Module["PThread"].threadExit(-2);throw ex}}}}else if(e.data.cmd==="cancel"){if(Module["_pthread_self"]()){Module["PThread"].threadCancel()}}else if(e.data.target==="setimmediate"){}else if(e.data.cmd==="processThreadQueue"){if(Module["_pthread_self"]()){Module["_emscripten_current_thread_process_queued_calls"]()}}else{err("worker.js received unknown command "+e.data.cmd);err(e.data)}}catch(ex){err("worker.js onmessage() captured an uncaught exception: "+ex);if(ex&&ex.stack)err(ex.stack);throw ex}};

codecs/wp2/enc/wp2_enc_mt_simd.worker.js

@@ -1 +1 @@
-"use strict";var Module={};var initializedJS=false;function threadPrintErr(){var text=Array.prototype.slice.call(arguments).join(" ");console.error(text)}function threadAlert(){var text=Array.prototype.slice.call(arguments).join(" ");postMessage({cmd:"alert",text:text,threadId:Module["_pthread_self"]()})}var err=threadPrintErr;self.alert=threadAlert;function moduleLoaded(){}self.onmessage=function(e){try{if(e.data.cmd==="load"){var imports={};imports["wasm"]=e.data.wasmModule;imports["wasmMemory"]=e.data.wasmMemory;imports["buffer"]=imports["wasmMemory"].buffer;imports["ENVIRONMENT_IS_PTHREAD"]=true;(e.data.urlOrBlob?import(e.data.urlOrBlob):import("./wp2_enc_mt_simd.js")).then(function(exports){return exports.default(Module)}).then(function(instance){Module=instance;moduleLoaded()})}else if(e.data.cmd==="objectTransfer"){Module["PThread"].receiveObjectTransfer(e.data)}else if(e.data.cmd==="run"){Module["__performance_now_clock_drift"]=performance.now()-e.data.time;Module["__emscripten_thread_init"](e.data.threadInfoStruct,0,0);var max=e.data.stackBase;var top=e.data.stackBase+e.data.stackSize;Module["establishStackSpace"](top,max);Module["PThread"].receiveObjectTransfer(e.data);Module["PThread"].threadInit();if(!initializedJS){Module["___embind_register_native_and_builtin_types"]();initializedJS=true}try{var result=Module["invokeEntryPoint"](e.data.start_routine,e.data.arg);Module["PThread"].threadExit(result)}catch(ex){if(ex==="Canceled!"){Module["PThread"].threadCancel()}else if(ex!="unwind"){{Module["PThread"].threadExit(-2);throw ex}}}}else if(e.data.cmd==="cancel"){if(Module["_pthread_self"]()){Module["PThread"].threadCancel()}}else if(e.data.target==="setimmediate"){}else if(e.data.cmd==="processThreadQueue"){if(Module["_pthread_self"]()){Module["_emscripten_current_thread_process_queued_calls"]()}}else{err("worker.js received unknown command "+e.data.cmd);err(e.data)}}catch(ex){err("worker.js onmessage() captured an uncaught exception: "+ex);if(ex&&ex.stack)err(ex.stack);throw ex}};
+"use strict";var Module={};var initializedJS=false;function threadPrintErr(){var text=Array.prototype.slice.call(arguments).join(" ");console.error(text)}function threadAlert(){var text=Array.prototype.slice.call(arguments).join(" ");postMessage({cmd:"alert",text:text,threadId:Module["_pthread_self"]()})}var err=threadPrintErr;self.alert=threadAlert;Module["instantiateWasm"]=function(info,receiveInstance){var instance=new WebAssembly.Instance(Module["wasmModule"],info);receiveInstance(instance);Module["wasmModule"]=null;return instance.exports};function moduleLoaded(){}self.onmessage=function(e){try{if(e.data.cmd==="load"){Module["wasmModule"]=e.data.wasmModule;Module["wasmMemory"]=e.data.wasmMemory;Module["buffer"]=Module["wasmMemory"].buffer;Module["ENVIRONMENT_IS_PTHREAD"]=true;(e.data.urlOrBlob?import(e.data.urlOrBlob):import("./wp2_enc_mt_simd.js")).then(function(exports){return exports.default(Module)}).then(function(instance){Module=instance;moduleLoaded()})}else if(e.data.cmd==="objectTransfer"){Module["PThread"].receiveObjectTransfer(e.data)}else if(e.data.cmd==="run"){Module["__performance_now_clock_drift"]=performance.now()-e.data.time;Module["__emscripten_thread_init"](e.data.threadInfoStruct,0,0);var max=e.data.stackBase;var top=e.data.stackBase+e.data.stackSize;Module["establishStackSpace"](top,max);Module["PThread"].receiveObjectTransfer(e.data);Module["PThread"].threadInit();if(!initializedJS){Module["___embind_register_native_and_builtin_types"]();initializedJS=true}try{var result=Module["invokeEntryPoint"](e.data.start_routine,e.data.arg);if(Module["keepRuntimeAlive"]()){Module["PThread"].setExitStatus(result)}else{Module["PThread"].threadExit(result)}}catch(ex){if(ex==="Canceled!"){Module["PThread"].threadCancel()}else if(ex!="unwind"){if(ex instanceof Module["ExitStatus"]){if(Module["keepRuntimeAlive"]()){}else{Module["PThread"].threadExit(ex.status)}}else{Module["PThread"].threadExit(-2);throw ex}}}}else if(e.data.cmd==="cancel"){if(Module["_pthread_self"]()){Module["PThread"].threadCancel()}}else if(e.data.target==="setimmediate"){}else if(e.data.cmd==="processThreadQueue"){if(Module["_pthread_self"]()){Module["_emscripten_current_thread_process_queued_calls"]()}}else{err("worker.js received unknown command "+e.data.cmd);err(e.data)}}catch(ex){err("worker.js onmessage() captured an uncaught exception: "+ex);if(ex&&ex.stack)err(ex.stack);throw ex}};

lib/as-text-plugin.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { promises as fs } from 'fs';
+
+const prefix = 'as-text:';
+
+export default function dataURLPlugin() {
+  return {
+    name: 'as-text-plugin',
+    async resolveId(id, importer) {
+      if (!id.startsWith(prefix)) return;
+      const realId = id.slice(prefix.length);
+      const resolveResult = await this.resolve(realId, importer);
+      if (!resolveResult) throw Error(`Cannot find ${realId} from ${importer}`);
+      return prefix + resolveResult.id;
+    },
+    async load(id) {
+      if (!id.startsWith(prefix)) return;
+
+      const realId = id.slice(prefix.length);
+      this.addWatchFile(realId);
+
+      const source = await fs.readFile(realId, { encoding: 'utf-8' });
+
+      return `export default ${JSON.stringify(source)}`;
+    },
+  };
+}

lib/client-bundle-plugin.js

@@ -20,6 +20,7 @@ const allSrcPlaceholder = 'CLIENT_BUNDLE_PLUGIN_ALL_SRC';
 
 export function getDependencies(clientOutput, item) {
   const crawlDependencies = new Set([item.fileName]);
+  const referencedFiles = new Set();
 
   for (const fileName of crawlDependencies) {
     const chunk = clientOutput.find((v) => v.fileName === fileName);
@@ -27,11 +28,24 @@ export function getDependencies(clientOutput, item) {
     for (const dep of chunk.imports) {
       crawlDependencies.add(dep);
     }
+
+    for (const dep of chunk.referencedFiles) {
+      referencedFiles.add(dep);
+    }
   }
 
   // Don't add self as dependency
   crawlDependencies.delete(item.fileName);
 
+  // Merge referencedFiles as regular deps. They need to be in the same Set as
+  // some JS files might appear in both lists and need to be deduped too.
+  //
+  // Didn't do this as part of the main loop since their `chunk` can't have
+  // nested deps and sometimes might be missing altogether, depending on type.
+  for (const dep of referencedFiles) {
+    crawlDependencies.add(dep);
+  }
+
   return [...crawlDependencies];
 }
 
@@ -139,9 +153,9 @@ export default function (inputOptions, outputOptions, resolveFileUrl) {
       if (property.startsWith(allSrcPlaceholder)) {
         const allModules = [
           clientEntry,
-          ...dependencies.map((name) =>
-            clientOutput.find((item) => item.fileName === name),
-          ),
+          ...dependencies
+            .map((name) => clientOutput.find((item) => item.fileName === name))
+            .filter((item) => item.code),
         ];
 
         const inlineDefines = [

lib/data-url-plugin.js

@@ -14,28 +14,40 @@ import { promises as fs } from 'fs';
 
 import { lookup as lookupMime } from 'mime-types';
 
-const prefix = 'data-url:';
+const prefix = /^data-url(-text)?:/;
 
 export default function dataURLPlugin() {
   return {
     name: 'data-url-plugin',
     async resolveId(id, importer) {
-      if (!id.startsWith(prefix)) return;
+      const match = prefix.exec(id);
+      if (!match) return;
       return (
-        prefix + (await this.resolve(id.slice(prefix.length), importer)).id
+        match[0] + (await this.resolve(id.slice(match[0].length), importer)).id
       );
     },
     async load(id) {
-      if (!id.startsWith(prefix)) return;
-      const realId = id.slice(prefix.length);
+      const match = prefix.exec(id);
+      if (!match) return;
+
+      const isText = !!match[1];
+      const realId = id.slice(match[0].length);
       this.addWatchFile(realId);
 
       const source = await fs.readFile(realId);
       const type = lookupMime(realId) || 'text/plain';
 
-      return `export default 'data:${type};base64,${source.toString(
-        'base64',
-      )}';`;
+      if (isText) {
+        const encodedBody = encodeURIComponent(source.toString('utf8'));
+
+        return `export default ${JSON.stringify(
+          `data:${type};charset=utf-8,${encodedBody}`,
+        )};`;
+      }
+
+      return `export default ${JSON.stringify(
+        `data:${type};base64,${source.toString('base64')}`,
+      )};`;
     },
   };
 }

lib/entry-data-plugin.js

@@ -17,10 +17,14 @@ const prefix = 'entry-data:';
 const mainNamePlaceholder = 'ENTRY_DATA_PLUGIN_MAIN_NAME';
 const dependenciesPlaceholder = 'ENTRY_DATA_PLUGIN_DEPS';
 const placeholderRe = /(ENTRY_DATA_PLUGIN_(?:MAIN_NAME|DEPS))(\d+)/g;
-const filenamePrefix = 'static/';
+
+/** @param {string} fileName */
+export function fileNameToURL(fileName) {
+  return fileName.replace(/^static\//, '/');
+}
 
 export default function entryDataPlugin() {
-  /** @type {string} */
+  /** @type {number} */
   let exportCounter;
   /** @type {Map<number, string>} */
   let counterToIdMap;
@@ -69,15 +73,11 @@ export default function entryDataPlugin() {
             if (!chunk) throw Error(`Cannot find ${id}`);
 
             if (placeholder === mainNamePlaceholder) {
-              return JSON.stringify(
-                chunk.fileName.slice(filenamePrefix.length),
-              );
+              return JSON.stringify(fileNameToURL(chunk.fileName));
             }
 
             return JSON.stringify(
-              getDependencies(chunks, chunk).map((item) =>
-                item.slice(filenamePrefix.length),
-              ),
+              getDependencies(chunks, chunk).map((filename) => fileNameToURL(filename)),
             );
           },
         );

lib/omt.ejs

@@ -28,10 +28,17 @@ if (!self.<%- amdFunctionName %>) {
       <% } else { %>
         new Promise(resolve => {
           if ("document" in self) {
-            const script = document.createElement("script");
-            script.src = uri;
-            script.onload = resolve;
-            document.head.appendChild(script);
+            const link = document.createElement("link");
+            link.rel = "preload";
+            link.as = "script";
+            link.href = uri;
+            link.onload = () => {
+              const script = document.createElement("script");
+              script.src = uri;
+              script.onload = resolve;
+              document.head.appendChild(script);
+            };
+            document.head.appendChild(link);
           } else {
             self.nextDefineUri = uri;
             importScripts(uri);

libsquoosh/README.md

@@ -16,21 +16,23 @@ You can start using the libSquoosh by adding these lines to the top of your JS p
 
 ```js
 import { ImagePool } from '@squoosh/lib';
-const imagePool = new ImagePool();
+import { cpus } from 'os';
+const imagePool = new ImagePool(cpus().length);
 ```
 
-This will create an image pool with an underlying processing pipeline that you can use to ingest and encode images. The ImagePool constructor takes one argument that defines how many parallel operations it is allowed to run at any given time. By default, this number is set to the amount of CPU cores available in the system it is running on.
+This will create an image pool with an underlying processing pipeline that you can use to ingest and encode images. The ImagePool constructor takes one argument that defines how many parallel operations it is allowed to run at any given time.
 
 ## Ingesting images
 
 You can ingest a new image like so:
 
 ```js
-const imagePath = 'path/to/image.png';
-const image = imagePool.ingestImage(imagePath);
+import fs from 'fs/promises';
+const file = await fs.readFile('./path/to/image.png');
+const image = imagePool.ingestImage(file);
 ```
 
-The `ingestImage` function can take anything the node [`readFile`][readfile] function can take, including a buffer and `FileHandle`.
+The `ingestImage` function can accept any [`ArrayBuffer`][arraybuffer] whether that is from `readFile()` or `fetch()`.
 
 The returned `image` object is a representation of the original image, that you can now preprocess, encode, and extract information about.
 
@@ -39,7 +41,7 @@ The returned `image` object is a representation of the original image, that you
 When an image has been ingested, you can start preprocessing it and encoding it to other formats. This example will resize the image and then encode it to a `.jpg` and `.jxl` image:
 
 ```js
-await image.decoded; //Wait until the image is decoded before running preprocessors. 
+await image.decoded; //Wait until the image is decoded before running preprocessors.
 
 const preprocessOptions = {
   //When both width and height are specified, the image resized to specified size.
@@ -47,7 +49,7 @@ const preprocessOptions = {
     enabled: true,
     width: 100,
     height: 50,
-  }
+  },
   /*
   //When either width or height is specified, the image resized to specified size keeping aspect ratio.
   resize: {
@@ -55,7 +57,7 @@ const preprocessOptions = {
     width: 100,
   }
   */
-}
+};
 await image.preprocess(preprocessOptions);
 
 const encodeOptions = {
@@ -63,9 +65,8 @@ const encodeOptions = {
   jxl: {
     quality: 90,
   },
-}
+};
 await image.encode(encodeOptions);
-
 ```
 
 The default values for each option can be found in the [`codecs.ts`][codecs.ts] file under `defaultEncoderOptions`. Every unspecified value will use the default value specified there. _Better documentation is needed here._
@@ -168,4 +169,4 @@ const encodeOptions: {
 [squoosh]: https://squoosh.app
 [codecs.ts]: https://github.com/GoogleChromeLabs/squoosh/blob/dev/libsquoosh/src/codecs.ts
 [butteraugli]: https://github.com/google/butteraugli
-[readfile]: https://nodejs.org/api/fs.html#fs_fspromises_readfile_path_options
+[arraybuffer]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer

libsquoosh/rollup.config.js

@@ -10,7 +10,7 @@ import { builtinModules } from 'module';
 
 /** @type {import('rollup').RollupOptions} */
 export default {
-  input: 'src/index.js',
+  input: 'src/index.ts',
   output: {
     dir: 'build',
     format: 'cjs',

libsquoosh/src/codecs.ts

@@ -9,6 +9,12 @@ import { cpus } from 'os';
   hardwareConcurrency: cpus().length,
 };
 
+interface DecodeModule extends EmscriptenWasm.Module {
+  decode: (data: Uint8Array) => ImageData;
+}
+
+type DecodeModuleFactory = EmscriptenWasm.ModuleFactory<DecodeModule>;
+
 interface RotateModuleInstance {
   exports: {
     memory: WebAssembly.Memory;
@@ -23,17 +29,26 @@ interface ResizeWithAspectParams {
   target_height: number;
 }
 
-interface ResizeInstantiateOptions {
+export interface ResizeOptions {
   width: number;
   height: number;
-  method: string;
+  method: 'triangle' | 'catrom' | 'mitchell' | 'lanczos3';
   premultiply: boolean;
   linearRGB: boolean;
 }
 
+export interface QuantOptions {
+  numColors: number;
+  dither: number;
+}
+
+export interface RotateOptions {
+  numRotations: number;
+}
+
 declare global {
   // Needed for being able to use ImageData as type in codec types
-  type ImageData = typeof import('./image_data.js');
+  type ImageData = import('./image_data.js').default;
   // Needed for being able to assign to `globalThis.ImageData`
   var ImageData: ImageData['constructor'];
 }
@@ -41,18 +56,23 @@ declare global {
 import type { QuantizerModule } from '../../codecs/imagequant/imagequant.js';
 
 // MozJPEG
+import type { MozJPEGModule as MozJPEGEncodeModule } from '../../codecs/mozjpeg/enc/mozjpeg_enc';
 import mozEnc from '../../codecs/mozjpeg/enc/mozjpeg_node_enc.js';
 import mozEncWasm from 'asset-url:../../codecs/mozjpeg/enc/mozjpeg_node_enc.wasm';
 import mozDec from '../../codecs/mozjpeg/dec/mozjpeg_node_dec.js';
 import mozDecWasm from 'asset-url:../../codecs/mozjpeg/dec/mozjpeg_node_dec.wasm';
+import type { EncodeOptions as MozJPEGEncodeOptions } from '../../codecs/mozjpeg/enc/mozjpeg_enc';
 
 // WebP
+import type { WebPModule as WebPEncodeModule } from '../../codecs/webp/enc/webp_enc';
 import webpEnc from '../../codecs/webp/enc/webp_node_enc.js';
 import webpEncWasm from 'asset-url:../../codecs/webp/enc/webp_node_enc.wasm';
 import webpDec from '../../codecs/webp/dec/webp_node_dec.js';
 import webpDecWasm from 'asset-url:../../codecs/webp/dec/webp_node_dec.wasm';
+import type { EncodeOptions as WebPEncodeOptions } from '../../codecs/webp/enc/webp_enc.js';
 
 // AVIF
+import type { AVIFModule as AVIFEncodeModule } from '../../codecs/avif/enc/avif_enc';
 import avifEnc from '../../codecs/avif/enc/avif_node_enc.js';
 import avifEncWasm from 'asset-url:../../codecs/avif/enc/avif_node_enc.wasm';
 import avifEncMt from '../../codecs/avif/enc/avif_node_enc_mt.js';
@@ -60,18 +80,23 @@ import avifEncMtWorker from 'chunk-url:../../codecs/avif/enc/avif_node_enc_mt.wo
 import avifEncMtWasm from 'asset-url:../../codecs/avif/enc/avif_node_enc_mt.wasm';
 import avifDec from '../../codecs/avif/dec/avif_node_dec.js';
 import avifDecWasm from 'asset-url:../../codecs/avif/dec/avif_node_dec.wasm';
+import type { EncodeOptions as AvifEncodeOptions } from '../../codecs/avif/enc/avif_enc.js';
 
 // JXL
+import type { JXLModule as JXLEncodeModule } from '../../codecs/jxl/enc/jxl_enc';
 import jxlEnc from '../../codecs/jxl/enc/jxl_node_enc.js';
 import jxlEncWasm from 'asset-url:../../codecs/jxl/enc/jxl_node_enc.wasm';
 import jxlDec from '../../codecs/jxl/dec/jxl_node_dec.js';
 import jxlDecWasm from 'asset-url:../../codecs/jxl/dec/jxl_node_dec.wasm';
+import type { EncodeOptions as JxlEncodeOptions } from '../../codecs/jxl/enc/jxl_enc.js';
 
 // WP2
+import type { WP2Module as WP2EncodeModule } from '../../codecs/wp2/enc/wp2_enc';
 import wp2Enc from '../../codecs/wp2/enc/wp2_node_enc.js';
 import wp2EncWasm from 'asset-url:../../codecs/wp2/enc/wp2_node_enc.wasm';
 import wp2Dec from '../../codecs/wp2/dec/wp2_node_dec.js';
 import wp2DecWasm from 'asset-url:../../codecs/wp2/dec/wp2_node_dec.wasm';
+import type { EncodeOptions as WP2EncodeOptions } from '../../codecs/wp2/enc/wp2_enc.js';
 
 // PNG
 import * as pngEncDec from '../../codecs/png/pkg/squoosh_png.js';
@@ -84,6 +109,9 @@ const pngEncDecPromise = pngEncDec.default(
 import * as oxipng from '../../codecs/oxipng/pkg/squoosh_oxipng.js';
 import oxipngWasm from 'asset-url:../../codecs/oxipng/pkg/squoosh_oxipng_bg.wasm';
 const oxipngPromise = oxipng.default(fsp.readFile(pathify(oxipngWasm)));
+interface OxiPngEncodeOptions {
+  level: number;
+}
 
 // Resize
 import * as resize from '../../codecs/resize/pkg/squoosh_resize.js';
@@ -160,13 +188,7 @@ export const preprocessors = {
         buffer: Uint8Array,
         input_width: number,
         input_height: number,
-        {
-          width,
-          height,
-          method,
-          premultiply,
-          linearRGB,
-        }: ResizeInstantiateOptions,
+        { width, height, method, premultiply, linearRGB }: ResizeOptions,
       ) => {
         ({ width, height } = resizeWithAspect({
           input_width,
@@ -207,7 +229,7 @@ export const preprocessors = {
         buffer: Uint8Array,
         width: number,
         height: number,
-        { numColors, dither }: { numColors: number; dither: number },
+        { numColors, dither }: QuantOptions,
       ) =>
         new ImageData(
           imageQuant.quantize(buffer, width, height, numColors, dither),
@@ -228,7 +250,7 @@ export const preprocessors = {
         buffer: Uint8Array,
         width: number,
         height: number,
-        { numRotations }: { numRotations: number },
+        { numRotations }: RotateOptions,
       ) => {
         const degrees = (numRotations * 90) % 360;
         const sameDimensions = degrees == 0 || degrees == 180;
@@ -257,15 +279,20 @@ export const preprocessors = {
       numRotations: 0,
     },
   },
-};
+} as const;
 
 export const codecs = {
   mozjpeg: {
     name: 'MozJPEG',
     extension: 'jpg',
     detectors: [/^\xFF\xD8\xFF/],
-    dec: () => instantiateEmscriptenWasm(mozDec, mozDecWasm),
-    enc: () => instantiateEmscriptenWasm(mozEnc, mozEncWasm),
+    dec: () =>
+      instantiateEmscriptenWasm(mozDec as DecodeModuleFactory, mozDecWasm),
+    enc: () =>
+      instantiateEmscriptenWasm(
+        mozEnc as EmscriptenWasm.ModuleFactory<MozJPEGEncodeModule>,
+        mozEncWasm,
+      ),
     defaultEncoderOptions: {
       quality: 75,
       baseline: false,
@@ -294,8 +321,13 @@ export const codecs = {
     name: 'WebP',
     extension: 'webp',
     detectors: [/^RIFF....WEBPVP8[LX ]/s],
-    dec: () => instantiateEmscriptenWasm(webpDec, webpDecWasm),
-    enc: () => instantiateEmscriptenWasm(webpEnc, webpEncWasm),
+    dec: () =>
+      instantiateEmscriptenWasm(webpDec as DecodeModuleFactory, webpDecWasm),
+    enc: () =>
+      instantiateEmscriptenWasm(
+        webpEnc as EmscriptenWasm.ModuleFactory<WebPEncodeModule>,
+        webpEncWasm,
+      ),
     defaultEncoderOptions: {
       quality: 75,
       target_size: 0,
@@ -335,16 +367,20 @@ export const codecs = {
     name: 'AVIF',
     extension: 'avif',
     detectors: [/^\x00\x00\x00 ftypavif\x00\x00\x00\x00/],
-    dec: () => instantiateEmscriptenWasm(avifDec, avifDecWasm),
+    dec: () =>
+      instantiateEmscriptenWasm(avifDec as DecodeModuleFactory, avifDecWasm),
     enc: async () => {
       if (await threads()) {
         return instantiateEmscriptenWasm(
-          avifEncMt,
+          avifEncMt as EmscriptenWasm.ModuleFactory<AVIFEncodeModule>,
           avifEncMtWasm,
           avifEncMtWorker,
         );
       }
-      return instantiateEmscriptenWasm(avifEnc, avifEncWasm);
+      return instantiateEmscriptenWasm(
+        avifEnc as EmscriptenWasm.ModuleFactory<AVIFEncodeModule>,
+        avifEncWasm,
+      );
     },
     defaultEncoderOptions: {
       cqLevel: 33,
@@ -368,16 +404,21 @@ export const codecs = {
     name: 'JPEG-XL',
     extension: 'jxl',
     detectors: [/^\xff\x0a/],
-    dec: () => instantiateEmscriptenWasm(jxlDec, jxlDecWasm),
-    enc: () => instantiateEmscriptenWasm(jxlEnc, jxlEncWasm),
+    dec: () =>
+      instantiateEmscriptenWasm(jxlDec as DecodeModuleFactory, jxlDecWasm),
+    enc: () =>
+      instantiateEmscriptenWasm(
+        jxlEnc as EmscriptenWasm.ModuleFactory<JXLEncodeModule>,
+        jxlEncWasm,
+      ),
     defaultEncoderOptions: {
-      speed: 4,
+      effort: 1,
       quality: 75,
       progressive: false,
       epf: -1,
-      nearLossless: 0,
       lossyPalette: false,
       decodingSpeedTier: 0,
+      photonNoiseIso: 0,
     },
     autoOptimize: {
       option: 'quality',
@@ -389,8 +430,13 @@ export const codecs = {
     name: 'WebP2',
     extension: 'wp2',
     detectors: [/^\xF4\xFF\x6F/],
-    dec: () => instantiateEmscriptenWasm(wp2Dec, wp2DecWasm),
-    enc: () => instantiateEmscriptenWasm(wp2Enc, wp2EncWasm),
+    dec: () =>
+      instantiateEmscriptenWasm(wp2Dec as DecodeModuleFactory, wp2DecWasm),
+    enc: () =>
+      instantiateEmscriptenWasm(
+        wp2Enc as EmscriptenWasm.ModuleFactory<WP2EncodeModule>,
+        wp2EncWasm,
+      ),
     defaultEncoderOptions: {
       quality: 75,
       alpha_quality: 75,
@@ -421,7 +467,7 @@ export const codecs = {
       await oxipngPromise;
       return {
         encode: (
-          buffer: Uint8Array,
+          buffer: Uint8ClampedArray | ArrayBuffer,
           width: number,
           height: number,
           opts: { level: number },
@@ -444,4 +490,13 @@ export const codecs = {
       max: 1,
     },
   },
+} as const;
+
+export {
+  MozJPEGEncodeOptions,
+  WebPEncodeOptions,
+  AvifEncodeOptions,
+  JxlEncodeOptions,
+  WP2EncodeOptions,
+  OxiPngEncodeOptions,
 };

libsquoosh/src/emscripten-utils.ts

@@ -19,7 +19,7 @@ export function instantiateEmscriptenWasm<T extends EmscriptenWasm.Module>(
       // These will have changed in the bundling process and
       // we need to inject them here.
       if (requestPath.endsWith('.wasm')) return pathify(path);
-      if (requestPath.endsWith('.worker.js')) return new URL(workerJS).pathname;
+      if (requestPath.endsWith('.worker.js')) return pathify(workerJS);
       return requestPath;
     },
   });

libsquoosh/src/index.js

@@ -1,224 +0,0 @@
-import { isMainThread } from 'worker_threads';
-import { cpus } from 'os';
-import { promises as fsp } from 'fs';
-
-import { codecs as encoders, preprocessors } from './codecs.js';
-import WorkerPool from './worker_pool.js';
-import { autoOptimize } from './auto-optimizer.js';
-
-export { ImagePool, encoders, preprocessors };
-
-async function decodeFile({ file }) {
-  let buffer;
-  if (ArrayBuffer.isView(file)) {
-    buffer = Buffer.from(file.buffer);
-    file = 'Binary blob';
-  } else if (file instanceof ArrayBuffer) {
-    buffer = Buffer.from(file);
-    file = 'Binary blob';
-  } else if (file instanceof Buffer) {
-    buffer = file;
-    file = 'Binary blob';
-  } else if (typeof file === 'string') {
-    buffer = await fsp.readFile(file);
-  } else {
-    throw Error('Unexpected input type');
-  }
-  const firstChunk = buffer.slice(0, 16);
-  const firstChunkString = Array.from(firstChunk)
-    .map((v) => String.fromCodePoint(v))
-    .join('');
-  const key = Object.entries(encoders).find(([name, { detectors }]) =>
-    detectors.some((detector) => detector.exec(firstChunkString)),
-  )?.[0];
-  if (!key) {
-    throw Error(`${file} has an unsupported format`);
-  }
-  const rgba = (await encoders[key].dec()).decode(new Uint8Array(buffer));
-  return {
-    bitmap: rgba,
-    size: buffer.length,
-  };
-}
-
-async function preprocessImage({ preprocessorName, options, image }) {
-  const preprocessor = await preprocessors[preprocessorName].instantiate();
-  image.bitmap = await preprocessor(
-    image.bitmap.data,
-    image.bitmap.width,
-    image.bitmap.height,
-    options,
-  );
-  return image;
-}
-
-async function encodeImage({
-  bitmap: bitmapIn,
-  encName,
-  encConfig,
-  optimizerButteraugliTarget,
-  maxOptimizerRounds,
-}) {
-  let binary;
-  let optionsUsed = encConfig;
-  const encoder = await encoders[encName].enc();
-  if (encConfig === 'auto') {
-    const optionToOptimize = encoders[encName].autoOptimize.option;
-    const decoder = await encoders[encName].dec();
-    const encode = (bitmapIn, quality) =>
-      encoder.encode(
-        bitmapIn.data,
-        bitmapIn.width,
-        bitmapIn.height,
-        Object.assign({}, encoders[encName].defaultEncoderOptions, {
-          [optionToOptimize]: quality,
-        }),
-      );
-    const decode = (binary) => decoder.decode(binary);
-    const { binary: optimizedBinary, quality } = await autoOptimize(
-      bitmapIn,
-      encode,
-      decode,
-      {
-        min: encoders[encName].autoOptimize.min,
-        max: encoders[encName].autoOptimize.max,
-        butteraugliDistanceGoal: optimizerButteraugliTarget,
-        maxRounds: maxOptimizerRounds,
-      },
-    );
-    binary = optimizedBinary;
-    optionsUsed = {
-      // 5 significant digits is enough
-      [optionToOptimize]: Math.round(quality * 10000) / 10000,
-    };
-  } else {
-    binary = encoder.encode(
-      bitmapIn.data.buffer,
-      bitmapIn.width,
-      bitmapIn.height,
-      encConfig,
-    );
-  }
-  return {
-    optionsUsed,
-    binary,
-    extension: encoders[encName].extension,
-    size: binary.length,
-  };
-}
-
-// both decoding and encoding go through the worker pool
-function handleJob(params) {
-  const { operation } = params;
-  switch (operation) {
-    case 'encode':
-      return encodeImage(params);
-    case 'decode':
-      return decodeFile(params);
-    case 'preprocess':
-      return preprocessImage(params);
-    default:
-      throw Error(`Invalid job "${operation}"`);
-  }
-}
-
-/**
- * Represents an ingested image.
- */
-class Image {
-  constructor(workerPool, file) {
-    this.file = file;
-    this.workerPool = workerPool;
-    this.decoded = workerPool.dispatchJob({ operation: 'decode', file });
-    this.encodedWith = {};
-  }
-
-  /**
-   * Define one or several preprocessors to use on the image.
-   * @param {object} preprocessOptions - An object with preprocessors to use, and their settings.
-   * @returns {Promise<undefined>} - A promise that resolves when all preprocessors have completed their work.
-   */
-  async preprocess(preprocessOptions = {}) {
-    for (const [name, options] of Object.entries(preprocessOptions)) {
-      if (!Object.keys(preprocessors).includes(name)) {
-        throw Error(`Invalid preprocessor "${name}"`);
-      }
-      const preprocessorOptions = Object.assign(
-        {},
-        preprocessors[name].defaultOptions,
-        options,
-      );
-      this.decoded = this.workerPool.dispatchJob({
-        operation: 'preprocess',
-        preprocessorName: name,
-        image: await this.decoded,
-        options: preprocessorOptions,
-      });
-      await this.decoded;
-    }
-  }
-
-  /**
-   * Define one or several encoders to use on the image.
-   * @param {object} encodeOptions - An object with encoders to use, and their settings.
-   * @returns {Promise<undefined>} - A promise that resolves when the image has been encoded with all the specified encoders.
-   */
-  async encode(encodeOptions = {}) {
-    const { bitmap } = await this.decoded;
-    for (const [encName, options] of Object.entries(encodeOptions)) {
-      if (!Object.keys(encoders).includes(encName)) {
-        continue;
-      }
-      const encRef = encoders[encName];
-      const encConfig =
-        typeof options === 'string'
-          ? options
-          : Object.assign({}, encRef.defaultEncoderOptions, options);
-      this.encodedWith[encName] = this.workerPool.dispatchJob({
-        operation: 'encode',
-        bitmap,
-        encName,
-        encConfig,
-        optimizerButteraugliTarget: Number(
-          encodeOptions.optimizerButteraugliTarget ?? 1.4,
-        ),
-        maxOptimizerRounds: Number(encodeOptions.maxOptimizerRounds ?? 6),
-      });
-    }
-    await Promise.all(Object.values(this.encodedWith));
-  }
-}
-
-/**
- * A pool where images can be ingested and squooshed.
- */
-class ImagePool {
-  /**
-   * Create a new pool.
-   * @param {number} [threads] - Number of concurrent image processes to run in the pool. Defaults to the number of CPU cores in the system.
-   */
-  constructor(threads) {
-    this.workerPool = new WorkerPool(threads || cpus().length, __filename);
-  }
-
-  /**
-   * Ingest an image into the image pool.
-   * @param {string | Buffer | URL | object} image - The image or path to the image that should be ingested and decoded.
-   * @returns {Image} - A custom class reference to the decoded image.
-   */
-  ingestImage(image) {
-    return new Image(this.workerPool, image);
-  }
-
-  /**
-   * Closes the underlying image processing pipeline. The already processed images will still be there, but no new processing can start.
-   * @returns {Promise<undefined>} - A promise that resolves when the underlying pipeline has closed.
-   */
-  async close() {
-    await this.workerPool.join();
-  }
-}
-
-if (!isMainThread) {
-  WorkerPool.useThisThreadAsWorker(handleJob);
-}

libsquoosh/src/index.ts

@@ -0,0 +1,307 @@
+import { isMainThread } from 'worker_threads';
+
+import {
+  AvifEncodeOptions,
+  codecs as encoders,
+  JxlEncodeOptions,
+  MozJPEGEncodeOptions,
+  OxiPngEncodeOptions,
+  preprocessors,
+  QuantOptions,
+  ResizeOptions,
+  RotateOptions,
+  WebPEncodeOptions,
+  WP2EncodeOptions,
+} from './codecs.js';
+import WorkerPool from './worker_pool.js';
+import { autoOptimize } from './auto-optimizer.js';
+import type ImageData from './image_data';
+
+export { ImagePool, encoders, preprocessors };
+type EncoderKey = keyof typeof encoders;
+type PreprocessorKey = keyof typeof preprocessors;
+
+type PreprocessOptions = {
+  resize?: ResizeOptions;
+  quant?: QuantOptions;
+  rotate?: RotateOptions;
+};
+type EncodeResult = {
+  optionsUsed: object;
+  binary: Uint8Array;
+  extension: string;
+  size: number;
+};
+type EncoderOptions = {
+  mozjpeg?: Partial<MozJPEGEncodeOptions>;
+  webp?: Partial<WebPEncodeOptions>;
+  avif?: Partial<AvifEncodeOptions>;
+  jxl?: Partial<JxlEncodeOptions>;
+  wp2?: Partial<WP2EncodeOptions>;
+  oxipng?: Partial<OxiPngEncodeOptions>;
+};
+
+async function decodeFile({
+  file,
+}: {
+  file: ArrayBuffer | ArrayLike<number>;
+}): Promise<{ bitmap: ImageData; size: number }> {
+  const array = new Uint8Array(file);
+  const firstChunk = array.slice(0, 16);
+  const firstChunkString = Array.from(firstChunk)
+    .map((v) => String.fromCodePoint(v))
+    .join('');
+  const key = Object.entries(encoders).find(([_name, { detectors }]) =>
+    detectors.some((detector) => detector.exec(firstChunkString)),
+  )?.[0] as EncoderKey | undefined;
+  if (!key) {
+    throw Error(`File has an unsupported format`);
+  }
+  const encoder = encoders[key];
+  const mod = await encoder.dec();
+  const rgba = mod.decode(array);
+  return {
+    bitmap: rgba,
+    size: array.length,
+  };
+}
+
+async function preprocessImage({
+  preprocessorName,
+  options,
+  image,
+}: {
+  preprocessorName: PreprocessorKey;
+  options: any;
+  image: { bitmap: ImageData };
+}) {
+  const preprocessor = await preprocessors[preprocessorName].instantiate();
+  image.bitmap = await preprocessor(
+    Uint8Array.from(image.bitmap.data),
+    image.bitmap.width,
+    image.bitmap.height,
+    options,
+  );
+  return image;
+}
+
+async function encodeImage({
+  bitmap: bitmapIn,
+  encName,
+  encConfig,
+  optimizerButteraugliTarget,
+  maxOptimizerRounds,
+}: {
+  bitmap: ImageData;
+  encName: EncoderKey;
+  encConfig: any;
+  optimizerButteraugliTarget: number;
+  maxOptimizerRounds: number;
+}): Promise<EncodeResult> {
+  let binary: Uint8Array;
+  let optionsUsed = encConfig;
+  const encoder = await encoders[encName].enc();
+  if (encConfig === 'auto') {
+    const optionToOptimize = encoders[encName].autoOptimize.option;
+    const decoder = await encoders[encName].dec();
+    const encode = (bitmapIn: ImageData, quality: number) =>
+      encoder.encode(
+        bitmapIn.data,
+        bitmapIn.width,
+        bitmapIn.height,
+        Object.assign({}, encoders[encName].defaultEncoderOptions as any, {
+          [optionToOptimize]: quality,
+        }),
+      );
+    const decode = (binary: Uint8Array) => decoder.decode(binary);
+    const nonNullEncode = (bitmap: ImageData, quality: number): Uint8Array => {
+      const result = encode(bitmap, quality);
+      if (!result) {
+        throw new Error('There was an error while encoding');
+      }
+      return result;
+    };
+    const { binary: optimizedBinary, quality } = await autoOptimize(
+      bitmapIn,
+      nonNullEncode,
+      decode,
+      {
+        min: encoders[encName].autoOptimize.min,
+        max: encoders[encName].autoOptimize.max,
+        butteraugliDistanceGoal: optimizerButteraugliTarget,
+        maxRounds: maxOptimizerRounds,
+      },
+    );
+    binary = optimizedBinary;
+    optionsUsed = {
+      // 5 significant digits is enough
+      [optionToOptimize]: Math.round(quality * 10000) / 10000,
+    };
+  } else {
+    const result = encoder.encode(
+      bitmapIn.data.buffer,
+      bitmapIn.width,
+      bitmapIn.height,
+      encConfig,
+    );
+
+    if (!result) {
+      throw new Error('There was an error while encoding');
+    }
+
+    binary = result;
+  }
+  return {
+    optionsUsed,
+    binary,
+    extension: encoders[encName].extension,
+    size: binary.length,
+  };
+}
+
+type EncodeParams = { operation: 'encode' } & Parameters<typeof encodeImage>[0];
+type DecodeParams = { operation: 'decode' } & Parameters<typeof decodeFile>[0];
+type PreprocessParams = { operation: 'preprocess' } & Parameters<
+  typeof preprocessImage
+>[0];
+type JobMessage = EncodeParams | DecodeParams | PreprocessParams;
+
+function handleJob(params: JobMessage) {
+  switch (params.operation) {
+    case 'encode':
+      return encodeImage(params);
+    case 'decode':
+      return decodeFile(params);
+    case 'preprocess':
+      return preprocessImage(params);
+    default:
+      throw Error(`Invalid job "${(params as any).operation}"`);
+  }
+}
+
+/**
+ * Represents an ingested image.
+ */
+class Image {
+  public file: ArrayBuffer | ArrayLike<number>;
+  public workerPool: WorkerPool<JobMessage, any>;
+  public decoded: Promise<{ bitmap: ImageData }>;
+  public encodedWith: { [key in EncoderKey]?: EncodeResult };
+
+  constructor(
+    workerPool: WorkerPool<JobMessage, any>,
+    file: ArrayBuffer | ArrayLike<number>,
+  ) {
+    this.file = file;
+    this.workerPool = workerPool;
+    this.decoded = workerPool.dispatchJob({ operation: 'decode', file });
+    this.encodedWith = {};
+  }
+
+  /**
+   * Define one or several preprocessors to use on the image.
+   * @param {PreprocessOptions} preprocessOptions - An object with preprocessors to use, and their settings.
+   * @returns {Promise<undefined>} - A promise that resolves when all preprocessors have completed their work.
+   */
+  async preprocess(preprocessOptions: PreprocessOptions = {}) {
+    for (const [name, options] of Object.entries(preprocessOptions)) {
+      if (!Object.keys(preprocessors).includes(name)) {
+        throw Error(`Invalid preprocessor "${name}"`);
+      }
+      const preprocessorName = name as PreprocessorKey;
+      const preprocessorOptions = Object.assign(
+        {},
+        preprocessors[preprocessorName].defaultOptions,
+        options,
+      );
+      this.decoded = this.workerPool.dispatchJob({
+        operation: 'preprocess',
+        preprocessorName,
+        image: await this.decoded,
+        options: preprocessorOptions,
+      });
+      await this.decoded;
+    }
+  }
+
+  /**
+   * Define one or several encoders to use on the image.
+   * @param {object} encodeOptions - An object with encoders to use, and their settings.
+   * @returns {Promise<{ [key in keyof T]: EncodeResult }>} - A promise that resolves when the image has been encoded with all the specified encoders.
+   */
+  async encode<T extends EncoderOptions>(
+    encodeOptions: {
+      optimizerButteraugliTarget?: number;
+      maxOptimizerRounds?: number;
+    } & T,
+  ): Promise<{ [key in keyof T]: EncodeResult }> {
+    const { bitmap } = await this.decoded;
+    const setEncodedWithPromises = [];
+    for (const [name, options] of Object.entries(encodeOptions)) {
+      if (!Object.keys(encoders).includes(name)) {
+        continue;
+      }
+      const encName = name as EncoderKey;
+      const encRef = encoders[encName];
+      const encConfig =
+        typeof options === 'string'
+          ? options
+          : Object.assign({}, encRef.defaultEncoderOptions, options);
+      setEncodedWithPromises.push(
+        this.workerPool
+          .dispatchJob({
+            operation: 'encode',
+            bitmap,
+            encName,
+            encConfig,
+            optimizerButteraugliTarget: Number(
+              encodeOptions.optimizerButteraugliTarget ?? 1.4,
+            ),
+            maxOptimizerRounds: Number(encodeOptions.maxOptimizerRounds ?? 6),
+          })
+          .then((encodeResult) => {
+            this.encodedWith[encName] = encodeResult;
+          }),
+      );
+    }
+
+    await Promise.all(setEncodedWithPromises);
+    return this.encodedWith as { [key in keyof T]: EncodeResult };
+  }
+}
+
+/**
+ * A pool where images can be ingested and squooshed.
+ */
+class ImagePool {
+  public workerPool: WorkerPool<JobMessage, any>;
+
+  /**
+   * Create a new pool.
+   * @param {number} [threads] - Number of concurrent image processes to run in the pool.
+   */
+  constructor(threads: number) {
+    this.workerPool = new WorkerPool(threads, __filename);
+  }
+
+  /**
+   * Ingest an image into the image pool.
+   * @param {ArrayBuffer | ArrayLike<number>} file - The image that should be ingested and decoded.
+   * @returns {Image} - A custom class reference to the decoded image.
+   */
+  ingestImage(file: ArrayBuffer | ArrayLike<number>): Image {
+    return new Image(this.workerPool, file);
+  }
+
+  /**
+   * Closes the underlying image processing pipeline. The already processed images will still be there, but no new processing can start.
+   * @returns {Promise<void>} - A promise that resolves when the underlying pipeline has closed.
+   */
+  async close(): Promise<void> {
+    await this.workerPool.join();
+  }
+}
+
+if (!isMainThread) {
+  WorkerPool.useThisThreadAsWorker(handleJob);
+}

libsquoosh/src/worker_pool.ts

@@ -7,26 +7,19 @@ function uuid() {
   ).join('');
 }
 
-function jobPromise(worker, msg) {
-  return new Promise((resolve, reject) => {
-    const id = uuid();
-    worker.postMessage({ msg, id });
-    worker.on('message', function f({ error, result, id: rid }) {
-      if (rid !== id) {
-        return;
-      }
-      if (error) {
-        reject(error);
-        return;
-      }
-      worker.off('message', f);
-      resolve(result);
-    });
-  });
+interface Job<I> {
+  msg: I;
+  resolve: Function;
+  reject: Function;
 }
 
-export default class WorkerPool {
-  constructor(numWorkers, workerFile) {
+export default class WorkerPool<I, O> {
+  public numWorkers: number;
+  public jobQueue: TransformStream<Job<I>, Job<I>>;
+  public workerQueue: TransformStream<Worker, Worker>;
+  public done: Promise<void>;
+
+  constructor(numWorkers: number, workerFile: string) {
     this.numWorkers = numWorkers;
     this.jobQueue = new TransformStream();
     this.workerQueue = new TransformStream();
@@ -48,9 +41,14 @@ export default class WorkerPool {
         await this._terminateAll();
         return;
       }
+
+      if (!value) {
+        throw new Error('Reader did not return any value');
+      }
+
       const { msg, resolve, reject } = value;
       const worker = await this._nextWorker();
-      jobPromise(worker, msg)
+      this.jobPromise(worker, msg)
         .then((result) => resolve(result))
         .catch((reason) => reject(reason))
         .finally(() => {
@@ -66,6 +64,10 @@ export default class WorkerPool {
     const reader = this.workerQueue.readable.getReader();
     const { value } = await reader.read();
     reader.releaseLock();
+    if (!value) {
+      throw new Error('No worker left');
+    }
+
     return value;
   }
 
@@ -82,7 +84,7 @@ export default class WorkerPool {
     await this.done;
   }
 
-  dispatchJob(msg) {
+  dispatchJob(msg: I): Promise<O> {
     return new Promise((resolve, reject) => {
       const writer = this.jobQueue.writable.getWriter();
       writer.write({ msg, resolve, reject });
@@ -90,14 +92,32 @@ export default class WorkerPool {
     });
   }
 
-  static useThisThreadAsWorker(cb) {
-    parentPort.on('message', async (data) => {
+  private jobPromise(worker: Worker, msg: I) {
+    return new Promise((resolve, reject) => {
+      const id = uuid();
+      worker.postMessage({ msg, id });
+      worker.on('message', function f({ error, result, id: rid }) {
+        if (rid !== id) {
+          return;
+        }
+        if (error) {
+          reject(error);
+          return;
+        }
+        worker.off('message', f);
+        resolve(result);
+      });
+    });
+  }
+
+  static useThisThreadAsWorker<I, O>(cb: (msg: I) => O) {
+    parentPort!.on('message', async (data) => {
       const { msg, id } = data;
       try {
         const result = await cb(msg);
-        parentPort.postMessage({ result, id });
+        parentPort!.postMessage({ result, id });
       } catch (e) {
-        parentPort.postMessage({ error: e.message, id });
+        parentPort!.postMessage({ error: e.message, id });
       }
     });
   }

missing-types.d.ts

@@ -44,6 +44,21 @@ declare module 'data-url:*' {
   export default url;
 }
 
+declare module 'data-url-text:*' {
+  const url: string;
+  export default url;
+}
+
+declare module 'as-text:*' {
+  const text: string;
+  export default text;
+}
+
+declare module 'service-worker:*' {
+  const url: string;
+  export default url;
+}
+
 declare var ga: {
   (...args: any[]): void;
   q: any[];

package-lock.json

@@ -32,7 +32,7 @@
         "lodash.camelcase": "^4.3.0",
         "mime-types": "^2.1.28",
         "npm-run-all": "^4.1.5",
-        "pointer-tracker": "^2.4.0",
+        "pointer-tracker": "^2.5.3",
         "postcss": "^7.0.35",
         "postcss-modules": "^3.2.2",
         "postcss-nested": "^4.2.3",
@@ -48,6 +48,20 @@
         "which": "^2.0.2"
       }
     },
+    "../pointer-tracker": {
+      "version": "2.5.0",
+      "extraneous": true,
+      "license": "Apache-2.0",
+      "devDependencies": {
+        "husky": "^4.2.5",
+        "lint-staged": "^10.2.11",
+        "prettier": "^2.0.5",
+        "rollup": "^2.23.1",
+        "rollup-plugin-terser": "^7.0.0",
+        "rollup-plugin-typescript2": "^0.27.2",
+        "typescript": "^3.9.7"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
@@ -3871,9 +3885,9 @@
       }
     },
     "node_modules/pointer-tracker": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/pointer-tracker/-/pointer-tracker-2.4.0.tgz",
-      "integrity": "sha512-pWI2tpaM/XNtc9mUTv42Rmjf6mkHvE8LT5DDEq0G7baPNhxNM9E3CepubPplSoSLk9E5bwQrAMyDcPVmJyTW4g==",
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/pointer-tracker/-/pointer-tracker-2.5.3.tgz",
+      "integrity": "sha512-LiJUeIbzk4dXq678YeyrZ++mdY17q4n/2sBHfU9wIuvmSzdiPgMvmvWN2g8mY4J7YwYOIrqrZUWP/MfFHVwYtg==",
       "dev": true
     },
     "node_modules/postcss": {
@@ -8976,9 +8990,9 @@
       }
     },
     "@surma/rollup-plugin-off-main-thread": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.1.tgz",
-      "integrity": "sha512-7OU8wfyv18YPWVmecg2/0Jh+pm3lQbvPhIWHd1YQpoxPKPW/vsDNGBaCnMKsZbz29RjgCoXKugAjyagPncgdEw==",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.2.tgz",
+      "integrity": "sha512-dOD6nGZ79RmWKDRQuC7SOGXMvDkkLwBogu+epfVFMKiy2kOUtLZkb8wV/ettuMt37YJAJKYCKUmxSbZL2LkUQg==",
       "dev": true,
       "requires": {
         "ejs": "^3.1.6",
@@ -11946,9 +11960,9 @@
       }
     },
     "pointer-tracker": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/pointer-tracker/-/pointer-tracker-2.4.0.tgz",
-      "integrity": "sha512-pWI2tpaM/XNtc9mUTv42Rmjf6mkHvE8LT5DDEq0G7baPNhxNM9E3CepubPplSoSLk9E5bwQrAMyDcPVmJyTW4g==",
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/pointer-tracker/-/pointer-tracker-2.5.3.tgz",
+      "integrity": "sha512-LiJUeIbzk4dXq678YeyrZ++mdY17q4n/2sBHfU9wIuvmSzdiPgMvmvWN2g8mY4J7YwYOIrqrZUWP/MfFHVwYtg==",
       "dev": true
     },
     "postcss": {
@@ -15980,9 +15994,9 @@
       "dev": true
     },
     "wasm-feature-detect": {
-      "version": "1.2.9",
-      "resolved": "https://registry.npmjs.org/wasm-feature-detect/-/wasm-feature-detect-1.2.9.tgz",
-      "integrity": "sha512-2E9/gtLVLpv2wnZDyYv8WY2dR9gHbmyv5uhZsnOcMSzqc78aGZpKQORPNcnrPwAU23nFUo7GAwKuoTAWRgsJ7Q=="
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/wasm-feature-detect/-/wasm-feature-detect-1.2.11.tgz",
+      "integrity": "sha512-HUqwaodrQGaZgz1lZaNioIkog9tkeEJjrM3eq4aUL04whXOVDRc/o2EGb/8kV0QX411iAYWEqq7fMBmJ6dKS6w=="
     },
     "which": {
       "version": "2.0.2",

package.json

@@ -14,7 +14,7 @@
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-node-resolve": "^11.1.0",
     "@rollup/plugin-replace": "^2.3.4",
-    "@surma/rollup-plugin-off-main-thread": "^2.2.1",
+    "@surma/rollup-plugin-off-main-thread": "^2.2.2",
     "@types/dedent": "^0.7.0",
     "@types/mime-types": "^2.1.0",
     "@types/node": "^14.14.7",
@@ -32,7 +32,7 @@
     "lodash.camelcase": "^4.3.0",
     "mime-types": "^2.1.28",
     "npm-run-all": "^4.1.5",
-    "pointer-tracker": "^2.4.0",
+    "pointer-tracker": "^2.5.3",
     "postcss": "^7.0.35",
     "postcss-modules": "^3.2.2",
     "postcss-nested": "^4.2.3",
@@ -58,6 +58,6 @@
     "*.rs": "rustfmt"
   },
   "dependencies": {
-    "wasm-feature-detect": "^1.2.9"
+    "wasm-feature-detect": "^1.2.11"
   }
 }

rollup.config.js

@@ -18,6 +18,7 @@ import commonjs from '@rollup/plugin-commonjs';
 import { terser } from 'rollup-plugin-terser';
 import OMT from '@surma/rollup-plugin-off-main-thread';
 import replace from '@rollup/plugin-replace';
+import { importMetaAssets } from '@web/rollup-plugin-import-meta-assets';
 
 import simpleTS from './lib/simple-ts';
 import clientBundlePlugin from './lib/client-bundle-plugin';
@@ -31,11 +32,12 @@ import featurePlugin from './lib/feature-plugin';
 import initialCssPlugin from './lib/initial-css-plugin';
 import serviceWorkerPlugin from './lib/sw-plugin';
 import dataURLPlugin from './lib/data-url-plugin';
+import asTextPlugin from './lib/as-text-plugin';
+import entryDataPlugin, { fileNameToURL } from './lib/entry-data-plugin';
 import dedent from 'dedent';
-import entryDataPlugin from './lib/entry-data-plugin';
 
 function resolveFileUrl({ fileName }) {
-  return JSON.stringify(fileName.replace(/^static\//, '/'));
+  return JSON.stringify(fileNameToURL(fileName));
 }
 
 function resolveImportMetaUrlInStaticBuild(property, { moduleId }) {
@@ -70,7 +72,7 @@ export default async function ({ watch }) {
 
   await del('.tmp/build');
 
-  const isProduction = !watch && !process.env.DEBUG;
+  const isProduction = !watch;
 
   const tsPluginInstance = simpleTS('.', {
     watch,
@@ -88,6 +90,7 @@ export default async function ({ watch }) {
       'codecs',
     ]),
     urlPlugin(),
+    asTextPlugin(),
     dataURLPlugin(),
     cssPlugin(),
   ];
@@ -118,6 +121,7 @@ export default async function ({ watch }) {
           plugins: [
             { resolveFileUrl },
             OMT({ loader: await omtLoaderPromise }),
+            importMetaAssets(),
             serviceWorkerPlugin({
               output: 'static/serviceworker.js',
             }),

src/client/initial-app/index.tsx

@@ -37,8 +37,10 @@ main();
   ga('set', 'transport', 'beacon');
   ga('set', 'dimension1', displayMode);
   ga('send', 'pageview', '/index.html', { title: 'Squoosh' });
-  // Load the GA script
-  const script = document.createElement('script');
-  script.src = 'https://www.google-analytics.com/analytics.js';
-  document.head.appendChild(script);
+  // Load the GA script without keeping the browser spinner going.
+  addEventListener('load', () => {
+    const script = document.createElement('script');
+    script.src = 'https://www.google-analytics.com/analytics.js';
+    document.head.appendChild(script);
+  });
 }

src/client/lazy-app/Compress/Options/Range/custom-els/RangeInput/index.ts

@@ -20,7 +20,7 @@ const REFLECTED_ATTRIBUTES = [
   'disabled',
 ];
 
-function getPrescision(value: string): number {
+function getPrecision(value: string): number {
   const afterDecimal = value.split('.')[1];
   return afterDecimal ? afterDecimal.length : 0;
 }
@@ -112,18 +112,24 @@ class RangeInputElement extends HTMLElement {
     this.dispatchEvent(retargetted);
   };
 
+  private _getDisplayValue(value: number): string {
+    if (value >= 10000) return (value / 1000).toFixed(1) + 'k';
+
+    const labelPrecision =
+      Number(this.labelPrecision) || getPrecision(this.step) || 0;
+    return labelPrecision
+      ? value.toFixed(labelPrecision)
+      : Math.round(value).toString();
+  }
+
   private _update = () => {
     // Not connected?
     if (!this._valueDisplay) return;
     const value = Number(this.value) || 0;
     const min = Number(this.min) || 0;
     const max = Number(this.max) || 100;
-    const labelPrecision =
-      Number(this.labelPrecision) || getPrescision(this.step) || 0;
     const percent = (100 * (value - min)) / (max - min);
-    const displayValue = labelPrecision
-      ? value.toFixed(labelPrecision)
-      : Math.round(value).toString();
+    const displayValue = this._getDisplayValue(value);
 
     this._valueDisplay!.textContent = displayValue;
     this.style.setProperty('--value-percent', percent + '%');

src/client/lazy-app/Compress/Options/Range/style.css

@@ -35,7 +35,7 @@
   text-decoration-style: dotted;
   text-decoration-color: var(--main-theme-color);
   text-underline-position: under;
-  width: 48px;
+  width: 54px;
   position: relative;
   left: 5px;
 

src/client/lazy-app/Compress/Options/style.css

@@ -1,6 +1,7 @@
 .options-scroller {
   --horizontal-padding: 15px;
   border-radius: var(--scroller-radius);
+  overflow: hidden;
 
   /* At smaller widths, the multi-panel handles the scrolling */
   @media (min-width: 600px) {

src/client/lazy-app/Compress/Output/custom-els/PinchZoom/index.ts

@@ -1,5 +1,6 @@
 import PointerTracker, { Pointer } from 'pointer-tracker';
 import 'add-css:./styles.css';
+import { isSafari } from 'client/lazy-app/util';
 
 interface Point {
   clientX: number;
@@ -81,6 +82,7 @@ function createPoint(): SVGPoint {
 }
 
 const MIN_SCALE = 0.01;
+const MAX_SCALE = 100000;
 
 export default class PinchZoom extends HTMLElement {
   // The element that we'll transform.
@@ -104,14 +106,23 @@ export default class PinchZoom extends HTMLElement {
     const pointerTracker: PointerTracker = new PointerTracker(this, {
       start: (pointer, event) => {
         // We only want to track 2 pointers at most
-        if (pointerTracker.currentPointers.length === 2 || !this._positioningEl)
+        if (
+          pointerTracker.currentPointers.length === 2 ||
+          !this._positioningEl
+        ) {
           return false;
+        }
         event.preventDefault();
         return true;
       },
       move: (previousPointers) => {
         this._onPointerMove(previousPointers, pointerTracker.currentPointers);
       },
+      // Unfortunately Safari on iOS has a bug where pointer event capturing
+      // doesn't work in some cases, and we hit those cases due to our event
+      // retargeting in pinch-zoom.
+      // https://bugs.webkit.org/show_bug.cgi?id=220196
+      avoidPointerEvents: isSafari,
     });
 
     this.addEventListener('wheel', (event) => this._onWheel(event));
@@ -244,6 +255,9 @@ export default class PinchZoom extends HTMLElement {
     // Avoid scaling to zero
     if (scale < MIN_SCALE) return;
 
+    // Avoid scaling to very large values
+    if (scale > MAX_SCALE) return;
+
     // Return if there's no change
     if (scale === this.scale && x === this.x && y === this.y) return;
 
@@ -296,9 +310,13 @@ export default class PinchZoom extends HTMLElement {
       deltaY *= 15;
     }
 
+    const zoomingOut = deltaY > 0;
+
     // ctrlKey is true when pinch-zooming on a trackpad.
     const divisor = ctrlKey ? 100 : 300;
-    const scaleDiff = 1 - deltaY / divisor;
+    // when zooming out, invert the delta and the ratio to keep zoom stable
+    const ratio = 1 - (zoomingOut ? -deltaY : deltaY) / divisor;
+    const scaleDiff = zoomingOut ? 1 / ratio : ratio;
 
     this._applyChange({
       scaleDiff,

src/client/lazy-app/Compress/Output/index.tsx

@@ -5,8 +5,10 @@ import './custom-els/PinchZoom';
 import './custom-els/TwoUp';
 import * as style from './style.css';
 import 'add-css:./style.css';
-import { shallowEqual } from '../../util';
+import { shallowEqual, isSafari } from '../../util';
 import {
+  ToggleAliasingIcon,
+  ToggleAliasingActiveIcon,
   ToggleBackgroundIcon,
   AddIcon,
   RemoveIcon,
@@ -19,7 +21,6 @@ import { cleanSet } from '../../util/clean-modify';
 import type { SourceImage } from '../../Compress';
 import { linkRef } from 'shared/prerendered-app/util';
 import { drawDataToCanvas } from 'client/lazy-app/util/canvas';
-
 interface Props {
   source?: SourceImage;
   preprocessorState?: PreprocessorState;
@@ -35,6 +36,7 @@ interface State {
   scale: number;
   editingScale: boolean;
   altBackground: boolean;
+  aliasing: boolean;
 }
 
 const scaleToOpts: ScaleToOpts = {
@@ -49,6 +51,7 @@ export default class Output extends Component<Props, State> {
     scale: 1,
     editingScale: false,
     altBackground: false,
+    aliasing: false,
   };
   canvasLeft?: HTMLCanvasElement;
   canvasRight?: HTMLCanvasElement;
@@ -145,6 +148,12 @@ export default class Output extends Component<Props, State> {
     return props.rightCompressed || (props.source && props.source.preprocessed);
   }
 
+  private toggleAliasing = () => {
+    this.setState((state) => ({
+      aliasing: !state.aliasing,
+    }));
+  };
+
   private toggleBackground = () => {
     this.setState({
       altBackground: !this.state.altBackground,
@@ -255,7 +264,7 @@ export default class Output extends Component<Props, State> {
 
   render(
     { mobileView, leftImgContain, rightImgContain, source }: Props,
-    { scale, editingScale, altBackground }: State,
+    { scale, editingScale, altBackground, aliasing }: State,
   ) {
     const leftDraw = this.leftDrawable();
     const rightDraw = this.rightDrawable();
@@ -275,7 +284,11 @@ export default class Output extends Component<Props, State> {
             onTouchStartCapture={this.onRetargetableEvent}
             onTouchEndCapture={this.onRetargetableEvent}
             onTouchMoveCapture={this.onRetargetableEvent}
-            onPointerDownCapture={this.onRetargetableEvent}
+            onPointerDownCapture={
+              // We avoid pointer events in our PinchZoom due to a Safari bug.
+              // That means we also need to avoid them here too, else we end up preventing the fallback mouse events.
+              isSafari ? undefined : this.onRetargetableEvent
+            }
             onMouseDownCapture={this.onRetargetableEvent}
             onWheelCapture={this.onRetargetableEvent}
           >
@@ -285,7 +298,9 @@ export default class Output extends Component<Props, State> {
               ref={linkRef(this, 'pinchZoomLeft')}
             >
               <canvas
-                class={style.pinchTarget}
+                class={`${style.pinchTarget} ${
+                  aliasing ? style.pixelated : ''
+                }`}
                 ref={linkRef(this, 'canvasLeft')}
                 width={leftDraw && leftDraw.width}
                 height={leftDraw && leftDraw.height}
@@ -301,7 +316,9 @@ export default class Output extends Component<Props, State> {
               ref={linkRef(this, 'pinchZoomRight')}
             >
               <canvas
-                class={style.pinchTarget}
+                class={`${style.pinchTarget} ${
+                  aliasing ? style.pixelated : ''
+                }`}
                 ref={linkRef(this, 'canvasRight')}
                 width={rightDraw && rightDraw.width}
                 height={rightDraw && rightDraw.height}
@@ -345,10 +362,31 @@ export default class Output extends Component<Props, State> {
             </button>
           </div>
           <div class={style.buttonGroup}>
-            <button class={style.firstButton} onClick={this.onRotateClick}>
+            <button
+              class={style.firstButton}
+              onClick={this.onRotateClick}
+              title="Rotate"
+            >
               <RotateIcon />
             </button>
-            <button class={style.lastButton} onClick={this.toggleBackground}>
+            {!isSafari && (
+              <button
+                class={style.button}
+                onClick={this.toggleAliasing}
+                title="Toggle smoothing"
+              >
+                {aliasing ? (
+                  <ToggleAliasingActiveIcon />
+                ) : (
+                  <ToggleAliasingIcon />
+                )}
+              </button>
+            )}
+            <button
+              class={style.lastButton}
+              onClick={this.toggleBackground}
+              title="Toggle background"
+            >
               {altBackground ? (
                 <ToggleBackgroundActiveIcon />
               ) : (

src/client/lazy-app/Compress/Output/style.css

@@ -86,8 +86,7 @@
   font-size: 1.2rem;
   cursor: pointer;
 
-  &:focus {
-    /* box-shadow: 0 0 0 2px var(--hot-pink); */
+  &:focus-visible {
     box-shadow: 0 0 0 2px #fff;
     outline: none;
     z-index: 1;
@@ -161,3 +160,8 @@ input.zoom {
     pointer-events: auto;
   }
 }
+
+.pixelated {
+  image-rendering: crisp-edges;
+  image-rendering: pixelated;
+}

src/client/lazy-app/icons/index.tsx

@@ -11,6 +11,25 @@ const Icon = (props: preact.JSX.HTMLAttributes) => (
   />
 );
 
+export const ToggleAliasingIcon = (props: preact.JSX.HTMLAttributes) => (
+  <Icon {...props}>
+    <circle
+      cx="12"
+      cy="12"
+      r="8"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+    />
+  </Icon>
+);
+
+export const ToggleAliasingActiveIcon = (props: preact.JSX.HTMLAttributes) => (
+  <Icon {...props}>
+    <path d="M12 3h5v2h2v2h2v5h-2V9h-2V7h-2V5h-3V3M21 12v5h-2v2h-2v2h-5v-2h3v-2h2v-2h2v-3h2M12 21H7v-2H5v-2H3v-5h2v3h2v2h2v2h3v2M3 12V7h2V5h2V3h5v2H9v2H7v2H5v3H3" />
+  </Icon>
+);
+
 export const ToggleBackgroundIcon = (props: preact.JSX.HTMLAttributes) => (
   <Icon {...props}>
     <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.9 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h10a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z" />

src/client/lazy-app/util/index.ts

@@ -14,6 +14,11 @@
 import * as WebCodecs from '../util/web-codecs';
 import { drawableToImageData } from './canvas';
 
+/** If render engine is Safari */
+export const isSafari =
+  /Safari\//.test(navigator.userAgent) &&
+  !/Chrom(e|ium)\//.test(navigator.userAgent);
+
 /**
  * Compare two objects, returning a boolean indicating if
  * they have the same properties and strictly equal values.

src/client/missing-types.d.ts

@@ -19,9 +19,4 @@ interface Navigator {
 
 declare module 'add-css:*' {}
 
-declare module 'service-worker:*' {
-  const url: string;
-  export default url;
-}
-
 declare module 'preact/debug' {}

src/features/decoders/avif/worker/avifDecode.ts

@@ -11,7 +11,6 @@
  * limitations under the License.
  */
 import type { AVIFModule } from 'codecs/avif/dec/avif_dec';
-import wasmUrl from 'url:codecs/avif/dec/avif_dec.wasm';
 import { initEmscriptenModule, blobToArrayBuffer } from 'features/worker-utils';
 
 let emscriptenModule: Promise<AVIFModule>;
@@ -19,7 +18,7 @@ let emscriptenModule: Promise<AVIFModule>;
 export default async function decode(blob: Blob): Promise<ImageData> {
   if (!emscriptenModule) {
     const decoder = await import('codecs/avif/dec/avif_dec');
-    emscriptenModule = initEmscriptenModule(decoder.default, wasmUrl);
+    emscriptenModule = initEmscriptenModule(decoder.default);
   }
 
   const [module, data] = await Promise.all([

src/features/decoders/jxl/worker/jxlDecode.ts

@@ -11,14 +11,13 @@
  * limitations under the License.
  */
 import jxlDecoder, { JXLModule } from 'codecs/jxl/dec/jxl_dec';
-import wasmUrl from 'url:codecs/jxl/dec/jxl_dec.wasm';
 import { initEmscriptenModule, blobToArrayBuffer } from 'features/worker-utils';
 
 let emscriptenModule: Promise<JXLModule>;
 
 export default async function decode(blob: Blob): Promise<ImageData> {
   if (!emscriptenModule) {
-    emscriptenModule = initEmscriptenModule(jxlDecoder, wasmUrl);
+    emscriptenModule = initEmscriptenModule(jxlDecoder);
   }
 
   const [module, data] = await Promise.all([

src/features/decoders/webp/worker/webpDecode.ts

@@ -11,7 +11,6 @@
  * limitations under the License.
  */
 import type { WebPModule } from 'codecs/webp/dec/webp_dec';
-import wasmUrl from 'url:codecs/webp/dec/webp_dec.wasm';
 import { initEmscriptenModule, blobToArrayBuffer } from 'features/worker-utils';
 
 let emscriptenModule: Promise<WebPModule>;
@@ -19,7 +18,7 @@ let emscriptenModule: Promise<WebPModule>;
 export default async function decode(blob: Blob): Promise<ImageData> {
   if (!emscriptenModule) {
     const decoder = await import('codecs/webp/dec/webp_dec');
-    emscriptenModule = initEmscriptenModule(decoder.default, wasmUrl);
+    emscriptenModule = initEmscriptenModule(decoder.default);
   }
 
   const [module, data] = await Promise.all([

src/features/decoders/wp2/worker/wp2Decode.ts

@@ -11,14 +11,13 @@
  * limitations under the License.
  */
 import wp2Decoder, { WP2Module } from 'codecs/wp2/dec/wp2_dec';
-import wasmUrl from 'url:codecs/wp2/dec/wp2_dec.wasm';
 import { initEmscriptenModule, blobToArrayBuffer } from 'features/worker-utils';
 
 let emscriptenModule: Promise<WP2Module>;
 
 export default async function decode(blob: Blob): Promise<ImageData> {
   if (!emscriptenModule) {
-    emscriptenModule = initEmscriptenModule(wp2Decoder, wasmUrl);
+    emscriptenModule = initEmscriptenModule(wp2Decoder);
   }
 
   const [module, data] = await Promise.all([

src/features/encoders/avif/worker/avifEncode.ts

@@ -12,9 +12,6 @@
  */
 import type { AVIFModule } from 'codecs/avif/enc/avif_enc';
 import type { EncodeOptions } from '../shared/meta';
-import wasmUrlWithoutMT from 'url:codecs/avif/enc/avif_enc.wasm';
-import wasmUrlWithMT from 'url:codecs/avif/enc/avif_enc_mt.wasm';
-import workerUrl from 'omt:codecs/avif/enc/avif_enc_mt.worker.js';
 import { initEmscriptenModule } from 'features/worker-utils';
 import { threads } from 'wasm-feature-detect';
 
@@ -23,14 +20,10 @@ let emscriptenModule: Promise<AVIFModule>;
 async function init() {
   if (await threads()) {
     const avifEncoder = await import('codecs/avif/enc/avif_enc_mt');
-    return initEmscriptenModule<AVIFModule>(
-      avifEncoder.default,
-      wasmUrlWithMT,
-      workerUrl,
-    );
+    return initEmscriptenModule<AVIFModule>(avifEncoder.default);
   }
   const avifEncoder = await import('codecs/avif/enc/avif_enc.js');
-  return initEmscriptenModule(avifEncoder.default, wasmUrlWithoutMT);
+  return initEmscriptenModule(avifEncoder.default);
 }
 
 export default async function encode(

src/features/encoders/jxl/client/index.tsx

@@ -29,10 +29,9 @@ interface State {
   slightLoss: boolean;
   autoEdgePreservingFilter: boolean;
   decodingSpeedTier: number;
+  photonNoiseIso: number;
 }
 
-const maxSpeed = 7;
-
 export class Options extends Component<Props, State> {
   static getDerivedStateFromProps(
     props: Props,
@@ -47,7 +46,7 @@ export class Options extends Component<Props, State> {
     // Create default form state from options
     return {
       options,
-      effort: maxSpeed - options.speed,
+      effort: options.effort,
       quality: options.quality,
       progressive: options.progressive,
       edgePreservingFilter: options.epf === -1 ? 2 : options.epf,
@@ -55,6 +54,7 @@ export class Options extends Component<Props, State> {
       slightLoss: options.lossyPalette,
       autoEdgePreservingFilter: options.epf === -1,
       decodingSpeedTier: options.decodingSpeedTier,
+      photonNoiseIso: options.photonNoiseIso,
     };
   }
 
@@ -87,15 +87,15 @@ export class Options extends Component<Props, State> {
         };
 
         const newOptions: EncodeOptions = {
-          speed: maxSpeed - optionState.effort,
+          effort: optionState.effort,
           quality: optionState.lossless ? 100 : optionState.quality,
           progressive: optionState.progressive,
           epf: optionState.autoEdgePreservingFilter
             ? -1
             : optionState.edgePreservingFilter,
-          nearLossless: 0,
           lossyPalette: optionState.lossless ? optionState.slightLoss : false,
           decodingSpeedTier: optionState.decodingSpeedTier,
+          photonNoiseIso: optionState.photonNoiseIso,
         };
 
         // Updating options, so we don't recalculate in getDerivedStateFromProps.
@@ -121,6 +121,7 @@ export class Options extends Component<Props, State> {
       slightLoss,
       autoEdgePreservingFilter,
       decodingSpeedTier,
+      photonNoiseIso,
     }: State,
   ) {
     // I'm rendering both lossy and lossless forms, as it becomes much easier when
@@ -164,7 +165,6 @@ export class Options extends Component<Props, State> {
               <label class={style.optionToggle}>
                 Auto edge filter
                 <Checkbox
-                  name="autoEdgeFilter"
                   checked={autoEdgePreservingFilter}
                   onChange={this._inputChange(
                     'autoEdgePreservingFilter',
@@ -199,6 +199,17 @@ export class Options extends Component<Props, State> {
                   Optimise for decoding speed (worse compression):
                 </Range>
               </div>
+              <div class={style.optionOneCell}>
+                <Range
+                  min="0"
+                  max="50000"
+                  step="100"
+                  value={photonNoiseIso}
+                  onInput={this._inputChange('photonNoiseIso', 'number')}
+                >
+                  Noise equivalent to ISO:
+                </Range>
+              </div>
             </div>
           )}
         </Expander>
@@ -212,8 +223,8 @@ export class Options extends Component<Props, State> {
         </label>
         <div class={style.optionOneCell}>
           <Range
-            min="0"
-            max={maxSpeed - 1}
+            min="3"
+            max="9"
             value={effort}
             onInput={this._inputChange('effort', 'number')}
           >

src/features/encoders/jxl/shared/meta.ts

@@ -18,11 +18,11 @@ export const label = 'JPEG XL (beta)';
 export const mimeType = 'image/jxl';
 export const extension = 'jxl';
 export const defaultOptions: EncodeOptions = {
-  speed: 4,
+  effort: 7,
   quality: 75,
   progressive: false,
   epf: -1,
-  nearLossless: 0,
   lossyPalette: false,
   decodingSpeedTier: 0,
+  photonNoiseIso: 0,
 };

src/features/encoders/jxl/worker/jxlEncode.ts

@@ -16,31 +16,19 @@ import type { EncodeOptions } from '../shared/meta';
 import { initEmscriptenModule } from 'features/worker-utils';
 import { threads, simd } from 'wasm-feature-detect';
 
-import wasmUrl from 'url:codecs/jxl/enc/jxl_enc.wasm';
-
-import wasmUrlWithMT from 'url:codecs/jxl/enc/jxl_enc_mt.wasm';
-import workerUrl from 'omt:codecs/jxl/enc/jxl_enc_mt.worker.js';
-
-import wasmUrlWithMTAndSIMD from 'url:codecs/jxl/enc/jxl_enc_mt_simd.wasm';
-import workerUrlWithSIMD from 'omt:codecs/jxl/enc/jxl_enc_mt_simd.worker.js';
-
 let emscriptenModule: Promise<JXLModule>;
 
 async function init() {
   if (await threads()) {
     if (await simd()) {
       const jxlEncoder = await import('codecs/jxl/enc/jxl_enc_mt_simd');
-      return initEmscriptenModule(
-        jxlEncoder.default,
-        wasmUrlWithMTAndSIMD,
-        workerUrlWithSIMD,
-      );
+      return initEmscriptenModule(jxlEncoder.default);
     }
     const jxlEncoder = await import('codecs/jxl/enc/jxl_enc_mt');
-    return initEmscriptenModule(jxlEncoder.default, wasmUrlWithMT, workerUrl);
+    return initEmscriptenModule(jxlEncoder.default);
   }
   const jxlEncoder = await import('codecs/jxl/enc/jxl_enc');
-  return initEmscriptenModule(jxlEncoder.default, wasmUrl);
+  return initEmscriptenModule(jxlEncoder.default);
 }
 
 export default async function encode(

src/features/encoders/mozJPEG/worker/mozjpegEncode.ts

@@ -12,7 +12,6 @@
  */
 import mozjpeg_enc, { MozJPEGModule } from 'codecs/mozjpeg/enc/mozjpeg_enc';
 import { EncodeOptions } from '../shared/meta';
-import wasmUrl from 'url:codecs/mozjpeg/enc/mozjpeg_enc.wasm';
 import { initEmscriptenModule } from 'features/worker-utils';
 
 let emscriptenModule: Promise<MozJPEGModule>;
@@ -22,7 +21,7 @@ export default async function encode(
   options: EncodeOptions,
 ): Promise<ArrayBuffer> {
   if (!emscriptenModule) {
-    emscriptenModule = initEmscriptenModule(mozjpeg_enc, wasmUrl);
+    emscriptenModule = initEmscriptenModule(mozjpeg_enc);
   }
 
   const module = await emscriptenModule;

src/features/encoders/oxiPNG/worker/oxipngEncode.ts

@@ -10,30 +10,27 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import initOxiWasmST, {
-  optimise as optimiseST,
-} from 'codecs/oxipng/pkg/squoosh_oxipng';
-import initOxiWasmMT, {
-  initThreadPool,
-  optimise as optimiseMT,
-} from 'codecs/oxipng/pkg-parallel/squoosh_oxipng';
-import oxiWasmUrlST from 'url:codecs/oxipng/pkg/squoosh_oxipng_bg.wasm';
-import oxiWasmUrlMT from 'url:codecs/oxipng/pkg-parallel/squoosh_oxipng_bg.wasm';
 import { EncodeOptions } from '../shared/meta';
 import { threads } from 'wasm-feature-detect';
 
 async function initMT() {
-  await initOxiWasmMT(oxiWasmUrlMT);
+  const { default: init, initThreadPool, optimise } = await import(
+    'codecs/oxipng/pkg-parallel/squoosh_oxipng'
+  );
+  await init();
   await initThreadPool(navigator.hardwareConcurrency);
-  return optimiseMT;
+  return optimise;
 }
 
 async function initST() {
-  await initOxiWasmST(oxiWasmUrlST);
-  return optimiseST;
+  const { default: init, optimise } = await import(
+    'codecs/oxipng/pkg/squoosh_oxipng'
+  );
+  await init();
+  return optimise;
 }
 
-let wasmReady: Promise<typeof optimiseMT | typeof optimiseST>;
+let wasmReady: ReturnType<typeof initMT | typeof initST>;
 
 export default async function encode(
   data: ArrayBuffer,

src/features/encoders/webP/worker/webpEncode.ts

@@ -16,18 +16,15 @@ import type { EncodeOptions } from '../shared/meta';
 import { initEmscriptenModule } from 'features/worker-utils';
 import { simd } from 'wasm-feature-detect';
 
-import wasmUrl from 'url:codecs/webp/enc/webp_enc.wasm';
-import wasmUrlWithSIMD from 'url:codecs/webp/enc/webp_enc_simd.wasm';
-
 let emscriptenModule: Promise<WebPModule>;
 
 async function init() {
   if (await simd()) {
     const webpEncoder = await import('codecs/webp/enc/webp_enc_simd');
-    return initEmscriptenModule(webpEncoder.default, wasmUrlWithSIMD);
+    return initEmscriptenModule(webpEncoder.default);
   }
   const webpEncoder = await import('codecs/webp/enc/webp_enc');
-  return initEmscriptenModule(webpEncoder.default, wasmUrl);
+  return initEmscriptenModule(webpEncoder.default);
 }
 
 export default async function encode(

src/features/encoders/wp2/worker/wp2Encode.ts

@@ -16,31 +16,19 @@ import type { EncodeOptions } from '../shared/meta';
 import { initEmscriptenModule } from 'features/worker-utils';
 import { threads, simd } from 'wasm-feature-detect';
 
-import wasmUrl from 'url:codecs/wp2/enc/wp2_enc.wasm';
-
-import wasmUrlWithMT from 'url:codecs/wp2/enc/wp2_enc_mt.wasm';
-import workerUrl from 'omt:codecs/wp2/enc/wp2_enc_mt.worker.js';
-
-import wasmUrlWithMTAndSIMD from 'url:codecs/wp2/enc/wp2_enc_mt_simd.wasm';
-import workerUrlWithSIMD from 'omt:codecs/wp2/enc/wp2_enc_mt_simd.worker.js';
-
 let emscriptenModule: Promise<WP2Module>;
 
 async function init() {
   if (await threads()) {
     if (await simd()) {
       const wp2Encoder = await import('codecs/wp2/enc/wp2_enc_mt_simd');
-      return initEmscriptenModule(
-        wp2Encoder.default,
-        wasmUrlWithMTAndSIMD,
-        workerUrlWithSIMD,
-      );
+      return initEmscriptenModule(wp2Encoder.default);
     }
     const wp2Encoder = await import('codecs/wp2/enc/wp2_enc_mt');
-    return initEmscriptenModule(wp2Encoder.default, wasmUrlWithMT, workerUrl);
+    return initEmscriptenModule(wp2Encoder.default);
   }
   const wp2Encoder = await import('codecs/wp2/enc/wp2_enc');
-  return initEmscriptenModule(wp2Encoder.default, wasmUrl);
+  return initEmscriptenModule(wp2Encoder.default);
 }
 
 export default async function encode(

src/features/processors/quantize/worker/quantize.ts

@@ -11,7 +11,6 @@
  * limitations under the License.
  */
 import imagequant, { QuantizerModule } from 'codecs/imagequant/imagequant';
-import wasmUrl from 'url:codecs/imagequant/imagequant.wasm';
 import { initEmscriptenModule } from 'features/worker-utils';
 import { Options } from '../shared/meta';
 
@@ -22,7 +21,7 @@ export default async function process(
   opts: Options,
 ): Promise<ImageData> {
   if (!emscriptenModule) {
-    emscriptenModule = initEmscriptenModule(imagequant, wasmUrl);
+    emscriptenModule = initEmscriptenModule(imagequant);
   }
 
   const module = await emscriptenModule;