@divriots/jampack 0.2.3 → 0.4.0

package/dist/optimize.js

@@ -1,30 +1,32 @@
-import { globby } from 'globby';
-import * as path from 'path';
-import * as fs from 'fs/promises';
-import cheerio from 'cheerio';
-import { isLocal, isNumeric, translateSrc } from './utils.js';
-import sharp from "sharp";
-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 { 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, {});
-    const imgs = $('img');
+    const $ = cheerio.load(html, { withStartIndices: true });
+    const theFold = getTheFold($);
+    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')} `);
-        await processImage(file, $, imgElement);
+        spinnerImg.text = kleur.dim(`<img> [${i + 1}/${imgsArray.length}] ${$(imgElement).attr("src")} `);
+        const isAboveTheFold = imgElement.startIndex < theFold;
+        await processImage(file, $, imgElement, isAboveTheFold);
     }
     // Reset spinner
     spinnerImg.text = kleur.dim(`<img> [${imgsArray.length}/${imgsArray.length}]`);
@@ -32,105 +34,137 @@ 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();
+    }
     if (!$state.args.nowrite) {
         await fs.writeFile(path.join($state.dir, file), $.html());
     }
 }
-async function processImage(htmlfile, $, imgElement) {
+function getTheFold($) {
+    const theFolds = $("the-fold");
+    if (!theFolds[0]) {
+        return 0;
+    }
+    // @ts-ignore
+    return theFolds[0].startIndex;
+}
+async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
     try {
         const img = $(imgElement);
         /*
-        * Attribute 'src'
-        */
-        const attrib_src = img.attr('src');
+         * Attribute 'src'
+         */
+        const attrib_src = img.attr("src");
         if (!attrib_src) {
-            $state.reportIssue(htmlfile, { msg: `Missing [src] on img - processing skipped.` });
+            $state.reportIssue(htmlfile, {
+                type: "warn",
+                msg: `Missing [src] on img - processing skipped.`,
+            });
             return;
         }
         /*
-        * Attribute 'alt'
-        */
-        const attrib_alt = img.attr('alt');
+         * Attribute 'alt'
+         */
+        const attrib_alt = img.attr("alt");
         if (attrib_alt === undefined) {
-            $state.reportIssue(htmlfile, { msg: `Missing [alt] on img src="${attrib_src}" - Adding alt="" meanwhile.` });
-            img.attr('alt', "");
+            $state.reportIssue(htmlfile, {
+                type: "a11y",
+                msg: `Missing [alt] on img src="${attrib_src}" - Adding alt="" meanwhile.`,
+            });
+            img.attr("alt", "");
         }
-        if (attrib_src.startsWith('data:')) {
+        if (attrib_src.startsWith("data:")) {
             // Data URI image
             // TODO: try to compress it
             return;
         }
+        /*
+         * Attribute 'loading'
+         */
+        const attr_loading = img.attr("loading");
+        if (isAboveTheFold) {
+            img.removeAttr("loading");
+            img.attr("fetchpriority", "high");
+        }
+        else {
+            switch (attr_loading) {
+                case undefined:
+                    // Go lazy by default
+                    img.attr("loading", "lazy");
+                    break;
+                case "eager":
+                    img.removeAttr("loading");
+                    break;
+                case "lazy":
+                    // Don't touch it
+                    break;
+                default:
+                    $state.reportIssue(htmlfile, {
+                        type: "invalid",
+                        msg: `Invalid [loading]="${attr_loading}" on img src="${attrib_src}"`,
+                    });
+            }
+        }
+        /*
+         * Attribute 'decoding'
+         */
+        img.attr("decoding", "async");
         if (!isLocal(attrib_src)) {
             // Image not local, don't touch it
             return;
         }
         /*
-        * Attribute 'loading'
-        */
-        const attr_loading = img.attr('loading');
-        switch (attr_loading) {
-            case undefined:
-                // Go lazy by default
-                img.attr('loading', 'lazy');
-                break;
-            case 'eager':
-                img.removeAttr('loading');
-                break;
-            case 'lazy':
-                // Don't touch it
-                break;
-            default:
-                $state.reportIssue(htmlfile, { msg: `Invalid [loading]="${attr_loading}" on img src="${attrib_src}"` });
-        }
-        /*
-        * Attribute 'decoding'
-        */
-        img.attr('decoding', 'async');
-        /*
-        * Loading image
-        */
-        const absoluteImgPath = translateSrc($state.dir, path.dirname(htmlfile), attrib_src);
-        // file exists?
-        try {
-            await fs.stat(absoluteImgPath);
-        }
-        catch (e) {
-            $state.reportIssue(htmlfile, { msg: `Can't find img src="${attrib_src}" in ${absoluteImgPath}` });
+         * Loading image
+         */
+        const originalImage = await Resource.loadResource($state.dir, htmlfile, attrib_src);
+        // No file -> give up
+        if (!originalImage) {
+            $state.reportIssue(htmlfile, {
+                type: "erro",
+                msg: `Can't find img on disk src="${attrib_src}"`,
+            });
             return;
         }
-        // Read file
-        const originalData = await fs.readFile(absoluteImgPath);
-        const sharpFile = sharp(absoluteImgPath);
-        const meta = await sharpFile.metadata();
         /*
          * Compress image to WebP
          */
         let newImage;
-        if (!$state.optimizedFiles.has(absoluteImgPath)) {
+        if (!$state.optimizedFiles.has(originalImage.filePathAbsolute)) {
             // Let's avoid to optimize same images twice
-            $state.optimizedFiles.add(absoluteImgPath);
-            newImage = await compressImage(originalData, {}, true);
-            if ((newImage === null || newImage === void 0 ? void 0 : newImage.data) && newImage.data.length < originalData.length) {
+            $state.optimizedFiles.add(originalImage.filePathAbsolute);
+            newImage = await compressImage(await originalImage.getData(), {
+                toFormat: isAboveTheFold ? "pjpg" : "webp",
+            });
+            if ((newImage === null || newImage === void 0 ? void 0 : newImage.data) &&
+                (newImage.data.length < (await originalImage.getLen()) ||
+                    isAboveTheFold) // Progressive jpg above the fold should get replaced even if bigger
+            ) {
                 // Do we need to add an new extension?
                 const newExtension = `.${newImage.format}`;
-                const additionalExtension = path.extname(absoluteImgPath) === newExtension ? '' : newExtension;
-                const newFilename = absoluteImgPath + additionalExtension;
+                const additionalExtension = path.extname(originalImage.filePathAbsolute) === newExtension
+                    ? ""
+                    : newExtension;
+                const newFilename = originalImage.filePathAbsolute + additionalExtension;
                 if (!$state.args.nowrite) {
                     fs.writeFile(newFilename, newImage.data);
                 }
                 $state.compressedFiles.add(newFilename);
                 // Report compression result
                 $state.reportSummary({
-                    action: (newFilename !== absoluteImgPath) ? `${meta.format}->${newImage.format}` : path.extname(absoluteImgPath),
-                    originalSize: originalData.length,
-                    compressedSize: newImage.data.length
+                    action: newFilename !== originalImage.filePathAbsolute
+                        ? `${await originalImage.getExt()}->${newImage.format}`
+                        : path.extname(originalImage.filePathAbsolute),
+                    originalSize: await originalImage.getLen(),
+                    compressedSize: newImage.data.length,
                 });
-                img.attr('src', attrib_src + additionalExtension);
+                img.attr("src", attrib_src + additionalExtension);
             }
         }
         /*
@@ -144,33 +178,33 @@ async function processImage(htmlfile, $, imgElement) {
         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');
-                $state.reportSummary({ action: `${newImage.format}->embed`, originalSize: originalData.length, compressedSize: newImage.data.length });
+                img.attr("src", datauri);
+                img.removeAttr("loading");
+                img.removeAttr("decoding");
+                $state.reportSummary({
+                    action: `${newImage.format}->embed`,
+                    originalSize: await originalImage.getLen(),
+                    compressedSize: newImage.data.length,
+                });
             }
         }
         /*
          * Attribute 'width' & 'height'
          */
-        const [w, h] = setImageSize(img, meta);
-        if (w < 0 || h < 0) {
-            $state.reportIssue(htmlfile, { msg: `Unexpected error in image size calculation src="${attrib_src}" - can't performance some optmizations.` });
-            return;
-        }
+        const [w, h] = await setImageSize(img, originalImage);
         if (isEmbed) {
             // Image is embed, no need for more processing
             return;
@@ -178,12 +212,13 @@ async function processImage(htmlfile, $, imgElement) {
         //
         // Stop here if svg
         //
-        if (meta.format === '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
@@ -192,10 +227,10 @@ async function processImage(htmlfile, $, imgElement) {
         else {
             // Generate image set
             const ext = path.extname(attrib_src);
-            const fullbasename = attrib_src.slice(0, -(ext.length));
+            const fullbasename = attrib_src.slice(0, -ext.length);
             const imageSrc = (addition) => `${fullbasename}${addition}.webp`;
             // Start from original image
-            let new_srcset = '';
+            let new_srcset = "";
             // Start reduction
             const step = 300; //px
             const ratio = w / h;
@@ -208,7 +243,7 @@ async function processImage(htmlfile, $, imgElement) {
                 if (!$state.compressedFiles.has(absoluteFilename)) {
                     // Add file to list avoid recompression
                     $state.compressedFiles.add(absoluteFilename);
-                    const compressedImage = await compressImage(originalData, { width: valueW, height: valueH }, true);
+                    const compressedImage = await compressImage(await originalImage.getData(), { resize: { width: valueW, height: valueH }, toFormat: "webp" });
                     if ((compressedImage === null || compressedImage === void 0 ? void 0 : compressedImage.data) && !$state.args.nowrite) {
                         fs.writeFile(absoluteFilename, compressedImage.data);
                     }
@@ -219,17 +254,21 @@ async function processImage(htmlfile, $, imgElement) {
                 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, { msg: `Unexpected error while processing image: ${JSON.stringify(e)}` });
+        $state.reportIssue(htmlfile, {
+            type: "erro",
+            msg: e.message ||
+                `Unexpected error while processing image: ${JSON.stringify(e)}`,
+        });
     }
 }
-function setImageSize(img, meta) {
-    let width = img.attr('width');
-    let height = img.attr('height');
+async function setImageSize(img, image) {
+    let width = img.attr("width");
+    let height = img.attr("height");
     let width_new = undefined;
     let height_new = undefined;
     // Check valid values
@@ -246,8 +285,12 @@ function setImageSize(img, meta) {
         }
     }
     // If we don't have the metadata, we can't do much more
-    if (meta.width === undefined || meta.height === undefined) {
-        return [-1, -1];
+    const meta = await image.getImageMeta();
+    if (!meta) {
+        throw new Error(`Can't get image meta information of "${image.src}" - some optimizations are not possible without this information.`);
+    }
+    if (meta.width === undefined && meta.height === undefined) {
+        throw new Error(`Can't get image width and height of "${image.src}" - some optimizations are not possible without this information.`);
     }
     const originalRatio = meta.width / meta.height;
     if (width !== undefined && height !== undefined) {
@@ -255,7 +298,7 @@ function setImageSize(img, meta) {
         const w = parseInt(width, 10);
         const h = parseInt(height, 10);
         // Is ratio equal?
-        const providedRatio = Math.round(w / h * 10) / 10;
+        const providedRatio = Math.round((w / h) * 10) / 10;
         const imageRatio = Math.round(originalRatio * 10) / 10;
         if (providedRatio !== imageRatio) {
             //console.warn(`Image aspect ratio in HTML (${providedRatio}) differs from image aspect ratio (${imageRatio}) - fix width and height or let jampack fill them.`);
@@ -274,26 +317,81 @@ function setImageSize(img, meta) {
     }
     else {
         // No width or height provided - set both to image size
-        width_new = meta.width;
-        height_new = meta.height;
+        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");
+            // Calculate aspect ratio from viewbox
+            let svg_aspectratio_from_viewbox = undefined;
+            if (svg_viewbox) {
+                const box = svg_viewbox.split(" ");
+                const w = parseInt(box[2], 10);
+                const h = parseInt(box[3], 10);
+                svg_aspectratio_from_viewbox = w / h;
+            }
+            // Set size
+            //
+            if (svg_width &&
+                isNumeric(svg_width) &&
+                svg_height &&
+                isNumeric(svg_height)) {
+                // height and width are present
+                // use them
+                width_new = parseInt(svg_width, 10);
+                height_new = parseInt(svg_height, 10);
+            }
+            else if (svg_width === undefined &&
+                svg_height === undefined &&
+                svg_aspectratio_from_viewbox) {
+                // no height and no width but viewbox is present
+                // fit it in default browser box 300x150
+                if (svg_aspectratio_from_viewbox >= 2) {
+                    // fit width
+                    width_new = 300;
+                    height_new = width_new / svg_aspectratio_from_viewbox;
+                }
+                else {
+                    // fit height
+                    height_new = 150;
+                    width_new = height_new * svg_aspectratio_from_viewbox;
+                }
+            }
+            else {
+                // no width and no height and no viewbox
+                // default browser values
+                width_new = 300;
+                height_new = 150;
+            }
+        }
+        else {
+            width_new = meta.width;
+            height_new = meta.height;
+        }
     }
     // New sizes
     if (width_new !== undefined && height_new !== undefined) {
-        img.attr('width', width_new.toFixed(0));
-        img.attr('height', height_new.toFixed(0));
-        return [Math.round(width_new), Math.round(height_new)];
+        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));
+        return [result_w, result_h];
     }
     // Something when wrong
-    throw new Error('Unexpected issue when resolving image sizes');
+    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) {
         await analyse(file);
     }
-    ;
 }

package/dist/state.d.ts

@@ -1,18 +1,20 @@
-export declare type Args = {
+export type Args = {
     nowrite?: boolean;
+    nocache?: boolean;
 };
-export declare type ReportItem = {
+export type ReportItem = {
     action: string;
     originalSize: number;
     compressedSize: number;
 };
-declare type Summary = {
+type Summary = {
     nbFiles: number;
     nbFilesCompressed: number;
     dataLenUncompressed: number;
     dataLenCompressed: number;
 };
-declare type Issue = {
+type Issue = {
+    type: 'invalid' | 'a11y' | 'perf' | 'erro' | 'warn';
     msg: string;
 };
 export declare class GlobalState {

package/dist/types.d.ts

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

package/dist/utils/resource.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="node" resolution-mode="require"/>
+import { FileExtension, MimeType } from 'file-type';
+type ImageMeta = {
+    width: number | undefined;
+    height: number | undefined;
+    isProgressive: boolean;
+    hasAlpha: boolean;
+};
+/**
+ * File extension, mime and data are loaded only on demand, then cached.
+ */
+export declare class Resource {
+    readonly src: string;
+    readonly filePathAbsolute: string;
+    private ext;
+    private mime;
+    private data;
+    private image_meta;
+    constructor(src: string, filePathAbsolute: string);
+    getData(): Promise<Buffer>;
+    getImageMeta(): Promise<ImageMeta | null | undefined>;
+    getLen(): Promise<number>;
+    getExt(): Promise<FileExtension | 'svg'>;
+    getMime(): Promise<MimeType | 'image/svg+xml'>;
+    private loadFileType;
+    static loadResource(projectRoot: string, relativeFile: string, src: string): Promise<Resource | undefined>;
+}
+export declare function isLocal(src: string): boolean;
+export declare function fileExists(path: string): Promise<boolean>;
+export declare function translateSrc(projectRoot: string, htmlRelativePath: string, src: string): string;
+export {};

package/dist/utils/resource.js

@@ -0,0 +1,110 @@
+import * as url from 'url';
+import * as path from 'path';
+import * as fs from 'fs/promises';
+import { fileTypeFromBuffer } from 'file-type';
+import sharp from 'sharp';
+/**
+ * File extension, mime and data are loaded only on demand, then cached.
+ */
+export class Resource {
+    constructor(src, filePathAbsolute) {
+        this.src = src;
+        this.filePathAbsolute = filePathAbsolute;
+    }
+    async getData() {
+        if (this.data === undefined) {
+            this.data = await fs.readFile(this.filePathAbsolute);
+        }
+        return this.data;
+    }
+    async getImageMeta() {
+        if (this.image_meta === undefined) {
+            const ext = await this.getExt();
+            switch (ext) {
+                case 'svg':
+                case 'gif':
+                case 'jpg':
+                case 'png':
+                case 'webp':
+                case 'tif':
+                    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
+                    };
+                    break;
+            }
+        }
+        if (!this.image_meta) {
+            console.log(await this.getExt());
+        }
+        return this.image_meta;
+    }
+    async getLen() {
+        return (await this.getData()).length;
+    }
+    async getExt() {
+        if (this.ext === undefined) {
+            await this.loadFileType();
+        }
+        return this.ext;
+    }
+    async getMime() {
+        if (this.mime === undefined) {
+            await this.loadFileType();
+        }
+        return this.mime;
+    }
+    async loadFileType() {
+        const fileType = await fileTypeFromBuffer(await this.getData());
+        if (this.filePathAbsolute.endsWith('.svg')) {
+            this.ext = 'svg';
+            this.mime = 'image/svg+xml';
+        }
+        else if (fileType) {
+            this.ext = fileType.ext;
+            this.mime = fileType.mime;
+        }
+        else {
+            throw new Error(`Unknown file type "${this.src}"`);
+        }
+    }
+    static async loadResource(projectRoot, relativeFile, src) {
+        if (!isLocal(src)) {
+            throw new Error('src should be local');
+        }
+        const u = url.parse(src);
+        if (!u.pathname) {
+            throw new Error(`Invalid src format "${src}"`);
+        }
+        const relativePath = path.join(projectRoot, src.startsWith('/') ? '' : path.dirname(relativeFile), u.pathname);
+        let absolutePath = path.resolve(relativePath);
+        if (await fileExists(absolutePath)) {
+            return new Resource(src, absolutePath);
+        }
+        return undefined;
+    }
+}
+export function isLocal(src) {
+    const u = url.parse(src);
+    return !u.host;
+}
+export async function fileExists(path) {
+    try {
+        await fs.stat(path);
+    }
+    catch (e) {
+        return false;
+    }
+    return true;
+}
+export function translateSrc(projectRoot, htmlRelativePath, src) {
+    if (!isLocal(src)) {
+        throw new Error('Source should be local');
+    }
+    const srcAbsolutePath = path.join(projectRoot, src.startsWith('/') ? '' : htmlRelativePath, src);
+    return path.resolve(srcAbsolutePath);
+}

package/dist/utils.d.ts

@@ -1,4 +1,2 @@
 export declare function formatBytes(bytes: number, decimals?: number): string;
-export declare function isLocal(src: string): boolean;
-export declare function translateSrc(projectRoot: string, htmlRelativePath: string, src: string): string;
 export declare function isNumeric(value: string): boolean;