Merge branch 'dev' into basis

.gitattributes

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

.husky/pre-commit

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

cli/README.md

@@ -1,7 +1,3 @@
-# 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.3",
+  "version": "0.7.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@squoosh/cli",
-      "version": "0.7.3",
+      "version": "0.7.2",
       "license": "Apache-2.0",
       "dependencies": {
         "@squoosh/lib": "^0.4.0",
@@ -36,9 +36,9 @@
       }
     },
     "node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
       "engines": {
         "node": ">=8"
       }
@@ -363,9 +363,9 @@
       }
     },
     "ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
     },
     "ansi-styles": {
       "version": "4.3.0",

cli/package.json

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

cli/src/index.js

@@ -4,7 +4,6 @@ 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';
 
@@ -104,7 +103,7 @@ async function getInputFiles(paths) {
 async function processFiles(files) {
   files = await getInputFiles(files);
 
-  const imagePool = new ImagePool(cpus().length);
+  const imagePool = new ImagePool();
 
   const results = new Map();
   const progress = progressTracker(results);
@@ -119,8 +118,7 @@ async function processFiles(files) {
   let decoded = 0;
   let decodedFiles = await Promise.all(
     files.map(async (file) => {
-      const buffer = await fsp.readFile(file);
-      const image = imagePool.ingestImage(buffer);
+      const image = imagePool.ingestImage(file);
       await image.decoded;
       results.set(image, {
         file,
@@ -182,7 +180,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/basis/LICENSE.codec.md

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

codecs/basis/Makefile

@@ -0,0 +1,83 @@
+CODEC_URL := https://github.com/BinomialLLC/basis_universal/archive/refs/tags/v1.15_rel2.tar.gz
+CODEC_DIR := node_modules/basis
+CODEC_BUILD_DIR := $(CODEC_DIR)/build
+CODEC_LIB := $(CODEC_BUILD_DIR)/basis.a
+ENVIRONMENT = worker
+
+OUT_JS := enc/basis_enc.js dec/basis_dec.js
+OUT_WASM := $(OUT_JS:.js=.wasm)
+
+COMMON_FLAGS := -O3 -fno-strict-aliasing
+
+override 	CXXFLAGS += $(COMMON_FLAGS)
+override 	CFLAGS += $(COMMAN_FLAGS)
+
+CODEC_CPP_SOURCE_FILES := \
+	encoder/basisu_comp.cpp \
+	encoder/basisu_enc.cpp \
+	encoder/basisu_backend.cpp \
+	encoder/basisu_basis_file.cpp \
+	encoder/basisu_etc.cpp \
+	encoder/basisu_uastc_enc.cpp \
+	encoder/basisu_gpu_texture.cpp \
+	encoder/basisu_frontend.cpp \
+	encoder/basisu_bc7enc.cpp \
+	encoder/basisu_pvrtc1_4.cpp \
+	encoder/basisu_astc_decomp.cpp \
+	encoder/basisu_global_selector_palette_helpers.cpp \
+	encoder/basisu_resampler.cpp \
+	encoder/basisu_kernels_sse.cpp \
+	encoder/basisu_resample_filters.cpp \
+	encoder/jpgd.cpp \
+	encoder/lodepng.cpp \
+	transcoder/basisu_transcoder.cpp
+
+CODEC_C_SOURCE_FILES := \
+	encoder/apg_bmp.c \
+	zstd/zstd.c
+
+.PHONY: all clean
+
+all: $(CODEC_DIR) $(OUT_JS)
+
+# Define dependencies for all variations of build artifacts.
+$(filter enc/%,$(OUT_JS)): enc/basis_enc.cpp
+$(filter dec/%,$(OUT_JS)): dec/basis_dec.cpp
+
+# TODO: Make it build for node
+# enc/mozjpeg_node_enc.js dec/mozjpeg_node_dec.js: ENVIRONMENT = node
+
+%.js: $(CODEC_LIB)
+	$(CXX) \
+		-I $(CODEC_DIR)/encoder \
+		-I $(CODEC_DIR)/transcoder \
+		${CXXFLAGS} \
+		${LDFLAGS} \
+		--closure 1 \
+		--bind \
+		-s ALLOW_MEMORY_GROWTH=1 \
+		-s MODULARIZE=1 \
+		-s TEXTDECODER=2 \
+		-s ENVIRONMENT=$(ENVIRONMENT) \
+		-s EXPORT_ES6=1 \
+		-o $@ \
+		$+ 
+
+$(CODEC_LIB): $(CODEC_DIR)
+	mkdir -p $(CODEC_BUILD_DIR)
+	cd $(CODEC_BUILD_DIR) && \
+	$(CXX) \
+		${CXXFLAGS} \
+		-c $(addprefix ../, $(CODEC_CPP_SOURCE_FILES))
+	cd $(CODEC_BUILD_DIR) && \
+	$(CC) \
+		${CFLAGS} \
+		-c $(addprefix ../, $(CODEC_C_SOURCE_FILES))
+	$(AR) rc $(CODEC_LIB) $(CODEC_BUILD_DIR)/*.o
+
+$(CODEC_DIR):
+	mkdir -p $@
+	curl -sL $(CODEC_URL) | tar xz --strip 1 -C $@
+
+clean:
+	$(RM) -r $(OUT_JS) $(OUT_WASM) $(CODEC_BUILD_DIR)

codecs/basis/dec/basis_dec.cpp

@@ -0,0 +1,46 @@
+#include <emscripten/bind.h>
+#include <emscripten/val.h>
+#include <inttypes.h>
+#include <string>
+#include "basisu_global_selector_palette.h"
+#include "basisu_transcoder.h"
+
+using namespace emscripten;
+using namespace basisu;
+
+thread_local const val Uint8ClampedArray = val::global("Uint8ClampedArray");
+thread_local const val ImageData = val::global("ImageData");
+
+val decode(std::string data) {
+  basist::basisu_transcoder_init();
+
+  basist::etc1_global_selector_codebook sel_codebook = basist::etc1_global_selector_codebook(
+      basist::g_global_selector_cb_size, basist::g_global_selector_cb);
+  basist::ktx2_transcoder transcoder = basist::ktx2_transcoder(&sel_codebook);
+
+  const void* dataPtr = reinterpret_cast<const void*>(data.c_str());
+  auto dataSize = data.size();
+  transcoder.init(dataPtr, dataSize);
+
+  auto header = transcoder.get_header();
+  auto image_width = static_cast<uint32_t>(header.m_pixel_width);
+  auto image_height = static_cast<uint32_t>(header.m_pixel_height);
+
+  transcoder.start_transcoding();
+  auto buffer = std::vector<uint8_t>(image_width * image_height * 4);
+  auto ok = transcoder.transcode_image_level(
+      0 /* level_index */, 0 /* layer_index */, 0 /* face_index */, buffer.data(),
+      buffer.size() / 4, basist::transcoder_texture_format::cTFRGBA32, 0 /* decode_flags */,
+      image_width /* output_row_pitch_in_blocks_or_pixels */);
+  if (!ok) {
+    return val(std::string("Could not decode"));
+  }
+
+  auto img_data_data = Uint8ClampedArray.new_(typed_memory_view(buffer.size(), buffer.data()));
+  auto imgData = ImageData.new_(img_data_data, image_width, image_height);
+  return imgData;
+}
+
+EMSCRIPTEN_BINDINGS(my_module) {
+  function("decode", &decode);
+}

codecs/basis/dec/basis_dec.d.ts

@@ -0,0 +1,7 @@
+export interface BasisModule extends EmscriptenWasm.Module {
+  decode(data: BufferSource): ImageData | null;
+}
+
+declare var moduleFactory: EmscriptenWasm.ModuleFactory<BasisModule>;
+
+export default moduleFactory;

codecs/basis/dec/basis_dec.js

@@ -0,0 +1,56 @@
+
+var Module = (function() {
+  var _scriptDir = import.meta.url;
+  
+  return (
+function(Module) {
+  Module = Module || {};
+
+
+var e;e||(e=typeof Module !== 'undefined' ? Module : {});var aa,r;e.ready=new Promise(function(a,b){aa=a;r=b});var t={},u;for(u in e)e.hasOwnProperty(u)&&(t[u]=e[u]);var v="",w;v=self.location.href;_scriptDir&&(v=_scriptDir);0!==v.indexOf("blob:")?v=v.substr(0,v.lastIndexOf("/")+1):v="";w=function(a){var b=new XMLHttpRequest;b.open("GET",a,!1);b.responseType="arraybuffer";b.send(null);return new Uint8Array(b.response)};var ba=e.print||console.log.bind(console),y=e.printErr||console.warn.bind(console);
+for(u in t)t.hasOwnProperty(u)&&(e[u]=t[u]);t=null;var z;e.wasmBinary&&(z=e.wasmBinary);var noExitRuntime=e.noExitRuntime||!0;"object"!==typeof WebAssembly&&A("no native wasm support detected");var C,ca=!1,da=new TextDecoder("utf8");function D(a,b){if(!a)return"";b=a+b;for(var c=a;!(c>=b)&&E[c];)++c;return da.decode(E.subarray(a,c))}
+function ea(a,b,c){var d=E;if(0<c){c=b+c-1;for(var f=0;f<a.length;++f){var g=a.charCodeAt(f);if(55296<=g&&57343>=g){var k=a.charCodeAt(++f);g=65536+((g&1023)<<10)|k&1023}if(127>=g){if(b>=c)break;d[b++]=g}else{if(2047>=g){if(b+1>=c)break;d[b++]=192|g>>6}else{if(65535>=g){if(b+2>=c)break;d[b++]=224|g>>12}else{if(b+3>=c)break;d[b++]=240|g>>18;d[b++]=128|g>>12&63}d[b++]=128|g>>6&63}d[b++]=128|g&63}}d[b]=0}}var fa=new TextDecoder("utf-16le");
+function ha(a,b){var c=a>>1;for(b=c+b/2;!(c>=b)&&F[c];)++c;return fa.decode(E.subarray(a,c<<1))}function ia(a,b,c){void 0===c&&(c=2147483647);if(2>c)return 0;c-=2;var d=b;c=c<2*a.length?c/2:a.length;for(var f=0;f<c;++f)G[b>>1]=a.charCodeAt(f),b+=2;G[b>>1]=0;return b-d}function ja(a){return 2*a.length}function ka(a,b){for(var c=0,d="";!(c>=b/4);){var f=I[a+4*c>>2];if(0==f)break;++c;65536<=f?(f-=65536,d+=String.fromCharCode(55296|f>>10,56320|f&1023)):d+=String.fromCharCode(f)}return d}
+function la(a,b,c){void 0===c&&(c=2147483647);if(4>c)return 0;var d=b;c=d+c-4;for(var f=0;f<a.length;++f){var g=a.charCodeAt(f);if(55296<=g&&57343>=g){var k=a.charCodeAt(++f);g=65536+((g&1023)<<10)|k&1023}I[b>>2]=g;b+=4;if(b+4>c)break}I[b>>2]=0;return b-d}function ma(a){for(var b=0,c=0;c<a.length;++c){var d=a.charCodeAt(c);55296<=d&&57343>=d&&++c;b+=4}return b}var na,oa,E,G,F,I,J,pa,qa;
+function ra(){var a=C.buffer;na=a;e.HEAP8=oa=new Int8Array(a);e.HEAP16=G=new Int16Array(a);e.HEAP32=I=new Int32Array(a);e.HEAPU8=E=new Uint8Array(a);e.HEAPU16=F=new Uint16Array(a);e.HEAPU32=J=new Uint32Array(a);e.HEAPF32=pa=new Float32Array(a);e.HEAPF64=qa=new Float64Array(a)}var L,sa=[],ta=[],ua=[];function va(){var a=e.preRun.shift();sa.unshift(a)}var M=0,wa=null,N=null;e.preloadedImages={};e.preloadedAudios={};
+function A(a){if(e.onAbort)e.onAbort(a);y(a);ca=!0;a=new WebAssembly.RuntimeError("abort("+a+"). Build with -s ASSERTIONS=1 for more info.");r(a);throw a;}var O=(new URL("basis_dec.wasm",import.meta.url)).toString();function xa(){try{if(O==O&&z)return new Uint8Array(z);if(w)return w(O);throw"both async and sync fetching of the wasm failed";}catch(a){A(a)}}
+function ya(){return z||"function"!==typeof fetch?Promise.resolve().then(function(){return xa()}):fetch(O,{credentials:"same-origin"}).then(function(a){if(!a.ok)throw"failed to load wasm binary file at '"+O+"'";return a.arrayBuffer()}).catch(function(){return xa()})}function za(a){for(;0<a.length;){var b=a.shift();if("function"==typeof b)b(e);else{var c=b.M;"number"===typeof c?void 0===b.I?L.get(c)():L.get(c)(b.I):c(void 0===b.I?null:b.I)}}}
+function Aa(a){switch(a){case 1:return 0;case 2:return 1;case 4:return 2;case 8:return 3;default:throw new TypeError("Unknown type size: "+a);}}var Ba=void 0;function P(a){for(var b="";E[a];)b+=Ba[E[a++]];return b}var Q={},R={},S={};function Ca(a){if(void 0===a)return"_unknown";a=a.replace(/[^a-zA-Z0-9_]/g,"$");var b=a.charCodeAt(0);return 48<=b&&57>=b?"_"+a:a}
+function Da(a,b){a=Ca(a);return(new Function("body","return function "+a+'() {\n    "use strict";    return body.apply(this, arguments);\n};\n'))(b)}function Ea(a){var b=Error,c=Da(a,function(d){this.name=a;this.message=d;d=Error(d).stack;void 0!==d&&(this.stack=this.toString()+"\n"+d.replace(/^Error(:[^\n]*)?\n/,""))});c.prototype=Object.create(b.prototype);c.prototype.constructor=c;c.prototype.toString=function(){return void 0===this.message?this.name:this.name+": "+this.message};return c}
+var Fa=void 0;function T(a){throw new Fa(a);}var Ga=void 0;function Ha(a,b){function c(h){h=b(h);if(h.length!==d.length)throw new Ga("Mismatched type converter count");for(var m=0;m<d.length;++m)U(d[m],h[m])}var d=[];d.forEach(function(h){S[h]=a});var f=Array(a.length),g=[],k=0;a.forEach(function(h,m){R.hasOwnProperty(h)?f[m]=R[h]:(g.push(h),Q.hasOwnProperty(h)||(Q[h]=[]),Q[h].push(function(){f[m]=R[h];++k;k===g.length&&c(f)}))});0===g.length&&c(f)}
+function U(a,b,c){c=c||{};if(!("argPackAdvance"in b))throw new TypeError("registerType registeredInstance requires argPackAdvance");var d=b.name;a||T('type "'+d+'" must have a positive integer typeid pointer');if(R.hasOwnProperty(a)){if(c.L)return;T("Cannot register type '"+d+"' twice")}R[a]=b;delete S[a];Q.hasOwnProperty(a)&&(b=Q[a],delete Q[a],b.forEach(function(f){f()}))}var Ia=[],V=[{},{value:void 0},{value:null},{value:!0},{value:!1}];
+function La(a){4<a&&0===--V[a].J&&(V[a]=void 0,Ia.push(a))}function W(a){switch(a){case void 0:return 1;case null:return 2;case !0:return 3;case !1:return 4;default:var b=Ia.length?Ia.pop():V.length;V[b]={J:1,value:a};return b}}function Ma(a){return this.fromWireType(J[a>>2])}function Na(a){if(null===a)return"null";var b=typeof a;return"object"===b||"array"===b||"function"===b?a.toString():""+a}
+function Oa(a,b){switch(b){case 2:return function(c){return this.fromWireType(pa[c>>2])};case 3:return function(c){return this.fromWireType(qa[c>>3])};default:throw new TypeError("Unknown float type: "+a);}}function Pa(a){var b=Function;if(!(b instanceof Function))throw new TypeError("new_ called with constructor type "+typeof b+" which is not a function");var c=Da(b.name||"unknownFunctionName",function(){});c.prototype=b.prototype;c=new c;a=b.apply(c,a);return a instanceof Object?a:c}
+function Qa(a){for(;a.length;){var b=a.pop();a.pop()(b)}}function Ra(a,b){var c=e;if(void 0===c[a].G){var d=c[a];c[a]=function(){c[a].G.hasOwnProperty(arguments.length)||T("Function '"+b+"' called with an invalid number of arguments ("+arguments.length+") - expects one of ("+c[a].G+")!");return c[a].G[arguments.length].apply(this,arguments)};c[a].G=[];c[a].G[d.K]=d}}
+function Sa(a,b,c){e.hasOwnProperty(a)?((void 0===c||void 0!==e[a].G&&void 0!==e[a].G[c])&&T("Cannot register public name '"+a+"' twice"),Ra(a,a),e.hasOwnProperty(c)&&T("Cannot register multiple overloads of a function with the same number of arguments ("+c+")!"),e[a].G[c]=b):(e[a]=b,void 0!==c&&(e[a].O=c))}function Ta(a,b){for(var c=[],d=0;d<a;d++)c.push(I[(b>>2)+d]);return c}
+function Ua(a,b){var c=[];return function(){c.length=arguments.length;for(var d=0;d<arguments.length;d++)c[d]=arguments[d];a.includes("j")?(d=e["dynCall_"+a],d=c&&c.length?d.apply(null,[b].concat(c)):d.call(null,b)):d=L.get(b).apply(null,c);return d}}function Va(a,b){a=P(a);var c=a.includes("j")?Ua(a,b):L.get(b);"function"!==typeof c&&T("unknown function pointer with signature "+a+": "+b);return c}var Wa=void 0;function Xa(a){a=Ya(a);var b=P(a);X(a);return b}
+function Za(a,b){function c(g){f[g]||R[g]||(S[g]?S[g].forEach(c):(d.push(g),f[g]=!0))}var d=[],f={};b.forEach(c);throw new Wa(a+": "+d.map(Xa).join([", "]));}function $a(a,b,c){switch(b){case 0:return c?function(d){return oa[d]}:function(d){return E[d]};case 1:return c?function(d){return G[d>>1]}:function(d){return F[d>>1]};case 2:return c?function(d){return I[d>>2]}:function(d){return J[d>>2]};default:throw new TypeError("Unknown integer type: "+a);}}var ab={};
+function bb(){return"object"===typeof globalThis?globalThis:Function("return this")()}function cb(a,b){var c=R[a];void 0===c&&T(b+" has unknown type "+Xa(a));return c}for(var db={},eb=[null,[],[]],fb=Array(256),Y=0;256>Y;++Y)fb[Y]=String.fromCharCode(Y);Ba=fb;Fa=e.BindingError=Ea("BindingError");Ga=e.InternalError=Ea("InternalError");e.count_emval_handles=function(){for(var a=0,b=5;b<V.length;++b)void 0!==V[b]&&++a;return a};
+e.get_first_emval=function(){for(var a=5;a<V.length;++a)if(void 0!==V[a])return V[a];return null};Wa=e.UnboundTypeError=Ea("UnboundTypeError");
+var hb={a:function(a,b,c,d){A("Assertion failed: "+D(a)+", at: "+[b?D(b):"unknown filename",c,d?D(d):"unknown function"])},g:function(){},r:function(){},x:function(a,b,c,d,f){var g=Aa(c);b=P(b);U(a,{name:b,fromWireType:function(k){return!!k},toWireType:function(k,h){return h?d:f},argPackAdvance:8,readValueFromPointer:function(k){if(1===c)var h=oa;else if(2===c)h=G;else if(4===c)h=I;else throw new TypeError("Unknown boolean type size: "+b);return this.fromWireType(h[k>>g])},H:null})},w:function(a,
+b){b=P(b);U(a,{name:b,fromWireType:function(c){var d=V[c].value;La(c);return d},toWireType:function(c,d){return W(d)},argPackAdvance:8,readValueFromPointer:Ma,H:null})},l:function(a,b,c){c=Aa(c);b=P(b);U(a,{name:b,fromWireType:function(d){return d},toWireType:function(d,f){if("number"!==typeof f&&"boolean"!==typeof f)throw new TypeError('Cannot convert "'+Na(f)+'" to '+this.name);return f},argPackAdvance:8,readValueFromPointer:Oa(b,c),H:null})},o:function(a,b,c,d,f,g){var k=Ta(b,c);a=P(a);f=Va(d,
+f);Sa(a,function(){Za("Cannot call "+a+" due to unbound types",k)},b-1);Ha(k,function(h){var m=a,l=a;h=[h[0],null].concat(h.slice(1));var p=f,q=h.length;2>q&&T("argTypes array size mismatch! Must at least get return value and 'this' types!");for(var x=null!==h[1]&&!1,B=!1,n=1;n<h.length;++n)if(null!==h[n]&&void 0===h[n].H){B=!0;break}var Ja="void"!==h[0].name,H="",K="";for(n=0;n<q-2;++n)H+=(0!==n?", ":"")+"arg"+n,K+=(0!==n?", ":"")+"arg"+n+"Wired";l="return function "+Ca(l)+"("+H+") {\nif (arguments.length !== "+
+(q-2)+") {\nthrowBindingError('function "+l+" called with ' + arguments.length + ' arguments, expected "+(q-2)+" args!');\n}\n";B&&(l+="var destructors = [];\n");var Ka=B?"destructors":"null";H="throwBindingError invoker fn runDestructors retType classParam".split(" ");p=[T,p,g,Qa,h[0],h[1]];x&&(l+="var thisWired = classParam.toWireType("+Ka+", this);\n");for(n=0;n<q-2;++n)l+="var arg"+n+"Wired = argType"+n+".toWireType("+Ka+", arg"+n+"); // "+h[n+2].name+"\n",H.push("argType"+n),p.push(h[n+2]);x&&
+(K="thisWired"+(0<K.length?", ":"")+K);l+=(Ja?"var rv = ":"")+"invoker(fn"+(0<K.length?", ":"")+K+");\n";if(B)l+="runDestructors(destructors);\n";else for(n=x?1:2;n<h.length;++n)q=1===n?"thisWired":"arg"+(n-2)+"Wired",null!==h[n].H&&(l+=q+"_dtor("+q+"); // "+h[n].name+"\n",H.push(q+"_dtor"),p.push(h[n].H));Ja&&(l+="var ret = retType.fromWireType(rv);\nreturn ret;\n");H.push(l+"}\n");h=Pa(H).apply(null,p);n=b-1;if(!e.hasOwnProperty(m))throw new Ga("Replacing nonexistant public symbol");void 0!==e[m].G&&
+void 0!==n?e[m].G[n]=h:(e[m]=h,e[m].K=n);return[]})},c:function(a,b,c,d,f){function g(l){return l}b=P(b);-1===f&&(f=4294967295);var k=Aa(c);if(0===d){var h=32-8*c;g=function(l){return l<<h>>>h}}var m=b.includes("unsigned");U(a,{name:b,fromWireType:g,toWireType:function(l,p){if("number"!==typeof p&&"boolean"!==typeof p)throw new TypeError('Cannot convert "'+Na(p)+'" to '+this.name);if(p<d||p>f)throw new TypeError('Passing a number "'+Na(p)+'" from JS side to C/C++ side to an argument of type "'+b+
+'", which is outside the valid range ['+d+", "+f+"]!");return m?p>>>0:p|0},argPackAdvance:8,readValueFromPointer:$a(b,k,0!==d),H:null})},b:function(a,b,c){function d(g){g>>=2;var k=J;return new f(na,k[g+1],k[g])}var f=[Int8Array,Uint8Array,Int16Array,Uint16Array,Int32Array,Uint32Array,Float32Array,Float64Array][b];c=P(c);U(a,{name:c,fromWireType:d,argPackAdvance:8,readValueFromPointer:d},{L:!0})},m:function(a,b){b=P(b);var c="std::string"===b;U(a,{name:b,fromWireType:function(d){var f=J[d>>2];if(c)for(var g=
+d+4,k=0;k<=f;++k){var h=d+4+k;if(k==f||0==E[h]){g=D(g,h-g);if(void 0===m)var m=g;else m+=String.fromCharCode(0),m+=g;g=h+1}}else{m=Array(f);for(k=0;k<f;++k)m[k]=String.fromCharCode(E[d+4+k]);m=m.join("")}X(d);return m},toWireType:function(d,f){f instanceof ArrayBuffer&&(f=new Uint8Array(f));var g="string"===typeof f;g||f instanceof Uint8Array||f instanceof Uint8ClampedArray||f instanceof Int8Array||T("Cannot pass non-string to std::string");var k=(c&&g?function(){for(var l=0,p=0;p<f.length;++p){var q=
+f.charCodeAt(p);55296<=q&&57343>=q&&(q=65536+((q&1023)<<10)|f.charCodeAt(++p)&1023);127>=q?++l:l=2047>=q?l+2:65535>=q?l+3:l+4}return l}:function(){return f.length})(),h=gb(4+k+1);J[h>>2]=k;if(c&&g)ea(f,h+4,k+1);else if(g)for(g=0;g<k;++g){var m=f.charCodeAt(g);255<m&&(X(h),T("String has UTF-16 code units that do not fit in 8 bits"));E[h+4+g]=m}else for(g=0;g<k;++g)E[h+4+g]=f[g];null!==d&&d.push(X,h);return h},argPackAdvance:8,readValueFromPointer:Ma,H:function(d){X(d)}})},i:function(a,b,c){c=P(c);
+if(2===b){var d=ha;var f=ia;var g=ja;var k=function(){return F};var h=1}else 4===b&&(d=ka,f=la,g=ma,k=function(){return J},h=2);U(a,{name:c,fromWireType:function(m){for(var l=J[m>>2],p=k(),q,x=m+4,B=0;B<=l;++B){var n=m+4+B*b;if(B==l||0==p[n>>h])x=d(x,n-x),void 0===q?q=x:(q+=String.fromCharCode(0),q+=x),x=n+b}X(m);return q},toWireType:function(m,l){"string"!==typeof l&&T("Cannot pass non-string to C++ string type "+c);var p=g(l),q=gb(4+p+b);J[q>>2]=p>>h;f(l,q+4,p+b);null!==m&&m.push(X,q);return q},
+argPackAdvance:8,readValueFromPointer:Ma,H:function(m){X(m)}})},n:function(a,b){b=P(b);U(a,{N:!0,name:b,argPackAdvance:0,fromWireType:function(){},toWireType:function(){}})},e:La,f:function(a){if(0===a)return W(bb());var b=ab[a];a=void 0===b?P(a):b;return W(bb()[a])},j:function(a){4<a&&(V[a].J+=1)},k:function(a,b,c,d){a||T("Cannot use deleted val. handle = "+a);a=V[a].value;var f=db[b];if(!f){f="";for(var g=0;g<b;++g)f+=(0!==g?", ":"")+"arg"+g;var k="return function emval_allocator_"+b+"(constructor, argTypes, args) {\n";
+for(g=0;g<b;++g)k+="var argType"+g+" = requireRegisteredType(Module['HEAP32'][(argTypes >>> 2) + "+g+'], "parameter '+g+'");\nvar arg'+g+" = argType"+g+".readValueFromPointer(args);\nargs += argType"+g+"['argPackAdvance'];\n";f=(new Function("requireRegisteredType","Module","__emval_register",k+("var obj = new constructor("+f+");\nreturn __emval_register(obj);\n}\n")))(cb,e,W);db[b]=f}return f(a,c,d)},p:function(a,b){a=cb(a,"_emval_take_value");a=a.readValueFromPointer(b);return W(a)},d:function(){A()},
+t:function(a,b,c){E.copyWithin(a,b,b+c)},h:function(a){var b=E.length;a>>>=0;if(2147483648<a)return!1;for(var c=1;4>=c;c*=2){var d=b*(1+.2/c);d=Math.min(d,a+100663296);d=Math.max(a,d);0<d%65536&&(d+=65536-d%65536);a:{try{C.grow(Math.min(2147483648,d)-na.byteLength+65535>>>16);ra();var f=1;break a}catch(g){}f=void 0}if(f)return!0}return!1},v:function(){return 0},q:function(){},u:function(a,b,c,d){for(var f=0,g=0;g<c;g++){for(var k=I[b+8*g>>2],h=I[b+(8*g+4)>>2],m=0;m<h;m++){var l=E[k+m],p=eb[a];if(0===
+l||10===l){for(l=0;p[l]&&!(NaN<=l);)++l;l=da.decode(p.subarray?p.subarray(0,l):new Uint8Array(p.slice(0,l)));(1===a?ba:y)(l);p.length=0}else p.push(l)}f+=h}I[d>>2]=f;return 0},s:function(){}};
+(function(){function a(f){e.asm=f.exports;C=e.asm.y;ra();L=e.asm.E;ta.unshift(e.asm.z);M--;e.monitorRunDependencies&&e.monitorRunDependencies(M);0==M&&(null!==wa&&(clearInterval(wa),wa=null),N&&(f=N,N=null,f()))}function b(f){a(f.instance)}function c(f){return ya().then(function(g){return WebAssembly.instantiate(g,d)}).then(f,function(g){y("failed to asynchronously prepare wasm: "+g);A(g)})}var d={a:hb};M++;e.monitorRunDependencies&&e.monitorRunDependencies(M);if(e.instantiateWasm)try{return e.instantiateWasm(d,
+a)}catch(f){return y("Module.instantiateWasm callback failed with error: "+f),!1}(function(){return z||"function"!==typeof WebAssembly.instantiateStreaming||O.startsWith("data:application/octet-stream;base64,")||"function"!==typeof fetch?c(b):fetch(O,{credentials:"same-origin"}).then(function(f){return WebAssembly.instantiateStreaming(f,d).then(b,function(g){y("wasm streaming compile failed: "+g);y("falling back to ArrayBuffer instantiation");return c(b)})})})().catch(r);return{}})();
+e.___wasm_call_ctors=function(){return(e.___wasm_call_ctors=e.asm.z).apply(null,arguments)};var gb=e._malloc=function(){return(gb=e._malloc=e.asm.A).apply(null,arguments)},X=e._free=function(){return(X=e._free=e.asm.B).apply(null,arguments)},Ya=e.___getTypeName=function(){return(Ya=e.___getTypeName=e.asm.C).apply(null,arguments)};e.___embind_register_native_and_builtin_types=function(){return(e.___embind_register_native_and_builtin_types=e.asm.D).apply(null,arguments)};
+e.dynCall_jiji=function(){return(e.dynCall_jiji=e.asm.F).apply(null,arguments)};var Z;N=function ib(){Z||jb();Z||(N=ib)};
+function jb(){function a(){if(!Z&&(Z=!0,e.calledRun=!0,!ca)){za(ta);aa(e);if(e.onRuntimeInitialized)e.onRuntimeInitialized();if(e.postRun)for("function"==typeof e.postRun&&(e.postRun=[e.postRun]);e.postRun.length;){var b=e.postRun.shift();ua.unshift(b)}za(ua)}}if(!(0<M)){if(e.preRun)for("function"==typeof e.preRun&&(e.preRun=[e.preRun]);e.preRun.length;)va();za(sa);0<M||(e.setStatus?(e.setStatus("Running..."),setTimeout(function(){setTimeout(function(){e.setStatus("")},1);a()},1)):a())}}e.run=jb;
+if(e.preInit)for("function"==typeof e.preInit&&(e.preInit=[e.preInit]);0<e.preInit.length;)e.preInit.pop()();jb();
+
+
+  return Module.ready
+}
+);
+})();
+export default Module;

codecs/basis/enc/basis_enc.cpp

@@ -0,0 +1,96 @@
+#include <emscripten/bind.h>
+#include <emscripten/val.h>
+#include <inttypes.h>
+#include "basisu_comp.h"
+#include "basisu_enc.h"
+
+using namespace emscripten;
+using namespace basisu;
+
+struct BasisOptions {
+  float quality;
+  uint8_t compression;
+  bool uastc;
+  bool mipmap;
+  bool srgb_mipmap;
+  std::string mipmap_filter;
+  bool perceptual;
+  bool y_flip;
+  uint32_t mipmap_min_dimension;
+};
+
+thread_local const val Uint8Array = val::global("Uint8Array");
+
+val encode(std::string image_in, int image_width, int image_height, BasisOptions opts) {
+  basisu_encoder_init();
+
+  basist::etc1_global_selector_codebook sel_codebook(basist::g_global_selector_cb_size,
+                                                     basist::g_global_selector_cb);
+  basis_compressor_params params;
+  basis_compressor compressor;
+  image img =
+      image(reinterpret_cast<const uint8_t*>(image_in.c_str()), image_width, image_height, 4);
+  // We don’t need the encoder to read/decode files from the filesystem
+  params.m_read_source_images = false;
+  // Writing is unnecessary, too
+  params.m_write_output_basis_files = false;
+  // No printf pls
+  params.m_status_output = false;
+  // True => UASTC, False => ETC1S
+  params.m_uastc = opts.uastc;
+  // Use the standardized KTX2 format
+  params.m_create_ktx2_file = true;
+  // Codebook, whatever this exactly is or does.
+  params.m_pSel_codebook = &sel_codebook;
+  // No multithreading. It apparently doesn’t work well in Wasm.
+  // But we still need to provide a job pool.
+  params.m_multithreading = false;
+  job_pool jpool(1);
+  params.m_pJob_pool = &jpool;
+
+  params.m_ktx2_uastc_supercompression = basist::KTX2_SS_ZSTANDARD;
+
+  params.m_perceptual = opts.perceptual;
+  params.m_y_flip = opts.y_flip;
+  params.m_mip_gen = opts.mipmap;
+  params.m_mip_srgb = opts.srgb_mipmap;
+  params.m_mip_filter = opts.mipmap_filter;
+  params.m_mip_smallest_dimension = opts.mipmap_min_dimension;
+  params.m_compression_level = opts.compression;
+  params.m_source_images.push_back(img);
+
+  if (opts.uastc) {
+    params.m_rdo_uastc_quality_scalar = opts.quality;
+    params.m_rdo_uastc = opts.quality != 0;
+  } else {
+    params.m_quality_level = static_cast<int>(opts.quality);
+  }
+
+  if (!compressor.init(params)) {
+    return val(std::string("Well something went wrong during init"));
+  }
+
+  if (compressor.process() != 0) {
+    return val(std::string("Well something went wrong during processing"));
+  }
+
+  auto comp_data = compressor.get_output_ktx2_file();
+  auto js_result = Uint8Array.new_(typed_memory_view(comp_data.size(), &comp_data[0]));
+  // Not sure if there is anything to free here
+  return js_result;
+}
+
+EMSCRIPTEN_BINDINGS(my_module) {
+  value_object<BasisOptions>("BasisOptions")
+      .field("quality", &BasisOptions::quality)
+      .field("compression", &BasisOptions::compression)
+      .field("uastc", &BasisOptions::uastc)
+      .field("perceptual", &BasisOptions::perceptual)
+      .field("y_flip", &BasisOptions::y_flip)
+      .field("mipmap", &BasisOptions::mipmap)
+      .field("srgb_mipmap", &BasisOptions::srgb_mipmap)
+      .field("mipmap_filter", &BasisOptions::mipmap_filter)
+      .field("mipmap_min_dimension", &BasisOptions::mipmap_min_dimension);
+
+  function("encode", &encode);
+}

codecs/basis/enc/basis_enc.d.ts

@@ -0,0 +1,24 @@
+export interface EncodeOptions {
+  quality: number;
+  compression: number;
+  uastc: boolean;
+  y_flip: boolean;
+  mipmap: boolean;
+  srgb_mipmap: boolean;
+  perceptual: boolean;
+  mipmap_filter: string;
+  mipmap_min_dimension: number;
+}
+
+export interface BasisModule extends EmscriptenWasm.Module {
+  encode(
+    data: BufferSource,
+    width: number,
+    height: number,
+    options: EncodeOptions,
+  ): Uint8Array | null;
+}
+
+declare var moduleFactory: EmscriptenWasm.ModuleFactory<BasisModule>;
+
+export default moduleFactory;

codecs/basis/enc/basis_enc.js

@@ -0,0 +1,62 @@
+
+var Module = (function() {
+  var _scriptDir = import.meta.url;
+  
+  return (
+function(Module) {
+  Module = Module || {};
+
+
+var f;f||(f=typeof Module !== 'undefined' ? Module : {});var aa,ba;f.ready=new Promise(function(a,b){aa=a;ba=b});var r={},t;for(t in f)f.hasOwnProperty(t)&&(r[t]=f[t]);var u="",ca;u=self.location.href;_scriptDir&&(u=_scriptDir);0!==u.indexOf("blob:")?u=u.substr(0,u.lastIndexOf("/")+1):u="";ca=function(a){var b=new XMLHttpRequest;b.open("GET",a,!1);b.responseType="arraybuffer";b.send(null);return new Uint8Array(b.response)};var da=f.print||console.log.bind(console),v=f.printErr||console.warn.bind(console);
+for(t in r)r.hasOwnProperty(t)&&(f[t]=r[t]);r=null;var ea=0,w;f.wasmBinary&&(w=f.wasmBinary);var noExitRuntime=f.noExitRuntime||!0;"object"!==typeof WebAssembly&&x("no native wasm support detected");var ha,ia=!1,ja=new TextDecoder("utf8");function B(a,b){if(!a)return"";b=a+b;for(var c=a;!(c>=b)&&C[c];)++c;return ja.decode(C.subarray(a,c))}
+function ka(a,b,c){var d=C;if(0<c){c=b+c-1;for(var e=0;e<a.length;++e){var g=a.charCodeAt(e);if(55296<=g&&57343>=g){var k=a.charCodeAt(++e);g=65536+((g&1023)<<10)|k&1023}if(127>=g){if(b>=c)break;d[b++]=g}else{if(2047>=g){if(b+1>=c)break;d[b++]=192|g>>6}else{if(65535>=g){if(b+2>=c)break;d[b++]=224|g>>12}else{if(b+3>=c)break;d[b++]=240|g>>18;d[b++]=128|g>>12&63}d[b++]=128|g>>6&63}d[b++]=128|g&63}}d[b]=0}}var la=new TextDecoder("utf-16le");
+function ma(a,b){var c=a>>1;for(b=c+b/2;!(c>=b)&&D[c];)++c;return la.decode(C.subarray(a,c<<1))}function na(a,b,c){void 0===c&&(c=2147483647);if(2>c)return 0;c-=2;var d=b;c=c<2*a.length?c/2:a.length;for(var e=0;e<c;++e)E[b>>1]=a.charCodeAt(e),b+=2;E[b>>1]=0;return b-d}function oa(a){return 2*a.length}function pa(a,b){for(var c=0,d="";!(c>=b/4);){var e=F[a+4*c>>2];if(0==e)break;++c;65536<=e?(e-=65536,d+=String.fromCharCode(55296|e>>10,56320|e&1023)):d+=String.fromCharCode(e)}return d}
+function qa(a,b,c){void 0===c&&(c=2147483647);if(4>c)return 0;var d=b;c=d+c-4;for(var e=0;e<a.length;++e){var g=a.charCodeAt(e);if(55296<=g&&57343>=g){var k=a.charCodeAt(++e);g=65536+((g&1023)<<10)|k&1023}F[b>>2]=g;b+=4;if(b+4>c)break}F[b>>2]=0;return b-d}function ra(a){for(var b=0,c=0;c<a.length;++c){var d=a.charCodeAt(c);55296<=d&&57343>=d&&++c;b+=4}return b}var sa,H,C,E,D,F,I,ta,ua;
+function va(){var a=ha.buffer;sa=a;f.HEAP8=H=new Int8Array(a);f.HEAP16=E=new Int16Array(a);f.HEAP32=F=new Int32Array(a);f.HEAPU8=C=new Uint8Array(a);f.HEAPU16=D=new Uint16Array(a);f.HEAPU32=I=new Uint32Array(a);f.HEAPF32=ta=new Float32Array(a);f.HEAPF64=ua=new Float64Array(a)}var J,wa=[],xa=[],ya=[];function za(){var a=f.preRun.shift();wa.unshift(a)}var K=0,Aa=null,L=null;f.preloadedImages={};f.preloadedAudios={};
+function x(a){if(f.onAbort)f.onAbort(a);v(a);ia=!0;a=new WebAssembly.RuntimeError("abort("+a+"). Build with -s ASSERTIONS=1 for more info.");ba(a);throw a;}var M=(new URL("basis_enc.wasm",import.meta.url)).toString();function Ba(){try{if(M==M&&w)return new Uint8Array(w);if(ca)return ca(M);throw"both async and sync fetching of the wasm failed";}catch(a){x(a)}}
+function Ca(){return w||"function"!==typeof fetch?Promise.resolve().then(function(){return Ba()}):fetch(M,{credentials:"same-origin"}).then(function(a){if(!a.ok)throw"failed to load wasm binary file at '"+M+"'";return a.arrayBuffer()}).catch(function(){return Ba()})}function Da(a){for(;0<a.length;){var b=a.shift();if("function"==typeof b)b(f);else{var c=b.Aa;"number"===typeof c?void 0===b.fa?J.get(c)():J.get(c)(b.fa):c(void 0===b.fa?null:b.fa)}}}
+function Ea(a){this.ea=a-16;this.va=function(b){F[this.ea+8>>2]=b};this.sa=function(b){F[this.ea+0>>2]=b};this.ta=function(){F[this.ea+4>>2]=0};this.ra=function(){H[this.ea+12>>0]=0};this.ua=function(){H[this.ea+13>>0]=0};this.oa=function(b,c){this.va(b);this.sa(c);this.ta();this.ra();this.ua()}}var Fa=0,Ga=[null,[],[]],Ha={},Ia={};function Ja(a){for(;a.length;){var b=a.pop();a.pop()(b)}}function Ka(a){return this.fromWireType(I[a>>2])}var N={},O={},La={};
+function Ma(a){if(void 0===a)return"_unknown";a=a.replace(/[^a-zA-Z0-9_]/g,"$");var b=a.charCodeAt(0);return 48<=b&&57>=b?"_"+a:a}function Na(a,b){a=Ma(a);return(new Function("body","return function "+a+'() {\n    "use strict";    return body.apply(this, arguments);\n};\n'))(b)}
+function Oa(a){var b=Error,c=Na(a,function(d){this.name=a;this.message=d;d=Error(d).stack;void 0!==d&&(this.stack=this.toString()+"\n"+d.replace(/^Error(:[^\n]*)?\n/,""))});c.prototype=Object.create(b.prototype);c.prototype.constructor=c;c.prototype.toString=function(){return void 0===this.message?this.name:this.name+": "+this.message};return c}var Pa=void 0;
+function Qa(a,b,c){function d(h){h=c(h);if(h.length!==a.length)throw new Pa("Mismatched type converter count");for(var l=0;l<a.length;++l)P(a[l],h[l])}a.forEach(function(h){La[h]=b});var e=Array(b.length),g=[],k=0;b.forEach(function(h,l){O.hasOwnProperty(h)?e[l]=O[h]:(g.push(h),N.hasOwnProperty(h)||(N[h]=[]),N[h].push(function(){e[l]=O[h];++k;k===g.length&&d(e)}))});0===g.length&&d(e)}
+function Ra(a){switch(a){case 1:return 0;case 2:return 1;case 4:return 2;case 8:return 3;default:throw new TypeError("Unknown type size: "+a);}}var Sa=void 0;function Q(a){for(var b="";C[a];)b+=Sa[C[a++]];return b}var Ta=void 0;function R(a){throw new Ta(a);}
+function P(a,b,c){c=c||{};if(!("argPackAdvance"in b))throw new TypeError("registerType registeredInstance requires argPackAdvance");var d=b.name;a||R('type "'+d+'" must have a positive integer typeid pointer');if(O.hasOwnProperty(a)){if(c.na)return;R("Cannot register type '"+d+"' twice")}O[a]=b;delete La[a];N.hasOwnProperty(a)&&(b=N[a],delete N[a],b.forEach(function(e){e()}))}var Ua=[],S=[{},{value:void 0},{value:null},{value:!0},{value:!1}];
+function Va(a){4<a&&0===--S[a].ga&&(S[a]=void 0,Ua.push(a))}function T(a){switch(a){case void 0:return 1;case null:return 2;case !0:return 3;case !1:return 4;default:var b=Ua.length?Ua.pop():S.length;S[b]={ga:1,value:a};return b}}function Wa(a){if(null===a)return"null";var b=typeof a;return"object"===b||"array"===b||"function"===b?a.toString():""+a}
+function Xa(a,b){switch(b){case 2:return function(c){return this.fromWireType(ta[c>>2])};case 3:return function(c){return this.fromWireType(ua[c>>3])};default:throw new TypeError("Unknown float type: "+a);}}function Ya(a){var b=Function;if(!(b instanceof Function))throw new TypeError("new_ called with constructor type "+typeof b+" which is not a function");var c=Na(b.name||"unknownFunctionName",function(){});c.prototype=b.prototype;c=new c;a=b.apply(c,a);return a instanceof Object?a:c}
+function Za(a,b){var c=f;if(void 0===c[a].ca){var d=c[a];c[a]=function(){c[a].ca.hasOwnProperty(arguments.length)||R("Function '"+b+"' called with an invalid number of arguments ("+arguments.length+") - expects one of ("+c[a].ca+")!");return c[a].ca[arguments.length].apply(this,arguments)};c[a].ca=[];c[a].ca[d.ia]=d}}
+function $a(a,b,c){f.hasOwnProperty(a)?((void 0===c||void 0!==f[a].ca&&void 0!==f[a].ca[c])&&R("Cannot register public name '"+a+"' twice"),Za(a,a),f.hasOwnProperty(c)&&R("Cannot register multiple overloads of a function with the same number of arguments ("+c+")!"),f[a].ca[c]=b):(f[a]=b,void 0!==c&&(f[a].Da=c))}function ab(a,b){for(var c=[],d=0;d<a;d++)c.push(F[(b>>2)+d]);return c}
+function bb(a,b){var c=[];return function(){c.length=arguments.length;for(var d=0;d<arguments.length;d++)c[d]=arguments[d];a.includes("j")?(d=f["dynCall_"+a],d=c&&c.length?d.apply(null,[b].concat(c)):d.call(null,b)):d=J.get(b).apply(null,c);return d}}function U(a,b){a=Q(a);var c=a.includes("j")?bb(a,b):J.get(b);"function"!==typeof c&&R("unknown function pointer with signature "+a+": "+b);return c}var cb=void 0;function db(a){a=eb(a);var b=Q(a);V(a);return b}
+function fb(a,b){function c(g){e[g]||O[g]||(La[g]?La[g].forEach(c):(d.push(g),e[g]=!0))}var d=[],e={};b.forEach(c);throw new cb(a+": "+d.map(db).join([", "]));}function gb(a,b,c){switch(b){case 0:return c?function(d){return H[d]}:function(d){return C[d]};case 1:return c?function(d){return E[d>>1]}:function(d){return D[d>>1]};case 2:return c?function(d){return F[d>>2]}:function(d){return I[d>>2]};default:throw new TypeError("Unknown integer type: "+a);}}var hb={};
+function ib(){return"object"===typeof globalThis?globalThis:Function("return this")()}function jb(a,b){var c=O[a];void 0===c&&R(b+" has unknown type "+db(a));return c}var kb={};Pa=f.InternalError=Oa("InternalError");for(var lb=Array(256),mb=0;256>mb;++mb)lb[mb]=String.fromCharCode(mb);Sa=lb;Ta=f.BindingError=Oa("BindingError");f.count_emval_handles=function(){for(var a=0,b=5;b<S.length;++b)void 0!==S[b]&&++a;return a};
+f.get_first_emval=function(){for(var a=5;a<S.length;++a)if(void 0!==S[a])return S[a];return null};cb=f.UnboundTypeError=Oa("UnboundTypeError");
+var vb={a:function(a,b,c,d){x("Assertion failed: "+B(a)+", at: "+[b?B(b):"unknown filename",c,d?B(d):"unknown function"])},D:function(a){return nb(a+16)+16},R:function(){},z:function(a,b,c){(new Ea(a)).oa(b,c);Fa++;throw a;},s:function(){return 0},H:function(){return 0},I:function(){},P:function(a){var b=Ia[a];delete Ia[a];var c=b.pa,d=b.qa,e=b.ha,g=e.map(function(k){return k.ma}).concat(e.map(function(k){return k.xa}));Qa([a],g,function(k){var h={};e.forEach(function(l,m){var n=k[m],q=l.ka,y=l.la,
+z=k[m+e.length],p=l.wa,fa=l.ya;h[l.ja]={read:function(A){return n.fromWireType(q(y,A))},write:function(A,G){var X=[];p(fa,A,z.toWireType(X,G));Ja(X)}}});return[{name:b.name,fromWireType:function(l){var m={},n;for(n in h)m[n]=h[n].read(l);d(l);return m},toWireType:function(l,m){for(var n in h)if(!(n in m))throw new TypeError('Missing field:  "'+n+'"');var q=c();for(n in h)h[n].write(q,m[n]);null!==l&&l.push(d,q);return q},argPackAdvance:8,readValueFromPointer:Ka,da:d}]})},B:function(){},L:function(a,
+b,c,d,e){var g=Ra(c);b=Q(b);P(a,{name:b,fromWireType:function(k){return!!k},toWireType:function(k,h){return h?d:e},argPackAdvance:8,readValueFromPointer:function(k){if(1===c)var h=H;else if(2===c)h=E;else if(4===c)h=F;else throw new TypeError("Unknown boolean type size: "+b);return this.fromWireType(h[k>>g])},da:null})},K:function(a,b){b=Q(b);P(a,{name:b,fromWireType:function(c){var d=S[c].value;Va(c);return d},toWireType:function(c,d){return T(d)},argPackAdvance:8,readValueFromPointer:Ka,da:null})},
+u:function(a,b,c){c=Ra(c);b=Q(b);P(a,{name:b,fromWireType:function(d){return d},toWireType:function(d,e){if("number"!==typeof e&&"boolean"!==typeof e)throw new TypeError('Cannot convert "'+Wa(e)+'" to '+this.name);return e},argPackAdvance:8,readValueFromPointer:Xa(b,c),da:null})},O:function(a,b,c,d,e,g){var k=ab(b,c);a=Q(a);e=U(d,e);$a(a,function(){fb("Cannot call "+a+" due to unbound types",k)},b-1);Qa([],k,function(h){var l=a,m=a;h=[h[0],null].concat(h.slice(1));var n=e,q=h.length;2>q&&R("argTypes array size mismatch! Must at least get return value and 'this' types!");
+for(var y=null!==h[1]&&!1,z=!1,p=1;p<h.length;++p)if(null!==h[p]&&void 0===h[p].da){z=!0;break}var fa="void"!==h[0].name,A="",G="";for(p=0;p<q-2;++p)A+=(0!==p?", ":"")+"arg"+p,G+=(0!==p?", ":"")+"arg"+p+"Wired";m="return function "+Ma(m)+"("+A+") {\nif (arguments.length !== "+(q-2)+") {\nthrowBindingError('function "+m+" called with ' + arguments.length + ' arguments, expected "+(q-2)+" args!');\n}\n";z&&(m+="var destructors = [];\n");var X=z?"destructors":"null";A="throwBindingError invoker fn runDestructors retType classParam".split(" ");
+n=[R,n,g,Ja,h[0],h[1]];y&&(m+="var thisWired = classParam.toWireType("+X+", this);\n");for(p=0;p<q-2;++p)m+="var arg"+p+"Wired = argType"+p+".toWireType("+X+", arg"+p+"); // "+h[p+2].name+"\n",A.push("argType"+p),n.push(h[p+2]);y&&(G="thisWired"+(0<G.length?", ":"")+G);m+=(fa?"var rv = ":"")+"invoker(fn"+(0<G.length?", ":"")+G+");\n";if(z)m+="runDestructors(destructors);\n";else for(p=y?1:2;p<h.length;++p)q=1===p?"thisWired":"arg"+(p-2)+"Wired",null!==h[p].da&&(m+=q+"_dtor("+q+"); // "+h[p].name+
+"\n",A.push(q+"_dtor"),n.push(h[p].da));fa&&(m+="var ret = retType.fromWireType(rv);\nreturn ret;\n");A.push(m+"}\n");h=Ya(A).apply(null,n);p=b-1;if(!f.hasOwnProperty(l))throw new Pa("Replacing nonexistant public symbol");void 0!==f[l].ca&&void 0!==p?f[l].ca[p]=h:(f[l]=h,f[l].ia=p);return[]})},j:function(a,b,c,d,e){function g(m){return m}b=Q(b);-1===e&&(e=4294967295);var k=Ra(c);if(0===d){var h=32-8*c;g=function(m){return m<<h>>>h}}var l=b.includes("unsigned");P(a,{name:b,fromWireType:g,toWireType:function(m,
+n){if("number"!==typeof n&&"boolean"!==typeof n)throw new TypeError('Cannot convert "'+Wa(n)+'" to '+this.name);if(n<d||n>e)throw new TypeError('Passing a number "'+Wa(n)+'" from JS side to C/C++ side to an argument of type "'+b+'", which is outside the valid range ['+d+", "+e+"]!");return l?n>>>0:n|0},argPackAdvance:8,readValueFromPointer:gb(b,k,0!==d),da:null})},i:function(a,b,c){function d(g){g>>=2;var k=I;return new e(sa,k[g+1],k[g])}var e=[Int8Array,Uint8Array,Int16Array,Uint16Array,Int32Array,
+Uint32Array,Float32Array,Float64Array][b];c=Q(c);P(a,{name:c,fromWireType:d,argPackAdvance:8,readValueFromPointer:d},{na:!0})},v:function(a,b){b=Q(b);var c="std::string"===b;P(a,{name:b,fromWireType:function(d){var e=I[d>>2];if(c)for(var g=d+4,k=0;k<=e;++k){var h=d+4+k;if(k==e||0==C[h]){g=B(g,h-g);if(void 0===l)var l=g;else l+=String.fromCharCode(0),l+=g;g=h+1}}else{l=Array(e);for(k=0;k<e;++k)l[k]=String.fromCharCode(C[d+4+k]);l=l.join("")}V(d);return l},toWireType:function(d,e){e instanceof ArrayBuffer&&
+(e=new Uint8Array(e));var g="string"===typeof e;g||e instanceof Uint8Array||e instanceof Uint8ClampedArray||e instanceof Int8Array||R("Cannot pass non-string to std::string");var k=(c&&g?function(){for(var m=0,n=0;n<e.length;++n){var q=e.charCodeAt(n);55296<=q&&57343>=q&&(q=65536+((q&1023)<<10)|e.charCodeAt(++n)&1023);127>=q?++m:m=2047>=q?m+2:65535>=q?m+3:m+4}return m}:function(){return e.length})(),h=nb(4+k+1);I[h>>2]=k;if(c&&g)ka(e,h+4,k+1);else if(g)for(g=0;g<k;++g){var l=e.charCodeAt(g);255<l&&
+(V(h),R("String has UTF-16 code units that do not fit in 8 bits"));C[h+4+g]=l}else for(g=0;g<k;++g)C[h+4+g]=e[g];null!==d&&d.push(V,h);return h},argPackAdvance:8,readValueFromPointer:Ka,da:function(d){V(d)}})},p:function(a,b,c){c=Q(c);if(2===b){var d=ma;var e=na;var g=oa;var k=function(){return D};var h=1}else 4===b&&(d=pa,e=qa,g=ra,k=function(){return I},h=2);P(a,{name:c,fromWireType:function(l){for(var m=I[l>>2],n=k(),q,y=l+4,z=0;z<=m;++z){var p=l+4+z*b;if(z==m||0==n[p>>h])y=d(y,p-y),void 0===q?
+q=y:(q+=String.fromCharCode(0),q+=y),y=p+b}V(l);return q},toWireType:function(l,m){"string"!==typeof m&&R("Cannot pass non-string to C++ string type "+c);var n=g(m),q=nb(4+n+b);I[q>>2]=n>>h;e(m,q+4,n+b);null!==l&&l.push(V,q);return q},argPackAdvance:8,readValueFromPointer:Ka,da:function(l){V(l)}})},Q:function(a,b,c,d,e,g){Ia[a]={name:Q(b),pa:U(c,d),qa:U(e,g),ha:[]}},k:function(a,b,c,d,e,g,k,h,l,m){Ia[a].ha.push({ja:Q(b),ma:c,ka:U(d,e),la:g,xa:k,wa:U(h,l),ya:m})},M:function(a,b){b=Q(b);P(a,{Ca:!0,
+name:b,argPackAdvance:0,fromWireType:function(){},toWireType:function(){}})},m:Va,y:function(a){if(0===a)return T(ib());var b=hb[a];a=void 0===b?Q(a):b;return T(ib()[a])},N:function(a){4<a&&(S[a].ga+=1)},w:function(a,b,c,d){a||R("Cannot use deleted val. handle = "+a);a=S[a].value;var e=kb[b];if(!e){e="";for(var g=0;g<b;++g)e+=(0!==g?", ":"")+"arg"+g;var k="return function emval_allocator_"+b+"(constructor, argTypes, args) {\n";for(g=0;g<b;++g)k+="var argType"+g+" = requireRegisteredType(Module['HEAP32'][(argTypes >>> 2) + "+
+g+'], "parameter '+g+'");\nvar arg'+g+" = argType"+g+".readValueFromPointer(args);\nargs += argType"+g+"['argPackAdvance'];\n";e=(new Function("requireRegisteredType","Module","__emval_register",k+("var obj = new constructor("+e+");\nreturn __emval_register(obj);\n}\n")))(jb,f,T);kb[b]=e}return e(a,c,d)},x:function(a,b){a=jb(a,"_emval_take_value");a=a.readValueFromPointer(b);return T(a)},e:function(){x()},h:function(a,b){W(a,b||1);throw"longjmp";},E:function(a,b,c){C.copyWithin(a,b,b+c)},o:function(a){var b=
+C.length;a>>>=0;if(2147483648<a)return!1;for(var c=1;4>=c;c*=2){var d=b*(1+.2/c);d=Math.min(d,a+100663296);d=Math.max(a,d);0<d%65536&&(d+=65536-d%65536);a:{try{ha.grow(Math.min(2147483648,d)-sa.byteLength+65535>>>16);va();var e=1;break a}catch(g){}e=void 0}if(e)return!0}return!1},t:function(){return 0},G:function(a,b,c,d){a=Ha.Ba(a);b=Ha.za(a,b,c);F[d>>2]=b;return 0},A:function(){},J:function(a,b,c,d){for(var e=0,g=0;g<c;g++){for(var k=F[b+8*g>>2],h=F[b+(8*g+4)>>2],l=0;l<h;l++){var m=C[k+l],n=Ga[a];
+if(0===m||10===m){for(m=0;n[m]&&!(NaN<=m);)++m;m=ja.decode(n.subarray?n.subarray(0,m):new Uint8Array(n.slice(0,m)));(1===a?da:v)(m);n.length=0}else n.push(m)}e+=h}F[d>>2]=e;return 0},c:function(){return ea},g:function(a){var b=Date.now();F[a>>2]=b/1E3|0;F[a+4>>2]=b%1E3*1E3|0;return 0},l:ob,f:pb,r:qb,q:rb,n:sb,d:tb,C:ub,F:function(){return 28},b:function(a){ea=a}};
+(function(){function a(e){f.asm=e.exports;ha=f.asm.S;va();J=f.asm.$;xa.unshift(f.asm.T);K--;f.monitorRunDependencies&&f.monitorRunDependencies(K);0==K&&(null!==Aa&&(clearInterval(Aa),Aa=null),L&&(e=L,L=null,e()))}function b(e){a(e.instance)}function c(e){return Ca().then(function(g){return WebAssembly.instantiate(g,d)}).then(e,function(g){v("failed to asynchronously prepare wasm: "+g);x(g)})}var d={a:vb};K++;f.monitorRunDependencies&&f.monitorRunDependencies(K);if(f.instantiateWasm)try{return f.instantiateWasm(d,
+a)}catch(e){return v("Module.instantiateWasm callback failed with error: "+e),!1}(function(){return w||"function"!==typeof WebAssembly.instantiateStreaming||M.startsWith("data:application/octet-stream;base64,")||"function"!==typeof fetch?c(b):fetch(M,{credentials:"same-origin"}).then(function(e){return WebAssembly.instantiateStreaming(e,d).then(b,function(g){v("wasm streaming compile failed: "+g);v("falling back to ArrayBuffer instantiation");return c(b)})})})().catch(ba);return{}})();
+f.___wasm_call_ctors=function(){return(f.___wasm_call_ctors=f.asm.T).apply(null,arguments)};var nb=f._malloc=function(){return(nb=f._malloc=f.asm.U).apply(null,arguments)},V=f._free=function(){return(V=f._free=f.asm.V).apply(null,arguments)},eb=f.___getTypeName=function(){return(eb=f.___getTypeName=f.asm.W).apply(null,arguments)};f.___embind_register_native_and_builtin_types=function(){return(f.___embind_register_native_and_builtin_types=f.asm.X).apply(null,arguments)};
+var Y=f.stackSave=function(){return(Y=f.stackSave=f.asm.Y).apply(null,arguments)},Z=f.stackRestore=function(){return(Z=f.stackRestore=f.asm.Z).apply(null,arguments)},W=f._setThrew=function(){return(W=f._setThrew=f.asm._).apply(null,arguments)};f.dynCall_jiiii=function(){return(f.dynCall_jiiii=f.asm.aa).apply(null,arguments)};f.dynCall_jiji=function(){return(f.dynCall_jiji=f.asm.ba).apply(null,arguments)};
+function tb(a,b,c){var d=Y();try{J.get(a)(b,c)}catch(e){Z(d);if(e!==e+0&&"longjmp"!==e)throw e;W(1,0)}}function sb(a,b){var c=Y();try{J.get(a)(b)}catch(d){Z(c);if(d!==d+0&&"longjmp"!==d)throw d;W(1,0)}}function qb(a,b,c,d){var e=Y();try{return J.get(a)(b,c,d)}catch(g){Z(e);if(g!==g+0&&"longjmp"!==g)throw g;W(1,0)}}function pb(a,b,c){var d=Y();try{return J.get(a)(b,c)}catch(e){Z(d);if(e!==e+0&&"longjmp"!==e)throw e;W(1,0)}}
+function ob(a,b){var c=Y();try{return J.get(a)(b)}catch(d){Z(c);if(d!==d+0&&"longjmp"!==d)throw d;W(1,0)}}function rb(a,b,c,d,e,g){var k=Y();try{return J.get(a)(b,c,d,e,g)}catch(h){Z(k);if(h!==h+0&&"longjmp"!==h)throw h;W(1,0)}}function ub(a,b,c,d,e){var g=Y();try{J.get(a)(b,c,d,e)}catch(k){Z(g);if(k!==k+0&&"longjmp"!==k)throw k;W(1,0)}}var wb;L=function xb(){wb||yb();wb||(L=xb)};
+function yb(){function a(){if(!wb&&(wb=!0,f.calledRun=!0,!ia)){Da(xa);aa(f);if(f.onRuntimeInitialized)f.onRuntimeInitialized();if(f.postRun)for("function"==typeof f.postRun&&(f.postRun=[f.postRun]);f.postRun.length;){var b=f.postRun.shift();ya.unshift(b)}Da(ya)}}if(!(0<K)){if(f.preRun)for("function"==typeof f.preRun&&(f.preRun=[f.preRun]);f.preRun.length;)za();Da(wa);0<K||(f.setStatus?(f.setStatus("Running..."),setTimeout(function(){setTimeout(function(){f.setStatus("")},1);a()},1)):a())}}f.run=yb;
+if(f.preInit)for("function"==typeof f.preInit&&(f.preInit=[f.preInit]);0<f.preInit.length;)f.preInit.pop()();yb();
+
+
+  return Module.ready
+}
+);
+})();
+export default Module;

codecs/basis/package.json

@@ -0,0 +1,6 @@
+{
+  "type": "module",
+  "scripts": {
+    "build": "../build-cpp.sh"
+  }
+}

codecs/jxl/Makefile

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

codecs/jxl/enc/jxl_enc.cpp

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

codecs/jxl/enc/jxl_enc.d.ts

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

lib/data-url-plugin.js

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

lib/omt.ejs

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

libsquoosh/README.md

@@ -1,7 +1,3 @@
-# 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.
@@ -20,25 +16,21 @@ You can start using the libSquoosh by adding these lines to the top of your JS p
 
 ```js
 import { ImagePool } from '@squoosh/lib';
-import { cpus } from 'os';
-const imagePool = new ImagePool(cpus().length);
+const imagePool = new ImagePool();
 ```
 
-This will create an image pool with an underlying processing pipeline that you can use to ingest and encode images. The ImagePool constructor takes one argument that defines how many parallel operations it is allowed to run at any given time.
-
-: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.
+This will create an image pool with an underlying processing pipeline that you can use to ingest and encode images. The ImagePool constructor takes one argument that defines how many parallel operations it is allowed to run at any given time. By default, this number is set to the amount of CPU cores available in the system it is running on.
 
 ## Ingesting images
 
 You can ingest a new image like so:
 
 ```js
-import fs from 'fs/promises';
-const file = await fs.readFile('./path/to/image.png');
-const image = imagePool.ingestImage(file);
+const imagePath = 'path/to/image.png';
+const image = imagePool.ingestImage(imagePath);
 ```
 
-The `ingestImage` function can accept any [`ArrayBuffer`][arraybuffer] whether that is from `readFile()` or `fetch()`.
+The `ingestImage` function can take anything the node [`readFile`][readfile] function can take, including a buffer and `FileHandle`.
 
 The returned `image` object is a representation of the original image, that you can now preprocess, encode, and extract information about.
 
@@ -47,19 +39,23 @@ 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 = {
@@ -67,8 +63,9 @@ const encodeOptions = {
   jxl: {
     quality: 90,
   },
-};
-const result = await image.encode(encodeOptions);
+}
+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._
@@ -92,7 +89,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 = image.encodedWith.mozjpeg.binary;
+const rawEncodedImage = (await image.encodedWith.mozjpeg).binary;
 
 fs.writeFile('/path/to/new/image.jpg', rawEncodedImage);
 ```
@@ -103,7 +100,10 @@ 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 + encodedImage.extension, encodedImage.binary);
+  fs.writeFile(
+    newImagePath + (await encodedImage).extension,
+    (await 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(image.encodedWith.jxl);
+console.log(await 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
-[arraybuffer]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer
+[readfile]: https://nodejs.org/api/fs.html#fs_fspromises_readfile_path_options

libsquoosh/lib/move-d-ts.js

@@ -1,26 +0,0 @@
-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.5.2",
+  "version": "0.4.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@squoosh/lib",
-      "version": "0.5.2",
+      "version": "0.4.0",
       "license": "Apache-2.0",
       "dependencies": {
         "wasm-feature-detect": "^1.2.11",

libsquoosh/package.json

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

libsquoosh/src/codecs.ts

@@ -29,23 +29,14 @@ interface ResizeWithAspectParams {
   target_height: number;
 }
 
-export interface ResizeOptions {
+interface ResizeInstantiateOptions {
   width: number;
   height: number;
-  method: 'triangle' | 'catrom' | 'mitchell' | 'lanczos3';
+  method: string;
   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;
@@ -61,7 +52,6 @@ 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';
@@ -69,7 +59,6 @@ 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';
@@ -80,7 +69,6 @@ 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';
@@ -88,7 +76,6 @@ 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';
@@ -96,7 +83,6 @@ 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';
@@ -109,9 +95,6 @@ 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';
@@ -188,7 +171,13 @@ export const preprocessors = {
         buffer: Uint8Array,
         input_width: number,
         input_height: number,
-        { width, height, method, premultiply, linearRGB }: ResizeOptions,
+        {
+          width,
+          height,
+          method,
+          premultiply,
+          linearRGB,
+        }: ResizeInstantiateOptions,
       ) => {
         ({ width, height } = resizeWithAspect({
           input_width,
@@ -229,7 +218,7 @@ export const preprocessors = {
         buffer: Uint8Array,
         width: number,
         height: number,
-        { numColors, dither }: QuantOptions,
+        { numColors, dither }: { numColors: number; dither: number },
       ) =>
         new ImageData(
           imageQuant.quantize(buffer, width, height, numColors, dither),
@@ -250,7 +239,7 @@ export const preprocessors = {
         buffer: Uint8Array,
         width: number,
         height: number,
-        { numRotations }: RotateOptions,
+        { numRotations }: { numRotations: number },
       ) => {
         const degrees = (numRotations * 90) % 360;
         const sameDimensions = degrees == 0 || degrees == 180;
@@ -412,14 +401,13 @@ export const codecs = {
         jxlEncWasm,
       ),
     defaultEncoderOptions: {
-      effort: 1,
+      speed: 4,
       quality: 75,
       progressive: false,
       epf: -1,
+      nearLossless: 0,
       lossyPalette: false,
       decodingSpeedTier: 0,
-      photonNoiseIso: 0,
-      lossyModular: false,
     },
     autoOptimize: {
       option: 'quality',
@@ -492,12 +480,3 @@ 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 pathify(workerJS);
+      if (requestPath.endsWith('.worker.js')) return new URL(workerJS).pathname;
       return requestPath;
     },
   });

libsquoosh/src/index.ts

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

libsquoosh/tsconfig.json

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

missing-types.d.ts

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

package-lock.json

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

package.json

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

src/client/initial-app/index.tsx

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

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

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

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

@@ -20,7 +20,3 @@
 .checked {
   fill: var(--main-theme-color);
 }
-
-.disabled {
-  fill: var(--dark-gray);
-}

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

@@ -20,7 +20,7 @@ const REFLECTED_ATTRIBUTES = [
   'disabled',
 ];
 
-function getPrecision(value: string): number {
+function getPrescision(value: string): number {
   const afterDecimal = value.split('.')[1];
   return afterDecimal ? afterDecimal.length : 0;
 }
@@ -112,14 +112,13 @@ class RangeInputElement extends HTMLElement {
     this.dispatchEvent(retargetted);
   };
 
-  private _getDisplayValue(value: number): string {
-    if (value >= 10000) return (value / 1000).toFixed(1) + 'k';
-
+  private _formatDisplayValue(value: number): string {
     const labelPrecision =
-      Number(this.labelPrecision) || getPrecision(this.step) || 0;
-    return labelPrecision
-      ? value.toFixed(labelPrecision)
-      : Math.round(value).toString();
+      Number(this.labelPrecision) || getPrescision(this.step) || 0;
+    if (labelPrecision) {
+      return value.toFixed(labelPrecision);
+    }
+    return Math.round(value).toString();
   }
 
   private _update = () => {
@@ -129,7 +128,7 @@ class RangeInputElement extends HTMLElement {
     const min = Number(this.min) || 0;
     const max = Number(this.max) || 100;
     const percent = (100 * (value - min)) / (max - min);
-    const displayValue = this._getDisplayValue(value);
+    const displayValue = this._formatDisplayValue(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: 54px;
+  width: 48px;
   position: relative;
   left: 5px;
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -10,12 +10,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { drawableToImageData } from './canvas';
 
-/** If render engine is Safari */
-export const isSafari =
-  /Safari\//.test(navigator.userAgent) &&
-  !/Chrom(e|ium)\//.test(navigator.userAgent);
+import * as WebCodecs from '../util/web-codecs';
+import { drawableToImageData } from './canvas';
 
 /**
  * Compare two objects, returning a boolean indicating if
@@ -103,6 +100,7 @@ const magicNumberMapInput = [
   [/^\x00\x00\x00 ftypavif\x00\x00\x00\x00/, 'image/avif'],
   [/^\xff\x0a/, 'image/jxl'],
   [/^\x00\x00\x00\x0cJXL \x0d\x0a\x87\x0a/, 'image/jxl'],
+  [/^«KTX 20»\r\n/, 'image/ktx2'],
 ] as const;
 
 export type ImageMimeTypes = typeof magicNumberMapInput[number][1];
@@ -137,7 +135,15 @@ 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.
@@ -290,3 +296,16 @@ export async function abortable<T>(
     }),
   ]);
 }
+
+/**
+ * Clamp a value `v` between `min` and `max`.
+ */
+export function clamp(min: number, v: number, max: number): number {
+  if (v < min) {
+    return min;
+  }
+  if (v > max) {
+    return max;
+  }
+  return v;
+}

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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,60 @@
+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/decoders/basis/worker/basisDecode.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { BasisModule } from 'codecs/basis/dec/basis_dec';
+import { initEmscriptenModule, blobToArrayBuffer } from 'features/worker-utils';
+
+let emscriptenModule: Promise<BasisModule>;
+
+export default async function decode(blob: Blob): Promise<ImageData> {
+  if (!emscriptenModule) {
+    const decoder = await import('codecs/basis/dec/basis_dec');
+    emscriptenModule = initEmscriptenModule(decoder.default);
+  }
+
+  const [module, data] = await Promise.all([
+    emscriptenModule,
+    blobToArrayBuffer(blob),
+  ]);
+
+  const result = module.decode(data);
+  if (!result) throw new Error('Decoding error');
+  return result;
+}

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

@@ -0,0 +1,214 @@
+import { EncodeOptions, defaultOptions } from '../shared/meta';
+import type WorkerBridge from 'client/lazy-app/worker-bridge';
+import { h, Component, Fragment } from 'preact';
+import {
+  inputFieldChecked,
+  inputFieldValueAsNumber,
+  preventDefault,
+  clamp,
+} from 'client/lazy-app/util';
+import * as style from 'client/lazy-app/Compress/Options/style.css';
+import linkState from 'linkstate';
+import Range from 'client/lazy-app/Compress/Options/Range';
+import Checkbox from 'client/lazy-app/Compress/Options/Checkbox';
+import Expander from 'client/lazy-app/Compress/Options/Expander';
+import Select from 'client/lazy-app/Compress/Options/Select';
+import Revealer from 'client/lazy-app/Compress/Options/Revealer';
+
+export function encode(
+  signal: AbortSignal,
+  workerBridge: WorkerBridge,
+  imageData: ImageData,
+  options: EncodeOptions,
+) {
+  return workerBridge.basisEncode(signal, imageData, options);
+}
+
+interface Props {
+  options: EncodeOptions;
+  onChange(newOptions: EncodeOptions): void;
+}
+
+interface State {
+  showAdvanced: boolean;
+}
+
+export class Options extends Component<Props, State> {
+  state: State = {
+    showAdvanced: false,
+  };
+
+  onChange = (event: Event) => {
+    const form = (event.currentTarget as HTMLInputElement).closest(
+      'form',
+    ) as HTMLFormElement;
+    const { options } = this.props;
+
+    const uastc = form.mode.value === '1';
+    let quality = inputFieldValueAsNumber(form.quality, options.quality);
+    if (uastc) {
+      quality = clamp(0, quality, 4);
+    } else {
+      quality = Math.floor(clamp(0, quality, 255));
+    }
+
+    const newOptions: EncodeOptions = {
+      ...this.props.options,
+      uastc,
+      quality,
+      y_flip: inputFieldChecked(form.y_flip, options.y_flip),
+      perceptual: inputFieldChecked(form.perceptual, options.perceptual),
+      mipmap: inputFieldChecked(form.mipmap, options.mipmap),
+      srgb_mipmap: inputFieldChecked(form.srgb_mipmap, options.srgb_mipmap),
+      mipmap_filter: form.mipmap_filter?.value ?? defaultOptions.mipmap_filter,
+      // FIXME: We really should support range remapping
+      // in the range-slider component. For now I’ll
+      // shoe-horn it into the state management.
+      mipmap_min_dimension:
+        2 **
+        inputFieldValueAsNumber(
+          form.mipmap_min_dimension,
+          Math.floor(Math.log2(options.mipmap_min_dimension)),
+        ),
+      compression: inputFieldValueAsNumber(
+        form.compression,
+        options.compression,
+      ),
+    };
+    this.props.onChange(newOptions);
+  };
+
+  render({ options }: Props, { showAdvanced }: State) {
+    return (
+      <form class={style.optionsSection} onSubmit={preventDefault}>
+        <label class={style.optionTextFirst}>
+          Mode:
+          <Select
+            name="mode"
+            value={options.uastc ? '1' : '0'}
+            onChange={this.onChange}
+          >
+            <option value="0">Compression (ETC1S)</option>
+            <option value="1">Quality (UASTC)</option>
+          </Select>
+        </label>
+        <div class={style.optionOneCell}>
+          <Range
+            name="quality"
+            min={options.uastc ? '0' : '1'}
+            max={options.uastc ? '4' : '255'}
+            step={options.uastc ? '0.1' : '1'}
+            value={options.quality}
+            onInput={this.onChange}
+          >
+            Quality:
+          </Range>
+        </div>
+        <div class={style.optionOneCell}>
+          <Range
+            name="compression"
+            min="0"
+            max="4"
+            value={options.compression}
+            onInput={this.onChange}
+          >
+            Compression:
+          </Range>
+        </div>
+        <label class={style.optionToggle}>
+          Flip Y Axis
+          <Checkbox
+            name="y_flip"
+            checked={options.y_flip}
+            onChange={this.onChange}
+          />
+        </label>
+        <label class={style.optionReveal}>
+          <Revealer
+            checked={showAdvanced}
+            onChange={linkState(this, 'showAdvanced')}
+          />
+          Advanced settings
+        </label>
+        <Expander>
+          {showAdvanced ? (
+            <div>
+              <label class={style.optionToggle}>
+                Perceptual distance metric
+                <Checkbox
+                  name="perceptual"
+                  checked={options.perceptual}
+                  onChange={this.onChange}
+                />
+              </label>
+              <label class={style.optionToggle}>
+                Embed Mipmaps
+                <Checkbox
+                  name="mipmap"
+                  checked={options.mipmap}
+                  onChange={this.onChange}
+                />
+              </label>
+              <Expander>
+                {options.mipmap ? (
+                  <Fragment>
+                    <div class={style.optionOneCell}>
+                      <Range
+                        min="0"
+                        max="10"
+                        name="mipmap_min_dimension"
+                        value={Math.floor(
+                          Math.log2(options.mipmap_min_dimension),
+                        )}
+                        onInput={this.onChange}
+                      >
+                        Log2 of smallest mipmap:
+                      </Range>
+                    </div>
+                    <label class={style.optionTextFirst}>
+                      Resampling filter:
+                      <Select
+                        name="mipmap_filter"
+                        value={options.mipmap_filter}
+                        onChange={this.onChange}
+                      >
+                        <option value="box">Box</option>
+                        <option value="tent">Tent</option>
+                        <option value="bell">Bell</option>
+                        <option value="b-spline">B-Spline</option>
+                        <option value="mitchell">Mitchell</option>
+                        <option value="blackman">Blackman</option>
+                        <option value="lanczos3">Lanczos3</option>
+                        <option value="lanczos4">Lanczos4</option>
+                        <option value="lanczos6">Lanczos6</option>
+                        <option value="lanczos12">Lanczos12</option>
+                        <option value="kaiser">Kaiser</option>
+                        <option value="gaussian">Gaussian</option>
+                        <option value="catmullrom">Catmullrom</option>
+                        <option value="quadratic_interp">
+                          Quadratic Interpolation
+                        </option>
+                        <option value="quadratic_approx">
+                          Quadratic Approx
+                        </option>
+                        <option value="quadratic_mix">Quadratic Mix</option>
+                      </Select>
+                    </label>
+                    <label class={style.optionToggle}>
+                      sRGB Mipmapping
+                      <Checkbox
+                        name="srgb_mipmap"
+                        checked={options.srgb_mipmap}
+                        onChange={this.onChange}
+                      />
+                    </label>
+                  </Fragment>
+                ) : null}
+              </Expander>
+            </div>
+          ) : null}
+        </Expander>
+      </form>
+    );
+  }
+}

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

@@ -0,0 +1,30 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { EncodeOptions } from 'codecs/basis/enc/basis_enc';
+
+export { EncodeOptions };
+
+export const label = 'KTX2 (Basis Universal)';
+export const mimeType = 'image/ktx2';
+export const extension = 'ktx2';
+export const defaultOptions: EncodeOptions = {
+  quality: 128,
+  compression: 2,
+  uastc: false,
+  mipmap: false,
+  srgb_mipmap: false,
+  perceptual: true,
+  y_flip: false,
+  mipmap_filter: 'kaiser',
+  mipmap_min_dimension: 1,
+};

src/features/encoders/basis/shared/missing-types.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/// <reference path="../../../../../missing-types.d.ts" />

src/features/encoders/basis/worker/basisEncode.ts

@@ -0,0 +1,36 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { BasisModule } from 'codecs/basis/enc/basis_enc';
+import type { EncodeOptions } from '../shared/meta';
+import { initEmscriptenModule } from 'features/worker-utils';
+
+let emscriptenModule: Promise<BasisModule>;
+
+async function init() {
+  const basisEncoder = await import('codecs/basis/enc/basis_enc.js');
+  return initEmscriptenModule(basisEncoder.default);
+}
+
+export default async function encode(
+  data: ImageData,
+  options: EncodeOptions,
+): Promise<ArrayBuffer> {
+  if (!emscriptenModule) emscriptenModule = init();
+
+  const module = await emscriptenModule;
+  const result = module.encode(data.data, data.width, data.height, options);
+
+  if (!result) throw new Error('Encoding error');
+
+  return result.buffer;
+}

src/features/encoders/basis/worker/missing-types.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/// <reference path="../../../../../missing-types.d.ts" />

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: options.effort,
+      effort: maxSpeed - options.speed,
       quality: options.quality,
       progressive: options.progressive,
       edgePreservingFilter: options.epf === -1 ? 2 : options.epf,
@@ -55,8 +55,6 @@ export class Options extends Component<Props, State> {
       slightLoss: options.lossyPalette,
       autoEdgePreservingFilter: options.epf === -1,
       decodingSpeedTier: options.decodingSpeedTier,
-      photonNoiseIso: options.photonNoiseIso,
-      alternativeLossy: options.lossyModular,
     };
   }
 
@@ -89,16 +87,15 @@ export class Options extends Component<Props, State> {
         };
 
         const newOptions: EncodeOptions = {
-          effort: optionState.effort,
+          speed: maxSpeed - optionState.effort,
           quality: optionState.lossless ? 100 : optionState.quality,
           progressive: optionState.progressive,
           epf: optionState.autoEdgePreservingFilter
             ? -1
             : optionState.edgePreservingFilter,
+          nearLossless: 0,
           lossyPalette: optionState.lossless ? optionState.slightLoss : false,
           decodingSpeedTier: optionState.decodingSpeedTier,
-          photonNoiseIso: optionState.photonNoiseIso,
-          lossyModular: optionState.quality < 7 ? true : optionState.alternativeLossy,
         };
 
         // Updating options, so we don't recalculate in getDerivedStateFromProps.
@@ -124,8 +121,6 @@ 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
@@ -166,17 +161,10 @@ 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',
@@ -211,17 +199,6 @@ export class Options extends Component<Props, State> {
                   Optimise for decoding speed (worse compression):
                 </Range>
               </div>
-              <div class={style.optionOneCell}>
-                <Range
-                  min="0"
-                  max="50000"
-                  step="100"
-                  value={photonNoiseIso}
-                  onInput={this._inputChange('photonNoiseIso', 'number')}
-                >
-                  Noise equivalent to ISO:
-                </Range>
-              </div>
             </div>
           )}
         </Expander>
@@ -235,8 +212,8 @@ export class Options extends Component<Props, State> {
         </label>
         <div class={style.optionOneCell}>
           <Range
-            min="1"
-            max="9"
+            min="0"
+            max={maxSpeed - 1}
             value={effort}
             onInput={this._inputChange('effort', 'number')}
           >

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

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

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

@@ -14,11 +14,9 @@ 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,3 +13,24 @@
 /// <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 'data-url-text:./imgs/logo-with-text.svg';
+import logoWithText from 'url:./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,6 +30,11 @@ interface WindowEventMap {
   beforeinstallprompt: BeforeInstallPromptEvent;
 }
 
+interface ClipboardItem {
+  types: string[];
+  getType(type: string): Promise<Blob>;
+}
+
 interface Clipboard {
   read(): Promise<ClipboardItem[]>;
 }

src/static-build/index.tsx

@@ -19,39 +19,27 @@ 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';
 
-interface Dimensions {
-  width: number;
-  height: number;
-}
+const manifestSize = ({ width, height }: { width: number; height: number }) =>
+  `${width}x${height}`;
 
-const manifestSize = ({ width, height }: Dimensions) => `${width}x${height}`;
-const formFactor = ({ width, height }: Dimensions) =>
-  width > height ? 'wide' : 'narrow';
+// Set by Netlify
+const branch = process.env.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),
-}));
+const branchOriginTrialIds = new Map([
+  [
+    'live',
+    'Aj5GY7W9AHM8di+yvMCajIhLRHoYN7slruwOYXE/Iub5hgmW/r2RQt07vrUuT4eUTkWxcyNCAVkiI+5ugdVW3gAAAABUeyJvcmlnaW4iOiJodHRwczovL3NxdW9vc2guYXBwOjQ0MyIsImZlYXR1cmUiOiJXZWJBc3NlbWJseVNpbWQiLCJleHBpcnkiOjE2MjM4MDE1OTl9',
+  ],
+]);
+
+const originTrialId = branchOriginTrialIds.get(branch || '');
 
 interface Output {
   [outputPath: string]: string;
 }
-
 const toOutput: Output = {
   'index.html': renderPage(<IndexPage />),
   'manifest.json': JSON.stringify({
@@ -79,7 +67,23 @@ const toOutput: Output = {
       'Compress and compare images with different codecs, right in your browser.',
     lang: 'en',
     categories: ['photo', 'productivity', 'utilities'],
-    screenshots,
+    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),
+      },
+    ],
     share_target: {
       action: '/?utm_medium=PWA&utm_source=share-target&share-target',
       method: 'POST',
@@ -106,6 +110,15 @@ 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,7 +57,6 @@ 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,20 +82,24 @@ 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[] = [];