@divriots/jampack 0.1.8 → 0.2.0

package/README.md

@@ -1,3 +1,74 @@
-## jampack
+```
+     __                                    __    
+    |__|____    _____ ___________    ____ |  | __
+    |  \__  \  /     \\____ \__  \ _/ ___\|  |/ /
+    |  |/ __ \|  Y Y  \  |_> > __ \\  \___|    < 
+/\__|  (____  /__|_|  /   __(____  /\___  >__|_ \
+\______|    \/      \/|  |       \/     \/     \/
+                      |__|
+```
+[![npm version](https://img.shields.io/npm/v/@divriots/jampack)](https://npmjs.org/package/@divriots/jampack) 
+[![Discord](https://img.shields.io/badge/chat-discord-blue?style=flat&logo=discord)](https://discord.gg/XkQxSU9)
 
-Optimize static websites for maximum performance and best Core Web Vitals scores.
+# `jampack`
+
+Optimizes static websites for best user experience and best Core Web Vitals scores.
+
+<div>
+  <div>Brought to you by</div>
+  <a href="https://divRIOTS.com#gh-light-mode-only">
+    <img width="150" height="40" src="https://divRIOTS.com/divriots.svg" alt="‹div›RIOTS" />
+  </a>
+  <a href="https://divRIOTS.com#gh-dark-mode-only">
+    <img width="150" height="40" src="https://divRIOTS.com/divriots-dark.svg" alt="‹div›RIOTS" />
+  </a>
+</div>
+
+## What is `jampack`?
+
+> Not a bundler. Not a framework.
+
+`jampack` is a post-processing tool that takes the output of your [Static Site Generator (aka SSG)](https://jamstack.org/generators/) and optimizes it for best user experience and best [Core Web Vitals](https://web.dev/learn-core-web-vitals/) scores.
+
+## Why `jampack`?
+
+- **Better user experience**. Specially on low-end devices.
+- **Better SEO**. Page experience now [affects ranking](https://developers.google.com/search/docs/appearance/page-experience).
+- **Easier maintenance**. Generating top performance webpages requires extra engineering in the composition of the pages that is counterproductive with the maintenance of the website.
+- **Time saving**. Spend less time optimizing and let `jampack` perform the heaving-lifting for you.
+
+## Optimizations
+
+Growing list of optimizations performed:
+
+| Optimization  |  Description  |
+| ------------- | ------------- |
+| todo              |   todo            |
+
+## Quick use
+
+```sh
+# Optimize static website in `dist` folder
+npx @divriots/jampack ./dist
+```
+
+## Configuration
+
+No configuration yet. All defaults.
+
+## `jampack` use in the wild
+
+- [divRIOTS.com](https://divRIOTS.com)
+- [Backlight.dev](https://backlight.dev)
+- [story.to.design](https://story.to.design)
+- [Components.studio](https://components.studio)
+> Add yours here
+
+## Why is it called `jampack`?
+
+- ` jam`: From [Jamstack](https://en.wikipedia.org/wiki/Jamstack).
+- `pack`: Reminescent of the [Executable Packers](https://en.wikipedia.org/wiki/Executable_compression#List_of_executable_packers) from the 90s.
+
+## License
+
+This software is released under the terms of the [MIT license](https://github.com/divriots/jampack/blob/main/LICENSE).

package/dist/compress.d.ts

@@ -1,3 +1,4 @@
 import sharp from 'sharp';
-export declare const compressImage: (data: Buffer, resize: sharp.ResizeOptions) => Promise<Buffer | undefined>;
+import type { Image } from './types.js';
+export declare const compressImage: (data: Buffer, resize: sharp.ResizeOptions, toWebp?: boolean) => Promise<Image | undefined>;
 export declare function compress(glob: string): Promise<void>;

package/dist/compress.js

@@ -8,6 +8,7 @@ import sharp from 'sharp';
 import swc from '@swc/core';
 import globalState from './state.js';
 import { globby } from 'globby';
+import options from './options.js';
 const beginProgress = () => {
 };
 const printProgress = () => {
@@ -27,24 +28,18 @@ const endProgress = () => {
     process.stdout.write('\n');
 };
 const processFile = async (file, stats) => {
-    const result = {
-        file,
-        originalSize: stats.size,
-        compressedSize: stats.size
-    };
     let writeData = undefined;
     try {
         const ext = path.extname(file);
         switch (ext) {
-            case '.svg':
             case '.png':
             case '.jpg':
             case '.jpeg':
+            case '.svg':
             case '.webp':
-                //case '.gif':
-                const newImageData = await compressImageFile(file);
-                if (newImageData && newImageData.length < result.originalSize) {
-                    writeData = newImageData;
+                const newImage = await compressImageFile(file);
+                if ((newImage === null || newImage === void 0 ? void 0 : newImage.data) && newImage.data.length < stats.size) {
+                    writeData = newImage.data;
                 }
                 break;
             case '.html':
@@ -74,6 +69,11 @@ const processFile = async (file, stats) => {
         console.error(`\n${file}`);
         console.error(e);
     }
+    const result = {
+        action: path.extname(file),
+        originalSize: stats.size,
+        compressedSize: stats.size
+    };
     // Writedata
     if (writeData && writeData.length < result.originalSize) {
         result.compressedSize = writeData.length;
@@ -81,12 +81,26 @@ const processFile = async (file, stats) => {
             await fs.writeFile(file, writeData);
         }
     }
-    globalState.addFile(result);
+    globalState.compressedFiles.add(file);
+    globalState.reportItem(result);
     printProgress();
 };
-export const compressImage = async (data, resize) => {
-    const sharpFile = await sharp(data, { animated: true });
+function createWebpOptions(opt) {
+    return {
+        nearLossless: (opt === null || opt === void 0 ? void 0 : opt.mode) === 'lossless',
+        quality: (opt === null || opt === void 0 ? void 0 : opt.quality) || 80,
+        effort: (opt === null || opt === void 0 ? void 0 : opt.effort) || 4
+    };
+}
+export const compressImage = async (data, resize, toWebp = false) => {
+    let sharpFile = await sharp(data, { animated: true });
     const meta = await sharpFile.metadata();
+    if (meta.pages && meta.pages > 1) {
+        // Skip animated images for the moment.
+        return undefined;
+    }
+    let doSharp = false;
+    let outputFormat;
     switch (meta.format) {
         case 'svg':
             const newData = svgo(data, {
@@ -105,23 +119,44 @@ export const compressImage = async (data, resize) => {
                 console.log(`Error processing svg ${data}`);
                 return undefined;
             }
-            return Buffer.from(newData.data, 'utf8');
+            return { format: 'svg', data: Buffer.from(newData.data, 'utf8') };
         case 'png':
-        case 'jpg':
+            outputFormat = 'png';
+            if (!toWebp) {
+                sharpFile = sharpFile.png(options.image.png.options || {});
+            }
+            doSharp = true;
+            break;
         case 'jpeg':
-        case 'webp':
-            //case 'gif':
-            let sf = sharpFile;
-            if (resize.width && resize.height) {
-                sf = sf.resize({ ...resize, fit: 'fill', withoutEnlargement: true });
+        case 'jpg':
+            outputFormat = 'jpg';
+            if (!toWebp) {
+                sharpFile = sharpFile.jpeg(options.image.jpeg.options || {});
             }
-            return await sf.toBuffer();
+            doSharp = true;
+            break;
+        case 'webp':
+            outputFormat = 'webp';
+            sharpFile = sharpFile.webp(createWebpOptions(options.image.webp.options_lossly) || {});
+            doSharp = true;
+            toWebp = false; // Don't need to convert to webP again
+            break;
+    }
+    if (doSharp) {
+        if (toWebp) {
+            sharpFile = sharpFile.webp(createWebpOptions(meta.format === 'png' ? options.image.webp.options_lossless : options.image.webp.options_lossly));
+            outputFormat = 'webp';
+        }
+        if (resize.width && resize.height) {
+            sharpFile = sharpFile.resize({ ...resize, fit: 'fill', withoutEnlargement: true });
+        }
+        return { format: outputFormat, data: await sharpFile.toBuffer() };
     }
     return undefined;
 };
-const compressImageFile = async (file) => {
+const compressImageFile = async (file, toWebP = false) => {
     const buffer = await fs.readFile(file);
-    return compressImage(buffer, {});
+    return compressImage(buffer, {}, toWebP);
 };
 export async function compress(glob) {
     beginProgress();

package/dist/index.js

@@ -29,28 +29,27 @@ program.command('pack', { isDefault: true })
     .action(async (dir, options) => {
     globalState.dir = dir;
     globalState.args = options;
-    if (!options.onlyoptim && !options.onlycomp) {
-        console.log(kleur.bgGreen(kleur.black(`\n PASS 1 - Compressing embeddables `)));
-        await compress("**/*.{css,svg,js}");
-    }
     if (!options.onlycomp) {
-        console.log(kleur.bgGreen(kleur.black(`\n PASS 2 - Optimizing `)));
+        console.log('');
+        console.log(kleur.bgGreen(kleur.black(` PASS 1 - Optimizing `)));
         await optimize();
     }
     if (!options.onlyoptim) {
-        console.log(kleur.bgGreen(kleur.black(`\n PASS 3 - Compressing the rest`)));
+        console.log('');
+        console.log(kleur.bgGreen(kleur.black(` PASS 2 - Compressing the rest`)));
         await compress("**/**");
     }
     printDetails();
 });
 program.parse();
 function printDetails() {
-    const dataTable = [['Extension', 'Compressed', 'Original', 'Compressed', 'Gain']];
+    const dataTable = [['Action', 'Compressed', 'Original', 'Compressed', 'Gain']];
     const config = {
         columns: [
             { alignment: 'left' },
             { alignment: 'right' },
             { alignment: 'right' },
+            { alignment: 'right' },
             { alignment: 'right' }
         ],
     };

package/dist/optimize.js

@@ -83,7 +83,7 @@ async function processImage(file, $, imgElement) {
         const absoluteImgPath = translateSrc(globalState.dir, path.dirname(file), attrib_src);
         // file exists?
         try {
-            const stats = await fs.stat(absoluteImgPath);
+            await fs.stat(absoluteImgPath);
         }
         catch (e) {
             console.error(`Missing img ${absoluteImgPath}`);
@@ -93,23 +93,51 @@ async function processImage(file, $, imgElement) {
         const meta = await sharpFile.metadata();
         const originalData = await fs.readFile(absoluteImgPath);
         /*
-        * Embed small images
-        */
+         * Compress image to WebP
+         */
+        let newImage;
+        if (!globalState.optimizedFiles.has(absoluteImgPath)) {
+            // Let's avoid to optimize same images twice
+            globalState.optimizedFiles.add(absoluteImgPath);
+            newImage = await compressImage(originalData, {}, true);
+            if ((newImage === null || newImage === void 0 ? void 0 : newImage.data) && newImage.data.length < originalData.length) {
+                // Do we need to add an new extension?
+                const newExtension = `.${newImage.format}`;
+                const additionalExtension = path.extname(absoluteImgPath) === newExtension ? '' : newExtension;
+                const newFilename = absoluteImgPath + additionalExtension;
+                if (!globalState.args.nowrite) {
+                    fs.writeFile(newFilename, newImage.data);
+                }
+                globalState.compressedFiles.add(newFilename);
+                // Report compression result
+                globalState.reportItem({
+                    action: (newFilename !== absoluteImgPath) ? `${meta.format}->${newImage.format}` : path.extname(absoluteImgPath),
+                    originalSize: originalData.length,
+                    compressedSize: newImage.data.length
+                });
+                img.attr('src', attrib_src + additionalExtension);
+            }
+        }
+        /*
+         * Embed small images
+         *
+         * TODO this is only embedding images that have
+         * successfully be compressed. Should embed original
+         * image if it fits the size.
+         */
         let isEmbed = false;
-        if (originalData.length <= options.image.embed_size) {
+        if (newImage && newImage.data.length <= options.image.embed_size) {
             let datauri = undefined;
-            switch (meta.format) {
+            switch (newImage.format) {
                 case 'svg':
-                    const compressedData = await compressImage(originalData, {});
-                    const svgEmbed = (compressedData && compressedData.length < originalData.length) ? compressedData : originalData;
-                    datauri = svgToMiniDataURI(svgEmbed.toString());
+                    datauri = svgToMiniDataURI(newImage.data.toString());
+                    break;
+                case 'webp':
+                    datauri = `data:image/webp;base64,${newImage.data.toString('base64')}`;
                     break;
                 case 'jpg':
-                case 'jpeg':
                 case 'png':
-                case 'webp':
-                    //case 'gif':
-                    // TODO
+                    // TODO but not possible in current code
                     break;
             }
             if (datauri) {
@@ -117,31 +145,13 @@ async function processImage(file, $, imgElement) {
                 img.attr('src', datauri);
                 img.removeAttr('loading');
                 img.removeAttr('decoding');
+                globalState.reportItem({ action: `${newImage.format}->embed`, originalSize: originalData.length, compressedSize: newImage.data.length });
             }
         }
         if (isEmbed) {
             // Image is embed, no need for more processing
             return;
         }
-        /*
-        * Compress image
-        */
-        if (!globalState.compressedFiles.has(absoluteImgPath)) {
-            // Image not already compressed before
-            const result = {
-                file: absoluteImgPath,
-                originalSize: originalData.length,
-                compressedSize: originalData.length
-            };
-            const newImage = await compressImage(originalData, {});
-            if (newImage && newImage.length < originalData.length) {
-                if (!globalState.args.nowrite) {
-                    fs.writeFile(absoluteImgPath, newImage);
-                }
-                result.compressedSize = newImage.length;
-            }
-            globalState.addFile(result);
-        }
         //
         // Stop here if svg
         //
@@ -168,7 +178,7 @@ async function processImage(file, $, imgElement) {
             // Generate image set
             const ext = path.extname(attrib_src);
             const fullbasename = attrib_src.slice(0, -(ext.length));
-            const imageSrc = (addition) => `${fullbasename}${addition}${ext}`;
+            const imageSrc = (addition) => `${fullbasename}${addition}.webp`;
             // Start from original image
             let new_srcset = '';
             // Start reduction
@@ -178,20 +188,24 @@ async function processImage(file, $, imgElement) {
             let valueH = Math.trunc(valueW / ratio);
             while (valueW > options.image.srcset_min_width) {
                 const src = imageSrc(`@${valueW}w`);
+                console.log(`Generating srcset ${src}`);
                 const absoluteFilename = translateSrc(globalState.dir, path.dirname(file), src);
-                const compressedData = await compressImage(originalData, { width: valueW, height: valueH });
-                if (compressedData && !globalState.args.nowrite) {
-                    fs.writeFile(absoluteFilename, compressedData);
+                // Don't generate srcset file twice
+                if (!globalState.compressedFiles.has(absoluteFilename)) {
+                    // Add file to list avoid recompression
+                    globalState.compressedFiles.add(absoluteFilename);
+                    const compressedImage = await compressImage(originalData, { width: valueW, height: valueH }, true);
+                    if ((compressedImage === null || compressedImage === void 0 ? void 0 : compressedImage.data) && !globalState.args.nowrite) {
+                        fs.writeFile(absoluteFilename, compressedImage.data);
+                    }
                 }
-                // Add file to list avoid recompression
-                globalState.compressedFiles.add(absoluteFilename);
                 new_srcset += `, ${src} ${valueW}w`;
                 // reduce size
                 valueW -= step;
                 valueH = Math.trunc(valueW / ratio);
             }
             if (new_srcset) {
-                img.attr('srcset', `${attrib_src} ${w}w` + new_srcset);
+                img.attr('srcset', `${img.attr('src')} ${w}w` + new_srcset);
             }
         }
     }

package/dist/options.d.ts

@@ -1,8 +1,28 @@
+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;

package/dist/options.js

@@ -2,7 +2,30 @@ const default_options = {
     image: {
         embed_size: 400,
         srcset_min_width: 400,
-        srcset_max_width: 5120
+        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'
+            }
+        }
     }
 };
 export default default_options;

package/dist/state copy.d.ts

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,45 @@
+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;

package/dist/state.d.ts

@@ -1,8 +1,8 @@
 export declare type Args = {
     nowrite?: boolean;
 };
-export declare type Result = {
-    file: string;
+export declare type ReportItem = {
+    action: string;
     originalSize: number;
     compressedSize: number;
 };
@@ -16,10 +16,10 @@ export declare class GlobalState {
     dir: string;
     args: Args;
     compressedFiles: Set<string>;
-    compressedFilesResult: Result[];
+    optimizedFiles: Set<string>;
     summary: Summary;
     summaryByExtension: Record<string, Summary>;
-    addFile(r: Result): void;
+    reportItem(r: ReportItem): void;
 }
 declare const state: GlobalState;
 export default state;

package/dist/state.js

@@ -1,10 +1,9 @@
-import path from "path";
 export class GlobalState {
     constructor() {
         this.dir = 'dist';
         this.args = {};
         this.compressedFiles = new Set();
-        this.compressedFilesResult = [];
+        this.optimizedFiles = new Set();
         this.summary = {
             nbFiles: 0,
             nbFilesCompressed: 0,
@@ -13,17 +12,14 @@ export class GlobalState {
         };
         this.summaryByExtension = {};
     }
-    addFile(r) {
+    reportItem(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 (r.action) {
+            let summary = this.summaryByExtension[r.action];
             if (!summary) {
                 summary = {
                     nbFiles: 0,
@@ -31,7 +27,7 @@ export class GlobalState {
                     dataLenUncompressed: 0,
                     dataLenCompressed: 0
                 };
-                this.summaryByExtension[ext] = summary;
+                this.summaryByExtension[r.action] = summary;
             }
             summary.nbFiles++;
             summary.nbFilesCompressed += isCompressed;

package/dist/types.d.ts

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

package/dist/types.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@divriots/jampack",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "description": "Packer for static websites",
   "author": "Georges Gomes @georges-gomes",
   "bin": {