Testing lol

Co-authored-by: Anton <dev@atjn.dk>

README.md

@@ -1,36 +1,42 @@
 # [Squoosh]!
 
-[Squoosh] is an image compression web app that allows you to dive into the advanced options provided
-by various image compressors.
+[Squoosh] is an image compression web app that reduces image sizes through numerous formats.
 
 # API & CLI
 
-Squoosh now has [an API](https://github.com/GoogleChromeLabs/squoosh/tree/dev/libsquoosh) and [a CLI](https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli) that allows you to compress many images at once.
+Squoosh has [an API](https://github.com/GoogleChromeLabs/squoosh/tree/dev/libsquoosh) and [a CLI](https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli) to compress many images at once.
 
 # Privacy
 
-Google Analytics is used to record the following:
+Squoosh does not send your image to a server. All image compression processes locally.
 
-- [Basic visit data](https://support.google.com/analytics/answer/6004245?ref_topic=2919631).
-- Before and after image size once an image is downloaded. These values are rounded to the nearest
-  kilobyte.
-- If install is available, when Squoosh is installed, and what method was used to install Squoosh.
+However, Squoosh utilizes Google Analytics to collect the following:
 
-Image compression is handled locally; no additional data is sent to the server.
+- [Basic visitor data](https://support.google.com/analytics/answer/6004245?ref_topic=2919631).
+- The before and after image size value.
+- If Squoosh PWA, the type of Squoosh installation.
+- If Squoosh PWA, the installation time and date.
 
-# Building locally
+# Developing
 
-Clone the repo, and:
+To develop for Squoosh:
 
-```sh
-npm install
-npm run build
-```
+1. Clone the repository
+1. To install node packages, run:
+   ```sh
+   npm install
+   ```
+1. Then build the app by running:
+   ```sh
+   npm run build
+   ```
+1. After building, start the development server by running:
+   ```sh
+   npm run dev
+   ```
 
-You can run the development server with:
+# Contributing
 
-```sh
-npm run dev
-```
+Squoosh is an open-source project that appreciates all community involvement. To contribute to the project, follow the [contribute guide](/CONTRIBUTING.md).
 
 [squoosh]: https://squoosh.app

cli/README.md

@@ -42,7 +42,7 @@ Options:
   -h, --help                                             display help for command
 ```
 
-The default values for each `config` option can be found in the [`codecs.js`][codecs.js] file under `defaultEncoderOptions`. Every unspecified value will use the default value specified here. _Better documentation is needed here._
+The default values for each `config` option can be found in the [`codecs.ts`][codecs.ts] file under `defaultEncoderOptions`. Every unspecified value will use the default value specified here. _Better documentation is needed here._
 
 ## Auto optimizer
 
@@ -55,5 +55,5 @@ $ npx @squoosh/cli --wp2 auto test.png
 ```
 
 [squoosh]: https://squoosh.app
-[codecs.js]: https://github.com/GoogleChromeLabs/squoosh/blob/dev/libsquoosh/src/codecs.js
+[codecs.ts]: https://github.com/GoogleChromeLabs/squoosh/blob/dev/libsquoosh/src/codecs.ts
 [butteraugli]: https://github.com/google/butteraugli

cli/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@squoosh/cli",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@squoosh/cli",
-      "version": "0.7.0",
+      "version": "0.7.2",
       "license": "Apache-2.0",
       "dependencies": {
-        "@squoosh/lib": "^0.2.0",
+        "@squoosh/lib": "^0.4.0",
         "commander": "^7.2.0",
         "json5": "^2.2.0",
         "kleur": "^4.1.4",
@@ -18,14 +18,21 @@
       "bin": {
         "cli": "src/index.js",
         "squoosh-cli": "src/index.js"
+      },
+      "engines": {
+        "node": " ^12.20.2 || ^14.13.1 || ^16.0.0 "
       }
     },
     "node_modules/@squoosh/lib": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@squoosh/lib/-/lib-0.2.0.tgz",
-      "integrity": "sha512-zKId9h/LzEnCdoOGnIgjzvqbk5g2aHgfEqgKQ+S+r5K3TasgD/DAsT6r7v6gXft1ao0f/00CTcwIp1KviWTQbw==",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@squoosh/lib/-/lib-0.4.0.tgz",
+      "integrity": "sha512-O1LyugWLZjMI4JZeZMA5vzfhfPjfMZXH5/HmVkRagP8B70wH3uoR7tjxfGNdSavey357MwL8YJDxbGwBBdHp7Q==",
       "dependencies": {
+        "wasm-feature-detect": "^1.2.11",
         "web-streams-polyfill": "^3.0.3"
+      },
+      "engines": {
+        "node": " ^12.5.0 || ^14.0.0 || ^16.0.0 "
       }
     },
     "node_modules/ansi-regex": {
@@ -323,6 +330,11 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
+    "node_modules/wasm-feature-detect": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/wasm-feature-detect/-/wasm-feature-detect-1.2.11.tgz",
+      "integrity": "sha512-HUqwaodrQGaZgz1lZaNioIkog9tkeEJjrM3eq4aUL04whXOVDRc/o2EGb/8kV0QX411iAYWEqq7fMBmJ6dKS6w=="
+    },
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
@@ -342,10 +354,11 @@
   },
   "dependencies": {
     "@squoosh/lib": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@squoosh/lib/-/lib-0.2.0.tgz",
-      "integrity": "sha512-zKId9h/LzEnCdoOGnIgjzvqbk5g2aHgfEqgKQ+S+r5K3TasgD/DAsT6r7v6gXft1ao0f/00CTcwIp1KviWTQbw==",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@squoosh/lib/-/lib-0.4.0.tgz",
+      "integrity": "sha512-O1LyugWLZjMI4JZeZMA5vzfhfPjfMZXH5/HmVkRagP8B70wH3uoR7tjxfGNdSavey357MwL8YJDxbGwBBdHp7Q==",
       "requires": {
+        "wasm-feature-detect": "^1.2.11",
         "web-streams-polyfill": "^3.0.3"
       }
     },
@@ -578,6 +591,11 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
+    "wasm-feature-detect": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/wasm-feature-detect/-/wasm-feature-detect-1.2.11.tgz",
+      "integrity": "sha512-HUqwaodrQGaZgz1lZaNioIkog9tkeEJjrM3eq4aUL04whXOVDRc/o2EGb/8kV0QX411iAYWEqq7fMBmJ6dKS6w=="
+    },
     "wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",

cli/package.json

@@ -1,9 +1,14 @@
 {
   "name": "@squoosh/cli",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "A CLI for Squoosh",
   "public": true,
   "type": "module",
+  "homepage": "https://github.com/GoogleChromeLabs/squoosh",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GoogleChromeLabs/squoosh.git"
+  },
   "bin": {
     "squoosh-cli": "src/index.js",
     "@squoosh/cli": "src/index.js"
@@ -14,8 +19,11 @@
   "keywords": [],
   "author": "Google Chrome Developers <chromium-dev@google.com>",
   "license": "Apache-2.0",
+  "engines": {
+    "node": " ^12.20.2 || ^14.13.1 || ^16.0.0 "
+  },
   "dependencies": {
-    "@squoosh/lib": "^0.2.0",
+    "@squoosh/lib": "^0.4.0",
     "commander": "^7.2.0",
     "json5": "^2.2.0",
     "kleur": "^4.1.4",

cli/src/index.js

@@ -177,8 +177,8 @@ async function processFiles(files) {
       jobsFinished++;
       const outputPath = path.join(
         program.opts().outputDir,
-        program.opts().suffix +
-          path.basename(originalFile, path.extname(originalFile)),
+        path.basename(originalFile, path.extname(originalFile)) +
+        program.opts().suffix
       );
       for (const output of Object.values(image.encodedWith)) {
         const outputFile = `${outputPath}.${(await output).extension}`;

codecs/avif/Makefile

@@ -16,10 +16,10 @@ export
 OUT_ENC_JS = enc/avif_enc.js
 OUT_NODE_ENC_JS = enc/avif_node_enc.js
 OUT_ENC_MT_JS = enc/avif_enc_mt.js
+OUT_NODE_ENC_MT_JS = enc/avif_node_enc_mt.js
 OUT_DEC_JS = dec/avif_dec.js
 OUT_NODE_DEC_JS = dec/avif_node_dec.js
 
-OUT_ENC_CPP = enc/avif_enc.cpp
 OUT_ENC_CPP = enc/avif_enc.cpp
 OUT_DEC_CPP = dec/avif_dec.cpp
 ENVIRONMENT = worker
@@ -28,9 +28,9 @@ HELPER_MAKEFLAGS := -f helper.Makefile
 
 .PHONY: all clean
 
-all: $(OUT_ENC_JS) $(OUT_DEC_JS) $(OUT_ENC_MT_JS) $(OUT_NODE_ENC_JS) $(OUT_NODE_DEC_JS)
+all: $(OUT_ENC_JS) $(OUT_DEC_JS) $(OUT_ENC_MT_JS) $(OUT_NODE_ENC_JS) $(OUT_NODE_ENC_MT_JS) $(OUT_NODE_DEC_JS)
 
-$(OUT_NODE_ENC_JS): ENVIRONMENT=node
+$(OUT_NODE_ENC_JS) $(OUT_NODE_ENC_MT_JS): ENVIRONMENT=node
 $(OUT_NODE_ENC_JS) $(OUT_ENC_JS): $(OUT_ENC_CPP) $(CODEC_DIR)/CMakeLists.txt $(LIBAOM_DIR)/CMakeLists.txt
 	$(MAKE) \
 		$(HELPER_MAKEFLAGS) \
@@ -44,7 +44,7 @@ $(OUT_NODE_ENC_JS) $(OUT_ENC_JS): $(OUT_ENC_CPP) $(CODEC_DIR)/CMakeLists.txt $(L
 		ENVIRONMENT=$(ENVIRONMENT) \
 		LIBAVIF_FLAGS="-DAVIF_CODEC_AOM_DECODE=0"
 
-$(OUT_ENC_MT_JS): $(OUT_ENC_CPP) $(CODEC_DIR)/CMakeLists.txt $(LIBAOM_DIR)/CMakeLists.txt
+$(OUT_ENC_MT_JS) $(OUT_NODE_ENC_MT_JS): $(OUT_ENC_CPP) $(CODEC_DIR)/CMakeLists.txt $(LIBAOM_DIR)/CMakeLists.txt
 	$(MAKE) \
 		$(HELPER_MAKEFLAGS) \
 		OUT_JS=$@ \
@@ -89,4 +89,7 @@ $(LIBAOM_DIR)/CMakeLists.txt: $(LIBAOM_PACKAGE)
 clean:
 	$(MAKE) $(HELPER_MAKEFLAGS) OUT_JS=$(OUT_ENC_JS) clean
 	$(MAKE) $(HELPER_MAKEFLAGS) OUT_JS=$(OUT_ENC_MT_JS) clean
+	$(MAKE) $(HELPER_MAKEFLAGS) OUT_JS=$(OUT_ENC_NODE_JS) clean
+	$(MAKE) $(HELPER_MAKEFLAGS) OUT_JS=$(OUT_ENC_NODE_MT_JS) clean
 	$(MAKE) $(HELPER_MAKEFLAGS) OUT_JS=$(OUT_DEC_JS) clean
+	$(MAKE) $(HELPER_MAKEFLAGS) OUT_JS=$(OUT_DEV_NODE_JS) clean

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/avif/enc/avif_node_enc_mt.worker.js

@@ -0,0 +1 @@
+"use strict";var Module={};if(typeof process==="object"&&typeof process.versions==="object"&&typeof process.versions.node==="string"){var nodeWorkerThreads=require("worker_threads");var parentPort=nodeWorkerThreads.parentPort;parentPort.on("message",function(data){onmessage({data:data})});var nodeFS=require("fs");Object.assign(global,{self:global,require:require,Module:Module,location:{href:__filename},Worker:nodeWorkerThreads.Worker,importScripts:function(f){(0,eval)(nodeFS.readFileSync(f,"utf8"))},postMessage:function(msg){parentPort.postMessage(msg)},performance:global.performance||{now:function(){return Date.now()}}})}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_node_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,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://gitlab.com/wg1/jpeg-xl.git
-CODEC_VERSION = ab7c5e9b6795134377aa4846ceaae2c5bc504f76
+CODEC_URL = https://github.com/libjxl/libjxl.git
+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

@@ -35,13 +35,15 @@ val encode(std::string image, int width, int height, JXLOptions options) {
 
   cparams.epf = options.epf;
   cparams.speed_tier = static_cast<jxl::SpeedTier>(options.speed);
-  cparams.near_lossless = options.nearLossless;
   cparams.decoding_speed_tier = options.decodingSpeedTier;
 
-  if (options.lossyPalette) {
+  if (options.lossyPalette || options.nearLossless) {
     cparams.lossy_palette = true;
     cparams.palette_colors = 0;
     cparams.options.predictor = jxl::Predictor::Zero;
+    // Near-lossless assumes -R 0
+    cparams.responsive = 0;
+    cparams.modular_mode = true;
   }
 
   float quality = options.quality;
@@ -77,12 +79,6 @@ val encode(std::string image, int width, int height, JXLOptions options) {
     }
   }
 
-  if (cparams.near_lossless) {
-    // Near-lossless assumes -R 0
-    cparams.responsive = 0;
-    cparams.modular_mode = true;
-  }
-
   io.metadata.m.SetAlphaBits(8);
   if (!io.metadata.size.Set(width, height)) {
     return val::null();

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/png/src/lib.rs

@@ -53,7 +53,11 @@ where
 #[wasm_bindgen]
 pub fn decode(mut data: &[u8]) -> ImageData {
     let mut decoder = png::Decoder::new(&mut data);
-    decoder.set_transformations(png::Transformations::EXPAND);
+    decoder.set_transformations(
+        png::Transformations::EXPAND | // Turn paletted images into RGB
+        png::Transformations::PACKING | // Turn images <8bit to 8bit
+        png::Transformations::STRIP_16, // Turn 16bit into 8 bit
+    );
     let (info, mut reader) = decoder.read_info().unwrap_throw();
     let num_pixels = (info.width * info.height) as usize;
     let mut buf = vec![0; num_pixels * 4];

codecs/visdif/BUILD.md

@@ -0,0 +1,14 @@
+This codec currently needs monkey-patching of Emscripten
+
+```
+$ docker run --rm -it -v $(PWD):/src squoosh-cpp "/bin/bash"
+# cat << EOF | patch /emsdk/upstream/emscripten/system/lib/dlmalloc.c
+659c659
+< #define MALLOC_ALIGNMENT ((size_t)(2 * sizeof(void *)))
+---
+> #define MALLOC_ALIGNMENT ((size_t)(16U))
+EOF
+# emcc --clear-cache
+# /emsdk/upstream/emscripten/embuilder build libdlmalloc --force
+# emmake make
+```

codecs/visdif/test.mjs

@@ -1,22 +0,0 @@
-
-import {dirname} from "path";
-globalThis.__dirname = dirname(import.meta.url);
-import { createRequire } from 'module';
-
-globalThis.require = createRequire(import.meta.url);
-import visdif from './visdif.js';
-
-const {VisDiff} = await visdif({
-	locateFile() {
-		return new URL("./visdif.wasm", import.meta.url).pathname;
-	}
-});
-
-const comparator = new VisDiff(
-	new Uint8ClampedArray([0, 0, 0, 255]),
-	1,	
-	1
-);
-
-const distance = comparator.distance(new Uint8ClampedArray([1,1,1,255]));
-console.log({distance});

codecs/visdif/visdif.cpp

@@ -5,12 +5,19 @@
 using namespace emscripten;
 using namespace butteraugli;
 
+#define GAMMA 2.2
+
+static float SrgbToLinear[256];
+
+inline void gammaLookupTable() {
+  SrgbToLinear[0] = 0;
+  for (int i = 1; i < 256; ++i) {
+    SrgbToLinear[i] = static_cast<float>(255.0 * pow(i / 255.0, GAMMA));
+  }
+}
+
 // Turns an interleaved RGBA buffer into 4 planes for each color channel
-void planarize(std::vector<ImageF>& img,
-               const uint8_t* rgba,
-               int width,
-               int height,
-               float gamma = 2.2) {
+void planarize(std::vector<ImageF>& img, const uint8_t* rgba, int width, int height) {
   assert(img.size() == 0);
   img.push_back(ImageF(width, height));
   img.push_back(ImageF(width, height));
@@ -22,10 +29,10 @@ void planarize(std::vector<ImageF>& img,
     float* const row_b = img[2].Row(y);
     float* const row_a = img[3].Row(y);
     for (int x = 0; x < width; x++) {
-      row_r[x] = 255.0 * pow(rgba[(y * width + x) * 4 + 0] / 255.0, gamma);
-      row_g[x] = 255.0 * pow(rgba[(y * width + x) * 4 + 1] / 255.0, gamma);
-      row_b[x] = 255.0 * pow(rgba[(y * width + x) * 4 + 2] / 255.0, gamma);
-      row_a[x] = 255.0 * pow(rgba[(y * width + x) * 4 + 3] / 255.0, gamma);
+      row_r[x] = SrgbToLinear[rgba[(y * width + x) * 4 + 0]];
+      row_g[x] = SrgbToLinear[rgba[(y * width + x) * 4 + 1]];
+      row_b[x] = SrgbToLinear[rgba[(y * width + x) * 4 + 2]];
+      row_a[x] = SrgbToLinear[rgba[(y * width + x) * 4 + 3]];
     }
   }
 }
@@ -37,6 +44,7 @@ class VisDiff {
 
  public:
   VisDiff(std::string ref_img, int width, int height) {
+    gammaLookupTable();
     planarize(this->ref_img, (uint8_t*)ref_img.c_str(), width, height);
     this->width = width;
     this->height = height;

codecs/visdif/visdif.test.mjs

@@ -1,21 +0,0 @@
-import {dirname} from "path";
-globalThis.__dirname = dirname(import.meta.url);
-import { createRequire } from 'module';
-
-globalThis.require = createRequire(import.meta.url);
-import visdif from './visdif.js';
-
-const {VisDiff} = await visdif({
-	locateFile() {
-		return new URL("./visdif.wasm", import.meta.url).pathname;
-	}
-});
-
-const comparator = new VisDiff(
-	new Uint8ClampedArray([0, 0, 0, 255]),
-	1,	
-	1
-);
-
-const distance = comparator.distance(new Uint8ClampedArray([1,1,1,255]));
-console.log({distance});

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
-            .map((name) => clientOutput.find((item) => item.fileName === name))
-            .filter((item) => item.code),
+          ...dependencies.map((name) =>
+            clientOutput.find((item) => item.fileName === name),
+          ),
         ];
 
         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;
-
-/** @param {string} fileName */
-export function fileNameToURL(fileName) {
-  return fileName.replace(/^static\//, '/');
-}
+const filenamePrefix = '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/README.md

@@ -30,7 +30,7 @@ const imagePath = 'path/to/image.png';
 const image = imagePool.ingestImage(imagePath);
 ```
 
-The `ingestImage` function can take anything the node [`readFile`][readfile] function can take, uncluding a buffer and `FileHandle`.
+The `ingestImage` function can take anything the node [`readFile`][readfile] function can take, including a buffer and `FileHandle`.
 
 The returned `image` object is a representation of the original image, that you can now preprocess, encode, and extract information about.
 
@@ -42,11 +42,19 @@ When an image has been ingested, you can start preprocessing it and encoding it
 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.
   resize: {
     enabled: true,
     width: 100,
     height: 50,
   }
+  /*
+  //When either width or height is specified, the image resized to specified size keeping aspect ratio.
+  resize: {
+    enabled: true,
+    width: 100,
+  }
+  */
 }
 await image.preprocess(preprocessOptions);
 
@@ -60,7 +68,7 @@ await image.encode(encodeOptions);
 
 ```
 
-The default values for each option can be found in the [`codecs.js`][codecs.js] file under `defaultEncoderOptions`. Every unspecified value will use the default value specified there. _Better documentation is needed here._
+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._
 
 You can run your own code inbetween the different steps, if, for example, you want to change how much the image should be resized based on its original height. (See [Extracting image information](#extracting-image-information) to learn how to get the image dimensions).
 
@@ -158,6 +166,6 @@ const encodeOptions: {
 ```
 
 [squoosh]: https://squoosh.app
-[codecs.js]: https://github.com/GoogleChromeLabs/squoosh/blob/dev/libsquoosh/src/codecs.js
+[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

libsquoosh/lib/chunk-plugin.js

@@ -0,0 +1,49 @@
+/**
+ * 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';
+import { basename } from 'path';
+
+const defaultOpts = {
+  prefix: 'chunk-url',
+};
+
+export default function chunkPlugin(opts) {
+  opts = { ...defaultOpts, ...opts };
+
+  const prefix = opts.prefix + ':';
+  return {
+    name: 'chunk-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}`);
+      }
+      return prefix + resolveResult.id;
+    },
+    async load(id) {
+      if (!id.startsWith(prefix)) return;
+      const realId = id.slice(prefix.length);
+      const source = await fs.readFile(realId);
+      this.addWatchFile(realId);
+
+      return `export default import.meta.ROLLUP_FILE_URL_${this.emitFile({
+        type: 'chunk',
+        source,
+        id: realId,
+      })}`;
+    },
+  };
+}

libsquoosh/libsquoosh.test.mjs

@@ -1,18 +0,0 @@
-import { ImagePool } from './build/index.js';
-
-console.log("Starting");
-const imagePool = new ImagePool();
-// const imagePath = '/Users/surma/Downloads/happy_dog.png';
-const imagePath = './squoosh.png';
-console.log("INgesting");
-const image = imagePool.ingestImage(imagePath);
-console.log("Decoding");
-await image.decoded;
-const encodeOptions = {
-  mozjpeg: 'auto',
-};
-console.log("Encoding");
-await image.encode(encodeOptions);
-console.log("Closing");
-await imagePool.close();
-console.log("Done");

libsquoosh/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squoosh/lib",
-  "version": "0.2.3",
+  "version": "0.4.0",
   "description": "A Node library for Squoosh",
   "public": true,
   "main": "./build/index.js",
@@ -12,8 +12,17 @@
   },
   "keywords": [],
   "author": "Google Chrome Developers <chromium-dev@google.com>",
+  "homepage": "https://github.com/GoogleChromeLabs/squoosh",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GoogleChromeLabs/squoosh.git"
+  },
   "license": "Apache-2.0",
+  "engines": {
+    "node": " ^12.5.0 || ^14.0.0 || ^16.0.0 "
+  },
   "dependencies": {
+    "wasm-feature-detect": "^1.2.11",
     "web-streams-polyfill": "^3.0.3"
   },
   "devDependencies": {

libsquoosh/rollup.config.js

@@ -2,6 +2,7 @@ import resolve from '@rollup/plugin-node-resolve';
 import cjs from '@rollup/plugin-commonjs';
 import simpleTS from './lib/simple-ts';
 import asset from './lib/asset-plugin.js';
+import chunk from './lib/chunk-plugin.js';
 import json from './lib/json-plugin.js';
 import autojson from './lib/autojson-plugin.js';
 import { getBabelOutputPlugin } from '@rollup/plugin-babel';
@@ -18,6 +19,7 @@ export default {
   plugins: [
     resolve(),
     cjs(),
+    chunk(),
     asset(),
     autojson(),
     json(),

libsquoosh/src/auto-optimizer.ts

@@ -2,6 +2,39 @@ import { instantiateEmscriptenWasm } from './emscripten-utils.js';
 
 import visdif from '../../codecs/visdif/visdif.js';
 import visdifWasm from 'asset-url:../../codecs/visdif/visdif.wasm';
+import type ImageData from './image_data';
+
+interface VisDiff {
+  distance: (data: Uint8ClampedArray) => number;
+  delete: () => void;
+}
+
+interface VisdiffConstructor {
+  new (data: Uint8ClampedArray, width: number, height: number): VisDiff;
+}
+
+interface VisDiffModule extends EmscriptenWasm.Module {
+  VisDiff: VisdiffConstructor;
+}
+
+type VisDiffModuleFactory = EmscriptenWasm.ModuleFactory<VisDiffModule>;
+
+interface BinarySearchParams {
+  min?: number;
+  max?: number;
+  epsilon?: number;
+  maxRounds?: number;
+}
+
+interface AutoOptimizeParams extends BinarySearchParams {
+  butteraugliDistanceGoal?: number;
+}
+
+interface AutoOptimizeResult {
+  bitmap: ImageData;
+  binary: Uint8Array;
+  quality: number;
+}
 
 // `measure` is a (async) function that takes exactly one numeric parameter and
 // returns a value. The function is assumed to be monotonic (an increase in `parameter`
@@ -9,9 +42,9 @@ import visdifWasm from 'asset-url:../../codecs/visdif/visdif.wasm';
 // to find `parameter` such that `measure` returns `measureGoal`, within an error
 // of `epsilon`. It will use at most `maxRounds` attempts.
 export async function binarySearch(
-  measureGoal,
-  measure,
-  { min = 0, max = 100, epsilon = 0.1, maxRounds = 6 } = {},
+  measureGoal: number,
+  measure: (val: number) => Promise<number>,
+  { min = 0, max = 100, epsilon = 0.1, maxRounds = 6 }: BinarySearchParams = {},
 ) {
   let parameter = (max - min) / 2 + min;
   let delta = (max - min) / 4;
@@ -33,12 +66,21 @@ export async function binarySearch(
 }
 
 export async function autoOptimize(
-  bitmapIn,
-  encode,
-  decode,
-  { butteraugliDistanceGoal = 1.4, ...otherOpts } = {},
-) {
-  const { VisDiff } = await instantiateEmscriptenWasm(visdif, visdifWasm);
+  bitmapIn: ImageData,
+  encode: (
+    bitmap: ImageData,
+    quality: number,
+  ) => Promise<Uint8Array> | Uint8Array,
+  decode: (binary: Uint8Array) => Promise<ImageData> | ImageData,
+  {
+    butteraugliDistanceGoal = 1.4,
+    ...binarySearchParams
+  }: AutoOptimizeParams = {},
+): Promise<AutoOptimizeResult> {
+  const { VisDiff } = await instantiateEmscriptenWasm(
+    visdif as VisDiffModuleFactory,
+    visdifWasm,
+  );
 
   const comparator = new VisDiff(
     bitmapIn.data,
@@ -46,8 +88,11 @@ export async function autoOptimize(
     bitmapIn.height,
   );
 
-  let bitmapOut;
-  let binaryOut;
+  // We're able to do non null assertion because
+  // we know that binarySearch will set these values
+  let bitmapOut!: ImageData;
+  let binaryOut!: Uint8Array;
+
   // Increasing quality means _decrease_ in Butteraugli distance.
   // `binarySearch` assumes that increasing `parameter` will
   // increase the metric value. So multipliy Butteraugli values by -1.
@@ -58,7 +103,7 @@ export async function autoOptimize(
       bitmapOut = await decode(binaryOut);
       return -1 * comparator.distance(bitmapOut.data);
     },
-    otherOpts,
+    binarySearchParams,
   );
   comparator.delete();
 

libsquoosh/src/codecs.ts

@@ -1,5 +1,13 @@
 import { promises as fsp } from 'fs';
 import { instantiateEmscriptenWasm, pathify } from './emscripten-utils.js';
+import { threads } from 'wasm-feature-detect';
+import { cpus } from 'os';
+
+// We use `navigator.hardwareConcurrency` for Emscripten’s pthread pool size.
+// This is the only workaround I can get working without crying.
+(globalThis as any).navigator = {
+  hardwareConcurrency: cpus().length,
+};
 
 interface RotateModuleInstance {
   exports: {
@@ -47,6 +55,9 @@ import webpDecWasm from 'asset-url:../../codecs/webp/dec/webp_node_dec.wasm';
 // AVIF
 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';
+import avifEncMtWorker from 'chunk-url:../../codecs/avif/enc/avif_node_enc_mt.worker.js';
+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';
 
@@ -282,7 +293,7 @@ export const codecs = {
   webp: {
     name: 'WebP',
     extension: 'webp',
-    detectors: [/^RIFF....WEBPVP8[LX ]/],
+    detectors: [/^RIFF....WEBPVP8[LX ]/s],
     dec: () => instantiateEmscriptenWasm(webpDec, webpDecWasm),
     enc: () => instantiateEmscriptenWasm(webpEnc, webpEncWasm),
     defaultEncoderOptions: {
@@ -325,7 +336,16 @@ export const codecs = {
     extension: 'avif',
     detectors: [/^\x00\x00\x00 ftypavif\x00\x00\x00\x00/],
     dec: () => instantiateEmscriptenWasm(avifDec, avifDecWasm),
-    enc: () => instantiateEmscriptenWasm(avifEnc, avifEncWasm),
+    enc: async () => {
+      if (await threads()) {
+        return instantiateEmscriptenWasm(
+          avifEncMt,
+          avifEncMtWasm,
+          avifEncMtWorker,
+        );
+      }
+      return instantiateEmscriptenWasm(avifEnc, avifEncWasm);
+    },
     defaultEncoderOptions: {
       cqLevel: 33,
       cqAlphaLevel: -1,

libsquoosh/src/emscripten-utils.ts

@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url';
+import { fileURLToPath, URL } from 'url';
 
 export function pathify(path: string): string {
   if (path.startsWith('file://')) {
@@ -10,10 +10,17 @@ export function pathify(path: string): string {
 export function instantiateEmscriptenWasm<T extends EmscriptenWasm.Module>(
   factory: EmscriptenWasm.ModuleFactory<T>,
   path: string,
+  workerJS: string = '',
 ): Promise<T> {
   return factory({
-    locateFile() {
-      return pathify(path);
+    locateFile(requestPath) {
+      // The glue code generated by emscripten uses the original
+      // file names of the worker file and the wasm binary.
+      // 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;
+      return requestPath;
     },
   });
 }

libsquoosh/src/missing-types.d.ts

@@ -23,6 +23,11 @@ declare module 'asset-url:../../codecs/resize/pkg/squoosh_resize_bg.wasm' {
   export default value;
 }
 
+declare module 'chunk-url:../../codecs/avif/enc/avif_node_enc_mt.worker.js' {
+  const value: string;
+  export default value;
+}
+
 // These don't exist in NodeJS types so we're not able to use them but they are referenced in some emscripten and codec types
 // Thus, we need to explicitly assign them to be `never`
 // We're also not able to use the APIs that use these types

libsquoosh/src/worker_pool.js

@@ -64,7 +64,7 @@ export default class WorkerPool {
 
   async _nextWorker() {
     const reader = this.workerQueue.readable.getReader();
-    const { value, done } = await reader.read();
+    const { value } = await reader.read();
     reader.releaseLock();
     return value;
   }

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

@@ -8976,9 +8976,9 @@
       }
     },
     "@surma/rollup-plugin-off-main-thread": {
-      "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==",
+      "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==",
       "dev": true,
       "requires": {
         "ejs": "^3.1.6",
@@ -15980,9 +15980,9 @@
       "dev": true
     },
     "wasm-feature-detect": {
-      "version": "1.2.11",
-      "resolved": "https://registry.npmjs.org/wasm-feature-detect/-/wasm-feature-detect-1.2.11.tgz",
-      "integrity": "sha512-HUqwaodrQGaZgz1lZaNioIkog9tkeEJjrM3eq4aUL04whXOVDRc/o2EGb/8kV0QX411iAYWEqq7fMBmJ6dKS6w=="
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/wasm-feature-detect/-/wasm-feature-detect-1.2.9.tgz",
+      "integrity": "sha512-2E9/gtLVLpv2wnZDyYv8WY2dR9gHbmyv5uhZsnOcMSzqc78aGZpKQORPNcnrPwAU23nFUo7GAwKuoTAWRgsJ7Q=="
     },
     "which": {
       "version": "2.0.2",

package.json

@@ -6,15 +6,15 @@
   "scripts": {
     "build": "rollup -c && node lib/move-output.js",
     "debug": "node --inspect-brk node_modules/.bin/rollup -c",
-    "dev": "run-p watch serve",
+    "dev": "DEV_PORT=\"${DEV_PORT:=5000}\" run-p watch serve",
     "watch": "rollup -cw",
-    "serve": "serve --config ../../../serve.json .tmp/build/static"
+    "serve": "serve --listen=$DEV_PORT --config ../../../serve.json .tmp/build/static"
   },
   "devDependencies": {
     "@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",
@@ -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/index.tsx

@@ -6,10 +6,13 @@ import './custom-els/RangeInput';
 import { linkRef } from 'shared/prerendered-app/util';
 
 interface Props extends preact.JSX.HTMLAttributes {}
-interface State {}
+interface State {
+  textFocused: boolean;
+}
 
 export default class Range extends Component<Props, State> {
   rangeWc?: RangeInputElement;
+  inputEl?: HTMLInputElement;
 
   private onTextInput = (event: Event) => {
     const input = event.target as HTMLInputElement;
@@ -23,10 +26,19 @@ export default class Range extends Component<Props, State> {
     );
   };
 
-  render(props: Props) {
+  private onTextFocus = () => {
+    this.setState({ textFocused: true });
+  };
+
+  private onTextBlur = () => {
+    this.setState({ textFocused: false });
+  };
+
+  render(props: Props, state: State) {
     const { children, ...otherProps } = props;
 
     const { value, min, max, step } = props;
+    const textValue = state.textFocused ? this.inputEl!.value : value;
 
     return (
       <label class={style.range}>
@@ -41,13 +53,16 @@ export default class Range extends Component<Props, State> {
           />
         </div>
         <input
+          ref={linkRef(this, 'inputEl')}
           type="number"
           class={style.textInput}
-          value={value}
+          value={textValue}
           min={min}
           max={max}
           step={step}
           onInput={this.onTextInput}
+          onFocus={this.onTextFocus}
+          onBlur={this.onTextBlur}
         />
       </label>
     );

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

@@ -95,7 +95,7 @@ const magicNumberMapInput = [
   [/^I I/, 'image/tiff'],
   [/^II*/, 'image/tiff'],
   [/^MM\x00*/, 'image/tiff'],
-  [/^RIFF....WEBPVP8[LX ]/, 'image/webp'],
+  [/^RIFF....WEBPVP8[LX ]/s, 'image/webp'],
   [/^\xF4\xFF\x6F/, 'image/webp2'],
   [/^\x00\x00\x00 ftypavif\x00\x00\x00\x00/, 'image/avif'],
   [/^\xff\x0a/, 'image/jxl'],

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([