@divriots/jampack 0.2.3 → 0.2.4

package/dist/index.js

@@ -94,13 +94,13 @@ function printIssues() {
         printTitle('Issues', kleur.bgRed);
         console.log('');
         for (let [file, list] of $state.issues) {
-            console.log(kleur.red('▶ ' + file + '\n'));
+            console.log('▶ ' + file + '\n');
             list.forEach(issue => {
                 issueCount++;
-                console.log(`❌ ${issue.msg}\n`);
+                console.log(`${kleur.bgYellow(` ${issue.type} `)} ${issue.msg}\n`);
             });
         }
+        printTitle(`${issueCount} issue(s) over ${$state.issues.size} files`, kleur.bgYellow);
         console.log('');
-        printTitle(`${issueCount} issue(s) over ${$state.issues.size} files`, kleur.bgRed);
     }
 }

package/dist/optimize.js

@@ -2,14 +2,14 @@ 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 { 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);
     const html = (await fs.readFile(path.join($state.dir, file))).toString();
@@ -49,7 +49,7 @@ async function processImage(htmlfile, $, imgElement) {
         */
         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;
         }
         /*
@@ -57,7 +57,7 @@ async function processImage(htmlfile, $, imgElement) {
         */
         const attrib_alt = img.attr('alt');
         if (attrib_alt === undefined) {
-            $state.reportIssue(htmlfile, { msg: `Missing [alt] on img src="${attrib_src}" - Adding alt="" meanwhile.` });
+            $state.reportIssue(htmlfile, { type: 'a11y', msg: `Missing [alt] on img src="${attrib_src}" - Adding alt="" meanwhile.` });
             img.attr('alt', "");
         }
         if (attrib_src.startsWith('data:')) {
@@ -65,10 +65,6 @@ async function processImage(htmlfile, $, imgElement) {
             // TODO: try to compress it
             return;
         }
-        if (!isLocal(attrib_src)) {
-            // Image not local, don't touch it
-            return;
-        }
         /*
         * Attribute 'loading'
         */
@@ -85,49 +81,46 @@ async function processImage(htmlfile, $, imgElement) {
                 // Don't touch it
                 break;
             default:
-                $state.reportIssue(htmlfile, { msg: `Invalid [loading]="${attr_loading}" on img src="${attrib_src}"` });
+                $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;
+        }
         /*
         * 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}` });
+        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(), {}, true);
+            if ((newImage === null || newImage === void 0 ? void 0 : newImage.data) && newImage.data.length < await originalImage.getLen()) {
                 // 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,
+                    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);
@@ -160,17 +153,13 @@ async function processImage(htmlfile, $, imgElement) {
                 img.attr('src', datauri);
                 img.removeAttr('loading');
                 img.removeAttr('decoding');
-                $state.reportSummary({ action: `${newImage.format}->embed`, originalSize: originalData.length, compressedSize: newImage.data.length });
+                $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,8 +167,9 @@ async function processImage(htmlfile, $, imgElement) {
         //
         // Stop here if svg
         //
-        if (meta.format === 'svg')
+        if (await originalImage.getExt() === 'svg') {
             return;
+        }
         /*
          * Attribute 'srcset'
          */
@@ -208,7 +198,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(), { width: valueW, height: valueH }, true);
                     if ((compressedImage === null || compressedImage === void 0 ? void 0 : compressedImage.data) && !$state.args.nowrite) {
                         fs.writeFile(absoluteFilename, compressedImage.data);
                     }
@@ -224,10 +214,10 @@ async function processImage(htmlfile, $, imgElement) {
         }
     }
     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) {
+async function setImageSize(img, image) {
     let width = img.attr('width');
     let height = img.attr('height');
     let width_new = undefined;
@@ -246,8 +236,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) {
@@ -274,17 +268,68 @@ 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}'];

package/dist/state.d.ts

@@ -13,6 +13,7 @@ declare type Summary = {
     dataLenCompressed: number;
 };
 declare type Issue = {
+    type: 'invalid' | 'a11y' | 'perf' | 'erro' | 'warn';
     msg: string;
 };
 export declare class GlobalState {

package/dist/utils/resource.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="node" resolution-mode="require"/>
+import { FileExtension, MimeType } from 'file-type';
+declare 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,106 @@
+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('Source should be local');
+        }
+        const relativePath = path.join(projectRoot, src.startsWith('/') ? '' : path.dirname(relativeFile), src);
+        const 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;

package/dist/utils.js

@@ -1,5 +1,3 @@
-import * as url from 'url';
-import * as path from 'path';
 export function formatBytes(bytes, decimals = 2) {
     if (!+bytes)
         return '0 Bytes';
@@ -9,17 +7,6 @@ export function formatBytes(bytes, decimals = 2) {
     const i = Math.floor(Math.log(bytes) / Math.log(k));
     return `${(bytes / Math.pow(k, i)).toFixed(dm)} ${sizes[i]}`;
 }
-export function isLocal(src) {
-    const u = url.parse(src);
-    return !u.host;
-}
-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);
-}
 export function isNumeric(value) {
     return /^\d+$/.test(value);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@divriots/jampack",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Packer for static websites",
   "author": "Georges Gomes @georges-gomes",
   "bin": {
@@ -29,6 +29,7 @@
     "cheerio": "0.22.0",
     "commander": "^9.4.1",
     "csso": "^5.0.5",
+    "file-type": "^18.0.0",
     "globby": "^13.1.2",
     "html-minifier-terser": "^7.0.0",
     "kleur": "^4.1.5",

package/dist/compressors/image.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/compressors/image.js

@@ -1 +0,0 @@
-export {};

package/dist/optimizers/img.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/optimizers/img.js

@@ -1 +0,0 @@
-export {};

package/dist/options.d.ts

@@ -1,30 +0,0 @@
-export declare type WebpOptions = {
-    effort: number;
-    mode: 'lossless' | 'lossly';
-    quality: number;
-};
-export declare type Options = {
-    image: {
-        embed_size: number;
-        srcset_min_width: number;
-        srcset_max_width: number;
-        jpeg: {
-            options: {
-                quality: number;
-                mozjpeg: boolean;
-            };
-        };
-        png: {
-            options: {
-                compressionLevel: number;
-            };
-        };
-        webp: {
-            options_lossless: WebpOptions;
-            options_lossly: WebpOptions;
-        };
-    };
-};
-declare const default_options: Options;
-export declare function fast(): void;
-export default default_options;

package/dist/options.js

@@ -1,59 +0,0 @@
-const default_options = {
-    image: {
-        embed_size: 400,
-        srcset_min_width: 400,
-        srcset_max_width: 5120,
-        jpeg: {
-            options: {
-                quality: 80,
-                mozjpeg: true
-            }
-        },
-        png: {
-            options: {
-                compressionLevel: 9,
-            }
-        },
-        webp: {
-            options_lossless: {
-                effort: 4,
-                quality: 80,
-                mode: 'lossless'
-            },
-            options_lossly: {
-                effort: 4,
-                quality: 80,
-                mode: 'lossly'
-            }
-        }
-    }
-};
-const fast_options_override = {
-    image: {
-        embed_size: 0,
-        srcset_min_width: 1024,
-        srcset_max_width: 1024,
-        jpeg: {
-            options: {
-                mozjpeg: false
-            }
-        },
-        png: {
-            options: {
-                compressionLevel: 0,
-            }
-        },
-        webp: {
-            options_lossless: {
-                effort: 0,
-            },
-            options_lossly: {
-                effort: 0,
-            }
-        }
-    }
-};
-export function fast() {
-    Object.assign(default_options, fast_options_override);
-}
-export default default_options;

package/dist/state copy.d.ts

@@ -1,25 +0,0 @@
-export declare type Args = {
-    nowrite?: boolean;
-};
-export declare type Result = {
-    file: string;
-    originalSize: number;
-    compressedSize: number;
-};
-export declare type Summary = {
-    nbFiles: number;
-    nbFilesCompressed: number;
-    dataLenUncompressed: number;
-    dataLenCompressed: number;
-};
-export declare class GlobalState {
-    dir: string;
-    args: Args;
-    compressedFiles: Set<string>;
-    compressedFilesResult: Result[];
-    summary: Summary;
-    summaryByExtension: Record<string, Summary>;
-    addFile(r: Result): void;
-}
-declare const state: GlobalState;
-export default state;

package/dist/state copy.js

@@ -1,45 +0,0 @@
-import path from "path";
-export class GlobalState {
-    constructor() {
-        this.dir = 'dist';
-        this.args = {};
-        this.compressedFiles = new Set();
-        this.compressedFilesResult = [];
-        this.summary = {
-            nbFiles: 0,
-            nbFilesCompressed: 0,
-            dataLenCompressed: 0,
-            dataLenUncompressed: 0
-        };
-        this.summaryByExtension = {};
-    }
-    addFile(r) {
-        const isCompressed = r.compressedSize < r.originalSize ? 1 : 0;
-        this.compressedFiles.add(r.file);
-        this.compressedFilesResult.push(r);
-        this.summary.nbFiles++;
-        state.summary.nbFilesCompressed += isCompressed;
-        state.summary.dataLenUncompressed += r.originalSize;
-        state.summary.dataLenCompressed += r.compressedSize;
-        const ext = path.extname(r.file);
-        if (ext) {
-            let summary = this.summaryByExtension[ext];
-            if (!summary) {
-                summary = {
-                    nbFiles: 0,
-                    nbFilesCompressed: 0,
-                    dataLenUncompressed: 0,
-                    dataLenCompressed: 0
-                };
-                this.summaryByExtension[ext] = summary;
-            }
-            summary.nbFiles++;
-            summary.nbFilesCompressed += isCompressed;
-            summary.dataLenUncompressed += r.originalSize;
-            summary.dataLenCompressed += r.compressedSize;
-        }
-    }
-    ;
-}
-const state = new GlobalState();
-export default state;