monospace fixes need for relative offsetting

.gitattributes

@@ -1,2 +1,2 @@
-/codecs/**/*.js linguist-generated -diff
-/codecs/*/pkg*/*.d.ts linguist-generated
+/codecs/**/*.js linguist-generated=true
+/codecs/*/pkg*/*.d.ts linguist-generated=true

.husky/pre-commit

@@ -1 +0,0 @@
-npx lint-staged

README.md

@@ -1,38 +1,36 @@
 # [Squoosh]!
 
-[Squoosh] is an image compression web app that reduces image sizes through numerous formats.
+[Squoosh] is an image compression web app that allows you to dive into the advanced options provided
+by various image compressors.
+
+# 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.
 
 # Privacy
 
-Squoosh does not send your image to a server. All image compression processes locally.
+Google Analytics is used to record the following:
 
-However, Squoosh utilizes Google Analytics to collect the following:
+- [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.
 
-- [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.
+Image compression is handled locally; no additional data is sent to the server.
 
-# Developing
+# Building locally
 
-To develop for Squoosh:
+Clone the repo, and:
 
-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
-   ```
+```sh
+npm install
+npm run build
+```
 
-# Contributing
+You can run the development server with:
 
-Squoosh is an open-source project that appreciates all community involvement. To contribute to the project, follow the [contribute guide](/CONTRIBUTING.md).
+```sh
+npm run dev
+```
 
 [squoosh]: https://squoosh.app

cli/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+build
+.DS_Store

cli/.npmignore

@@ -0,0 +1 @@
+node_modules

cli/README.md

@@ -0,0 +1,59 @@
+# Squoosh CLI
+
+Squoosh CLI is an _experimental_ way to run all the codecs you know from the [Squoosh] web app on your command line using WebAssembly. The Squoosh CLI uses a worker pool to parallelize processing images. This way you can apply the same codec to many images at once.
+
+Squoosh CLI is currently not the fastest image compression tool in town and doesn’t aim to be. It is, however, fast enough to compress many images sufficiently quick at once.
+
+## Installation
+
+The Squoosh CLI can be used straight from the command line without installing using `npx`:
+
+```
+$ npx @squoosh/cli <options...>
+```
+
+Of course, you can also install the Squoosh CLI:
+
+```
+$ npm i -g @squoosh/cli
+$ squoosh-cli <options...>
+```
+
+## Usage
+
+```
+Usage: squoosh-cli [options] <files...>
+
+Options:
+  -V, --version                                          output the version number
+  -d, --output-dir <dir>                                 Output directory (default: ".")
+  -s, --suffix <suffix>                                  Append suffix to output files (default: "")
+  --max-optimizer-rounds <rounds>                        Maximum number of compressions to use for auto optimizations (default: "6")
+  --optimizer-butteraugli-target <butteraugli distance>  Target Butteraugli distance for auto optimizer (default: "1.4")
+  --resize [config]                                      Resize the image before compressing
+  --quant [config]                                       Reduce the number of colors used (aka. paletting)
+  --rotate [config]                                      Rotate image
+  --mozjpeg [config]                                     Use MozJPEG to generate a .jpg file with the given configuration
+  --webp [config]                                        Use WebP to generate a .webp file with the given configuration
+  --avif [config]                                        Use AVIF to generate a .avif file with the given configuration
+  --jxl [config]                                         Use JPEG-XL to generate a .jxl file with the given configuration
+  --wp2 [config]                                         Use WebP2 to generate a .wp2 file with the given configuration
+  --oxipng [config]                                      Use OxiPNG to generate a .png file with the given configuration
+  -h, --help                                             display help for command
+```
+
+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
+
+Squoosh CLI has an _experimental_ auto optimizer that compresses an image as much as possible, trying to hit a specific [Butteraugli] target value. The higher the Butteraugli target value, the more artifacts can be introduced.
+
+You can make use of the auto optimizer by using “auto” as the config object.
+
+```
+$ npx @squoosh/cli --wp2 auto test.png
+```
+
+[squoosh]: https://squoosh.app
+[codecs.ts]: https://github.com/GoogleChromeLabs/squoosh/blob/dev/libsquoosh/src/codecs.ts
+[butteraugli]: https://github.com/google/butteraugli

cli/package-lock.json

@@ -0,0 +1,598 @@
+{
+  "name": "@squoosh/cli",
+  "version": "0.7.1",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@squoosh/cli",
+      "version": "0.7.1",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@squoosh/lib": "^0.3.1",
+        "commander": "^7.2.0",
+        "json5": "^2.2.0",
+        "kleur": "^4.1.4",
+        "ora": "^5.4.0"
+      },
+      "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.3.1",
+      "resolved": "https://registry.npmjs.org/@squoosh/lib/-/lib-0.3.1.tgz",
+      "integrity": "sha512-ni8gyTGgW9lH/yqaqgkxerGT7daSWNU9mtvWqj+/1qqzIT9YGfFvnTtDQRMIRjRCKQ5pkK/COufvWKuzHI6Dxw==",
+      "dependencies": {
+        "web-streams-polyfill": "^3.0.3"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
+    },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/cli-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "dependencies": {
+        "restore-cursor": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cli-spinners": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.6.0.tgz",
+      "integrity": "sha512-t+4/y50K/+4xcCRosKkA7W4gTr1MySvLV0q+PxmG7FJ5g+66ChKurYjxBCjHggHH3HA5Hh9cy+lcUGWDqVH+4Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/clone": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+      "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/defaults": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
+      "integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=",
+      "dependencies": {
+        "clone": "^1.0.2"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "node_modules/is-interactive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
+      "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-unicode-supported": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
+      "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
+      "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
+      "dependencies": {
+        "minimist": "^1.2.5"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/kleur": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.4.tgz",
+      "integrity": "sha512-8QADVssbrFjivHWQU7KkMgptGTl6WAcSdlbBPY4uNF+mWr6DGcKrvY2w4FQJoXch7+fKMjj0dRrL75vk3k23OA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/log-symbols": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
+      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "is-unicode-supported": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+    },
+    "node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/ora": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.0.tgz",
+      "integrity": "sha512-1StwyXQGoU6gdjYkyVcqOLnVlbKj+6yPNNOxJVgpt9t4eksKjiriiHuxktLYkgllwk+D6MbC4ihH84L1udRXPg==",
+      "dependencies": {
+        "bl": "^4.1.0",
+        "chalk": "^4.1.0",
+        "cli-cursor": "^3.1.0",
+        "cli-spinners": "^2.5.0",
+        "is-interactive": "^1.0.0",
+        "is-unicode-supported": "^0.1.0",
+        "log-symbols": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "wcwidth": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/restore-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "dependencies": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+    },
+    "node_modules/signal-exit": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
+      "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA=="
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+      "dependencies": {
+        "ansi-regex": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+    },
+    "node_modules/wcwidth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
+      "integrity": "sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=",
+      "dependencies": {
+        "defaults": "^1.0.3"
+      }
+    },
+    "node_modules/web-streams-polyfill": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.0.3.tgz",
+      "integrity": "sha512-d2H/t0eqRNM4w2WvmTdoeIvzAUSpK7JmATB8Nr2lb7nQ9BTIJVjbQ/TRFVEh2gUH1HwclPdoPtfMoFfetXaZnA==",
+      "engines": {
+        "node": ">= 8"
+      }
+    }
+  },
+  "dependencies": {
+    "@squoosh/lib": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@squoosh/lib/-/lib-0.3.1.tgz",
+      "integrity": "sha512-ni8gyTGgW9lH/yqaqgkxerGT7daSWNU9mtvWqj+/1qqzIT9YGfFvnTtDQRMIRjRCKQ5pkK/COufvWKuzHI6Dxw==",
+      "requires": {
+        "web-streams-polyfill": "^3.0.3"
+      }
+    },
+    "ansi-regex": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
+    },
+    "ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "requires": {
+        "color-convert": "^2.0.1"
+      }
+    },
+    "base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
+    },
+    "bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "requires": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
+    "buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "requires": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "chalk": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+      "requires": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      }
+    },
+    "cli-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "requires": {
+        "restore-cursor": "^3.1.0"
+      }
+    },
+    "cli-spinners": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.6.0.tgz",
+      "integrity": "sha512-t+4/y50K/+4xcCRosKkA7W4gTr1MySvLV0q+PxmG7FJ5g+66ChKurYjxBCjHggHH3HA5Hh9cy+lcUGWDqVH+4Q=="
+    },
+    "clone": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+      "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4="
+    },
+    "color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "requires": {
+        "color-name": "~1.1.4"
+      }
+    },
+    "color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="
+    },
+    "defaults": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
+      "integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=",
+      "requires": {
+        "clone": "^1.0.2"
+      }
+    },
+    "has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+    },
+    "ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "is-interactive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
+      "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w=="
+    },
+    "is-unicode-supported": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
+      "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw=="
+    },
+    "json5": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
+      "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
+      "requires": {
+        "minimist": "^1.2.5"
+      }
+    },
+    "kleur": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.4.tgz",
+      "integrity": "sha512-8QADVssbrFjivHWQU7KkMgptGTl6WAcSdlbBPY4uNF+mWr6DGcKrvY2w4FQJoXch7+fKMjj0dRrL75vk3k23OA=="
+    },
+    "log-symbols": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
+      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+      "requires": {
+        "chalk": "^4.1.0",
+        "is-unicode-supported": "^0.1.0"
+      }
+    },
+    "mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="
+    },
+    "minimist": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+    },
+    "onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "requires": {
+        "mimic-fn": "^2.1.0"
+      }
+    },
+    "ora": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.0.tgz",
+      "integrity": "sha512-1StwyXQGoU6gdjYkyVcqOLnVlbKj+6yPNNOxJVgpt9t4eksKjiriiHuxktLYkgllwk+D6MbC4ihH84L1udRXPg==",
+      "requires": {
+        "bl": "^4.1.0",
+        "chalk": "^4.1.0",
+        "cli-cursor": "^3.1.0",
+        "cli-spinners": "^2.5.0",
+        "is-interactive": "^1.0.0",
+        "is-unicode-supported": "^0.1.0",
+        "log-symbols": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "wcwidth": "^1.0.1"
+      }
+    },
+    "readable-stream": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "requires": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      }
+    },
+    "restore-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "requires": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+    },
+    "signal-exit": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
+      "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA=="
+    },
+    "string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "requires": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "strip-ansi": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+      "requires": {
+        "ansi-regex": "^5.0.0"
+      }
+    },
+    "supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "requires": {
+        "has-flag": "^4.0.0"
+      }
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+    },
+    "wcwidth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
+      "integrity": "sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=",
+      "requires": {
+        "defaults": "^1.0.3"
+      }
+    },
+    "web-streams-polyfill": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.0.3.tgz",
+      "integrity": "sha512-d2H/t0eqRNM4w2WvmTdoeIvzAUSpK7JmATB8Nr2lb7nQ9BTIJVjbQ/TRFVEh2gUH1HwclPdoPtfMoFfetXaZnA=="
+    }
+  }
+}

cli/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@squoosh/cli",
+  "version": "0.7.1",
+  "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"
+  },
+  "files": [
+    "/src/index.js"
+  ],
+  "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.3.1",
+    "commander": "^7.2.0",
+    "json5": "^2.2.0",
+    "kleur": "^4.1.4",
+    "ora": "^5.4.0"
+  }
+}

cli/src/index.js

@@ -0,0 +1,232 @@
+#!/usr/bin/env node
+
+import { program } from 'commander/esm.mjs';
+import JSON5 from 'json5';
+import path from 'path';
+import { promises as fsp } from 'fs';
+import ora from 'ora';
+import kleur from 'kleur';
+
+import { ImagePool, preprocessors, encoders } from '@squoosh/lib';
+
+function clamp(v, min, max) {
+  if (v < min) return min;
+  if (v > max) return max;
+  return v;
+}
+
+const suffix = ['B', 'KB', 'MB'];
+function prettyPrintSize(size) {
+  const base = Math.floor(Math.log2(size) / 10);
+  const index = clamp(base, 0, 2);
+  return (size / 2 ** (10 * index)).toFixed(2) + suffix[index];
+}
+
+function progressTracker(results) {
+  const spinner = ora();
+  const tracker = {};
+  tracker.spinner = spinner;
+  tracker.progressOffset = 0;
+  tracker.totalOffset = 0;
+  let status = '';
+  tracker.setStatus = (text) => {
+    status = text || '';
+    update();
+  };
+  let progress = '';
+  tracker.setProgress = (done, total) => {
+    spinner.prefixText = kleur.dim(`${done}/${total}`);
+    const completeness =
+      (tracker.progressOffset + done) / (tracker.totalOffset + total);
+    progress = kleur.cyan(
+      `▐${'▨'.repeat((completeness * 10) | 0).padEnd(10, '╌')}▌ `,
+    );
+    update();
+  };
+  function update() {
+    spinner.text = progress + kleur.bold(status) + getResultsText();
+  }
+  tracker.finish = (text) => {
+    spinner.succeed(kleur.bold(text) + getResultsText());
+  };
+  function getResultsText() {
+    let out = '';
+    for (const result of results.values()) {
+      out += `\n ${kleur.cyan(result.file)}: ${prettyPrintSize(result.size)}`;
+      for (const { outputFile, size: outputSize, infoText } of result.outputs) {
+        out += `\n  ${kleur.dim('└')} ${kleur.cyan(
+          outputFile.padEnd(5),
+        )} → ${prettyPrintSize(outputSize)}`;
+        const percent = ((outputSize / result.size) * 100).toPrecision(3);
+        out += ` (${kleur[outputSize > result.size ? 'red' : 'green'](
+          percent + '%',
+        )})`;
+        if (infoText) out += kleur.yellow(infoText);
+      }
+    }
+    return out || '\n';
+  }
+  spinner.start();
+  return tracker;
+}
+
+async function getInputFiles(paths) {
+  const validFiles = [];
+
+  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))
+      : [inputPath];
+    for (const file of files) {
+      try {
+        await fsp.stat(file);
+      } catch (err) {
+        if (err.code === 'ENOENT') {
+          console.warn(
+            `Warning: Input file does not exist: ${path.resolve(file)}`,
+          );
+          continue;
+        } else {
+          throw err;
+        }
+      }
+
+      validFiles.push(file);
+    }
+  }
+
+  return validFiles;
+}
+
+async function processFiles(files) {
+  files = await getInputFiles(files);
+
+  const imagePool = new ImagePool();
+
+  const results = new Map();
+  const progress = progressTracker(results);
+
+  progress.setStatus('Decoding...');
+  progress.totalOffset = files.length;
+  progress.setProgress(0, files.length);
+
+  // Create output directory
+  await fsp.mkdir(program.opts().outputDir, { recursive: true });
+
+  let decoded = 0;
+  let decodedFiles = await Promise.all(
+    files.map(async (file) => {
+      const image = imagePool.ingestImage(file);
+      await image.decoded;
+      results.set(image, {
+        file,
+        size: (await image.decoded).size,
+        outputs: [],
+      });
+      progress.setProgress(++decoded, files.length);
+      return image;
+    }),
+  );
+
+  const preprocessOptions = {};
+
+  for (const preprocessorName of Object.keys(preprocessors)) {
+    if (!program.opts()[preprocessorName]) {
+      continue;
+    }
+    preprocessOptions[preprocessorName] = JSON5.parse(
+      program.opts()[preprocessorName],
+    );
+  }
+
+  for (const image of decodedFiles) {
+    image.preprocess(preprocessOptions);
+  }
+
+  await Promise.all(decodedFiles.map((image) => image.decoded));
+
+  progress.progressOffset = decoded;
+  progress.setStatus(
+    'Encoding ' + kleur.dim(`(${imagePool.workerPool.numWorkers} threads)`),
+  );
+  progress.setProgress(0, files.length);
+
+  const jobs = [];
+  let jobsStarted = 0;
+  let jobsFinished = 0;
+  for (const image of decodedFiles) {
+    const originalFile = results.get(image).file;
+
+    const encodeOptions = {
+      optimizerButteraugliTarget: Number(
+        program.opts().optimizerButteraugliTarget,
+      ),
+      maxOptimizerRounds: Number(program.opts().maxOptimizerRounds),
+    };
+    for (const encName of Object.keys(encoders)) {
+      if (!program.opts()[encName]) {
+        continue;
+      }
+      const encParam = program.opts()[encName];
+      const encConfig =
+        encParam.toLowerCase() === 'auto' ? 'auto' : JSON5.parse(encParam);
+      encodeOptions[encName] = encConfig;
+    }
+    jobsStarted++;
+    const job = image.encode(encodeOptions).then(async () => {
+      jobsFinished++;
+      const outputPath = path.join(
+        program.opts().outputDir,
+        path.basename(originalFile, path.extname(originalFile)) +
+        program.opts().suffix
+      );
+      for (const output of Object.values(image.encodedWith)) {
+        const outputFile = `${outputPath}.${(await output).extension}`;
+        await fsp.writeFile(outputFile, (await output).binary);
+        results
+          .get(image)
+          .outputs.push(Object.assign(await output, { outputFile }));
+      }
+      progress.setProgress(jobsFinished, jobsStarted);
+    });
+    jobs.push(job);
+  }
+
+  // update the progress to account for multi-format
+  progress.setProgress(jobsFinished, jobsStarted);
+  // Wait for all jobs to finish
+  await Promise.all(jobs);
+  await imagePool.close();
+  progress.finish('Squoosh results:');
+}
+
+program
+  .name('squoosh-cli')
+  .arguments('<files...>')
+  .option('-d, --output-dir <dir>', 'Output directory', '.')
+  .option('-s, --suffix <suffix>', 'Append suffix to output files', '')
+  .option(
+    '--max-optimizer-rounds <rounds>',
+    'Maximum number of compressions to use for auto optimizations',
+    '6',
+  )
+  .option(
+    '--optimizer-butteraugli-target <butteraugli distance>',
+    'Target Butteraugli distance for auto optimizer',
+    '1.4',
+  )
+  .action(processFiles);
+
+// Create a CLI option for each supported preprocessor
+for (const [key, value] of Object.entries(preprocessors)) {
+  program.option(`--${key} [config]`, value.description);
+}
+// Create a CLI option for each supported encoder
+for (const [key, value] of Object.entries(encoders)) {
+  program.option(
+    `--${key} [config]`,
+    `Use ${value.name} to generate a .${value.extension} file with the given configuration`,
+  );
+}
+
+program.parse(process.argv);

client-tsconfig.json

@@ -14,7 +14,6 @@
     // for comlink
     "src/features/**/worker/**/*",
     "src/features-worker/**/*",
-    "src/features/worker-utils/**/*",
-    "src/worker-shared/**/*"
+    "src/features/worker-utils/**/*"
   ]
 }

codecs/avif/Makefile

@@ -1,9 +1,9 @@
-# using libavif from https://github.com/AOMediaCodec/libavif
-CODEC_URL = https://github.com/AOMediaCodec/libavif/archive/refs/tags/v1.0.1.tar.gz
+# libavif and libaom versions are from
+# https://docs.google.com/document/d/1wEEA5rRU7wT54k41u3qyZIZHDCJArIMzLuzsrLAwaK8/edit
+CODEC_URL = https://github.com/AOMediaCodec/libavif/archive/1c39e772c2c0d687691dd4b589a12c323f5f767d.tar.gz
 CODEC_PACKAGE = node_modules/libavif.tar.gz
 
-# using libaom from https://aomedia.googlesource.com/aom
-LIBAOM_URL = https://aomedia.googlesource.com/aom/+archive/v3.7.0.tar.gz
+LIBAOM_URL = https://aomedia.googlesource.com/aom/+archive/v3.1.0.tar.gz
 LIBAOM_PACKAGE = node_modules/libaom.tar.gz
 
 export CODEC_DIR = node_modules/libavif
@@ -11,14 +11,15 @@ export BUILD_DIR = node_modules/build
 export LIBAOM_DIR = node_modules/libaom
 
 override CFLAGS += "-Wno-unused-macros"
+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
@@ -27,9 +28,10 @@ HELPER_MAKEFLAGS := -f helper.Makefile
 
 .PHONY: all clean
 
-all: $(OUT_ENC_JS) $(OUT_DEC_JS) $(OUT_ENC_MT_JS)
+all: $(OUT_ENC_JS) $(OUT_DEC_JS) $(OUT_ENC_MT_JS) $(OUT_NODE_ENC_JS) $(OUT_NODE_DEC_JS)
 
-$(OUT_ENC_JS): $(OUT_ENC_CPP) $(CODEC_DIR)/CMakeLists.txt $(LIBAOM_DIR)/CMakeLists.txt
+$(OUT_NODE_ENC_JS): ENVIRONMENT=node
+$(OUT_NODE_ENC_JS) $(OUT_ENC_JS): $(OUT_ENC_CPP) $(CODEC_DIR)/CMakeLists.txt $(LIBAOM_DIR)/CMakeLists.txt
 	$(MAKE) \
 		$(HELPER_MAKEFLAGS) \
 		OUT_JS=$@ \
@@ -40,7 +42,7 @@ $(OUT_ENC_JS): $(OUT_ENC_CPP) $(CODEC_DIR)/CMakeLists.txt $(LIBAOM_DIR)/CMakeLis
 			-DCONFIG_AV1_HIGHBITDEPTH=0 \
 		" \
 		ENVIRONMENT=$(ENVIRONMENT) \
-		LIBAVIF_FLAGS="-DAVIF_CODEC_AOM_DECODE=0 -DAVIF_CHROMA_DOWNSAMPLING_SHARP_YUV=ON"
+		LIBAVIF_FLAGS="-DAVIF_CODEC_AOM_DECODE=0"
 
 $(OUT_ENC_MT_JS): $(OUT_ENC_CPP) $(CODEC_DIR)/CMakeLists.txt $(LIBAOM_DIR)/CMakeLists.txt
 	$(MAKE) \
@@ -52,10 +54,11 @@ $(OUT_ENC_MT_JS): $(OUT_ENC_CPP) $(CODEC_DIR)/CMakeLists.txt $(LIBAOM_DIR)/CMake
 			-DCONFIG_AV1_HIGHBITDEPTH=0 \
 		" \
 		ENVIRONMENT=$(ENVIRONMENT) \
-		LIBAVIF_FLAGS="-DAVIF_CODEC_AOM_DECODE=0 -DAVIF_CHROMA_DOWNSAMPLING_SHARP_YUV=ON" \
+		LIBAVIF_FLAGS="-DAVIF_CODEC_AOM_DECODE=0" \
 		OUT_FLAGS="-pthread"
 
-$(OUT_DEC_JS): $(OUT_DEC_CPP) $(CODEC_DIR)/CMakeLists.txt $(LIBAOM_DIR)/CMakeLists.txt
+$(OUT_NODE_DEC_JS): ENVIRONMENT=node
+$(OUT_NODE_DEC_JS) $(OUT_DEC_JS): $(OUT_DEC_CPP) $(CODEC_DIR)/CMakeLists.txt $(LIBAOM_DIR)/CMakeLists.txt
 	$(MAKE) \
 		$(HELPER_MAKEFLAGS) \
 		OUT_JS=$@ \
@@ -65,7 +68,7 @@ $(OUT_DEC_JS): $(OUT_DEC_CPP) $(CODEC_DIR)/CMakeLists.txt $(LIBAOM_DIR)/CMakeLis
 			-DCONFIG_MULTITHREAD=0 \
 		" \
 		ENVIRONMENT=$(ENVIRONMENT) \
-		LIBAVIF_FLAGS="-DAVIF_CODEC_AOM_ENCODE=0 -DAVIF_CHROMA_DOWNSAMPLING_SHARP_YUV=0 -DAVIF_LOCAL_LIBSHARPYUV=0"
+		LIBAVIF_FLAGS="-DAVIF_CODEC_AOM_ENCODE=0"
 
 $(CODEC_PACKAGE):
 	mkdir -p $(@D)
@@ -86,7 +89,4 @@ $(LIBAOM_DIR)/CMakeLists.txt: $(LIBAOM_PACKAGE)
 clean:
 	$(MAKE) $(HELPER_MAKEFLAGS) OUT_JS=$(OUT_ENC_JS) clean
 	$(MAKE) $(HELPER_MAKEFLAGS) OUT_JS=$(OUT_ENC_MT_JS) clean
-	$(MAKE) $(HELPER_MAKEFLAGS) OUT_JS=$(OUT_ENC_NODE_JS) clean
-	$(MAKE) $(HELPER_MAKEFLAGS) OUT_JS=$(OUT_ENC_NODE_MT_JS) clean
 	$(MAKE) $(HELPER_MAKEFLAGS) OUT_JS=$(OUT_DEC_JS) clean
-	$(MAKE) $(HELPER_MAKEFLAGS) OUT_JS=$(OUT_DEV_NODE_JS) clean

codecs/avif/enc/avif_enc.cpp

@@ -3,22 +3,15 @@
 #include <emscripten/val.h>
 #include "avif/avif.h"
 
-#define RETURN_NULL_IF_NOT_EQUALS(val1, val2) \
-  if (val1 != val2)                           \
-    return val::null();
-#define RETURN_NULL_IF_EQUALS(val1, val2) \
-  if (val1 == val2)                       \
-    return val::null();
-
 using namespace emscripten;
 
 struct AvifOptions {
-  // [0 - 100]
-  // 0 = worst quality
-  // 100 = lossless
-  int quality;
-  // As above, but -1 means 'use quality'
-  int qualityAlpha;
+  // [0 - 63]
+  // 0 = lossless
+  // 63 = worst quality
+  int cqLevel;
+  // As above, but -1 means 'use cqLevel'
+  int cqAlphaLevel;
   // [0 - 6]
   // Creates 2^n tiles in that dimension
   int tileRowsLog2;
@@ -42,15 +35,11 @@ struct AvifOptions {
   int tune;
   // 0-50
   int denoiseLevel;
-  // toggles AVIF_CHROMA_DOWNSAMPLING_SHARP_YUV
-  bool enableSharpDownsampling;
 };
 
 thread_local const val Uint8Array = val::global("Uint8Array");
 
 val encode(std::string buffer, int width, int height, AvifOptions options) {
-  avifResult status;  // To check the return status for avif API's
-
   avifRWData output = AVIF_DATA_EMPTY;
   int depth = 8;
   avifPixelFormat format;
@@ -69,12 +58,11 @@ val encode(std::string buffer, int width, int height, AvifOptions options) {
       break;
   }
 
-  bool lossless = options.quality == AVIF_QUALITY_LOSSLESS &&
-                  (options.qualityAlpha == -1 || options.qualityAlpha == AVIF_QUALITY_LOSSLESS) &&
+  bool lossless = options.cqLevel == AVIF_QUANTIZER_LOSSLESS &&
+                  options.cqAlphaLevel <= AVIF_QUANTIZER_LOSSLESS &&
                   format == AVIF_PIXEL_FORMAT_YUV444;
 
   avifImage* image = avifImageCreate(width, height, depth, format);
-  RETURN_NULL_IF_EQUALS(image, NULL);
 
   if (lossless) {
     image->matrixCoefficients = AVIF_MATRIX_COEFFICIENTS_IDENTITY;
@@ -88,49 +76,40 @@ val encode(std::string buffer, int width, int height, AvifOptions options) {
   avifRGBImageSetDefaults(&srcRGB, image);
   srcRGB.pixels = rgba;
   srcRGB.rowBytes = width * 4;
-  if (options.enableSharpDownsampling) {
-    printf("Enabling AVIF_CHROMA_DOWNSAMPLING_SHARP_YUV\n");
-    srcRGB.chromaDownsampling = AVIF_CHROMA_DOWNSAMPLING_SHARP_YUV;
-  }
-  status = avifImageRGBToYUV(image, &srcRGB);
-  if (status == AVIF_RESULT_NOT_IMPLEMENTED) {
-    printf("libsharpyuv not implemented methinks\n");
-  }
-  RETURN_NULL_IF_NOT_EQUALS(status, AVIF_RESULT_OK);
+  avifImageRGBToYUV(image, &srcRGB);
 
   avifEncoder* encoder = avifEncoderCreate();
-  RETURN_NULL_IF_EQUALS(encoder, NULL);
 
   if (lossless) {
-    encoder->quality = AVIF_QUALITY_LOSSLESS;
-    encoder->qualityAlpha = AVIF_QUALITY_LOSSLESS;
+    encoder->minQuantizer = AVIF_QUANTIZER_LOSSLESS;
+    encoder->maxQuantizer = AVIF_QUANTIZER_LOSSLESS;
+    encoder->minQuantizerAlpha = AVIF_QUANTIZER_LOSSLESS;
+    encoder->maxQuantizerAlpha = AVIF_QUANTIZER_LOSSLESS;
   } else {
-    status = avifEncoderSetCodecSpecificOption(encoder, "sharpness",
-                                               std::to_string(options.sharpness).c_str());
-    RETURN_NULL_IF_NOT_EQUALS(status, AVIF_RESULT_OK);
+    encoder->minQuantizer = AVIF_QUANTIZER_BEST_QUALITY;
+    encoder->maxQuantizer = AVIF_QUANTIZER_WORST_QUALITY;
+    encoder->minQuantizerAlpha = AVIF_QUANTIZER_BEST_QUALITY;
+    encoder->maxQuantizerAlpha = AVIF_QUANTIZER_WORST_QUALITY;
+    avifEncoderSetCodecSpecificOption(encoder, "end-usage", "q");
+    avifEncoderSetCodecSpecificOption(encoder, "cq-level", std::to_string(options.cqLevel).c_str());
+    avifEncoderSetCodecSpecificOption(encoder, "sharpness",
+                                      std::to_string(options.sharpness).c_str());
 
-    // Set base quality
-    encoder->quality = options.quality;
-    // Conditionally set alpha quality
-    if (options.qualityAlpha == -1) {
-      encoder->qualityAlpha = options.quality;
-    } else {
-      encoder->qualityAlpha = options.qualityAlpha;
+    if (options.cqAlphaLevel != -1) {
+      avifEncoderSetCodecSpecificOption(encoder, "alpha:cq-level",
+                                        std::to_string(options.cqAlphaLevel).c_str());
     }
 
-    if (options.tune == 2 || (options.tune == 0 && options.quality >= 50)) {
-      status = avifEncoderSetCodecSpecificOption(encoder, "tune", "ssim");
-      RETURN_NULL_IF_NOT_EQUALS(status, AVIF_RESULT_OK);
+    if (options.tune == 2 || (options.tune == 0 && options.cqLevel <= 32)) {
+      avifEncoderSetCodecSpecificOption(encoder, "tune", "ssim");
     }
 
     if (options.chromaDeltaQ) {
-      status = avifEncoderSetCodecSpecificOption(encoder, "enable-chroma-deltaq", "1");
-      RETURN_NULL_IF_NOT_EQUALS(status, AVIF_RESULT_OK);
+      avifEncoderSetCodecSpecificOption(encoder, "enable-chroma-deltaq", "1");
     }
 
-    status = avifEncoderSetCodecSpecificOption(encoder, "color:denoise-noise-level",
-                                               std::to_string(options.denoiseLevel).c_str());
-    RETURN_NULL_IF_NOT_EQUALS(status, AVIF_RESULT_OK);
+    avifEncoderSetCodecSpecificOption(encoder, "color:denoise-noise-level",
+                                      std::to_string(options.denoiseLevel).c_str());
   }
 
   encoder->maxThreads = emscripten_num_logical_cores();
@@ -152,8 +131,8 @@ val encode(std::string buffer, int width, int height, AvifOptions options) {
 
 EMSCRIPTEN_BINDINGS(my_module) {
   value_object<AvifOptions>("AvifOptions")
-      .field("quality", &AvifOptions::quality)
-      .field("qualityAlpha", &AvifOptions::qualityAlpha)
+      .field("cqLevel", &AvifOptions::cqLevel)
+      .field("cqAlphaLevel", &AvifOptions::cqAlphaLevel)
       .field("tileRowsLog2", &AvifOptions::tileRowsLog2)
       .field("tileColsLog2", &AvifOptions::tileColsLog2)
       .field("speed", &AvifOptions::speed)
@@ -161,8 +140,7 @@ EMSCRIPTEN_BINDINGS(my_module) {
       .field("sharpness", &AvifOptions::sharpness)
       .field("tune", &AvifOptions::tune)
       .field("denoiseLevel", &AvifOptions::denoiseLevel)
-      .field("subsample", &AvifOptions::subsample)
-      .field("enableSharpDownsampling", &AvifOptions::enableSharpDownsampling);
+      .field("subsample", &AvifOptions::subsample);
 
   function("encode", &encode);
 }

codecs/avif/enc/avif_enc.d.ts

@@ -5,16 +5,15 @@ export const enum AVIFTune {
 }
 
 export interface EncodeOptions {
-  quality: number;
-  qualityAlpha: number;
+  cqLevel: number;
   denoiseLevel: number;
+  cqAlphaLevel: number;
   tileRowsLog2: number;
   tileColsLog2: number;
   speed: number;
   subsample: number;
   chromaDeltaQ: boolean;
   sharpness: number;
-  enableSharpDownsampling: boolean;
   tune: AVIFTune;
 }
 

codecs/avif/enc/avif_enc_mt.worker.js

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

codecs/avif/enc/avif_node_enc_mt.worker.js

@@ -1 +0,0 @@
-"use strict";var Module={};if(typeof process==="object"&&typeof process.versions==="object"&&typeof process.versions.node==="string"){var nodeWorkerThreads=require("worker_threads");var parentPort=nodeWorkerThreads.parentPort;parentPort.on("message",function(data){onmessage({data:data})});var nodeFS=require("fs");Object.assign(global,{self:global,require:require,Module:Module,location:{href:__filename},Worker:nodeWorkerThreads.Worker,importScripts:function(f){(0,eval)(nodeFS.readFileSync(f,"utf8"))},postMessage:function(msg){parentPort.postMessage(msg)},performance:global.performance||{now:function(){return Date.now()}}})}var initializedJS=false;function threadPrintErr(){var text=Array.prototype.slice.call(arguments).join(" ");console.error(text)}function threadAlert(){var text=Array.prototype.slice.call(arguments).join(" ");postMessage({cmd:"alert",text:text,threadId:Module["_pthread_self"]()})}var err=threadPrintErr;self.alert=threadAlert;Module["instantiateWasm"]=function(info,receiveInstance){var instance=new WebAssembly.Instance(Module["wasmModule"],info);receiveInstance(instance);Module["wasmModule"]=null;return instance.exports};function moduleLoaded(){}self.onmessage=function(e){try{if(e.data.cmd==="load"){Module["wasmModule"]=e.data.wasmModule;Module["wasmMemory"]=e.data.wasmMemory;Module["buffer"]=Module["wasmMemory"].buffer;Module["ENVIRONMENT_IS_PTHREAD"]=true;(e.data.urlOrBlob?import(e.data.urlOrBlob):import("./avif_node_enc_mt.js")).then(function(exports){return exports.default(Module)}).then(function(instance){Module=instance;moduleLoaded()})}else if(e.data.cmd==="objectTransfer"){Module["PThread"].receiveObjectTransfer(e.data)}else if(e.data.cmd==="run"){Module["__performance_now_clock_drift"]=performance.now()-e.data.time;Module["__emscripten_thread_init"](e.data.threadInfoStruct,0,0);var max=e.data.stackBase;var top=e.data.stackBase+e.data.stackSize;Module["establishStackSpace"](top,max);Module["PThread"].receiveObjectTransfer(e.data);Module["PThread"].threadInit();if(!initializedJS){Module["___embind_register_native_and_builtin_types"]();initializedJS=true}try{var result=Module["invokeEntryPoint"](e.data.start_routine,e.data.arg);if(Module["keepRuntimeAlive"]()){Module["PThread"].setExitStatus(result)}else{Module["PThread"].threadExit(result)}}catch(ex){if(ex==="Canceled!"){Module["PThread"].threadCancel()}else if(ex!="unwind"){if(ex instanceof Module["ExitStatus"]){if(Module["keepRuntimeAlive"]()){}else{Module["PThread"].threadExit(ex.status)}}else{Module["PThread"].threadExit(-2);throw ex}}}}else if(e.data.cmd==="cancel"){if(Module["_pthread_self"]()){Module["PThread"].threadCancel()}}else if(e.data.target==="setimmediate"){}else if(e.data.cmd==="processThreadQueue"){if(Module["_pthread_self"]()){Module["_emscripten_current_thread_process_queued_calls"]()}}else{err("worker.js received unknown command "+e.data.cmd);err(e.data)}}catch(ex){err("worker.js onmessage() captured an uncaught exception: "+ex);if(ex&&ex.stack)err(ex.stack);throw ex}};

codecs/avif/helper.Makefile

@@ -10,12 +10,6 @@
 #   $(LIBAVIF_FLAGS)
 #   $(ENVIRONMENT)
 
-# Take from libavif/ext/libsharpyuv.cmd
-WEBP_URL = https://chromium.googlesource.com/webm/libwebp
-WEBP_COMMIT = e2c85878f6a33f29948b43d3492d9cdaf801aa54
-LIBSHARPYUV_DIR = $(CODEC_DIR)/ext/libwebp
-
-# $(OUT_JS) is something like "enc/avif_enc.js" or "enc/avif_enc_mt.js"
 OUT_BUILD_DIR := $(BUILD_DIR)/$(basename $(OUT_JS))
 
 CODEC_BUILD_DIR := $(OUT_BUILD_DIR)/libavif
@@ -24,9 +18,6 @@ CODEC_OUT := $(CODEC_BUILD_DIR)/libavif.a
 LIBAOM_BUILD_DIR := $(OUT_BUILD_DIR)/libaom
 LIBAOM_OUT := $(LIBAOM_BUILD_DIR)/libaom.a
 
-LIBSHARPYUV_BUILD_DIR := $(OUT_BUILD_DIR)/libsharpyuvLOLOLOL
-LIBSHARPYUV_OUT := $(LIBSHARPYUV_BUILD_DIR)/libsharpyuv.a
-
 OUT_WASM = $(OUT_JS:.js=.wasm)
 OUT_WORKER=$(OUT_JS:.js=.worker.js)
 
@@ -34,13 +25,6 @@ OUT_WORKER=$(OUT_JS:.js=.worker.js)
 
 all: $(OUT_JS)
 
-# Only add libsharpyuv as a dependency for encoders.
-# Yes, that if statement is true for encoders.
-ifneq (,$(findstring enc/, $(OUT_JS)))
-$(OUT_JS): $(LIBSHARPYUV_OUT)
-$(CODEC_OUT): $(LIBSHARPYUV_OUT)
-endif
-
 $(OUT_JS): $(OUT_CPP) $(LIBAOM_OUT) $(CODEC_OUT)
 	$(CXX) \
 		-I $(CODEC_DIR)/include \
@@ -55,7 +39,6 @@ $(OUT_JS): $(OUT_CPP) $(LIBAOM_OUT) $(CODEC_OUT)
 
 $(CODEC_OUT): $(CODEC_DIR)/CMakeLists.txt $(LIBAOM_OUT)
 	emcmake cmake \
-		-DCMAKE_LIBRARY_PATH=$(LIBSHARPYUV_BUILD_DIR) \
 		-DCMAKE_BUILD_TYPE=Release \
 		-DBUILD_SHARED_LIBS=0 \
 		-DAVIF_CODEC_AOM=1 \
@@ -84,21 +67,6 @@ $(LIBAOM_OUT): $(LIBAOM_DIR)/CMakeLists.txt
 		$(LIBAOM_DIR) && \
 	$(MAKE) -C $(LIBAOM_BUILD_DIR)
 
-$(LIBSHARPYUV_OUT): $(LIBSHARPYUV_DIR)/CMakeLists.txt
-		emcmake cmake \
-			-DBUILD_SHARED_LIBS=OFF \
-			-DCMAKE_BUILD_TYPE=Release \
-			-B $(LIBSHARPYUV_BUILD_DIR) \
-			$(LIBSHARPYUV_DIR)
-		$(MAKE) -C $(LIBSHARPYUV_BUILD_DIR) sharpyuv
-
-$(LIBSHARPYUV_DIR)/CMakeLists.txt: $(CODEC_DIR)/CMakeLists.txt
-	cd $(CODEC_DIR)/ext && \
-		git clone $(WEBP_URL) --single-branch libwebp && \
-		cd libwebp && \
-		git checkout $(WEBP_COMMIT)
-
-
 clean:
 	$(RM) $(OUT_JS) $(OUT_WASM) $(OUT_WORKER)
 	$(MAKE) -C $(CODEC_BUILD_DIR) clean

codecs/cpp.Dockerfile

@@ -1,4 +1,4 @@
-FROM emscripten/emsdk:2.0.34
+FROM emscripten/emsdk:2.0.23
 RUN apt-get update && apt-get install -qqy autoconf libtool pkg-config
 ENV CFLAGS "-O3 -flto"
 ENV CXXFLAGS "${CFLAGS} -std=c++17"

codecs/jxl/Makefile

@@ -1,5 +1,5 @@
-CODEC_URL = https://github.com/libjxl/libjxl.git
-CODEC_VERSION = 9f544641ec83f6abd9da598bdd08178ee8a003e0
+CODEC_URL = https://gitlab.com/wg1/jpeg-xl.git
+CODEC_VERSION = ab7c5e9b6795134377aa4846ceaae2c5bc504f76
 CODEC_DIR = node_modules/jxl
 CODEC_BUILD_ROOT := $(CODEC_DIR)/build
 CODEC_MT_BUILD_DIR := $(CODEC_BUILD_ROOT)/mt
@@ -75,9 +75,6 @@ $(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)

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 {
-  int effort;
+  // 1 = slowest
+  // 7 = fastest
+  int speed;
   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,35 +33,25 @@ 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 (options.lossyModular || quality == 100) {
+  if (quality < 7 || quality == 100) {
     cparams.modular_mode = true;
     // Internal modular quality to roughly match VarDCT size.
-    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);
-    }
+    cparams.quality_pair.first = cparams.quality_pair.second =
+        std::min(35 + (quality - 7) * 3.0f, 100.0f);
   } else {
     cparams.modular_mode = false;
     if (quality >= 30) {
@@ -87,6 +77,12 @@ 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();
@@ -98,14 +94,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, /*(only true if bits_per_sample==32) float_in=*/false);
+      /*flipped_y=*/false, pool_ptr, main);
 
   if (!result) {
     return val::null();
   }
 
   auto js_result = val::null();
-  if (EncodeFile(cparams, &io, &passes_enc_state, &bytes, jxl::GetJxlCms(), /*aux=*/nullptr, pool_ptr)) {
+  if (EncodeFile(cparams, &io, &passes_enc_state, &bytes, /*aux=*/nullptr, pool_ptr)) {
     js_result = Uint8Array.new_(typed_memory_view(bytes.size(), bytes.data()));
   }
 
@@ -114,13 +110,12 @@ val encode(std::string image, int width, int height, JXLOptions options) {
 
 EMSCRIPTEN_BINDINGS(my_module) {
   value_object<JXLOptions>("JXLOptions")
-      .field("effort", &JXLOptions::effort)
+      .field("speed", &JXLOptions::speed)
       .field("quality", &JXLOptions::quality)
       .field("progressive", &JXLOptions::progressive)
+      .field("nearLossless", &JXLOptions::nearLossless)
       .field("lossyPalette", &JXLOptions::lossyPalette)
       .field("decodingSpeedTier", &JXLOptions::decodingSpeedTier)
-      .field("photonNoiseIso", &JXLOptions::photonNoiseIso)
-      .field("lossyModular", &JXLOptions::lossyModular)
       .field("epf", &JXLOptions::epf);
 
   function("encode", &encode);

codecs/jxl/enc/jxl_enc.d.ts

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

codecs/mozjpeg/enc/mozjpeg_enc.cpp

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

codecs/png/src/lib.rs

@@ -53,11 +53,7 @@ where
 #[wasm_bindgen]
 pub fn decode(mut data: &[u8]) -> ImageData {
     let mut decoder = png::Decoder::new(&mut data);
-    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
-    );
+    decoder.set_transformations(png::Transformations::EXPAND);
     let (info, mut reader) = decoder.read_info().unwrap_throw();
     let num_pixels = (info.width * info.height) as usize;
     let mut buf = vec![0; num_pixels * 4];

codecs/visdif/BUILD.md

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

codecs/visdif/visdif.cpp

@@ -5,19 +5,12 @@
 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) {
+void planarize(std::vector<ImageF>& img,
+               const uint8_t* rgba,
+               int width,
+               int height,
+               float gamma = 2.2) {
   assert(img.size() == 0);
   img.push_back(ImageF(width, height));
   img.push_back(ImageF(width, height));
@@ -29,10 +22,10 @@ void planarize(std::vector<ImageF>& img, const uint8_t* rgba, int width, int hei
     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] = 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]];
+      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);
     }
   }
 }
@@ -44,7 +37,6 @@ 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;

generic-tsconfig.json

@@ -17,8 +17,7 @@
       "static-build/*": ["src/static-build/*"],
       "client/*": ["src/client/*"],
       "shared/*": ["src/shared/*"],
-      "features/*": ["src/features/*"],
-      "worker-shared/*": ["src/worker-shared/*"]
+      "features/*": ["src/features/*"]
     }
   }
 }

lib/data-url-plugin.js

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

lib/entry-data-plugin.js

@@ -77,9 +77,7 @@ export default function entryDataPlugin() {
             }
 
             return JSON.stringify(
-              getDependencies(chunks, chunk).map((filename) =>
-                fileNameToURL(filename),
-              ),
+              getDependencies(chunks, chunk).map((filename) => fileNameToURL(filename)),
             );
           },
         );

lib/omt.ejs

@@ -28,17 +28,10 @@ if (!self.<%- amdFunctionName %>) {
       <% } else { %>
         new Promise(resolve => {
           if ("document" in self) {
-            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);
+            const script = document.createElement("script");
+            script.src = uri;
+            script.onload = resolve;
+            document.head.appendChild(script);
           } else {
             self.nextDefineUri = uri;
             importScripts(uri);

libsquoosh/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+build
+.DS_Store

libsquoosh/.npmignore

@@ -0,0 +1 @@
+node_modules

libsquoosh/README.md

@@ -0,0 +1,171 @@
+# libSquoosh
+
+libSquoosh is an _experimental_ way to run all the codecs you know from the [Squoosh] web app directly inside your own JavaScript program. libSquoosh uses a worker pool to parallelize processing images. This way you can apply the same codec to many images at once.
+
+libSquoosh is currently not the fastest image compression tool in town and doesn’t aim to be. It is, however, fast enough to compress many images sufficiently quick at once.
+
+## Installation
+
+libSquoosh can be installed to your local project with the following command:
+
+```
+$ npm install @squoosh/lib
+```
+
+You can start using the libSquoosh by adding these lines to the top of your JS program:
+
+```js
+import { ImagePool } from '@squoosh/lib';
+const imagePool = new ImagePool();
+```
+
+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.
+
+## Ingesting images
+
+You can ingest a new image like so:
+
+```js
+const imagePath = 'path/to/image.png';
+const image = imagePool.ingestImage(imagePath);
+```
+
+The `ingestImage` function can take anything the node [`readFile`][readfile] function can take, uncluding a buffer and `FileHandle`.
+
+The returned `image` object is a representation of the original image, that you can now preprocess, encode, and extract information about.
+
+## Preprocessing and encoding images
+
+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: {
+    enabled: true,
+    width: 100,
+  }
+  */
+}
+await image.preprocess(preprocessOptions);
+
+const encodeOptions = {
+  mozjpeg: {}, //an empty object means 'use default settings'
+  jxl: {
+    quality: 90,
+  },
+}
+await image.encode(encodeOptions);
+
+```
+
+The default values for each option can be found in the [`codecs.ts`][codecs.ts] file under `defaultEncoderOptions`. Every unspecified value will use the default value specified there. _Better documentation is needed here._
+
+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).
+
+## Closing the ImagePool
+
+When you have encoded everything you need, it is recommended to close the processing pipeline in the ImagePool. This will not delete the images you have already encoded, but it will prevent you from ingesting and encoding new images.
+
+Close the ImagePool pipeline with this line:
+
+```js
+await imagePool.close();
+```
+
+## Writing encoded images to the file system
+
+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;
+
+fs.writeFile('/path/to/new/image.jpg', rawEncodedImage);
+```
+
+This example iterates through all encoded versions of the image and writes them to a specific path:
+
+```js
+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,
+  );
+}
+```
+
+## Extracting image information
+
+Information about a decoded image is available at `Image.decoded`. It looks something like this:
+
+```js
+console.log(await image.decoded);
+// Returns:
+{
+ bitmap: {
+    data: Uint8ClampedArray(47736584) [
+      225, 228, 237, 255, 225, 228, 237, 255, 225, 228, 237, 255,
+      225, 228, 237, 255, 225, 228, 237, 255, 225, 228, 237, 255,
+      225, 228, 237, 255,
+      ... //the entire raw image
+    ],
+    width: 4606,  //pixels
+    height: 2591  //pixels
+  },
+  size: 2467795  //bytes
+}
+```
+
+Information about an encoded image can be found at `Image.encodedWith[encoderName]`. It looks something like this:
+
+```js
+console.log(await image.encodedWith.jxl);
+// Returns:
+{
+  optionsUsed: {
+    quality: 75,
+    baseline: false,
+    arithmetic: false,
+    progressive: true,
+    ... //all the possible options for this encoder
+  },
+  binary: Uint8Array(1266975) [
+      1,   0,   0,   1,   0,  1,  0,  0, 255, 219,  0, 132,
+    113, 119, 156, 156, 209,  1,  8,  8,   8,   8,  9,   8,
+      9,  10,  10,   9,
+    ... //the entire raw encoded image
+  ],
+  extension: 'jxl',
+  size: 1266975  //bytes
+}
+```
+
+## Auto optimizer
+
+libSquoosh has an _experimental_ auto optimizer that compresses an image as much as possible, trying to hit a specific [Butteraugli] target value. The higher the Butteraugli target value, the more artifacts can be introduced.
+
+You can make use of the auto optimizer by using “auto” as the config object.
+
+```js
+const encodeOptions: {
+  mozjpeg: 'auto',
+}
+```
+
+[squoosh]: https://squoosh.app
+[codecs.ts]: https://github.com/GoogleChromeLabs/squoosh/blob/dev/libsquoosh/src/codecs.ts
+[butteraugli]: https://github.com/google/butteraugli
+[readfile]: https://nodejs.org/api/fs.html#fs_fspromises_readfile_path_options

libsquoosh/lib/asset-plugin.js

@@ -0,0 +1,75 @@
+/**
+ * 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: 'asset-url',
+};
+
+export default function assetPlugin(opts) {
+  opts = { ...defaultOpts, ...opts };
+
+  /** @type {Map<string, Buffer>} */
+  let assetIdToSourceBuffer;
+
+  const prefix = opts.prefix + ':';
+  return {
+    name: 'asset-plugin',
+    buildStart() {
+      assetIdToSourceBuffer = new Map();
+    },
+    augmentChunkHash(info) {
+      // Get the sources for all assets imported by this chunk.
+      const buffers = Object.keys(info.modules)
+        .map((moduleId) => assetIdToSourceBuffer.get(moduleId))
+        .filter(Boolean);
+
+      if (buffers.length === 0) return;
+
+      for (const moduleId of Object.keys(info.modules)) {
+        const buffer = assetIdToSourceBuffer.get(moduleId);
+        if (buffer) buffers.push(buffer);
+      }
+
+      const combinedBuffer =
+        buffers.length === 1 ? buffers[0] : Buffer.concat(buffers);
+
+      return combinedBuffer;
+    },
+    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}`);
+      }
+      // Add an additional .js to the end so it ends up with .js at the end in the _virtual folder.
+      return prefix + resolveResult.id + '.js';
+    },
+    async load(id) {
+      if (!id.startsWith(prefix)) return;
+      const realId = id.slice(prefix.length, -'.js'.length);
+      const source = await fs.readFile(realId);
+      assetIdToSourceBuffer.set(id, source);
+      this.addWatchFile(realId);
+
+      return `export default import.meta.ROLLUP_FILE_URL_${this.emitFile({
+        type: 'asset',
+        source,
+        name: basename(realId),
+      })}`;
+    },
+  };
+}

libsquoosh/lib/autojson-plugin.js

@@ -0,0 +1,12 @@
+import { promises as fsp } from 'fs';
+
+export default function autojsonPlugin() {
+  return {
+    name: 'autojson-plugin',
+    async load(id) {
+      if (id.endsWith('.json') && !id.startsWith('json:')) {
+        return 'export default ' + (await fsp.readFile(id, 'utf8'));
+      }
+    },
+  };
+}

libsquoosh/lib/json-plugin.js

@@ -0,0 +1,38 @@
+import { promises as fsp } from 'fs';
+
+const prefix = 'json:';
+
+const reservedKeys = ['public'];
+
+export default function jsonPlugin() {
+  return {
+    name: 'json-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}`);
+      }
+      // Add an additional .js to the end so it ends up with .js at the end in the _virtual folder.
+      return prefix + resolveResult.id;
+    },
+    async load(id) {
+      if (!id.startsWith(prefix)) return;
+      const realId = id.slice(prefix.length);
+      const source = await fsp.readFile(realId, 'utf8');
+
+      let code = '';
+      for (const [key, value] of Object.entries(JSON.parse(source))) {
+        if (reservedKeys.includes(key)) {
+          continue;
+        }
+        code += `
+        export const ${key} = ${JSON.stringify(value)};
+      `;
+      }
+      return code;
+    },
+  };
+}

libsquoosh/lib/simple-ts.js

@@ -0,0 +1,133 @@
+/**
+ * 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 { spawn } from 'child_process';
+import { relative, join } from 'path';
+import { promises as fsp } from 'fs';
+import { promisify } from 'util';
+
+import * as ts from 'typescript';
+import glob from 'glob';
+import { sync as whichSync } from 'which';
+
+const globP = promisify(glob);
+
+const tscPath = whichSync('tsc');
+
+const extRe = /\.tsx?$/;
+
+function loadConfig(mainPath) {
+  const fileName = ts.findConfigFile(mainPath, ts.sys.fileExists);
+  if (!fileName) throw Error('tsconfig not found');
+  const text = ts.sys.readFile(fileName);
+  const loadedConfig = ts.parseConfigFileTextToJson(fileName, text).config;
+  const parsedTsConfig = ts.parseJsonConfigFileContent(
+    loadedConfig,
+    ts.sys,
+    process.cwd(),
+    undefined,
+    fileName,
+  );
+  return parsedTsConfig;
+}
+
+export default function simpleTS(mainPath, { noBuild, watch } = {}) {
+  const config = loadConfig(mainPath);
+  const args = ['-b', mainPath];
+
+  let tsBuildDone;
+
+  async function watchBuiltFiles(rollupContext) {
+    const matches = await globP(config.options.outDir + '/**/*.js');
+    for (const match of matches) rollupContext.addWatchFile(match);
+  }
+
+  async function tsBuild(rollupContext) {
+    if (tsBuildDone) {
+      // Watch lists are cleared on each build, so we need to rewatch all the JS files.
+      await watchBuiltFiles(rollupContext);
+      return tsBuildDone;
+    }
+    if (noBuild) {
+      return (tsBuildDone = Promise.resolve());
+    }
+    tsBuildDone = Promise.resolve().then(async () => {
+      await new Promise((resolve) => {
+        const proc = spawn(tscPath, args, {
+          stdio: 'inherit',
+        });
+
+        proc.on('exit', (code) => {
+          if (code !== 0) {
+            throw Error('TypeScript build failed');
+          }
+          resolve();
+        });
+      });
+
+      await watchBuiltFiles(rollupContext);
+
+      if (watch) {
+        tsBuildDone.then(() => {
+          spawn(tscPath, [...args, '--watch', '--preserveWatchOutput'], {
+            stdio: 'inherit',
+          });
+        });
+      }
+    });
+
+    return tsBuildDone;
+  }
+
+  return {
+    name: 'simple-ts',
+    resolveId(id, importer) {
+      // If there isn't an importer, it's an entry point, so we don't need to resolve it relative
+      // to something.
+      if (!importer) return null;
+
+      const tsResolve = ts.resolveModuleName(
+        id,
+        importer,
+        config.options,
+        ts.sys,
+      );
+
+      if (
+        // It didn't find anything
+        !tsResolve.resolvedModule ||
+        // Or if it's linking to a definition file, it's something in node_modules,
+        // or something local like css.d.ts
+        tsResolve.resolvedModule.extension === '.d.ts'
+      ) {
+        return null;
+      }
+      return tsResolve.resolvedModule.resolvedFileName;
+    },
+    async load(id) {
+      if (!extRe.test(id)) return null;
+
+      // TypeScript building is deferred until the first TS file load.
+      // This allows prerequisites to happen first,
+      // such as css.d.ts generation in css-plugin.
+      await tsBuild(this);
+
+      // Look for the JS equivalent in the tmp folder
+      const newId = join(
+        config.options.outDir,
+        relative(config.options.rootDir, id),
+      ).replace(extRe, '.js');
+
+      return fsp.readFile(newId, { encoding: 'utf8' });
+    },
+  };
+}

libsquoosh/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@squoosh/lib",
+  "version": "0.3.1",
+  "description": "A Node library for Squoosh",
+  "public": true,
+  "main": "./build/index.js",
+  "files": [
+    "/build/*"
+  ],
+  "scripts": {
+    "build": "rollup -c"
+  },
+  "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": {
+    "web-streams-polyfill": "^3.0.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.14.0",
+    "@babel/preset-env": "^7.14.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^18.0.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@types/node": "^15.6.1",
+    "rollup": "^2.46.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "typescript": "^4.1.3",
+    "which": "^2.0.2"
+  }
+}

libsquoosh/rollup.config.js

@@ -0,0 +1,44 @@
+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 json from './lib/json-plugin.js';
+import autojson from './lib/autojson-plugin.js';
+import { getBabelOutputPlugin } from '@rollup/plugin-babel';
+import { builtinModules } from 'module';
+
+/** @type {import('rollup').RollupOptions} */
+export default {
+  input: 'src/index.js',
+  output: {
+    dir: 'build',
+    format: 'cjs',
+    assetFileNames: '[name]-[hash][extname]',
+  },
+  plugins: [
+    resolve(),
+    cjs(),
+    asset(),
+    autojson(),
+    json(),
+    simpleTS('.'),
+    getBabelOutputPlugin({
+      babelrc: false,
+      configFile: false,
+      minified: process.env.DEBUG != '',
+      comments: true,
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            targets: {
+              node: 12,
+            },
+            loose: true,
+          },
+        ],
+      ],
+    }),
+  ],
+  external: [...builtinModules, 'web-streams-polyfill'],
+};

libsquoosh/src/WebAssembly.d.ts

@@ -0,0 +1,132 @@
+/**
+ * WebAssembly definitions are not available in `@types/node` yet,
+ * so these are copied from `lib.dom.d.ts`
+ */
+declare namespace WebAssembly {
+  interface CompileError {}
+
+  var CompileError: {
+    prototype: CompileError;
+    new (): CompileError;
+  };
+
+  interface Global {
+    value: any;
+    valueOf(): any;
+  }
+
+  var Global: {
+    prototype: Global;
+    new (descriptor: GlobalDescriptor, v?: any): Global;
+  };
+
+  interface Instance {
+    readonly exports: Exports;
+  }
+
+  var Instance: {
+    prototype: Instance;
+    new (module: Module, importObject?: Imports): Instance;
+  };
+
+  interface LinkError {}
+
+  var LinkError: {
+    prototype: LinkError;
+    new (): LinkError;
+  };
+
+  interface Memory {
+    readonly buffer: ArrayBuffer;
+    grow(delta: number): number;
+  }
+
+  var Memory: {
+    prototype: Memory;
+    new (descriptor: MemoryDescriptor): Memory;
+  };
+
+  interface Module {}
+
+  var Module: {
+    prototype: Module;
+    new (bytes: BufferSource): Module;
+    customSections(moduleObject: Module, sectionName: string): ArrayBuffer[];
+    exports(moduleObject: Module): ModuleExportDescriptor[];
+    imports(moduleObject: Module): ModuleImportDescriptor[];
+  };
+
+  interface RuntimeError {}
+
+  var RuntimeError: {
+    prototype: RuntimeError;
+    new (): RuntimeError;
+  };
+
+  interface Table {
+    readonly length: number;
+    get(index: number): Function | null;
+    grow(delta: number): number;
+    set(index: number, value: Function | null): void;
+  }
+
+  var Table: {
+    prototype: Table;
+    new (descriptor: TableDescriptor): Table;
+  };
+
+  interface GlobalDescriptor {
+    mutable?: boolean;
+    value: ValueType;
+  }
+
+  interface MemoryDescriptor {
+    initial: number;
+    maximum?: number;
+  }
+
+  interface ModuleExportDescriptor {
+    kind: ImportExportKind;
+    name: string;
+  }
+
+  interface ModuleImportDescriptor {
+    kind: ImportExportKind;
+    module: string;
+    name: string;
+  }
+
+  interface TableDescriptor {
+    element: TableKind;
+    initial: number;
+    maximum?: number;
+  }
+
+  interface WebAssemblyInstantiatedSource {
+    instance: Instance;
+    module: Module;
+  }
+
+  type ImportExportKind = 'function' | 'global' | 'memory' | 'table';
+  type TableKind = 'anyfunc';
+  type ValueType = 'f32' | 'f64' | 'i32' | 'i64';
+  type ExportValue = Function | Global | Memory | Table;
+  type Exports = Record<string, ExportValue>;
+  type ImportValue = ExportValue | number;
+  type ModuleImports = Record<string, ImportValue>;
+  type Imports = Record<string, ModuleImports>;
+  function compile(bytes: BufferSource): Promise<Module>;
+  // `compileStreaming` does not exist in NodeJS
+  // function compileStreaming(source: Response | Promise<Response>): Promise<Module>;
+  function instantiate(
+    bytes: BufferSource,
+    importObject?: Imports,
+  ): Promise<WebAssemblyInstantiatedSource>;
+  function instantiate(
+    moduleObject: Module,
+    importObject?: Imports,
+  ): Promise<Instance>;
+  // `instantiateStreaming` does not exist in NodeJS
+  // function instantiateStreaming(response: Response | PromiseLike<Response>, importObject?: Imports): Promise<WebAssemblyInstantiatedSource>;
+  function validate(bytes: BufferSource): boolean;
+}

libsquoosh/src/auto-optimizer.ts

@@ -0,0 +1,115 @@
+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`
+// will result in an increase in the return value. The function uses binary search
+// 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: 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;
+  let value;
+  let round = 1;
+  while (true) {
+    value = await measure(parameter);
+    if (Math.abs(value - measureGoal) < epsilon || round >= maxRounds) {
+      return { parameter, round, value };
+    }
+    if (value > measureGoal) {
+      parameter -= delta;
+    } else if (value < measureGoal) {
+      parameter += delta;
+    }
+    delta /= 2;
+    round++;
+  }
+}
+
+export async function autoOptimize(
+  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,
+    bitmapIn.width,
+    bitmapIn.height,
+  );
+
+  // 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.
+  const { parameter } = await binarySearch(
+    -1 * butteraugliDistanceGoal,
+    async (quality) => {
+      binaryOut = await encode(bitmapIn, quality);
+      bitmapOut = await decode(binaryOut);
+      return -1 * comparator.distance(bitmapOut.data);
+    },
+    binarySearchParams,
+  );
+  comparator.delete();
+
+  return {
+    bitmap: bitmapOut,
+    binary: binaryOut,
+    quality: parameter,
+  };
+}

libsquoosh/src/codecs.ts

@@ -0,0 +1,427 @@
+import { promises as fsp } from 'fs';
+import { instantiateEmscriptenWasm, pathify } from './emscripten-utils.js';
+
+interface RotateModuleInstance {
+  exports: {
+    memory: WebAssembly.Memory;
+    rotate(width: number, height: number, rotate: number): void;
+  };
+}
+
+interface ResizeWithAspectParams {
+  input_width: number;
+  input_height: number;
+  target_width: number;
+  target_height: number;
+}
+
+interface ResizeInstantiateOptions {
+  width: number;
+  height: number;
+  method: string;
+  premultiply: boolean;
+  linearRGB: boolean;
+}
+
+declare global {
+  // Needed for being able to use ImageData as type in codec types
+  type ImageData = typeof import('./image_data.js');
+  // Needed for being able to assign to `globalThis.ImageData`
+  var ImageData: ImageData['constructor'];
+}
+
+import type { QuantizerModule } from '../../codecs/imagequant/imagequant.js';
+
+// MozJPEG
+import mozEnc from '../../codecs/mozjpeg/enc/mozjpeg_node_enc.js';
+import mozEncWasm from 'asset-url:../../codecs/mozjpeg/enc/mozjpeg_node_enc.wasm';
+import mozDec from '../../codecs/mozjpeg/dec/mozjpeg_node_dec.js';
+import mozDecWasm from 'asset-url:../../codecs/mozjpeg/dec/mozjpeg_node_dec.wasm';
+
+// WebP
+import webpEnc from '../../codecs/webp/enc/webp_node_enc.js';
+import webpEncWasm from 'asset-url:../../codecs/webp/enc/webp_node_enc.wasm';
+import webpDec from '../../codecs/webp/dec/webp_node_dec.js';
+import webpDecWasm from 'asset-url:../../codecs/webp/dec/webp_node_dec.wasm';
+
+// AVIF
+import avifEnc from '../../codecs/avif/enc/avif_node_enc.js';
+import avifEncWasm from 'asset-url:../../codecs/avif/enc/avif_node_enc.wasm';
+import avifDec from '../../codecs/avif/dec/avif_node_dec.js';
+import avifDecWasm from 'asset-url:../../codecs/avif/dec/avif_node_dec.wasm';
+
+// JXL
+import jxlEnc from '../../codecs/jxl/enc/jxl_node_enc.js';
+import jxlEncWasm from 'asset-url:../../codecs/jxl/enc/jxl_node_enc.wasm';
+import jxlDec from '../../codecs/jxl/dec/jxl_node_dec.js';
+import jxlDecWasm from 'asset-url:../../codecs/jxl/dec/jxl_node_dec.wasm';
+
+// WP2
+import 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';
+
+// PNG
+import * as pngEncDec from '../../codecs/png/pkg/squoosh_png.js';
+import pngEncDecWasm from 'asset-url:../../codecs/png/pkg/squoosh_png_bg.wasm';
+const pngEncDecPromise = pngEncDec.default(
+  fsp.readFile(pathify(pngEncDecWasm)),
+);
+
+// OxiPNG
+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)));
+
+// Resize
+import * as resize from '../../codecs/resize/pkg/squoosh_resize.js';
+import resizeWasm from 'asset-url:../../codecs/resize/pkg/squoosh_resize_bg.wasm';
+const resizePromise = resize.default(fsp.readFile(pathify(resizeWasm)));
+
+// rotate
+import rotateWasm from 'asset-url:../../codecs/rotate/rotate.wasm';
+
+// TODO(ergunsh): Type definitions of some modules do not exist
+// Figure out creating type definitions for them and remove `allowJs` rule
+// We shouldn't need to use Promise<QuantizerModule> below after getting type definitions for imageQuant
+// ImageQuant
+import imageQuant from '../../codecs/imagequant/imagequant_node.js';
+import imageQuantWasm from 'asset-url:../../codecs/imagequant/imagequant_node.wasm';
+const imageQuantPromise: Promise<QuantizerModule> = instantiateEmscriptenWasm(
+  imageQuant,
+  imageQuantWasm,
+);
+
+// Our decoders currently rely on a `ImageData` global.
+import ImageData from './image_data.js';
+globalThis.ImageData = ImageData;
+
+function resizeNameToIndex(name: string) {
+  switch (name) {
+    case 'triangle':
+      return 0;
+    case 'catrom':
+      return 1;
+    case 'mitchell':
+      return 2;
+    case 'lanczos3':
+      return 3;
+    default:
+      throw Error(`Unknown resize algorithm "${name}"`);
+  }
+}
+
+function resizeWithAspect({
+  input_width,
+  input_height,
+  target_width,
+  target_height,
+}: ResizeWithAspectParams): { width: number; height: number } {
+  if (!target_width && !target_height) {
+    throw Error('Need to specify at least width or height when resizing');
+  }
+
+  if (target_width && target_height) {
+    return { width: target_width, height: target_height };
+  }
+
+  if (!target_width) {
+    return {
+      width: Math.round((input_width / input_height) * target_height),
+      height: target_height,
+    };
+  }
+
+  return {
+    width: target_width,
+    height: Math.round((input_height / input_width) * target_width),
+  };
+}
+
+export const preprocessors = {
+  resize: {
+    name: 'Resize',
+    description: 'Resize the image before compressing',
+    instantiate: async () => {
+      await resizePromise;
+      return (
+        buffer: Uint8Array,
+        input_width: number,
+        input_height: number,
+        {
+          width,
+          height,
+          method,
+          premultiply,
+          linearRGB,
+        }: ResizeInstantiateOptions,
+      ) => {
+        ({ width, height } = resizeWithAspect({
+          input_width,
+          input_height,
+          target_width: width,
+          target_height: height,
+        }));
+        return new ImageData(
+          resize.resize(
+            buffer,
+            input_width,
+            input_height,
+            width,
+            height,
+            resizeNameToIndex(method),
+            premultiply,
+            linearRGB,
+          ),
+          width,
+          height,
+        );
+      };
+    },
+    defaultOptions: {
+      method: 'lanczos3',
+      fitMethod: 'stretch',
+      premultiply: true,
+      linearRGB: true,
+    },
+  },
+  // // TODO: Need to handle SVGs and HQX
+  quant: {
+    name: 'ImageQuant',
+    description: 'Reduce the number of colors used (aka. paletting)',
+    instantiate: async () => {
+      const imageQuant = await imageQuantPromise;
+      return (
+        buffer: Uint8Array,
+        width: number,
+        height: number,
+        { numColors, dither }: { numColors: number; dither: number },
+      ) =>
+        new ImageData(
+          imageQuant.quantize(buffer, width, height, numColors, dither),
+          width,
+          height,
+        );
+    },
+    defaultOptions: {
+      numColors: 255,
+      dither: 1.0,
+    },
+  },
+  rotate: {
+    name: 'Rotate',
+    description: 'Rotate image',
+    instantiate: async () => {
+      return async (
+        buffer: Uint8Array,
+        width: number,
+        height: number,
+        { numRotations }: { numRotations: number },
+      ) => {
+        const degrees = (numRotations * 90) % 360;
+        const sameDimensions = degrees == 0 || degrees == 180;
+        const size = width * height * 4;
+        const instance = (
+          await WebAssembly.instantiate(await fsp.readFile(pathify(rotateWasm)))
+        ).instance as RotateModuleInstance;
+        const { memory } = instance.exports;
+        const additionalPagesNeeded = Math.ceil(
+          (size * 2 - memory.buffer.byteLength + 8) / (64 * 1024),
+        );
+        if (additionalPagesNeeded > 0) {
+          memory.grow(additionalPagesNeeded);
+        }
+        const view = new Uint8ClampedArray(memory.buffer);
+        view.set(buffer, 8);
+        instance.exports.rotate(width, height, degrees);
+        return new ImageData(
+          view.slice(size + 8, size * 2 + 8),
+          sameDimensions ? width : height,
+          sameDimensions ? height : width,
+        );
+      };
+    },
+    defaultOptions: {
+      numRotations: 0,
+    },
+  },
+};
+
+export const codecs = {
+  mozjpeg: {
+    name: 'MozJPEG',
+    extension: 'jpg',
+    detectors: [/^\xFF\xD8\xFF/],
+    dec: () => instantiateEmscriptenWasm(mozDec, mozDecWasm),
+    enc: () => instantiateEmscriptenWasm(mozEnc, mozEncWasm),
+    defaultEncoderOptions: {
+      quality: 75,
+      baseline: false,
+      arithmetic: false,
+      progressive: true,
+      optimize_coding: true,
+      smoothing: 0,
+      color_space: 3 /*YCbCr*/,
+      quant_table: 3,
+      trellis_multipass: false,
+      trellis_opt_zero: false,
+      trellis_opt_table: false,
+      trellis_loops: 1,
+      auto_subsample: true,
+      chroma_subsample: 2,
+      separate_chroma_quality: false,
+      chroma_quality: 75,
+    },
+    autoOptimize: {
+      option: 'quality',
+      min: 0,
+      max: 100,
+    },
+  },
+  webp: {
+    name: 'WebP',
+    extension: 'webp',
+    detectors: [/^RIFF....WEBPVP8[LX ]/s],
+    dec: () => instantiateEmscriptenWasm(webpDec, webpDecWasm),
+    enc: () => instantiateEmscriptenWasm(webpEnc, webpEncWasm),
+    defaultEncoderOptions: {
+      quality: 75,
+      target_size: 0,
+      target_PSNR: 0,
+      method: 4,
+      sns_strength: 50,
+      filter_strength: 60,
+      filter_sharpness: 0,
+      filter_type: 1,
+      partitions: 0,
+      segments: 4,
+      pass: 1,
+      show_compressed: 0,
+      preprocessing: 0,
+      autofilter: 0,
+      partition_limit: 0,
+      alpha_compression: 1,
+      alpha_filtering: 1,
+      alpha_quality: 100,
+      lossless: 0,
+      exact: 0,
+      image_hint: 0,
+      emulate_jpeg_size: 0,
+      thread_level: 0,
+      low_memory: 0,
+      near_lossless: 100,
+      use_delta_palette: 0,
+      use_sharp_yuv: 0,
+    },
+    autoOptimize: {
+      option: 'quality',
+      min: 0,
+      max: 100,
+    },
+  },
+  avif: {
+    name: 'AVIF',
+    extension: 'avif',
+    detectors: [/^\x00\x00\x00 ftypavif\x00\x00\x00\x00/],
+    dec: () => instantiateEmscriptenWasm(avifDec, avifDecWasm),
+    enc: () => instantiateEmscriptenWasm(avifEnc, avifEncWasm),
+    defaultEncoderOptions: {
+      cqLevel: 33,
+      cqAlphaLevel: -1,
+      denoiseLevel: 0,
+      tileColsLog2: 0,
+      tileRowsLog2: 0,
+      speed: 6,
+      subsample: 1,
+      chromaDeltaQ: false,
+      sharpness: 0,
+      tune: 0 /* AVIFTune.auto */,
+    },
+    autoOptimize: {
+      option: 'cqLevel',
+      min: 62,
+      max: 0,
+    },
+  },
+  jxl: {
+    name: 'JPEG-XL',
+    extension: 'jxl',
+    detectors: [/^\xff\x0a/],
+    dec: () => instantiateEmscriptenWasm(jxlDec, jxlDecWasm),
+    enc: () => instantiateEmscriptenWasm(jxlEnc, jxlEncWasm),
+    defaultEncoderOptions: {
+      speed: 4,
+      quality: 75,
+      progressive: false,
+      epf: -1,
+      nearLossless: 0,
+      lossyPalette: false,
+      decodingSpeedTier: 0,
+    },
+    autoOptimize: {
+      option: 'quality',
+      min: 0,
+      max: 100,
+    },
+  },
+  wp2: {
+    name: 'WebP2',
+    extension: 'wp2',
+    detectors: [/^\xF4\xFF\x6F/],
+    dec: () => instantiateEmscriptenWasm(wp2Dec, wp2DecWasm),
+    enc: () => instantiateEmscriptenWasm(wp2Enc, wp2EncWasm),
+    defaultEncoderOptions: {
+      quality: 75,
+      alpha_quality: 75,
+      effort: 5,
+      pass: 1,
+      sns: 50,
+      uv_mode: 0 /*UVMode.UVModeAuto*/,
+      csp_type: 0 /*Csp.kYCoCg*/,
+      error_diffusion: 0,
+      use_random_matrix: false,
+    },
+    autoOptimize: {
+      option: 'quality',
+      min: 0,
+      max: 100,
+    },
+  },
+  oxipng: {
+    name: 'OxiPNG',
+    extension: 'png',
+    detectors: [/^\x89PNG\x0D\x0A\x1A\x0A/],
+    dec: async () => {
+      await pngEncDecPromise;
+      return { decode: pngEncDec.decode };
+    },
+    enc: async () => {
+      await pngEncDecPromise;
+      await oxipngPromise;
+      return {
+        encode: (
+          buffer: Uint8Array,
+          width: number,
+          height: number,
+          opts: { level: number },
+        ) => {
+          const simplePng = pngEncDec.encode(
+            new Uint8Array(buffer),
+            width,
+            height,
+          );
+          return oxipng.optimise(simplePng, opts.level, false);
+        },
+      };
+    },
+    defaultEncoderOptions: {
+      level: 2,
+    },
+    autoOptimize: {
+      option: 'level',
+      min: 6,
+      max: 1,
+    },
+  },
+};

libsquoosh/src/emscripten-utils.ts

@@ -0,0 +1,19 @@
+import { fileURLToPath } from 'url';
+
+export function pathify(path: string): string {
+  if (path.startsWith('file://')) {
+    path = fileURLToPath(path);
+  }
+  return path;
+}
+
+export function instantiateEmscriptenWasm<T extends EmscriptenWasm.Module>(
+  factory: EmscriptenWasm.ModuleFactory<T>,
+  path: string,
+): Promise<T> {
+  return factory({
+    locateFile() {
+      return pathify(path);
+    },
+  });
+}

libsquoosh/src/image_data.ts

@@ -0,0 +1,11 @@
+export default class ImageData {
+  readonly data: Uint8ClampedArray;
+  readonly width: number;
+  readonly height: number;
+
+  constructor(data: Uint8ClampedArray, width: number, height: number) {
+    this.data = data;
+    this.width = width;
+    this.height = height;
+  }
+}

libsquoosh/src/index.js

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

libsquoosh/src/missing-types.d.ts

@@ -0,0 +1,38 @@
+/// <reference path="../../missing-types.d.ts" />
+
+declare module 'asset-url:*' {
+  const value: string;
+  export default value;
+}
+
+// Somehow TS picks up definitions from the module itself
+// instead of using `asset-url:*`. It is probably related to
+// specifity of the module declaration and these declarations below fix it
+declare module 'asset-url:../../codecs/png/pkg/squoosh_png_bg.wasm' {
+  const value: string;
+  export default value;
+}
+
+declare module 'asset-url:../../codecs/oxipng/pkg/squoosh_oxipng_bg.wasm' {
+  const value: string;
+  export default value;
+}
+
+declare module 'asset-url:../../codecs/resize/pkg/squoosh_resize_bg.wasm' {
+  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
+// So, if we want to use those APIs we need to supply its dependencies ourselves
+// However, probably those APIs are more suited to be used in web (i.e. there can be other
+// dependencies to web APIs that might not work in Node)
+type RequestInfo = never;
+type Response = never;
+type WebGLRenderingContext = never;
+type MessageEvent = never;
+
+type BufferSource = ArrayBufferView | ArrayBuffer;
+type URL = import('url').URL;

libsquoosh/src/worker_pool.js

@@ -0,0 +1,104 @@
+import { Worker, parentPort } from 'worker_threads';
+import { TransformStream } from 'web-streams-polyfill';
+
+function uuid() {
+  return Array.from({ length: 16 }, () =>
+    Math.floor(Math.random() * 256).toString(16),
+  ).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);
+    });
+  });
+}
+
+export default class WorkerPool {
+  constructor(numWorkers, workerFile) {
+    this.numWorkers = numWorkers;
+    this.jobQueue = new TransformStream();
+    this.workerQueue = new TransformStream();
+
+    const writer = this.workerQueue.writable.getWriter();
+    for (let i = 0; i < numWorkers; i++) {
+      writer.write(new Worker(workerFile));
+    }
+    writer.releaseLock();
+
+    this.done = this._readLoop();
+  }
+
+  async _readLoop() {
+    const reader = this.jobQueue.readable.getReader();
+    while (true) {
+      const { value, done } = await reader.read();
+      if (done) {
+        await this._terminateAll();
+        return;
+      }
+      const { msg, resolve, reject } = value;
+      const worker = await this._nextWorker();
+      jobPromise(worker, msg)
+        .then((result) => resolve(result))
+        .catch((reason) => reject(reason))
+        .finally(() => {
+          // Return the worker to the pool
+          const writer = this.workerQueue.writable.getWriter();
+          writer.write(worker);
+          writer.releaseLock();
+        });
+    }
+  }
+
+  async _nextWorker() {
+    const reader = this.workerQueue.readable.getReader();
+    const { value, done } = await reader.read();
+    reader.releaseLock();
+    return value;
+  }
+
+  async _terminateAll() {
+    for (let n = 0; n < this.numWorkers; n++) {
+      const worker = await this._nextWorker();
+      worker.terminate();
+    }
+    this.workerQueue.writable.close();
+  }
+
+  async join() {
+    this.jobQueue.writable.getWriter().close();
+    await this.done;
+  }
+
+  dispatchJob(msg) {
+    return new Promise((resolve, reject) => {
+      const writer = this.jobQueue.writable.getWriter();
+      writer.write({ msg, resolve, reject });
+      writer.releaseLock();
+    });
+  }
+
+  static useThisThreadAsWorker(cb) {
+    parentPort.on('message', async (data) => {
+      const { msg, id } = data;
+      try {
+        const result = await cb(msg);
+        parentPort.postMessage({ result, id });
+      } catch (e) {
+        parentPort.postMessage({ error: e.message, id });
+      }
+    });
+  }
+}

libsquoosh/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../generic-tsconfig.json",
+  "compilerOptions": {
+    "lib": ["esnext"],
+    "types": ["node"],
+    "allowJs": true
+  },
+  "include": ["src/**/*", "../codecs/**/*"]
+}

missing-types.d.ts

@@ -44,11 +44,6 @@ 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;

package-lock.json

@@ -5,24 +5,26 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "squoosh",
       "version": "2.0.0",
       "license": "apache-2.0",
+      "dependencies": {
+        "wasm-feature-detect": "^1.2.11"
+      },
       "devDependencies": {
         "@rollup/plugin-commonjs": "^17.0.0",
         "@rollup/plugin-node-resolve": "^11.1.0",
         "@rollup/plugin-replace": "^2.3.4",
         "@surma/rollup-plugin-off-main-thread": "^2.2.2",
         "@types/dedent": "^0.7.0",
-        "@types/mime-types": "^2.1.1",
-        "@types/node": "^16.11.1",
+        "@types/mime-types": "^2.1.0",
+        "@types/node": "^14.14.7",
         "@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": "^7.0.2",
+        "husky": "^4.3.0",
         "idb-keyval": "^3.2.0",
         "image-size": "^0.9.3",
         "linkstate": "^2.0.0",
@@ -30,7 +32,7 @@
         "lodash.camelcase": "^4.3.0",
         "mime-types": "^2.1.28",
         "npm-run-all": "^4.1.5",
-        "pointer-tracker": "^2.5.3",
+        "pointer-tracker": "^2.4.0",
         "postcss": "^7.0.35",
         "postcss-modules": "^3.2.2",
         "postcss-nested": "^4.2.3",
@@ -38,29 +40,14 @@
         "postcss-url": "^8.0.0",
         "preact": "^10.5.5",
         "preact-render-to-string": "^5.1.11",
-        "prettier": "^2.4.1",
+        "prettier": "^2.1.2",
         "rollup": "^2.38.0",
         "rollup-plugin-terser": "^7.0.2",
         "serve": "^11.3.2",
-        "typescript": "^4.4.4",
-        "wasm-feature-detect": "^1.2.11",
+        "typescript": "^4.1.3",
         "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",
@@ -314,9 +301,9 @@
       }
     },
     "node_modules/@types/mime-types": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.1.tgz",
-      "integrity": "sha512-vXOTGVSLR2jMw440moWTC7H19iUyLtP3Z1YTj7cSsubOICinjMxFeb/V57v9QdyyPGbbWolUFSSmSiRSn94tFw==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.0.tgz",
+      "integrity": "sha1-nKUs2jY/aZxpRmwqbM2q2RPqenM=",
       "dev": true
     },
     "node_modules/@types/minimatch": {
@@ -326,9 +313,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "16.11.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.1.tgz",
-      "integrity": "sha512-PYGcJHL9mwl1Ek3PLiYgyEKtwTMmkMw4vbiyz/ps3pfdRYLVv+SN7qHVAImrjdAXxgluDEw6Ph4lyv+m9UpRmA==",
+      "version": "14.14.7",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.7.tgz",
+      "integrity": "sha512-Zw1vhUSQZYw+7u5dAwNbIA9TuTotpzY/OF7sJM9FqPOF3SPjKnxrjoTktXDZgUjybf4cWVBP7O8wvKdSaGHweg==",
       "dev": true
     },
     "node_modules/@types/parse-json": {
@@ -865,6 +852,12 @@
         "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",
@@ -1169,6 +1162,12 @@
       "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",
@@ -2271,6 +2270,31 @@
         "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",
@@ -2447,18 +2471,28 @@
       }
     },
     "node_modules/husky": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-7.0.2.tgz",
-      "integrity": "sha512-8yKEWNX4z2YsofXAMT7KvA1g8p+GxtB1ffV8XtpAEGuXNAbCV5wdNKH+qTpw8SM9fh4aMPDR+yQuKfgnreyZlg==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-4.3.0.tgz",
+      "integrity": "sha512-tTMeLCLqSBqnflBZnlVDhpaIMucSGaYyX6855jM4AguGeWCeSzNdb1mfyWduTZ3pe3SJVvVWGL0jO1iKZVPfTA==",
       "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": "lib/bin.js"
+        "husky-run": "bin/run.js",
+        "husky-upgrade": "lib/upgrader/bin.js"
       },
       "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/typicode"
+        "node": ">=10"
       }
     },
     "node_modules/icss-replace-symbols": {
@@ -3116,6 +3150,18 @@
         "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",
@@ -3629,6 +3675,15 @@
         "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",
@@ -3638,6 +3693,30 @@
         "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",
@@ -3650,6 +3729,15 @@
         "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",
@@ -3677,6 +3765,15 @@
         "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",
@@ -3752,6 +3849,18 @@
         "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",
@@ -3762,9 +3871,9 @@
       }
     },
     "node_modules/pointer-tracker": {
-      "version": "2.5.3",
-      "resolved": "https://registry.npmjs.org/pointer-tracker/-/pointer-tracker-2.5.3.tgz",
-      "integrity": "sha512-LiJUeIbzk4dXq678YeyrZ++mdY17q4n/2sBHfU9wIuvmSzdiPgMvmvWN2g8mY4J7YwYOIrqrZUWP/MfFHVwYtg==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/pointer-tracker/-/pointer-tracker-2.4.0.tgz",
+      "integrity": "sha512-pWI2tpaM/XNtc9mUTv42Rmjf6mkHvE8LT5DDEq0G7baPNhxNM9E3CepubPplSoSLk9E5bwQrAMyDcPVmJyTW4g==",
       "dev": true
     },
     "node_modules/postcss": {
@@ -7406,9 +7515,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.4.1.tgz",
-      "integrity": "sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.1.2.tgz",
+      "integrity": "sha512-16c7K+x4qVlJg9rEbXl7HEGmQyZlG4R9AgP+oHKRMsMsuk8s+ATStlf1NpDqyBI1HpVyfjLOeMhH2LvuNvV5Vg==",
       "dev": true,
       "bin": {
         "prettier": "bin-prettier.js"
@@ -7685,6 +7794,15 @@
       "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",
@@ -8470,9 +8588,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.4.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.4.tgz",
-      "integrity": "sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==",
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.3.tgz",
+      "integrity": "sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -8559,8 +8677,7 @@
     "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==",
-      "dev": true
+      "integrity": "sha512-HUqwaodrQGaZgz1lZaNioIkog9tkeEJjrM3eq4aUL04whXOVDRc/o2EGb/8kV0QX411iAYWEqq7fMBmJ6dKS6w=="
     },
     "node_modules/which": {
       "version": "2.0.2",
@@ -8577,6 +8694,12 @@
         "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",
@@ -8903,9 +9026,9 @@
       }
     },
     "@types/mime-types": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.1.tgz",
-      "integrity": "sha512-vXOTGVSLR2jMw440moWTC7H19iUyLtP3Z1YTj7cSsubOICinjMxFeb/V57v9QdyyPGbbWolUFSSmSiRSn94tFw==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.0.tgz",
+      "integrity": "sha1-nKUs2jY/aZxpRmwqbM2q2RPqenM=",
       "dev": true
     },
     "@types/minimatch": {
@@ -8915,9 +9038,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "16.11.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.1.tgz",
-      "integrity": "sha512-PYGcJHL9mwl1Ek3PLiYgyEKtwTMmkMw4vbiyz/ps3pfdRYLVv+SN7qHVAImrjdAXxgluDEw6Ph4lyv+m9UpRmA==",
+      "version": "14.14.7",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.7.tgz",
+      "integrity": "sha512-Zw1vhUSQZYw+7u5dAwNbIA9TuTotpzY/OF7sJM9FqPOF3SPjKnxrjoTktXDZgUjybf4cWVBP7O8wvKdSaGHweg==",
       "dev": true
     },
     "@types/parse-json": {
@@ -9357,6 +9480,12 @@
         "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",
@@ -9610,6 +9739,12 @@
       "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",
@@ -10527,6 +10662,25 @@
         "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",
@@ -10673,10 +10827,22 @@
       "dev": true
     },
     "husky": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-7.0.2.tgz",
-      "integrity": "sha512-8yKEWNX4z2YsofXAMT7KvA1g8p+GxtB1ffV8XtpAEGuXNAbCV5wdNKH+qTpw8SM9fh4aMPDR+yQuKfgnreyZlg==",
-      "dev": true
+      "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"
+      }
     },
     "icss-replace-symbols": {
       "version": "1.1.0",
@@ -11214,6 +11380,15 @@
         "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",
@@ -11626,12 +11801,36 @@
         "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",
@@ -11641,6 +11840,12 @@
         "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",
@@ -11662,6 +11867,12 @@
         "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",
@@ -11716,6 +11927,15 @@
       "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",
@@ -11726,9 +11946,9 @@
       }
     },
     "pointer-tracker": {
-      "version": "2.5.3",
-      "resolved": "https://registry.npmjs.org/pointer-tracker/-/pointer-tracker-2.5.3.tgz",
-      "integrity": "sha512-LiJUeIbzk4dXq678YeyrZ++mdY17q4n/2sBHfU9wIuvmSzdiPgMvmvWN2g8mY4J7YwYOIrqrZUWP/MfFHVwYtg==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/pointer-tracker/-/pointer-tracker-2.4.0.tgz",
+      "integrity": "sha512-pWI2tpaM/XNtc9mUTv42Rmjf6mkHvE8LT5DDEq0G7baPNhxNM9E3CepubPplSoSLk9E5bwQrAMyDcPVmJyTW4g==",
       "dev": true
     },
     "postcss": {
@@ -14795,9 +15015,9 @@
       }
     },
     "prettier": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.4.1.tgz",
-      "integrity": "sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.1.2.tgz",
+      "integrity": "sha512-16c7K+x4qVlJg9rEbXl7HEGmQyZlG4R9AgP+oHKRMsMsuk8s+ATStlf1NpDqyBI1HpVyfjLOeMhH2LvuNvV5Vg==",
       "dev": true
     },
     "pretty-format": {
@@ -15023,6 +15243,12 @@
       "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",
@@ -15677,9 +15903,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "4.4.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.4.tgz",
-      "integrity": "sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==",
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.3.tgz",
+      "integrity": "sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg==",
       "dev": true
     },
     "uniq": {
@@ -15756,8 +15982,7 @@
     "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==",
-      "dev": true
+      "integrity": "sha512-HUqwaodrQGaZgz1lZaNioIkog9tkeEJjrM3eq4aUL04whXOVDRc/o2EGb/8kV0QX411iAYWEqq7fMBmJ6dKS6w=="
     },
     "which": {
       "version": "2.0.2",
@@ -15768,6 +15993,12 @@
         "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",

package.json

@@ -6,10 +6,9 @@
   "scripts": {
     "build": "rollup -c && node lib/move-output.js",
     "debug": "node --inspect-brk node_modules/.bin/rollup -c",
-    "dev": "DEV_PORT=\"${DEV_PORT:=5000}\" run-p watch serve",
+    "dev": "run-p watch serve",
     "watch": "rollup -cw",
-    "serve": "serve --listen=$DEV_PORT --config ../../../serve.json .tmp/build/static",
-    "prepare": "husky install"
+    "serve": "serve --config ../../../serve.json .tmp/build/static"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^17.0.0",
@@ -17,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.1",
-    "@types/node": "^16.11.1",
+    "@types/mime-types": "^2.1.0",
+    "@types/node": "^14.14.7",
     "@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": "^7.0.2",
+    "husky": "^4.3.0",
     "idb-keyval": "^3.2.0",
     "image-size": "^0.9.3",
     "linkstate": "^2.0.0",
@@ -33,7 +32,7 @@
     "lodash.camelcase": "^4.3.0",
     "mime-types": "^2.1.28",
     "npm-run-all": "^4.1.5",
-    "pointer-tracker": "^2.5.3",
+    "pointer-tracker": "^2.4.0",
     "postcss": "^7.0.35",
     "postcss-modules": "^3.2.2",
     "postcss-nested": "^4.2.3",
@@ -41,17 +40,24 @@
     "postcss-url": "^8.0.0",
     "preact": "^10.5.5",
     "preact-render-to-string": "^5.1.11",
-    "prettier": "^2.4.1",
+    "prettier": "^2.1.2",
     "rollup": "^2.38.0",
     "rollup-plugin-terser": "^7.0.2",
     "serve": "^11.3.2",
-    "typescript": "^4.4.4",
-    "which": "^2.0.2",
-    "wasm-feature-detect": "^1.2.11"
+    "typescript": "^4.1.3",
+    "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",
     "*.rs": "rustfmt"
+  },
+  "dependencies": {
+    "wasm-feature-detect": "^1.2.11"
   }
 }

rollup.config.js

@@ -86,7 +86,6 @@ export default async function ({ watch }) {
       'src/features-worker',
       'src/features-worker-worker-bridge',
       'src/sw',
-      'src/worker-shared',
       'codecs',
     ]),
     urlPlugin(),

src/client/initial-app/index.tsx

@@ -37,10 +37,8 @@ main();
   ga('set', 'transport', 'beacon');
   ga('set', 'dimension1', displayMode);
   ga('send', 'pageview', '/index.html', { title: 'Squoosh' });
-  // 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);
-  });
+  // Load the GA script
+  const script = document.createElement('script');
+  script.src = 'https://www.google-analytics.com/analytics.js';
+  document.head.appendChild(script);
 }

src/client/lazy-app/Compress/Options/Checkbox/index.tsx

@@ -11,11 +11,7 @@ export default class Checkbox extends Component<Props, State> {
     return (
       <div class={style.checkbox}>
         {props.checked ? (
-          props.disabled ? (
-            <CheckedIcon class={`${style.icon} ${style.disabled}`} />
-          ) : (
-            <CheckedIcon class={`${style.icon} ${style.checked}`} />
-          )
+          <CheckedIcon class={`${style.icon} ${style.checked}`} />
         ) : (
           <UncheckedIcon class={style.icon} />
         )}

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

@@ -2,26 +2,6 @@
   display: inline-block;
   position: relative;
   --size: 17px;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 200%;
-    height: 200%;
-    background-color: var(--main-theme-color);
-    border-radius: 999px;
-    opacity: 0.25;
-
-    transform: translate(-50%, -50%) scale(0);
-    transition-property: transform;
-    transition-duration: 250ms;
-  }
-
-  &:focus-within::before {
-    transform: translate(-50%, -50%) scale(1);
-  }
 }
 
 .real-checkbox {
@@ -40,7 +20,3 @@
 .checked {
   fill: var(--main-theme-color);
 }
-
-.disabled {
-  fill: var(--dark-gray);
-}

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

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

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

@@ -47,10 +47,6 @@ range-input::before {
   height: 12px;
 }
 
-range-input:focus-within .thumb {
-  outline: white solid 2px;
-}
-
 .thumb-wrapper {
   position: absolute;
   left: 6px;

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

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

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

@@ -11,10 +11,6 @@
   padding: 3px calc(var(--thumb-size) / 2 + 3px);
 }
 
-.checkbox:focus-within .track {
-  outline: white solid 2px;
-}
-
 .thumb {
   position: relative;
   width: var(--thumb-size);

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

@@ -17,7 +17,7 @@ import Toggle from './Toggle';
 import Select from './Select';
 import { Options as QuantOptionsComponent } from 'features/processors/quantize/client';
 import { Options as ResizeOptionsComponent } from 'features/processors/resize/client';
-import { ImportIcon, SaveIcon, SwapIcon } from 'client/lazy-app/icons';
+import { CLIIcon, SwapIcon } from 'client/lazy-app/icons';
 
 interface Props {
   index: 0 | 1;
@@ -29,43 +29,39 @@ interface Props {
   onEncoderOptionsChange(index: 0 | 1, newOptions: EncoderOptions): void;
   onProcessorOptionsChange(index: 0 | 1, newOptions: ProcessorState): void;
   onCopyToOtherSideClick(index: 0 | 1): void;
-  onSaveSideSettingsClick(index: 0 | 1): void;
-  onImportSideSettingsClick(index: 0 | 1): void;
+  onCopyCliClick(index: 0 | 1): void;
 }
 
 interface State {
   supportedEncoderMap?: PartialButNotUndefined<typeof encoderMap>;
-  leftSideSettings?: string | null;
-  rightSideSettings?: string | null;
 }
 
 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 = {
     supportedEncoderMap: undefined,
-    leftSideSettings: localStorage.getItem('leftSideSettings'),
-    rightSideSettings: localStorage.getItem('rightSideSettings'),
   };
 
   constructor() {
@@ -75,29 +71,6 @@ export default class Options extends Component<Props, State> {
     );
   }
 
-  private setLeftSideSettings = () => {
-    this.setState({
-      leftSideSettings: localStorage.getItem('leftSideSettings'),
-    });
-  };
-
-  private setRightSideSettings = () => {
-    this.setState({
-      rightSideSettings: localStorage.getItem('rightSideSettings'),
-    });
-  };
-
-  componentDidMount(): void {
-    // Changing the state when side setting is stored in localstorage
-    window.addEventListener('leftSideSettings', this.setLeftSideSettings);
-    window.addEventListener('rightSideSettings', this.setRightSideSettings);
-  }
-
-  componentWillUnmount(): void {
-    window.removeEventListener('leftSideSettings', this.setLeftSideSettings);
-    window.removeEventListener('removeSideSettings', this.setRightSideSettings);
-  }
-
   private onEncoderTypeChange = (event: Event) => {
     const el = event.currentTarget as HTMLSelectElement;
 
@@ -135,18 +108,14 @@ export default class Options extends Component<Props, State> {
     this.props.onEncoderOptionsChange(this.props.index, newOptions);
   };
 
+  private onCopyCliClick = () => {
+    this.props.onCopyCliClick(this.props.index);
+  };
+
   private onCopyToOtherSideClick = () => {
     this.props.onCopyToOtherSideClick(this.props.index);
   };
 
-  private onSaveSideSettingClick = () => {
-    this.props.onSaveSideSettingsClick(this.props.index);
-  };
-
-  private onImportSideSettingsClick = () => {
-    this.props.onImportSideSettingsClick(this.props.index);
-  };
-
   render(
     { source, encoderState, processorState }: Props,
     { supportedEncoderMap }: State,
@@ -169,6 +138,13 @@ export default class Options extends Component<Props, State> {
               <h3 class={style.optionsTitle}>
                 <div class={style.titleAndButtons}>
                   Edit
+                  <button
+                    class={style.cliButton}
+                    title="Copy npx command"
+                    onClick={this.onCopyCliClick}
+                  >
+                    <CLIIcon />
+                  </button>
                   <button
                     class={style.copyOverButton}
                     title="Copy settings to other side"
@@ -176,36 +152,6 @@ export default class Options extends Component<Props, State> {
                   >
                     <SwapIcon />
                   </button>
-                  <button
-                    class={style.saveButton}
-                    title="Save side settings"
-                    onClick={this.onSaveSideSettingClick}
-                  >
-                    <SaveIcon />
-                  </button>
-                  <button
-                    class={
-                      style.importButton +
-                      ' ' +
-                      (!this.state.leftSideSettings && this.props.index === 0
-                        ? style.buttonOpacity
-                        : '') +
-                      ' ' +
-                      (!this.state.rightSideSettings && this.props.index === 1
-                        ? style.buttonOpacity
-                        : '')
-                    }
-                    title="Import saved side settings"
-                    onClick={this.onImportSideSettingsClick}
-                    disabled={
-                      // Disabled if this side's settings haven't been saved
-                      (!this.state.leftSideSettings &&
-                        this.props.index === 0) ||
-                      (!this.state.rightSideSettings && this.props.index === 1)
-                    }
-                  >
-                    <ImportIcon />
-                  </button>
                 </div>
               </h3>
               <label class={style.sectionEnabler}>
@@ -257,9 +203,7 @@ export default class Options extends Component<Props, State> {
               onChange={this.onEncoderTypeChange}
               large
             >
-              <option value="identity">{`Original Image ${
-                this.props.source ? `(${this.props.source.file.name})` : ''
-              }`}</option>
+              <option value="identity">Original Image</option>
               {Object.entries(supportedEncoderMap).map(([type, encoder]) => (
                 <option value={type}>{encoder.meta.label}</option>
               ))}

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

@@ -1,7 +1,6 @@
 .options-scroller {
   --horizontal-padding: 15px;
   border-radius: var(--scroller-radius);
-  overflow: hidden;
 
   /* At smaller widths, the multi-panel handles the scrolling */
   @media (min-width: 600px) {
@@ -53,16 +52,6 @@
   composes: option-toggle;
   grid-template-columns: auto 1fr;
   gap: 1em;
-
-  border-top: 1px solid #fff4;
-
-  transition-property: background-color;
-  transition-duration: 250ms;
-}
-
-.option-reveal:focus-within,
-.option-reveal:hover {
-  background-color: #fff2;
 }
 
 .option-one-cell {
@@ -83,11 +72,11 @@
 }
 
 .text-field {
-  background-color: var(--black);
-  color: var(--white);
+  background: var(--white);
+  color: var(--black);
   font: inherit;
   border: none;
-  padding: 6px 6px 6px 10px;
+  padding: 6px 0 6px 10px;
   width: 100%;
   box-sizing: border-box;
   border-radius: 4px;
@@ -122,37 +111,7 @@
 .copy-over-button {
   composes: title-button;
 
-  /* Make the filled arrow point towards the other options element */
-  transform: rotate(var(--rotate-copyoverbutton-angle));
-
   svg {
     fill: var(--header-text-color);
   }
-
-  &:focus {
-    outline: var(--header-text-color) solid 2px;
-    outline-offset: 0.25em;
-  }
-}
-
-.save-button,
-.import-button {
-  composes: title-button;
-
-  svg {
-    stroke: var(--header-text-color);
-  }
-
-  &:focus {
-    outline: var(--header-text-color) solid 2px;
-    outline-offset: 0.25em;
-  }
-}
-
-.button-opacity {
-  pointer-events: none;
-  cursor: not-allowed;
-  svg {
-    opacity: 0.5;
-  }
 }

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

@@ -1,6 +1,5 @@
 import PointerTracker, { Pointer } from 'pointer-tracker';
 import 'add-css:./styles.css';
-import { isSafari } from 'client/lazy-app/util';
 
 interface Point {
   clientX: number;
@@ -82,7 +81,6 @@ function createPoint(): SVGPoint {
 }
 
 const MIN_SCALE = 0.01;
-const MAX_SCALE = 100000;
 
 export default class PinchZoom extends HTMLElement {
   // The element that we'll transform.
@@ -106,23 +104,14 @@ export default class PinchZoom extends HTMLElement {
     const pointerTracker: PointerTracker = new PointerTracker(this, {
       start: (pointer, event) => {
         // We only want to track 2 pointers at most
-        if (
-          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));
@@ -255,9 +244,6 @@ export default class PinchZoom extends HTMLElement {
     // Avoid scaling to zero
     if (scale < MIN_SCALE) return;
 
-    // Avoid scaling to very large values
-    if (scale > MAX_SCALE) return;
-
     // Return if there's no change
     if (scale === this.scale && x === this.x && y === this.y) return;
 
@@ -310,13 +296,9 @@ export default class PinchZoom extends HTMLElement {
       deltaY *= 15;
     }
 
-    const zoomingOut = deltaY > 0;
-
     // ctrlKey is true when pinch-zooming on a trackpad.
     const divisor = ctrlKey ? 100 : 300;
-    // when zooming out, invert the delta and the ratio to keep zoom stable
-    const ratio = 1 - (zoomingOut ? -deltaY : deltaY) / divisor;
-    const scaleDiff = zoomingOut ? 1 / ratio : ratio;
+    const scaleDiff = 1 - deltaY / divisor;
 
     this._applyChange({
       scaleDiff,

src/client/lazy-app/Compress/Output/custom-els/TwoUp/styles.css

@@ -40,8 +40,7 @@ two-up[legacy-clip-compat] > :not(.two-up-handle) {
 }
 
 .scrubber {
-  display: grid;
-  align-content: center;
+  display: flex;
   position: absolute;
   top: 50%;
   left: 50%;
@@ -55,6 +54,10 @@ two-up[legacy-clip-compat] > :not(.two-up-handle) {
   padding: 0 calc(var(--thumb-size) * 0.24);
 }
 
+.scrubber svg {
+  flex: 1;
+}
+
 .arrow-left {
   fill: var(--pink);
 }

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

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

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

@@ -49,7 +49,6 @@
   align-self: center;
   padding: 9px 66px;
   position: relative;
-  gap: 6px;
 
   /* Allow clicks to fall through to the pinch zoom area */
   pointer-events: none;
@@ -69,6 +68,7 @@
   display: flex;
   position: relative;
   z-index: 100;
+  margin: 0 3px;
 }
 
 .button,
@@ -86,7 +86,8 @@
   font-size: 1.2rem;
   cursor: pointer;
 
-  &:focus-visible {
+  &:focus {
+    /* box-shadow: 0 0 0 2px var(--hot-pink); */
     box-shadow: 0 0 0 2px #fff;
     outline: none;
     z-index: 1;
@@ -95,7 +96,6 @@
 
 .button {
   color: #fff;
-  margin: 0;
 
   &:hover {
     background: rgba(50, 50, 50, 0.92);
@@ -115,7 +115,7 @@
 .last-button {
   composes: button;
   border-radius: 0 6px 6px 0;
-  border-right-width: 1px;
+  border-left-width: 1px;
 }
 
 .zoom {
@@ -161,8 +161,3 @@ input.zoom {
     pointer-events: auto;
   }
 }
-
-.pixelated {
-  image-rendering: crisp-edges;
-  image-rendering: pixelated;
-}

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

@@ -110,7 +110,7 @@ export default class Results extends Component<Props, State> {
               <div class={style.percentOutput}>
                 {diff && diff !== 1 && (
                   <span class={style.sizeDirection}>
-                    {diff < 1 ? '↓' : '↑'}
+                    {diff < 1 ? '↓' : '+'}
                   </span>
                 )}
                 <span class={style.sizeValue}>{percent || 0}</span>

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

@@ -172,6 +172,8 @@
   display: grid;
   grid-template-columns: auto auto auto;
   line-height: 1;
+  font-size: 2.6rem;
+  gap: 0.2rem;
 
   @media (min-width: 600px) {
     background: var(--main-theme-color);
@@ -185,19 +187,15 @@
 }
 
 .size-direction {
-  font-weight: 700;
   align-self: center;
-  font-family: sans-serif;
+  font-family: ui-monospace, monospace;
   opacity: 0.76;
   text-shadow: 0 2px rgba(0, 0, 0, 0.3);
-  font-size: 1.5rem;
-  position: relative;
-  top: 3px;
+  font-size: 0.75em;
 }
 
 .size-value {
   font-family: 'Roboto Mono Numbers';
-  font-size: 2.6rem;
   text-shadow: 0 2px rgba(0, 0, 0, 0.3);
 }
 
@@ -206,7 +204,7 @@
   position: relative;
   top: 4px;
   opacity: 0.76;
-  margin-left: 0.2rem;
+  font-size: 0.5em;
 }
 
 .download {

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

@@ -31,6 +31,7 @@ import Results from './Results';
 import WorkerBridge from '../worker-bridge';
 import { resize } from 'features/processors/resize/client';
 import type SnackBarElement from 'shared/custom-els/snack-bar';
+import { generateCliInvocation } from '../util/cli';
 import { drawableToImageData } from '../util/canvas';
 
 export type OutputType = EncoderType | 'identity';
@@ -113,9 +114,9 @@ async function decodeImage(
       }
     }
     // Otherwise fall through and try built-in decoding for a laugh.
-    return await builtinDecode(signal, blob);
+    return await builtinDecode(signal, blob, mimeType);
   } catch (err) {
-    if (err instanceof Error && err.name === 'AbortError') throw err;
+    if (err.name === 'AbortError') throw err;
     console.log(err);
     throw Error("Couldn't decode image");
   }
@@ -281,35 +282,24 @@ export default class Compress extends Component<Props, State> {
     source: undefined,
     loading: false,
     preprocessorState: defaultPreprocessorState,
-    // Tasking catched side settings if available otherwise taking default settings
     sides: [
-      localStorage.getItem('leftSideSettings')
-        ? {
-            ...JSON.parse(localStorage.getItem('leftSideSettings') as string),
-            loading: false,
-          }
-        : {
-            latestSettings: {
-              processorState: defaultProcessorState,
-              encoderState: undefined,
-            },
-            loading: false,
-          },
-      localStorage.getItem('rightSideSettings')
-        ? {
-            ...JSON.parse(localStorage.getItem('rightSideSettings') as string),
-            loading: false,
-          }
-        : {
-            latestSettings: {
-              processorState: defaultProcessorState,
-              encoderState: {
-                type: 'mozJPEG',
-                options: encoderMap.mozJPEG.meta.defaultOptions,
-              },
-            },
-            loading: false,
+      {
+        latestSettings: {
+          processorState: defaultProcessorState,
+          encoderState: undefined,
+        },
+        loading: false,
+      },
+      {
+        latestSettings: {
+          processorState: defaultProcessorState,
+          encoderState: {
+            type: 'mozJPEG',
+            options: encoderMap.mozJPEG.meta.defaultOptions,
           },
+        },
+        loading: false,
+      },
     ],
     mobileView: this.widthQuery.matches,
   };
@@ -439,99 +429,6 @@ export default class Compress extends Component<Props, State> {
       sides: cleanSet(this.state.sides, otherIndex, oldSettings),
     });
   };
-  /**
-   * This function saves encodedSettings and latestSettings of
-   * particular side in browser local storage
-   * @param index : (0|1)
-   * @returns
-   */
-  private onSaveSideSettingsClick = async (index: 0 | 1) => {
-    if (index === 0) {
-      const leftSideSettings = JSON.stringify({
-        encodedSettings: this.state.sides[index].encodedSettings,
-        latestSettings: this.state.sides[index].latestSettings,
-      });
-      localStorage.setItem('leftSideSettings', leftSideSettings);
-      // Firing an event when we save side settings in localstorage
-      window.dispatchEvent(new CustomEvent('leftSideSettings'));
-      await this.props.showSnack('Left side settings saved', {
-        timeout: 1500,
-        actions: ['dismiss'],
-      });
-      return;
-    }
-
-    if (index === 1) {
-      const rightSideSettings = JSON.stringify({
-        encodedSettings: this.state.sides[index].encodedSettings,
-        latestSettings: this.state.sides[index].latestSettings,
-      });
-      localStorage.setItem('rightSideSettings', rightSideSettings);
-      // Firing an event when we save side settings in localstorage
-      window.dispatchEvent(new CustomEvent('rightSideSettings'));
-      await this.props.showSnack('Right side settings saved', {
-        timeout: 1500,
-        actions: ['dismiss'],
-      });
-      return;
-    }
-  };
-
-  /**
-   * This function sets the side state with catched localstorage
-   * value as per side index provided
-   * @param index : (0|1)
-   * @returns
-   */
-  private onImportSideSettingsClick = async (index: 0 | 1) => {
-    const leftSideSettingsString = localStorage.getItem('leftSideSettings');
-    const rightSideSettingsString = localStorage.getItem('rightSideSettings');
-
-    if (index === 0 && leftSideSettingsString) {
-      const oldLeftSideSettings = this.state.sides[index];
-      const newLeftSideSettings = {
-        ...this.state.sides[index],
-        ...JSON.parse(leftSideSettingsString),
-      };
-      this.setState({
-        sides: cleanSet(this.state.sides, index, newLeftSideSettings),
-      });
-      const result = await this.props.showSnack('Left side settings imported', {
-        timeout: 3000,
-        actions: ['undo', 'dismiss'],
-      });
-      if (result === 'undo') {
-        this.setState({
-          sides: cleanSet(this.state.sides, index, oldLeftSideSettings),
-        });
-      }
-      return;
-    }
-
-    if (index === 1 && rightSideSettingsString) {
-      const oldRightSideSettings = this.state.sides[index];
-      const newRightSideSettings = {
-        ...this.state.sides[index],
-        ...JSON.parse(rightSideSettingsString),
-      };
-      this.setState({
-        sides: cleanSet(this.state.sides, index, newRightSideSettings),
-      });
-      const result = await this.props.showSnack(
-        'Right side settings imported',
-        {
-          timeout: 3000,
-          actions: ['undo', 'dismiss'],
-        },
-      );
-      if (result === 'undo') {
-        this.setState({
-          sides: cleanSet(this.state.sides, index, oldRightSideSettings),
-        });
-      }
-      return;
-    }
-  };
 
   private onPreprocessorChange = async (
     preprocessorState: PreprocessorState,
@@ -565,6 +462,29 @@ export default class Compress extends Component<Props, State> {
     }));
   };
 
+  private onCopyCliClick = async (index: 0 | 1) => {
+    try {
+      const cliInvocation = generateCliInvocation(
+        this.state.sides[index].latestSettings.encoderState!,
+        this.state.sides[index].latestSettings.processorState,
+      );
+      await navigator.clipboard.writeText(cliInvocation);
+      const result = await this.props.showSnack(
+        'CLI command copied to clipboard',
+        {
+          timeout: 8000,
+          actions: ['usage', 'dismiss'],
+        },
+      );
+
+      if (result === 'usage') {
+        open('https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli');
+      }
+    } catch (e) {
+      this.props.showSnack(e);
+    }
+  };
+
   /**
    * Debounce the heavy lifting of updateImage.
    * Otherwise, the thrashing causes jank, and sometimes crashes iOS Safari.
@@ -720,7 +640,7 @@ export default class Compress extends Component<Props, State> {
           return { sides };
         });
       } catch (err) {
-        if (err instanceof Error && err.name === 'AbortError') return;
+        if (err.name === 'AbortError') return;
         this.props.showSnack(`Source decoding error: ${err}`);
         throw err;
       }
@@ -778,7 +698,7 @@ export default class Compress extends Component<Props, State> {
           return newState;
         });
       } catch (err) {
-        if (err instanceof Error && err.name === 'AbortError') return;
+        if (err.name === 'AbortError') return;
         this.setState({ loading: false });
         this.props.showSnack(`Preprocessing error: ${err}`);
         throw err;
@@ -902,7 +822,7 @@ export default class Compress extends Component<Props, State> {
 
         this.activeSideJobs[sideIndex] = undefined;
       } catch (err) {
-        if (err instanceof Error && err.name === 'AbortError') return;
+        if (err.name === 'AbortError') return;
         this.setState((currentState) => {
           const sides = cleanMerge(currentState.sides, sideIndex, {
             loading: false,
@@ -932,9 +852,8 @@ export default class Compress extends Component<Props, State> {
         onEncoderTypeChange={this.onEncoderTypeChange}
         onEncoderOptionsChange={this.onEncoderOptionsChange}
         onProcessorOptionsChange={this.onProcessorOptionsChange}
+        onCopyCliClick={this.onCopyCliClick}
         onCopyToOtherSideClick={this.onCopyToOtherClick}
-        onSaveSideSettingsClick={this.onSaveSideSettingsClick}
-        onImportSideSettingsClick={this.onImportSideSettingsClick}
       />
     ));
 
@@ -948,7 +867,7 @@ export default class Compress extends Component<Props, State> {
         typeLabel={
           side.latestSettings.encoderState
             ? encoderMap[side.latestSettings.encoderState.type].meta.label
-            : `${side.file ? `${side.file.name}` : 'Original Image'}`
+            : 'Original Image'
         }
       />
     ));

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

@@ -45,11 +45,9 @@
   --hot-theme-color: var(--hot-pink);
   --header-text-color: var(--white);
   --scroller-radius: var(--options-radius) var(--options-radius) 0 0;
-  --rotate-copyoverbutton-angle: 90deg; /* To point down */
 
   @media (min-width: 600px) {
     --scroller-radius: 0 var(--options-radius) var(--options-radius) 0;
-    --rotate-copyoverbutton-angle: 0deg; /* To point right (no change) */
   }
 }
 
@@ -58,11 +56,9 @@
   --hot-theme-color: var(--deep-blue);
   --header-text-color: var(--dark-text);
   --scroller-radius: var(--options-radius) var(--options-radius) 0 0;
-  --rotate-copyoverbutton-angle: -90deg; /* To point up */
 
   @media (min-width: 600px) {
     --scroller-radius: var(--options-radius) 0 0 var(--options-radius);
-    --rotate-copyoverbutton-angle: 180deg; /* To point left */
   }
 }
 
@@ -113,13 +109,6 @@
 
   & > svg {
     width: 47px;
-    overflow: visible;
-  }
-
-  &:focus .back-blob {
-    stroke: var(--deep-blue);
-    stroke-width: 5px;
-    animation: strokePulse 500ms ease forwards;
   }
 
   @media (min-width: 600px) {
@@ -131,15 +120,6 @@
   }
 }
 
-@keyframes strokePulse {
-  from {
-    stroke-width: 8px;
-  }
-  to {
-    stroke-width: 5px;
-  }
-}
-
 .back-blob {
   fill: var(--hot-pink);
   opacity: 0.77;

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

@@ -11,25 +11,6 @@ const Icon = (props: preact.JSX.HTMLAttributes) => (
   />
 );
 
-export const ToggleAliasingIcon = (props: preact.JSX.HTMLAttributes) => (
-  <Icon {...props}>
-    <circle
-      cx="12"
-      cy="12"
-      r="8"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-    />
-  </Icon>
-);
-
-export const ToggleAliasingActiveIcon = (props: preact.JSX.HTMLAttributes) => (
-  <Icon {...props}>
-    <path d="M12 3h5v2h2v2h2v5h-2V9h-2V7h-2V5h-3V3M21 12v5h-2v2h-2v2h-5v-2h3v-2h2v-2h2v-3h2M12 21H7v-2H5v-2H3v-5h2v3h2v2h2v2h3v2M3 12V7h2V5h2V3h5v2H9v2H7v2H5v3H3" />
-  </Icon>
-);
-
 export const ToggleBackgroundIcon = (props: preact.JSX.HTMLAttributes) => (
   <Icon {...props}>
     <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.9 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h10a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z" />
@@ -92,36 +73,19 @@ export const DownloadIcon = () => (
   </svg>
 );
 
+export const CLIIcon = () => (
+  <svg viewBox="0 0 81.3 68.8">
+    <path
+      fill="none"
+      stroke-miterlimit="15.6"
+      stroke-width="6.3"
+      d="M3.1 3.1h75v62.5h-75zm18.8 43.8l12.5-12.5-12.5-12.5m18.7 25h18.8"
+    />
+  </svg>
+);
+
 export const SwapIcon = () => (
   <svg viewBox="0 0 18 14">
     <path d="M5.5 3.6v6.8L2.1 7l3.4-3.4M7 0L0 7l7 7V0zm4 0v14l7-7-7-7z" />
   </svg>
 );
-
-export const SaveIcon = () => (
-  <svg viewBox="0 0 24 24">
-    <g
-      fill="none"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-    >
-      <path d="M12.501 20.93c-.866.25-1.914-.166-2.176-1.247a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.074.26 1.49 1.296 1.252 2.158M19 22v-6m3 3l-3-3l-3 3" />
-      <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0" />
-    </g>
-  </svg>
-);
-
-export const ImportIcon = () => (
-  <svg viewBox="0 0 24 24">
-    <g
-      fill="none"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-    >
-      <path d="M12.52 20.924c-.87.262-1.93-.152-2.195-1.241a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.088.264 1.502 1.323 1.242 2.192M19 16v6m3-3l-3 3l-3-3" />
-      <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0" />
-    </g>
-  </svg>
-);

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

@@ -63,17 +63,35 @@ interface DrawableToImageDataOptions {
   sh?: number;
 }
 
+function getWidth(
+  drawable: ImageBitmap | HTMLImageElement | VideoFrame,
+): number {
+  if ('displayWidth' in drawable) {
+    return drawable.displayWidth;
+  }
+  return drawable.width;
+}
+
+function getHeight(
+  drawable: ImageBitmap | HTMLImageElement | VideoFrame,
+): number {
+  if ('displayHeight' in drawable) {
+    return drawable.displayHeight;
+  }
+  return drawable.height;
+}
+
 export function drawableToImageData(
-  drawable: ImageBitmap | HTMLImageElement,
+  drawable: ImageBitmap | HTMLImageElement | VideoFrame,
   opts: DrawableToImageDataOptions = {},
 ): ImageData {
   const {
-    width = drawable.width,
-    height = drawable.height,
+    width = getWidth(drawable),
+    height = getHeight(drawable),
     sx = 0,
     sy = 0,
-    sw = drawable.width,
-    sh = drawable.height,
+    sw = getWidth(drawable),
+    sh = getHeight(drawable),
   } = opts;
 
   // Make canvas same size as image