diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 00000000..2312dc58 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1 @@ +npx lint-staged diff --git a/lib/data-url-plugin.js b/lib/data-url-plugin.js index cf725d4d..34e9bec9 100644 --- a/lib/data-url-plugin.js +++ b/lib/data-url-plugin.js @@ -14,28 +14,40 @@ import { promises as fs } from 'fs'; import { lookup as lookupMime } from 'mime-types'; -const prefix = 'data-url:'; +const prefix = /^data-url(-text)?:/; export default function dataURLPlugin() { return { name: 'data-url-plugin', async resolveId(id, importer) { - if (!id.startsWith(prefix)) return; + const match = prefix.exec(id); + if (!match) return; return ( - prefix + (await this.resolve(id.slice(prefix.length), importer)).id + match[0] + (await this.resolve(id.slice(match[0].length), importer)).id ); }, async load(id) { - if (!id.startsWith(prefix)) return; - const realId = id.slice(prefix.length); + const match = prefix.exec(id); + if (!match) return; + + const isText = !!match[1]; + const realId = id.slice(match[0].length); this.addWatchFile(realId); const source = await fs.readFile(realId); const type = lookupMime(realId) || 'text/plain'; - return `export default 'data:${type};base64,${source.toString( - 'base64', - )}';`; + if (isText) { + const encodedBody = encodeURIComponent(source.toString('utf8')); + + return `export default ${JSON.stringify( + `data:${type};charset=utf-8,${encodedBody}`, + )};`; + } + + return `export default ${JSON.stringify( + `data:${type};base64,${source.toString('base64')}`, + )};`; }, }; } diff --git a/lib/entry-data-plugin.js b/lib/entry-data-plugin.js index f4bc86c5..d131e1ae 100644 --- a/lib/entry-data-plugin.js +++ b/lib/entry-data-plugin.js @@ -77,7 +77,9 @@ export default function entryDataPlugin() { } return JSON.stringify( - getDependencies(chunks, chunk).map((filename) => fileNameToURL(filename)), + getDependencies(chunks, chunk).map((filename) => + fileNameToURL(filename), + ), ); }, ); diff --git a/lib/omt.ejs b/lib/omt.ejs index 93c5a484..2fb71493 100644 --- a/lib/omt.ejs +++ b/lib/omt.ejs @@ -28,10 +28,17 @@ if (!self.<%- amdFunctionName %>) { <% } else { %> new Promise(resolve => { if ("document" in self) { - const script = document.createElement("script"); - script.src = uri; - script.onload = resolve; - document.head.appendChild(script); + const link = document.createElement("link"); + link.rel = "preload"; + link.as = "script"; + link.href = uri; + link.onload = () => { + const script = document.createElement("script"); + script.src = uri; + script.onload = resolve; + document.head.appendChild(script); + }; + document.head.appendChild(link); } else { self.nextDefineUri = uri; importScripts(uri); diff --git a/libsquoosh/README.md b/libsquoosh/README.md index 7f4dbb82..2c067efc 100644 --- a/libsquoosh/README.md +++ b/libsquoosh/README.md @@ -22,6 +22,8 @@ const imagePool = new ImagePool(cpus().length); This will create an image pool with an underlying processing pipeline that you can use to ingest and encode images. The ImagePool constructor takes one argument that defines how many parallel operations it is allowed to run at any given time. +:warning: Important! Make sure to only create 1 `ImagePool` when performing parallel image processing. If you create multiple pools, the `ImagePool` can run out of memory and crash. By reusing a single `ImagePool`, you can ensure that the backing worker queue and processing pipeline releases memory prior to processing the next image. + ## Ingesting images You can ingest a new image like so: diff --git a/libsquoosh/src/index.ts b/libsquoosh/src/index.ts index bfd3bac1..8ed7e01b 100644 --- a/libsquoosh/src/index.ts +++ b/libsquoosh/src/index.ts @@ -26,6 +26,20 @@ type PreprocessOptions = { quant?: QuantOptions; rotate?: RotateOptions; }; +type EncodeResult = { + optionsUsed: object; + binary: Uint8Array; + extension: string; + size: number; +}; +type EncoderOptions = { + mozjpeg?: Partial; + webp?: Partial; + avif?: Partial; + jxl?: Partial; + wp2?: Partial; + oxipng?: Partial; +}; async function decodeFile({ file, @@ -83,7 +97,7 @@ async function encodeImage({ encConfig: any; optimizerButteraugliTarget: number; maxOptimizerRounds: number; -}) { +}): Promise { let binary: Uint8Array; let optionsUsed = encConfig; const encoder = await encoders[encName].enc(); @@ -172,7 +186,7 @@ class Image { public file: ArrayBuffer | ArrayLike; public workerPool: WorkerPool; public decoded: Promise<{ bitmap: ImageData }>; - public encodedWith: { [key: string]: any }; + public encodedWith: { [key in EncoderKey]?: EncodeResult }; constructor( workerPool: WorkerPool, @@ -213,22 +227,16 @@ class Image { /** * Define one or several encoders to use on the image. * @param {object} encodeOptions - An object with encoders to use, and their settings. - * @returns {Promise} - A promise that resolves when the image has been encoded with all the specified encoders. + * @returns {Promise<{ [key in keyof T]: EncodeResult }>} - A promise that resolves when the image has been encoded with all the specified encoders. */ - async encode( + async encode( encodeOptions: { optimizerButteraugliTarget?: number; maxOptimizerRounds?: number; - } & { - mozjpeg?: Partial; - webp?: Partial; - avif?: Partial; - jxl?: Partial; - wp2?: Partial; - oxipng?: Partial; - } = {}, - ): Promise { + } & T, + ): Promise<{ [key in keyof T]: EncodeResult }> { const { bitmap } = await this.decoded; + const setEncodedWithPromises = []; for (const [name, options] of Object.entries(encodeOptions)) { if (!Object.keys(encoders).includes(name)) { continue; @@ -239,18 +247,26 @@ class Image { typeof options === 'string' ? options : Object.assign({}, encRef.defaultEncoderOptions, options); - this.encodedWith[encName] = this.workerPool.dispatchJob({ - operation: 'encode', - bitmap, - encName, - encConfig, - optimizerButteraugliTarget: Number( - encodeOptions.optimizerButteraugliTarget ?? 1.4, - ), - maxOptimizerRounds: Number(encodeOptions.maxOptimizerRounds ?? 6), - }); + setEncodedWithPromises.push( + this.workerPool + .dispatchJob({ + operation: 'encode', + bitmap, + encName, + encConfig, + optimizerButteraugliTarget: Number( + encodeOptions.optimizerButteraugliTarget ?? 1.4, + ), + maxOptimizerRounds: Number(encodeOptions.maxOptimizerRounds ?? 6), + }) + .then((encodeResult) => { + this.encodedWith[encName] = encodeResult; + }), + ); } - await Promise.all(Object.values(this.encodedWith)); + + await Promise.all(setEncodedWithPromises); + return this.encodedWith as { [key in keyof T]: EncodeResult }; } } diff --git a/missing-types.d.ts b/missing-types.d.ts index 2adaaa15..b13952e1 100644 --- a/missing-types.d.ts +++ b/missing-types.d.ts @@ -44,6 +44,11 @@ declare module 'data-url:*' { export default url; } +declare module 'data-url-text:*' { + const url: string; + export default url; +} + declare module 'service-worker:*' { const url: string; export default url; diff --git a/package-lock.json b/package-lock.json index 9715dd1e..e1bac56a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "squoosh", "version": "2.0.0", "license": "apache-2.0", "dependencies": { @@ -17,15 +18,15 @@ "@rollup/plugin-replace": "^2.3.4", "@surma/rollup-plugin-off-main-thread": "^2.2.2", "@types/dedent": "^0.7.0", - "@types/mime-types": "^2.1.0", - "@types/node": "^14.14.7", + "@types/mime-types": "^2.1.1", + "@types/node": "^16.11.1", "@web/rollup-plugin-import-meta-assets": "^1.0.6", "comlink": "^4.3.0", "cssnano": "^4.1.10", "dedent": "^0.7.0", "del": "^5.1.0", "file-drop-element": "^1.0.1", - "husky": "^4.3.0", + "husky": "^7.0.2", "idb-keyval": "^3.2.0", "image-size": "^0.9.3", "linkstate": "^2.0.0", @@ -41,11 +42,11 @@ "postcss-url": "^8.0.0", "preact": "^10.5.5", "preact-render-to-string": "^5.1.11", - "prettier": "^2.1.2", + "prettier": "^2.4.1", "rollup": "^2.38.0", "rollup-plugin-terser": "^7.0.2", "serve": "^11.3.2", - "typescript": "^4.1.3", + "typescript": "^4.4.4", "which": "^2.0.2" } }, @@ -316,9 +317,9 @@ } }, "node_modules/@types/mime-types": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.0.tgz", - "integrity": "sha1-nKUs2jY/aZxpRmwqbM2q2RPqenM=", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.1.tgz", + "integrity": "sha512-vXOTGVSLR2jMw440moWTC7H19iUyLtP3Z1YTj7cSsubOICinjMxFeb/V57v9QdyyPGbbWolUFSSmSiRSn94tFw==", "dev": true }, "node_modules/@types/minimatch": { @@ -328,9 +329,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "14.14.7", - "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.7.tgz", - "integrity": "sha512-Zw1vhUSQZYw+7u5dAwNbIA9TuTotpzY/OF7sJM9FqPOF3SPjKnxrjoTktXDZgUjybf4cWVBP7O8wvKdSaGHweg==", + "version": "16.11.1", + "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.1.tgz", + "integrity": "sha512-PYGcJHL9mwl1Ek3PLiYgyEKtwTMmkMw4vbiyz/ps3pfdRYLVv+SN7qHVAImrjdAXxgluDEw6Ph4lyv+m9UpRmA==", "dev": true }, "node_modules/@types/parse-json": { @@ -902,24 +903,24 @@ } }, "node_modules/cheerio-select/node_modules/css-select": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz", - "integrity": "sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.2.0.tgz", + "integrity": "sha512-6YVG6hsH9yIb/si3Th/is8Pex7qnVHO6t7q7U6TIUnkQASGbS8tnUDBftnPynLNnuUl/r2+PTd0ekiiq7R0zJw==", "dependencies": { "boolbase": "^1.0.0", - "css-what": "^5.0.0", - "domhandler": "^4.2.0", - "domutils": "^2.6.0", - "nth-check": "^2.0.0" + "css-what": "^5.1.0", + "domhandler": "^4.3.0", + "domutils": "^2.8.0", + "nth-check": "^2.0.1" }, "funding": { "url": "https://github.com/sponsors/fb55" } }, "node_modules/cheerio-select/node_modules/css-what": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz", - "integrity": "sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz", + "integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==", "engines": { "node": ">= 6" }, @@ -965,9 +966,9 @@ } }, "node_modules/cheerio-select/node_modules/nth-check": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.0.tgz", - "integrity": "sha512-i4sc/Kj8htBrAiH1viZ0TgU8Y5XqCaV/FziYK6TBczxmeKm3AEFWqqF3195yKudrarqy7Zu80Ra5dobFjn9X/Q==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz", + "integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==", "dependencies": { "boolbase": "^1.0.0" }, @@ -1004,12 +1005,6 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" }, - "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", @@ -1314,12 +1309,6 @@ "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=", "dev": true }, - "node_modules/compare-versions": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-3.6.0.tgz", - "integrity": "sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==", - "dev": true - }, "node_modules/compressible": { "version": "2.0.18", "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz", @@ -2126,9 +2115,9 @@ "dev": true }, "node_modules/domhandler": { - "version": "4.2.2", - "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.2.tgz", - "integrity": "sha512-PzE9aBMsdZO8TK4BnuJwH0QT41wgMbRzuZrHUcpYncEjmQazq8QEaBWgLG7ZyC/DAZKEgglpIA6j4Qn/HmxS3w==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.0.tgz", + "integrity": "sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==", "dependencies": { "domelementtype": "^2.2.0" }, @@ -2446,31 +2435,6 @@ "node": ">=8" } }, - "node_modules/find-up": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", - "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", - "dev": true, - "dependencies": { - "locate-path": "^5.0.0", - "path-exists": "^4.0.0" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/find-versions": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/find-versions/-/find-versions-3.2.0.tgz", - "integrity": "sha512-P8WRou2S+oe222TOCHitLy8zj+SIsVJh52VP4lvXkaFVnOFFdoWv1H1Jjvel1aI6NCFOAaeAVm8qrI0odiLcww==", - "dev": true, - "dependencies": { - "semver-regex": "^2.0.0" - }, - "engines": { - "node": ">=10" - } - }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -2702,28 +2666,18 @@ } }, "node_modules/husky": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/husky/-/husky-4.3.0.tgz", - "integrity": "sha512-tTMeLCLqSBqnflBZnlVDhpaIMucSGaYyX6855jM4AguGeWCeSzNdb1mfyWduTZ3pe3SJVvVWGL0jO1iKZVPfTA==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/husky/-/husky-7.0.2.tgz", + "integrity": "sha512-8yKEWNX4z2YsofXAMT7KvA1g8p+GxtB1ffV8XtpAEGuXNAbCV5wdNKH+qTpw8SM9fh4aMPDR+yQuKfgnreyZlg==", "dev": true, - "dependencies": { - "chalk": "^4.0.0", - "ci-info": "^2.0.0", - "compare-versions": "^3.6.0", - "cosmiconfig": "^7.0.0", - "find-versions": "^3.2.0", - "opencollective-postinstall": "^2.0.2", - "pkg-dir": "^4.2.0", - "please-upgrade-node": "^3.2.0", - "slash": "^3.0.0", - "which-pm-runs": "^1.0.0" - }, "bin": { - "husky-run": "bin/run.js", - "husky-upgrade": "lib/upgrader/bin.js" + "husky": "lib/bin.js" }, "engines": { - "node": ">=10" + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/typicode" } }, "node_modules/icss-replace-symbols": { @@ -3381,18 +3335,6 @@ "node": ">=4.0.0" } }, - "node_modules/locate-path": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", - "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", - "dev": true, - "dependencies": { - "p-locate": "^4.1.0" - }, - "engines": { - "node": ">=10" - } - }, "node_modules/lodash.camelcase": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz", @@ -3906,15 +3848,6 @@ "node": ">=6" } }, - "node_modules/opencollective-postinstall": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz", - "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==", - "dev": true, - "bin": { - "opencollective-postinstall": "index.js" - } - }, "node_modules/p-finally": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz", @@ -3924,30 +3857,6 @@ "node": ">=4" } }, - "node_modules/p-limit": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", - "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", - "dev": true, - "dependencies": { - "p-try": "^2.0.0" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/p-locate": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", - "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", - "dev": true, - "dependencies": { - "p-limit": "^2.2.0" - }, - "engines": { - "node": ">=10" - } - }, "node_modules/p-map": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz", @@ -3960,15 +3869,6 @@ "node": ">=8" } }, - "node_modules/p-try": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", - "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", - "dev": true, - "engines": { - "node": ">=6" - } - }, "node_modules/parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -4009,15 +3909,6 @@ "parse5": "^6.0.1" } }, - "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", @@ -4093,18 +3984,6 @@ "node": ">=4" } }, - "node_modules/pkg-dir": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", - "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==", - "dev": true, - "dependencies": { - "find-up": "^4.0.0" - }, - "engines": { - "node": ">=10" - } - }, "node_modules/please-upgrade-node": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz", @@ -7759,9 +7638,9 @@ } }, "node_modules/prettier": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.1.2.tgz", - "integrity": "sha512-16c7K+x4qVlJg9rEbXl7HEGmQyZlG4R9AgP+oHKRMsMsuk8s+ATStlf1NpDqyBI1HpVyfjLOeMhH2LvuNvV5Vg==", + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.4.1.tgz", + "integrity": "sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==", "dev": true, "bin": { "prettier": "bin-prettier.js" @@ -8038,15 +7917,6 @@ "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=", "dev": true }, - "node_modules/semver-regex": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-2.0.0.tgz", - "integrity": "sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw==", - "dev": true, - "engines": { - "node": ">=8" - } - }, "node_modules/serialize-javascript": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz", @@ -8832,9 +8702,9 @@ } }, "node_modules/typescript": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.3.tgz", - "integrity": "sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg==", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.4.tgz", + "integrity": "sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==", "dev": true, "bin": { "tsc": "bin/tsc", @@ -8938,12 +8808,6 @@ "node": ">= 8" } }, - "node_modules/which-pm-runs": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.0.0.tgz", - "integrity": "sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=", - "dev": true - }, "node_modules/widest-line": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz", @@ -9270,9 +9134,9 @@ } }, "@types/mime-types": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.0.tgz", - "integrity": "sha1-nKUs2jY/aZxpRmwqbM2q2RPqenM=", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.1.tgz", + "integrity": "sha512-vXOTGVSLR2jMw440moWTC7H19iUyLtP3Z1YTj7cSsubOICinjMxFeb/V57v9QdyyPGbbWolUFSSmSiRSn94tFw==", "dev": true }, "@types/minimatch": { @@ -9282,9 +9146,9 @@ "dev": true }, "@types/node": { - "version": "14.14.7", - "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.7.tgz", - "integrity": "sha512-Zw1vhUSQZYw+7u5dAwNbIA9TuTotpzY/OF7sJM9FqPOF3SPjKnxrjoTktXDZgUjybf4cWVBP7O8wvKdSaGHweg==", + "version": "16.11.1", + "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.1.tgz", + "integrity": "sha512-PYGcJHL9mwl1Ek3PLiYgyEKtwTMmkMw4vbiyz/ps3pfdRYLVv+SN7qHVAImrjdAXxgluDEw6Ph4lyv+m9UpRmA==", "dev": true }, "@types/parse-json": { @@ -9772,21 +9636,21 @@ }, "dependencies": { "css-select": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz", - "integrity": "sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.2.0.tgz", + "integrity": "sha512-6YVG6hsH9yIb/si3Th/is8Pex7qnVHO6t7q7U6TIUnkQASGbS8tnUDBftnPynLNnuUl/r2+PTd0ekiiq7R0zJw==", "requires": { "boolbase": "^1.0.0", - "css-what": "^5.0.0", - "domhandler": "^4.2.0", - "domutils": "^2.6.0", - "nth-check": "^2.0.0" + "css-what": "^5.1.0", + "domhandler": "^4.3.0", + "domutils": "^2.8.0", + "nth-check": "^2.0.1" } }, "css-what": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz", - "integrity": "sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==" + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz", + "integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==" }, "dom-serializer": { "version": "1.3.2", @@ -9814,21 +9678,15 @@ } }, "nth-check": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.0.tgz", - "integrity": "sha512-i4sc/Kj8htBrAiH1viZ0TgU8Y5XqCaV/FziYK6TBczxmeKm3AEFWqqF3195yKudrarqy7Zu80Ra5dobFjn9X/Q==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz", + "integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==", "requires": { "boolbase": "^1.0.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", @@ -10082,12 +9940,6 @@ "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=", "dev": true }, - "compare-versions": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-3.6.0.tgz", - "integrity": "sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==", - "dev": true - }, "compressible": { "version": "2.0.18", "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz", @@ -10757,9 +10609,9 @@ "dev": true }, "domhandler": { - "version": "4.2.2", - "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.2.tgz", - "integrity": "sha512-PzE9aBMsdZO8TK4BnuJwH0QT41wgMbRzuZrHUcpYncEjmQazq8QEaBWgLG7ZyC/DAZKEgglpIA6j4Qn/HmxS3w==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.0.tgz", + "integrity": "sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==", "requires": { "domelementtype": "^2.2.0" }, @@ -11019,25 +10871,6 @@ "to-regex-range": "^5.0.1" } }, - "find-up": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", - "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", - "dev": true, - "requires": { - "locate-path": "^5.0.0", - "path-exists": "^4.0.0" - } - }, - "find-versions": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/find-versions/-/find-versions-3.2.0.tgz", - "integrity": "sha512-P8WRou2S+oe222TOCHitLy8zj+SIsVJh52VP4lvXkaFVnOFFdoWv1H1Jjvel1aI6NCFOAaeAVm8qrI0odiLcww==", - "dev": true, - "requires": { - "semver-regex": "^2.0.0" - } - }, "fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -11222,22 +11055,10 @@ "dev": true }, "husky": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/husky/-/husky-4.3.0.tgz", - "integrity": "sha512-tTMeLCLqSBqnflBZnlVDhpaIMucSGaYyX6855jM4AguGeWCeSzNdb1mfyWduTZ3pe3SJVvVWGL0jO1iKZVPfTA==", - "dev": true, - "requires": { - "chalk": "^4.0.0", - "ci-info": "^2.0.0", - "compare-versions": "^3.6.0", - "cosmiconfig": "^7.0.0", - "find-versions": "^3.2.0", - "opencollective-postinstall": "^2.0.2", - "pkg-dir": "^4.2.0", - "please-upgrade-node": "^3.2.0", - "slash": "^3.0.0", - "which-pm-runs": "^1.0.0" - } + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/husky/-/husky-7.0.2.tgz", + "integrity": "sha512-8yKEWNX4z2YsofXAMT7KvA1g8p+GxtB1ffV8XtpAEGuXNAbCV5wdNKH+qTpw8SM9fh4aMPDR+yQuKfgnreyZlg==", + "dev": true }, "icss-replace-symbols": { "version": "1.1.0", @@ -11775,15 +11596,6 @@ "json5": "^1.0.1" } }, - "locate-path": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", - "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", - "dev": true, - "requires": { - "p-locate": "^4.1.0" - } - }, "lodash.camelcase": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz", @@ -12196,36 +12008,12 @@ "mimic-fn": "^2.1.0" } }, - "opencollective-postinstall": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz", - "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==", - "dev": true - }, "p-finally": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz", "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=", "dev": true }, - "p-limit": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", - "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", - "dev": true, - "requires": { - "p-try": "^2.0.0" - } - }, - "p-locate": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", - "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", - "dev": true, - "requires": { - "p-limit": "^2.2.0" - } - }, "p-map": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz", @@ -12235,12 +12023,6 @@ "aggregate-error": "^3.0.0" } }, - "p-try": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", - "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", - "dev": true - }, "parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -12275,12 +12057,6 @@ "parse5": "^6.0.1" } }, - "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", @@ -12335,15 +12111,6 @@ "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", "dev": true }, - "pkg-dir": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", - "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==", - "dev": true, - "requires": { - "find-up": "^4.0.0" - } - }, "please-upgrade-node": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz", @@ -15423,9 +15190,9 @@ } }, "prettier": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.1.2.tgz", - "integrity": "sha512-16c7K+x4qVlJg9rEbXl7HEGmQyZlG4R9AgP+oHKRMsMsuk8s+ATStlf1NpDqyBI1HpVyfjLOeMhH2LvuNvV5Vg==", + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.4.1.tgz", + "integrity": "sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==", "dev": true }, "pretty-format": { @@ -15651,12 +15418,6 @@ "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=", "dev": true }, - "semver-regex": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-2.0.0.tgz", - "integrity": "sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw==", - "dev": true - }, "serialize-javascript": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz", @@ -16311,9 +16072,9 @@ "dev": true }, "typescript": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.3.tgz", - "integrity": "sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg==", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.4.tgz", + "integrity": "sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==", "dev": true }, "uniq": { @@ -16401,12 +16162,6 @@ "isexe": "^2.0.0" } }, - "which-pm-runs": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.0.0.tgz", - "integrity": "sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=", - "dev": true - }, "widest-line": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz", diff --git a/package.json b/package.json index 44730c95..e02c8157 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,8 @@ "debug": "node --inspect-brk node_modules/.bin/rollup -c", "dev": "DEV_PORT=\"${DEV_PORT:=5000}\" run-p watch serve", "watch": "rollup -cw", - "serve": "serve --listen=$DEV_PORT --config ../../../serve.json .tmp/build/static" + "serve": "serve --listen=$DEV_PORT --config ../../../serve.json .tmp/build/static", + "prepare": "husky install" }, "devDependencies": { "@rollup/plugin-commonjs": "^17.0.0", @@ -16,15 +17,15 @@ "@rollup/plugin-replace": "^2.3.4", "@surma/rollup-plugin-off-main-thread": "^2.2.2", "@types/dedent": "^0.7.0", - "@types/mime-types": "^2.1.0", - "@types/node": "^14.14.7", + "@types/mime-types": "^2.1.1", + "@types/node": "^16.11.1", "@web/rollup-plugin-import-meta-assets": "^1.0.6", "comlink": "^4.3.0", "cssnano": "^4.1.10", "dedent": "^0.7.0", "del": "^5.1.0", "file-drop-element": "^1.0.1", - "husky": "^4.3.0", + "husky": "^7.0.2", "idb-keyval": "^3.2.0", "image-size": "^0.9.3", "linkstate": "^2.0.0", @@ -40,18 +41,13 @@ "postcss-url": "^8.0.0", "preact": "^10.5.5", "preact-render-to-string": "^5.1.11", - "prettier": "^2.1.2", + "prettier": "^2.4.1", "rollup": "^2.38.0", "rollup-plugin-terser": "^7.0.2", "serve": "^11.3.2", - "typescript": "^4.1.3", + "typescript": "^4.4.4", "which": "^2.0.2" }, - "husky": { - "hooks": { - "pre-commit": "lint-staged" - } - }, "lint-staged": { "*.{js,css,json,md,ts,tsx}": "prettier --write", "*.{c,h,cpp,hpp}": "clang-format -i", diff --git a/src/client/initial-app/index.tsx b/src/client/initial-app/index.tsx index c81affc4..3f387cee 100644 --- a/src/client/initial-app/index.tsx +++ b/src/client/initial-app/index.tsx @@ -37,8 +37,10 @@ main(); ga('set', 'transport', 'beacon'); ga('set', 'dimension1', displayMode); ga('send', 'pageview', '/index.html', { title: 'Squoosh' }); - // Load the GA script - const script = document.createElement('script'); - script.src = 'https://www.google-analytics.com/analytics.js'; - document.head.appendChild(script); + // Load the GA script without keeping the browser spinner going. + addEventListener('load', () => { + const script = document.createElement('script'); + script.src = 'https://www.google-analytics.com/analytics.js'; + document.head.appendChild(script); + }); } diff --git a/src/client/lazy-app/Compress/Options/index.tsx b/src/client/lazy-app/Compress/Options/index.tsx index 7f531098..3c23e4dc 100644 --- a/src/client/lazy-app/Compress/Options/index.tsx +++ b/src/client/lazy-app/Compress/Options/index.tsx @@ -40,24 +40,23 @@ type PartialButNotUndefined = { [P in keyof T]: T[P]; }; -const supportedEncoderMapP: Promise> = (async () => { - const supportedEncoderMap: PartialButNotUndefined = { - ...encoderMap, - }; +const supportedEncoderMapP: Promise> = + (async () => { + const supportedEncoderMap: PartialButNotUndefined = { + ...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 { state: State = { diff --git a/src/client/lazy-app/Compress/index.tsx b/src/client/lazy-app/Compress/index.tsx index a7d7464a..5c37caae 100644 --- a/src/client/lazy-app/Compress/index.tsx +++ b/src/client/lazy-app/Compress/index.tsx @@ -116,7 +116,7 @@ async function decodeImage( // Otherwise fall through and try built-in decoding for a laugh. return await builtinDecode(signal, blob, mimeType); } catch (err) { - if (err.name === 'AbortError') throw err; + if (err instanceof Error && err.name === 'AbortError') throw err; console.log(err); throw Error("Couldn't decode image"); } @@ -481,7 +481,7 @@ export default class Compress extends Component { open('https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli'); } } catch (e) { - this.props.showSnack(e); + this.props.showSnack(String(e)); } }; @@ -640,7 +640,7 @@ export default class Compress extends Component { return { sides }; }); } catch (err) { - if (err.name === 'AbortError') return; + if (err instanceof Error && err.name === 'AbortError') return; this.props.showSnack(`Source decoding error: ${err}`); throw err; } @@ -698,7 +698,7 @@ export default class Compress extends Component { return newState; }); } catch (err) { - if (err.name === 'AbortError') return; + if (err instanceof Error && err.name === 'AbortError') return; this.setState({ loading: false }); this.props.showSnack(`Preprocessing error: ${err}`); throw err; @@ -822,7 +822,7 @@ export default class Compress extends Component { this.activeSideJobs[sideIndex] = undefined; } catch (err) { - if (err.name === 'AbortError') return; + if (err instanceof Error && err.name === 'AbortError') return; this.setState((currentState) => { const sides = cleanMerge(currentState.sides, sideIndex, { loading: false, diff --git a/src/features/encoders/oxiPNG/worker/oxipngEncode.ts b/src/features/encoders/oxiPNG/worker/oxipngEncode.ts index c71525ea..e047ed77 100644 --- a/src/features/encoders/oxiPNG/worker/oxipngEncode.ts +++ b/src/features/encoders/oxiPNG/worker/oxipngEncode.ts @@ -14,9 +14,11 @@ import { EncodeOptions } from '../shared/meta'; import { threads } from 'wasm-feature-detect'; async function initMT() { - const { default: init, initThreadPool, optimise } = await import( - 'codecs/oxipng/pkg-parallel/squoosh_oxipng' - ); + const { + default: init, + initThreadPool, + optimise, + } = await import('codecs/oxipng/pkg-parallel/squoosh_oxipng'); await init(); await initThreadPool(navigator.hardwareConcurrency); return optimise; diff --git a/src/shared/custom-els/loading-spinner/index.ts b/src/shared/custom-els/loading-spinner/index.ts index 2985b6d9..7cd1bb6f 100644 --- a/src/shared/custom-els/loading-spinner/index.ts +++ b/src/shared/custom-els/loading-spinner/index.ts @@ -2,9 +2,9 @@ import * as styles from './styles.css'; import 'add-css:./styles.css'; // So it doesn't cause an error when running in node -const HTMLEl = ((__PRERENDER__ +const HTMLEl = (__PRERENDER__ ? Object - : HTMLElement) as unknown) as typeof HTMLElement; + : HTMLElement) as unknown as typeof HTMLElement; /** * A simple spinner. This custom element has no JS API. Just put it in the document, and it'll diff --git a/src/shared/custom-els/snack-bar/index.ts b/src/shared/custom-els/snack-bar/index.ts index f8c5fd25..c844f35a 100644 --- a/src/shared/custom-els/snack-bar/index.ts +++ b/src/shared/custom-els/snack-bar/index.ts @@ -2,9 +2,9 @@ import * as style from './styles.css'; import 'add-css:./styles.css'; // So it doesn't cause an error when running in node -const HTMLEl = ((__PRERENDER__ +const HTMLEl = (__PRERENDER__ ? Object - : HTMLElement) as unknown) as typeof HTMLElement; + : HTMLElement) as unknown as typeof HTMLElement; export interface SnackOptions { timeout?: number; diff --git a/src/shared/missing-types.d.ts b/src/shared/missing-types.d.ts index 0320ec90..baf404ec 100644 --- a/src/shared/missing-types.d.ts +++ b/src/shared/missing-types.d.ts @@ -13,24 +13,3 @@ /// 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; -}; diff --git a/src/shared/prerendered-app/Intro/imgs/logo-with-text.svg b/src/shared/prerendered-app/Intro/imgs/logo-with-text.svg index b4cfbec6..a9aa929e 100644 --- a/src/shared/prerendered-app/Intro/imgs/logo-with-text.svg +++ b/src/shared/prerendered-app/Intro/imgs/logo-with-text.svg @@ -1,10 +1 @@ - - -Squoosh +Squoosh diff --git a/src/shared/prerendered-app/Intro/index.tsx b/src/shared/prerendered-app/Intro/index.tsx index b777a4e3..84c11e45 100644 --- a/src/shared/prerendered-app/Intro/index.tsx +++ b/src/shared/prerendered-app/Intro/index.tsx @@ -14,7 +14,7 @@ import smallSectionAsset from 'url:./imgs/info-content/small.svg'; import simpleSectionAsset from 'url:./imgs/info-content/simple.svg'; import secureSectionAsset from 'url:./imgs/info-content/secure.svg'; import logoIcon from 'url:./imgs/demos/icon-demo-logo.png'; -import logoWithText from 'url:./imgs/logo-with-text.svg'; +import logoWithText from 'data-url-text:./imgs/logo-with-text.svg'; import * as style from './style.css'; import type SnackBarElement from 'shared/custom-els/snack-bar'; import 'shared/custom-els/snack-bar'; diff --git a/src/shared/prerendered-app/Intro/missing-types.d.ts b/src/shared/prerendered-app/Intro/missing-types.d.ts index 6ef3d345..bf077eb8 100644 --- a/src/shared/prerendered-app/Intro/missing-types.d.ts +++ b/src/shared/prerendered-app/Intro/missing-types.d.ts @@ -30,11 +30,6 @@ interface WindowEventMap { beforeinstallprompt: BeforeInstallPromptEvent; } -interface ClipboardItem { - types: string[]; - getType(type: string): Promise; -} - interface Clipboard { read(): Promise; } diff --git a/src/static-build/pages/index/index.tsx b/src/static-build/pages/index/index.tsx index 24004137..109c8e36 100644 --- a/src/static-build/pages/index/index.tsx +++ b/src/static-build/pages/index/index.tsx @@ -57,6 +57,7 @@ const Index: FunctionalComponent = () => ( + diff --git a/src/sw/to-cache.ts b/src/sw/to-cache.ts index bad10ef0..4f90bb4f 100644 --- a/src/sw/to-cache.ts +++ b/src/sw/to-cache.ts @@ -82,24 +82,20 @@ initialJs = subtractSets( export const initial = ['/', ...initialJs]; export const theRest = (async () => { - const [ - supportsThreads, - supportsSimd, - supportsWebP, - supportsAvif, - ] = await Promise.all([ - threads(), - simd(), - ...[webpDataUrl, avifDataUrl].map(async (dataUrl) => { - if (!self.createImageBitmap) return false; - const response = await fetch(dataUrl); - const blob = await response.blob(); - return createImageBitmap(blob).then( - () => true, - () => false, - ); - }), - ]); + const [supportsThreads, supportsSimd, supportsWebP, supportsAvif] = + await Promise.all([ + threads(), + simd(), + ...[webpDataUrl, avifDataUrl].map(async (dataUrl) => { + if (!self.createImageBitmap) return false; + const response = await fetch(dataUrl); + const blob = await response.blob(); + return createImageBitmap(blob).then( + () => true, + () => false, + ); + }), + ]); const items: string[] = [];