@localnerve/gulp-images 0.3.1 → 0.4.0

package/README.md

@@ -1,8 +1,8 @@
 # @localnerve/gulp-images
 
-> Portable (wasm & sharp), minimal dependency, streaming image processing for javascript builds. Optionally outputs image processing metadata to allow the images themselves to drive css generation and/or other work.
+> Portable (wasm & sharp), minimal dependency, streaming image processing for javascript builds. Optionally outputs image processing metadata to allow the images themselves to drive css generation and/or other work. Eventually, this project will be wasm only, no build chain required.
 
-Reusable Gulp image-processing transforms extracted from [jam-build](https://github.com/localnerve/jam-build).
+> **Offers Jpeg-xl optimization and transformations.**
 
 Three functional groups — **optimize**, **responsive**, and **transform** — each independently importable and easily extensible.
 
@@ -22,7 +22,7 @@ Requires `gulp` as a peer dependency.
 
 ### Initialize WASM codecs first
 
-All JPEG, PNG, and WebP operations rely on WASM modules that must be initialized before any pipeline runs.
+All `optimize` and `transform` operations rely on WASM modules that must be initialized before any pipeline runs.
 
 ```js
 import { initWasmModules } from '@localnerve/gulp-images';
@@ -33,6 +33,7 @@ await initWasmModules('/path/to/monorepo/root'); // explicit base path
 ```
 
 ### Full pipeline example
+> Generates responsive images, then optimizes all images, then creates `webp` versions of all raster images.
 
 ```js
 import gulp from 'gulp';
@@ -43,13 +44,15 @@ await initWasmModules();
 const settings = {
   prod: true,
   svgoOptions:      { /* svgo options */ },
+  avifOptions:      { quality: 80, speed: 6 },
+  jxlOptions:       { quality: 80 },
   mozjpegOptions:   { quality: 80 },
   oxipngOptions:    { level: 2 },
   webpOptions:      { quality: 80 },
   responsiveConfig: { /* gulp-responsive config */ }
 };
 
-const output = {}; // optional — receives image metadata from responsive + toWebp
+const output = {}; // optional — receives image metadata from responsive + transform
 
 gulp.series(
   function createResponsiveImages () {
@@ -60,13 +63,15 @@ gulp.series(
   function optimizeImages () {
     return gulp.src('dist/images/**', { encoding: false })
       .pipe(optimize.svg(settings))
+      .pipe(optimize.avif(settings))
       .pipe(optimize.jpeg(settings))
+      .pipe(optimize.jxl(settings))
       .pipe(optimize.png(settings))
       .pipe(gulp.dest('dist/images'));
   },
   function convertToWebp () {
     return gulp.src('dist/images/**', { encoding: false })
-      .pipe(transform.toWebp(settings, output))
+      .pipe(transform.toWebp(settings, output)) // toAvif, toJxl available
       .pipe(gulp.dest('dist/images'));
   }
 )();
@@ -83,21 +88,21 @@ gulp.series(
 | `svg(settings)` | Optimizes SVG files via [svgo](https://github.com/svg/svgo). No-op unless `settings.prod === true`. |
 | `jpeg(settings)` | Re-encodes JPEGs via mozjpeg ([`@jsquash/jpeg`](https://github.com/jamsinclair/jSquash)). No-op unless `settings.prod === true`. |
 | `png(settings)` | Optimizes PNGs via oxipng ([`@jsquash/oxipng`](https://github.com/jamsinclair/jSquash)). No-op unless `settings.prod === true`. |
-
-**Extend the group:**
-```js
-import * as optimize from '@localnerve/gulp-images/optimize';
-const myOptimize = { ...optimize, avif: myAvifOptimizer };
-```
+| `avif(settings)` | Optimizes AVIFs via libavif ([`@jsquash/avif`](https://github.com/jamsinclair/jSquash)). No-op unless `settings.prod === true`. |
+| `jxl(settings)` | Optimizes JXLs via libjxl ([`@jsquash/jxl`](https://github.com/jamsinclair/jSquash)). No-op unless `settings.prod === true`. |
+| `webp(settings)` | Optimizes WEBPs via libavif ([`@jsquash/webp`](https://github.com/jamsinclair/jSquash)). No-op unless `settings.prod === true`. |
 
 **`settings` keys used by optimize:**
 
-| Key | Type | Used by |
-|-----|------|---------|
-| `prod` | `boolean` | all — enables optimization |
-| `svgoOptions` | `object` | `svg` |
-| `mozjpegOptions` | `object` | `jpeg` |
-| `oxipngOptions` | `object` | `png` |
+| Key | Type | Used by | Reference |
+|-----|------|---------|-----------------|
+| `prod` | `boolean` | all — enables optimization | **This Doc** |
+| `svgoOptions` | `object` | `svg` | [reference](https://svgo.dev/docs/plugins/) |
+| `mozjpegOptions` | `object` | `jpeg` | [reference](https://github.com/jamsinclair/jSquash/blob/main/packages/jpeg/meta.ts) |
+| `oxipngOptions` | `object` | `png` | [reference](https://github.com/jamsinclair/jSquash/blob/main/packages/oxipng/meta.ts) |
+| `avifOptions` | `object` | `avif` | [reference](https://github.com/jamsinclair/jSquash/blob/main/packages/avif/meta.ts) |
+| `jxlOptions` | `object` | `jxl` | [reference](https://github.com/jamsinclair/jSquash/blob/main/packages/jxl/meta.ts) |
+| `webpOptions` | `object` | `webp` | [reference](https://github.com/jamsinclair/jSquash/blob/main/packages/webp/meta.ts) |
 
 ---
 
@@ -116,9 +121,9 @@ output[originalName][width] = { basename, mimeType }
 
 **`settings` keys used:**
 
-| Key | Type | Description |
-|-----|------|-------------|
-| `responsiveConfig` | `object` | Forwarded directly to `gulp-responsive` |
+| Key | Type | Description | Reference |
+|-----|------|-------------|-----------|
+| `responsiveConfig` | `object` | Forwarded directly to `gulp-responsive` | [reference](https://github.com/localnerve/gulp-responsive/blob/public-package/README.md#configuration-unit) |
 
 ---
 
@@ -126,26 +131,25 @@ output[originalName][width] = { basename, mimeType }
 
 | Export | Description |
 |--------|-------------|
-| `toWebp(settings, output?)` | Converts `.jpg`, `.jpeg`, and `.png` files to `.webp` using [`@jsquash/webp`](https://github.com/jamsinclair/jSquash). |
+| `toWebp(settings, output?)` | Converts `.avif`, `.jpg`, `.jpeg`, `.jxl` and `.png` files to `.webp` using [`@jsquash/webp`](https://github.com/jamsinclair/jSquash). |
+| `toAvif(settings, output?)` | Converts `.jpg`, `.jpeg`, `.jxl`, `.png`, and `.webp` files to `.avif` using [`@jsquash/avif`](https://github.com/jamsinclair/jSquash). |
+| `toJxl(settings, output?)` | Converts `.avif`, `.jpg`, `.jpeg`, `.png`, and `.webp` files to `.jxl` using [`@jsquash/jxl`](https://github.com/jamsinclair/jSquash). |
 
 `output` (optional) — if supplied, converted file metadata is updated:
 ```js
+// example output created for `toWebp`:
 output[key][width].basename = 'file.webp';
 output[key][width].mimeType = 'image/webp';
 ```
-The `key` and `width` are derived from the filename convention `<key1>-<key2>-<width>.<ext>` (same convention as `gulp-responsive` output).
-
-**Extend the group:**
-```js
-import * as transform from '@localnerve/gulp-images/transform';
-const myTransform = { ...transform, toAvif: myAvifConverter };
-```
+The `key` and `width` are derived from the input image filename convention `<key1>-<key2>-<width>.<ext>` (same convention as `gulp-responsive` output).
 
 **`settings` keys used:**
 
-| Key | Type | Description |
-|-----|------|-------------|
-| `webpOptions` | `object` | Forwarded to the WebP encoder |
+| Key | Type | Description | Reference |
+|-----|------|-------------|-----------|
+| `webpOptions` | `object` | Forwarded to the WebP encoder | [reference](https://github.com/jamsinclair/jSquash/blob/main/packages/webp/meta.ts) |
+| `avifOptions` | `object` | Forwarded to the Avif encoder | [reference](https://github.com/jamsinclair/jSquash/blob/main/packages/avif/meta.ts) |
+| `jxlOptions` | `object` | Forwarded to the Jxl encoder | [reference](https://github.com/jamsinclair/jSquash/blob/main/packages/jxl/meta.ts) |
 
 ---
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@localnerve/gulp-images",
-  "version": "0.3.1",
-  "description": "Reusable gulp image processing transforms: optimize (svg, jpeg, png), responsive, and transform (toWebp).",
+  "version": "0.4.0",
+  "description": "Reusable gulp image processing transforms: optimize (svg, jpeg, png, avif, jxl), responsive, and transform (toWebp, toAvif, toJxl).",
   "type": "module",
   "scripts": {
     "lint": "eslint src/ test/",
@@ -27,6 +27,8 @@
     "svg",
     "jpeg",
     "png",
+    "jxl",
+    "avif",
     "wasm"
   ],
   "repository": {
@@ -43,11 +45,13 @@
     "gulp": ">=5.0.0"
   },
   "dependencies": {
+    "@jsquash/avif": "^2.1.1",
     "@jsquash/jpeg": "^1.6.0",
+    "@jsquash/jxl": "^1.3.0",
     "@jsquash/oxipng": "^2.3.0",
     "@jsquash/png": "^3.1.1",
     "@jsquash/webp": "^1.5.0",
-    "@localnerve/gulp-responsive": ">=7.7.0",
+    "@localnerve/gulp-responsive": ">=7.8.0",
     "plugin-error": "^2.0.1",
     "svgo": "^4.0.1",
     "wasm-feature-detect": "^1.8.0"
@@ -57,7 +61,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "eslint": "^10.2.0",
+    "eslint": "^10.3.0",
     "gulp": "^5.0.1",
     "vinyl": "^3.0.1"
   }

package/src/index.js

@@ -10,9 +10,9 @@
  *   import { initWasmModules, optimize, responsive, transform } from '@localnerve/gulp-images';
  *
  * Or import individual groups directly:
- *   import { svg, jpeg, png } from '@localnerve/gulp-images/optimize';
- *   import { responsive }     from '@localnerve/gulp-images/responsive';
- *   import { toWebp }         from '@localnerve/gulp-images/transform';
+ *   import { svg, jpeg, png, avif, webp, jxl } from '@localnerve/gulp-images/optimize';
+ *   import { responsive }                      from '@localnerve/gulp-images/responsive';
+ *   import { toWebp, toAvif, toJxl }           from '@localnerve/gulp-images/transform';
  */
 export * as optimize    from './optimize/index.js';
 export * as responsive  from './responsive/index.js';

package/src/optimize/avif.js

@@ -0,0 +1,51 @@
+/**
+ * @localnerve/gulp-images — optimize/avif
+ *
+ * Copyright (c) 2025 Alex Grant <info@localnerve.com> (https://www.localnerve.com), LocalNerve LLC
+ * AGPL-3.0-or-later
+ */
+import { Transform } from 'node:stream';
+import { decodeAvif, encodeAvif, checkSkip, log, handleError, passThrough } from '../utils.js';
+
+const pluginName = '@localnerve/optimize-avif';
+
+/**
+ * Gulp Transform that re-encodes avif files using libavif (via @jsquash/avif).
+ * When `settings.prod` is false, files pass through unchanged.
+ *
+ * avif options reference:
+ * https://github.com/jamsinclair/jSquash/blob/main/packages/avif/meta.ts
+ *
+ * @param {Object} settings - Build settings
+ * @param {Object} [settings.avifOptions] - Options forwarded to the libavif encoder
+ * @param {boolean} settings.prod - Enable optimization only when true
+ * @returns {Transform} A Node.js Transform stream in object mode
+ */
+export function avif (settings) {
+  const { prod, avifOptions } = settings;
+
+  if (prod) {
+    return new Transform({
+      objectMode: true,
+      transform: async (file, encoding, next) => {
+        if (checkSkip(file, ['.avif'])) { return next(null, file); }
+        if (file.isBuffer()) {
+          try {
+            const originalLen = file.contents.length;
+            const imageData = await decodeAvif(file.contents);
+            file.contents = Buffer.from(await encodeAvif(imageData, avifOptions));
+            const optimizedLen = file.contents.length;
+            const reductionPerc = (((originalLen - optimizedLen) / originalLen) * 100).toFixed(2);
+
+            log(pluginName, file, `${file.extname.slice(1)} optimized (${reductionPerc}%)`);
+            next(null, file);
+          } catch (error) {
+            handleError(pluginName, file, next, error);
+          }
+        }
+      }
+    });
+  }
+
+  return passThrough();
+}

package/src/optimize/index.js

@@ -4,11 +4,11 @@
  * Copyright (c) 2025 Alex Grant <info@localnerve.com> (https://www.localnerve.com), LocalNerve LLC
  * AGPL-3.0-or-later
  *
- * Exports the built-in optimizers. Callers can extend this group by spreading:
- *
- *   import * as optimize from '@localnerve/gulp-images/optimize';
- *   const myOptimize = { ...optimize, avif: myAvifFn };
+ * Exports the built-in optimizers.
  */
 export { svg } from './svg.js';
 export { jpeg } from './jpeg.js';
 export { png } from './png.js';
+export { webp } from './webp.js';
+export { avif } from './avif.js';
+export { jxl } from './jxl.js';

package/src/optimize/jxl.js

@@ -0,0 +1,51 @@
+/**
+ * @localnerve/gulp-images — optimize/jxl
+ *
+ * Copyright (c) 2025 Alex Grant <info@localnerve.com> (https://www.localnerve.com), LocalNerve LLC
+ * AGPL-3.0-or-later
+ */
+import { Transform } from 'node:stream';
+import { decodeJxl, encodeJxl, checkSkip, log, handleError, passThrough } from '../utils.js';
+
+const pluginName = '@localnerve/optimize-jxl';
+
+/**
+ * Gulp Transform that re-encodes jxl files using libjxl (via @jsquash/jxl).
+ * When `settings.prod` is false, files pass through unchanged.
+ *
+ * jxl options reference:
+ * https://github.com/jamsinclair/jSquash/blob/main/packages/jxl/meta.ts
+ *
+ * @param {Object} settings - Build settings
+ * @param {Object} [settings.jxlOptions] - Options forwarded to the libjxl encoder
+ * @param {boolean} settings.prod - Enable optimization only when true
+ * @returns {Transform} A Node.js Transform stream in object mode
+ */
+export function jxl (settings) {
+  const { prod, jxlOptions } = settings;
+
+  if (prod) {
+    return new Transform({
+      objectMode: true,
+      transform: async (file, encoding, next) => {
+        if (checkSkip(file, ['.jxl'])) { return next(null, file); }
+        if (file.isBuffer()) {
+          try {
+            const originalLen = file.contents.length;
+            const imageData = await decodeJxl(file.contents);
+            file.contents = Buffer.from(await encodeJxl(imageData, jxlOptions));
+            const optimizedLen = file.contents.length;
+            const reductionPerc = (((originalLen - optimizedLen) / originalLen) * 100).toFixed(2);
+
+            log(pluginName, file, `${file.extname.slice(1)} optimized (${reductionPerc}%)`);
+            next(null, file);
+          } catch (error) {
+            handleError(pluginName, file, next, error);
+          }
+        }
+      }
+    });
+  }
+
+  return passThrough();
+}

package/src/optimize/webp.js

@@ -0,0 +1,51 @@
+/**
+ * @localnerve/gulp-images — optimize/webp
+ *
+ * Copyright (c) 2025 Alex Grant <info@localnerve.com> (https://www.localnerve.com), LocalNerve LLC
+ * AGPL-3.0-or-later
+ */
+import { Transform } from 'node:stream';
+import { decodeWebp, encodeWebp, checkSkip, log, handleError, passThrough } from '../utils.js';
+
+const pluginName = '@localnerve/optimize-webp';
+
+/**
+ * Gulp Transform that re-encodes webp files using libwebp (via @jsquash/webp).
+ * When `settings.prod` is false, files pass through unchanged.
+ *
+ * webp options reference:
+ * https://github.com/jamsinclair/jSquash/blob/main/packages/webp/meta.ts
+ *
+ * @param {Object} settings - Build settings
+ * @param {Object} [settings.webpOptions] - Options forwarded to the libwebp encoder
+ * @param {boolean} settings.prod - Enable optimization only when true
+ * @returns {Transform} A Node.js Transform stream in object mode
+ */
+export function webp (settings) {
+  const { prod, webpOptions } = settings;
+
+  if (prod) {
+    return new Transform({
+      objectMode: true,
+      transform: async (file, encoding, next) => {
+        if (checkSkip(file, ['.webp'])) { return next(null, file); }
+        if (file.isBuffer()) {
+          try {
+            const originalLen = file.contents.length;
+            const imageData = await decodeWebp(file.contents);
+            file.contents = Buffer.from(await encodeWebp(imageData, webpOptions));
+            const optimizedLen = file.contents.length;
+            const reductionPerc = (((originalLen - optimizedLen) / originalLen) * 100).toFixed(2);
+
+            log(pluginName, file, `${file.extname.slice(1)} optimized (${reductionPerc}%)`);
+            next(null, file);
+          } catch (error) {
+            handleError(pluginName, file, next, error);
+          }
+        }
+      }
+    });
+  }
+
+  return passThrough();
+}

package/src/transform/index.js

@@ -4,9 +4,8 @@
  * Copyright (c) 2025 Alex Grant <info@localnerve.com> (https://www.localnerve.com), LocalNerve LLC
  * AGPL-3.0-or-later
  *
- * Exports the built-in image transforms. Callers can extend this group by spreading:
- *
- *   import * as transform from '@localnerve/gulp-images/transform';
- *   const myTransform = { ...transform, toAvif: myAvifFn };
+ * Exports the built-in image transforms.
  */
+export { toAvif } from './toAvif.js';
+export { toJxl } from './toJxl.js';
 export { toWebp } from './toWebp.js';

package/src/transform/toAvif.js

@@ -0,0 +1,92 @@
+/**
+ * @localnerve/gulp-images — transform/toAvif
+ *
+ * Copyright (c) 2025 Alex Grant <info@localnerve.com> (https://www.localnerve.com), LocalNerve LLC
+ * AGPL-3.0-or-later
+ */
+import path from 'node:path';
+import { Transform } from 'node:stream';
+import {
+  decodeJpeg,
+  decodePng,
+  decodeJxl,
+  decodeWebp,
+  encodeAvif,
+  checkSkip, log, handleError } from '../utils.js';
+
+const pluginName = '@localnerve/to-avif';
+
+/**
+ * Gulp Transform that converts raster images to Avif.
+ *
+ * Converted files have their extension replaced with `.avif`.  When the
+ * filename follows the `<key>-<sub>-<width>` naming convention used by
+ * gulp-responsive output AND `output` is provided, the transform also
+ * updates `output[key][width]` with the new basename and mimeType—mirroring
+ * the `data.images` updates in the original implementation.
+ *
+ * Avif encoder options reference:
+ * https://github.com/jamsinclair/jSquash/blob/main/packages/avif/meta.ts
+ *
+ * @param {Object} settings - Build settings
+ * @param {Object} [settings.avifOptions] - Options forwarded to the avif encoder
+ * @param {Object} [output] - Optional object to receive updated image metadata
+ *   (same shape written by `responsive`): output[key][width] = { basename, mimeType }
+ * @returns {Transform} A Node.js Transform stream in object mode
+ */
+export function toAvif(settings, output) {
+  const { avifOptions } = settings;
+  const exts = ['.jpg', '.jpeg', '.png', '.webp', '.jxl'];
+  const decoders = [decodeJpeg, decodeJpeg, decodePng, decodeWebp, decodeJxl];
+
+  return new Transform({
+    objectMode: true,
+    transform: async (file, encoding, next) => {
+      if (checkSkip(file, exts)) {
+        return next(null, file);
+      }
+
+      if (file.isBuffer()) {
+        try {
+          const decoderIndex = exts.indexOf(file.extname.toLowerCase());
+          const originalFile = file.path;
+          const originalExt = file.extname;
+
+          // derive metadata keys from filename convention: <key-parts>-<width>
+          const name = path.parse(file.relative).name;
+          const nameParts = name.split('-');
+          const key = nameParts.slice(0, 2).join('-');
+          const width = nameParts.slice(2, 3)[0];
+
+          const imageData = await decoders[decoderIndex](file.contents);
+          file.contents = Buffer.from(await encodeAvif(imageData, avifOptions));
+
+          for (const ext of exts) {
+            file.path = file.path.replace(ext, '.avif');
+
+            if (originalFile !== file.path) {
+              // update caller-supplied output metadata if provided
+              if (output) {
+                const val = output?.[key]?.[width];
+                if (val) {
+                  val.basename = file.basename;
+                  val.mimeType = 'image/avif';
+                }
+              }
+              break; // a file won't be both .jpg and .jpeg
+            }
+          }
+
+          if (file.stat) {
+            file.stat.atime = file.stat.mtime = file.stat.ctime = new Date();
+          }
+
+          log(pluginName, file, `${originalExt.slice(1)} converted to avif`);
+          next(null, file);
+        } catch (error) {
+          handleError(pluginName, file, next, error);
+        }
+      }
+    }
+  });
+}

package/src/transform/toJxl.js

@@ -0,0 +1,92 @@
+/**
+ * @localnerve/gulp-images — transform/toJxl
+ *
+ * Copyright (c) 2025 Alex Grant <info@localnerve.com> (https://www.localnerve.com), LocalNerve LLC
+ * AGPL-3.0-or-later
+ */
+import path from 'node:path';
+import { Transform } from 'node:stream';
+import {
+  decodeJpeg,
+  decodePng,
+  decodeAvif,
+  decodeWebp,
+  encodeJxl,
+  checkSkip, log, handleError } from '../utils.js';
+
+const pluginName = '@localnerve/to-jxl';
+
+/**
+ * Gulp Transform that converts raster images to Jxl.
+ *
+ * Converted files have their extension replaced with `.jxl`.  When the
+ * filename follows the `<key>-<sub>-<width>` naming convention used by
+ * gulp-responsive output AND `output` is provided, the transform also
+ * updates `output[key][width]` with the new basename and mimeType—mirroring
+ * the `data.images` updates in the original implementation.
+ *
+ * Jxl encoder options reference:
+ * https://github.com/jamsinclair/jSquash/blob/main/packages/jxl/meta.ts
+ *
+ * @param {Object} settings - Build settings
+ * @param {Object} [settings.jxlOptions] - Options forwarded to the jxl encoder
+ * @param {Object} [output] - Optional object to receive updated image metadata
+ *   (same shape written by `responsive`): output[key][width] = { basename, mimeType }
+ * @returns {Transform} A Node.js Transform stream in object mode
+ */
+export function toJxl(settings, output) {
+  const { jxlOptions } = settings;
+  const exts = ['.jpg', '.jpeg', '.png', '.webp', '.avif'];
+  const decoders = [decodeJpeg, decodeJpeg, decodePng, decodeWebp, decodeAvif];
+
+  return new Transform({
+    objectMode: true,
+    transform: async (file, encoding, next) => {
+      if (checkSkip(file, exts)) {
+        return next(null, file);
+      }
+
+      if (file.isBuffer()) {
+        try {
+          const decoderIndex = exts.indexOf(file.extname.toLowerCase());
+          const originalFile = file.path;
+          const originalExt = file.extname;
+
+          // derive metadata keys from filename convention: <key-parts>-<width>
+          const name = path.parse(file.relative).name;
+          const nameParts = name.split('-');
+          const key = nameParts.slice(0, 2).join('-');
+          const width = nameParts.slice(2, 3)[0];
+
+          const imageData = await decoders[decoderIndex](file.contents);
+          file.contents = Buffer.from(await encodeJxl(imageData, jxlOptions));
+
+          for (const ext of exts) {
+            file.path = file.path.replace(ext, '.jxl');
+
+            if (originalFile !== file.path) {
+              // update caller-supplied output metadata if provided
+              if (output) {
+                const val = output?.[key]?.[width];
+                if (val) {
+                  val.basename = file.basename;
+                  val.mimeType = 'image/jxl';
+                }
+              }
+              break; // a file won't be both .jpg and .jpeg
+            }
+          }
+
+          if (file.stat) {
+            file.stat.atime = file.stat.mtime = file.stat.ctime = new Date();
+          }
+
+          log(pluginName, file, `${originalExt.slice(1)} converted to jxl`);
+          next(null, file);
+        } catch (error) {
+          handleError(pluginName, file, next, error);
+        }
+      }
+    }
+  });
+}

package/src/transform/toWebp.js

@@ -6,12 +6,18 @@
  */
 import path from 'node:path';
 import { Transform } from 'node:stream';
-import { decodeJpeg, decodePng, encodeWebp, checkSkip, log, handleError } from '../utils.js';
+import {
+  decodeJpeg,
+  decodePng,
+  decodeJxl,
+  decodeAvif,
+  encodeWebp,
+  checkSkip, log, handleError } from '../utils.js';
 
 const pluginName = '@localnerve/to-webp';
 
 /**
- * Gulp Transform that converts raster images (jpg/jpeg/png) to WebP.
+ * Gulp Transform that converts raster images to WebP.
  *
  * Converted files have their extension replaced with `.webp`.  When the
  * filename follows the `<key>-<sub>-<width>` naming convention used by
@@ -30,8 +36,8 @@ const pluginName = '@localnerve/to-webp';
  */
 export function toWebp(settings, output) {
   const { webpOptions } = settings;
-  const exts = ['.jpg', '.jpeg', '.png'];
-  const decoders = [decodeJpeg, decodeJpeg, decodePng];
+  const exts = ['.jpg', '.jpeg', '.png', '.avif', '.jxl'];
+  const decoders = [decodeJpeg, decodeJpeg, decodePng, decodeAvif, decodeJxl];
 
   return new Transform({
     objectMode: true,

package/src/utils.js

@@ -9,13 +9,29 @@ import fs from 'node:fs/promises';
 import { Transform } from 'node:stream';
 import PluginError from 'plugin-error';
 import { simd, relaxedSimd } from 'wasm-feature-detect';
+import decodeAvif, { init as initAvifDecode } from '@jsquash/avif/decode.js';
+import encodeAvif, { init as initAvifEncode } from '@jsquash/avif/encode.js';
 import decodeJpeg, { init as initJpegDecode } from '@jsquash/jpeg/decode.js';
 import encodeJpeg, { init as initJpegEncode } from '@jsquash/jpeg/encode.js';
+import decodeJxl, { init as initJxlDecode } from '@jsquash/jxl/decode.js';
+import encodeJxl, { init as initJxlEncode } from '@jsquash/jxl/encode.js';
 import decodePng, { init as initPngDecode } from '@jsquash/png/decode.js';
 import encodePng, { init as initPngEncode } from '@jsquash/oxipng/optimise.js';
+import decodeWebp, { init as initWebpDecode } from '@jsquash/webp/decode.js';
 import encodeWebp, { init as initWebpEncode } from '@jsquash/webp/encode.js';
 
-export { decodeJpeg, encodeJpeg, decodePng, encodePng, encodeWebp };
+export {
+  decodeAvif,
+  encodeAvif,
+  decodeJpeg,
+  encodeJpeg,
+  decodeJxl,
+  encodeJxl,
+  decodePng,
+  encodePng,
+  decodeWebp,
+  encodeWebp
+};
 
 /**
  * Check skip condition for a vinyl stream object.
@@ -101,10 +117,15 @@ export function passThrough() {
 // WASM codec paths relative to a base directory
 // ---------------------------------------------------------------------------
 const WASM_PATHS = {
+  avifDecode: 'node_modules/@jsquash/avif/codec/dec/avif_dec.wasm',
+  avifEncode: 'node_modules/@jsquash/avif/codec/enc/avif_enc.wasm',
   jpegDecode: 'node_modules/@jsquash/jpeg/codec/dec/mozjpeg_dec.wasm',
   jpegEncode: 'node_modules/@jsquash/jpeg/codec/enc/mozjpeg_enc.wasm',
+  jxlDecode: 'node_modules/@jsquash/jxl/codec/dec/jxl_dec.wasm',
+  jxlEncode: 'node_modules/@jsquash/jxl/codec/enc/jxl_enc.wasm',
   pngDecode: 'node_modules/@jsquash/png/codec/pkg/squoosh_png_bg.wasm',
   pngEncode: 'node_modules/@jsquash/oxipng/codec/pkg/squoosh_oxipng_bg.wasm',
+  webpDecode: 'node_modules/@jsquash/webp/codec/dec/webp_dec.wasm',
   webpEncode: 'node_modules/@jsquash/webp/codec/enc/webp_enc.wasm',
   webpEncodeSIMD: 'node_modules/@jsquash/webp/codec/enc/webp_enc_simd.wasm'
 };
@@ -120,24 +141,40 @@ const WASM_PATHS = {
 export async function initWasmModules(wasmBasePath = process.cwd()) {
   const resolve = rel => path.join(wasmBasePath, rel);
 
+  // Test simd support
+  const simdSupport = await Promise.allSettled([simd(), relaxedSimd()]);
+  const hasSimdSupport = simdSupport.some(r => r.status === 'fulfilled' && r.value);
+
+  const avifDecWasmModule = await WebAssembly.compile(await fs.readFile(resolve(WASM_PATHS.avifDecode)));
+  await initAvifDecode(avifDecWasmModule);
+
+  const avifEncWasmModule = await WebAssembly.compile(await fs.readFile(resolve(WASM_PATHS.avifEncode)));
+  await initAvifEncode(avifEncWasmModule);
+
   const jpegDecWasmModule = await WebAssembly.compile(await fs.readFile(resolve(WASM_PATHS.jpegDecode)));
   await initJpegDecode(jpegDecWasmModule);
 
   const jpegEncWasmModule = await WebAssembly.compile(await fs.readFile(resolve(WASM_PATHS.jpegEncode)));
   await initJpegEncode(jpegEncWasmModule);
 
+  const jxlDecWasmModule = await WebAssembly.compile(await fs.readFile(resolve(WASM_PATHS.jxlDecode)));
+  await initJxlDecode(jxlDecWasmModule);
+
+  const jxlPath = WASM_PATHS.jxlEncode; // only single threaded for now
+  const jxlEncWasmModule = await WebAssembly.compile(await fs.readFile(resolve(jxlPath)));
+  await initJxlEncode(jxlEncWasmModule);
+
   const pngDecWasmModule = await WebAssembly.compile(await fs.readFile(resolve(WASM_PATHS.pngDecode)));
   await initPngDecode(pngDecWasmModule);
 
   const oxipngWasmModule = await WebAssembly.compile(await fs.readFile(resolve(WASM_PATHS.pngEncode)));
   await initPngEncode(oxipngWasmModule);
 
-  // use SIMD variant if supported (~10 % faster)
-  const simdSupport = await Promise.allSettled([simd(), relaxedSimd()]);
-  const webpPath = simdSupport.some(r => r.status === 'fulfilled' && r.value)
-    ? WASM_PATHS.webpEncodeSIMD
-    : WASM_PATHS.webpEncode;
+  const webpDecWasmModule = await WebAssembly.compile(await fs.readFile(resolve(WASM_PATHS.webpDecode)));
+  await initWebpDecode(webpDecWasmModule);
 
+  // use SIMD variant if supported (~10 % faster)
+  const webpPath = hasSimdSupport ? WASM_PATHS.webpEncodeSIMD : WASM_PATHS.webpEncode;
   const webpEncWasmModule = await WebAssembly.compile(await fs.readFile(resolve(webpPath)));
   await initWebpEncode(webpEncWasmModule);
 }