@divriots/jampack 0.8.0 → 0.9.0

package/README.md

@@ -43,8 +43,8 @@ Optimizes static websites for best user experience and best Core Web Vitals scor
 - [Optimize assets above-the-fold](https://jampack.divriots.com/features/optimize-above-the-fold)
 - [Embed small images](https://jampack.divriots.com/features/embed-small-images)
 - [Compress all assets](https://jampack.divriots.com/features/compress-all)
-- [Fixes things automatically](https://jampack.divriots.com/features/autofixes)
-- [Raises warnings](https://jampack.divriots.com/features/warnings)
+- [Fix things automatically](https://jampack.divriots.com/features/autofixes)
+- [Raise warnings](https://jampack.divriots.com/features/warnings)
 
 ## Quick use
 

package/dist/cache.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="node" resolution-mode="require"/>
 import type { Image } from './compressors/images.js';
-declare function cleanCache(): Promise<void>;
+declare function cleanCache(full: boolean): Promise<void>;
 declare function computeCacheHash(buffer: Buffer, options?: any): string;
 declare function getFromCacheCompressImage(hash: string): Promise<Image | undefined>;
 declare function addToCacheCompressImage(hash: string, image: Image): Promise<void>;

package/dist/cache.js

@@ -4,13 +4,29 @@ import * as fs from 'fs/promises';
 import { VERSION } from './version.js';
 import $state from './state.js';
 const CACHE_FOLDER = '.jampack/cache';
-async function cleanCache() {
+async function cleanCache(full) {
+    if (full) {
+        try {
+            await fs.rm(CACHE_FOLDER, { recursive: true });
+        }
+        catch (e) {
+            // Nothing to do, probably not present
+        }
+        return;
+    }
+    // List versions in cache
+    let files;
     try {
-        await fs.rm(CACHE_FOLDER, { recursive: true });
+        files = await fs.readdir(CACHE_FOLDER);
     }
     catch (e) {
-        // Nothing to do, probably not present
+        // Nothing to do probably no cache available
+        return;
     }
+    // Delete old cache versions
+    await files
+        .filter((f) => f !== VERSION)
+        .forEach(async (f) => fs.rmdir(path.join(CACHE_FOLDER, f), {}));
 }
 function computeCacheHash(buffer, options) {
     if ($state.args.nocache) {

package/dist/compressors/images.d.ts

@@ -2,14 +2,14 @@
 import sharp from 'sharp';
 import { MimeType } from 'file-type';
 export type ImageMimeType = MimeType | 'image/svg+xml';
-export type ImageFormat = 'webp' | 'svg' | 'jpg' | 'png' | 'avif' | undefined;
+export declare const AllImageFormat: string[];
+export type ImageFormat = typeof AllImageFormat[number] | undefined;
 export type Image = {
     format: ImageFormat;
     data: Buffer;
 };
 export type ImageOutputOptions = {
     resize?: sharp.ResizeOptions;
-    toFormat?: 'webp' | 'avif' | 'png' | 'jpeg' | 'unchanged';
-    progressive?: boolean;
+    toFormat?: 'webp' | 'avif' | 'png' | 'jpeg' | 'jpeg+progressive' | 'unchanged';
 };
 export declare function compressImage(data: Buffer, options: ImageOutputOptions): Promise<Image | undefined>;

package/dist/compressors/images.js

@@ -2,6 +2,7 @@ import sharp from 'sharp';
 import { optimize as svgo } from 'svgo';
 import { getFromCacheCompressImage, addToCacheCompressImage, computeCacheHash, } from '../cache.js';
 import config from '../config.js';
+export const AllImageFormat = ['webp', 'svg', 'jpg', 'png', 'avif'];
 function createWebpOptions(opt) {
     return {
         nearLossless: opt.mode === 'lossless',
@@ -79,13 +80,15 @@ export async function compressImage(data, options) {
         // To format
         switch (toFormat) {
             case 'jpeg':
-                sharpFile = sharpFile.jpeg({ ...config.image.jpeg.options, progressive: options.progressive } ||
-                    {});
+                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, progressive: options.progressive } ||
-                    {});
+                sharpFile = sharpFile.png({ ...config.image.png.options } || {});
                 outputFormat = 'png';
                 break;
             case 'webp':

package/dist/config.js

@@ -1,6 +1,6 @@
 const default_options = {
     image: {
-        embed_size: 400,
+        embed_size: 1500,
         srcset_min_width: 640,
         compress: true,
         jpeg: {

package/dist/index.js

@@ -29,6 +29,7 @@ program
     .command('pack', { isDefault: true })
     .description('todo')
     .argument('<dir>', 'Directory to pack')
+    .option('--include <include>', 'Glob to include')
     .option('--exclude <exclude>', 'Glob to exclude')
     .option('--nowrite', 'No write')
     .option('--fast', 'Go fast. Mostly no compression just checks for issues.')
@@ -45,13 +46,11 @@ program
         fast();
     }
     // Clean cache
-    if (options.cleancache) {
-        cleanCache();
-    }
+    cleanCache(options.cleancache);
     if (!options.onlycomp) {
         printTitle('PASS 1 - Optimizing');
         console.time('Done');
-        await optimize(options.exclude);
+        await optimize(options.include, options.exclude);
         console.timeEnd('Done');
     }
     if (!options.onlyoptim && !options.fast) {

package/dist/optimize.d.ts

@@ -1 +1 @@
-export declare function optimize(exclude?: string): Promise<void>;
+export declare function optimize(include?: string, exclude?: string): Promise<void>;

package/dist/optimize.js

@@ -71,15 +71,29 @@ async function analyse(file) {
 }
 function getTheFold($) {
     const theFolds = $('the-fold');
-    if (!theFolds[0]) {
-        return 0;
-    }
-    // Pickup the position of the last `<the-fold>`
-    // @ts-ignore
-    return theFolds[theFolds.length - 1].startIndex;
+    // If you have the-fold
+    if (theFolds[0]) {
+        // Pickup the position of the last `<the-fold>`
+        // @ts-ignore
+        return theFolds[theFolds.length - 1].startIndex;
+    }
+    const theMains = $('main');
+    // If you have main
+    if (theMains[0]) {
+        // @ts-ignore
+        return theMains[0].startIndex + 5000;
+    }
+    const theBodys = $('body');
+    // If you have main
+    if (theBodys[0]) {
+        // Pickup the position of the last `<the-fold>`
+        // @ts-ignore
+        return theBodys[0].startIndex + 10000;
+    }
+    return 0;
 }
 async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
-    var _a;
+    var _a, _b;
     const img = $(imgElement);
     /*
      * Attribute 'src'
@@ -161,9 +175,24 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
     let newImage;
     const isInPicture = (_a = img.parent()) === null || _a === void 0 ? void 0 : _a.is('picture');
     let srcToFormat = 'unchanged';
-    if (isInPicture || isAboveTheFold) {
+    if (isAboveTheFold) {
+        // Above the fold, nothing beats progressive JPEG for LCP
+        // but it's not transparent
+        if ((_b = (await originalImage.getImageMeta())) === null || _b === void 0 ? void 0 : _b.hasAlpha) {
+            // TODO some images have Alpha metadata but have 0 alpha pixels
+            // We should be able to detect these to take advantage of Progressive JPEG
+            srcToFormat =
+                (await originalImage.getMime()) === 'image/avif' ||
+                    (await originalImage.getMime()) === 'image/webp'
+                    ? 'unchanged'
+                    : 'webp';
+        }
+        else {
+            srcToFormat = 'jpeg+progressive';
+        }
+    }
+    else if (isInPicture) {
         // srcToFormat should not change if in picture
-        // If above the fold, we will create progressive images
     }
     else {
         // Let's go to avif -> avif , webp -> webp, else * -> webp
@@ -178,10 +207,10 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
         $state.optimizedFiles.add(originalImage.filePathAbsolute);
         newImage = await compressImage(await originalImage.getData(), {
             toFormat: srcToFormat,
-            progressive: isAboveTheFold,
         });
         if ((newImage === null || newImage === void 0 ? void 0 : newImage.data) &&
-            (newImage.data.length < (await originalImage.getLen()) || isAboveTheFold) // Always take the new image above to fold to benefit from progressive
+            (newImage.data.length < (await originalImage.getLen()) ||
+                srcToFormat === 'jpeg+progressive') // Progressive override all even if worse
         ) {
             // Do we need to add an new extension?
             const newExtension = `.${newImage.format}`;
@@ -205,6 +234,8 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
             img.attr('src', attrib_src + additionalExtension);
         }
         else {
+            // Drop new Image
+            newImage = undefined;
             // Report non-compression
             $state.reportSummary({
                 action: path.extname(originalImage.filePathAbsolute),
@@ -215,46 +246,61 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
     }
     /*
      * Embed small images
-     *
-     * TODO this is only embedding images that have
-     * successfully be compressed. Should embed original
-     * image if it fits the size.
+     * Only above the fold
      */
     let isEmbed = false;
-    if (newImage && newImage.data.length <= config.image.embed_size) {
-        let datauri = undefined;
-        switch (newImage.format) {
-            case 'svg':
-                datauri = svgToMiniDataURI(newImage.data.toString());
-                break;
-            case 'webp':
-                datauri = `data:image/webp;base64,${newImage.data.toString('base64')}`;
-                break;
-            case 'jpg':
-            case 'png':
-                // TODO but not possible in current code
-                break;
+    let imageToEmbed;
+    if (isAboveTheFold) {
+        imageToEmbed = newImage;
+        // If new image was not generated then take the old image
+        if (!imageToEmbed) {
+            imageToEmbed = {
+                data: await originalImage.getData(),
+                format: await originalImage.getImageFormat(),
+            };
         }
-        if (datauri) {
-            isEmbed = true;
-            img.attr('src', datauri);
-            img.removeAttr('loading');
-            img.removeAttr('decoding');
-            $state.reportSummary({
-                action: `${newImage.format}->embed`,
-                originalSize: await originalImage.getLen(),
-                compressedSize: newImage.data.length,
-            });
+        // Only embed small images
+        // matching the embed size
+        if (imageToEmbed.data.length <= config.image.embed_size) {
+            let datauri = undefined;
+            const ifmt = imageToEmbed.format;
+            switch (ifmt) {
+                case 'svg':
+                    datauri = svgToMiniDataURI(imageToEmbed.data.toString());
+                    break;
+                case 'webp':
+                case 'jpg':
+                case 'png':
+                    datauri = `data:image/${ifmt === 'jpg' ? 'jpeg' : ifmt};base64,${imageToEmbed.data.toString('base64')}`;
+                    break;
+            }
+            if (datauri) {
+                isEmbed = true;
+                img.attr('src', datauri);
+                img.removeAttr('loading');
+                img.removeAttr('decoding');
+                $state.reportSummary({
+                    action: `${imageToEmbed.format}->embed`,
+                    originalSize: await originalImage.getLen(),
+                    compressedSize: imageToEmbed.data.length,
+                });
+            }
         }
     }
-    if (isEmbed) {
-        // Image is embed, no need for more processing
+    if (isEmbed && (imageToEmbed === null || imageToEmbed === void 0 ? void 0 : imageToEmbed.format) === 'svg') {
+        // SVG has a different behaviour with image size
+        // Needs to be tested more
+        // For the moment skip image size for SVG
         return;
     }
     /*
      * Attribute 'width' & 'height'
      */
     const [w, h] = await setImageSize(htmlfile, img, originalImage);
+    if (isEmbed) {
+        // Image is embed, no need for more processing
+        return;
+    }
     //
     // Stop here if svg
     //
@@ -275,7 +321,7 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
         // of the srcset
     }
     else {
-        const new_srcset = await generateSrcSet(htmlfile, originalImage, attrib_src, w, h, true, imageLengthToBeatInSrcSet, { toFormat: srcToFormat, progressive: isAboveTheFold });
+        const new_srcset = await generateSrcSet(htmlfile, originalImage, img.attr('src'), imageLengthToBeatInSrcSet, { toFormat: srcToFormat });
         if (new_srcset !== null) {
             img.attr('srcset', new_srcset);
         }
@@ -289,68 +335,87 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
      */
     if (isInPicture) {
         const picture = img.parent();
-        // List of possible sources to generate
-        //
-        const sourcesToGenerate = [];
-        // Only try to generate better images
-        // TODO generate more compatible formats (avif => webp/jpeg/png)
-        //
-        switch (await originalImage.getMime()) {
-            case 'image/jpeg':
-            case 'image/png':
-                sourcesToGenerate.push({
-                    mime: 'image/webp',
-                    format: 'webp',
-                });
-            case 'image/webp':
-                sourcesToGenerate.push({
-                    mime: 'image/avif',
-                    format: 'avif',
-                });
-            case 'image/avif':
-                // Nothing better
-                break;
+        if (isAboveTheFold && srcToFormat === 'jpeg+progressive') {
+            // We don't need anything else than jpeg progressive above the fold
+            const nodes = picture.children(`source`);
+            nodes.remove();
         }
-        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;
+        else {
+            // List of possible sources to generate
+            //
+            const sourcesToGenerate = [];
+            // Only try to generate better images
+            // TODO generate more compatible formats (avif => webp/jpeg/png)
+            //
+            switch (await originalImage.getMime()) {
+                case 'image/jpeg':
+                case 'image/png':
+                    sourcesToGenerate.push({
+                        mime: 'image/webp',
+                        format: 'webp',
+                    });
+                case 'image/webp':
+                    sourcesToGenerate.push({
+                        mime: 'image/avif',
+                        format: 'avif',
+                    });
+                case 'image/avif':
+                    // Nothing better
+                    break;
             }
-            const srcset = await generateSrcSet(htmlfile, originalImage, attrib_src, w, h, false, undefined, {
-                toFormat: s.format,
-                progressive: false, // avif or webp don't have progressive support
-            });
-            if (!srcset) {
-                // No sourceset generated
-                // Image is too small or can't be compressed better
-                continue;
+            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);
             }
-            const source = `<source srcset="${srcset}" type="${s.mime}">`;
-            picture.prepend(source);
-        }
-        // Reorder sources to priority order 1)avif 2)webp
-        //
-        function popupSource(type) {
-            const nodes = picture.children(`source[type="${type}"]`);
-            picture.prepend(nodes);
+            // Reorder sources to priority order 1)avif 2)webp
+            //
+            function popupSource(type) {
+                const nodes = picture.children(`source[type="${type}"]`);
+                picture.prepend(nodes);
+            }
+            popupSource('image/webp');
+            popupSource('image/avif');
         }
-        popupSource('image/webp');
-        popupSource('image/avif');
     }
 }
-async function generateSrcSet(htmlfile, originalImage, attrib_src, imageWidth, imageHeight, startWithOriginalImage, originalImageLengthToBeat, options) {
-    const ext = path.extname(attrib_src);
-    const fullbasename = attrib_src.slice(0, -ext.length);
-    const imageSrc = (addition) => `${fullbasename}${addition}${options.toFormat === 'unchanged' ? ext : '.' + options.toFormat}`;
+async function generateSrcSet(htmlfile, originalImage, startSrc, startSrcLength, options) {
+    const ext = path.extname(originalImage.src);
+    const fullbasename = originalImage.src.slice(0, -ext.length);
+    const imageSrc = (addition) => {
+        var _a;
+        return `${fullbasename}${addition}${options.toFormat === 'unchanged'
+            ? ext
+            : `.${(_a = options.toFormat) === null || _a === void 0 ? void 0 : _a.split('+')[0]}`}`;
+    };
     // Start from original image
     let new_srcset = '';
+    const meta = await originalImage.getImageMeta();
+    const imageWidth = (meta === null || meta === void 0 ? void 0 : meta.width) || 0;
+    const imageHeight = (meta === null || meta === void 0 ? void 0 : meta.height) || 0;
+    if (!imageWidth || !imageHeight) {
+        // Forget about srcset
+        return null;
+    }
     // Start reduction
     const step = 300; //px
     const ratio = imageWidth / imageHeight;
-    let valueW = !startWithOriginalImage ? imageWidth : imageWidth - step;
+    let valueW = !startSrc ? imageWidth : imageWidth - step;
     let valueH = Math.trunc(valueW / ratio);
-    let previousImageSize = originalImageLengthToBeat || Number.MAX_VALUE;
+    let previousImageSize = startSrcLength || Number.MAX_VALUE;
     while (valueW >= config.image.srcset_min_width) {
         const src = imageSrc(`@${valueW}w`);
         const absoluteFilename = translateSrc($state.dir, path.dirname(htmlfile), src);
@@ -383,8 +448,8 @@ async function generateSrcSet(htmlfile, originalImage, attrib_src, imageWidth, i
         valueH = Math.trunc(valueW / ratio);
     }
     if (new_srcset) {
-        return startWithOriginalImage
-            ? `${attrib_src} ${imageWidth}w` + new_srcset
+        return startSrc
+            ? `${startSrc} ${imageWidth}w` + new_srcset
             : new_srcset.slice(2);
     }
     return null;
@@ -508,8 +573,8 @@ async function setImageSize(htmlfile, img, image) {
     // Something when wrong
     throw new Error(`Unexpected issue when resolving image size "${image.src}"`);
 }
-export async function optimize(exclude) {
-    const glob = ['**/*.{htm,html}'];
+export async function optimize(include, exclude) {
+    const glob = include ? [include] : ['**/*.{htm,html}'];
     if (exclude)
         glob.push('!' + exclude);
     const paths = await globby(glob, { cwd: $state.dir });

package/dist/utils/resource.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="node" resolution-mode="require"/>
 import { FileExtension, MimeType } from 'file-type';
+import { ImageFormat } from '../compressors/images.js';
 type ImageMeta = {
     width: number | undefined;
     height: number | undefined;
@@ -21,6 +22,7 @@ export declare class Resource {
     getImageMeta(): Promise<ImageMeta | null | undefined>;
     getLen(): Promise<number>;
     getExt(): Promise<FileExtension | 'svg'>;
+    getImageFormat(): Promise<ImageFormat | undefined>;
     getMime(): Promise<MimeType | 'image/svg+xml'>;
     private loadFileType;
     static loadResource(projectRoot: string, relativeFile: string, src: string): Promise<Resource | undefined>;

package/dist/utils/resource.js

@@ -3,6 +3,7 @@ import * as path from 'path';
 import * as fs from 'fs/promises';
 import { fileTypeFromBuffer } from 'file-type';
 import sharp from 'sharp';
+import { AllImageFormat } from '../compressors/images.js';
 /**
  * File extension, mime and data are loaded only on demand, then cached.
  */
@@ -53,6 +54,12 @@ export class Resource {
         }
         return this.ext;
     }
+    async getImageFormat() {
+        const ext = (await this.getExt());
+        if (AllImageFormat.includes(ext))
+            return ext;
+        return undefined;
+    }
     async getMime() {
         if (this.mime === undefined) {
             await this.loadFileType();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@divriots/jampack",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Packer for static websites",
   "author": "Georges Gomes @georges-gomes",
   "bin": {
@@ -49,7 +49,7 @@
   },
   "scripts": {
     "watch": "pnpm build --watch",
-    "try": "shx rm -fr demo && cp -R demo_avif demo && node ./dist/index.js ./demo --nocache",
+    "try": "shx rm -fr demo && cp -R demo_wcd demo && node ./dist/index.js ./demo --nocache --onlyoptim",
     "build": "shx rm -rf dist && tsc -b",
     "lint": "eslint . --ext .ts --config .eslintrc"
   },