@divriots/jampack 0.23.3 → 0.24.0

package/README.md

@@ -219,19 +219,14 @@ For more options see [CLI options](https://jampack.divriots.com/cli-options/).
 
 ## `jampack` used in the wild
 
-- [divRIOTS.com](https://divRIOTS.com)
-- [Backlight.dev](https://backlight.dev)
-- [story.to.design](https://story.to.design)
-- [html.to.design](https://html.to.design/docs)
-- [WebComponents.dev](https://WebComponents.dev)
-- [LWC.studio](https://lwc.studio)
-- [Components.studio](https://components.studio)
+- Powering all [‹div›RIOTS](https://divRIOTS.com)' websites
 - [keycloak.ch](https://keycloak.ch)
 - [bayjs.org](https://bayjs.org/)
 - [qwind.pages.dev](https://qwind.pages.dev/)
 - [Bloycey's Blog](https://bloycey.blog/)
 - [gxanshu.in](https://gxanshu.in/)
-  
+- [cloudcannon.com](https://cloudcannon.com)
+- [groupsync.app](https://groupsync.app)
 > Add yours here
 
 ## Why is it called `jampack`?

package/dist/cache.js

@@ -1,4 +1,4 @@
-import hasha from 'hasha';
+import { hashSync as hasha } from 'hasha';
 import path from 'path';
 import * as fs from 'fs/promises';
 import $state from './state.js';

package/dist/compress.js

@@ -1,6 +1,7 @@
 import * as fs from 'fs/promises';
 import * as path from 'path';
 import { formatBytes } from './utils.js';
+import config from './config.js';
 import $state from './state.js';
 import { globby } from 'globby';
 import ora from 'ora';
@@ -19,10 +20,12 @@ const processFile = async (file, stats) => {
             case '.svg':
             case '.webp':
             case '.avif':
-                const imgData = await fs.readFile(file);
-                const newImage = await compressImage(imgData, {});
-                if ((newImage === null || newImage === void 0 ? void 0 : newImage.data) && newImage.data.length < stats.size) {
-                    writeData = newImage.data;
+                if (config.image.compress) {
+                    const imgData = await fs.readFile(file);
+                    const newImage = await compressImage(imgData, {});
+                    if ((newImage === null || newImage === void 0 ? void 0 : newImage.data) && newImage.data.length < stats.size) {
+                        writeData = newImage.data;
+                    }
                 }
                 break;
             case '.html':

package/dist/compressors/images.d.ts

@@ -10,6 +10,6 @@ export type Image = {
 };
 export type ImageOutputOptions = {
     resize?: sharp.ResizeOptions;
-    toFormat?: 'webp' | 'avif' | 'png' | 'jpeg' | 'jpeg+progressive' | 'unchanged';
+    toFormat?: 'webp' | 'avif' | 'png' | 'jpeg' | 'unchanged';
 };
 export declare function compressImage(data: Buffer, options: ImageOutputOptions): Promise<Image | undefined>;

package/dist/compressors/images.js

@@ -19,7 +19,8 @@ export async function compressImage(data, options) {
     }
     // Load modifiable toFormat
     let toFormat = options.toFormat || 'unchanged';
-    let sharpFile = await sharp(data, { animated: true });
+    let sharpFile = sharp(data, { animated: true });
+    sharpFile = sharpFile.rotate(); // Rotate image based on EXIF data (because EXIF data is removed)
     const meta = await sharpFile.metadata();
     if (meta.pages && meta.pages > 1) {
         // Skip animated images for the moment.
@@ -85,10 +86,6 @@ export async function compressImage(data, options) {
                 sharpFile = sharpFile.jpeg({ ...config.image.jpeg.options } || {});
                 outputFormat = 'jpg';
                 break;
-            case 'jpeg+progressive':
-                sharpFile = sharpFile.jpeg({ ...config.image.jpeg.options, progressive: true } || {});
-                outputFormat = 'jpg';
-                break;
             case 'png':
                 sharpFile = sharpFile.png({ ...config.image.png.options } || {});
                 outputFormat = 'png';

package/dist/config-default.js

@@ -53,6 +53,7 @@ const default_options = {
         },
         svg: {
             optimization: true,
+            add_width_and_height: false,
         },
     },
     misc: {

package/dist/config-types.d.ts

@@ -53,6 +53,7 @@ export type Options = {
         };
         svg: {
             optimization: boolean;
+            add_width_and_height: boolean;
         };
     };
     misc: {

package/dist/optimize.js

@@ -201,7 +201,7 @@ function getTheFold($) {
     return 0;
 }
 async function processImage(htmlfile, img, isAboveTheFold) {
-    var _a, _b, _c;
+    var _a, _b;
     /*
      * Attribute 'src'
      */
@@ -350,21 +350,7 @@ async function processImage(htmlfile, img, isAboveTheFold) {
     let newImage;
     const isInPicture = (_a = img.parent()) === null || _a === void 0 ? void 0 : _a.is('picture');
     let srcToFormat = 'unchanged';
-    if (isAboveTheFold) {
-        // Above the fold, nothing beats progressive JPEG for LCP
-        // But jpeg doesn't support transparency
-        if ((_b = (await originalImage.getImageMeta())) === null || _b === void 0 ? void 0 : _b.isOpaque) {
-            srcToFormat = 'jpeg+progressive';
-        }
-        else {
-            srcToFormat =
-                (await originalImage.getMime()) === 'image/avif' ||
-                    (await originalImage.getMime()) === 'image/webp'
-                    ? 'unchanged'
-                    : 'webp';
-        }
-    }
-    else if (isInPicture) {
+    if (isInPicture) {
         // srcToFormat should not change if in picture
     }
     else {
@@ -381,12 +367,10 @@ async function processImage(htmlfile, img, isAboveTheFold) {
             resize: { width: config.image.srcset_max_width },
         });
     }
-    if ((newImage === null || newImage === void 0 ? void 0 : newImage.data) &&
-        (newImage.data.length < (await originalImage.getLen()) ||
-            srcToFormat === 'jpeg+progressive') // Progressive override all even if worse
-    ) {
-        const additionalExtension = `.${newImage.format}`;
-        const newFilename = originalImage.filePathAbsolute + additionalExtension;
+    if ((newImage === null || newImage === void 0 ? void 0 : newImage.data) && newImage.data.length < (await originalImage.getLen())) {
+        const newFilename = path.join(path.dirname(originalImage.filePathAbsolute), path.basename(originalImage.filePathAbsolute, path.extname(originalImage.filePathAbsolute)) + `.${newImage.format}`);
+        const newSrc = path.join(path.dirname(attrib_src), path.basename(attrib_src, path.extname(attrib_src)) +
+            `.${newImage.format}`);
         if (!$state.compressedFiles.has(newFilename) && !$state.args.nowrite) {
             fs.writeFile(newFilename, newImage.data);
         }
@@ -400,7 +384,7 @@ async function processImage(htmlfile, img, isAboveTheFold) {
             originalSize: await originalImage.getLen(),
             compressedSize: newImage.data.length,
         });
-        img.attr('src', attrib_src + additionalExtension);
+        img.attr('src', newSrc);
     }
     else {
         // Drop new Image
@@ -502,71 +486,56 @@ async function processImage(htmlfile, img, isAboveTheFold) {
      */
     if (isInPicture) {
         const picture = img.parent();
-        if (isAboveTheFold && srcToFormat === 'jpeg+progressive') {
-            // We don't need anything else than jpeg progressive above the fold
-            const nodes = picture.children(`source`);
-            nodes.remove();
-        }
-        else {
-            // List of possible sources to generate
-            //
-            const sourcesToGenerate = [];
-            // Only try to generate better images
-            // TODO generate more compatible formats (avif => webp/jpeg/png)
-            //
-            const mime = await originalImage.getMime();
-            switch (mime) {
-                case 'image/png':
-                case 'image/jpeg':
+        // List of possible sources to generate
+        //
+        const sourcesToGenerate = [];
+        // Only try to generate better images
+        // TODO generate more compatible formats (avif => webp/jpeg/png)
+        //
+        const mime = await originalImage.getMime();
+        switch (mime) {
+            case 'image/png':
+            case 'image/jpeg':
+                sourcesToGenerate.push({
+                    mime: 'image/webp',
+                    format: 'webp',
+                });
+            case 'image/webp':
+                // Only add AVIF source for lossy images
+                // AVIF don't perform well on lossless images
+                // PNG and WebP will perform better
+                // https://www.reddit.com/r/jpegxl/comments/l9ta2u/how_does_lossless_jpegxl_compared_to_png/
+                // https://twitter.com/jonsneyers/status/1346389917816008704?s=19
+                const isLossless = mime === 'image/png' ||
+                    (mime === 'image/webp' &&
+                        ((_b = (await originalImage.getImageMeta())) === null || _b === void 0 ? void 0 : _b.isLossless));
+                if (!isLossless) {
                     sourcesToGenerate.push({
-                        mime: 'image/webp',
-                        format: 'webp',
+                        mime: 'image/avif',
+                        format: 'avif',
                     });
-                case 'image/webp':
-                    // Only add AVIF source for lossy images
-                    // AVIF don't perform well on lossless images
-                    // PNG and WebP will perform better
-                    // https://www.reddit.com/r/jpegxl/comments/l9ta2u/how_does_lossless_jpegxl_compared_to_png/
-                    // https://twitter.com/jonsneyers/status/1346389917816008704?s=19
-                    const isLossless = mime === 'image/png' ||
-                        (mime === 'image/webp' &&
-                            ((_c = (await originalImage.getImageMeta())) === null || _c === void 0 ? void 0 : _c.isLossless));
-                    if (!isLossless) {
-                        sourcesToGenerate.push({
-                            mime: 'image/avif',
-                            format: 'avif',
-                        });
-                    }
-                case 'image/avif':
-                    // Nothing better
-                    break;
-            }
-            const sizes = img.attr('sizes');
-            for (const s of sourcesToGenerate) {
-                const sourceWithThisMimeType = picture.children(`source[type="${s.mime}"]`);
-                if (sourceWithThisMimeType.length > 0) {
-                    // Ignore the creation of sources that already exist
-                    continue;
-                }
-                const srcset = await generateSrcSet(htmlfile, originalImage, undefined, undefined, {
-                    toFormat: s.format,
-                });
-                if (!srcset) {
-                    // No sourceset generated
-                    // Image is too small or can't be compressed better
-                    continue;
                 }
-                const source = `<source ${sizes ? `sizes="${sizes}"` : ''} srcset="${srcset}" type="${s.mime}">`;
-                picture.prepend(source);
+            case 'image/avif':
+                // Nothing better
+                break;
+        }
+        const sizes = img.attr('sizes');
+        for (const s of sourcesToGenerate.reverse()) {
+            const sourceWithThisMimeType = picture.children(`source[type="${s.mime}"]`);
+            if (sourceWithThisMimeType.length > 0) {
+                // Ignore the creation of sources that already exist
+                continue;
             }
-            // Reorder sources to priority order 1)avif 2)webp
-            //
-            function popupSource(type) {
-                const nodes = picture.children(`source[type="${type}"]`);
-                picture.prepend(nodes);
+            const srcset = await generateSrcSet(htmlfile, originalImage, undefined, undefined, {
+                toFormat: s.format,
+            });
+            if (!srcset) {
+                // No sourceset generated
+                // Image is too small or can't be compressed better
+                continue;
             }
-            popupSource('image/webp');
-            popupSource('image/avif');
+            const source = `<source ${sizes ? `sizes="${sizes}"` : ''} srcset="${srcset}" type="${s.mime}">`;
+            img.before(source); // Append before this way existing sources are always top priority
         }
     }
 }
@@ -650,6 +619,10 @@ async function setImageSize(htmlfile, img, image) {
     let height = img.attr('height');
     let width_new = undefined;
     let height_new = undefined;
+    const img_fmt = await image.getExt();
+    if (img_fmt === 'svg' && !config.image.svg.add_width_and_height) {
+        return [];
+    }
     // Check valid values
     if (width !== undefined) {
         if (!isNumeric(width)) {
@@ -696,7 +669,7 @@ async function setImageSize(htmlfile, img, image) {
     }
     else {
         // No width or height provided - set both to image size
-        if ((await image.getExt()) === 'svg') {
+        if (img_fmt === 'svg') {
             // svg with no height and width has special sizing by browsers
             // They size it inside 300x150 unless they have width and height
             // attributes

package/dist/optimizers/img-external.js

@@ -1,7 +1,7 @@
 import * as path from 'path';
 import * as fs from 'fs/promises';
 import $state from '../state.js';
-import hasha from 'hasha';
+import { hashSync as hasha } from 'hasha';
 import { fileTypeFromBuffer } from 'file-type';
 import { addToCache, getFromCache } from '../cache.js';
 import { parse } from '../utils/cache-control-parser.js';

package/dist/utils/resource.js

@@ -43,7 +43,9 @@ export class Resource {
                 // TODO
                 // Check for lossless avif
                 case 'jpg':
-                    let sharpFile = await sharp(await this.getData(), { animated: true });
+                    let sharpFile = sharp(await this.getData(), {
+                        animated: true,
+                    });
                     const meta = await sharpFile.metadata();
                     const stats = await sharpFile.stats();
                     this.image_meta = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@divriots/jampack",
-  "version": "0.23.3",
+  "version": "0.24.0",
   "cache-version": {
     "img": "v1",
     "img-ext": "v1"
@@ -28,35 +28,35 @@
   "dependencies": {
     "@divriots/cheerio": "1.0.0-rc.12",
     "@proload/core": "^0.3.3",
-    "@swc/core": "^1.3.100",
+    "@swc/core": "^1.4.16",
     "add": "^2.0.6",
-    "browserslist": "^4.22.2",
-    "commander": "^10.0.1",
-    "critters": "^0.0.20",
+    "browserslist": "^4.23.0",
+    "commander": "^12.0.0",
+    "critters": "^0.0.22",
     "deepmerge": "^4.3.1",
-    "esbuild": "^0.19.9",
-    "file-type": "^18.7.0",
-    "globby": "^13.2.2",
-    "hasha": "^5.2.2",
+    "esbuild": "^0.20.2",
+    "file-type": "^19.0.0",
+    "globby": "^14.0.1",
+    "hasha": "^6.0.0",
     "html-minifier-terser": "^7.2.0",
     "kleur": "^4.1.5",
-    "lightningcss": "^1.22.1",
+    "lightningcss": "^1.24.1",
     "mini-svg-data-uri": "^1.4.4",
-    "ora": "^7.0.1",
+    "ora": "^8.0.1",
     "quicklink": "^2.3.0",
-    "sharp": "^0.33.0",
-    "svgo": "^3.1.0",
-    "table": "^6.8.1",
-    "undici": "^5.24.0",
-    "unpic": "^3.16.0"
+    "sharp": "^0.33.3",
+    "svgo": "^3.2.0",
+    "table": "^6.8.2",
+    "undici": "^6.13.0",
+    "unpic": "^3.18.0"
   },
   "devDependencies": {
     "@types/html-minifier-terser": "^7.0.2",
-    "@types/node": "^20.10.4",
+    "@types/node": "^20.12.7",
     "shx": "^0.3.3",
     "ts-node": "^10.9.2",
     "tslib": "^2.6.2",
-    "typescript": "^5.3.3"
+    "typescript": "^5.4.5"
   },
   "engines": {
     "node": ">=14.0.0"