Bump json5 from 2.2.0 to 2.2.3 in /libsquoosh

Bumps [json5](https://github.com/json5/json5) from 2.2.0 to 2.2.3.
- [Release notes](https://github.com/json5/json5/releases)
- [Changelog](https://github.com/json5/json5/blob/main/CHANGELOG.md)
- [Commits](https://github.com/json5/json5/compare/v2.2.0...v2.2.3)

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

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

cli/README.md

@@ -1,3 +1,7 @@
+# Project no longer maintained
+
+Unfortunately, due to a few people leaving the team, and staffing issues resulting from the current economic climate (ugh), this package is no longer actively maintained. I know that sucks, but there simply isn't the time & people to work on this. If anyone from the community wants to fork it, you have my blessing. The [squoosh.app](https://squoosh.app) will continue to be supported and improved.
+
 # Squoosh CLI
 
 Squoosh CLI is an _experimental_ way to run all the codecs you know from the [Squoosh] web app on your command line using WebAssembly. The Squoosh CLI uses a worker pool to parallelize processing images. This way you can apply the same codec to many images at once.

cli/package-lock.json

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

cli/package.json

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

libsquoosh/README.md

@@ -1,3 +1,7 @@
+# Project no longer maintained
+
+Unfortunately, due to a few people leaving the team, and staffing issues resulting from the current economic climate (ugh), this package is no longer actively maintained. I know that sucks, but there simply isn't the time & people to work on this. If anyone from the community wants to fork it, you have my blessing. The [squoosh.app](https://squoosh.app) will continue to be supported and improved.
+
 # libSquoosh
 
 libSquoosh is an _experimental_ way to run all the codecs you know from the [Squoosh] web app directly inside your own JavaScript program. libSquoosh uses a worker pool to parallelize processing images. This way you can apply the same codec to many images at once.

libsquoosh/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@squoosh/lib",
-  "version": "0.4.0",
+  "version": "0.5.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@squoosh/lib",
-      "version": "0.4.0",
+      "version": "0.5.2",
       "license": "Apache-2.0",
       "dependencies": {
         "wasm-feature-detect": "^1.2.11",
@@ -1656,13 +1656,10 @@
       }
     },
     "node_modules/json5": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
-      "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
       "dev": true,
-      "dependencies": {
-        "minimist": "^1.2.5"
-      },
       "bin": {
         "json5": "lib/cli.js"
       },
@@ -1703,12 +1700,6 @@
         "node": "*"
       }
     },
-    "node_modules/minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-      "dev": true
-    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -3630,13 +3621,10 @@
       "dev": true
     },
     "json5": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
-      "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
-      "dev": true,
-      "requires": {
-        "minimist": "^1.2.5"
-      }
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true
     },
     "lodash.debounce": {
       "version": "4.0.8",
@@ -3668,12 +3656,6 @@
         "brace-expansion": "^1.1.7"
       }
     },
-    "minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-      "dev": true
-    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

libsquoosh/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squoosh/lib",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "A Node library for Squoosh",
   "public": true,
   "main": "./build/index.js",

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

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

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

@@ -49,6 +49,7 @@
   align-self: center;
   padding: 9px 66px;
   position: relative;
+  gap: 6px;
 
   /* Allow clicks to fall through to the pinch zoom area */
   pointer-events: none;
@@ -68,7 +69,6 @@
   display: flex;
   position: relative;
   z-index: 100;
-  margin: 0 3px;
 }
 
 .button,
@@ -95,6 +95,7 @@
 
 .button {
   color: #fff;
+  margin: 0;
 
   &:hover {
     background: rgba(50, 50, 50, 0.92);
@@ -114,7 +115,7 @@
 .last-button {
   composes: button;
   border-radius: 0 6px 6px 0;
-  border-left-width: 1px;
+  border-right-width: 1px;
 }
 
 .zoom {

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

@@ -114,7 +114,7 @@ async function decodeImage(
       }
     }
     // Otherwise fall through and try built-in decoding for a laugh.
-    return await builtinDecode(signal, blob, mimeType);
+    return await builtinDecode(signal, blob);
   } catch (err) {
     if (err instanceof Error && err.name === 'AbortError') throw err;
     console.log(err);

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

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

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

@@ -10,8 +10,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import * as WebCodecs from '../util/web-codecs';
 import { drawableToImageData } from './canvas';
 
 /** If render engine is Safari */
@@ -139,15 +137,7 @@ export async function blobToImg(blob: Blob): Promise<HTMLImageElement> {
 export async function builtinDecode(
   signal: AbortSignal,
   blob: Blob,
-  mimeType: string,
 ): Promise<ImageData> {
-  // If WebCodecs are supported, use that.
-  if (await WebCodecs.isTypeSupported(mimeType)) {
-    assertSignal(signal);
-    try {
-      return await abortable(signal, WebCodecs.decode(blob, mimeType));
-    } catch (e) {}
-  }
   assertSignal(signal);
 
   // Prefer createImageBitmap as it's the off-thread option for Firefox.

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

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

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

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

src/static-build/index.tsx

@@ -19,15 +19,39 @@ import * as iconLarge from 'img-url:static-build/assets/icon-large.png';
 import * as screenshot1 from 'img-url:static-build/assets/screenshot1.png';
 import * as screenshot2 from 'img-url:static-build/assets/screenshot2.jpg';
 import * as screenshot3 from 'img-url:static-build/assets/screenshot3.jpg';
+import * as screenshot4 from 'img-url:static-build/assets/screenshot4.png';
+import * as screenshot5 from 'img-url:static-build/assets/screenshot5.jpg';
+import * as screenshot6 from 'img-url:static-build/assets/screenshot6.jpg';
 import dedent from 'dedent';
 import { lookup as lookupMime } from 'mime-types';
 
-const manifestSize = ({ width, height }: { width: number; height: number }) =>
-  `${width}x${height}`;
+interface Dimensions {
+  width: number;
+  height: number;
+}
+
+const manifestSize = ({ width, height }: Dimensions) => `${width}x${height}`;
+const formFactor = ({ width, height }: Dimensions) =>
+  width > height ? 'wide' : 'narrow';
+
+const screenshots = [
+  screenshot1,
+  screenshot2,
+  screenshot3,
+  screenshot4,
+  screenshot5,
+  screenshot6,
+].map((screenshot) => ({
+  src: screenshot.default,
+  type: lookupMime(screenshot.default),
+  sizes: manifestSize(screenshot),
+  form_factor: formFactor(screenshot),
+}));
 
 interface Output {
   [outputPath: string]: string;
 }
+
 const toOutput: Output = {
   'index.html': renderPage(<IndexPage />),
   'manifest.json': JSON.stringify({
@@ -55,23 +79,7 @@ const toOutput: Output = {
       'Compress and compare images with different codecs, right in your browser.',
     lang: 'en',
     categories: ['photo', 'productivity', 'utilities'],
-    screenshots: [
-      {
-        src: screenshot1.default,
-        type: lookupMime(screenshot1.default),
-        sizes: manifestSize(screenshot1),
-      },
-      {
-        src: screenshot2.default,
-        type: lookupMime(screenshot2.default),
-        sizes: manifestSize(screenshot2),
-      },
-      {
-        src: screenshot3.default,
-        type: lookupMime(screenshot3.default),
-        sizes: manifestSize(screenshot3),
-      },
-    ],
+    screenshots,
     share_target: {
       action: '/?utm_medium=PWA&utm_source=share-target&share-target',
       method: 'POST',