Hack together not-inline CSS

Bump version due to breaking changes
Update version
2022-02-21 12:40:16 +00:00 · 2022-02-18 15:36:31 +00:00 · 2022-02-16 16:23:33 +00:00 · 2022-02-16 16:19:42 +00:00 · 2022-01-21 12:42:27 +00:00 · 2021-10-20 15:42:50 +01:00
101 changed files with 3657 additions and 974 deletions
--- a/.gitattributes
+++ b/.gitattributes
@@ -1,2 +1,2 @@
-/codecs/**/*.js linguist-generated=true
-/codecs/*/pkg*/*.d.ts linguist-generated=true
+/codecs/**/*.js linguist-generated -diff
+/codecs/*/pkg*/*.d.ts linguist-generated
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -0,0 +1 @@
+npx lint-staged
--- a/README.md
+++ b/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
--- a/cli/README.md
+++ b/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
--- a/cli/package-lock.json
+++ b/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",
--- a/cli/package.json
+++ b/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",
--- a/cli/src/index.js
+++ b/cli/src/index.js
@@ -4,6 +4,7 @@ import { program } from 'commander/esm.mjs';
 import JSON5 from 'json5';
 import path from 'path';
 import { promises as fsp } from 'fs';
+import { cpus } from 'os';
 import ora from 'ora';
 import kleur from 'kleur';

@@ -75,7 +76,9 @@ async function getInputFiles(paths) {

  for (const inputPath of paths) {
    const files = (await fsp.lstat(inputPath)).isDirectory()
-      ? (await fsp.readdir(inputPath, {withFileTypes: true})).filter(dirent => dirent.isFile()).map(dirent => path.join(inputPath, dirent.name))
+      ? (await fsp.readdir(inputPath, { withFileTypes: true }))
+          .filter((dirent) => dirent.isFile())
+          .map((dirent) => path.join(inputPath, dirent.name))
      : [inputPath];
    for (const file of files) {
      try {
@@ -101,7 +104,7 @@ async function getInputFiles(paths) {
 async function processFiles(files) {
  files = await getInputFiles(files);

-  const imagePool = new ImagePool();
+  const imagePool = new ImagePool(cpus().length);

  const results = new Map();
  const progress = progressTracker(results);
@@ -116,7 +119,8 @@ async function processFiles(files) {
  let decoded = 0;
  let decodedFiles = await Promise.all(
    files.map(async (file) => {
-      const image = imagePool.ingestImage(file);
+      const buffer = await fsp.readFile(file);
+      const image = imagePool.ingestImage(buffer);
      await image.decoded;
      results.set(image, {
        file,
@@ -177,8 +181,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}`;
--- a/codecs/avif/Makefile
+++ b/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
--- a/codecs/avif/dec/avif_dec.wasm
+++ b/codecs/avif/dec/avif_dec.wasm
--- a/codecs/avif/dec/avif_node_dec.wasm
+++ b/codecs/avif/dec/avif_node_dec.wasm
--- a/codecs/avif/enc/avif_enc.js
+++ b/codecs/avif/enc/avif_enc.js
--- a/codecs/avif/enc/avif_enc.wasm
+++ b/codecs/avif/enc/avif_enc.wasm
--- a/codecs/avif/enc/avif_enc_mt.js
+++ b/codecs/avif/enc/avif_enc_mt.js
--- a/codecs/avif/enc/avif_enc_mt.wasm
+++ b/codecs/avif/enc/avif_enc_mt.wasm
--- a/codecs/avif/enc/avif_node_enc.js
+++ b/codecs/avif/enc/avif_node_enc.js
--- a/codecs/avif/enc/avif_node_enc.wasm
+++ b/codecs/avif/enc/avif_node_enc.wasm
--- a/codecs/avif/enc/avif_node_enc_mt.js
+++ b/codecs/avif/enc/avif_node_enc_mt.js
--- a/codecs/avif/enc/avif_node_enc_mt.wasm
+++ b/codecs/avif/enc/avif_node_enc_mt.wasm
--- a/codecs/avif/enc/avif_node_enc_mt.worker.js
+++ b/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}};
--- a/codecs/jxl/Makefile
+++ b/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 = 9f544641ec83f6abd9da598bdd08178ee8a003e0
 CODEC_DIR = node_modules/jxl
 CODEC_BUILD_ROOT := $(CODEC_DIR)/build
 CODEC_MT_BUILD_DIR := $(CODEC_BUILD_ROOT)/mt
@@ -75,6 +75,9 @@ $(CODEC_MT_SIMD_BUILD_DIR)/Makefile: CXXFLAGS+=-msimd128
 	-DCMAKE_CROSSCOMPILING_EMULATOR=node \
 	-B $(@D) \
 	$(<D)
+	emcc -Wall -O3 -o $(CODEC_DIR)/third_party/skcms/skcms.cc.o -I$(CODEC_DIR)/third_party/skcms -c $(CODEC_DIR)/third_party/skcms/skcms.cc
+	llvm-ar rc $(CODEC_BUILD_DIR)/third_party/libskcms.a $(CODEC_DIR)/third_party/skcms/skcms.cc.o
+	rm $(CODEC_DIR)/third_party/skcms/skcms.cc.o

 $(CODEC_DIR)/CMakeLists.txt:
 	$(RM) -r $(@D)
--- a/codecs/jxl/dec/jxl_dec.js
+++ b/codecs/jxl/dec/jxl_dec.js
--- a/codecs/jxl/dec/jxl_dec.wasm
+++ b/codecs/jxl/dec/jxl_dec.wasm
--- a/codecs/jxl/dec/jxl_node_dec.js
+++ b/codecs/jxl/dec/jxl_node_dec.js
--- a/codecs/jxl/dec/jxl_node_dec.wasm
+++ b/codecs/jxl/dec/jxl_node_dec.wasm
--- a/codecs/jxl/enc/jxl_enc.cpp
+++ b/codecs/jxl/enc/jxl_enc.cpp
@@ -4,21 +4,21 @@
 #include "lib/jxl/base/thread_pool_internal.h"
 #include "lib/jxl/enc_external_image.h"
 #include "lib/jxl/enc_file.h"
+#include "lib/jxl/enc_color_management.h"

 using namespace emscripten;

 thread_local const val Uint8Array = val::global("Uint8Array");

 struct JXLOptions {
-  // 1 = slowest
-  // 7 = fastest
-  int speed;
+  int effort;
  float quality;
  bool progressive;
  int epf;
-  int nearLossless;
  bool lossyPalette;
  size_t decodingSpeedTier;
+  float photonNoiseIso;
+  bool lossyModular;
 };

 val encode(std::string image, int width, int height, JXLOptions options) {
@@ -33,25 +33,35 @@ 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.near_lossless = options.nearLossless;
  cparams.decoding_speed_tier = options.decodingSpeedTier;
+  cparams.photon_noise_iso = options.photonNoiseIso;

  if (options.lossyPalette) {
    cparams.lossy_palette = true;
    cparams.palette_colors = 0;
    cparams.options.predictor = jxl::Predictor::Zero;
+    // Near-lossless assumes -R 0
+    cparams.responsive = 0;
+    cparams.modular_mode = true;
  }

  float quality = options.quality;

  // Quality settings roughly match libjpeg qualities.
-  if (quality < 7 || quality == 100) {
+  if (options.lossyModular || quality == 100) {
    cparams.modular_mode = true;
    // Internal modular quality to roughly match VarDCT size.
-    cparams.quality_pair.first = cparams.quality_pair.second =
-        std::min(35 + (quality - 7) * 3.0f, 100.0f);
+    if (quality < 7) {
+      cparams.quality_pair.first = cparams.quality_pair.second =
+          std::min(35 + (quality - 7) * 3.0f, 100.0f);
+    } else {
+      cparams.quality_pair.first = cparams.quality_pair.second =
+          std::min(35 + (quality - 7) * 65.f / 93.f, 100.0f);
+    }
  } else {
    cparams.modular_mode = false;
    if (quality >= 30) {
@@ -77,12 +87,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();
@@ -94,14 +98,14 @@ val encode(std::string image, int width, int height, JXLOptions options) {
      jxl::Span<const uint8_t>(reinterpret_cast<const uint8_t*>(image.data()), image.size()), width,
      height, jxl::ColorEncoding::SRGB(/*is_gray=*/false), /*has_alpha=*/true,
      /*alpha_is_premultiplied=*/false, /*bits_per_sample=*/8, /*endiannes=*/JXL_LITTLE_ENDIAN,
-      /*flipped_y=*/false, pool_ptr, main);
+      /*flipped_y=*/false, pool_ptr, main, /*(only true if bits_per_sample==32) float_in=*/false);

  if (!result) {
    return val::null();
  }

  auto js_result = val::null();
-  if (EncodeFile(cparams, &io, &passes_enc_state, &bytes, /*aux=*/nullptr, pool_ptr)) {
+  if (EncodeFile(cparams, &io, &passes_enc_state, &bytes, jxl::GetJxlCms(), /*aux=*/nullptr, pool_ptr)) {
    js_result = Uint8Array.new_(typed_memory_view(bytes.size(), bytes.data()));
  }

@@ -110,12 +114,13 @@ val encode(std::string image, int width, int height, JXLOptions options) {

 EMSCRIPTEN_BINDINGS(my_module) {
  value_object<JXLOptions>("JXLOptions")
-      .field("speed", &JXLOptions::speed)
+      .field("effort", &JXLOptions::effort)
      .field("quality", &JXLOptions::quality)
      .field("progressive", &JXLOptions::progressive)
-      .field("nearLossless", &JXLOptions::nearLossless)
      .field("lossyPalette", &JXLOptions::lossyPalette)
      .field("decodingSpeedTier", &JXLOptions::decodingSpeedTier)
+      .field("photonNoiseIso", &JXLOptions::photonNoiseIso)
+      .field("lossyModular", &JXLOptions::lossyModular)
      .field("epf", &JXLOptions::epf);

  function("encode", &encode);
--- a/codecs/jxl/enc/jxl_enc.d.ts
+++ b/codecs/jxl/enc/jxl_enc.d.ts
@@ -1,11 +1,12 @@
 export interface EncodeOptions {
-  speed: number;
+  effort: number;
  quality: number;
  progressive: boolean;
  epf: number;
-  nearLossless: number;
  lossyPalette: boolean;
  decodingSpeedTier: number;
+  photonNoiseIso: number;
+  lossyModular: boolean;
 }

 export interface JXLModule extends EmscriptenWasm.Module {
--- a/codecs/jxl/enc/jxl_enc.js
+++ b/codecs/jxl/enc/jxl_enc.js
--- a/codecs/jxl/enc/jxl_enc.wasm
+++ b/codecs/jxl/enc/jxl_enc.wasm
--- a/codecs/jxl/enc/jxl_enc_mt.js
+++ b/codecs/jxl/enc/jxl_enc_mt.js
--- a/codecs/jxl/enc/jxl_enc_mt.wasm
+++ b/codecs/jxl/enc/jxl_enc_mt.wasm
--- a/codecs/jxl/enc/jxl_enc_mt_simd.js
+++ b/codecs/jxl/enc/jxl_enc_mt_simd.js
--- a/codecs/jxl/enc/jxl_enc_mt_simd.wasm
+++ b/codecs/jxl/enc/jxl_enc_mt_simd.wasm
--- a/codecs/jxl/enc/jxl_node_enc.js
+++ b/codecs/jxl/enc/jxl_node_enc.js
--- a/codecs/jxl/enc/jxl_node_enc.wasm
+++ b/codecs/jxl/enc/jxl_node_enc.wasm
--- a/codecs/mozjpeg/enc/mozjpeg_enc.cpp
+++ b/codecs/mozjpeg/enc/mozjpeg_enc.cpp
@@ -158,6 +158,11 @@ val encode(std::string image_in, int image_width, int image_height, MozJpegOptio
  if (!opts.auto_subsample && opts.color_space == JCS_YCbCr) {
    cinfo.comp_info[0].h_samp_factor = opts.chroma_subsample;
    cinfo.comp_info[0].v_samp_factor = opts.chroma_subsample;
+
+    if (opts.chroma_subsample > 2) {
+      // Otherwise encoding fails.
+      jpeg_c_set_int_param(&cinfo, JINT_DC_SCAN_OPT_MODE, 1);
+    }
  }

  if (!opts.baseline && opts.progressive) {
--- a/codecs/mozjpeg/enc/mozjpeg_enc.wasm
+++ b/codecs/mozjpeg/enc/mozjpeg_enc.wasm
--- a/codecs/mozjpeg/enc/mozjpeg_node_enc.wasm
+++ b/codecs/mozjpeg/enc/mozjpeg_node_enc.wasm
--- a/codecs/png/pkg/squoosh_png_bg.wasm
+++ b/codecs/png/pkg/squoosh_png_bg.wasm
--- a/codecs/png/src/lib.rs
+++ b/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];
--- a/codecs/visdif/BUILD.md
+++ b/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
+```
--- a/codecs/visdif/test.mjs
+++ b/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});
--- a/codecs/visdif/visdif.cpp
+++ b/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;
--- a/codecs/visdif/visdif.test.mjs
+++ b/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});
--- a/codecs/visdif/visdif.wasm
+++ b/codecs/visdif/visdif.wasm
--- a/lib/data-url-plugin.js
+++ b/lib/data-url-plugin.js
@@ -14,28 +14,40 @@ import { promises as fs } from 'fs';

 import { lookup as lookupMime } from 'mime-types';

-const prefix = 'data-url:';
+const prefix = /^data-url(-text)?:/;

 export default function dataURLPlugin() {
  return {
    name: 'data-url-plugin',
    async resolveId(id, importer) {
-      if (!id.startsWith(prefix)) return;
+      const match = prefix.exec(id);
+      if (!match) return;
      return (
-        prefix + (await this.resolve(id.slice(prefix.length), importer)).id
+        match[0] + (await this.resolve(id.slice(match[0].length), importer)).id
      );
    },
    async load(id) {
-      if (!id.startsWith(prefix)) return;
-      const realId = id.slice(prefix.length);
+      const match = prefix.exec(id);
+      if (!match) return;
+
+      const isText = !!match[1];
+      const realId = id.slice(match[0].length);
      this.addWatchFile(realId);

      const source = await fs.readFile(realId);
      const type = lookupMime(realId) || 'text/plain';

-      return `export default 'data:${type};base64,${source.toString(
-        'base64',
-      )}';`;
+      if (isText) {
+        const encodedBody = encodeURIComponent(source.toString('utf8'));
+
+        return `export default ${JSON.stringify(
+          `data:${type};charset=utf-8,${encodedBody}`,
+        )};`;
+      }
+
+      return `export default ${JSON.stringify(
+        `data:${type};base64,${source.toString('base64')}`,
+      )};`;
    },
  };
 }
--- a/lib/entry-data-plugin.js
+++ b/lib/entry-data-plugin.js
@@ -77,7 +77,9 @@ export default function entryDataPlugin() {
            }

            return JSON.stringify(
-              getDependencies(chunks, chunk).map((filename) => fileNameToURL(filename)),
+              getDependencies(chunks, chunk).map((filename) =>
+                fileNameToURL(filename),
+              ),
            );
          },
        );
--- a/lib/initial-css-plugin.js
+++ b/lib/initial-css-plugin.js
@@ -11,10 +11,23 @@
 * limitations under the License.
 */
 import { promisify } from 'util';
-
+import { promises as fsp, readFileSync } from 'fs';
 import path from 'path';
 import { posix } from 'path';
 import glob from 'glob';
+import postcss from 'postcss';
+import postCSSNested from 'postcss-nested';
+import postCSSUrl from 'postcss-url';
+import postCSSModules from 'postcss-modules';
+import postCSSSimpleVars from 'postcss-simple-vars';
+import cssNano from 'cssnano';
+import {
+  parse as parsePath,
+  resolve as resolvePath,
+  dirname,
+  normalize as nomalizePath,
+  sep as pathSep,
+} from 'path';

 const globP = promisify(glob);

@@ -30,26 +43,72 @@ export default function initialCssPlugin() {
    async load(id) {
      if (id !== initialCssModule) return;

-      const matches = await globP('shared/prerendered-app/**/*.css', {
-        nodir: true,
-        cwd: path.join(process.cwd(), 'src'),
-      });
+      const matches = (
+        await globP('shared/prerendered-app/**/*.css', {
+          nodir: true,
+          cwd: path.join(process.cwd(), 'src'),
+          absolute: true,
+        })
+      ).map((cssPath) =>
+        // glob() returns windows paths with a forward slash. Normalise it:
+        path.normalize(cssPath),
+      );

      // Sort the matches so the parentmost items appear first.
      // This is a bit of a hack, but it means the util stuff appears in the cascade first.
      const sortedMatches = matches
        .map((match) => path.normalize(match).split(path.sep))
        .sort((a, b) => a.length - b.length)
-        .map((match) => posix.join(...match));
+        .map((match) => '/' + posix.join(...match));

-      const imports = sortedMatches
-        .map((id, i) => `import css${i} from 'css:${id}';\n`)
-        .join('');
+      const cssSources = await Promise.all(
+        sortedMatches.map(async (path) => {
+          this.addWatchFile(path);
+          const file = await fsp.readFile(path);

-      return (
-        imports +
-        `export default ${sortedMatches.map((_, i) => `css${i}`).join(' + ')};`
+          const cssResult = await postcss([
+            postCSSNested,
+            postCSSSimpleVars(),
+            postCSSModules({
+              root: '',
+            }),
+            postCSSUrl({
+              url: ({ relativePath, url }) => {
+                if (/^((https?|data):|#)/.test(url)) return url;
+                const parsedPath = parsePath(relativePath);
+                const source = readFileSync(
+                  resolvePath(dirname(path), relativePath),
+                );
+                const fileId = this.emitFile({
+                  type: 'asset',
+                  name: parsedPath.base,
+                  source,
+                });
+                const hash = createHash('md5');
+                hash.update(source);
+                const md5 = hash.digest('hex');
+                hashToId.set(md5, fileId);
+                return `/fake/path/to/asset/${md5}/`;
+              },
+            }),
+            cssNano,
+          ]).process(file, {
+            from: path,
+          });
+
+          return cssResult.css;
+        }),
      );
+
+      const css = cssSources.join('\n');
+
+      const fileId = this.emitFile({
+        type: 'asset',
+        source: css,
+        name: 'initial.css',
+      });
+
+      return `export default import.meta.ROLLUP_FILE_URL_${fileId};`;
    },
  };
 }
--- a/lib/omt.ejs
+++ b/lib/omt.ejs
@@ -28,10 +28,17 @@ if (!self.<%- amdFunctionName %>) {
      <% } else { %>
        new Promise(resolve => {
          if ("document" in self) {
-            const script = document.createElement("script");
-            script.src = uri;
-            script.onload = resolve;
-            document.head.appendChild(script);
+            const link = document.createElement("link");
+            link.rel = "preload";
+            link.as = "script";
+            link.href = uri;
+            link.onload = () => {
+              const script = document.createElement("script");
+              script.src = uri;
+              script.onload = resolve;
+              document.head.appendChild(script);
+            };
+            document.head.appendChild(link);
          } else {
            self.nextDefineUri = uri;
            importScripts(uri);
--- a/libsquoosh/README.md
+++ b/libsquoosh/README.md
@@ -16,21 +16,25 @@ You can start using the libSquoosh by adding these lines to the top of your JS p

 ```js
 import { ImagePool } from '@squoosh/lib';
-const imagePool = new ImagePool();
+import { cpus } from 'os';
+const imagePool = new ImagePool(cpus().length);
 ```

-This will create an image pool with an underlying processing pipeline that you can use to ingest and encode images. The ImagePool constructor takes one argument that defines how many parallel operations it is allowed to run at any given time. By default, this number is set to the amount of CPU cores available in the system it is running on.
+This will create an image pool with an underlying processing pipeline that you can use to ingest and encode images. The ImagePool constructor takes one argument that defines how many parallel operations it is allowed to run at any given time.
+
+:warning: Important! Make sure to only create 1 `ImagePool` when performing parallel image processing. If you create multiple pools, the `ImagePool` can run out of memory and crash. By reusing a single `ImagePool`, you can ensure that the backing worker queue and processing pipeline releases memory prior to processing the next image.

 ## Ingesting images

 You can ingest a new image like so:

 ```js
-const imagePath = 'path/to/image.png';
-const image = imagePool.ingestImage(imagePath);
+import fs from 'fs/promises';
+const file = await fs.readFile('./path/to/image.png');
+const image = imagePool.ingestImage(file);
 ```

-The `ingestImage` function can take anything the node [`readFile`][readfile] function can take, uncluding a buffer and `FileHandle`.
+The `ingestImage` function can accept any [`ArrayBuffer`][arraybuffer] whether that is from `readFile()` or `fetch()`.

 The returned `image` object is a representation of the original image, that you can now preprocess, encode, and extract information about.

@@ -39,15 +43,19 @@ The returned `image` object is a representation of the original image, that you
 When an image has been ingested, you can start preprocessing it and encoding it to other formats. This example will resize the image and then encode it to a `.jpg` and `.jxl` image:

 ```js
-await image.decoded; //Wait until the image is decoded before running preprocessors. 
-
 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: {
+    width: 100,
  }
-}
+  */
+};
 await image.preprocess(preprocessOptions);

 const encodeOptions = {
@@ -55,12 +63,11 @@ const encodeOptions = {
  jxl: {
    quality: 90,
  },
-}
-await image.encode(encodeOptions);
-
+};
+const result = 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).

@@ -81,7 +88,7 @@ When you have encoded an image, you normally want to write it to a file.
 This example takes an image that has been encoded as a `jpg` and writes it to a file:

 ```js
-const rawEncodedImage = (await image.encodedWith.mozjpeg).binary;
+const rawEncodedImage = image.encodedWith.mozjpeg.binary;

 fs.writeFile('/path/to/new/image.jpg', rawEncodedImage);
 ```
@@ -92,10 +99,7 @@ This example iterates through all encoded versions of the image and writes them
 const newImagePath = '/path/to/image.'; //extension is added automatically

 for (const encodedImage of Object.values(image.encodedWith)) {
-  fs.writeFile(
-    newImagePath + (await encodedImage).extension,
-    (await encodedImage).binary,
-  );
+  fs.writeFile(newImagePath + encodedImage.extension, encodedImage.binary);
 }
 ```

@@ -124,7 +128,7 @@ console.log(await image.decoded);
 Information about an encoded image can be found at `Image.encodedWith[encoderName]`. It looks something like this:

 ```js
-console.log(await image.encodedWith.jxl);
+console.log(image.encodedWith.jxl);
 // Returns:
 {
  optionsUsed: {
@@ -158,6 +162,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
+[arraybuffer]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer
--- a/libsquoosh/lib/chunk-plugin.js
+++ b/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,
+      })}`;
+    },
+  };
+}
--- a/libsquoosh/lib/move-d-ts.js
+++ b/libsquoosh/lib/move-d-ts.js
@@ -0,0 +1,26 @@
+const fs = require('fs');
+const del = require('del');
+const path = require('path');
+
+const tsOutputDir = path.resolve('..', '.tmp', 'ts', 'libsquoosh');
+const tsOutputSourceDir = path.join(tsOutputDir, 'src');
+const buildDir = path.resolve('build');
+
+(async () => {
+  await del(path.join(buildDir, '*.d.ts'));
+  const files = await fs.promises.readdir(tsOutputSourceDir);
+
+  const movePromises = [];
+  for (const file of files) {
+    if (file.endsWith('d.ts') || file.endsWith('d.ts.map')) {
+      movePromises.push(
+        fs.promises.rename(
+          path.join(tsOutputSourceDir, file),
+          path.join(buildDir, file),
+        ),
+      );
+    }
+  }
+  // We need to remove `tsconfig.tsbuildinfo` otherwise TS does not emit unchanged `.d.ts` files
+  await del([path.join(tsOutputDir, 'tsconfig.tsbuildinfo')], { force: true });
+})();
--- a/libsquoosh/libsquoosh.test.mjs
+++ b/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");
--- a/libsquoosh/package-lock.json
+++ b/libsquoosh/package-lock.json
--- a/libsquoosh/package.json
+++ b/libsquoosh/package.json
@@ -1,19 +1,29 @@
 {
  "name": "@squoosh/lib",
-  "version": "0.2.3",
+  "version": "0.5.0",
  "description": "A Node library for Squoosh",
  "public": true,
  "main": "./build/index.js",
+  "types": "./build/index.d.ts",
  "files": [
    "/build/*"
  ],
  "scripts": {
-    "build": "rollup -c"
+    "build": "rollup -c && node lib/move-d-ts.js"
  },
  "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": {
--- a/libsquoosh/rollup.config.js
+++ b/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';
@@ -9,7 +10,7 @@ import { builtinModules } from 'module';

 /** @type {import('rollup').RollupOptions} */
 export default {
-  input: 'src/index.js',
+  input: 'src/index.ts',
  output: {
    dir: 'build',
    format: 'cjs',
@@ -18,6 +19,7 @@ export default {
  plugins: [
    resolve(),
    cjs(),
+    chunk(),
    asset(),
    autojson(),
    json(),
--- a/libsquoosh/squoosh.png
+++ b/libsquoosh/squoosh.png
--- a/libsquoosh/src/auto-optimizer.ts
+++ b/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();

--- a/libsquoosh/src/codecs.ts
+++ b/libsquoosh/src/codecs.ts
@@ -1,5 +1,19 @@
 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 DecodeModule extends EmscriptenWasm.Module {
+  decode: (data: Uint8Array) => ImageData;
+}
+
+type DecodeModuleFactory = EmscriptenWasm.ModuleFactory<DecodeModule>;

 interface RotateModuleInstance {
  exports: {
@@ -15,17 +29,26 @@ interface ResizeWithAspectParams {
  target_height: number;
 }

-interface ResizeInstantiateOptions {
+export interface ResizeOptions {
  width: number;
  height: number;
-  method: string;
+  method: 'triangle' | 'catrom' | 'mitchell' | 'lanczos3';
  premultiply: boolean;
  linearRGB: boolean;
 }

+export interface QuantOptions {
+  numColors: number;
+  dither: number;
+}
+
+export interface RotateOptions {
+  numRotations: number;
+}
+
 declare global {
  // Needed for being able to use ImageData as type in codec types
-  type ImageData = typeof import('./image_data.js');
+  type ImageData = import('./image_data.js').default;
  // Needed for being able to assign to `globalThis.ImageData`
  var ImageData: ImageData['constructor'];
 }
@@ -33,34 +56,47 @@ declare global {
 import type { QuantizerModule } from '../../codecs/imagequant/imagequant.js';

 // MozJPEG
+import type { MozJPEGModule as MozJPEGEncodeModule } from '../../codecs/mozjpeg/enc/mozjpeg_enc';
 import mozEnc from '../../codecs/mozjpeg/enc/mozjpeg_node_enc.js';
 import mozEncWasm from 'asset-url:../../codecs/mozjpeg/enc/mozjpeg_node_enc.wasm';
 import mozDec from '../../codecs/mozjpeg/dec/mozjpeg_node_dec.js';
 import mozDecWasm from 'asset-url:../../codecs/mozjpeg/dec/mozjpeg_node_dec.wasm';
+import type { EncodeOptions as MozJPEGEncodeOptions } from '../../codecs/mozjpeg/enc/mozjpeg_enc';

 // WebP
+import type { WebPModule as WebPEncodeModule } from '../../codecs/webp/enc/webp_enc';
 import webpEnc from '../../codecs/webp/enc/webp_node_enc.js';
 import webpEncWasm from 'asset-url:../../codecs/webp/enc/webp_node_enc.wasm';
 import webpDec from '../../codecs/webp/dec/webp_node_dec.js';
 import webpDecWasm from 'asset-url:../../codecs/webp/dec/webp_node_dec.wasm';
+import type { EncodeOptions as WebPEncodeOptions } from '../../codecs/webp/enc/webp_enc.js';

 // AVIF
+import type { AVIFModule as AVIFEncodeModule } from '../../codecs/avif/enc/avif_enc';
 import avifEnc from '../../codecs/avif/enc/avif_node_enc.js';
 import avifEncWasm from 'asset-url:../../codecs/avif/enc/avif_node_enc.wasm';
+import avifEncMt from '../../codecs/avif/enc/avif_node_enc_mt.js';
+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';
+import type { EncodeOptions as AvifEncodeOptions } from '../../codecs/avif/enc/avif_enc.js';

 // JXL
+import type { JXLModule as JXLEncodeModule } from '../../codecs/jxl/enc/jxl_enc';
 import jxlEnc from '../../codecs/jxl/enc/jxl_node_enc.js';
 import jxlEncWasm from 'asset-url:../../codecs/jxl/enc/jxl_node_enc.wasm';
 import jxlDec from '../../codecs/jxl/dec/jxl_node_dec.js';
 import jxlDecWasm from 'asset-url:../../codecs/jxl/dec/jxl_node_dec.wasm';
+import type { EncodeOptions as JxlEncodeOptions } from '../../codecs/jxl/enc/jxl_enc.js';

 // WP2
+import type { WP2Module as WP2EncodeModule } from '../../codecs/wp2/enc/wp2_enc';
 import wp2Enc from '../../codecs/wp2/enc/wp2_node_enc.js';
 import wp2EncWasm from 'asset-url:../../codecs/wp2/enc/wp2_node_enc.wasm';
 import wp2Dec from '../../codecs/wp2/dec/wp2_node_dec.js';
 import wp2DecWasm from 'asset-url:../../codecs/wp2/dec/wp2_node_dec.wasm';
+import type { EncodeOptions as WP2EncodeOptions } from '../../codecs/wp2/enc/wp2_enc.js';

 // PNG
 import * as pngEncDec from '../../codecs/png/pkg/squoosh_png.js';
@@ -73,6 +109,9 @@ const pngEncDecPromise = pngEncDec.default(
 import * as oxipng from '../../codecs/oxipng/pkg/squoosh_oxipng.js';
 import oxipngWasm from 'asset-url:../../codecs/oxipng/pkg/squoosh_oxipng_bg.wasm';
 const oxipngPromise = oxipng.default(fsp.readFile(pathify(oxipngWasm)));
+interface OxiPngEncodeOptions {
+  level: number;
+}

 // Resize
 import * as resize from '../../codecs/resize/pkg/squoosh_resize.js';
@@ -149,13 +188,7 @@ export const preprocessors = {
        buffer: Uint8Array,
        input_width: number,
        input_height: number,
-        {
-          width,
-          height,
-          method,
-          premultiply,
-          linearRGB,
-        }: ResizeInstantiateOptions,
+        { width, height, method, premultiply, linearRGB }: ResizeOptions,
      ) => {
        ({ width, height } = resizeWithAspect({
          input_width,
@@ -196,7 +229,7 @@ export const preprocessors = {
        buffer: Uint8Array,
        width: number,
        height: number,
-        { numColors, dither }: { numColors: number; dither: number },
+        { numColors, dither }: QuantOptions,
      ) =>
        new ImageData(
          imageQuant.quantize(buffer, width, height, numColors, dither),
@@ -217,7 +250,7 @@ export const preprocessors = {
        buffer: Uint8Array,
        width: number,
        height: number,
-        { numRotations }: { numRotations: number },
+        { numRotations }: RotateOptions,
      ) => {
        const degrees = (numRotations * 90) % 360;
        const sameDimensions = degrees == 0 || degrees == 180;
@@ -246,15 +279,20 @@ export const preprocessors = {
      numRotations: 0,
    },
  },
-};
+} as const;

 export const codecs = {
  mozjpeg: {
    name: 'MozJPEG',
    extension: 'jpg',
    detectors: [/^\xFF\xD8\xFF/],
-    dec: () => instantiateEmscriptenWasm(mozDec, mozDecWasm),
-    enc: () => instantiateEmscriptenWasm(mozEnc, mozEncWasm),
+    dec: () =>
+      instantiateEmscriptenWasm(mozDec as DecodeModuleFactory, mozDecWasm),
+    enc: () =>
+      instantiateEmscriptenWasm(
+        mozEnc as EmscriptenWasm.ModuleFactory<MozJPEGEncodeModule>,
+        mozEncWasm,
+      ),
    defaultEncoderOptions: {
      quality: 75,
      baseline: false,
@@ -282,9 +320,14 @@ export const codecs = {
  webp: {
    name: 'WebP',
    extension: 'webp',
-    detectors: [/^RIFF....WEBPVP8[LX ]/],
-    dec: () => instantiateEmscriptenWasm(webpDec, webpDecWasm),
-    enc: () => instantiateEmscriptenWasm(webpEnc, webpEncWasm),
+    detectors: [/^RIFF....WEBPVP8[LX ]/s],
+    dec: () =>
+      instantiateEmscriptenWasm(webpDec as DecodeModuleFactory, webpDecWasm),
+    enc: () =>
+      instantiateEmscriptenWasm(
+        webpEnc as EmscriptenWasm.ModuleFactory<WebPEncodeModule>,
+        webpEncWasm,
+      ),
    defaultEncoderOptions: {
      quality: 75,
      target_size: 0,
@@ -324,8 +367,21 @@ export const codecs = {
    name: 'AVIF',
    extension: 'avif',
    detectors: [/^\x00\x00\x00 ftypavif\x00\x00\x00\x00/],
-    dec: () => instantiateEmscriptenWasm(avifDec, avifDecWasm),
-    enc: () => instantiateEmscriptenWasm(avifEnc, avifEncWasm),
+    dec: () =>
+      instantiateEmscriptenWasm(avifDec as DecodeModuleFactory, avifDecWasm),
+    enc: async () => {
+      if (await threads()) {
+        return instantiateEmscriptenWasm(
+          avifEncMt as EmscriptenWasm.ModuleFactory<AVIFEncodeModule>,
+          avifEncMtWasm,
+          avifEncMtWorker,
+        );
+      }
+      return instantiateEmscriptenWasm(
+        avifEnc as EmscriptenWasm.ModuleFactory<AVIFEncodeModule>,
+        avifEncWasm,
+      );
+    },
    defaultEncoderOptions: {
      cqLevel: 33,
      cqAlphaLevel: -1,
@@ -348,16 +404,22 @@ export const codecs = {
    name: 'JPEG-XL',
    extension: 'jxl',
    detectors: [/^\xff\x0a/],
-    dec: () => instantiateEmscriptenWasm(jxlDec, jxlDecWasm),
-    enc: () => instantiateEmscriptenWasm(jxlEnc, jxlEncWasm),
+    dec: () =>
+      instantiateEmscriptenWasm(jxlDec as DecodeModuleFactory, jxlDecWasm),
+    enc: () =>
+      instantiateEmscriptenWasm(
+        jxlEnc as EmscriptenWasm.ModuleFactory<JXLEncodeModule>,
+        jxlEncWasm,
+      ),
    defaultEncoderOptions: {
-      speed: 4,
+      effort: 1,
      quality: 75,
      progressive: false,
      epf: -1,
-      nearLossless: 0,
      lossyPalette: false,
      decodingSpeedTier: 0,
+      photonNoiseIso: 0,
+      lossyModular: false,
    },
    autoOptimize: {
      option: 'quality',
@@ -369,8 +431,13 @@ export const codecs = {
    name: 'WebP2',
    extension: 'wp2',
    detectors: [/^\xF4\xFF\x6F/],
-    dec: () => instantiateEmscriptenWasm(wp2Dec, wp2DecWasm),
-    enc: () => instantiateEmscriptenWasm(wp2Enc, wp2EncWasm),
+    dec: () =>
+      instantiateEmscriptenWasm(wp2Dec as DecodeModuleFactory, wp2DecWasm),
+    enc: () =>
+      instantiateEmscriptenWasm(
+        wp2Enc as EmscriptenWasm.ModuleFactory<WP2EncodeModule>,
+        wp2EncWasm,
+      ),
    defaultEncoderOptions: {
      quality: 75,
      alpha_quality: 75,
@@ -401,7 +468,7 @@ export const codecs = {
      await oxipngPromise;
      return {
        encode: (
-          buffer: Uint8Array,
+          buffer: Uint8ClampedArray | ArrayBuffer,
          width: number,
          height: number,
          opts: { level: number },
@@ -424,4 +491,13 @@ export const codecs = {
      max: 1,
    },
  },
+} as const;
+
+export {
+  MozJPEGEncodeOptions,
+  WebPEncodeOptions,
+  AvifEncodeOptions,
+  JxlEncodeOptions,
+  WP2EncodeOptions,
+  OxiPngEncodeOptions,
 };
--- a/libsquoosh/src/emscripten-utils.ts
+++ b/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 pathify(workerJS);
+      return requestPath;
    },
  });
 }
--- a/libsquoosh/src/index.js
+++ b/libsquoosh/src/index.js
@@ -1,224 +0,0 @@
-import { isMainThread } from 'worker_threads';
-import { cpus } from 'os';
-import { promises as fsp } from 'fs';
-
-import { codecs as encoders, preprocessors } from './codecs.js';
-import WorkerPool from './worker_pool.js';
-import { autoOptimize } from './auto-optimizer.js';
-
-export { ImagePool, encoders, preprocessors };
-
-async function decodeFile({ file }) {
-  let buffer;
-  if (ArrayBuffer.isView(file)) {
-    buffer = Buffer.from(file.buffer);
-    file = 'Binary blob';
-  } else if (file instanceof ArrayBuffer) {
-    buffer = Buffer.from(file);
-    file = 'Binary blob';
-  } else if (file instanceof Buffer) {
-    buffer = file;
-    file = 'Binary blob';
-  } else if (typeof file === 'string') {
-    buffer = await fsp.readFile(file);
-  } else {
-    throw Error('Unexpected input type');
-  }
-  const firstChunk = buffer.slice(0, 16);
-  const firstChunkString = Array.from(firstChunk)
-    .map((v) => String.fromCodePoint(v))
-    .join('');
-  const key = Object.entries(encoders).find(([name, { detectors }]) =>
-    detectors.some((detector) => detector.exec(firstChunkString)),
-  )?.[0];
-  if (!key) {
-    throw Error(`${file} has an unsupported format`);
-  }
-  const rgba = (await encoders[key].dec()).decode(new Uint8Array(buffer));
-  return {
-    bitmap: rgba,
-    size: buffer.length,
-  };
-}
-
-async function preprocessImage({ preprocessorName, options, image }) {
-  const preprocessor = await preprocessors[preprocessorName].instantiate();
-  image.bitmap = await preprocessor(
-    image.bitmap.data,
-    image.bitmap.width,
-    image.bitmap.height,
-    options,
-  );
-  return image;
-}
-
-async function encodeImage({
-  bitmap: bitmapIn,
-  encName,
-  encConfig,
-  optimizerButteraugliTarget,
-  maxOptimizerRounds,
-}) {
-  let binary;
-  let optionsUsed = encConfig;
-  const encoder = await encoders[encName].enc();
-  if (encConfig === 'auto') {
-    const optionToOptimize = encoders[encName].autoOptimize.option;
-    const decoder = await encoders[encName].dec();
-    const encode = (bitmapIn, quality) =>
-      encoder.encode(
-        bitmapIn.data,
-        bitmapIn.width,
-        bitmapIn.height,
-        Object.assign({}, encoders[encName].defaultEncoderOptions, {
-          [optionToOptimize]: quality,
-        }),
-      );
-    const decode = (binary) => decoder.decode(binary);
-    const { binary: optimizedBinary, quality } = await autoOptimize(
-      bitmapIn,
-      encode,
-      decode,
-      {
-        min: encoders[encName].autoOptimize.min,
-        max: encoders[encName].autoOptimize.max,
-        butteraugliDistanceGoal: optimizerButteraugliTarget,
-        maxRounds: maxOptimizerRounds,
-      },
-    );
-    binary = optimizedBinary;
-    optionsUsed = {
-      // 5 significant digits is enough
-      [optionToOptimize]: Math.round(quality * 10000) / 10000,
-    };
-  } else {
-    binary = encoder.encode(
-      bitmapIn.data.buffer,
-      bitmapIn.width,
-      bitmapIn.height,
-      encConfig,
-    );
-  }
-  return {
-    optionsUsed,
-    binary,
-    extension: encoders[encName].extension,
-    size: binary.length,
-  };
-}
-
-// both decoding and encoding go through the worker pool
-function handleJob(params) {
-  const { operation } = params;
-  switch (operation) {
-    case 'encode':
-      return encodeImage(params);
-    case 'decode':
-      return decodeFile(params);
-    case 'preprocess':
-      return preprocessImage(params);
-    default:
-      throw Error(`Invalid job "${operation}"`);
-  }
-}
-
-/**
- * Represents an ingested image.
- */
-class Image {
-  constructor(workerPool, file) {
-    this.file = file;
-    this.workerPool = workerPool;
-    this.decoded = workerPool.dispatchJob({ operation: 'decode', file });
-    this.encodedWith = {};
-  }
-
-  /**
-   * Define one or several preprocessors to use on the image.
-   * @param {object} preprocessOptions - An object with preprocessors to use, and their settings.
-   * @returns {Promise<undefined>} - A promise that resolves when all preprocessors have completed their work.
-   */
-  async preprocess(preprocessOptions = {}) {
-    for (const [name, options] of Object.entries(preprocessOptions)) {
-      if (!Object.keys(preprocessors).includes(name)) {
-        throw Error(`Invalid preprocessor "${name}"`);
-      }
-      const preprocessorOptions = Object.assign(
-        {},
-        preprocessors[name].defaultOptions,
-        options,
-      );
-      this.decoded = this.workerPool.dispatchJob({
-        operation: 'preprocess',
-        preprocessorName: name,
-        image: await this.decoded,
-        options: preprocessorOptions,
-      });
-      await this.decoded;
-    }
-  }
-
-  /**
-   * Define one or several encoders to use on the image.
-   * @param {object} encodeOptions - An object with encoders to use, and their settings.
-   * @returns {Promise<undefined>} - A promise that resolves when the image has been encoded with all the specified encoders.
-   */
-  async encode(encodeOptions = {}) {
-    const { bitmap } = await this.decoded;
-    for (const [encName, options] of Object.entries(encodeOptions)) {
-      if (!Object.keys(encoders).includes(encName)) {
-        continue;
-      }
-      const encRef = encoders[encName];
-      const encConfig =
-        typeof options === 'string'
-          ? options
-          : Object.assign({}, encRef.defaultEncoderOptions, options);
-      this.encodedWith[encName] = this.workerPool.dispatchJob({
-        operation: 'encode',
-        bitmap,
-        encName,
-        encConfig,
-        optimizerButteraugliTarget: Number(
-          encodeOptions.optimizerButteraugliTarget ?? 1.4,
-        ),
-        maxOptimizerRounds: Number(encodeOptions.maxOptimizerRounds ?? 6),
-      });
-    }
-    await Promise.all(Object.values(this.encodedWith));
-  }
-}
-
-/**
- * A pool where images can be ingested and squooshed.
- */
-class ImagePool {
-  /**
-   * Create a new pool.
-   * @param {number} [threads] - Number of concurrent image processes to run in the pool. Defaults to the number of CPU cores in the system.
-   */
-  constructor(threads) {
-    this.workerPool = new WorkerPool(threads || cpus().length, __filename);
-  }
-
-  /**
-   * Ingest an image into the image pool.
-   * @param {string | Buffer | URL | object} image - The image or path to the image that should be ingested and decoded.
-   * @returns {Image} - A custom class reference to the decoded image.
-   */
-  ingestImage(image) {
-    return new Image(this.workerPool, image);
-  }
-
-  /**
-   * Closes the underlying image processing pipeline. The already processed images will still be there, but no new processing can start.
-   * @returns {Promise<undefined>} - A promise that resolves when the underlying pipeline has closed.
-   */
-  async close() {
-    await this.workerPool.join();
-  }
-}
-
-if (!isMainThread) {
-  WorkerPool.useThisThreadAsWorker(handleJob);
-}
--- a/libsquoosh/src/index.ts
+++ b/libsquoosh/src/index.ts
@@ -0,0 +1,308 @@
+import { isMainThread } from 'worker_threads';
+
+import {
+  AvifEncodeOptions,
+  codecs as encoders,
+  JxlEncodeOptions,
+  MozJPEGEncodeOptions,
+  OxiPngEncodeOptions,
+  preprocessors,
+  QuantOptions,
+  ResizeOptions,
+  RotateOptions,
+  WebPEncodeOptions,
+  WP2EncodeOptions,
+} from './codecs.js';
+import WorkerPool from './worker_pool.js';
+import { autoOptimize } from './auto-optimizer.js';
+import type ImageData from './image_data';
+
+export { ImagePool, encoders, preprocessors };
+type EncoderKey = keyof typeof encoders;
+type PreprocessorKey = keyof typeof preprocessors;
+
+type PreprocessOptions = {
+  resize?: Partial<Omit<ResizeOptions, 'width' | 'height'>> &
+    (Pick<ResizeOptions, 'width'> | Pick<ResizeOptions, 'height'>);
+  quant?: Partial<QuantOptions>;
+  rotate?: Partial<RotateOptions>;
+};
+type EncodeResult = {
+  optionsUsed: object;
+  binary: Uint8Array;
+  extension: string;
+  size: number;
+};
+type EncoderOptions = {
+  mozjpeg?: Partial<MozJPEGEncodeOptions>;
+  webp?: Partial<WebPEncodeOptions>;
+  avif?: Partial<AvifEncodeOptions>;
+  jxl?: Partial<JxlEncodeOptions>;
+  wp2?: Partial<WP2EncodeOptions>;
+  oxipng?: Partial<OxiPngEncodeOptions>;
+};
+
+async function decodeFile({
+  file,
+}: {
+  file: ArrayBuffer | ArrayLike<number>;
+}): Promise<{ bitmap: ImageData; size: number }> {
+  const array = new Uint8Array(file);
+  const firstChunk = array.slice(0, 16);
+  const firstChunkString = Array.from(firstChunk)
+    .map((v) => String.fromCodePoint(v))
+    .join('');
+  const key = Object.entries(encoders).find(([_name, { detectors }]) =>
+    detectors.some((detector) => detector.exec(firstChunkString)),
+  )?.[0] as EncoderKey | undefined;
+  if (!key) {
+    throw Error(`File has an unsupported format`);
+  }
+  const encoder = encoders[key];
+  const mod = await encoder.dec();
+  const rgba = mod.decode(array);
+  return {
+    bitmap: rgba,
+    size: array.length,
+  };
+}
+
+async function preprocessImage({
+  preprocessorName,
+  options,
+  image,
+}: {
+  preprocessorName: PreprocessorKey;
+  options: any;
+  image: { bitmap: ImageData };
+}) {
+  const preprocessor = await preprocessors[preprocessorName].instantiate();
+  image.bitmap = await preprocessor(
+    Uint8Array.from(image.bitmap.data),
+    image.bitmap.width,
+    image.bitmap.height,
+    options,
+  );
+  return image;
+}
+
+async function encodeImage({
+  bitmap: bitmapIn,
+  encName,
+  encConfig,
+  optimizerButteraugliTarget,
+  maxOptimizerRounds,
+}: {
+  bitmap: ImageData;
+  encName: EncoderKey;
+  encConfig: any;
+  optimizerButteraugliTarget: number;
+  maxOptimizerRounds: number;
+}): Promise<EncodeResult> {
+  let binary: Uint8Array;
+  let optionsUsed = encConfig;
+  const encoder = await encoders[encName].enc();
+  if (encConfig === 'auto') {
+    const optionToOptimize = encoders[encName].autoOptimize.option;
+    const decoder = await encoders[encName].dec();
+    const encode = (bitmapIn: ImageData, quality: number) =>
+      encoder.encode(
+        bitmapIn.data,
+        bitmapIn.width,
+        bitmapIn.height,
+        Object.assign({}, encoders[encName].defaultEncoderOptions as any, {
+          [optionToOptimize]: quality,
+        }),
+      );
+    const decode = (binary: Uint8Array) => decoder.decode(binary);
+    const nonNullEncode = (bitmap: ImageData, quality: number): Uint8Array => {
+      const result = encode(bitmap, quality);
+      if (!result) {
+        throw new Error('There was an error while encoding');
+      }
+      return result;
+    };
+    const { binary: optimizedBinary, quality } = await autoOptimize(
+      bitmapIn,
+      nonNullEncode,
+      decode,
+      {
+        min: encoders[encName].autoOptimize.min,
+        max: encoders[encName].autoOptimize.max,
+        butteraugliDistanceGoal: optimizerButteraugliTarget,
+        maxRounds: maxOptimizerRounds,
+      },
+    );
+    binary = optimizedBinary;
+    optionsUsed = {
+      // 5 significant digits is enough
+      [optionToOptimize]: Math.round(quality * 10000) / 10000,
+    };
+  } else {
+    const result = encoder.encode(
+      bitmapIn.data.buffer,
+      bitmapIn.width,
+      bitmapIn.height,
+      encConfig,
+    );
+
+    if (!result) {
+      throw new Error('There was an error while encoding');
+    }
+
+    binary = result;
+  }
+  return {
+    optionsUsed,
+    binary,
+    extension: encoders[encName].extension,
+    size: binary.length,
+  };
+}
+
+type EncodeParams = { operation: 'encode' } & Parameters<typeof encodeImage>[0];
+type DecodeParams = { operation: 'decode' } & Parameters<typeof decodeFile>[0];
+type PreprocessParams = { operation: 'preprocess' } & Parameters<
+  typeof preprocessImage
+>[0];
+type JobMessage = EncodeParams | DecodeParams | PreprocessParams;
+
+function handleJob(params: JobMessage) {
+  switch (params.operation) {
+    case 'encode':
+      return encodeImage(params);
+    case 'decode':
+      return decodeFile(params);
+    case 'preprocess':
+      return preprocessImage(params);
+    default:
+      throw Error(`Invalid job "${(params as any).operation}"`);
+  }
+}
+
+/**
+ * Represents an ingested image.
+ */
+class Image {
+  public file: ArrayBuffer | ArrayLike<number>;
+  public workerPool: WorkerPool<JobMessage, any>;
+  public decoded: Promise<{ bitmap: ImageData }>;
+  public encodedWith: { [key in EncoderKey]?: EncodeResult };
+
+  constructor(
+    workerPool: WorkerPool<JobMessage, any>,
+    file: ArrayBuffer | ArrayLike<number>,
+  ) {
+    this.file = file;
+    this.workerPool = workerPool;
+    this.decoded = workerPool.dispatchJob({ operation: 'decode', file });
+    this.encodedWith = {};
+  }
+
+  /**
+   * Define one or several preprocessors to use on the image.
+   * @param {PreprocessOptions} preprocessOptions - An object with preprocessors to use, and their settings.
+   * @returns {Promise<undefined>} - A promise that resolves when all preprocessors have completed their work.
+   */
+  async preprocess(preprocessOptions: PreprocessOptions = {}) {
+    for (const [name, options] of Object.entries(preprocessOptions)) {
+      if (!Object.keys(preprocessors).includes(name)) {
+        throw Error(`Invalid preprocessor "${name}"`);
+      }
+      const preprocessorName = name as PreprocessorKey;
+      const preprocessorOptions = Object.assign(
+        {},
+        preprocessors[preprocessorName].defaultOptions,
+        options,
+      );
+      this.decoded = this.workerPool.dispatchJob({
+        operation: 'preprocess',
+        preprocessorName,
+        image: await this.decoded,
+        options: preprocessorOptions,
+      });
+      await this.decoded;
+    }
+  }
+
+  /**
+   * Define one or several encoders to use on the image.
+   * @param {object} encodeOptions - An object with encoders to use, and their settings.
+   * @returns {Promise<{ [key in keyof T]: EncodeResult }>} - A promise that resolves when the image has been encoded with all the specified encoders.
+   */
+  async encode<T extends EncoderOptions>(
+    encodeOptions: {
+      optimizerButteraugliTarget?: number;
+      maxOptimizerRounds?: number;
+    } & T,
+  ): Promise<{ [key in keyof T]: EncodeResult }> {
+    const { bitmap } = await this.decoded;
+    const setEncodedWithPromises = [];
+    for (const [name, options] of Object.entries(encodeOptions)) {
+      if (!Object.keys(encoders).includes(name)) {
+        continue;
+      }
+      const encName = name as EncoderKey;
+      const encRef = encoders[encName];
+      const encConfig =
+        typeof options === 'string'
+          ? options
+          : Object.assign({}, encRef.defaultEncoderOptions, options);
+      setEncodedWithPromises.push(
+        this.workerPool
+          .dispatchJob({
+            operation: 'encode',
+            bitmap,
+            encName,
+            encConfig,
+            optimizerButteraugliTarget: Number(
+              encodeOptions.optimizerButteraugliTarget ?? 1.4,
+            ),
+            maxOptimizerRounds: Number(encodeOptions.maxOptimizerRounds ?? 6),
+          })
+          .then((encodeResult) => {
+            this.encodedWith[encName] = encodeResult;
+          }),
+      );
+    }
+
+    await Promise.all(setEncodedWithPromises);
+    return this.encodedWith as { [key in keyof T]: EncodeResult };
+  }
+}
+
+/**
+ * A pool where images can be ingested and squooshed.
+ */
+class ImagePool {
+  public workerPool: WorkerPool<JobMessage, any>;
+
+  /**
+   * Create a new pool.
+   * @param {number} [threads] - Number of concurrent image processes to run in the pool.
+   */
+  constructor(threads: number) {
+    this.workerPool = new WorkerPool(threads, __filename);
+  }
+
+  /**
+   * Ingest an image into the image pool.
+   * @param {ArrayBuffer | ArrayLike<number>} file - The image that should be ingested and decoded.
+   * @returns {Image} - A custom class reference to the decoded image.
+   */
+  ingestImage(file: ArrayBuffer | ArrayLike<number>): Image {
+    return new Image(this.workerPool, file);
+  }
+
+  /**
+   * Closes the underlying image processing pipeline. The already processed images will still be there, but no new processing can start.
+   * @returns {Promise<void>} - A promise that resolves when the underlying pipeline has closed.
+   */
+  async close(): Promise<void> {
+    await this.workerPool.join();
+  }
+}
+
+if (!isMainThread) {
+  WorkerPool.useThisThreadAsWorker(handleJob);
+}
--- a/libsquoosh/src/missing-types.d.ts
+++ b/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
--- a/libsquoosh/src/worker_pool.ts
+++ b/libsquoosh/src/worker_pool.ts
@@ -7,26 +7,19 @@ function uuid() {
  ).join('');
 }

-function jobPromise(worker, msg) {
-  return new Promise((resolve, reject) => {
-    const id = uuid();
-    worker.postMessage({ msg, id });
-    worker.on('message', function f({ error, result, id: rid }) {
-      if (rid !== id) {
-        return;
-      }
-      if (error) {
-        reject(error);
-        return;
-      }
-      worker.off('message', f);
-      resolve(result);
-    });
-  });
+interface Job<I> {
+  msg: I;
+  resolve: Function;
+  reject: Function;
 }

-export default class WorkerPool {
-  constructor(numWorkers, workerFile) {
+export default class WorkerPool<I, O> {
+  public numWorkers: number;
+  public jobQueue: TransformStream<Job<I>, Job<I>>;
+  public workerQueue: TransformStream<Worker, Worker>;
+  public done: Promise<void>;
+
+  constructor(numWorkers: number, workerFile: string) {
    this.numWorkers = numWorkers;
    this.jobQueue = new TransformStream();
    this.workerQueue = new TransformStream();
@@ -48,9 +41,14 @@ export default class WorkerPool {
        await this._terminateAll();
        return;
      }
+
+      if (!value) {
+        throw new Error('Reader did not return any value');
+      }
+
      const { msg, resolve, reject } = value;
      const worker = await this._nextWorker();
-      jobPromise(worker, msg)
+      this.jobPromise(worker, msg)
        .then((result) => resolve(result))
        .catch((reason) => reject(reason))
        .finally(() => {
@@ -64,8 +62,12 @@ 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();
+    if (!value) {
+      throw new Error('No worker left');
+    }
+
    return value;
  }

@@ -82,7 +84,7 @@ export default class WorkerPool {
    await this.done;
  }

-  dispatchJob(msg) {
+  dispatchJob(msg: I): Promise<O> {
    return new Promise((resolve, reject) => {
      const writer = this.jobQueue.writable.getWriter();
      writer.write({ msg, resolve, reject });
@@ -90,14 +92,32 @@ export default class WorkerPool {
    });
  }

-  static useThisThreadAsWorker(cb) {
-    parentPort.on('message', async (data) => {
+  private jobPromise(worker: Worker, msg: I) {
+    return new Promise((resolve, reject) => {
+      const id = uuid();
+      worker.postMessage({ msg, id });
+      worker.on('message', function f({ error, result, id: rid }) {
+        if (rid !== id) {
+          return;
+        }
+        if (error) {
+          reject(error);
+          return;
+        }
+        worker.off('message', f);
+        resolve(result);
+      });
+    });
+  }
+
+  static useThisThreadAsWorker<I, O>(cb: (msg: I) => O) {
+    parentPort!.on('message', async (data) => {
      const { msg, id } = data;
      try {
        const result = await cb(msg);
-        parentPort.postMessage({ result, id });
+        parentPort!.postMessage({ result, id });
      } catch (e) {
-        parentPort.postMessage({ error: e.message, id });
+        parentPort!.postMessage({ error: e.message, id });
      }
    });
  }
--- a/libsquoosh/tsconfig.json
+++ b/libsquoosh/tsconfig.json
@@ -3,7 +3,8 @@
  "compilerOptions": {
    "lib": ["esnext"],
    "types": ["node"],
-    "allowJs": true
+    "allowJs": true,
+    "declaration": true
  },
  "include": ["src/**/*", "../codecs/**/*"]
 }
--- a/missing-types.d.ts
+++ b/missing-types.d.ts
@@ -44,6 +44,11 @@ declare module 'data-url:*' {
  export default url;
 }

+declare module 'data-url-text:*' {
+  const url: string;
+  export default url;
+}
+
 declare module 'service-worker:*' {
  const url: string;
  export default url;
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,15 +16,15 @@
        "@rollup/plugin-replace": "^2.3.4",
        "@surma/rollup-plugin-off-main-thread": "^2.2.2",
        "@types/dedent": "^0.7.0",
-        "@types/mime-types": "^2.1.0",
-        "@types/node": "^14.14.7",
+        "@types/mime-types": "^2.1.1",
+        "@types/node": "^16.11.1",
        "@web/rollup-plugin-import-meta-assets": "^1.0.6",
        "comlink": "^4.3.0",
        "cssnano": "^4.1.10",
        "dedent": "^0.7.0",
        "del": "^5.1.0",
        "file-drop-element": "^1.0.1",
-        "husky": "^4.3.0",
+        "husky": "^7.0.2",
        "idb-keyval": "^3.2.0",
        "image-size": "^0.9.3",
        "linkstate": "^2.0.0",
@@ -32,7 +32,7 @@
        "lodash.camelcase": "^4.3.0",
        "mime-types": "^2.1.28",
        "npm-run-all": "^4.1.5",
-        "pointer-tracker": "^2.4.0",
+        "pointer-tracker": "^2.5.3",
        "postcss": "^7.0.35",
        "postcss-modules": "^3.2.2",
        "postcss-nested": "^4.2.3",
@@ -40,14 +40,28 @@
        "postcss-url": "^8.0.0",
        "preact": "^10.5.5",
        "preact-render-to-string": "^5.1.11",
-        "prettier": "^2.1.2",
+        "prettier": "^2.4.1",
        "rollup": "^2.38.0",
        "rollup-plugin-terser": "^7.0.2",
        "serve": "^11.3.2",
-        "typescript": "^4.1.3",
+        "typescript": "^4.4.4",
        "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",
@@ -301,9 +315,9 @@
      }
    },
    "node_modules/@types/mime-types": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.0.tgz",
-      "integrity": "sha1-nKUs2jY/aZxpRmwqbM2q2RPqenM=",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.1.tgz",
+      "integrity": "sha512-vXOTGVSLR2jMw440moWTC7H19iUyLtP3Z1YTj7cSsubOICinjMxFeb/V57v9QdyyPGbbWolUFSSmSiRSn94tFw==",
      "dev": true
    },
    "node_modules/@types/minimatch": {
@@ -313,9 +327,9 @@
      "dev": true
    },
    "node_modules/@types/node": {
-      "version": "14.14.7",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.7.tgz",
-      "integrity": "sha512-Zw1vhUSQZYw+7u5dAwNbIA9TuTotpzY/OF7sJM9FqPOF3SPjKnxrjoTktXDZgUjybf4cWVBP7O8wvKdSaGHweg==",
+      "version": "16.11.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.1.tgz",
+      "integrity": "sha512-PYGcJHL9mwl1Ek3PLiYgyEKtwTMmkMw4vbiyz/ps3pfdRYLVv+SN7qHVAImrjdAXxgluDEw6Ph4lyv+m9UpRmA==",
      "dev": true
    },
    "node_modules/@types/parse-json": {
@@ -852,12 +866,6 @@
        "node": ">=4"
      }
    },
-    "node_modules/ci-info": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
-      "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
-      "dev": true
-    },
    "node_modules/clean-stack": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -1162,12 +1170,6 @@
      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
      "dev": true
    },
-    "node_modules/compare-versions": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-3.6.0.tgz",
-      "integrity": "sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==",
-      "dev": true
-    },
    "node_modules/compressible": {
      "version": "2.0.18",
      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@@ -2270,31 +2272,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "dev": true,
-      "dependencies": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/find-versions": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/find-versions/-/find-versions-3.2.0.tgz",
-      "integrity": "sha512-P8WRou2S+oe222TOCHitLy8zj+SIsVJh52VP4lvXkaFVnOFFdoWv1H1Jjvel1aI6NCFOAaeAVm8qrI0odiLcww==",
-      "dev": true,
-      "dependencies": {
-        "semver-regex": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
    "node_modules/fs.realpath": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2471,28 +2448,18 @@
      }
    },
    "node_modules/husky": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-4.3.0.tgz",
-      "integrity": "sha512-tTMeLCLqSBqnflBZnlVDhpaIMucSGaYyX6855jM4AguGeWCeSzNdb1mfyWduTZ3pe3SJVvVWGL0jO1iKZVPfTA==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-7.0.2.tgz",
+      "integrity": "sha512-8yKEWNX4z2YsofXAMT7KvA1g8p+GxtB1ffV8XtpAEGuXNAbCV5wdNKH+qTpw8SM9fh4aMPDR+yQuKfgnreyZlg==",
      "dev": true,
-      "dependencies": {
-        "chalk": "^4.0.0",
-        "ci-info": "^2.0.0",
-        "compare-versions": "^3.6.0",
-        "cosmiconfig": "^7.0.0",
-        "find-versions": "^3.2.0",
-        "opencollective-postinstall": "^2.0.2",
-        "pkg-dir": "^4.2.0",
-        "please-upgrade-node": "^3.2.0",
-        "slash": "^3.0.0",
-        "which-pm-runs": "^1.0.0"
-      },
      "bin": {
-        "husky-run": "bin/run.js",
-        "husky-upgrade": "lib/upgrader/bin.js"
+        "husky": "lib/bin.js"
      },
      "engines": {
-        "node": ">=10"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
      }
    },
    "node_modules/icss-replace-symbols": {
@@ -3150,18 +3117,6 @@
        "node": ">=4.0.0"
      }
    },
-    "node_modules/locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "dev": true,
-      "dependencies": {
-        "p-locate": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
    "node_modules/lodash.camelcase": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -3675,15 +3630,6 @@
        "node": ">=6"
      }
    },
-    "node_modules/opencollective-postinstall": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
-      "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==",
-      "dev": true,
-      "bin": {
-        "opencollective-postinstall": "index.js"
-      }
-    },
    "node_modules/p-finally": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
@@ -3693,30 +3639,6 @@
        "node": ">=4"
      }
    },
-    "node_modules/p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "dev": true,
-      "dependencies": {
-        "p-try": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "dev": true,
-      "dependencies": {
-        "p-limit": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
    "node_modules/p-map": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz",
@@ -3729,15 +3651,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/p-try": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
    "node_modules/parent-module": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -3765,15 +3678,6 @@
        "node": ">=4"
      }
    },
-    "node_modules/path-exists": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/path-is-absolute": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -3849,18 +3753,6 @@
        "node": ">=4"
      }
    },
-    "node_modules/pkg-dir": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-      "dev": true,
-      "dependencies": {
-        "find-up": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
    "node_modules/please-upgrade-node": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
@@ -3871,9 +3763,9 @@
      }
    },
    "node_modules/pointer-tracker": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/pointer-tracker/-/pointer-tracker-2.4.0.tgz",
-      "integrity": "sha512-pWI2tpaM/XNtc9mUTv42Rmjf6mkHvE8LT5DDEq0G7baPNhxNM9E3CepubPplSoSLk9E5bwQrAMyDcPVmJyTW4g==",
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/pointer-tracker/-/pointer-tracker-2.5.3.tgz",
+      "integrity": "sha512-LiJUeIbzk4dXq678YeyrZ++mdY17q4n/2sBHfU9wIuvmSzdiPgMvmvWN2g8mY4J7YwYOIrqrZUWP/MfFHVwYtg==",
      "dev": true
    },
    "node_modules/postcss": {
@@ -7515,9 +7407,9 @@
      }
    },
    "node_modules/prettier": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.1.2.tgz",
-      "integrity": "sha512-16c7K+x4qVlJg9rEbXl7HEGmQyZlG4R9AgP+oHKRMsMsuk8s+ATStlf1NpDqyBI1HpVyfjLOeMhH2LvuNvV5Vg==",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.4.1.tgz",
+      "integrity": "sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==",
      "dev": true,
      "bin": {
        "prettier": "bin-prettier.js"
@@ -7794,15 +7686,6 @@
      "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=",
      "dev": true
    },
-    "node_modules/semver-regex": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-2.0.0.tgz",
-      "integrity": "sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/serialize-javascript": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
@@ -8588,9 +8471,9 @@
      }
    },
    "node_modules/typescript": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.3.tgz",
-      "integrity": "sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg==",
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.4.tgz",
+      "integrity": "sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==",
      "dev": true,
      "bin": {
        "tsc": "bin/tsc",
@@ -8694,12 +8577,6 @@
        "node": ">= 8"
      }
    },
-    "node_modules/which-pm-runs": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.0.0.tgz",
-      "integrity": "sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=",
-      "dev": true
-    },
    "node_modules/widest-line": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz",
@@ -9026,9 +8903,9 @@
      }
    },
    "@types/mime-types": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.0.tgz",
-      "integrity": "sha1-nKUs2jY/aZxpRmwqbM2q2RPqenM=",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.1.tgz",
+      "integrity": "sha512-vXOTGVSLR2jMw440moWTC7H19iUyLtP3Z1YTj7cSsubOICinjMxFeb/V57v9QdyyPGbbWolUFSSmSiRSn94tFw==",
      "dev": true
    },
    "@types/minimatch": {
@@ -9038,9 +8915,9 @@
      "dev": true
    },
    "@types/node": {
-      "version": "14.14.7",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.7.tgz",
-      "integrity": "sha512-Zw1vhUSQZYw+7u5dAwNbIA9TuTotpzY/OF7sJM9FqPOF3SPjKnxrjoTktXDZgUjybf4cWVBP7O8wvKdSaGHweg==",
+      "version": "16.11.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.1.tgz",
+      "integrity": "sha512-PYGcJHL9mwl1Ek3PLiYgyEKtwTMmkMw4vbiyz/ps3pfdRYLVv+SN7qHVAImrjdAXxgluDEw6Ph4lyv+m9UpRmA==",
      "dev": true
    },
    "@types/parse-json": {
@@ -9480,12 +9357,6 @@
        "supports-color": "^7.1.0"
      }
    },
-    "ci-info": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
-      "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
-      "dev": true
-    },
    "clean-stack": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -9739,12 +9610,6 @@
      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
      "dev": true
    },
-    "compare-versions": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-3.6.0.tgz",
-      "integrity": "sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==",
-      "dev": true
-    },
    "compressible": {
      "version": "2.0.18",
      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@@ -10662,25 +10527,6 @@
        "to-regex-range": "^5.0.1"
      }
    },
-    "find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "dev": true,
-      "requires": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
-      }
-    },
-    "find-versions": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/find-versions/-/find-versions-3.2.0.tgz",
-      "integrity": "sha512-P8WRou2S+oe222TOCHitLy8zj+SIsVJh52VP4lvXkaFVnOFFdoWv1H1Jjvel1aI6NCFOAaeAVm8qrI0odiLcww==",
-      "dev": true,
-      "requires": {
-        "semver-regex": "^2.0.0"
-      }
-    },
    "fs.realpath": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -10827,22 +10673,10 @@
      "dev": true
    },
    "husky": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-4.3.0.tgz",
-      "integrity": "sha512-tTMeLCLqSBqnflBZnlVDhpaIMucSGaYyX6855jM4AguGeWCeSzNdb1mfyWduTZ3pe3SJVvVWGL0jO1iKZVPfTA==",
-      "dev": true,
-      "requires": {
-        "chalk": "^4.0.0",
-        "ci-info": "^2.0.0",
-        "compare-versions": "^3.6.0",
-        "cosmiconfig": "^7.0.0",
-        "find-versions": "^3.2.0",
-        "opencollective-postinstall": "^2.0.2",
-        "pkg-dir": "^4.2.0",
-        "please-upgrade-node": "^3.2.0",
-        "slash": "^3.0.0",
-        "which-pm-runs": "^1.0.0"
-      }
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-7.0.2.tgz",
+      "integrity": "sha512-8yKEWNX4z2YsofXAMT7KvA1g8p+GxtB1ffV8XtpAEGuXNAbCV5wdNKH+qTpw8SM9fh4aMPDR+yQuKfgnreyZlg==",
+      "dev": true
    },
    "icss-replace-symbols": {
      "version": "1.1.0",
@@ -11380,15 +11214,6 @@
        "json5": "^1.0.1"
      }
    },
-    "locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "dev": true,
-      "requires": {
-        "p-locate": "^4.1.0"
-      }
-    },
    "lodash.camelcase": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -11801,36 +11626,12 @@
        "mimic-fn": "^2.1.0"
      }
    },
-    "opencollective-postinstall": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
-      "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==",
-      "dev": true
-    },
    "p-finally": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
      "dev": true
    },
-    "p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "dev": true,
-      "requires": {
-        "p-try": "^2.0.0"
-      }
-    },
-    "p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "dev": true,
-      "requires": {
-        "p-limit": "^2.2.0"
-      }
-    },
    "p-map": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz",
@@ -11840,12 +11641,6 @@
        "aggregate-error": "^3.0.0"
      }
    },
-    "p-try": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-      "dev": true
-    },
    "parent-module": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -11867,12 +11662,6 @@
        "lines-and-columns": "^1.1.6"
      }
    },
-    "path-exists": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true
-    },
    "path-is-absolute": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -11927,15 +11716,6 @@
      "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
      "dev": true
    },
-    "pkg-dir": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-      "dev": true,
-      "requires": {
-        "find-up": "^4.0.0"
-      }
-    },
    "please-upgrade-node": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
@@ -11946,9 +11726,9 @@
      }
    },
    "pointer-tracker": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/pointer-tracker/-/pointer-tracker-2.4.0.tgz",
-      "integrity": "sha512-pWI2tpaM/XNtc9mUTv42Rmjf6mkHvE8LT5DDEq0G7baPNhxNM9E3CepubPplSoSLk9E5bwQrAMyDcPVmJyTW4g==",
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/pointer-tracker/-/pointer-tracker-2.5.3.tgz",
+      "integrity": "sha512-LiJUeIbzk4dXq678YeyrZ++mdY17q4n/2sBHfU9wIuvmSzdiPgMvmvWN2g8mY4J7YwYOIrqrZUWP/MfFHVwYtg==",
      "dev": true
    },
    "postcss": {
@@ -15015,9 +14795,9 @@
      }
    },
    "prettier": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.1.2.tgz",
-      "integrity": "sha512-16c7K+x4qVlJg9rEbXl7HEGmQyZlG4R9AgP+oHKRMsMsuk8s+ATStlf1NpDqyBI1HpVyfjLOeMhH2LvuNvV5Vg==",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.4.1.tgz",
+      "integrity": "sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==",
      "dev": true
    },
    "pretty-format": {
@@ -15243,12 +15023,6 @@
      "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=",
      "dev": true
    },
-    "semver-regex": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-2.0.0.tgz",
-      "integrity": "sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw==",
-      "dev": true
-    },
    "serialize-javascript": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
@@ -15903,9 +15677,9 @@
      "dev": true
    },
    "typescript": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.3.tgz",
-      "integrity": "sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg==",
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.4.tgz",
+      "integrity": "sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==",
      "dev": true
    },
    "uniq": {
@@ -15993,12 +15767,6 @@
        "isexe": "^2.0.0"
      }
    },
-    "which-pm-runs": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.0.0.tgz",
-      "integrity": "sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=",
-      "dev": true
-    },
    "widest-line": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz",
--- a/package.json
+++ b/package.json
@@ -6,9 +6,10 @@
  "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",
+    "prepare": "husky install"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^17.0.0",
@@ -16,15 +17,15 @@
    "@rollup/plugin-replace": "^2.3.4",
    "@surma/rollup-plugin-off-main-thread": "^2.2.2",
    "@types/dedent": "^0.7.0",
-    "@types/mime-types": "^2.1.0",
-    "@types/node": "^14.14.7",
+    "@types/mime-types": "^2.1.1",
+    "@types/node": "^16.11.1",
    "@web/rollup-plugin-import-meta-assets": "^1.0.6",
    "comlink": "^4.3.0",
    "cssnano": "^4.1.10",
    "dedent": "^0.7.0",
    "del": "^5.1.0",
    "file-drop-element": "^1.0.1",
-    "husky": "^4.3.0",
+    "husky": "^7.0.2",
    "idb-keyval": "^3.2.0",
    "image-size": "^0.9.3",
    "linkstate": "^2.0.0",
@@ -32,7 +33,7 @@
    "lodash.camelcase": "^4.3.0",
    "mime-types": "^2.1.28",
    "npm-run-all": "^4.1.5",
-    "pointer-tracker": "^2.4.0",
+    "pointer-tracker": "^2.5.3",
    "postcss": "^7.0.35",
    "postcss-modules": "^3.2.2",
    "postcss-nested": "^4.2.3",
@@ -40,18 +41,13 @@
    "postcss-url": "^8.0.0",
    "preact": "^10.5.5",
    "preact-render-to-string": "^5.1.11",
-    "prettier": "^2.1.2",
+    "prettier": "^2.4.1",
    "rollup": "^2.38.0",
    "rollup-plugin-terser": "^7.0.2",
    "serve": "^11.3.2",
-    "typescript": "^4.1.3",
+    "typescript": "^4.4.4",
    "which": "^2.0.2"
  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
  "lint-staged": {
    "*.{js,css,json,md,ts,tsx}": "prettier --write",
    "*.{c,h,cpp,hpp}": "clang-format -i",
--- a/src/client/initial-app/index.tsx
+++ b/src/client/initial-app/index.tsx
@@ -37,8 +37,10 @@ main();
  ga('set', 'transport', 'beacon');
  ga('set', 'dimension1', displayMode);
  ga('send', 'pageview', '/index.html', { title: 'Squoosh' });
-  // Load the GA script
-  const script = document.createElement('script');
-  script.src = 'https://www.google-analytics.com/analytics.js';
-  document.head.appendChild(script);
+  // Load the GA script without keeping the browser spinner going.
+  addEventListener('load', () => {
+    const script = document.createElement('script');
+    script.src = 'https://www.google-analytics.com/analytics.js';
+    document.head.appendChild(script);
+  });
 }
--- a/src/client/lazy-app/Compress/Options/Checkbox/index.tsx
+++ b/src/client/lazy-app/Compress/Options/Checkbox/index.tsx
@@ -11,7 +11,11 @@ export default class Checkbox extends Component<Props, State> {
    return (
      <div class={style.checkbox}>
        {props.checked ? (
-          <CheckedIcon class={`${style.icon} ${style.checked}`} />
+          props.disabled ? (
+            <CheckedIcon class={`${style.icon} ${style.disabled}`} />
+          ) : (
+            <CheckedIcon class={`${style.icon} ${style.checked}`} />
+          )
        ) : (
          <UncheckedIcon class={style.icon} />
        )}
--- a/src/client/lazy-app/Compress/Options/Checkbox/style.css
+++ b/src/client/lazy-app/Compress/Options/Checkbox/style.css
@@ -20,3 +20,7 @@
 .checked {
  fill: var(--main-theme-color);
 }
+
+.disabled {
+  fill: var(--dark-gray);
+}
--- a/src/client/lazy-app/Compress/Options/Range/custom-els/RangeInput/index.ts
+++ b/src/client/lazy-app/Compress/Options/Range/custom-els/RangeInput/index.ts
@@ -20,7 +20,7 @@ const REFLECTED_ATTRIBUTES = [
  'disabled',
 ];

-function getPrescision(value: string): number {
+function getPrecision(value: string): number {
  const afterDecimal = value.split('.')[1];
  return afterDecimal ? afterDecimal.length : 0;
 }
@@ -112,18 +112,24 @@ class RangeInputElement extends HTMLElement {
    this.dispatchEvent(retargetted);
  };

+  private _getDisplayValue(value: number): string {
+    if (value >= 10000) return (value / 1000).toFixed(1) + 'k';
+
+    const labelPrecision =
+      Number(this.labelPrecision) || getPrecision(this.step) || 0;
+    return labelPrecision
+      ? value.toFixed(labelPrecision)
+      : Math.round(value).toString();
+  }
+
  private _update = () => {
    // Not connected?
    if (!this._valueDisplay) return;
    const value = Number(this.value) || 0;
    const min = Number(this.min) || 0;
    const max = Number(this.max) || 100;
-    const labelPrecision =
-      Number(this.labelPrecision) || getPrescision(this.step) || 0;
    const percent = (100 * (value - min)) / (max - min);
-    const displayValue = labelPrecision
-      ? value.toFixed(labelPrecision)
-      : Math.round(value).toString();
+    const displayValue = this._getDisplayValue(value);

    this._valueDisplay!.textContent = displayValue;
    this.style.setProperty('--value-percent', percent + '%');
--- a/src/client/lazy-app/Compress/Options/Range/index.tsx
+++ b/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>
    );
--- a/src/client/lazy-app/Compress/Options/Range/style.css
+++ b/src/client/lazy-app/Compress/Options/Range/style.css
@@ -35,7 +35,7 @@
  text-decoration-style: dotted;
  text-decoration-color: var(--main-theme-color);
  text-underline-position: under;
-  width: 48px;
+  width: 54px;
  position: relative;
  left: 5px;

--- a/src/client/lazy-app/Compress/Options/index.tsx
+++ b/src/client/lazy-app/Compress/Options/index.tsx
@@ -40,24 +40,23 @@ type PartialButNotUndefined<T> = {
  [P in keyof T]: T[P];
 };

-const supportedEncoderMapP: Promise<PartialButNotUndefined<
-  typeof encoderMap
->> = (async () => {
-  const supportedEncoderMap: PartialButNotUndefined<typeof encoderMap> = {
-    ...encoderMap,
-  };
+const supportedEncoderMapP: Promise<PartialButNotUndefined<typeof encoderMap>> =
+  (async () => {
+    const supportedEncoderMap: PartialButNotUndefined<typeof encoderMap> = {
+      ...encoderMap,
+    };

-  // Filter out entries where the feature test fails
-  await Promise.all(
-    Object.entries(encoderMap).map(async ([encoderName, details]) => {
-      if ('featureTest' in details && !(await details.featureTest())) {
-        delete supportedEncoderMap[encoderName as keyof typeof encoderMap];
-      }
-    }),
-  );
+    // Filter out entries where the feature test fails
+    await Promise.all(
+      Object.entries(encoderMap).map(async ([encoderName, details]) => {
+        if ('featureTest' in details && !(await details.featureTest())) {
+          delete supportedEncoderMap[encoderName as keyof typeof encoderMap];
+        }
+      }),
+    );

-  return supportedEncoderMap;
-})();
+    return supportedEncoderMap;
+  })();

 export default class Options extends Component<Props, State> {
  state: State = {
--- a/src/client/lazy-app/Compress/Options/style.css
+++ b/src/client/lazy-app/Compress/Options/style.css
@@ -1,6 +1,7 @@
 .options-scroller {
  --horizontal-padding: 15px;
  border-radius: var(--scroller-radius);
+  overflow: hidden;

  /* At smaller widths, the multi-panel handles the scrolling */
  @media (min-width: 600px) {
--- a/src/client/lazy-app/Compress/Output/custom-els/PinchZoom/index.ts
+++ b/src/client/lazy-app/Compress/Output/custom-els/PinchZoom/index.ts
@@ -1,5 +1,6 @@
 import PointerTracker, { Pointer } from 'pointer-tracker';
 import 'add-css:./styles.css';
+import { isSafari } from 'client/lazy-app/util';

 interface Point {
  clientX: number;
@@ -81,6 +82,7 @@ function createPoint(): SVGPoint {
 }

 const MIN_SCALE = 0.01;
+const MAX_SCALE = 100000;

 export default class PinchZoom extends HTMLElement {
  // The element that we'll transform.
@@ -104,14 +106,23 @@ export default class PinchZoom extends HTMLElement {
    const pointerTracker: PointerTracker = new PointerTracker(this, {
      start: (pointer, event) => {
        // We only want to track 2 pointers at most
-        if (pointerTracker.currentPointers.length === 2 || !this._positioningEl)
+        if (
+          pointerTracker.currentPointers.length === 2 ||
+          !this._positioningEl
+        ) {
          return false;
+        }
        event.preventDefault();
        return true;
      },
      move: (previousPointers) => {
        this._onPointerMove(previousPointers, pointerTracker.currentPointers);
      },
+      // Unfortunately Safari on iOS has a bug where pointer event capturing
+      // doesn't work in some cases, and we hit those cases due to our event
+      // retargeting in pinch-zoom.
+      // https://bugs.webkit.org/show_bug.cgi?id=220196
+      avoidPointerEvents: isSafari,
    });

    this.addEventListener('wheel', (event) => this._onWheel(event));
@@ -244,6 +255,9 @@ export default class PinchZoom extends HTMLElement {
    // Avoid scaling to zero
    if (scale < MIN_SCALE) return;

+    // Avoid scaling to very large values
+    if (scale > MAX_SCALE) return;
+
    // Return if there's no change
    if (scale === this.scale && x === this.x && y === this.y) return;

@@ -296,9 +310,13 @@ export default class PinchZoom extends HTMLElement {
      deltaY *= 15;
    }

+    const zoomingOut = deltaY > 0;
+
    // ctrlKey is true when pinch-zooming on a trackpad.
    const divisor = ctrlKey ? 100 : 300;
-    const scaleDiff = 1 - deltaY / divisor;
+    // when zooming out, invert the delta and the ratio to keep zoom stable
+    const ratio = 1 - (zoomingOut ? -deltaY : deltaY) / divisor;
+    const scaleDiff = zoomingOut ? 1 / ratio : ratio;

    this._applyChange({
      scaleDiff,
--- a/src/client/lazy-app/Compress/Output/index.tsx
+++ b/src/client/lazy-app/Compress/Output/index.tsx
@@ -5,8 +5,10 @@ import './custom-els/PinchZoom';
 import './custom-els/TwoUp';
 import * as style from './style.css';
 import 'add-css:./style.css';
-import { shallowEqual } from '../../util';
+import { shallowEqual, isSafari } from '../../util';
 import {
+  ToggleAliasingIcon,
+  ToggleAliasingActiveIcon,
  ToggleBackgroundIcon,
  AddIcon,
  RemoveIcon,
@@ -19,7 +21,6 @@ import { cleanSet } from '../../util/clean-modify';
 import type { SourceImage } from '../../Compress';
 import { linkRef } from 'shared/prerendered-app/util';
 import { drawDataToCanvas } from 'client/lazy-app/util/canvas';
-
 interface Props {
  source?: SourceImage;
  preprocessorState?: PreprocessorState;
@@ -35,6 +36,7 @@ interface State {
  scale: number;
  editingScale: boolean;
  altBackground: boolean;
+  aliasing: boolean;
 }

 const scaleToOpts: ScaleToOpts = {
@@ -49,6 +51,7 @@ export default class Output extends Component<Props, State> {
    scale: 1,
    editingScale: false,
    altBackground: false,
+    aliasing: false,
  };
  canvasLeft?: HTMLCanvasElement;
  canvasRight?: HTMLCanvasElement;
@@ -145,6 +148,12 @@ export default class Output extends Component<Props, State> {
    return props.rightCompressed || (props.source && props.source.preprocessed);
  }

+  private toggleAliasing = () => {
+    this.setState((state) => ({
+      aliasing: !state.aliasing,
+    }));
+  };
+
  private toggleBackground = () => {
    this.setState({
      altBackground: !this.state.altBackground,
@@ -255,7 +264,7 @@ export default class Output extends Component<Props, State> {

  render(
    { mobileView, leftImgContain, rightImgContain, source }: Props,
-    { scale, editingScale, altBackground }: State,
+    { scale, editingScale, altBackground, aliasing }: State,
  ) {
    const leftDraw = this.leftDrawable();
    const rightDraw = this.rightDrawable();
@@ -275,7 +284,11 @@ export default class Output extends Component<Props, State> {
            onTouchStartCapture={this.onRetargetableEvent}
            onTouchEndCapture={this.onRetargetableEvent}
            onTouchMoveCapture={this.onRetargetableEvent}
-            onPointerDownCapture={this.onRetargetableEvent}
+            onPointerDownCapture={
+              // We avoid pointer events in our PinchZoom due to a Safari bug.
+              // That means we also need to avoid them here too, else we end up preventing the fallback mouse events.
+              isSafari ? undefined : this.onRetargetableEvent
+            }
            onMouseDownCapture={this.onRetargetableEvent}
            onWheelCapture={this.onRetargetableEvent}
          >
@@ -285,7 +298,9 @@ export default class Output extends Component<Props, State> {
              ref={linkRef(this, 'pinchZoomLeft')}
            >
              <canvas
-                class={style.pinchTarget}
+                class={`${style.pinchTarget} ${
+                  aliasing ? style.pixelated : ''
+                }`}
                ref={linkRef(this, 'canvasLeft')}
                width={leftDraw && leftDraw.width}
                height={leftDraw && leftDraw.height}
@@ -301,7 +316,9 @@ export default class Output extends Component<Props, State> {
              ref={linkRef(this, 'pinchZoomRight')}
            >
              <canvas
-                class={style.pinchTarget}
+                class={`${style.pinchTarget} ${
+                  aliasing ? style.pixelated : ''
+                }`}
                ref={linkRef(this, 'canvasRight')}
                width={rightDraw && rightDraw.width}
                height={rightDraw && rightDraw.height}
@@ -345,10 +362,31 @@ export default class Output extends Component<Props, State> {
            </button>
          </div>
          <div class={style.buttonGroup}>
-            <button class={style.firstButton} onClick={this.onRotateClick}>
+            <button
+              class={style.firstButton}
+              onClick={this.onRotateClick}
+              title="Rotate"
+            >
              <RotateIcon />
            </button>
-            <button class={style.lastButton} onClick={this.toggleBackground}>
+            {!isSafari && (
+              <button
+                class={style.button}
+                onClick={this.toggleAliasing}
+                title="Toggle smoothing"
+              >
+                {aliasing ? (
+                  <ToggleAliasingActiveIcon />
+                ) : (
+                  <ToggleAliasingIcon />
+                )}
+              </button>
+            )}
+            <button
+              class={style.lastButton}
+              onClick={this.toggleBackground}
+              title="Toggle background"
+            >
              {altBackground ? (
                <ToggleBackgroundActiveIcon />
              ) : (
--- a/src/client/lazy-app/Compress/Output/style.css
+++ b/src/client/lazy-app/Compress/Output/style.css
@@ -86,8 +86,7 @@
  font-size: 1.2rem;
  cursor: pointer;

-  &:focus {
-    /* box-shadow: 0 0 0 2px var(--hot-pink); */
+  &:focus-visible {
    box-shadow: 0 0 0 2px #fff;
    outline: none;
    z-index: 1;
@@ -161,3 +160,8 @@ input.zoom {
    pointer-events: auto;
  }
 }
+
+.pixelated {
+  image-rendering: crisp-edges;
+  image-rendering: pixelated;
+}
--- a/src/client/lazy-app/Compress/index.tsx
+++ b/src/client/lazy-app/Compress/index.tsx
@@ -116,7 +116,7 @@ async function decodeImage(
    // Otherwise fall through and try built-in decoding for a laugh.
    return await builtinDecode(signal, blob, mimeType);
  } catch (err) {
-    if (err.name === 'AbortError') throw err;
+    if (err instanceof Error && err.name === 'AbortError') throw err;
    console.log(err);
    throw Error("Couldn't decode image");
  }
@@ -481,7 +481,7 @@ export default class Compress extends Component<Props, State> {
        open('https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli');
      }
    } catch (e) {
-      this.props.showSnack(e);
+      this.props.showSnack(String(e));
    }
  };

@@ -640,7 +640,7 @@ export default class Compress extends Component<Props, State> {
          return { sides };
        });
      } catch (err) {
-        if (err.name === 'AbortError') return;
+        if (err instanceof Error && err.name === 'AbortError') return;
        this.props.showSnack(`Source decoding error: ${err}`);
        throw err;
      }
@@ -698,7 +698,7 @@ export default class Compress extends Component<Props, State> {
          return newState;
        });
      } catch (err) {
-        if (err.name === 'AbortError') return;
+        if (err instanceof Error && err.name === 'AbortError') return;
        this.setState({ loading: false });
        this.props.showSnack(`Preprocessing error: ${err}`);
        throw err;
@@ -822,7 +822,7 @@ export default class Compress extends Component<Props, State> {

        this.activeSideJobs[sideIndex] = undefined;
      } catch (err) {
-        if (err.name === 'AbortError') return;
+        if (err instanceof Error && err.name === 'AbortError') return;
        this.setState((currentState) => {
          const sides = cleanMerge(currentState.sides, sideIndex, {
            loading: false,
--- a/src/client/lazy-app/icons/index.tsx
+++ b/src/client/lazy-app/icons/index.tsx
@@ -11,6 +11,25 @@ const Icon = (props: preact.JSX.HTMLAttributes) => (
  />
 );

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

+/** If render engine is Safari */
+export const isSafari =
+  /Safari\//.test(navigator.userAgent) &&
+  !/Chrom(e|ium)\//.test(navigator.userAgent);
+
 /**
 * Compare two objects, returning a boolean indicating if
 * they have the same properties and strictly equal values.
@@ -95,7 +100,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'],
--- a/src/features/encoders/jxl/client/index.tsx
+++ b/src/features/encoders/jxl/client/index.tsx
@@ -29,10 +29,10 @@ interface State {
  slightLoss: boolean;
  autoEdgePreservingFilter: boolean;
  decodingSpeedTier: number;
+  photonNoiseIso: number;
+  alternativeLossy: boolean;
 }

-const maxSpeed = 7;
-
 export class Options extends Component<Props, State> {
  static getDerivedStateFromProps(
    props: Props,
@@ -47,7 +47,7 @@ export class Options extends Component<Props, State> {
    // Create default form state from options
    return {
      options,
-      effort: maxSpeed - options.speed,
+      effort: options.effort,
      quality: options.quality,
      progressive: options.progressive,
      edgePreservingFilter: options.epf === -1 ? 2 : options.epf,
@@ -55,6 +55,8 @@ export class Options extends Component<Props, State> {
      slightLoss: options.lossyPalette,
      autoEdgePreservingFilter: options.epf === -1,
      decodingSpeedTier: options.decodingSpeedTier,
+      photonNoiseIso: options.photonNoiseIso,
+      alternativeLossy: options.lossyModular,
    };
  }

@@ -87,15 +89,16 @@ export class Options extends Component<Props, State> {
        };

        const newOptions: EncodeOptions = {
-          speed: maxSpeed - optionState.effort,
+          effort: optionState.effort,
          quality: optionState.lossless ? 100 : optionState.quality,
          progressive: optionState.progressive,
          epf: optionState.autoEdgePreservingFilter
            ? -1
            : optionState.edgePreservingFilter,
-          nearLossless: 0,
          lossyPalette: optionState.lossless ? optionState.slightLoss : false,
          decodingSpeedTier: optionState.decodingSpeedTier,
+          photonNoiseIso: optionState.photonNoiseIso,
+          lossyModular: optionState.quality < 7 ? true : optionState.alternativeLossy,
        };

        // Updating options, so we don't recalculate in getDerivedStateFromProps.
@@ -121,6 +124,8 @@ export class Options extends Component<Props, State> {
      slightLoss,
      autoEdgePreservingFilter,
      decodingSpeedTier,
+      photonNoiseIso,
+      alternativeLossy,
    }: State,
  ) {
    // I'm rendering both lossy and lossless forms, as it becomes much easier when
@@ -161,10 +166,17 @@ export class Options extends Component<Props, State> {
                  Quality:
                </Range>
              </div>
+              <label class={style.optionToggle}>
+                Alternative lossy mode
+                <Checkbox
+                  checked={quality < 7 ? true : alternativeLossy}
+                  disabled={quality < 7}
+                  onChange={this._inputChange('alternativeLossy', 'boolean')}
+                />
+              </label>
              <label class={style.optionToggle}>
                Auto edge filter
                <Checkbox
-                  name="autoEdgeFilter"
                  checked={autoEdgePreservingFilter}
                  onChange={this._inputChange(
                    'autoEdgePreservingFilter',
@@ -199,6 +211,17 @@ export class Options extends Component<Props, State> {
                  Optimise for decoding speed (worse compression):
                </Range>
              </div>
+              <div class={style.optionOneCell}>
+                <Range
+                  min="0"
+                  max="50000"
+                  step="100"
+                  value={photonNoiseIso}
+                  onInput={this._inputChange('photonNoiseIso', 'number')}
+                >
+                  Noise equivalent to ISO:
+                </Range>
+              </div>
            </div>
          )}
        </Expander>
@@ -212,8 +235,8 @@ export class Options extends Component<Props, State> {
        </label>
        <div class={style.optionOneCell}>
          <Range
-            min="0"
-            max={maxSpeed - 1}
+            min="1"
+            max="9"
            value={effort}
            onInput={this._inputChange('effort', 'number')}
          >
--- a/src/features/encoders/jxl/shared/meta.ts
+++ b/src/features/encoders/jxl/shared/meta.ts
@@ -18,11 +18,12 @@ export const label = 'JPEG XL (beta)';
 export const mimeType = 'image/jxl';
 export const extension = 'jxl';
 export const defaultOptions: EncodeOptions = {
-  speed: 4,
+  effort: 7,
  quality: 75,
  progressive: false,
  epf: -1,
-  nearLossless: 0,
  lossyPalette: false,
  decodingSpeedTier: 0,
+  photonNoiseIso: 0,
+  lossyModular: false,
 };
--- a/src/features/encoders/oxiPNG/worker/oxipngEncode.ts
+++ b/src/features/encoders/oxiPNG/worker/oxipngEncode.ts
@@ -14,9 +14,11 @@ import { EncodeOptions } from '../shared/meta';
 import { threads } from 'wasm-feature-detect';

 async function initMT() {
-  const { default: init, initThreadPool, optimise } = await import(
-    'codecs/oxipng/pkg-parallel/squoosh_oxipng'
-  );
+  const {
+    default: init,
+    initThreadPool,
+    optimise,
+  } = await import('codecs/oxipng/pkg-parallel/squoosh_oxipng');
  await init();
  await initThreadPool(navigator.hardwareConcurrency);
  return optimise;
--- a/src/shared/custom-els/loading-spinner/index.ts
+++ b/src/shared/custom-els/loading-spinner/index.ts
@@ -2,9 +2,9 @@ import * as styles from './styles.css';
 import 'add-css:./styles.css';

 // So it doesn't cause an error when running in node
-const HTMLEl = ((__PRERENDER__
+const HTMLEl = (__PRERENDER__
  ? Object
-  : HTMLElement) as unknown) as typeof HTMLElement;
+  : HTMLElement) as unknown as typeof HTMLElement;

 /**
 * A simple spinner. This custom element has no JS API. Just put it in the document, and it'll
--- a/src/shared/custom-els/snack-bar/index.ts
+++ b/src/shared/custom-els/snack-bar/index.ts
@@ -2,9 +2,9 @@ import * as style from './styles.css';
 import 'add-css:./styles.css';

 // So it doesn't cause an error when running in node
-const HTMLEl = ((__PRERENDER__
+const HTMLEl = (__PRERENDER__
  ? Object
-  : HTMLElement) as unknown) as typeof HTMLElement;
+  : HTMLElement) as unknown as typeof HTMLElement;

 export interface SnackOptions {
  timeout?: number;
--- a/src/shared/missing-types.d.ts
+++ b/src/shared/missing-types.d.ts
@@ -13,24 +13,3 @@
 /// <reference path="../../missing-types.d.ts" />

 declare const __PRERENDER__: boolean;
-
-type ResizeObserverCallback = (
-  entries: ResizeObserverEntry[],
-  observer: ResizeObserver,
-) => void;
-
-interface ResizeObserverEntry {
-  readonly target: Element;
-  readonly contentRect: DOMRectReadOnly;
-}
-
-interface ResizeObserver {
-  observe(target: Element): void;
-  unobserve(target: Element): void;
-  disconnect(): void;
-}
-
-declare var ResizeObserver: {
-  prototype: ResizeObserver;
-  new (callback: ResizeObserverCallback): ResizeObserver;
-};
--- a/src/shared/prerendered-app/Intro/SlideOnScroll/index.tsx
+++ b/src/shared/prerendered-app/Intro/SlideOnScroll/index.tsx
@@ -0,0 +1,51 @@
+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>;
+  }
+}
--- a/src/shared/prerendered-app/Intro/blob-anim/index.ts
+++ b/src/shared/prerendered-app/Intro/blob-anim/index.ts
@@ -329,10 +329,11 @@ export function startBlobAnim(canvas: HTMLCanvasElement) {
    hasFocus = false;
  };

-  new ResizeObserver(() => {
+  const resizeObserver = new ResizeObserver(() => {
    // Redraw for new canvas size
    if (!animating) drawFrame(0);
-  }).observe(canvas);
+  });
+  resizeObserver.observe(canvas);

  addEventListener('focus', focusListener);
  addEventListener('blur', blurListener);
@@ -341,6 +342,7 @@ export function startBlobAnim(canvas: HTMLCanvasElement) {
  function destruct() {
    removeEventListener('focus', focusListener);
    removeEventListener('blur', blurListener);
+    resizeObserver.disconnect();
    document.removeEventListener('visibilitychange', visibilityListener);
  }

--- a/src/shared/prerendered-app/Intro/imgs/info-content/secure.svg
+++ b/src/shared/prerendered-app/Intro/imgs/info-content/secure.svg
@@ -0,0 +1 @@
+<svg width="498" height="333" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M401.17 125.52C387.072 53.923 324.253.173 248.787.173c-59.916 0-111.954 34.035-137.869 83.841C48.513 90.655 0 143.574 0 207.7c0 68.692 55.77 124.516 124.394 124.516h269.519c57.221 0 103.662-46.486 103.662-103.763 0-54.787-42.502-99.198-96.405-102.933z" fill="#91D3FF" fill-opacity=".3"/><path d="M187.247 121.321l-3.987-3.987-3.481 4.434c-11.519 14.67-18.366 33.15-18.366 53.242 0 48.003 38.882 86.885 86.885 86.885 20.091 0 38.572-6.848 53.242-18.366l4.434-3.482-3.987-3.986-114.74-114.74zM309.348 228.7l3.987 3.986 3.481-4.434c11.519-14.669 18.366-33.15 18.366-53.242 0-48.002-38.882-86.884-86.884-86.884-20.092 0-38.573 6.847-53.242 18.365l-4.435 3.482 3.987 3.986L309.348 228.7zm-158.406-53.69c0-53.739 43.617-97.355 97.356-97.355 53.738 0 97.355 43.616 97.355 97.355 0 53.739-43.617 97.356-97.355 97.356-53.739 0-97.356-43.617-97.356-97.356z" fill="#FF3385" stroke="#FF3385" stroke-width="10"/></svg>
--- a/src/shared/prerendered-app/Intro/imgs/info-content/simple.svg
+++ b/src/shared/prerendered-app/Intro/imgs/info-content/simple.svg
--- a/src/shared/prerendered-app/Intro/imgs/info-content/small.svg
+++ b/src/shared/prerendered-app/Intro/imgs/info-content/small.svg
--- a/src/shared/prerendered-app/Intro/imgs/logo-with-text.svg
+++ b/src/shared/prerendered-app/Intro/imgs/logo-with-text.svg
--- a/src/shared/prerendered-app/Intro/index.tsx
+++ b/src/shared/prerendered-app/Intro/index.tsx
@@ -10,12 +10,16 @@ import deviceScreen from 'url:./imgs/demos/demo-device-screen.png';
 import largePhotoIcon from 'url:./imgs/demos/icon-demo-large-photo.jpg';
 import artworkIcon from 'url:./imgs/demos/icon-demo-artwork.jpg';
 import deviceScreenIcon from 'url:./imgs/demos/icon-demo-device-screen.jpg';
+import smallSectionAsset from 'url:./imgs/info-content/small.svg';
+import simpleSectionAsset from 'url:./imgs/info-content/simple.svg';
+import secureSectionAsset from 'url:./imgs/info-content/secure.svg';
 import logoIcon from 'url:./imgs/demos/icon-demo-logo.png';
-import logoWithText from 'url:./imgs/logo-with-text.svg';
+import logoWithText from 'data-url-text:./imgs/logo-with-text.svg';
 import * as style from './style.css';
 import type SnackBarElement from 'shared/custom-els/snack-bar';
 import 'shared/custom-els/snack-bar';
 import { startBlobs } from './blob-anim/meta';
+import SlideOnScroll from './SlideOnScroll';

 const demos = [
  {
@@ -336,37 +340,125 @@ export default class Intro extends Component<Props, State> {
            </ul>
          </div>
        </div>
-        <div class={style.footer}>
+
+        <div class={style.bottomWave}>
          <svg viewBox="0 0 1920 79" class={style.topWave}>
            <path
              d="M0 59l64-11c64-11 192-34 320-43s256-5 384 4 256 23 384 34 256 21 384 14 256-30 320-41l64-11v94H0z"
-              class={style.footerWave}
+              class={style.infoWave}
            />
          </svg>
-          <div class={style.contentPadding}>
-            <footer class={style.footerItems}>
-              <a
-                class={style.footerLink}
-                href="https://github.com/GoogleChromeLabs/squoosh/blob/dev/README.md#privacy"
-              >
-                Privacy
-              </a>
-              <a
-                class={style.footerLink}
-                href="https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli"
-              >
-                Squoosh CLI
-              </a>
-              <a
-                class={style.footerLinkWithLogo}
-                href="https://github.com/GoogleChromeLabs/squoosh"
-              >
-                <img src={githubLogo} alt="" width="10" height="10" />
-                Source on Github
-              </a>
-            </footer>
-          </div>
        </div>
+
+        <section class={style.info}>
+          <div class={style.infoContainer}>
+            <SlideOnScroll>
+              <div class={style.infoContent}>
+                <div class={style.infoTextWrapper}>
+                  <h2 class={style.infoTitle}>Small</h2>
+                  <p class={style.infoCaption}>
+                    Smaller images mean faster load times. Squoosh can reduce
+                    file size and maintain high quality.
+                  </p>
+                </div>
+                <div class={style.infoImgWrapper}>
+                  <img
+                    class={style.infoImg}
+                    src={smallSectionAsset}
+                    alt="silhouette of a large 1.4 megabyte image shrunk into a smaller 80 kilobyte image"
+                    width="536"
+                    height="522"
+                  />
+                </div>
+              </div>
+            </SlideOnScroll>
+          </div>
+        </section>
+
+        <section class={style.info}>
+          <div class={style.infoContainer}>
+            <SlideOnScroll>
+              <div class={style.infoContent}>
+                <div class={style.infoTextWrapper}>
+                  <h2 class={style.infoTitle}>Simple</h2>
+                  <p class={style.infoCaption}>
+                    Open your image, inspect the differences, then save
+                    instantly. Feeling adventurous? Adjust the settings for even
+                    smaller files.
+                  </p>
+                </div>
+                <div class={style.infoImgWrapper}>
+                  <img
+                    class={style.infoImg}
+                    src={simpleSectionAsset}
+                    alt="grid of multiple shrunk images displaying various options"
+                    width="538"
+                    height="384"
+                  />
+                </div>
+              </div>
+            </SlideOnScroll>
+          </div>
+        </section>
+
+        <section class={style.info}>
+          <div class={style.infoContainer}>
+            <SlideOnScroll>
+              <div class={style.infoContent}>
+                <div class={style.infoTextWrapper}>
+                  <h2 class={style.infoTitle}>Secure</h2>
+                  <p class={style.infoCaption}>
+                    Worried about privacy? Images never leave your device since
+                    Squoosh does all the work locally.
+                  </p>
+                </div>
+                <div class={style.infoImgWrapper}>
+                  <img
+                    class={style.infoImg}
+                    src={secureSectionAsset}
+                    alt="silhouette of a cloud with a 'no' symbol on top"
+                    width="498"
+                    height="333"
+                  />
+                </div>
+              </div>
+            </SlideOnScroll>
+          </div>
+        </section>
+
+        <footer class={style.footer}>
+          <div class={style.footerContainer}>
+            <svg viewBox="0 0 1920 79" class={style.topWave}>
+              <path
+                d="M0 59l64-11c64-11 192-34 320-43s256-5 384 4 256 23 384 34 256 21 384 14 256-30 320-41l64-11v94H0z"
+                class={style.footerWave}
+              />
+            </svg>
+            <div class={style.footerPadding}>
+              <footer class={style.footerItems}>
+                <a
+                  class={style.footerLink}
+                  href="https://github.com/GoogleChromeLabs/squoosh/blob/dev/README.md#privacy"
+                >
+                  Privacy
+                </a>
+                <a
+                  class={style.footerLink}
+                  href="https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli"
+                >
+                  Squoosh CLI
+                </a>
+                <a
+                  class={style.footerLinkWithLogo}
+                  href="https://github.com/GoogleChromeLabs/squoosh"
+                >
+                  <img src={githubLogo} alt="" width="10" height="10" />
+                  Source on Github
+                </a>
+              </footer>
+            </div>
+          </div>
+        </footer>
        {beforeInstallEvent && (
          <button class={style.installBtn} onClick={this.onInstallClick}>
            Install
--- a/src/shared/prerendered-app/Intro/missing-types.d.ts
+++ b/src/shared/prerendered-app/Intro/missing-types.d.ts
@@ -30,11 +30,6 @@ interface WindowEventMap {
  beforeinstallprompt: BeforeInstallPromptEvent;
 }

-interface ClipboardItem {
-  types: string[];
-  getType(type: string): Promise<Blob>;
-}
-
 interface Clipboard {
  read(): Promise<ClipboardItem[]>;
 }
--- a/src/shared/prerendered-app/Intro/style.css
+++ b/src/shared/prerendered-app/Intro/style.css
@@ -118,7 +118,114 @@
  fill: var(--light-blue);
 }

+.bottom-wave {
+  position: relative;
+}
+
+.info {
+  background: var(--white);
+  position: relative;
+  padding: 5em 2em;
+
+  @media (min-width: 1200px) {
+    padding: 5em 0;
+  }
+}
+
+.info-container {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.info-content {
+  display: grid;
+  align-items: center;
+  grid-template-columns: 1fr;
+  gap: 1em;
+
+  grid-template-areas:
+    'text'
+    'img';
+
+  @media (min-width: 712px) {
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas: 'text img';
+
+    .info:nth-child(even) & {
+      grid-template-areas: 'img text';
+    }
+  }
+}
+
+.info-title {
+  color: var(--pink);
+  font-size: 3em;
+  margin: 0;
+}
+
+.info-caption {
+  font-size: 1.5em;
+  line-height: 1.75;
+  margin: 1em 0 0.5em 0;
+}
+
+.info-link {
+  font-size: 1.25em;
+  text-underline-offset: 0.25em;
+  color: var(--off-black);
+  transition: color 400ms ease-in-out;
+  margin-top: 1em;
+  &:hover {
+    color: var(--dim-blue);
+  }
+}
+
+.info-text-wrapper {
+  display: flex;
+  flex-flow: column wrap;
+  max-width: 27em;
+  justify-self: center;
+  grid-area: text;
+
+  @media (min-width: 712px) {
+    justify-self: start;
+    .info:nth-child(even) & {
+      text-align: right;
+      justify-self: end;
+    }
+  }
+}
+
+.info-img-wrapper {
+  grid-area: img;
+}
+
+.info-img {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-width: 400px;
+  margin: 0 auto;
+
+  @media (min-width: 768px) {
+    margin: 0 0 0 auto;
+
+    .info:nth-child(even) & {
+      margin: 0;
+    }
+  }
+}
+
+.info-wave {
+  fill: var(--white);
+}
+
 .footer {
+  background: var(--white);
+  padding-top: 5em;
+}
+
+.footer-container {
  position: relative;
  background: var(--light-gray);
 }
@@ -128,7 +235,11 @@
 }

 .content-padding {
-  padding: 2rem;
+  padding: 2em 0;
+}
+
+.footer-padding {
+  padding: 2em;
 }

 .footer-items {
--- a/src/static-build/index.tsx
+++ b/src/static-build/index.tsx
@@ -25,18 +25,6 @@ import { lookup as lookupMime } from 'mime-types';
 const manifestSize = ({ width, height }: { width: number; height: number }) =>
  `${width}x${height}`;

-// Set by Netlify
-const branch = process.env.BRANCH;
-
-const branchOriginTrialIds = new Map([
-  [
-    'live',
-    'Aj5GY7W9AHM8di+yvMCajIhLRHoYN7slruwOYXE/Iub5hgmW/r2RQt07vrUuT4eUTkWxcyNCAVkiI+5ugdVW3gAAAABUeyJvcmlnaW4iOiJodHRwczovL3NxdW9vc2guYXBwOjQ0MyIsImZlYXR1cmUiOiJXZWJBc3NlbWJseVNpbWQiLCJleHBpcnkiOjE2MjM4MDE1OTl9',
-  ],
-]);
-
-const originTrialId = branchOriginTrialIds.get(branch || '');
-
 interface Output {
  [outputPath: string]: string;
 }
@@ -110,15 +98,6 @@ const toOutput: Output = {
    /*
      Cross-Origin-Embedder-Policy: require-corp
      Cross-Origin-Opener-Policy: same-origin
-
-    # Origin trial for WebAssembly SIMD.
-    ${
-      originTrialId
-        ? `  Origin-Trial: ${originTrialId}`
-        : `# Cannot find origin trial ID. process.env.BRANCH is: ${JSON.stringify(
-            branch,
-          )}`
-    }
  `,
 };

--- a/src/static-build/pages/index/index.tsx
+++ b/src/static-build/pages/index/index.tsx
@@ -16,7 +16,8 @@ import baseCss from 'css:./base.css';
 import initialCss from 'initial-css:';
 import { allSrc } from 'client-bundle:client/initial-app';
 import favicon from 'url:static-build/assets/favicon.ico';
-import { escapeStyleScriptContent } from 'static-build/utils';
+import ogImage from 'url:static-build/assets/icon-large-maskable.png';
+import { escapeStyleScriptContent, siteOrigin } from 'static-build/utils';
 import Intro from 'shared/prerendered-app/Intro';

 interface Props {}
@@ -27,7 +28,27 @@ const Index: FunctionalComponent<Props> = () => (
      <title>Squoosh</title>
      <meta
        name="description"
-        content="Compress and compare images with different codecs, right in your browser"
+        content="Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your browser."
+      />
+      <meta name="twitter:card" content="summary" />
+      <meta name="twitter:site" content="@SquooshApp" />
+      <meta property="og:title" content="Squoosh" />
+      <meta property="og:type" content="website" />
+      <meta property="og:image" content={`${siteOrigin}${ogImage}`} />
+      <meta
+        property="og:image:secure_url"
+        content={`${siteOrigin}${ogImage}`}
+      />
+      <meta property="og:image:type" content="image/png" />
+      <meta property="og:image:width" content="500" />
+      <meta property="og:image:height" content="500" />
+      <meta
+        property="og:image:alt"
+        content="A cartoon of a hand squeezing an image file on a dark background."
+      />
+      <meta
+        name="og:description"
+        content="Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your browser."
      />
      <meta
        name="viewport"
@@ -36,16 +57,14 @@ const Index: FunctionalComponent<Props> = () => (
      <meta name="mobile-web-app-capable" content="yes" />
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <link rel="shortcut icon" href={favicon} />
+      <link rel="apple-touch-icon" href={ogImage} />
      <meta name="theme-color" content="#ff3385" />
      <link rel="manifest" href="/manifest.json" />
+      <link rel="canonical" href={siteOrigin} />
      <style
        dangerouslySetInnerHTML={{ __html: escapeStyleScriptContent(baseCss) }}
      />
-      <style
-        dangerouslySetInnerHTML={{
-          __html: escapeStyleScriptContent(initialCss),
-        }}
-      />
+      <link rel="stylesheet" href={initialCss} />
    </head>
    <body>
      <div id="app">
--- a/src/static-build/utils.tsx
+++ b/src/static-build/utils.tsx
@@ -56,3 +56,17 @@ export function escapeStyleScriptContent(str: string): string {
    .replace(/<style/g, '<\\style')
    .replace(/<\/style/g, '<\\/style');
 }
+
+/**
+ * Origin of the site, depending on the environment.
+ */
+export const siteOrigin = (() => {
+  if (process.env.DEV_PORT) return `http://localhost:${process.env.DEV_PORT}`;
+  // https://docs.netlify.com/configure-builds/environment-variables/#build-metadata
+  if (process.env.CONTEXT === 'production') return 'https://squoosh.app';
+  if (process.env.DEPLOY_PRIME_URL) return process.env.DEPLOY_PRIME_URL;
+  console.warn(
+    'Unable to determine site origin, defaulting to https://squoosh.app',
+  );
+  return 'https://squoosh.app';
+})();
--- a/src/sw/to-cache.ts
+++ b/src/sw/to-cache.ts
@@ -82,24 +82,20 @@ initialJs = subtractSets(
 export const initial = ['/', ...initialJs];

 export const theRest = (async () => {
-  const [
-    supportsThreads,
-    supportsSimd,
-    supportsWebP,
-    supportsAvif,
-  ] = await Promise.all([
-    threads(),
-    simd(),
-    ...[webpDataUrl, avifDataUrl].map(async (dataUrl) => {
-      if (!self.createImageBitmap) return false;
-      const response = await fetch(dataUrl);
-      const blob = await response.blob();
-      return createImageBitmap(blob).then(
-        () => true,
-        () => false,
-      );
-    }),
-  ]);
+  const [supportsThreads, supportsSimd, supportsWebP, supportsAvif] =
+    await Promise.all([
+      threads(),
+      simd(),
+      ...[webpDataUrl, avifDataUrl].map(async (dataUrl) => {
+        if (!self.createImageBitmap) return false;
+        const response = await fetch(dataUrl);
+        const blob = await response.blob();
+        return createImageBitmap(blob).then(
+          () => true,
+          () => false,
+        );
+      }),
+    ]);

  const items: string[] = [];

--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Jake Archibald	94157a3ef3	Hack together not-inline CSS	2022-02-21 12:40:16 +00:00
Jake Archibald	c24505230d	Bump version due to breaking changes	2022-02-18 15:36:31 +00:00
Jake Archibald	2238d1abaf	Update version	2022-02-16 16:23:33 +00:00
Ergün Erdoğmuş	65ea02627b	Expose Typescript types in libSquoosh (#1142 ) * Expose type declarations in libSquoosh npm package * Add comment on why we remove the tsbuildinfo * Fix PreprocessOptions type Resize should require at least one of the width, height. The other options are optional for all preprocessors * Update libSquoosh README to reflect encode changes I also removed requiring `await image.decoded` call before calling preprocess or encode since they decode the image before the operation	2022-02-16 16:19:42 +00:00
Ziemowit Zabawa	18b53e2b8a	JPEG XL: Add lossy Modular option (#1136 ) * Improve .gitattributes * Add disabled checkbox style * Update Makefile * Update jxl_enc.cpp * add -O3 flag to skia compilation for optimization's sake * Bump libjxl revision to 9f544641ec83f6abd9da598bdd08178ee8a003e0 Change use of EncodeFile from `EncodeFile(cparams, &io, &passes_enc_state, &bytes, /aux=/nullptr, pool_ptr)` to `EncodeFile(cparams, &io, &passes_enc_state, &bytes, /cms=/nullptr, /aux=/jxl::GetJxlCms(), pool_ptr)` * JPEG XL: Add lossy Modular option Co-authored-by: CanadianBaconBoi <beamconnor@gmail.com> Co-authored-by: CanadianBaconBoi <bc.bacon.bits@gmail.com>	2022-01-21 12:42:27 +00:00
Surma	66ec763667	Merge pull request #1171 from TimvdLippe/fix-webassembly-instantiate	2021-10-20 15:42:50 +01:00
Surma	029eda7b37	Merge branch 'dev' into fix-webassembly-instantiate	2021-10-20 15:36:48 +01:00
Tim van der Lippe	e6810059ef	Add warning for using multiple image pools Instantiating and using multiple image pools is not intended and can lead to memory problems. Instead, users should use a single pool and reuse that pool across all image processing. Therefore, let's add a warning in the README to specify call this out and avoid users of running into issues. Relates to #1065	2021-10-20 14:56:34 +01:00
Surma	4eba015009	Merge pull request #1165 from TimvdLippe/update-typescript	2021-10-20 13:25:54 +01:00
Surma	dd49a1f23d	Merge branch 'dev' into update-typescript	2021-10-20 13:15:39 +01:00
Surma	5ecb99992c	Merge pull request #1169 from TimvdLippe/update-prettier	2021-10-20 13:15:32 +01:00
Surma	d9c6ebe0a2	Merge branch 'dev' into update-prettier	2021-10-20 12:48:59 +01:00
Surma	fba67a7a18	Merge pull request #1170 from TimvdLippe/fix-husky	2021-10-20 12:47:01 +01:00
Tim van der Lippe	129b925098	Fix Husky pre-commit By upgrading to version 7, we now ensure that NPM/Yarn will run the `prepare` script and appropriately install Husky. This also migrates us to the `pre-commit` hook as a separate file, rather than as part of the `package.json` definition.	2021-10-20 12:44:12 +01:00
Tim van der Lippe	e23bc4d2e5	Update Prettier Also manually run prettier on `src/` and `lib/` to ensure consistent formatting.	2021-10-20 12:28:45 +01:00
Tim van der Lippe	f523a07f01	Update TypeScript and types packages This pulls in TypeScript 4.4, which ships ResizeObserver in the DOM types, as well as sets caught errors to `unknown`, requiring explicit checks for `AbortError`.	2021-10-20 11:36:27 +01:00
Vignesh Raj	e3f840c6da	Added Apple touch Icon for PWA (#1160 )	2021-10-15 11:52:13 +01:00
Jake Archibald	cad09160b6	Reducing browser spinner time (#1157 )	2021-09-20 13:49:53 +01:00
Surma	9663c23489	Merge pull request #1151 from ergunsh/improve-encode-types Improve `encode` API and its types	2021-09-17 13:50:29 +01:00
ergunsh	95a1b35c91	Update `encodedWith` to contain resolved values We already await the promises that we set on the `encodedWith` instead of setting already resolved promises to `encodedWith` we can set the resolved values So, the users can use like `const { mozjpeg: { binary } } = await image.encode({ mozjpeg })` or they can first run `await image.encode({ mozjpeg })` and then `image.encodedWith.mozjpeg.binary`	2021-09-10 15:18:14 +02:00
ergunsh	914cdea41d	Return encode result from `Image.encode` calls Before this, there were one way to use the API: call `await image.encode({ mozjpeg: {} })` then use `encodedWith` by asserting that `mozjpeg` property exists on it After adding return value to encode, people will be able to use it like `const { mozjpeg } = await image.encode({ mozjpeg: {} });` which provides better type safety	2021-09-10 14:45:20 +02:00
ergunsh	6bfce29af6	Improve typing of `Image.encode` Instead of returning `any` we're now returning the whole object. Still from typing perspective, the API is not that great since we don't have any type relation between `encode` calls and `encodedWith` property. Maybe we can think about returning directly from `encode` call with the returned object having properties that is supplied in `encode` calls	2021-09-10 14:08:21 +02:00
Surma	64cad1cc23	Merge pull request #1123 from styfle/load-file-async Reduce `@squoosh/lib` Node.js API usage (make it run on the web)	2021-09-08 22:30:53 +01:00
Steven	87f25d909b	Merge branch 'dev' into load-file-async	2021-09-08 17:04:50 -04:00
Steven	bdfdaf53af	Remove unused readme link per atjn Co-authored-by: Anton <dev@atjn.dk>	2021-09-08 17:04:46 -04:00
Surma	1ab9e8b3ab	Merge pull request #1141 from ergunsh/improve-exposed-types	2021-09-08 17:57:46 +01:00
Ergün Erdoğmuş	2718077d3d	Merge branch 'dev' into improve-exposed-types	2021-09-08 19:48:01 +03:00
Jake Archibald	255dfa434a	Update pointer-tracker (#1147 )	2021-09-07 14:43:19 +01:00
François Beaufort	0bef05bcd4	Remove origin trial header	2021-09-06 15:00:48 +01:00
ergunsh	c4bc369c6b	Fix typo in `triangle`	2021-09-03 15:03:28 +03:00
ergunsh	68ce8f420d	Improve encode parameter typing	2021-09-03 14:54:08 +03:00
ergunsh	27f103fee5	Improve preprocess parameter type	2021-09-03 11:53:52 +03:00
Steven	c21d3714a8	Fix link in readme	2021-09-02 16:38:22 -04:00
Steven	3ea0d88c4f	Apply suggestions from atjn Co-authored-by: Anton <dev@atjn.dk>	2021-09-02 16:36:37 -04:00
Surma	00cfdafdf3	Merge pull request #1138 from jcao219/fix-windows-path Use pathify to calculate absolute paths for cross-platform compatibility	2021-08-31 13:34:28 +01:00
Jimmy Cao	92f52319da	Use pathify to calculate absolute paths for cross-platform compatibility	2021-08-31 00:18:21 -07:00
Jake Archibald	023304803f	JPEG-XL: Better 'effort' and adding noise synth (#1039 )	2021-08-27 14:18:54 +01:00
Vishal	6b08cd2355	Aliasing toggle button (#1132 )	2021-08-26 16:44:20 +01:00
Jake Archibald	db1a5138e6	Fix pinch zoom on iOS (#1133 )	2021-08-26 15:59:42 +01:00
Jake Archibald	a547491146	Maintain DC_SCAN_OPT_MODE if subsampling is > 2. Fixes #1129 (#1130 )	2021-08-26 14:29:13 +01:00
Jake Archibald	6e427f9208	The observer is null if user prefers reduced motion Turns out TypeScript is there for a reason and shouldn't be bypassed. Fixes #1135	2021-08-25 14:10:57 +01:00
Jake Archibald	0d35fbd349	Fix horizontal scroll on option elements on mobile (#1134 )	2021-08-25 09:25:09 +01:00
Mike DelGaudio	4e901c714c	[RFC] Add Three Homepage Sections (#1112 )	2021-08-25 09:08:22 +01:00
Adam Burgess	b74788e036	Stable mousewheel scrolling, one wheel up + one wheel down = no change (#1131 )	2021-08-24 14:52:25 +01:00
Vishal	14c3d190e9	Max cap on scale #905 (#1128 )	2021-08-23 13:27:17 +01:00
Steven	202d0bc088	Generalize file to ArrayLike<number>	2021-08-20 18:48:30 -04:00
Steven	bdb5b16372	Remove Buffer from decodeFile()	2021-08-20 18:36:23 -04:00
Steven	30140c2b7a	Fix CLI bug	2021-08-20 18:35:29 -04:00
Steven	10996cdbca	Add missing import	2021-08-20 16:08:01 -04:00
Steven	e5806507d4	Remove Node.js API surface in libsquoosh	2021-08-20 15:11:14 -04:00
Steven	1c5b44f9a1	Add loadFile parameter to ImagePool	2021-08-16 16:51:23 -04:00
Surma	eeaa19589e	Merge pull request #1120 from veluca93/jxl_05 Bump JPEG XL to v0.5.	2021-08-14 09:23:04 +01:00
Luca Versari	35b8c56f1a	Bump JPEG XL to v0.5.	2021-08-13 23:27:44 +02:00
Surma	816d1f92fd	Merge pull request #1110 from styfle/libsquoosh-ts-remaining	2021-08-10 12:38:11 +01:00
Steven	4091f2efec	Remove unused export	2021-08-06 13:20:14 -04:00
Steven	821d14c6ab	Merge branch 'dev' into libsquoosh-ts-remaining	2021-08-06 13:02:46 -04:00
Steven	a72ca46531	Move `as` to input param instead of return type	2021-08-06 12:49:17 -04:00
ergunsh	fafcf97f0c	Update code for the review comments * Make decode module return value `ImageData` * Fix global definition of ImageData * Use concrete Encoder types for encode functions * Use ArrayBufferView in FileLike instead of using a similar type * Throw error when the `encode` functions return null * Use generic types for WorkerPool * Fix `encode` function typing in `index.ts` * Remove ts-ignore for web-streams-polyfill and handle nulls for TransformStream * Fix rollup entry point (now we need to have `index.ts` instead of `index.js`)	2021-08-06 16:05:14 +03:00
Surma	d526877147	Merge pull request #1099 from mikedelgaudio/add-meta-info	2021-07-27 11:48:04 +01:00
Jake Archibald	0ed7ef842f	Include site origin in build	2021-07-27 11:30:58 +01:00
Steven	de4eb9c8f7	Add encode() and decode() types	2021-07-26 23:22:28 -04:00
Steven	16a53caa48	Convert remaining JS to TS in libSquoosh	2021-07-26 22:37:00 -04:00
Mike DelGaudio	3d4c62fede	Merge branch 'dev' into add-meta-info	2021-07-26 12:23:06 -04:00
Mike DelGaudio	ce7be359c0	remove keywords Co-authored-by: Anton <dev@atjn.dk>	2021-07-26 12:23:00 -04:00
Surma	3f2dd66726	Merge pull request #1030 from veluca93/jxl_github	2021-07-23 13:49:46 +01:00
Surma	9198f748b8	Merge branch 'dev' into jxl_github	2021-07-23 13:37:37 +01:00
Surma	a726adf0e8	Merge pull request #1107 from styfle/patch-1 Fix typo uncluding => including	2021-07-23 13:15:21 +01:00
Steven	04580b0bcb	Fix typo uncluding => including	2021-07-22 13:48:19 -04:00
Luca Versari	a040c47047	Update JPEG XL to latest version. Also update repositories.	2021-07-21 18:55:52 +02:00
Surma	2427763a14	Squoosh CLI v0.7.2	2021-07-21 17:19:19 +01:00
Surma	c582c54922	libsquoosh v0.4.0	2021-07-21 17:15:59 +01:00
Surma	9ae27c1887	Merge pull request #1106 from GoogleChromeLabs/issue-1102	2021-07-21 17:03:21 +01:00
Surma	bf95eb39c2	Fix handling of PNGs that are not 8 bit	2021-07-21 16:16:44 +01:00
Surma	011c0346c1	Merge pull request #1100 from MaxGraey/opt-visdif-codec	2021-07-20 19:17:23 +01:00
Surma	9b36c3f9af	Merge remote-tracking branch 'origin/dev' into opt-visdif-codec	2021-07-20 19:14:54 +01:00
Surma	490fe2aace	Add build instructions	2021-07-20 19:14:23 +01:00
Mike DelGaudio	48efb4ddeb	remove twitter image	2021-07-20 10:55:47 -04:00
Surma	0977bd94d3	Merge pull request #1074 from GoogleChromeLabs/avif-node-mt	2021-07-20 12:01:47 +01:00
Surma	d5f12a8c61	Merge remote-tracking branch 'origin/dev' into avif-node-mt	2021-07-20 11:51:10 +01:00
Surma	fb867dcdaa	Review by rreverser	2021-07-20 11:50:48 +01:00
Surma	f038c1bd7d	Update src/static-build/pages/index/index.tsx	2021-07-20 11:26:19 +01:00
Mike DelGaudio	b37cc0784f	typo fix for secure	2021-07-19 20:31:58 -04:00
Mike DelGaudio	ff40000473	adding secure	2021-07-19 20:28:23 -04:00
Mike DelGaudio	7232524f4d	add twitter	2021-07-19 20:20:03 -04:00
Surma	bf683cdf59	Merge pull request #1093 from mikedelgaudio/update-readme [DOCS] Update README, Remove Passive Voice	2021-07-19 17:27:54 +01:00
Mike DelGaudio	f848a9384e	Merge branch 'dev' into update-readme	2021-07-19 11:48:13 -04:00
Mike DelGaudio	d4d0db6c49	update header statement	2021-07-19 11:47:52 -04:00
Surma	0719abff27	Merge pull request #1081 from atjn/unused-code Remove unused variable	2021-07-19 12:42:01 +01:00
Surma	2c561687af	Merge branch 'dev' into unused-code	2021-07-19 12:39:51 +01:00
Surma	cd20082e5d	Build wasm	2021-07-19 12:36:43 +01:00
MaxGraey	8262c79bb6	fix	2021-07-13 22:38:30 +03:00
MaxGraey	ef176d7565	optimize more	2021-07-13 22:38:10 +03:00
MaxGraey	3b0b7dbdb1	fix	2021-07-13 19:00:26 +03:00
MaxGraey	cc9a887386	optimize srgb -> linear preparation by using lookup table	2021-07-13 18:33:15 +03:00
Mike DelGaudio	71ca1ab0ca	Update src/static-build/pages/index/index.tsx Co-authored-by: Joan León <joan.leon@gmail.com>	2021-07-12 14:40:37 -04:00
Mike DelGaudio	f5d9535fd2	adding meta tags for better SEO	2021-07-12 11:13:51 -04:00
Mike DelGaudio	cea6a61366	Modify meta data	2021-07-09 15:53:18 -04:00
Mike DelGaudio	192cfc62ee	Update README.md	2021-07-07 09:57:44 -04:00
Mike DelGaudio	fe21322b2b	[DOCS] Update list of develop steps	2021-07-06 14:34:04 -04:00
Mike DelGaudio	d953822d19	[DOCS] Remove passive voice, simplify README	2021-07-05 22:37:04 -04:00
Mike DelGaudio	021b082884	[DOCS] Remove passive voice, simplify README	2021-07-05 22:24:20 -04:00
Surma	ad5002c79c	Merge pull request #1078 from ergunsh/auto-optimizer-to-ts Typescriptify auto optimizer in libSquoosh	2021-07-01 15:53:06 +01:00
Surma	883bb92e48	Merge branch 'dev' into auto-optimizer-to-ts	2021-07-01 15:45:38 +01:00
Surma	79efd0d32e	Merge pull request #1080 from pekeq/doc-resize-with-aspect libsquoosh/README: Add code example to resize with aspect ratio preserved.	2021-07-01 15:45:32 +01:00
Surma	99741d665d	Merge branch 'dev' into auto-optimizer-to-ts	2021-07-01 15:22:23 +01:00
Surma	b38765b4e6	Merge branch 'dev' into doc-resize-with-aspect	2021-07-01 15:22:13 +01:00
Bob Fanger	a11ac15008	fix: Don't overwrite value while typing (#1082 ) Fixes #316	2021-07-01 11:11:00 +01:00
atjn	4f6d21199c	Remove unused variable	2021-07-01 00:08:58 +02:00
Hideo Matsumoto	fb7e00067f	Update libsquoosh/README.md code example Add code example to resize with aspect ratio preserved.	2021-06-30 22:43:20 +09:00
ergunsh	a2121ec47b	Typescriptify auto optimizer in libSquoosh	2021-06-27 22:27:43 +02:00
Surma	d4056026fb	Add AVIF thread support	2021-06-25 00:11:25 +01:00
Surma	d12b040bd3	Add threaded AVIF encoder for node	2021-06-24 17:07:57 +01:00
Surma	149ebf5a67	Merge pull request #1073 from atjn/patch-1 Fix codecs link	2021-06-24 16:35:31 +01:00
Anton	d8297aad10	Fix codecs link	2021-06-24 17:03:17 +02:00
Surma	0e84a5b5f7	Merge pull request #1071 from simon04/patch-1	2021-06-24 10:56:26 +01:00
Simon Legner	187a5bed01	cli/README: linkfix src/codecs.ts	2021-06-24 09:34:09 +02:00
Jake Archibald	07a288398e	Spotted another leak (#1069 )	2021-06-23 10:39:27 +01:00
Surma	dbb31a1add	Merge remote-tracking branch 'origin/dev' into dev	2021-06-21 12:58:41 +01:00
Surma	6e58e8edb0	Merge pull request #1061 from atjn/engines Specify supported node versions	2021-06-21 12:58:28 +01:00
Surma	955079b18f	Merge branch 'dev' into engines	2021-06-21 12:53:32 +01:00
Vajahath Ahmed	f6f70c590e	Add repo info in package.json so that people can backtrack from npm site (#1066 )	2021-06-21 11:59:21 +01:00
Surma	55c4aa51ac	Merge pull request #1063 from SimonGolms/patch-1 fix(cli): append suffix option at the end	2021-06-19 14:25:55 +01:00
Simon G	aea316c604	fix(cli): append suffix option at the end - close #1062	2021-06-19 11:40:52 +02:00
atjn	d604e94ad2	Specify supported node versions	2021-06-18 21:18:37 +02:00
Surma	61de471e52	Merge pull request #1058 from atjn/fix-detectors Fix WebP sniffing some more	2021-06-18 15:58:03 +01:00
atjn	955b2ac1ba	Fix WebP sniffing some more	2021-06-18 15:51:20 +02:00
Surma	3d225966c5	CLI v0.7.1	2021-06-16 17:13:59 +01:00
Surma	851da25302	Update CLI dependency	2021-06-16 17:13:37 +01:00
Surma	32e3528666	libsquoosh v0.3.1	2021-06-16 17:11:15 +01:00
Surma	1e52837931	Oooops. Old files	2021-06-16 17:02:54 +01:00
				`@@ -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}};
				`@@ -0,0 +1 @@`
				<svg width="498" height="333" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M401.17 125.52C387.072 53.923 324.253.173 248.787.173c-59.916 0-111.954 34.035-137.869 83.841C48.513 90.655 0 143.574 0 207.7c0 68.692 55.77 124.516 124.394 124.516h269.519c57.221 0 103.662-46.486 103.662-103.763 0-54.787-42.502-99.198-96.405-102.933z" fill="#91D3FF" fill-opacity=".3"/><path d="M187.247 121.321l-3.987-3.987-3.481 4.434c-11.519 14.67-18.366 33.15-18.366 53.242 0 48.003 38.882 86.885 86.885 86.885 20.091 0 38.572-6.848 53.242-18.366l4.434-3.482-3.987-3.986-114.74-114.74zM309.348 228.7l3.987 3.986 3.481-4.434c11.519-14.669 18.366-33.15 18.366-53.242 0-48.002-38.882-86.884-86.884-86.884-20.092 0-38.573 6.847-53.242 18.365l-4.435 3.482 3.987 3.986L309.348 228.7zm-158.406-53.69c0-53.739 43.617-97.355 97.356-97.355 53.738 0 97.355 43.616 97.355 97.355 0 53.739-43.617 97.356-97.355 97.356-53.739 0-97.356-43.617-97.356-97.356z" fill="#FF3385" stroke="#FF3385" stroke-width="10"/></svg>