Bump terser from 5.7.0 to 5.16.1 in /libsquoosh

Bumps [terser](https://github.com/terser/terser) from 5.7.0 to 5.16.1.
- [Release notes](https://github.com/terser/terser/releases)
- [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md)
- [Commits](https://github.com/terser/terser/compare/v5.7.0...v5.16.1)

---
updated-dependencies:
- dependency-name: terser
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

.gitattributes

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

.husky/pre-commit

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

cli/README.md

@@ -1,3 +1,7 @@
+# Project no longer maintained
+
+Unfortunately, due to a few people leaving the team, and staffing issues resulting from the current economic climate (ugh), this package is no longer actively maintained. I know that sucks, but there simply isn't the time & people to work on this. If anyone from the community wants to fork it, you have my blessing. The [squoosh.app](https://squoosh.app) will continue to be supported and improved.
+
 # 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.

cli/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@squoosh/cli",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@squoosh/cli",
-      "version": "0.7.2",
+      "version": "0.7.3",
       "license": "Apache-2.0",
       "dependencies": {
         "@squoosh/lib": "^0.4.0",

cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squoosh/cli",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "A CLI for Squoosh",
   "public": true,
   "type": "module",

cli/src/index.js

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

codecs/jxl/Makefile

@@ -1,5 +1,5 @@
 CODEC_URL = https://github.com/libjxl/libjxl.git
-CODEC_VERSION = v0.5
+CODEC_VERSION = 9f544641ec83f6abd9da598bdd08178ee8a003e0
 CODEC_DIR = node_modules/jxl
 CODEC_BUILD_ROOT := $(CODEC_DIR)/build
 CODEC_MT_BUILD_DIR := $(CODEC_BUILD_ROOT)/mt
@@ -75,6 +75,9 @@ $(CODEC_MT_SIMD_BUILD_DIR)/Makefile: CXXFLAGS+=-msimd128
 	-DCMAKE_CROSSCOMPILING_EMULATOR=node \
 	-B $(@D) \
 	$(<D)
+	emcc -Wall -O3 -o $(CODEC_DIR)/third_party/skcms/skcms.cc.o -I$(CODEC_DIR)/third_party/skcms -c $(CODEC_DIR)/third_party/skcms/skcms.cc
+	llvm-ar rc $(CODEC_BUILD_DIR)/third_party/libskcms.a $(CODEC_DIR)/third_party/skcms/skcms.cc.o
+	rm $(CODEC_DIR)/third_party/skcms/skcms.cc.o
 
 $(CODEC_DIR)/CMakeLists.txt:
 	$(RM) -r $(@D)

codecs/jxl/enc/jxl_enc.cpp

@@ -4,21 +4,21 @@
 #include "lib/jxl/base/thread_pool_internal.h"
 #include "lib/jxl/enc_external_image.h"
 #include "lib/jxl/enc_file.h"
+#include "lib/jxl/enc_color_management.h"
 
 using namespace emscripten;
 
 thread_local const val Uint8Array = val::global("Uint8Array");
 
 struct JXLOptions {
-  // 1 = slowest
-  // 7 = fastest
-  int speed;
+  int effort;
   float quality;
   bool progressive;
   int epf;
-  int nearLossless;
   bool lossyPalette;
   size_t decodingSpeedTier;
+  float photonNoiseIso;
+  bool lossyModular;
 };
 
 val encode(std::string image, int width, int height, JXLOptions options) {
@@ -33,11 +33,14 @@ val encode(std::string image, int width, int height, JXLOptions options) {
   pool_ptr = &pool;
 #endif
 
-  cparams.epf = options.epf;
-  cparams.speed_tier = static_cast<jxl::SpeedTier>(options.speed);
-  cparams.decoding_speed_tier = options.decodingSpeedTier;
+  size_t st = 10 - options.effort;
+  cparams.speed_tier = jxl::SpeedTier(st);
 
-  if (options.lossyPalette || options.nearLossless) {
+  cparams.epf = options.epf;
+  cparams.decoding_speed_tier = options.decodingSpeedTier;
+  cparams.photon_noise_iso = options.photonNoiseIso;
+
+  if (options.lossyPalette) {
     cparams.lossy_palette = true;
     cparams.palette_colors = 0;
     cparams.options.predictor = jxl::Predictor::Zero;
@@ -49,11 +52,16 @@ val encode(std::string image, int width, int height, JXLOptions options) {
   float quality = options.quality;
 
   // Quality settings roughly match libjpeg qualities.
-  if (quality < 7 || quality == 100) {
+  if (options.lossyModular || quality == 100) {
     cparams.modular_mode = true;
     // Internal modular quality to roughly match VarDCT size.
-    cparams.quality_pair.first = cparams.quality_pair.second =
-        std::min(35 + (quality - 7) * 3.0f, 100.0f);
+    if (quality < 7) {
+      cparams.quality_pair.first = cparams.quality_pair.second =
+          std::min(35 + (quality - 7) * 3.0f, 100.0f);
+    } else {
+      cparams.quality_pair.first = cparams.quality_pair.second =
+          std::min(35 + (quality - 7) * 65.f / 93.f, 100.0f);
+    }
   } else {
     cparams.modular_mode = false;
     if (quality >= 30) {
@@ -90,14 +98,14 @@ val encode(std::string image, int width, int height, JXLOptions options) {
       jxl::Span<const uint8_t>(reinterpret_cast<const uint8_t*>(image.data()), image.size()), width,
       height, jxl::ColorEncoding::SRGB(/*is_gray=*/false), /*has_alpha=*/true,
       /*alpha_is_premultiplied=*/false, /*bits_per_sample=*/8, /*endiannes=*/JXL_LITTLE_ENDIAN,
-      /*flipped_y=*/false, pool_ptr, main);
+      /*flipped_y=*/false, pool_ptr, main, /*(only true if bits_per_sample==32) float_in=*/false);
 
   if (!result) {
     return val::null();
   }
 
   auto js_result = val::null();
-  if (EncodeFile(cparams, &io, &passes_enc_state, &bytes, /*aux=*/nullptr, pool_ptr)) {
+  if (EncodeFile(cparams, &io, &passes_enc_state, &bytes, jxl::GetJxlCms(), /*aux=*/nullptr, pool_ptr)) {
     js_result = Uint8Array.new_(typed_memory_view(bytes.size(), bytes.data()));
   }
 
@@ -106,12 +114,13 @@ val encode(std::string image, int width, int height, JXLOptions options) {
 
 EMSCRIPTEN_BINDINGS(my_module) {
   value_object<JXLOptions>("JXLOptions")
-      .field("speed", &JXLOptions::speed)
+      .field("effort", &JXLOptions::effort)
       .field("quality", &JXLOptions::quality)
       .field("progressive", &JXLOptions::progressive)
-      .field("nearLossless", &JXLOptions::nearLossless)
       .field("lossyPalette", &JXLOptions::lossyPalette)
       .field("decodingSpeedTier", &JXLOptions::decodingSpeedTier)
+      .field("photonNoiseIso", &JXLOptions::photonNoiseIso)
+      .field("lossyModular", &JXLOptions::lossyModular)
       .field("epf", &JXLOptions::epf);
 
   function("encode", &encode);

codecs/jxl/enc/jxl_enc.d.ts

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

lib/data-url-plugin.js

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

lib/entry-data-plugin.js

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

lib/omt.ejs

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

libsquoosh/README.md

@@ -1,3 +1,7 @@
+# Project no longer maintained
+
+Unfortunately, due to a few people leaving the team, and staffing issues resulting from the current economic climate (ugh), this package is no longer actively maintained. I know that sucks, but there simply isn't the time & people to work on this. If anyone from the community wants to fork it, you have my blessing. The [squoosh.app](https://squoosh.app) will continue to be supported and improved.
+
 # 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.
@@ -16,21 +20,25 @@ You can start using the libSquoosh by adding these lines to the top of your JS p
 
 ```js
 import { ImagePool } from '@squoosh/lib';
-const imagePool = new ImagePool();
+import { cpus } from 'os';
+const imagePool = new ImagePool(cpus().length);
 ```
 
-This will create an image pool with an underlying processing pipeline that you can use to ingest and encode images. The ImagePool constructor takes one argument that defines how many parallel operations it is allowed to run at any given time. By default, this number is set to the amount of CPU cores available in the system it is running on.
+This will create an image pool with an underlying processing pipeline that you can use to ingest and encode images. The ImagePool constructor takes one argument that defines how many parallel operations it is allowed to run at any given time.
+
+:warning: Important! Make sure to only create 1 `ImagePool` when performing parallel image processing. If you create multiple pools, the `ImagePool` can run out of memory and crash. By reusing a single `ImagePool`, you can ensure that the backing worker queue and processing pipeline releases memory prior to processing the next image.
 
 ## Ingesting images
 
 You can ingest a new image like so:
 
 ```js
-const imagePath = 'path/to/image.png';
-const image = imagePool.ingestImage(imagePath);
+import fs from 'fs/promises';
+const file = await fs.readFile('./path/to/image.png');
+const image = imagePool.ingestImage(file);
 ```
 
-The `ingestImage` function can take anything the node [`readFile`][readfile] function can take, including a buffer and `FileHandle`.
+The `ingestImage` function can accept any [`ArrayBuffer`][arraybuffer] whether that is from `readFile()` or `fetch()`.
 
 The returned `image` object is a representation of the original image, that you can now preprocess, encode, and extract information about.
 
@@ -39,23 +47,19 @@ The returned `image` object is a representation of the original image, that you
 When an image has been ingested, you can start preprocessing it and encoding it to other formats. This example will resize the image and then encode it to a `.jpg` and `.jxl` image:
 
 ```js
-await image.decoded; //Wait until the image is decoded before running preprocessors. 
-
 const preprocessOptions = {
   //When both width and height are specified, the image resized to specified size.
   resize: {
-    enabled: true,
     width: 100,
     height: 50,
-  }
+  },
   /*
   //When either width or height is specified, the image resized to specified size keeping aspect ratio.
   resize: {
-    enabled: true,
     width: 100,
   }
   */
-}
+};
 await image.preprocess(preprocessOptions);
 
 const encodeOptions = {
@@ -63,9 +67,8 @@ const encodeOptions = {
   jxl: {
     quality: 90,
   },
-}
-await image.encode(encodeOptions);
-
+};
+const result = await image.encode(encodeOptions);
 ```
 
 The default values for each option can be found in the [`codecs.ts`][codecs.ts] file under `defaultEncoderOptions`. Every unspecified value will use the default value specified there. _Better documentation is needed here._
@@ -89,7 +92,7 @@ When you have encoded an image, you normally want to write it to a file.
 This example takes an image that has been encoded as a `jpg` and writes it to a file:
 
 ```js
-const rawEncodedImage = (await image.encodedWith.mozjpeg).binary;
+const rawEncodedImage = image.encodedWith.mozjpeg.binary;
 
 fs.writeFile('/path/to/new/image.jpg', rawEncodedImage);
 ```
@@ -100,10 +103,7 @@ This example iterates through all encoded versions of the image and writes them
 const newImagePath = '/path/to/image.'; //extension is added automatically
 
 for (const encodedImage of Object.values(image.encodedWith)) {
-  fs.writeFile(
-    newImagePath + (await encodedImage).extension,
-    (await encodedImage).binary,
-  );
+  fs.writeFile(newImagePath + encodedImage.extension, encodedImage.binary);
 }
 ```
 
@@ -132,7 +132,7 @@ console.log(await image.decoded);
 Information about an encoded image can be found at `Image.encodedWith[encoderName]`. It looks something like this:
 
 ```js
-console.log(await image.encodedWith.jxl);
+console.log(image.encodedWith.jxl);
 // Returns:
 {
   optionsUsed: {
@@ -168,4 +168,4 @@ const encodeOptions: {
 [squoosh]: https://squoosh.app
 [codecs.ts]: https://github.com/GoogleChromeLabs/squoosh/blob/dev/libsquoosh/src/codecs.ts
 [butteraugli]: https://github.com/google/butteraugli
-[readfile]: https://nodejs.org/api/fs.html#fs_fspromises_readfile_path_options
+[arraybuffer]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer

libsquoosh/lib/move-d-ts.js

@@ -0,0 +1,26 @@
+const fs = require('fs');
+const del = require('del');
+const path = require('path');
+
+const tsOutputDir = path.resolve('..', '.tmp', 'ts', 'libsquoosh');
+const tsOutputSourceDir = path.join(tsOutputDir, 'src');
+const buildDir = path.resolve('build');
+
+(async () => {
+  await del(path.join(buildDir, '*.d.ts'));
+  const files = await fs.promises.readdir(tsOutputSourceDir);
+
+  const movePromises = [];
+  for (const file of files) {
+    if (file.endsWith('d.ts') || file.endsWith('d.ts.map')) {
+      movePromises.push(
+        fs.promises.rename(
+          path.join(tsOutputSourceDir, file),
+          path.join(buildDir, file),
+        ),
+      );
+    }
+  }
+  // We need to remove `tsconfig.tsbuildinfo` otherwise TS does not emit unchanged `.d.ts` files
+  await del([path.join(tsOutputDir, 'tsconfig.tsbuildinfo')], { force: true });
+})();

libsquoosh/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@squoosh/lib",
-  "version": "0.4.0",
+  "version": "0.5.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@squoosh/lib",
-      "version": "0.4.0",
+      "version": "0.5.2",
       "license": "Apache-2.0",
       "dependencies": {
         "wasm-feature-detect": "^1.2.11",
@@ -1096,6 +1096,64 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+      "dev": true
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.17",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz",
+      "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "3.1.0",
+        "@jridgewell/sourcemap-codec": "1.4.14"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz",
@@ -1185,6 +1243,18 @@
         "@types/node": "*"
       }
     },
+    "node_modules/acorn": {
+      "version": "8.8.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz",
+      "integrity": "sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@@ -1272,9 +1342,9 @@
       }
     },
     "node_modules/buffer-from": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
-      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
       "dev": true
     },
     "node_modules/builtin-modules": {
@@ -1935,9 +2005,9 @@
       }
     },
     "node_modules/source-map-support": {
-      "version": "0.5.19",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
-      "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
       "dev": true,
       "dependencies": {
         "buffer-from": "^1.0.0",
@@ -1972,14 +2042,15 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.7.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.7.0.tgz",
-      "integrity": "sha512-HP5/9hp2UaZt5fYkuhNBR8YyRcT8juw8+uFbAme53iN9hblvKnLUTKkmwJG6ocWpIKf8UK4DoeWG4ty0J6S6/g==",
+      "version": "5.16.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.1.tgz",
+      "integrity": "sha512-xvQfyfA1ayT0qdK47zskQgRZeWLoOQ8JQ6mIgRGVNwZKdQMU+5FkCBjmv4QjcrTzyZquRw2FVtlJSRUmMKQslw==",
       "dev": true,
       "dependencies": {
+        "@jridgewell/source-map": "^0.3.2",
+        "acorn": "^8.5.0",
         "commander": "^2.20.0",
-        "source-map": "~0.7.2",
-        "source-map-support": "~0.5.19"
+        "source-map-support": "~0.5.20"
       },
       "bin": {
         "terser": "bin/terser"
@@ -1988,15 +2059,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/terser/node_modules/source-map": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -3151,6 +3213,55 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@jridgewell/gen-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@jridgewell/resolve-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "dev": true
+    },
+    "@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "dev": true
+    },
+    "@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@jridgewell/sourcemap-codec": {
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+      "dev": true
+    },
+    "@jridgewell/trace-mapping": {
+      "version": "0.3.17",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz",
+      "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/resolve-uri": "3.1.0",
+        "@jridgewell/sourcemap-codec": "1.4.14"
+      }
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz",
@@ -3230,6 +3341,12 @@
         "@types/node": "*"
       }
     },
+    "acorn": {
+      "version": "8.8.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz",
+      "integrity": "sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==",
+      "dev": true
+    },
     "ansi-styles": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@@ -3308,9 +3425,9 @@
       }
     },
     "buffer-from": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
-      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
       "dev": true
     },
     "builtin-modules": {
@@ -3866,9 +3983,9 @@
       "dev": true
     },
     "source-map-support": {
-      "version": "0.5.19",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
-      "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
       "dev": true,
       "requires": {
         "buffer-from": "^1.0.0",
@@ -3899,22 +4016,15 @@
       }
     },
     "terser": {
-      "version": "5.7.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.7.0.tgz",
-      "integrity": "sha512-HP5/9hp2UaZt5fYkuhNBR8YyRcT8juw8+uFbAme53iN9hblvKnLUTKkmwJG6ocWpIKf8UK4DoeWG4ty0J6S6/g==",
+      "version": "5.16.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.1.tgz",
+      "integrity": "sha512-xvQfyfA1ayT0qdK47zskQgRZeWLoOQ8JQ6mIgRGVNwZKdQMU+5FkCBjmv4QjcrTzyZquRw2FVtlJSRUmMKQslw==",
       "dev": true,
       "requires": {
+        "@jridgewell/source-map": "^0.3.2",
+        "acorn": "^8.5.0",
         "commander": "^2.20.0",
-        "source-map": "~0.7.2",
-        "source-map-support": "~0.5.19"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.7.3",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-          "dev": true
-        }
+        "source-map-support": "~0.5.20"
       }
     },
     "to-fast-properties": {

libsquoosh/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@squoosh/lib",
-  "version": "0.4.0",
+  "version": "0.5.2",
   "description": "A Node library for Squoosh",
   "public": true,
   "main": "./build/index.js",
+  "types": "./build/index.d.ts",
   "files": [
     "/build/*"
   ],
   "scripts": {
-    "build": "rollup -c"
+    "build": "rollup -c && node lib/move-d-ts.js"
   },
   "keywords": [],
   "author": "Google Chrome Developers <chromium-dev@google.com>",

libsquoosh/src/codecs.ts

@@ -29,14 +29,23 @@ interface ResizeWithAspectParams {
   target_height: number;
 }
 
-interface ResizeInstantiateOptions {
+export interface ResizeOptions {
   width: number;
   height: number;
-  method: string;
+  method: 'triangle' | 'catrom' | 'mitchell' | 'lanczos3';
   premultiply: boolean;
   linearRGB: boolean;
 }
 
+export interface QuantOptions {
+  numColors: number;
+  dither: number;
+}
+
+export interface RotateOptions {
+  numRotations: number;
+}
+
 declare global {
   // Needed for being able to use ImageData as type in codec types
   type ImageData = import('./image_data.js').default;
@@ -52,6 +61,7 @@ import mozEnc from '../../codecs/mozjpeg/enc/mozjpeg_node_enc.js';
 import mozEncWasm from 'asset-url:../../codecs/mozjpeg/enc/mozjpeg_node_enc.wasm';
 import mozDec from '../../codecs/mozjpeg/dec/mozjpeg_node_dec.js';
 import mozDecWasm from 'asset-url:../../codecs/mozjpeg/dec/mozjpeg_node_dec.wasm';
+import type { EncodeOptions as MozJPEGEncodeOptions } from '../../codecs/mozjpeg/enc/mozjpeg_enc';
 
 // WebP
 import type { WebPModule as WebPEncodeModule } from '../../codecs/webp/enc/webp_enc';
@@ -59,6 +69,7 @@ import webpEnc from '../../codecs/webp/enc/webp_node_enc.js';
 import webpEncWasm from 'asset-url:../../codecs/webp/enc/webp_node_enc.wasm';
 import webpDec from '../../codecs/webp/dec/webp_node_dec.js';
 import webpDecWasm from 'asset-url:../../codecs/webp/dec/webp_node_dec.wasm';
+import type { EncodeOptions as WebPEncodeOptions } from '../../codecs/webp/enc/webp_enc.js';
 
 // AVIF
 import type { AVIFModule as AVIFEncodeModule } from '../../codecs/avif/enc/avif_enc';
@@ -69,6 +80,7 @@ import avifEncMtWorker from 'chunk-url:../../codecs/avif/enc/avif_node_enc_mt.wo
 import avifEncMtWasm from 'asset-url:../../codecs/avif/enc/avif_node_enc_mt.wasm';
 import avifDec from '../../codecs/avif/dec/avif_node_dec.js';
 import avifDecWasm from 'asset-url:../../codecs/avif/dec/avif_node_dec.wasm';
+import type { EncodeOptions as AvifEncodeOptions } from '../../codecs/avif/enc/avif_enc.js';
 
 // JXL
 import type { JXLModule as JXLEncodeModule } from '../../codecs/jxl/enc/jxl_enc';
@@ -76,6 +88,7 @@ import jxlEnc from '../../codecs/jxl/enc/jxl_node_enc.js';
 import jxlEncWasm from 'asset-url:../../codecs/jxl/enc/jxl_node_enc.wasm';
 import jxlDec from '../../codecs/jxl/dec/jxl_node_dec.js';
 import jxlDecWasm from 'asset-url:../../codecs/jxl/dec/jxl_node_dec.wasm';
+import type { EncodeOptions as JxlEncodeOptions } from '../../codecs/jxl/enc/jxl_enc.js';
 
 // WP2
 import type { WP2Module as WP2EncodeModule } from '../../codecs/wp2/enc/wp2_enc';
@@ -83,6 +96,7 @@ import wp2Enc from '../../codecs/wp2/enc/wp2_node_enc.js';
 import wp2EncWasm from 'asset-url:../../codecs/wp2/enc/wp2_node_enc.wasm';
 import wp2Dec from '../../codecs/wp2/dec/wp2_node_dec.js';
 import wp2DecWasm from 'asset-url:../../codecs/wp2/dec/wp2_node_dec.wasm';
+import type { EncodeOptions as WP2EncodeOptions } from '../../codecs/wp2/enc/wp2_enc.js';
 
 // PNG
 import * as pngEncDec from '../../codecs/png/pkg/squoosh_png.js';
@@ -95,6 +109,9 @@ const pngEncDecPromise = pngEncDec.default(
 import * as oxipng from '../../codecs/oxipng/pkg/squoosh_oxipng.js';
 import oxipngWasm from 'asset-url:../../codecs/oxipng/pkg/squoosh_oxipng_bg.wasm';
 const oxipngPromise = oxipng.default(fsp.readFile(pathify(oxipngWasm)));
+interface OxiPngEncodeOptions {
+  level: number;
+}
 
 // Resize
 import * as resize from '../../codecs/resize/pkg/squoosh_resize.js';
@@ -171,13 +188,7 @@ export const preprocessors = {
         buffer: Uint8Array,
         input_width: number,
         input_height: number,
-        {
-          width,
-          height,
-          method,
-          premultiply,
-          linearRGB,
-        }: ResizeInstantiateOptions,
+        { width, height, method, premultiply, linearRGB }: ResizeOptions,
       ) => {
         ({ width, height } = resizeWithAspect({
           input_width,
@@ -218,7 +229,7 @@ export const preprocessors = {
         buffer: Uint8Array,
         width: number,
         height: number,
-        { numColors, dither }: { numColors: number; dither: number },
+        { numColors, dither }: QuantOptions,
       ) =>
         new ImageData(
           imageQuant.quantize(buffer, width, height, numColors, dither),
@@ -239,7 +250,7 @@ export const preprocessors = {
         buffer: Uint8Array,
         width: number,
         height: number,
-        { numRotations }: { numRotations: number },
+        { numRotations }: RotateOptions,
       ) => {
         const degrees = (numRotations * 90) % 360;
         const sameDimensions = degrees == 0 || degrees == 180;
@@ -401,13 +412,14 @@ export const codecs = {
         jxlEncWasm,
       ),
     defaultEncoderOptions: {
-      speed: 4,
+      effort: 1,
       quality: 75,
       progressive: false,
       epf: -1,
-      nearLossless: 0,
       lossyPalette: false,
       decodingSpeedTier: 0,
+      photonNoiseIso: 0,
+      lossyModular: false,
     },
     autoOptimize: {
       option: 'quality',
@@ -480,3 +492,12 @@ export const codecs = {
     },
   },
 } as const;
+
+export {
+  MozJPEGEncodeOptions,
+  WebPEncodeOptions,
+  AvifEncodeOptions,
+  JxlEncodeOptions,
+  WP2EncodeOptions,
+  OxiPngEncodeOptions,
+};

libsquoosh/src/emscripten-utils.ts

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

libsquoosh/src/index.ts

@@ -1,8 +1,18 @@
 import { isMainThread } from 'worker_threads';
-import { cpus } from 'os';
-import { promises as fsp } from 'fs';
 
-import { codecs as encoders, preprocessors } from './codecs.js';
+import {
+  AvifEncodeOptions,
+  codecs as encoders,
+  JxlEncodeOptions,
+  MozJPEGEncodeOptions,
+  OxiPngEncodeOptions,
+  preprocessors,
+  QuantOptions,
+  ResizeOptions,
+  RotateOptions,
+  WebPEncodeOptions,
+  WP2EncodeOptions,
+} from './codecs.js';
 import WorkerPool from './worker_pool.js';
 import { autoOptimize } from './auto-optimizer.js';
 import type ImageData from './image_data';
@@ -10,30 +20,35 @@ import type ImageData from './image_data';
 export { ImagePool, encoders, preprocessors };
 type EncoderKey = keyof typeof encoders;
 type PreprocessorKey = keyof typeof preprocessors;
-type FileLike = Buffer | ArrayBuffer | string | ArrayBufferView;
+
+type PreprocessOptions = {
+  resize?: Partial<Omit<ResizeOptions, 'width' | 'height'>> &
+    (Pick<ResizeOptions, 'width'> | Pick<ResizeOptions, 'height'>);
+  quant?: Partial<QuantOptions>;
+  rotate?: Partial<RotateOptions>;
+};
+type EncodeResult = {
+  optionsUsed: object;
+  binary: Uint8Array;
+  extension: string;
+  size: number;
+};
+type EncoderOptions = {
+  mozjpeg?: Partial<MozJPEGEncodeOptions>;
+  webp?: Partial<WebPEncodeOptions>;
+  avif?: Partial<AvifEncodeOptions>;
+  jxl?: Partial<JxlEncodeOptions>;
+  wp2?: Partial<WP2EncodeOptions>;
+  oxipng?: Partial<OxiPngEncodeOptions>;
+};
 
 async function decodeFile({
   file,
 }: {
-  file: FileLike;
+  file: ArrayBuffer | ArrayLike<number>;
 }): Promise<{ bitmap: ImageData; size: number }> {
-  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 as unknown) instanceof Buffer) {
-    // TODO: Check why we need type assertions here.
-    buffer = (file as unknown) as Buffer;
-    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 array = new Uint8Array(file);
+  const firstChunk = array.slice(0, 16);
   const firstChunkString = Array.from(firstChunk)
     .map((v) => String.fromCodePoint(v))
     .join('');
@@ -41,14 +56,14 @@ async function decodeFile({
     detectors.some((detector) => detector.exec(firstChunkString)),
   )?.[0] as EncoderKey | undefined;
   if (!key) {
-    throw Error(`${file} has an unsupported format`);
+    throw Error(`File has an unsupported format`);
   }
   const encoder = encoders[key];
   const mod = await encoder.dec();
-  const rgba = mod.decode(new Uint8Array(buffer));
+  const rgba = mod.decode(array);
   return {
     bitmap: rgba,
-    size: buffer.length,
+    size: array.length,
   };
 }
 
@@ -83,7 +98,7 @@ async function encodeImage({
   encConfig: any;
   optimizerButteraugliTarget: number;
   maxOptimizerRounds: number;
-}) {
+}): Promise<EncodeResult> {
   let binary: Uint8Array;
   let optionsUsed = encConfig;
   const encoder = await encoders[encName].enc();
@@ -169,12 +184,15 @@ function handleJob(params: JobMessage) {
  * Represents an ingested image.
  */
 class Image {
-  public file: FileLike;
+  public file: ArrayBuffer | ArrayLike<number>;
   public workerPool: WorkerPool<JobMessage, any>;
   public decoded: Promise<{ bitmap: ImageData }>;
-  public encodedWith: { [key: string]: any };
+  public encodedWith: { [key in EncoderKey]?: EncodeResult };
 
-  constructor(workerPool: WorkerPool<JobMessage, any>, file: FileLike) {
+  constructor(
+    workerPool: WorkerPool<JobMessage, any>,
+    file: ArrayBuffer | ArrayLike<number>,
+  ) {
     this.file = file;
     this.workerPool = workerPool;
     this.decoded = workerPool.dispatchJob({ operation: 'decode', file });
@@ -183,10 +201,10 @@ class Image {
 
   /**
    * Define one or several preprocessors to use on the image.
-   * @param {object} preprocessOptions - An object with preprocessors to use, and their settings.
+   * @param {PreprocessOptions} preprocessOptions - An object with preprocessors to use, and their settings.
    * @returns {Promise<undefined>} - A promise that resolves when all preprocessors have completed their work.
    */
-  async preprocess(preprocessOptions = {}) {
+  async preprocess(preprocessOptions: PreprocessOptions = {}) {
     for (const [name, options] of Object.entries(preprocessOptions)) {
       if (!Object.keys(preprocessors).includes(name)) {
         throw Error(`Invalid preprocessor "${name}"`);
@@ -210,17 +228,16 @@ class Image {
   /**
    * Define one or several encoders to use on the image.
    * @param {object} encodeOptions - An object with encoders to use, and their settings.
-   * @returns {Promise<void>} - A promise that resolves when the image has been encoded with all the specified encoders.
+   * @returns {Promise<{ [key in keyof T]: EncodeResult }>} - A promise that resolves when the image has been encoded with all the specified encoders.
    */
-  async encode(
+  async encode<T extends EncoderOptions>(
     encodeOptions: {
       optimizerButteraugliTarget?: number;
       maxOptimizerRounds?: number;
-    } & {
-      [key in EncoderKey]?: any; // any is okay for now
-    } = {},
-  ): Promise<void> {
+    } & T,
+  ): Promise<{ [key in keyof T]: EncodeResult }> {
     const { bitmap } = await this.decoded;
+    const setEncodedWithPromises = [];
     for (const [name, options] of Object.entries(encodeOptions)) {
       if (!Object.keys(encoders).includes(name)) {
         continue;
@@ -231,18 +248,26 @@ class Image {
         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),
-      });
+      setEncodedWithPromises.push(
+        this.workerPool
+          .dispatchJob({
+            operation: 'encode',
+            bitmap,
+            encName,
+            encConfig,
+            optimizerButteraugliTarget: Number(
+              encodeOptions.optimizerButteraugliTarget ?? 1.4,
+            ),
+            maxOptimizerRounds: Number(encodeOptions.maxOptimizerRounds ?? 6),
+          })
+          .then((encodeResult) => {
+            this.encodedWith[encName] = encodeResult;
+          }),
+      );
     }
-    await Promise.all(Object.values(this.encodedWith));
+
+    await Promise.all(setEncodedWithPromises);
+    return this.encodedWith as { [key in keyof T]: EncodeResult };
   }
 }
 
@@ -254,19 +279,19 @@ 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.
+   * @param {number} [threads] - Number of concurrent image processes to run in the pool.
    */
   constructor(threads: number) {
-    this.workerPool = new WorkerPool(threads || cpus().length, __filename);
+    this.workerPool = new WorkerPool(threads, __filename);
   }
 
   /**
    * Ingest an image into the image pool.
-   * @param {FileLike} image - The image or path to the image that should be ingested and decoded.
+   * @param {ArrayBuffer | ArrayLike<number>} file - The image that should be ingested and decoded.
    * @returns {Image} - A custom class reference to the decoded image.
    */
-  ingestImage(image: FileLike): Image {
-    return new Image(this.workerPool, image);
+  ingestImage(file: ArrayBuffer | ArrayLike<number>): Image {
+    return new Image(this.workerPool, file);
   }
 
   /**

libsquoosh/tsconfig.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "lib": ["esnext"],
     "types": ["node"],
-    "allowJs": true
+    "allowJs": true,
+    "declaration": true
   },
   "include": ["src/**/*", "../codecs/**/*"]
 }

missing-types.d.ts

@@ -44,6 +44,11 @@ declare module 'data-url:*' {
   export default url;
 }
 
+declare module 'data-url-text:*' {
+  const url: string;
+  export default url;
+}
+
 declare module 'service-worker:*' {
   const url: string;
   export default url;

package-lock.json

@@ -16,15 +16,15 @@
         "@rollup/plugin-replace": "^2.3.4",
         "@surma/rollup-plugin-off-main-thread": "^2.2.2",
         "@types/dedent": "^0.7.0",
-        "@types/mime-types": "^2.1.0",
-        "@types/node": "^14.14.7",
+        "@types/mime-types": "^2.1.1",
+        "@types/node": "^16.11.1",
         "@web/rollup-plugin-import-meta-assets": "^1.0.6",
         "comlink": "^4.3.0",
         "cssnano": "^4.1.10",
         "dedent": "^0.7.0",
         "del": "^5.1.0",
         "file-drop-element": "^1.0.1",
-        "husky": "^4.3.0",
+        "husky": "^7.0.2",
         "idb-keyval": "^3.2.0",
         "image-size": "^0.9.3",
         "linkstate": "^2.0.0",
@@ -32,7 +32,7 @@
         "lodash.camelcase": "^4.3.0",
         "mime-types": "^2.1.28",
         "npm-run-all": "^4.1.5",
-        "pointer-tracker": "^2.4.0",
+        "pointer-tracker": "^2.5.3",
         "postcss": "^7.0.35",
         "postcss-modules": "^3.2.2",
         "postcss-nested": "^4.2.3",
@@ -40,14 +40,28 @@
         "postcss-url": "^8.0.0",
         "preact": "^10.5.5",
         "preact-render-to-string": "^5.1.11",
-        "prettier": "^2.1.2",
+        "prettier": "^2.4.1",
         "rollup": "^2.38.0",
         "rollup-plugin-terser": "^7.0.2",
         "serve": "^11.3.2",
-        "typescript": "^4.1.3",
+        "typescript": "^4.4.4",
         "which": "^2.0.2"
       }
     },
+    "../pointer-tracker": {
+      "version": "2.5.0",
+      "extraneous": true,
+      "license": "Apache-2.0",
+      "devDependencies": {
+        "husky": "^4.2.5",
+        "lint-staged": "^10.2.11",
+        "prettier": "^2.0.5",
+        "rollup": "^2.23.1",
+        "rollup-plugin-terser": "^7.0.0",
+        "rollup-plugin-typescript2": "^0.27.2",
+        "typescript": "^3.9.7"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
@@ -301,9 +315,9 @@
       }
     },
     "node_modules/@types/mime-types": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.0.tgz",
-      "integrity": "sha1-nKUs2jY/aZxpRmwqbM2q2RPqenM=",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.1.tgz",
+      "integrity": "sha512-vXOTGVSLR2jMw440moWTC7H19iUyLtP3Z1YTj7cSsubOICinjMxFeb/V57v9QdyyPGbbWolUFSSmSiRSn94tFw==",
       "dev": true
     },
     "node_modules/@types/minimatch": {
@@ -313,9 +327,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "14.14.7",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.7.tgz",
-      "integrity": "sha512-Zw1vhUSQZYw+7u5dAwNbIA9TuTotpzY/OF7sJM9FqPOF3SPjKnxrjoTktXDZgUjybf4cWVBP7O8wvKdSaGHweg==",
+      "version": "16.11.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.1.tgz",
+      "integrity": "sha512-PYGcJHL9mwl1Ek3PLiYgyEKtwTMmkMw4vbiyz/ps3pfdRYLVv+SN7qHVAImrjdAXxgluDEw6Ph4lyv+m9UpRmA==",
       "dev": true
     },
     "node_modules/@types/parse-json": {
@@ -852,12 +866,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/ci-info": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
-      "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
-      "dev": true
-    },
     "node_modules/clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -1162,12 +1170,6 @@
       "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
       "dev": true
     },
-    "node_modules/compare-versions": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-3.6.0.tgz",
-      "integrity": "sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==",
-      "dev": true
-    },
     "node_modules/compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@@ -2270,31 +2272,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "dev": true,
-      "dependencies": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/find-versions": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/find-versions/-/find-versions-3.2.0.tgz",
-      "integrity": "sha512-P8WRou2S+oe222TOCHitLy8zj+SIsVJh52VP4lvXkaFVnOFFdoWv1H1Jjvel1aI6NCFOAaeAVm8qrI0odiLcww==",
-      "dev": true,
-      "dependencies": {
-        "semver-regex": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2471,28 +2448,18 @@
       }
     },
     "node_modules/husky": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-4.3.0.tgz",
-      "integrity": "sha512-tTMeLCLqSBqnflBZnlVDhpaIMucSGaYyX6855jM4AguGeWCeSzNdb1mfyWduTZ3pe3SJVvVWGL0jO1iKZVPfTA==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-7.0.2.tgz",
+      "integrity": "sha512-8yKEWNX4z2YsofXAMT7KvA1g8p+GxtB1ffV8XtpAEGuXNAbCV5wdNKH+qTpw8SM9fh4aMPDR+yQuKfgnreyZlg==",
       "dev": true,
-      "dependencies": {
-        "chalk": "^4.0.0",
-        "ci-info": "^2.0.0",
-        "compare-versions": "^3.6.0",
-        "cosmiconfig": "^7.0.0",
-        "find-versions": "^3.2.0",
-        "opencollective-postinstall": "^2.0.2",
-        "pkg-dir": "^4.2.0",
-        "please-upgrade-node": "^3.2.0",
-        "slash": "^3.0.0",
-        "which-pm-runs": "^1.0.0"
-      },
       "bin": {
-        "husky-run": "bin/run.js",
-        "husky-upgrade": "lib/upgrader/bin.js"
+        "husky": "lib/bin.js"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
       }
     },
     "node_modules/icss-replace-symbols": {
@@ -3150,18 +3117,6 @@
         "node": ">=4.0.0"
       }
     },
-    "node_modules/locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "dev": true,
-      "dependencies": {
-        "p-locate": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -3675,15 +3630,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/opencollective-postinstall": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
-      "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==",
-      "dev": true,
-      "bin": {
-        "opencollective-postinstall": "index.js"
-      }
-    },
     "node_modules/p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
@@ -3693,30 +3639,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "dev": true,
-      "dependencies": {
-        "p-try": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "dev": true,
-      "dependencies": {
-        "p-limit": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/p-map": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz",
@@ -3729,15 +3651,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/p-try": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -3765,15 +3678,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/path-exists": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -3849,18 +3753,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/pkg-dir": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-      "dev": true,
-      "dependencies": {
-        "find-up": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/please-upgrade-node": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
@@ -3871,9 +3763,9 @@
       }
     },
     "node_modules/pointer-tracker": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/pointer-tracker/-/pointer-tracker-2.4.0.tgz",
-      "integrity": "sha512-pWI2tpaM/XNtc9mUTv42Rmjf6mkHvE8LT5DDEq0G7baPNhxNM9E3CepubPplSoSLk9E5bwQrAMyDcPVmJyTW4g==",
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/pointer-tracker/-/pointer-tracker-2.5.3.tgz",
+      "integrity": "sha512-LiJUeIbzk4dXq678YeyrZ++mdY17q4n/2sBHfU9wIuvmSzdiPgMvmvWN2g8mY4J7YwYOIrqrZUWP/MfFHVwYtg==",
       "dev": true
     },
     "node_modules/postcss": {
@@ -7515,9 +7407,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.1.2.tgz",
-      "integrity": "sha512-16c7K+x4qVlJg9rEbXl7HEGmQyZlG4R9AgP+oHKRMsMsuk8s+ATStlf1NpDqyBI1HpVyfjLOeMhH2LvuNvV5Vg==",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.4.1.tgz",
+      "integrity": "sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==",
       "dev": true,
       "bin": {
         "prettier": "bin-prettier.js"
@@ -7794,15 +7686,6 @@
       "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=",
       "dev": true
     },
-    "node_modules/semver-regex": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-2.0.0.tgz",
-      "integrity": "sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/serialize-javascript": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
@@ -8588,9 +8471,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.3.tgz",
-      "integrity": "sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg==",
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.4.tgz",
+      "integrity": "sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -8694,12 +8577,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/which-pm-runs": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.0.0.tgz",
-      "integrity": "sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=",
-      "dev": true
-    },
     "node_modules/widest-line": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz",
@@ -9026,9 +8903,9 @@
       }
     },
     "@types/mime-types": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.0.tgz",
-      "integrity": "sha1-nKUs2jY/aZxpRmwqbM2q2RPqenM=",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.1.tgz",
+      "integrity": "sha512-vXOTGVSLR2jMw440moWTC7H19iUyLtP3Z1YTj7cSsubOICinjMxFeb/V57v9QdyyPGbbWolUFSSmSiRSn94tFw==",
       "dev": true
     },
     "@types/minimatch": {
@@ -9038,9 +8915,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "14.14.7",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.7.tgz",
-      "integrity": "sha512-Zw1vhUSQZYw+7u5dAwNbIA9TuTotpzY/OF7sJM9FqPOF3SPjKnxrjoTktXDZgUjybf4cWVBP7O8wvKdSaGHweg==",
+      "version": "16.11.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.1.tgz",
+      "integrity": "sha512-PYGcJHL9mwl1Ek3PLiYgyEKtwTMmkMw4vbiyz/ps3pfdRYLVv+SN7qHVAImrjdAXxgluDEw6Ph4lyv+m9UpRmA==",
       "dev": true
     },
     "@types/parse-json": {
@@ -9480,12 +9357,6 @@
         "supports-color": "^7.1.0"
       }
     },
-    "ci-info": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
-      "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
-      "dev": true
-    },
     "clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -9739,12 +9610,6 @@
       "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
       "dev": true
     },
-    "compare-versions": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-3.6.0.tgz",
-      "integrity": "sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==",
-      "dev": true
-    },
     "compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@@ -10662,25 +10527,6 @@
         "to-regex-range": "^5.0.1"
       }
     },
-    "find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "dev": true,
-      "requires": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
-      }
-    },
-    "find-versions": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/find-versions/-/find-versions-3.2.0.tgz",
-      "integrity": "sha512-P8WRou2S+oe222TOCHitLy8zj+SIsVJh52VP4lvXkaFVnOFFdoWv1H1Jjvel1aI6NCFOAaeAVm8qrI0odiLcww==",
-      "dev": true,
-      "requires": {
-        "semver-regex": "^2.0.0"
-      }
-    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -10827,22 +10673,10 @@
       "dev": true
     },
     "husky": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-4.3.0.tgz",
-      "integrity": "sha512-tTMeLCLqSBqnflBZnlVDhpaIMucSGaYyX6855jM4AguGeWCeSzNdb1mfyWduTZ3pe3SJVvVWGL0jO1iKZVPfTA==",
-      "dev": true,
-      "requires": {
-        "chalk": "^4.0.0",
-        "ci-info": "^2.0.0",
-        "compare-versions": "^3.6.0",
-        "cosmiconfig": "^7.0.0",
-        "find-versions": "^3.2.0",
-        "opencollective-postinstall": "^2.0.2",
-        "pkg-dir": "^4.2.0",
-        "please-upgrade-node": "^3.2.0",
-        "slash": "^3.0.0",
-        "which-pm-runs": "^1.0.0"
-      }
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-7.0.2.tgz",
+      "integrity": "sha512-8yKEWNX4z2YsofXAMT7KvA1g8p+GxtB1ffV8XtpAEGuXNAbCV5wdNKH+qTpw8SM9fh4aMPDR+yQuKfgnreyZlg==",
+      "dev": true
     },
     "icss-replace-symbols": {
       "version": "1.1.0",
@@ -11380,15 +11214,6 @@
         "json5": "^1.0.1"
       }
     },
-    "locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "dev": true,
-      "requires": {
-        "p-locate": "^4.1.0"
-      }
-    },
     "lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -11801,36 +11626,12 @@
         "mimic-fn": "^2.1.0"
       }
     },
-    "opencollective-postinstall": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
-      "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==",
-      "dev": true
-    },
     "p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
       "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
       "dev": true
     },
-    "p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "dev": true,
-      "requires": {
-        "p-try": "^2.0.0"
-      }
-    },
-    "p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "dev": true,
-      "requires": {
-        "p-limit": "^2.2.0"
-      }
-    },
     "p-map": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz",
@@ -11840,12 +11641,6 @@
         "aggregate-error": "^3.0.0"
       }
     },
-    "p-try": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-      "dev": true
-    },
     "parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -11867,12 +11662,6 @@
         "lines-and-columns": "^1.1.6"
       }
     },
-    "path-exists": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true
-    },
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -11927,15 +11716,6 @@
       "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
       "dev": true
     },
-    "pkg-dir": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-      "dev": true,
-      "requires": {
-        "find-up": "^4.0.0"
-      }
-    },
     "please-upgrade-node": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
@@ -11946,9 +11726,9 @@
       }
     },
     "pointer-tracker": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/pointer-tracker/-/pointer-tracker-2.4.0.tgz",
-      "integrity": "sha512-pWI2tpaM/XNtc9mUTv42Rmjf6mkHvE8LT5DDEq0G7baPNhxNM9E3CepubPplSoSLk9E5bwQrAMyDcPVmJyTW4g==",
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/pointer-tracker/-/pointer-tracker-2.5.3.tgz",
+      "integrity": "sha512-LiJUeIbzk4dXq678YeyrZ++mdY17q4n/2sBHfU9wIuvmSzdiPgMvmvWN2g8mY4J7YwYOIrqrZUWP/MfFHVwYtg==",
       "dev": true
     },
     "postcss": {
@@ -15015,9 +14795,9 @@
       }
     },
     "prettier": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.1.2.tgz",
-      "integrity": "sha512-16c7K+x4qVlJg9rEbXl7HEGmQyZlG4R9AgP+oHKRMsMsuk8s+ATStlf1NpDqyBI1HpVyfjLOeMhH2LvuNvV5Vg==",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.4.1.tgz",
+      "integrity": "sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==",
       "dev": true
     },
     "pretty-format": {
@@ -15243,12 +15023,6 @@
       "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=",
       "dev": true
     },
-    "semver-regex": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-2.0.0.tgz",
-      "integrity": "sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw==",
-      "dev": true
-    },
     "serialize-javascript": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
@@ -15903,9 +15677,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.3.tgz",
-      "integrity": "sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg==",
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.4.tgz",
+      "integrity": "sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==",
       "dev": true
     },
     "uniq": {
@@ -15993,12 +15767,6 @@
         "isexe": "^2.0.0"
       }
     },
-    "which-pm-runs": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.0.0.tgz",
-      "integrity": "sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=",
-      "dev": true
-    },
     "widest-line": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz",

package.json

@@ -8,7 +8,8 @@
     "debug": "node --inspect-brk node_modules/.bin/rollup -c",
     "dev": "DEV_PORT=\"${DEV_PORT:=5000}\" run-p watch serve",
     "watch": "rollup -cw",
-    "serve": "serve --listen=$DEV_PORT --config ../../../serve.json .tmp/build/static"
+    "serve": "serve --listen=$DEV_PORT --config ../../../serve.json .tmp/build/static",
+    "prepare": "husky install"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^17.0.0",
@@ -16,15 +17,15 @@
     "@rollup/plugin-replace": "^2.3.4",
     "@surma/rollup-plugin-off-main-thread": "^2.2.2",
     "@types/dedent": "^0.7.0",
-    "@types/mime-types": "^2.1.0",
-    "@types/node": "^14.14.7",
+    "@types/mime-types": "^2.1.1",
+    "@types/node": "^16.11.1",
     "@web/rollup-plugin-import-meta-assets": "^1.0.6",
     "comlink": "^4.3.0",
     "cssnano": "^4.1.10",
     "dedent": "^0.7.0",
     "del": "^5.1.0",
     "file-drop-element": "^1.0.1",
-    "husky": "^4.3.0",
+    "husky": "^7.0.2",
     "idb-keyval": "^3.2.0",
     "image-size": "^0.9.3",
     "linkstate": "^2.0.0",
@@ -32,7 +33,7 @@
     "lodash.camelcase": "^4.3.0",
     "mime-types": "^2.1.28",
     "npm-run-all": "^4.1.5",
-    "pointer-tracker": "^2.4.0",
+    "pointer-tracker": "^2.5.3",
     "postcss": "^7.0.35",
     "postcss-modules": "^3.2.2",
     "postcss-nested": "^4.2.3",
@@ -40,18 +41,13 @@
     "postcss-url": "^8.0.0",
     "preact": "^10.5.5",
     "preact-render-to-string": "^5.1.11",
-    "prettier": "^2.1.2",
+    "prettier": "^2.4.1",
     "rollup": "^2.38.0",
     "rollup-plugin-terser": "^7.0.2",
     "serve": "^11.3.2",
-    "typescript": "^4.1.3",
+    "typescript": "^4.4.4",
     "which": "^2.0.2"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "lint-staged": {
     "*.{js,css,json,md,ts,tsx}": "prettier --write",
     "*.{c,h,cpp,hpp}": "clang-format -i",

src/client/initial-app/index.tsx

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

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

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

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

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

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

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

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

@@ -40,24 +40,23 @@ type PartialButNotUndefined<T> = {
   [P in keyof T]: T[P];
 };
 
-const supportedEncoderMapP: Promise<PartialButNotUndefined<
-  typeof encoderMap
->> = (async () => {
-  const supportedEncoderMap: PartialButNotUndefined<typeof encoderMap> = {
-    ...encoderMap,
-  };
+const supportedEncoderMapP: Promise<PartialButNotUndefined<typeof encoderMap>> =
+  (async () => {
+    const supportedEncoderMap: PartialButNotUndefined<typeof encoderMap> = {
+      ...encoderMap,
+    };
 
-  // Filter out entries where the feature test fails
-  await Promise.all(
-    Object.entries(encoderMap).map(async ([encoderName, details]) => {
-      if ('featureTest' in details && !(await details.featureTest())) {
-        delete supportedEncoderMap[encoderName as keyof typeof encoderMap];
-      }
-    }),
-  );
+    // Filter out entries where the feature test fails
+    await Promise.all(
+      Object.entries(encoderMap).map(async ([encoderName, details]) => {
+        if ('featureTest' in details && !(await details.featureTest())) {
+          delete supportedEncoderMap[encoderName as keyof typeof encoderMap];
+        }
+      }),
+    );
 
-  return supportedEncoderMap;
-})();
+    return supportedEncoderMap;
+  })();
 
 export default class Options extends Component<Props, State> {
   state: State = {

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

@@ -1,5 +1,6 @@
 import PointerTracker, { Pointer } from 'pointer-tracker';
 import 'add-css:./styles.css';
+import { isSafari } from 'client/lazy-app/util';
 
 interface Point {
   clientX: number;
@@ -105,14 +106,23 @@ export default class PinchZoom extends HTMLElement {
     const pointerTracker: PointerTracker = new PointerTracker(this, {
       start: (pointer, event) => {
         // We only want to track 2 pointers at most
-        if (pointerTracker.currentPointers.length === 2 || !this._positioningEl)
+        if (
+          pointerTracker.currentPointers.length === 2 ||
+          !this._positioningEl
+        ) {
           return false;
+        }
         event.preventDefault();
         return true;
       },
       move: (previousPointers) => {
         this._onPointerMove(previousPointers, pointerTracker.currentPointers);
       },
+      // Unfortunately Safari on iOS has a bug where pointer event capturing
+      // doesn't work in some cases, and we hit those cases due to our event
+      // retargeting in pinch-zoom.
+      // https://bugs.webkit.org/show_bug.cgi?id=220196
+      avoidPointerEvents: isSafari,
     });
 
     this.addEventListener('wheel', (event) => this._onWheel(event));

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

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

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

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

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

@@ -114,9 +114,9 @@ async function decodeImage(
       }
     }
     // Otherwise fall through and try built-in decoding for a laugh.
-    return await builtinDecode(signal, blob, mimeType);
+    return await builtinDecode(signal, blob);
   } catch (err) {
-    if (err.name === 'AbortError') throw err;
+    if (err instanceof Error && err.name === 'AbortError') throw err;
     console.log(err);
     throw Error("Couldn't decode image");
   }
@@ -481,7 +481,7 @@ export default class Compress extends Component<Props, State> {
         open('https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli');
       }
     } catch (e) {
-      this.props.showSnack(e);
+      this.props.showSnack(String(e));
     }
   };
 
@@ -640,7 +640,7 @@ export default class Compress extends Component<Props, State> {
           return { sides };
         });
       } catch (err) {
-        if (err.name === 'AbortError') return;
+        if (err instanceof Error && err.name === 'AbortError') return;
         this.props.showSnack(`Source decoding error: ${err}`);
         throw err;
       }
@@ -698,7 +698,7 @@ export default class Compress extends Component<Props, State> {
           return newState;
         });
       } catch (err) {
-        if (err.name === 'AbortError') return;
+        if (err instanceof Error && err.name === 'AbortError') return;
         this.setState({ loading: false });
         this.props.showSnack(`Preprocessing error: ${err}`);
         throw err;
@@ -822,7 +822,7 @@ export default class Compress extends Component<Props, State> {
 
         this.activeSideJobs[sideIndex] = undefined;
       } catch (err) {
-        if (err.name === 'AbortError') return;
+        if (err instanceof Error && err.name === 'AbortError') return;
         this.setState((currentState) => {
           const sides = cleanMerge(currentState.sides, sideIndex, {
             loading: false,

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

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

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

@@ -63,35 +63,17 @@ 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 | VideoFrame,
+  drawable: ImageBitmap | HTMLImageElement,
   opts: DrawableToImageDataOptions = {},
 ): ImageData {
   const {
-    width = getWidth(drawable),
-    height = getHeight(drawable),
+    width = drawable.width,
+    height = drawable.height,
     sx = 0,
     sy = 0,
-    sw = getWidth(drawable),
-    sh = getHeight(drawable),
+    sw = drawable.width,
+    sh = drawable.height,
   } = opts;
 
   // Make canvas same size as image

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

@@ -10,10 +10,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import * as WebCodecs from '../util/web-codecs';
 import { drawableToImageData } from './canvas';
 
+/** If render engine is Safari */
+export const isSafari =
+  /Safari\//.test(navigator.userAgent) &&
+  !/Chrom(e|ium)\//.test(navigator.userAgent);
+
 /**
  * Compare two objects, returning a boolean indicating if
  * they have the same properties and strictly equal values.
@@ -134,15 +137,7 @@ export async function blobToImg(blob: Blob): Promise<HTMLImageElement> {
 export async function builtinDecode(
   signal: AbortSignal,
   blob: Blob,
-  mimeType: string,
 ): Promise<ImageData> {
-  // If WebCodecs are supported, use that.
-  if (await WebCodecs.isTypeSupported(mimeType)) {
-    assertSignal(signal);
-    try {
-      return await abortable(signal, WebCodecs.decode(blob, mimeType));
-    } catch (e) {}
-  }
   assertSignal(signal);
 
   // Prefer createImageBitmap as it's the off-thread option for Firefox.

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

@@ -1,33 +0,0 @@
-import { drawableToImageData } from '../canvas';
-
-const hasImageDecoder = typeof ImageDecoder !== 'undefined';
-
-export async function isTypeSupported(mimeType: string): Promise<boolean> {
-  if (!hasImageDecoder) return false;
-  // Some old versions of this API threw here.
-  // It only impacted folks with experimental web platform flags enabled in Chrome 90.
-  // The API was updated in Chrome 91.
-  try {
-    return await ImageDecoder.isTypeSupported(mimeType);
-  } catch (err) {
-    return false;
-  }
-}
-
-export async function decode(
-  blob: Blob | File,
-  mimeType: string,
-): Promise<ImageData> {
-  if (!hasImageDecoder) {
-    throw Error(
-      `This browser does not support ImageDecoder. This function should not have been called.`,
-    );
-  }
-  const decoder = new ImageDecoder({
-    type: mimeType,
-    // Non-obvious way to turn an Blob into a ReadableStream
-    data: new Response(blob).body!,
-  });
-  const { image } = await decoder.decode();
-  return drawableToImageData(image);
-}

src/client/lazy-app/util/web-codecs/missing-types.d.ts

@@ -1,60 +0,0 @@
-interface ImageDecoderInit {
-  type: string;
-  data: BufferSource | ReadableStream;
-  premultiplyAlpha?: PremultiplyAlpha;
-  colorSpaceConversion?: ColorSpaceConversion;
-  desiredWidth?: number;
-  desiredHeight?: number;
-  preferAnimation?: boolean;
-}
-
-interface ImageDecodeOptions {
-  frameIndex: number;
-  completeFramesOnly: boolean;
-}
-
-interface ImageDecodeResult {
-  image: VideoFrame;
-  complete: boolean;
-}
-
-// I didn’t do all the types because the class is kinda complex.
-// I focused on what we need.
-// See https://w3c.github.io/webcodecs/#videoframe
-declare class VideoFrame {
-  displayWidth: number;
-  displayHeight: number;
-}
-
-// Add VideoFrame to canvas’ drawImage()
-interface CanvasDrawImage {
-  drawImage(
-    image: CanvasImageSource | VideoFrame,
-    dx: number,
-    dy: number,
-  ): void;
-  drawImage(
-    image: CanvasImageSource | VideoFrame,
-    dx: number,
-    dy: number,
-    dw: number,
-    dh: number,
-  ): void;
-  drawImage(
-    image: CanvasImageSource | VideoFrame,
-    sx: number,
-    sy: number,
-    sw: number,
-    sh: number,
-    dx: number,
-    dy: number,
-    dw: number,
-    dh: number,
-  ): void;
-}
-
-declare class ImageDecoder {
-  static isTypeSupported(type: string): Promise<boolean>;
-  constructor(desc: ImageDecoderInit);
-  decode(opts?: Partial<ImageDecodeOptions>): Promise<ImageDecodeResult>;
-}

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

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

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

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

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

@@ -14,9 +14,11 @@ import { EncodeOptions } from '../shared/meta';
 import { threads } from 'wasm-feature-detect';
 
 async function initMT() {
-  const { default: init, initThreadPool, optimise } = await import(
-    'codecs/oxipng/pkg-parallel/squoosh_oxipng'
-  );
+  const {
+    default: init,
+    initThreadPool,
+    optimise,
+  } = await import('codecs/oxipng/pkg-parallel/squoosh_oxipng');
   await init();
   await initThreadPool(navigator.hardwareConcurrency);
   return optimise;

src/shared/custom-els/loading-spinner/index.ts

@@ -2,9 +2,9 @@ import * as styles from './styles.css';
 import 'add-css:./styles.css';
 
 // So it doesn't cause an error when running in node
-const HTMLEl = ((__PRERENDER__
+const HTMLEl = (__PRERENDER__
   ? Object
-  : HTMLElement) as unknown) as typeof HTMLElement;
+  : HTMLElement) as unknown as typeof HTMLElement;
 
 /**
  * A simple spinner. This custom element has no JS API. Just put it in the document, and it'll

src/shared/custom-els/snack-bar/index.ts

@@ -2,9 +2,9 @@ import * as style from './styles.css';
 import 'add-css:./styles.css';
 
 // So it doesn't cause an error when running in node
-const HTMLEl = ((__PRERENDER__
+const HTMLEl = (__PRERENDER__
   ? Object
-  : HTMLElement) as unknown) as typeof HTMLElement;
+  : HTMLElement) as unknown as typeof HTMLElement;
 
 export interface SnackOptions {
   timeout?: number;

src/shared/missing-types.d.ts

@@ -13,24 +13,3 @@
 /// <reference path="../../missing-types.d.ts" />
 
 declare const __PRERENDER__: boolean;
-
-type ResizeObserverCallback = (
-  entries: ResizeObserverEntry[],
-  observer: ResizeObserver,
-) => void;
-
-interface ResizeObserverEntry {
-  readonly target: Element;
-  readonly contentRect: DOMRectReadOnly;
-}
-
-interface ResizeObserver {
-  observe(target: Element): void;
-  unobserve(target: Element): void;
-  disconnect(): void;
-}
-
-declare var ResizeObserver: {
-  prototype: ResizeObserver;
-  new (callback: ResizeObserverCallback): ResizeObserver;
-};

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

@@ -14,7 +14,7 @@ import smallSectionAsset from 'url:./imgs/info-content/small.svg';
 import simpleSectionAsset from 'url:./imgs/info-content/simple.svg';
 import secureSectionAsset from 'url:./imgs/info-content/secure.svg';
 import logoIcon from 'url:./imgs/demos/icon-demo-logo.png';
-import logoWithText from 'url:./imgs/logo-with-text.svg';
+import logoWithText from 'data-url-text:./imgs/logo-with-text.svg';
 import * as style from './style.css';
 import type SnackBarElement from 'shared/custom-els/snack-bar';
 import 'shared/custom-els/snack-bar';

src/shared/prerendered-app/Intro/missing-types.d.ts

@@ -30,11 +30,6 @@ interface WindowEventMap {
   beforeinstallprompt: BeforeInstallPromptEvent;
 }
 
-interface ClipboardItem {
-  types: string[];
-  getType(type: string): Promise<Blob>;
-}
-
 interface Clipboard {
   read(): Promise<ClipboardItem[]>;
 }

src/static-build/index.tsx

@@ -19,27 +19,39 @@ import * as iconLarge from 'img-url:static-build/assets/icon-large.png';
 import * as screenshot1 from 'img-url:static-build/assets/screenshot1.png';
 import * as screenshot2 from 'img-url:static-build/assets/screenshot2.jpg';
 import * as screenshot3 from 'img-url:static-build/assets/screenshot3.jpg';
+import * as screenshot4 from 'img-url:static-build/assets/screenshot4.png';
+import * as screenshot5 from 'img-url:static-build/assets/screenshot5.jpg';
+import * as screenshot6 from 'img-url:static-build/assets/screenshot6.jpg';
 import dedent from 'dedent';
 import { lookup as lookupMime } from 'mime-types';
 
-const manifestSize = ({ width, height }: { width: number; height: number }) =>
-  `${width}x${height}`;
+interface Dimensions {
+  width: number;
+  height: number;
+}
 
-// Set by Netlify
-const branch = process.env.BRANCH;
+const manifestSize = ({ width, height }: Dimensions) => `${width}x${height}`;
+const formFactor = ({ width, height }: Dimensions) =>
+  width > height ? 'wide' : 'narrow';
 
-const branchOriginTrialIds = new Map([
-  [
-    'live',
-    'Aj5GY7W9AHM8di+yvMCajIhLRHoYN7slruwOYXE/Iub5hgmW/r2RQt07vrUuT4eUTkWxcyNCAVkiI+5ugdVW3gAAAABUeyJvcmlnaW4iOiJodHRwczovL3NxdW9vc2guYXBwOjQ0MyIsImZlYXR1cmUiOiJXZWJBc3NlbWJseVNpbWQiLCJleHBpcnkiOjE2MjM4MDE1OTl9',
-  ],
-]);
-
-const originTrialId = branchOriginTrialIds.get(branch || '');
+const screenshots = [
+  screenshot1,
+  screenshot2,
+  screenshot3,
+  screenshot4,
+  screenshot5,
+  screenshot6,
+].map((screenshot) => ({
+  src: screenshot.default,
+  type: lookupMime(screenshot.default),
+  sizes: manifestSize(screenshot),
+  form_factor: formFactor(screenshot),
+}));
 
 interface Output {
   [outputPath: string]: string;
 }
+
 const toOutput: Output = {
   'index.html': renderPage(<IndexPage />),
   'manifest.json': JSON.stringify({
@@ -67,23 +79,7 @@ const toOutput: Output = {
       'Compress and compare images with different codecs, right in your browser.',
     lang: 'en',
     categories: ['photo', 'productivity', 'utilities'],
-    screenshots: [
-      {
-        src: screenshot1.default,
-        type: lookupMime(screenshot1.default),
-        sizes: manifestSize(screenshot1),
-      },
-      {
-        src: screenshot2.default,
-        type: lookupMime(screenshot2.default),
-        sizes: manifestSize(screenshot2),
-      },
-      {
-        src: screenshot3.default,
-        type: lookupMime(screenshot3.default),
-        sizes: manifestSize(screenshot3),
-      },
-    ],
+    screenshots,
     share_target: {
       action: '/?utm_medium=PWA&utm_source=share-target&share-target',
       method: 'POST',
@@ -110,15 +106,6 @@ const toOutput: Output = {
     /*
       Cross-Origin-Embedder-Policy: require-corp
       Cross-Origin-Opener-Policy: same-origin
-
-    # Origin trial for WebAssembly SIMD.
-    ${
-      originTrialId
-        ? `  Origin-Trial: ${originTrialId}`
-        : `# Cannot find origin trial ID. process.env.BRANCH is: ${JSON.stringify(
-            branch,
-          )}`
-    }
   `,
 };
 

src/static-build/pages/index/index.tsx

@@ -57,6 +57,7 @@ const Index: FunctionalComponent<Props> = () => (
       <meta name="mobile-web-app-capable" content="yes" />
       <meta name="apple-mobile-web-app-capable" content="yes" />
       <link rel="shortcut icon" href={favicon} />
+      <link rel="apple-touch-icon" href={ogImage} />
       <meta name="theme-color" content="#ff3385" />
       <link rel="manifest" href="/manifest.json" />
       <link rel="canonical" href={siteOrigin} />

src/sw/to-cache.ts

@@ -82,24 +82,20 @@ initialJs = subtractSets(
 export const initial = ['/', ...initialJs];
 
 export const theRest = (async () => {
-  const [
-    supportsThreads,
-    supportsSimd,
-    supportsWebP,
-    supportsAvif,
-  ] = await Promise.all([
-    threads(),
-    simd(),
-    ...[webpDataUrl, avifDataUrl].map(async (dataUrl) => {
-      if (!self.createImageBitmap) return false;
-      const response = await fetch(dataUrl);
-      const blob = await response.blob();
-      return createImageBitmap(blob).then(
-        () => true,
-        () => false,
-      );
-    }),
-  ]);
+  const [supportsThreads, supportsSimd, supportsWebP, supportsAvif] =
+    await Promise.all([
+      threads(),
+      simd(),
+      ...[webpDataUrl, avifDataUrl].map(async (dataUrl) => {
+        if (!self.createImageBitmap) return false;
+        const response = await fetch(dataUrl);
+        const blob = await response.blob();
+        return createImageBitmap(blob).then(
+          () => true,
+          () => false,
+        );
+      }),
+    ]);
 
   const items: string[] = [];