@divriots/jampack 0.5.0 → 0.5.2

package/README.md

@@ -68,6 +68,8 @@ See [the list of features](https://jampack.divriots.com).
 - [WebComponents.dev](https://WebComponents.dev)
 - [LWC.studio](https://lwc.studio)
 - [Components.studio](https://components.studio)
+- [keycloak.ch](https://keycloak.ch)
+
 > Add yours here
 
 ## Why is it called `jampack`?

package/dist/compress.d.ts

@@ -1,7 +1,8 @@
+/// <reference types="node" resolution-mode="require"/>
 import sharp from 'sharp';
 import type { Image } from './types.js';
 export declare const compressImage: (data: Buffer, options: {
     resize?: sharp.ResizeOptions;
-    toFormat?: 'webp' | 'pjpg' | 'unchanged';
+    toFormat?: 'webp' | 'pjpg' | 'avif' | 'unchanged';
 }) => Promise<Image | undefined>;
 export declare function compress(exclude: string): Promise<void>;

package/dist/compress.js

@@ -1,8 +1,8 @@
 import * as fs from 'fs/promises';
 import * as path from 'path';
-import { optimize as svgo } from "svgo";
+import { optimize as svgo } from 'svgo';
 import { minify as htmlminifier } from 'html-minifier-terser';
-import { minify as csso } from "csso";
+import { minify as csso } from 'csso';
 import { formatBytes } from './utils.js';
 import sharp from 'sharp';
 import swc from '@swc/core';
@@ -10,7 +10,7 @@ import $state from './state.js';
 import { globby } from 'globby';
 import config from './config.js';
 import ora from 'ora';
-import { getFromCacheCompressImage, addToCacheCompressImage, computeCacheHash } from './cache.js';
+import { getFromCacheCompressImage, addToCacheCompressImage, computeCacheHash, } from './cache.js';
 async function compressJS(code) {
     const newjsresult = await swc.minify(code, { compress: true, mangle: true });
     return newjsresult.code;
@@ -31,6 +31,7 @@ const processFile = async (file, stats) => {
             case '.jpeg':
             case '.svg':
             case '.webp':
+            case '.avif':
                 const newImage = await compressImageFile(file);
                 if ((newImage === null || newImage === void 0 ? void 0 : newImage.data) && newImage.data.length < stats.size) {
                     writeData = newImage.data;
@@ -39,7 +40,12 @@ const processFile = async (file, stats) => {
             case '.html':
             case '.htm':
                 const htmldata = await fs.readFile(file);
-                const newhtmlData = await htmlminifier(htmldata.toString(), { minifyCSS: true, minifyJS: compressInlineJS, sortClassName: true, sortAttributes: true });
+                const newhtmlData = await htmlminifier(htmldata.toString(), {
+                    minifyCSS: true,
+                    minifyJS: compressInlineJS,
+                    sortClassName: true,
+                    sortAttributes: true,
+                });
                 writeData = newhtmlData;
                 break;
             case '.css':
@@ -66,7 +72,7 @@ const processFile = async (file, stats) => {
     const result = {
         action: path.extname(file),
         originalSize: stats.size,
-        compressedSize: stats.size
+        compressedSize: stats.size,
     };
     // Writedata
     if (writeData && writeData.length < result.originalSize) {
@@ -82,7 +88,7 @@ function createWebpOptions(opt) {
     return {
         nearLossless: opt.mode === 'lossless',
         quality: opt.quality,
-        effort: opt.effort
+        effort: opt.effort,
     };
 }
 export const compressImage = async (data, options) => {
@@ -102,72 +108,92 @@ export const compressImage = async (data, options) => {
         // Skip animated images for the moment.
         return undefined;
     }
-    let doSharp = false;
     let outputFormat;
-    switch (meta.format) {
-        case 'svg':
-            const newData = svgo(data, {
-                multipass: true,
-                plugins: [{
-                        name: "preset-default",
-                        params: {
-                            overrides: {
-                                removeViewBox: false,
-                            },
+    // Special case for svg
+    if (meta.format === 'svg') {
+        const newData = svgo(data, {
+            multipass: true,
+            plugins: [
+                {
+                    name: 'preset-default',
+                    params: {
+                        overrides: {
+                            removeViewBox: false,
                         },
-                    }
-                ],
-            });
-            if (newData.error || newData.modernError) {
-                console.log(`Error processing svg ${data}`);
-                return undefined;
-            }
-            return { format: 'svg', data: Buffer.from(newData.data, 'utf8') };
-        case 'png':
-            outputFormat = 'png';
-            if (toFormat === 'unchanged') {
+                    },
+                },
+            ],
+        });
+        if (newData.error || newData.modernError) {
+            console.log(`Error processing svg ${data}`);
+            return undefined;
+        }
+        return { format: 'svg', data: Buffer.from(newData.data, 'utf8') };
+    }
+    // The bitmap images
+    if (toFormat === 'unchanged') {
+        switch (meta.format) {
+            case 'png':
                 sharpFile = sharpFile.png(config.image.png.options || {});
-            }
-            doSharp = true;
-            break;
-        case 'jpeg':
-        case 'jpg':
-            outputFormat = 'jpg';
-            if (toFormat === 'unchanged') {
+                outputFormat = 'png';
+                break;
+            case 'jpeg':
+            case 'jpg':
                 sharpFile = sharpFile.jpeg(config.image.jpeg.options || {});
-            }
-            doSharp = true;
-            break;
-        case 'webp':
-            outputFormat = 'webp';
-            sharpFile = sharpFile.webp(createWebpOptions(config.image.webp.options_lossly) || {});
-            doSharp = true;
-            toFormat = 'unchanged'; // Don't need to convert to webP again
-            break;
-    }
-    if (doSharp) {
-        if (toFormat === 'webp') {
-            sharpFile = sharpFile.webp(createWebpOptions(meta.format === 'png' ? config.image.webp.options_lossless : config.image.webp.options_lossly));
-            outputFormat = 'webp';
-        }
-        else if (toFormat === 'pjpg') {
-            sharpFile = sharpFile.jpeg({ ...config.image.jpeg.options, progressive: true } || {});
-            outputFormat = 'jpg';
+                outputFormat = 'jpg';
+                break;
+            case 'webp':
+                sharpFile = sharpFile.webp(createWebpOptions(config.image.webp.options_lossly) || {});
+                outputFormat = 'webp';
+                break;
+            case 'avif':
+                sharpFile = sharpFile.avif();
+                outputFormat = 'avif';
+                break;
         }
-        if (((_a = options.resize) === null || _a === void 0 ? void 0 : _a.width) && ((_b = options.resize) === null || _b === void 0 ? void 0 : _b.height)) {
-            sharpFile = sharpFile.resize({ ...options.resize, fit: 'fill', withoutEnlargement: true });
+    }
+    else {
+        // To format
+        switch (toFormat) {
+            case 'pjpg':
+                sharpFile = sharpFile.jpeg({ ...config.image.jpeg.options, progressive: true } || {});
+                outputFormat = 'jpg';
+                break;
+            case 'webp':
+                sharpFile = sharpFile.webp(createWebpOptions(meta.format === 'png'
+                    ? config.image.webp.options_lossless
+                    : config.image.webp.options_lossly));
+                outputFormat = 'webp';
+                break;
+            case 'avif':
+                sharpFile = sharpFile.avif({ effort: 6 });
+                outputFormat = 'avif';
+                break;
         }
-        //
-        // Output image processed
-        //
-        // Add to cache
-        const outputImage = { format: outputFormat, data: await sharpFile.toBuffer() };
-        await addToCacheCompressImage(cacheHash, outputImage);
-        // Go
-        return outputImage;
     }
-    // Unknown input format or error while processing
-    return undefined;
+    // Unknow input format or output format
+    // Can't do
+    if (!outputFormat)
+        return undefined;
+    // If resize is requested
+    if (((_a = options.resize) === null || _a === void 0 ? void 0 : _a.width) && ((_b = options.resize) === null || _b === void 0 ? void 0 : _b.height)) {
+        sharpFile = sharpFile.resize({
+            ...options.resize,
+            fit: 'fill',
+            withoutEnlargement: true,
+        });
+    }
+    //
+    // Output image processed
+    //
+    // Add to cache
+    const outputImage = {
+        format: outputFormat,
+        data: await sharpFile.toBuffer(),
+    };
+    await addToCacheCompressImage(cacheHash, outputImage);
+    // Go
+    return outputImage;
 };
 const compressImageFile = async (file) => {
     const buffer = await fs.readFile(file);

package/dist/index.js

@@ -21,11 +21,9 @@ const logo = `     __                                    __
 `;
 console.log(logo);
 const program = new Command();
+program.name('jampack').description('Static website Optimizer').version(VERSION);
 program
-    .name('jampack')
-    .description('Static website Optimizer')
-    .version(VERSION);
-program.command('pack', { isDefault: true })
+    .command('pack', { isDefault: true })
     .description('todo')
     .argument('<dir>', 'Directory to pack')
     .option('--exclude <exclude>', 'Glob to exclude')
@@ -69,26 +67,51 @@ program.parse();
 function printSummary() {
     if ($state.summary.nbFiles > 0) {
         printTitle('Summary');
-        const dataTable = [['Action', 'Compressed', 'Original', 'Compressed', 'Gain']];
+        const dataTable = [
+            ['Action', 'Compressed', 'Original', 'Compressed', 'Gain'],
+        ];
         const config = {
             columns: [
                 { alignment: 'left' },
                 { alignment: 'right' },
                 { alignment: 'right' },
                 { alignment: 'right' },
-                { alignment: 'right' }
+                { alignment: 'right' },
             ],
             drawHorizontalLine: (lineIndex, rowCount) => {
-                return lineIndex === 0 || lineIndex === 1 || lineIndex === rowCount - 1 || lineIndex === rowCount;
-            }
+                return (lineIndex === 0 ||
+                    lineIndex === 1 ||
+                    lineIndex === rowCount - 1 ||
+                    lineIndex === rowCount);
+            },
         };
+        const unCompressedDataRows = [];
         Object.entries($state.summaryByExtension).forEach(([ext, summary]) => {
-            if (summary.dataLenCompressed < summary.dataLenUncompressed) {
-                const row = [ext, `${summary.nbFilesCompressed} / ${summary.nbFiles}`, formatBytes(summary.dataLenUncompressed), formatBytes(summary.dataLenCompressed), '-' + formatBytes(summary.dataLenUncompressed - summary.dataLenCompressed)];
+            const gain = summary.dataLenUncompressed - summary.dataLenCompressed;
+            const row = [
+                ext,
+                `${summary.nbFilesCompressed} / ${summary.nbFiles}`,
+                formatBytes(summary.dataLenUncompressed),
+                formatBytes(summary.dataLenCompressed),
+                gain > 0 ? '-' + formatBytes(gain) : '',
+            ];
+            if (gain > 0) {
                 dataTable.push(row);
             }
+            else {
+                unCompressedDataRows.push(row);
+            }
         });
-        const total = ['Total', `${$state.summary.nbFilesCompressed} / ${$state.summary.nbFiles}`, formatBytes($state.summary.dataLenUncompressed), formatBytes($state.summary.dataLenCompressed), '-' + formatBytes($state.summary.dataLenUncompressed - $state.summary.dataLenCompressed)];
+        // Add uncompress rows at the end
+        dataTable.push(...unCompressedDataRows);
+        const total = [
+            'Total',
+            `${$state.summary.nbFilesCompressed} / ${$state.summary.nbFiles}`,
+            formatBytes($state.summary.dataLenUncompressed),
+            formatBytes($state.summary.dataLenCompressed),
+            '-' +
+                formatBytes($state.summary.dataLenUncompressed - $state.summary.dataLenCompressed),
+        ];
         dataTable.push(total);
         console.log(table(dataTable, config));
     }
@@ -103,7 +126,7 @@ function printIssues() {
         console.log('');
         for (let [file, list] of $state.issues) {
             console.log('▶ ' + file + '\n');
-            list.forEach(issue => {
+            list.forEach((issue) => {
                 issueCount++;
                 console.log(`${kleur.bgYellow(` ${issue.type} `)} ${issue.msg}\n`);
             });

package/dist/optimize.js

@@ -1,33 +1,33 @@
-import { globby } from "globby";
-import * as path from "path";
-import * as fs from "fs/promises";
-import cheerio from "cheerio";
-import { isNumeric } from "./utils.js";
-import config from "./config.js";
-import { compressImage } from "./compress.js";
-import svgToMiniDataURI from "mini-svg-data-uri";
-import $state from "./state.js";
-import kleur from "kleur";
-import ora from "ora";
-import { isLocal, Resource, translateSrc } from "./utils/resource.js";
+import { globby } from 'globby';
+import * as path from 'path';
+import * as fs from 'fs/promises';
+import cheerio from 'cheerio';
+import { isNumeric } from './utils.js';
+import config from './config.js';
+import { compressImage } from './compress.js';
+import svgToMiniDataURI from 'mini-svg-data-uri';
+import $state from './state.js';
+import kleur from 'kleur';
+import ora from 'ora';
+import { isLocal, Resource, translateSrc } from './utils/resource.js';
 async function analyse(file) {
-    console.log("▶ " + file);
+    console.log('▶ ' + file);
     const html = (await fs.readFile(path.join($state.dir, file))).toString();
     const $ = cheerio.load(html, {
         withStartIndices: true,
         decodeEntities: false,
     });
     const theFold = getTheFold($);
-    const imgs = $("img");
+    const imgs = $('img');
     const imgsArray = [];
     imgs.each(async (index, imgElement) => {
         imgsArray.push(imgElement);
     });
     // Process images sequentially
-    const spinnerImg = ora({ prefixText: " " }).start();
+    const spinnerImg = ora({ prefixText: ' ' }).start();
     for (let i = 0; i < imgsArray.length; i++) {
         const imgElement = imgsArray[i];
-        spinnerImg.text = kleur.dim(`<img> [${i + 1}/${imgsArray.length}] ${$(imgElement).attr("src")} `);
+        spinnerImg.text = kleur.dim(`<img> [${i + 1}/${imgsArray.length}] ${$(imgElement).attr('src')} `);
         const isAboveTheFold = imgElement.startIndex < theFold;
         await processImage(file, $, imgElement, isAboveTheFold);
     }
@@ -37,21 +37,21 @@ async function analyse(file) {
     const issues = $state.issues.get(file);
     if (issues) {
         spinnerImg.fail();
-        console.log(kleur.red(`  ${issues.length} issue${issues.length > 1 ? "s" : ""}`));
+        console.log(kleur.red(`  ${issues.length} issue${issues.length > 1 ? 's' : ''}`));
     }
     else {
         spinnerImg.succeed();
     }
     // Remove the fold
     if (theFold) {
-        $("the-fold").remove();
+        $('the-fold').remove();
     }
     if (!$state.args.nowrite) {
         await fs.writeFile(path.join($state.dir, file), $.html());
     }
 }
 function getTheFold($) {
-    const theFolds = $("the-fold");
+    const theFolds = $('the-fold');
     if (!theFolds[0]) {
         return 0;
     }
@@ -64,10 +64,10 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
         /*
          * Attribute 'src'
          */
-        const attrib_src = img.attr("src");
+        const attrib_src = img.attr('src');
         if (!attrib_src) {
             $state.reportIssue(htmlfile, {
-                type: "warn",
+                type: 'warn',
                 msg: `Missing [src] on img - processing skipped.`,
             });
             return;
@@ -75,15 +75,15 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
         /*
          * Attribute 'alt'
          */
-        const attrib_alt = img.attr("alt");
+        const attrib_alt = img.attr('alt');
         if (attrib_alt === undefined) {
             $state.reportIssue(htmlfile, {
-                type: "a11y",
+                type: 'a11y',
                 msg: `Missing [alt] on img src="${attrib_src}" - Adding alt="" meanwhile.`,
             });
-            img.attr("alt", "");
+            img.attr('alt', '');
         }
-        if (attrib_src.startsWith("data:")) {
+        if (attrib_src.startsWith('data:')) {
             // Data URI image
             // TODO: try to compress it
             return;
@@ -91,26 +91,26 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
         /*
          * Attribute 'loading'
          */
-        const attr_loading = img.attr("loading");
+        const attr_loading = img.attr('loading');
         if (isAboveTheFold) {
-            img.removeAttr("loading");
-            img.attr("fetchpriority", "high");
+            img.removeAttr('loading');
+            img.attr('fetchpriority', 'high');
         }
         else {
             switch (attr_loading) {
                 case undefined:
                     // Go lazy by default
-                    img.attr("loading", "lazy");
+                    img.attr('loading', 'lazy');
                     break;
-                case "eager":
-                    img.removeAttr("loading");
+                case 'eager':
+                    img.removeAttr('loading');
                     break;
-                case "lazy":
+                case 'lazy':
                     // Don't touch it
                     break;
                 default:
                     $state.reportIssue(htmlfile, {
-                        type: "invalid",
+                        type: 'invalid',
                         msg: `Invalid [loading]="${attr_loading}" on img src="${attrib_src}"`,
                     });
             }
@@ -118,7 +118,7 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
         /*
          * Attribute 'decoding'
          */
-        img.attr("decoding", "async");
+        img.attr('decoding', 'async');
         if (!isLocal(attrib_src)) {
             // Image not local, don't touch it
             return;
@@ -130,7 +130,7 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
         // No file -> give up
         if (!originalImage) {
             $state.reportIssue(htmlfile, {
-                type: "erro",
+                type: 'erro',
                 msg: `Can't find img on disk src="${attrib_src}"`,
             });
             return;
@@ -145,7 +145,7 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
             // Let's avoid to optimize same images twice
             $state.optimizedFiles.add(originalImage.filePathAbsolute);
             newImage = await compressImage(await originalImage.getData(), {
-                toFormat: canBeProgressiveJpeg ? "pjpg" : "webp",
+                toFormat: canBeProgressiveJpeg ? 'pjpg' : 'webp',
             });
             if ((newImage === null || newImage === void 0 ? void 0 : newImage.data) &&
                 (newImage.data.length < (await originalImage.getLen()) ||
@@ -154,12 +154,13 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
                 // Do we need to add an new extension?
                 const newExtension = `.${newImage.format}`;
                 const additionalExtension = path.extname(originalImage.filePathAbsolute) === newExtension
-                    ? ""
+                    ? ''
                     : newExtension;
                 const newFilename = originalImage.filePathAbsolute + additionalExtension;
                 if (!$state.args.nowrite) {
                     fs.writeFile(newFilename, newImage.data);
                 }
+                // Mark new file as optimized
                 $state.compressedFiles.add(newFilename);
                 // Report compression result
                 $state.reportSummary({
@@ -169,7 +170,15 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
                     originalSize: await originalImage.getLen(),
                     compressedSize: newImage.data.length,
                 });
-                img.attr("src", attrib_src + additionalExtension);
+                img.attr('src', attrib_src + additionalExtension);
+            }
+            else {
+                // Report non-compression
+                $state.reportSummary({
+                    action: path.extname(originalImage.filePathAbsolute),
+                    originalSize: await originalImage.getLen(),
+                    compressedSize: await originalImage.getLen(),
+                });
             }
         }
         /*
@@ -183,22 +192,22 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
         if (newImage && newImage.data.length <= config.image.embed_size) {
             let datauri = undefined;
             switch (newImage.format) {
-                case "svg":
+                case 'svg':
                     datauri = svgToMiniDataURI(newImage.data.toString());
                     break;
-                case "webp":
-                    datauri = `data:image/webp;base64,${newImage.data.toString("base64")}`;
+                case 'webp':
+                    datauri = `data:image/webp;base64,${newImage.data.toString('base64')}`;
                     break;
-                case "jpg":
-                case "png":
+                case 'jpg':
+                case 'png':
                     // TODO but not possible in current code
                     break;
             }
             if (datauri) {
                 isEmbed = true;
-                img.attr("src", datauri);
-                img.removeAttr("loading");
-                img.removeAttr("decoding");
+                img.attr('src', datauri);
+                img.removeAttr('loading');
+                img.removeAttr('decoding');
                 $state.reportSummary({
                     action: `${newImage.format}->embed`,
                     originalSize: await originalImage.getLen(),
@@ -217,13 +226,13 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
         //
         // Stop here if svg
         //
-        if ((await originalImage.getExt()) === "svg") {
+        if ((await originalImage.getExt()) === 'svg') {
             return;
         }
         /*
          * Attribute 'srcset'
          */
-        const attr_srcset = img.attr("srcset");
+        const attr_srcset = img.attr('srcset');
         if (attr_srcset) {
             // If srcset is set, don't touch it.
             // The compress pass will compress the images
@@ -231,16 +240,22 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
         }
         else {
             // Generate image set
+            // Avif => Avif
+            // png, jpg, ... => WebP
+            const targetFormat = (await originalImage.getMime()) === 'image/avif' ? 'avif' : 'webp';
             const ext = path.extname(attrib_src);
             const fullbasename = attrib_src.slice(0, -ext.length);
-            const imageSrc = (addition) => `${fullbasename}${addition}.${canBeProgressiveJpeg ? "jpg" : "webp"}`;
+            const imageSrc = (addition) => `${fullbasename}${addition}.${canBeProgressiveJpeg ? 'jpg' : targetFormat}`;
             // Start from original image
-            let new_srcset = "";
+            let new_srcset = '';
             // Start reduction
             const step = 300; //px
             const ratio = w / h;
             let valueW = w - step;
             let valueH = Math.trunc(valueW / ratio);
+            let previousImageSize = (newImage === null || newImage === void 0 ? void 0 : newImage.data)
+                ? Math.min(newImage.data.length, await originalImage.getLen())
+                : await originalImage.getLen();
             while (valueW > config.image.srcset_min_width) {
                 const src = imageSrc(`@${valueW}w`);
                 const absoluteFilename = translateSrc($state.dir, path.dirname(htmlfile), src);
@@ -250,11 +265,19 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
                     $state.compressedFiles.add(absoluteFilename);
                     const compressedImage = await compressImage(await originalImage.getData(), {
                         resize: { width: valueW, height: valueH },
-                        toFormat: canBeProgressiveJpeg ? "pjpg" : "webp",
+                        toFormat: canBeProgressiveJpeg ? 'pjpg' : targetFormat,
                     });
-                    if ((compressedImage === null || compressedImage === void 0 ? void 0 : compressedImage.data) && !$state.args.nowrite) {
+                    if (!(compressedImage === null || compressedImage === void 0 ? void 0 : compressedImage.data) ||
+                        compressedImage.data.length >= previousImageSize) {
+                        // jampack was not able to compress below the original image
+                        // Let's move on
+                        continue;
+                    }
+                    if (!$state.args.nowrite) {
                         fs.writeFile(absoluteFilename, compressedImage.data);
                     }
+                    // Add previous smaller file size
+                    previousImageSize = compressedImage.data.length;
                 }
                 new_srcset += `, ${src} ${valueW}w`;
                 // reduce size
@@ -262,28 +285,28 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
                 valueH = Math.trunc(valueW / ratio);
             }
             if (new_srcset) {
-                img.attr("srcset", `${img.attr("src")} ${w}w` + new_srcset);
+                img.attr('srcset', `${img.attr('src')} ${w}w` + new_srcset);
             }
         }
     }
     catch (e) {
         $state.reportIssue(htmlfile, {
-            type: "erro",
+            type: 'erro',
             msg: e.message ||
                 `Unexpected error while processing image: ${JSON.stringify(e)}`,
         });
     }
 }
 async function setImageSize(htmlfile, img, image) {
-    let width = img.attr("width");
-    let height = img.attr("height");
+    let width = img.attr('width');
+    let height = img.attr('height');
     let width_new = undefined;
     let height_new = undefined;
     // Check valid values
     if (width !== undefined) {
         if (!isNumeric(width)) {
             $state.reportIssue(htmlfile, {
-                type: "warn",
+                type: 'warn',
                 msg: `Invalid width attribute "${width}" format - overriding`,
             });
             width = undefined;
@@ -292,7 +315,7 @@ async function setImageSize(htmlfile, img, image) {
     if (height !== undefined) {
         if (!isNumeric(height)) {
             $state.reportIssue(htmlfile, {
-                type: "warn",
+                type: 'warn',
                 msg: `Invalid height attribute "${height}" format - overriding`,
             });
             height = undefined;
@@ -316,7 +339,7 @@ async function setImageSize(htmlfile, img, image) {
         const imageRatio = Math.round(originalRatio * 10) / 10;
         if (providedRatio !== imageRatio) {
             $state.reportIssue(htmlfile, {
-                type: "warn",
+                type: 'warn',
                 msg: `Image aspect ratio in HTML (${providedRatio}) differs from image aspect ratio (${imageRatio}) - fix width and height or let jampack fill them.`,
             });
         }
@@ -334,20 +357,20 @@ async function setImageSize(htmlfile, img, image) {
     }
     else {
         // No width or height provided - set both to image size
-        if ((await image.getExt()) === "svg") {
+        if ((await image.getExt()) === 'svg') {
             // svg with no height and width has special sizing by browsers
             // They size it inside 300x150 unless they have width and height
             // attributes
             // Load svg
             const c = cheerio.load(await image.getData(), {});
-            const svg = c("svg").first();
-            const svg_viewbox = svg.attr("viewbox"); // bug in cheerio here, should be "viewBox"
-            const svg_width = svg.attr("width");
-            const svg_height = svg.attr("height");
+            const svg = c('svg').first();
+            const svg_viewbox = svg.attr('viewbox'); // bug in cheerio here, should be "viewBox"
+            const svg_width = svg.attr('width');
+            const svg_height = svg.attr('height');
             // Calculate aspect ratio from viewbox
             let svg_aspectratio_from_viewbox = undefined;
             if (svg_viewbox) {
-                const box = svg_viewbox.split(" ");
+                const box = svg_viewbox.split(' ');
                 const w = parseInt(box[2], 10);
                 const h = parseInt(box[3], 10);
                 svg_aspectratio_from_viewbox = w / h;
@@ -395,17 +418,17 @@ async function setImageSize(htmlfile, img, image) {
     if (width_new !== undefined && height_new !== undefined) {
         const result_w = Math.round(width_new);
         const result_h = Math.round(height_new);
-        img.attr("width", result_w.toFixed(0));
-        img.attr("height", result_h.toFixed(0));
+        img.attr('width', result_w.toFixed(0));
+        img.attr('height', result_h.toFixed(0));
         return [result_w, result_h];
     }
     // Something when wrong
     throw new Error(`Unexpected issue when resolving image size "${image.src}"`);
 }
 export async function optimize(exclude) {
-    const glob = ["**/*.{htm,html}"];
+    const glob = ['**/*.{htm,html}'];
     if (exclude)
-        glob.push("!" + exclude);
+        glob.push('!' + exclude);
     const paths = await globby(glob, { cwd: $state.dir });
     // Sequential async
     for (const file of paths) {

package/dist/state.js

@@ -9,7 +9,7 @@ export class GlobalState {
             nbFiles: 0,
             nbFilesCompressed: 0,
             dataLenCompressed: 0,
-            dataLenUncompressed: 0
+            dataLenUncompressed: 0,
         };
         this.summaryByExtension = {};
     }
@@ -34,7 +34,7 @@ export class GlobalState {
                     nbFiles: 0,
                     nbFilesCompressed: 0,
                     dataLenUncompressed: 0,
-                    dataLenCompressed: 0
+                    dataLenCompressed: 0,
                 };
                 this.summaryByExtension[r.action] = summary;
             }
@@ -44,7 +44,6 @@ export class GlobalState {
             summary.dataLenCompressed += r.compressedSize;
         }
     }
-    ;
 }
 const state = new GlobalState();
 export default state;

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="node" resolution-mode="require"/>
-export type ImageFormat = 'webp' | 'svg' | 'jpg' | 'png' | undefined;
+export type ImageFormat = 'webp' | 'svg' | 'jpg' | 'png' | 'avif' | undefined;
 export type Image = {
     format: ImageFormat;
     data: Buffer;

package/dist/utils/resource.js

@@ -27,13 +27,14 @@ export class Resource {
                 case 'png':
                 case 'webp':
                 case 'tif':
+                case 'avif':
                     let sharpFile = await sharp(await this.getData(), { animated: true });
                     const meta = await sharpFile.metadata();
                     this.image_meta = {
                         width: meta.width,
                         height: meta.height,
                         isProgressive: meta.isProgressive || false,
-                        hasAlpha: meta.hasAlpha || false
+                        hasAlpha: meta.hasAlpha || false,
                     };
                     break;
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@divriots/jampack",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Packer for static websites",
   "author": "Georges Gomes @georges-gomes",
   "bin": {
@@ -47,16 +47,16 @@
     "tslib": "^2.4.1",
     "typescript": "^4.9.3"
   },
-  "scripts": {
-    "watch": "pnpm build --watch",
-    "try": "shx rm -fr demo && cp -R demo_ref demo && node ./dist/index.js",
-    "build": "shx rm -rf dist && tsc -b",
-    "lint": "eslint . --ext .ts --config .eslintrc"
-  },
   "engines": {
     "node": ">=14.0.0"
   },
   "bugs": "https://github.com/divriots/jampack/issues",
   "keywords": [],
-  "types": "dist/index.d.ts"
-}
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "watch": "pnpm build --watch",
+    "try": "shx rm -fr demo && cp -R demo_avif demo && node ./dist/index.js ./demo --nocache",
+    "build": "shx rm -rf dist && tsc -b",
+    "lint": "eslint . --ext .ts --config .eslintrc"
+  }
+}