Testing lol

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;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}};
+"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}};

codecs/cpp.Dockerfile

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

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;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}};
+"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}};

codecs/mozjpeg/enc/mozjpeg_enc.cpp

@@ -158,11 +158,6 @@ 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;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}};
+"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}};

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;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}};
+"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}};

lib/client-bundle-plugin.js

@@ -20,7 +20,6 @@ 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);
@@ -28,24 +27,11 @@ 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];
 }
 
@@ -153,9 +139,9 @@ export default function (inputOptions, outputOptions, resolveFileUrl) {
       if (property.startsWith(allSrcPlaceholder)) {
         const allModules = [
           clientEntry,
-          ...dependencies
+          ...dependencies.map((name) =>
-            .map((name) => clientOutput.find((item) => item.fileName === name))
+            clientOutput.find((item) => item.fileName === name),
-            .filter((item) => item.code),
+          ),
         ];
 
         const inlineDefines = [

lib/entry-data-plugin.js

@@ -17,14 +17,10 @@ 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 {number} */
+  /** @type {string} */
   let exportCounter;
   /** @type {Map<number, string>} */
   let counterToIdMap;
@@ -73,11 +69,15 @@ export default function entryDataPlugin() {
             if (!chunk) throw Error(`Cannot find ${id}`);
 
             if (placeholder === mainNamePlaceholder) {
-              return JSON.stringify(fileNameToURL(chunk.fileName));
+              return JSON.stringify(
+                chunk.fileName.slice(filenamePrefix.length),
+              );
             }
 
             return JSON.stringify(
-              getDependencies(chunks, chunk).map((filename) => fileNameToURL(filename)),
+              getDependencies(chunks, chunk).map((item) =>
+                item.slice(filenamePrefix.length),
+              ),
             );
           },
         );

libsquoosh/package.json

@@ -8,8 +8,7 @@
     "/build/*"
   ],
   "scripts": {
-    "build": "rollup -c",
+    "build": "rollup -c"
-    "test": "uvu -r ts-node/register test"
   },
   "keywords": [],
   "author": "Google Chrome Developers <chromium-dev@google.com>",
@@ -35,9 +34,7 @@
     "@types/node": "^15.6.1",
     "rollup": "^2.46.0",
     "rollup-plugin-terser": "^7.0.2",
-    "ts-node": "^10.2.1",
     "typescript": "^4.1.3",
-    "uvu": "^0.5.1",
     "which": "^2.0.2"
   }
 }

libsquoosh/rollup.config.js

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

libsquoosh/src/codecs.ts

@@ -9,12 +9,6 @@ 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;
@@ -39,7 +33,7 @@ interface ResizeInstantiateOptions {
 
 declare global {
   // Needed for being able to use ImageData as type in codec types
-  type ImageData = import('./image_data.js').default;
+  type ImageData = typeof import('./image_data.js');
   // Needed for being able to assign to `globalThis.ImageData`
   var ImageData: ImageData['constructor'];
 }
@@ -47,21 +41,18 @@ 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';
 
 // 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';
 
 // 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';
@@ -71,14 +62,12 @@ import avifDec from '../../codecs/avif/dec/avif_node_dec.js';
 import avifDecWasm from 'asset-url:../../codecs/avif/dec/avif_node_dec.wasm';
 
 // 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';
 
 // 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';
@@ -268,20 +257,15 @@ export const preprocessors = {
       numRotations: 0,
     },
   },
-} as const;
+};
 
 export const codecs = {
   mozjpeg: {
     name: 'MozJPEG',
     extension: 'jpg',
     detectors: [/^\xFF\xD8\xFF/],
-    dec: () =>
+    dec: () => instantiateEmscriptenWasm(mozDec, mozDecWasm),
-      instantiateEmscriptenWasm(mozDec as DecodeModuleFactory, mozDecWasm),
+    enc: () => instantiateEmscriptenWasm(mozEnc, mozEncWasm),
-    enc: () =>
-      instantiateEmscriptenWasm(
-        mozEnc as EmscriptenWasm.ModuleFactory<MozJPEGEncodeModule>,
-        mozEncWasm,
-      ),
     defaultEncoderOptions: {
       quality: 75,
       baseline: false,
@@ -310,13 +294,8 @@ export const codecs = {
     name: 'WebP',
     extension: 'webp',
     detectors: [/^RIFF....WEBPVP8[LX ]/s],
-    dec: () =>
+    dec: () => instantiateEmscriptenWasm(webpDec, webpDecWasm),
-      instantiateEmscriptenWasm(webpDec as DecodeModuleFactory, webpDecWasm),
+    enc: () => instantiateEmscriptenWasm(webpEnc, webpEncWasm),
-    enc: () =>
-      instantiateEmscriptenWasm(
-        webpEnc as EmscriptenWasm.ModuleFactory<WebPEncodeModule>,
-        webpEncWasm,
-      ),
     defaultEncoderOptions: {
       quality: 75,
       target_size: 0,
@@ -356,20 +335,16 @@ export const codecs = {
     name: 'AVIF',
     extension: 'avif',
     detectors: [/^\x00\x00\x00 ftypavif\x00\x00\x00\x00/],
-    dec: () =>
+    dec: () => instantiateEmscriptenWasm(avifDec, avifDecWasm),
-      instantiateEmscriptenWasm(avifDec as DecodeModuleFactory, avifDecWasm),
     enc: async () => {
       if (await threads()) {
         return instantiateEmscriptenWasm(
-          avifEncMt as EmscriptenWasm.ModuleFactory<AVIFEncodeModule>,
+          avifEncMt,
           avifEncMtWasm,
           avifEncMtWorker,
         );
       }
-      return instantiateEmscriptenWasm(
+      return instantiateEmscriptenWasm(avifEnc, avifEncWasm);
-        avifEnc as EmscriptenWasm.ModuleFactory<AVIFEncodeModule>,
-        avifEncWasm,
-      );
     },
     defaultEncoderOptions: {
       cqLevel: 33,
@@ -393,13 +368,8 @@ export const codecs = {
     name: 'JPEG-XL',
     extension: 'jxl',
     detectors: [/^\xff\x0a/],
-    dec: () =>
+    dec: () => instantiateEmscriptenWasm(jxlDec, jxlDecWasm),
-      instantiateEmscriptenWasm(jxlDec as DecodeModuleFactory, jxlDecWasm),
+    enc: () => instantiateEmscriptenWasm(jxlEnc, jxlEncWasm),
-    enc: () =>
-      instantiateEmscriptenWasm(
-        jxlEnc as EmscriptenWasm.ModuleFactory<JXLEncodeModule>,
-        jxlEncWasm,
-      ),
     defaultEncoderOptions: {
       speed: 4,
       quality: 75,
@@ -419,13 +389,8 @@ export const codecs = {
     name: 'WebP2',
     extension: 'wp2',
     detectors: [/^\xF4\xFF\x6F/],
-    dec: () =>
+    dec: () => instantiateEmscriptenWasm(wp2Dec, wp2DecWasm),
-      instantiateEmscriptenWasm(wp2Dec as DecodeModuleFactory, wp2DecWasm),
+    enc: () => instantiateEmscriptenWasm(wp2Enc, wp2EncWasm),
-    enc: () =>
-      instantiateEmscriptenWasm(
-        wp2Enc as EmscriptenWasm.ModuleFactory<WP2EncodeModule>,
-        wp2EncWasm,
-      ),
     defaultEncoderOptions: {
       quality: 75,
       alpha_quality: 75,
@@ -456,7 +421,7 @@ export const codecs = {
       await oxipngPromise;
       return {
         encode: (
-          buffer: Uint8ClampedArray | ArrayBuffer,
+          buffer: Uint8Array,
           width: number,
           height: number,
           opts: { level: number },
@@ -479,4 +444,4 @@ export const codecs = {
       max: 1,
     },
   },
-} as const;
+};

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 pathify(workerJS);
+      if (requestPath.endsWith('.worker.js')) return new URL(workerJS).pathname;
       return requestPath;
     },
   });

libsquoosh/src/index.js

@@ -5,18 +5,10 @@ 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';
-import type ImageData from './image_data';
 
 export { ImagePool, encoders, preprocessors };
-type EncoderKey = keyof typeof encoders;
-type PreprocessorKey = keyof typeof preprocessors;
-type FileLike = Buffer | ArrayBuffer | string | ArrayBufferView;
 
-async function decodeFile({
+async function decodeFile({ file }) {
-  file,
-}: {
-  file: FileLike;
-}): Promise<{ bitmap: ImageData; size: number }> {
   let buffer;
   if (ArrayBuffer.isView(file)) {
     buffer = Buffer.from(file.buffer);
@@ -24,9 +16,8 @@ async function decodeFile({
   } else if (file instanceof ArrayBuffer) {
     buffer = Buffer.from(file);
     file = 'Binary blob';
-  } else if ((file as unknown) instanceof Buffer) {
+  } else if (file instanceof Buffer) {
-    // TODO: Check why we need type assertions here.
+    buffer = file;
-    buffer = (file as unknown) as Buffer;
     file = 'Binary blob';
   } else if (typeof file === 'string') {
     buffer = await fsp.readFile(file);
@@ -37,33 +28,23 @@ async function decodeFile({
   const firstChunkString = Array.from(firstChunk)
     .map((v) => String.fromCodePoint(v))
     .join('');
-  const key = Object.entries(encoders).find(([_name, { detectors }]) =>
+  const key = Object.entries(encoders).find(([name, { detectors }]) =>
     detectors.some((detector) => detector.exec(firstChunkString)),
-  )?.[0] as EncoderKey | undefined;
+  )?.[0];
   if (!key) {
     throw Error(`${file} has an unsupported format`);
   }
-  const encoder = encoders[key];
+  const rgba = (await encoders[key].dec()).decode(new Uint8Array(buffer));
-  const mod = await encoder.dec();
-  const rgba = mod.decode(new Uint8Array(buffer));
   return {
     bitmap: rgba,
     size: buffer.length,
   };
 }
 
-async function preprocessImage({
+async function preprocessImage({ preprocessorName, options, image }) {
-  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.data,
     image.bitmap.width,
     image.bitmap.height,
     options,
@@ -77,39 +58,26 @@ async function encodeImage({
   encConfig,
   optimizerButteraugliTarget,
   maxOptimizerRounds,
-}: {
-  bitmap: ImageData;
-  encName: EncoderKey;
-  encConfig: any;
-  optimizerButteraugliTarget: number;
-  maxOptimizerRounds: number;
 }) {
-  let binary: Uint8Array;
+  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: ImageData, quality: number) =>
+    const encode = (bitmapIn, quality) =>
       encoder.encode(
         bitmapIn.data,
         bitmapIn.width,
         bitmapIn.height,
-        Object.assign({}, encoders[encName].defaultEncoderOptions as any, {
+        Object.assign({}, encoders[encName].defaultEncoderOptions, {
           [optionToOptimize]: quality,
         }),
       );
-    const decode = (binary: Uint8Array) => decoder.decode(binary);
+    const decode = (binary) => 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,
+      encode,
       decode,
       {
         min: encoders[encName].autoOptimize.min,
@@ -124,18 +92,12 @@ async function encodeImage({
       [optionToOptimize]: Math.round(quality * 10000) / 10000,
     };
   } else {
-    const result = encoder.encode(
+    binary = 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,
@@ -145,15 +107,10 @@ async function encodeImage({
   };
 }
 
-type EncodeParams = { operation: 'encode' } & Parameters<typeof encodeImage>[0];
+// both decoding and encoding go through the worker pool
-type DecodeParams = { operation: 'decode' } & Parameters<typeof decodeFile>[0];
+function handleJob(params) {
-type PreprocessParams = { operation: 'preprocess' } & Parameters<
+  const { operation } = params;
-  typeof preprocessImage
+  switch (operation) {
->[0];
-type JobMessage = EncodeParams | DecodeParams | PreprocessParams;
-
-function handleJob(params: JobMessage) {
-  switch (params.operation) {
     case 'encode':
       return encodeImage(params);
     case 'decode':
@@ -161,7 +118,7 @@ function handleJob(params: JobMessage) {
     case 'preprocess':
       return preprocessImage(params);
     default:
-      throw Error(`Invalid job "${(params as any).operation}"`);
+      throw Error(`Invalid job "${operation}"`);
   }
 }
 
@@ -169,12 +126,7 @@ function handleJob(params: JobMessage) {
  * Represents an ingested image.
  */
 class Image {
-  public file: FileLike;
+  constructor(workerPool, file) {
-  public workerPool: WorkerPool<JobMessage, any>;
-  public decoded: Promise<{ bitmap: ImageData }>;
-  public encodedWith: { [key: string]: any };
-
-  constructor(workerPool: WorkerPool<JobMessage, any>, file: FileLike) {
     this.file = file;
     this.workerPool = workerPool;
     this.decoded = workerPool.dispatchJob({ operation: 'decode', file });
@@ -191,15 +143,14 @@ class Image {
       if (!Object.keys(preprocessors).includes(name)) {
         throw Error(`Invalid preprocessor "${name}"`);
       }
-      const preprocessorName = name as PreprocessorKey;
       const preprocessorOptions = Object.assign(
         {},
-        preprocessors[preprocessorName].defaultOptions,
+        preprocessors[name].defaultOptions,
         options,
       );
       this.decoded = this.workerPool.dispatchJob({
         operation: 'preprocess',
-        preprocessorName,
+        preprocessorName: name,
         image: await this.decoded,
         options: preprocessorOptions,
       });
@@ -210,22 +161,14 @@ class Image {
   /**
    * Define one or several encoders to use on the image.
    * @param {object} encodeOptions - An object with encoders to use, and their settings.
-   * @returns {Promise<void>} - A promise that resolves when the image has been encoded with all the specified encoders.
+   * @returns {Promise<undefined>} - A promise that resolves when the image has been encoded with all the specified encoders.
    */
-  async encode(
+  async encode(encodeOptions = {}) {
-    encodeOptions: {
-      optimizerButteraugliTarget?: number;
-      maxOptimizerRounds?: number;
-    } & {
-      [key in EncoderKey]?: any; // any is okay for now
-    } = {},
-  ): Promise<void> {
     const { bitmap } = await this.decoded;
-    for (const [name, options] of Object.entries(encodeOptions)) {
+    for (const [encName, options] of Object.entries(encodeOptions)) {
-      if (!Object.keys(encoders).includes(name)) {
+      if (!Object.keys(encoders).includes(encName)) {
         continue;
       }
-      const encName = name as EncoderKey;
       const encRef = encoders[encName];
       const encConfig =
         typeof options === 'string'
@@ -250,30 +193,28 @@ class Image {
  * 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. Defaults to the number of CPU cores in the system.
    */
-  constructor(threads: number) {
+  constructor(threads) {
     this.workerPool = new WorkerPool(threads || cpus().length, __filename);
   }
 
   /**
    * Ingest an image into the image pool.
-   * @param {FileLike} image - The image or path to the image that should be ingested and decoded.
+   * @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: FileLike): 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<void>} - A promise that resolves when the underlying pipeline has closed.
+   * @returns {Promise<undefined>} - A promise that resolves when the underlying pipeline has closed.
    */
-  async close(): Promise<void> {
+  async close() {
     await this.workerPool.join();
   }
 }

libsquoosh/src/worker_pool.js

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

libsquoosh/test/index.test.ts

@@ -1,43 +0,0 @@
-import * as path from 'path';
-import { test } from 'uvu';
-import * as assert from 'uvu/assert';
-import { ImagePool } from '..';
-
-let imagePool: ImagePool;
-
-test.after.each(async () => {
-  if (imagePool) {
-    try {
-      await imagePool.close();
-    } catch (e) {}
-  }
-  imagePool = undefined;
-});
-
-test('smoke test', async () => {
-  imagePool = new ImagePool(1);
-
-  const imagePath = path.resolve(__dirname, '../../icon-large-maskable.png');
-  const image = imagePool.ingestImage(imagePath);
-
-  const { bitmap } = await image.decoded;
-  assert.equal(bitmap.width, 1024);
-
-  await image.preprocess({
-    resize: {
-      enabled: true,
-      width: 100,
-    },
-  });
-
-  await image.encode({
-    mozjpeg: {},
-  });
-
-  const { size } = await image.encodedWith.mozjpeg;
-  // resulting image is 1554b
-  assert.ok(size > 500);
-  assert.ok(size < 5000);
-});
-
-test.run();

libsquoosh/tsconfig.json

@@ -5,12 +5,5 @@
     "types": ["node"],
     "allowJs": true
   },
-  "include": ["src/**/*", "../codecs/**/*"],
+  "include": ["src/**/*", "../codecs/**/*"]
-  "ts-node": {
-    "transpileOnly": true,
-    "compilerOptions": {
-      "module": "commonjs"
-    },
-    "include": ["tests/**/*"]
-  }
 }

missing-types.d.ts

@@ -44,11 +44,6 @@ declare module 'data-url:*' {
   export default url;
 }
 
-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.5.3",
+        "pointer-tracker": "^2.4.0",
         "postcss": "^7.0.35",
         "postcss-modules": "^3.2.2",
         "postcss-nested": "^4.2.3",
@@ -48,20 +48,6 @@
         "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",
@@ -3885,9 +3871,9 @@
       }
     },
     "node_modules/pointer-tracker": {
-      "version": "2.5.3",
+      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/pointer-tracker/-/pointer-tracker-2.5.3.tgz",
+      "resolved": "https://registry.npmjs.org/pointer-tracker/-/pointer-tracker-2.4.0.tgz",
-      "integrity": "sha512-LiJUeIbzk4dXq678YeyrZ++mdY17q4n/2sBHfU9wIuvmSzdiPgMvmvWN2g8mY4J7YwYOIrqrZUWP/MfFHVwYtg==",
+      "integrity": "sha512-pWI2tpaM/XNtc9mUTv42Rmjf6mkHvE8LT5DDEq0G7baPNhxNM9E3CepubPplSoSLk9E5bwQrAMyDcPVmJyTW4g==",
       "dev": true
     },
     "node_modules/postcss": {
@@ -8990,9 +8976,9 @@
       }
     },
     "@surma/rollup-plugin-off-main-thread": {
-      "version": "2.2.2",
+      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.1.tgz",
-      "integrity": "sha512-dOD6nGZ79RmWKDRQuC7SOGXMvDkkLwBogu+epfVFMKiy2kOUtLZkb8wV/ettuMt37YJAJKYCKUmxSbZL2LkUQg==",
+      "integrity": "sha512-7OU8wfyv18YPWVmecg2/0Jh+pm3lQbvPhIWHd1YQpoxPKPW/vsDNGBaCnMKsZbz29RjgCoXKugAjyagPncgdEw==",
       "dev": true,
       "requires": {
         "ejs": "^3.1.6",
@@ -11960,9 +11946,9 @@
       }
     },
     "pointer-tracker": {
-      "version": "2.5.3",
+      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/pointer-tracker/-/pointer-tracker-2.5.3.tgz",
+      "resolved": "https://registry.npmjs.org/pointer-tracker/-/pointer-tracker-2.4.0.tgz",
-      "integrity": "sha512-LiJUeIbzk4dXq678YeyrZ++mdY17q4n/2sBHfU9wIuvmSzdiPgMvmvWN2g8mY4J7YwYOIrqrZUWP/MfFHVwYtg==",
+      "integrity": "sha512-pWI2tpaM/XNtc9mUTv42Rmjf6mkHvE8LT5DDEq0G7baPNhxNM9E3CepubPplSoSLk9E5bwQrAMyDcPVmJyTW4g==",
       "dev": true
     },
     "postcss": {
@@ -15994,9 +15980,9 @@
       "dev": true
     },
     "wasm-feature-detect": {
-      "version": "1.2.11",
+      "version": "1.2.9",
-      "resolved": "https://registry.npmjs.org/wasm-feature-detect/-/wasm-feature-detect-1.2.11.tgz",
+      "resolved": "https://registry.npmjs.org/wasm-feature-detect/-/wasm-feature-detect-1.2.9.tgz",
-      "integrity": "sha512-HUqwaodrQGaZgz1lZaNioIkog9tkeEJjrM3eq4aUL04whXOVDRc/o2EGb/8kV0QX411iAYWEqq7fMBmJ6dKS6w=="
+      "integrity": "sha512-2E9/gtLVLpv2wnZDyYv8WY2dR9gHbmyv5uhZsnOcMSzqc78aGZpKQORPNcnrPwAU23nFUo7GAwKuoTAWRgsJ7Q=="
     },
     "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.2",
+    "@surma/rollup-plugin-off-main-thread": "^2.2.1",
     "@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.5.3",
+    "pointer-tracker": "^2.4.0",
     "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.11"
+    "wasm-feature-detect": "^1.2.9"
   }
 }

rollup.config.js

@@ -18,7 +18,6 @@ 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';
@@ -32,11 +31,11 @@ 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 entryDataPlugin, { fileNameToURL } from './lib/entry-data-plugin';
 import dedent from 'dedent';
+import entryDataPlugin from './lib/entry-data-plugin';
 
 function resolveFileUrl({ fileName }) {
-  return JSON.stringify(fileNameToURL(fileName));
+  return JSON.stringify(fileName.replace(/^static\//, '/'));
 }
 
 function resolveImportMetaUrlInStaticBuild(property, { moduleId }) {
@@ -71,7 +70,7 @@ export default async function ({ watch }) {
 
   await del('.tmp/build');
 
-  const isProduction = !watch;
+  const isProduction = !watch && !process.env.DEBUG;
 
   const tsPluginInstance = simpleTS('.', {
     watch,
@@ -119,7 +118,6 @@ export default async function ({ watch }) {
           plugins: [
             { resolveFileUrl },
             OMT({ loader: await omtLoaderPromise }),
-            importMetaAssets(),
             serviceWorkerPlugin({
               output: 'static/serviceworker.js',
             }),

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

@@ -20,7 +20,7 @@ const REFLECTED_ATTRIBUTES = [
   'disabled',
 ];
 
-function getPrecision(value: string): number {
+function getPrescision(value: string): number {
   const afterDecimal = value.split('.')[1];
   return afterDecimal ? afterDecimal.length : 0;
 }
@@ -112,24 +112,18 @@ 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 = this._getDisplayValue(value);
+    const displayValue = labelPrecision
+      ? value.toFixed(labelPrecision)
+      : Math.round(value).toString();
 
     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: 54px;
+  width: 48px;
   position: relative;
   left: 5px;
 

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

@@ -1,7 +1,6 @@
 .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,6 +1,5 @@
 import PointerTracker, { Pointer } from 'pointer-tracker';
 import 'add-css:./styles.css';
-import { isSafari } from 'client/lazy-app/util';
 
 interface Point {
   clientX: number;
@@ -82,7 +81,6 @@ function createPoint(): SVGPoint {
 }
 
 const MIN_SCALE = 0.01;
-const MAX_SCALE = 100000;
 
 export default class PinchZoom extends HTMLElement {
   // The element that we'll transform.
@@ -106,23 +104,14 @@ 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 (
+        if (pointerTracker.currentPointers.length === 2 || !this._positioningEl)
-          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));
@@ -255,9 +244,6 @@ 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;
 
@@ -310,13 +296,9 @@ 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;
-    // when zooming out, invert the delta and the ratio to keep zoom stable
+    const scaleDiff = 1 - deltaY / divisor;
-    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,10 +5,8 @@ import './custom-els/PinchZoom';
 import './custom-els/TwoUp';
 import * as style from './style.css';
 import 'add-css:./style.css';
-import { shallowEqual, isSafari } from '../../util';
+import { shallowEqual } from '../../util';
 import {
-  ToggleAliasingIcon,
-  ToggleAliasingActiveIcon,
   ToggleBackgroundIcon,
   AddIcon,
   RemoveIcon,
@@ -21,6 +19,7 @@ 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;
@@ -36,7 +35,6 @@ interface State {
   scale: number;
   editingScale: boolean;
   altBackground: boolean;
-  aliasing: boolean;
 }
 
 const scaleToOpts: ScaleToOpts = {
@@ -51,7 +49,6 @@ export default class Output extends Component<Props, State> {
     scale: 1,
     editingScale: false,
     altBackground: false,
-    aliasing: false,
   };
   canvasLeft?: HTMLCanvasElement;
   canvasRight?: HTMLCanvasElement;
@@ -148,12 +145,6 @@ 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,
@@ -264,7 +255,7 @@ export default class Output extends Component<Props, State> {
 
   render(
     { mobileView, leftImgContain, rightImgContain, source }: Props,
-    { scale, editingScale, altBackground, aliasing }: State,
+    { scale, editingScale, altBackground }: State,
   ) {
     const leftDraw = this.leftDrawable();
     const rightDraw = this.rightDrawable();
@@ -284,11 +275,7 @@ export default class Output extends Component<Props, State> {
             onTouchStartCapture={this.onRetargetableEvent}
             onTouchEndCapture={this.onRetargetableEvent}
             onTouchMoveCapture={this.onRetargetableEvent}
-            onPointerDownCapture={
+            onPointerDownCapture={this.onRetargetableEvent}
-              // 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}
           >
@@ -298,9 +285,7 @@ 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}
@@ -316,9 +301,7 @@ 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}
@@ -362,31 +345,10 @@ export default class Output extends Component<Props, State> {
             </button>
           </div>
           <div class={style.buttonGroup}>
-            <button
+            <button class={style.firstButton} onClick={this.onRotateClick}>
-              class={style.firstButton}
-              onClick={this.onRotateClick}
-              title="Rotate"
-            >
               <RotateIcon />
             </button>
-            {!isSafari && (
+            <button class={style.lastButton} onClick={this.toggleBackground}>
-              <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,7 +86,8 @@
   font-size: 1.2rem;
   cursor: pointer;
 
-  &:focus-visible {
+  &:focus {
+    /* box-shadow: 0 0 0 2px var(--hot-pink); */
     box-shadow: 0 0 0 2px #fff;
     outline: none;
     z-index: 1;
@@ -160,8 +161,3 @@ input.zoom {
     pointer-events: auto;
   }
 }
-
-.pixelated {
-  image-rendering: crisp-edges;
-  image-rendering: pixelated;
-}

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

@@ -11,25 +11,6 @@ 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,11 +14,6 @@
 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,4 +19,9 @@ 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,6 +11,7 @@
  * 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>;
@@ -18,7 +19,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);
+    emscriptenModule = initEmscriptenModule(decoder.default, wasmUrl);
   }
 
   const [module, data] = await Promise.all([

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

@@ -11,13 +11,14 @@
  * 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);
+    emscriptenModule = initEmscriptenModule(jxlDecoder, wasmUrl);
   }
 
   const [module, data] = await Promise.all([

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

@@ -11,6 +11,7 @@
  * 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>;
@@ -18,7 +19,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);
+    emscriptenModule = initEmscriptenModule(decoder.default, wasmUrl);
   }
 
   const [module, data] = await Promise.all([

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

@@ -11,13 +11,14 @@
  * 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);
+    emscriptenModule = initEmscriptenModule(wp2Decoder, wasmUrl);
   }
 
   const [module, data] = await Promise.all([

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

@@ -12,6 +12,9 @@
  */
 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';
 
@@ -20,10 +23,14 @@ 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);
+    return initEmscriptenModule<AVIFModule>(
+      avifEncoder.default,
+      wasmUrlWithMT,
+      workerUrl,
+    );
   }
   const avifEncoder = await import('codecs/avif/enc/avif_enc.js');
-  return initEmscriptenModule(avifEncoder.default);
+  return initEmscriptenModule(avifEncoder.default, wasmUrlWithoutMT);
 }
 
 export default async function encode(

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

@@ -29,9 +29,10 @@ interface State {
   slightLoss: boolean;
   autoEdgePreservingFilter: boolean;
   decodingSpeedTier: number;
-  photonNoiseIso: number;
 }
 
+const maxSpeed = 7;
+
 export class Options extends Component<Props, State> {
   static getDerivedStateFromProps(
     props: Props,
@@ -46,7 +47,7 @@ export class Options extends Component<Props, State> {
     // Create default form state from options
     return {
       options,
-      effort: options.effort,
+      effort: maxSpeed - options.speed,
       quality: options.quality,
       progressive: options.progressive,
       edgePreservingFilter: options.epf === -1 ? 2 : options.epf,
@@ -54,7 +55,6 @@ 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 = {
-          effort: optionState.effort,
+          speed: maxSpeed - 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,7 +121,6 @@ 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
@@ -165,6 +164,7 @@ export class Options extends Component<Props, State> {
               <label class={style.optionToggle}>
                 Auto edge filter
                 <Checkbox
+                  name="autoEdgeFilter"
                   checked={autoEdgePreservingFilter}
                   onChange={this._inputChange(
                     'autoEdgePreservingFilter',
@@ -199,17 +199,6 @@ 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>
@@ -223,8 +212,8 @@ export class Options extends Component<Props, State> {
         </label>
         <div class={style.optionOneCell}>
           <Range
-            min="3"
+            min="0"
-            max="9"
+            max={maxSpeed - 1}
             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 = {
-  effort: 7,
+  speed: 4,
   quality: 75,
   progressive: false,
   epf: -1,
+  nearLossless: 0,
   lossyPalette: false,
   decodingSpeedTier: 0,
-  photonNoiseIso: 0,
 };

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

@@ -16,19 +16,31 @@ 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);
+      return initEmscriptenModule(
+        jxlEncoder.default,
+        wasmUrlWithMTAndSIMD,
+        workerUrlWithSIMD,
+      );
     }
     const jxlEncoder = await import('codecs/jxl/enc/jxl_enc_mt');
-    return initEmscriptenModule(jxlEncoder.default);
+    return initEmscriptenModule(jxlEncoder.default, wasmUrlWithMT, workerUrl);
   }
   const jxlEncoder = await import('codecs/jxl/enc/jxl_enc');
-  return initEmscriptenModule(jxlEncoder.default);
+  return initEmscriptenModule(jxlEncoder.default, wasmUrl);
 }
 
 export default async function encode(

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

@@ -12,6 +12,7 @@
  */
 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>;
@@ -21,7 +22,7 @@ export default async function encode(
   options: EncodeOptions,
 ): Promise<ArrayBuffer> {
   if (!emscriptenModule) {
-    emscriptenModule = initEmscriptenModule(mozjpeg_enc);
+    emscriptenModule = initEmscriptenModule(mozjpeg_enc, wasmUrl);
   }
 
   const module = await emscriptenModule;

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

@@ -10,27 +10,30 @@
  * 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() {
-  const { default: init, initThreadPool, optimise } = await import(
+  await initOxiWasmMT(oxiWasmUrlMT);
-    'codecs/oxipng/pkg-parallel/squoosh_oxipng'
-  );
-  await init();
   await initThreadPool(navigator.hardwareConcurrency);
-  return optimise;
+  return optimiseMT;
 }
 
 async function initST() {
-  const { default: init, optimise } = await import(
+  await initOxiWasmST(oxiWasmUrlST);
-    'codecs/oxipng/pkg/squoosh_oxipng'
+  return optimiseST;
-  );
-  await init();
-  return optimise;
 }
 
-let wasmReady: ReturnType<typeof initMT | typeof initST>;
+let wasmReady: Promise<typeof optimiseMT | typeof optimiseST>;
 
 export default async function encode(
   data: ArrayBuffer,

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

@@ -16,15 +16,18 @@ 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);
+    return initEmscriptenModule(webpEncoder.default, wasmUrlWithSIMD);
   }
   const webpEncoder = await import('codecs/webp/enc/webp_enc');
-  return initEmscriptenModule(webpEncoder.default);
+  return initEmscriptenModule(webpEncoder.default, wasmUrl);
 }
 
 export default async function encode(

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

@@ -16,19 +16,31 @@ 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);
+      return initEmscriptenModule(
+        wp2Encoder.default,
+        wasmUrlWithMTAndSIMD,
+        workerUrlWithSIMD,
+      );
     }
     const wp2Encoder = await import('codecs/wp2/enc/wp2_enc_mt');
-    return initEmscriptenModule(wp2Encoder.default);
+    return initEmscriptenModule(wp2Encoder.default, wasmUrlWithMT, workerUrl);
   }
   const wp2Encoder = await import('codecs/wp2/enc/wp2_enc');
-  return initEmscriptenModule(wp2Encoder.default);
+  return initEmscriptenModule(wp2Encoder.default, wasmUrl);
 }
 
 export default async function encode(

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

@@ -11,6 +11,7 @@
  * 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';
 
@@ -21,7 +22,7 @@ export default async function process(
   opts: Options,
 ): Promise<ImageData> {
   if (!emscriptenModule) {
-    emscriptenModule = initEmscriptenModule(imagequant);
+    emscriptenModule = initEmscriptenModule(imagequant, wasmUrl);
   }
 
   const module = await emscriptenModule;

src/features/processors/resize/worker/resize.ts

@@ -1,6 +1,8 @@
 import type { WorkerResizeOptions } from '../shared/meta';
 import { getContainOffsets } from '../shared/util';
 import initResizeWasm, { resize as wasmResize } from 'codecs/resize/pkg';
+import resizeWasmUrl from 'url:codecs/resize/pkg/squoosh_resize_bg.wasm';
+import hqxWasmUrl from 'url:codecs/hqx/pkg/squooshhqx_bg.wasm';
 import initHqxWasm, { resize as wasmHqx } from 'codecs/hqx/pkg';
 
 interface HqxResizeOptions extends WorkerResizeOptions {
@@ -61,7 +63,7 @@ async function hqx(
   opts: HqxResizeOptions,
 ): Promise<ImageData> {
   if (!hqxWasmReady) {
-    hqxWasmReady = initHqxWasm();
+    hqxWasmReady = initHqxWasm(hqxWasmUrl);
   }
 
   await hqxWasmReady;
@@ -94,7 +96,7 @@ export default async function resize(
   let input = data;
 
   if (!resizeWasmReady) {
-    resizeWasmReady = initResizeWasm();
+    resizeWasmReady = initResizeWasm(resizeWasmUrl);
   }
 
   if (optsIsHqxOpts(opts)) {

src/features/worker-utils/index.ts

@@ -10,12 +10,38 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export function initEmscriptenModule<T extends EmscriptenWasm.Module>(
+
+// @ts-ignore
+self.asm = ''; // lol
+// @ts-ignore
+self.UTF32ToString = (...v) => console.log("u322s", v); //v => [...new Uint32Array(v)].map(v => String.fromCharCode(v)).join("")
+// @ts-ignore
+self.stringToUTF32 = (...v) => console.log("s2u32", v); //v => [...new Uint32Array(v)].map(v => String.fromCharCode(v)).join("")
+// @ts-ignore
+self.lengthBytesUTF32 = (...v) => console.log("lb32", v); //v => [...new Uint32Array(v)].map(v => String.fromCharCode(v)).join("")
+// @ts-ignore
+self.UTF16ToString = (...v) => console.log("u162s", v); //v => [...new Uint32Array(v)].map(v => String.fromCharCode(v)).join("")
+// @ts-ignore
+self.stringToUTF16 = (...v) => console.log("s2u16", v); //v => [...new Uint32Array(v)].map(v => String.fromCharCode(v)).join("")
+// @ts-ignore
+self.lengthBytesUTF16 = (...v) => console.log("lb16", v); //v => [...new Uint32Array(v)].map(v => String.fromCharCode(v)).join("")
+export async function initEmscriptenModule<T extends EmscriptenWasm.Module>(
   moduleFactory: EmscriptenWasm.ModuleFactory<T>,
+  wasmUrl: string,
+  workerUrl?: string,
 ): Promise<T> {
   return moduleFactory({
+    // @ts-ignore
+    wasm: await fetch(wasmUrl).then(r => r.arrayBuffer()),
     // Just to be safe, don't automatically invoke any wasm functions
     noInitialRun: true,
+    locateFile: (url: string) => {
+      // This is probably unused?
+      console.log("CALL TO LOCATEFILE", url);
+      if (url.endsWith('.wasm')) return wasmUrl;
+      if (url.endsWith('.worker.js')) return workerUrl!;
+      throw Error('Unknown url in locateFile ' + url);
+    },
   });
 }
 

src/shared/prerendered-app/Intro/SlideOnScroll/index.tsx

@@ -1,51 +0,0 @@
-import { h, Component, RenderableProps } from 'preact';
-
-interface Props {}
-interface State {}
-
-export default class SlideOnScroll extends Component<Props, State> {
-  private observer?: IntersectionObserver;
-
-  componentDidMount() {
-    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
-
-    const base = this.base as HTMLElement;
-    let wasOutOfView = false;
-
-    this.observer = new IntersectionObserver(
-      (entries, observer) => {
-        for (const entry of entries) {
-          if (!entry.isIntersecting) {
-            wasOutOfView = true;
-            base.style.opacity = '0';
-            return;
-          }
-
-          // Only transition in if the element was at some point out of view.
-          if (wasOutOfView) {
-            base.style.opacity = '';
-            base.animate(
-              { offset: 0, opacity: '0', transform: 'translateY(40px)' },
-              { duration: 300, easing: 'ease' },
-            );
-          }
-          observer.unobserve(entry.target);
-        }
-      },
-      { threshold: 0.2 },
-    );
-
-    this.observer.observe(base);
-  }
-
-  componentWillUnmount() {
-    // Have to manually disconnect due to memory leaks in browsers.
-    // One day we'll be able to remove this, and the private property.
-    // https://twitter.com/jaffathecake/status/1405437361643790337
-    if (this.observer) this.observer.disconnect();
-  }
-
-  render({ children }: RenderableProps<Props>) {
-    return <div>{children}</div>;
-  }
-}