@divriots/jampack 0.2.4 → 0.4.1

package/README.md

@@ -1,3 +1,5 @@
+<div>
+
 ```
      __                                    __    
     |__|____    _____ ___________    ____ |  | __
@@ -7,14 +9,17 @@
 \______|    \/      \/|  |       \/     \/     \/
                       |__|
 ```
+
+</div>
+
 [![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)
 
-# `jampack`
+# Jampack
 
 Optimizes static websites for best user experience and best Core Web Vitals scores.
 
-<div>
+<div id="banner">
   <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" />
@@ -32,47 +37,11 @@ Optimizes static websites for best user experience and best Core Web Vitals scor
 
 ## Why `jampack`?
 
-- **Better user experience**. Specially on low-end devices.
+- **Better user experience** for your website visitors. 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
-
-### PASS 1 - Optimizations
-
-This pass takes all `*.{html|.htm}` files and parse them for optimisation. 
-
-| Optimization   | Technical details     | Related links | Available |
-| -------------- | --------------------- |:------------:|:---------:|
-| 🔽 `<img>`      |                       |             |           |
-| Optimize `png` to `WebP` | Given `foo.png`, creates a **near loss less** `foo.png.webp` if size reduced. | [web.dev](https://web.dev/uses-webp-images/) |  ✅  |
-| Optimize `jpeg` to `WebP` | Given `foo.jpg`, creates a **lossly** `foo.jpg.webp` if size reduced. | [web.dev](https://web.dev/uses-webp-images/) |  ✅  |
-| Optimize `svg` |  |  |  ✅  |
-| Generate responsive images and set `srcset` | Multiple smaller images are generated exclusively in `WebP` and `srcset` attribute is set accordingly.  | [web.dev](https://web.dev/patterns/web-vitals-patterns/images/responsive-images/) |  ✅  |
-| Embed small images | If optimised image size is <500 bytes, image is embed in `[src]` |  |  ✅  |
-| Set `width` and `height` if missing | Uses image size and aspect ratio to fill values | [web.dev](https://web.dev/optimize-cls/#images-without-dimensions) |  ✅  |
-| Fix `width` or `height` if not numerical | Uses image size and aspect ratio to fill values | [web.dev](https://web.dev/optimize-cls/#images-without-dimensions) |  ✅  |
-| Set lazy loading by default  | Sets `loading="lazy"` if `[loading]` is not set. | [web.dev](https://web.dev/lazy-loading-images/) |  ✅  |
-| Set async decoding by default  | Sets `decoding="async"`. |  |  ✅  |
-| Warn on missing `[alt]` | Warn on missing `alt` attribute but adds `alt=""` in case image is considered decorative. |  |  ✅  |
-| 🔽 `<picture>`  |                       |      |   |
-| - TODO         |                       |  |  ❌  |
-
-### PASS 2 - Compression
-
-This pass compresses all untouched files without changing filename or format.
-
-| Extension       | Compressor            | Some options |
-| --------------- | --------------------- | ------------ |
-| `.html`,`.htm`  | html-minifier-terser  |              |
-| `.css`          | csso                  |              |
-| `.js`           | swc                   |              |
-| `.svg`          | svgo                  |              |
-| `.jpg`,`.jpeg`  | sharp                 |              |
-| `.png`          | sharp                 |              |
-| `.webp`         | sharp                 |              | 
-
 ## Quick use
 
 ```sh
@@ -80,34 +49,20 @@ This pass compresses all untouched files without changing filename or format.
 npx @divriots/jampack ./dist
 ```
 
-## CLI options
-
-| Option        | Description                    |
-| -----------   | ------------------------------ |
-| `--onlyoptim` | Only runs optimization (PASS 1) |
-| `--onlycomp`  | Only runs compression (PASS 2) |
-| `--fast`      | Go fast. Mostly no compression just checks for issues. |
-| `--fail`      | Exits with a non-zero return code if issues. |
-| `--nowrite`   | Don't write anything to disk (for testing) |
-| `--exclude`   | Files to exclude from processing. Expect glob format like `--exclude 'blog/**'` |
-
-## Configuration
-
-No configuration yet. All defaults.
+For more options see [CLI options](https://jampack.divriots.com/cli-options).
 
-## Considerations
+## Documentation
 
-`jampack` is meant to be used with your static website as is with no particular changes but here are some things you can do to help it extract the best performance of your pages.
-
-### Add `loading="eager"` to your images above the fold
-
-`jampack` sets all images to lazy by default. But, [images above the fold should not be lazy](https://web.dev/lazy-loading-images/#effects-on-largest-contentful-paint-lcp). Just add `loading="eager"` to your images above the fold and `jampack` will treat them as high priority.
+Check the [Documentation side](https://jampack.divriots.com).
 
 ## `jampack` use in the wild
 
 - [divRIOTS.com](https://divRIOTS.com)
 - [Backlight.dev](https://backlight.dev)
 - [story.to.design](https://story.to.design)
+- [html.to.design](https://html.to.design/docs)
+- [WebComponents.dev](https://WebComponents.dev)
+- [LWC.studio](https://lwc.studio)
 - [Components.studio](https://components.studio)
 > Add yours here
 
@@ -119,3 +74,26 @@ No configuration yet. All defaults.
 ## License
 
 This software is released under the terms of the [MIT license](https://github.com/divriots/jampack/blob/main/LICENSE).
+
+
+## Optimizations
+
+### PASS 1 - Optimizations
+
+This pass takes all `*.{html|.htm}` files and parse them for optimisation. 
+
+| Optimization   | Technical details     | Related links | Available |
+| -------------- | --------------------- |:------------:|:---------:|
+| 🔽 `<img>`      |                       |             |           |
+| Optimize `png` to `WebP` | Given `foo.png`, creates a **near loss less** `foo.png.webp` if size reduced. | [web.dev](https://web.dev/uses-webp-images/) |  ✅  |
+| Optimize `jpeg` to `WebP` | Given `foo.jpg`, creates a **lossly** `foo.jpg.webp` if size reduced. | [web.dev](https://web.dev/uses-webp-images/) |  ✅  |
+| Optimize `svg` |  |  |  ✅  |
+| Generate responsive images and set `srcset` | Multiple smaller images are generated exclusively in `WebP` and `srcset` attribute is set accordingly.  | [web.dev](https://web.dev/patterns/web-vitals-patterns/images/responsive-images/) |  ✅  |
+| Embed small images | If optimised image size is <500 bytes, image is embed in `[src]` |  |  ✅  |
+| Set `width` and `height` if missing | Uses image size and aspect ratio to fill values | [web.dev](https://web.dev/optimize-cls/#images-without-dimensions) |  ✅  |
+| Fix `width` or `height` if not numerical | Uses image size and aspect ratio to fill values | [web.dev](https://web.dev/optimize-cls/#images-without-dimensions) |  ✅  |
+| Set lazy loading by default  | Sets `loading="lazy"` if `[loading]` is not set. | [web.dev](https://web.dev/lazy-loading-images/) |  ✅  |
+| Set async decoding by default  | Sets `decoding="async"`. |  |  ✅  |
+| Warn on missing `[alt]` | Warn on missing `alt` attribute but adds `alt=""` in case image is considered decorative. |  |  ✅  |
+| 🔽 `<picture>`  |                       |      |   |
+| - TODO         |                       |  |  ❌  |

package/dist/cache.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="node" resolution-mode="require"/>
+import type { Image } from "./types.js";
+declare function cleanCache(): 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>;
+export { cleanCache, computeCacheHash, getFromCacheCompressImage, addToCacheCompressImage };

package/dist/cache.js

@@ -0,0 +1,52 @@
+import hasha from "hasha";
+import path from "path";
+import * as fs from "fs/promises";
+import { VERSION } from './version.js';
+import $state from './state.js';
+const CACHE_FOLDER = ".jampack/cache";
+async function cleanCache() {
+    try {
+        await fs.rm(CACHE_FOLDER, { recursive: true });
+    }
+    catch (e) {
+        // Nothing to do, probably not present
+    }
+}
+function computeCacheHash(buffer, options) {
+    if ($state.args.nocache) {
+        return '';
+    }
+    let hash = `${VERSION}/${hasha(buffer, { algorithm: 'sha256' })}`;
+    if (options) {
+        hash += "/" + hasha(JSON.stringify(options), { algorithm: 'md5' });
+    }
+    return hash;
+}
+function getLocation(hash) {
+    return path.join(CACHE_FOLDER, hash);
+}
+async function getFromCacheCompressImage(hash) {
+    if ($state.args.nocache) {
+        return undefined;
+    }
+    const location = getLocation(hash);
+    try {
+        const data = await fs.readFile(path.join(location, 'data'));
+        const format = JSON.parse((await fs.readFile(path.join(location, 'format'))).toString());
+        return { data, format };
+    }
+    catch (e) {
+        // Problem during cache loading or not in cache
+    }
+    return undefined;
+}
+async function addToCacheCompressImage(hash, image) {
+    if ($state.args.nocache) {
+        return;
+    }
+    const location = getLocation(hash);
+    await fs.mkdir(location, { recursive: true });
+    await fs.writeFile(path.join(location, 'data'), image.data);
+    await fs.writeFile(path.join(location, 'format'), JSON.stringify(image.format));
+}
+export { cleanCache, computeCacheHash, getFromCacheCompressImage, addToCacheCompressImage };

package/dist/compress.d.ts

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

package/dist/compress.js

@@ -10,6 +10,17 @@ import $state from './state.js';
 import { globby } from 'globby';
 import config from './config.js';
 import ora from 'ora';
+import { getFromCacheCompressImage, addToCacheCompressImage, computeCacheHash } from './cache.js';
+async function compressJS(code) {
+    const newjsresult = await swc.minify(code, { compress: true, mangle: true });
+    return newjsresult.code;
+}
+async function compressInlineJS(code) {
+    const newCode = await compressJS(code);
+    if (newCode && newCode.length < code.length)
+        return newCode;
+    return code;
+}
 const processFile = async (file, stats) => {
     let writeData = undefined;
     try {
@@ -28,7 +39,7 @@ const processFile = async (file, stats) => {
             case '.html':
             case '.htm':
                 const htmldata = await fs.readFile(file);
-                const newhtmlData = await htmlminifier(htmldata.toString(), { minifyCSS: true, minifyJS: true, sortClassName: true, sortAttributes: true });
+                const newhtmlData = await htmlminifier(htmldata.toString(), { minifyCSS: true, minifyJS: compressInlineJS, sortClassName: true, sortAttributes: true });
                 writeData = newhtmlData;
                 break;
             case '.css':
@@ -40,9 +51,9 @@ const processFile = async (file, stats) => {
                 break;
             case '.js':
                 const jsdata = await fs.readFile(file);
-                const newjsresult = await swc.minify(jsdata.toString(), { compress: true, mangle: true });
-                if (newjsresult.code && newjsresult.code.length < jsdata.length) {
-                    writeData = newjsresult.code;
+                const newJS = await compressJS(jsdata.toString());
+                if (newJS && newJS.length < jsdata.length) {
+                    writeData = newJS;
                 }
                 break;
         }
@@ -74,7 +85,15 @@ function createWebpOptions(opt) {
         effort: opt.effort
     };
 }
-export const compressImage = async (data, resize, toWebp = false) => {
+export const compressImage = async (data, options) => {
+    var _a, _b;
+    const cacheHash = computeCacheHash(data, options);
+    const imageFromCache = await getFromCacheCompressImage(cacheHash);
+    if (imageFromCache) {
+        return imageFromCache;
+    }
+    // Load modifiable toFormat
+    let toFormat = options.toFormat || 'unchanged';
     if (!config.image.compress)
         return undefined;
     let sharpFile = await sharp(data, { animated: true });
@@ -106,7 +125,7 @@ export const compressImage = async (data, resize, toWebp = false) => {
             return { format: 'svg', data: Buffer.from(newData.data, 'utf8') };
         case 'png':
             outputFormat = 'png';
-            if (!toWebp) {
+            if (toFormat === 'unchanged') {
                 sharpFile = sharpFile.png(config.image.png.options || {});
             }
             doSharp = true;
@@ -114,7 +133,7 @@ export const compressImage = async (data, resize, toWebp = false) => {
         case 'jpeg':
         case 'jpg':
             outputFormat = 'jpg';
-            if (!toWebp) {
+            if (toFormat === 'unchanged') {
                 sharpFile = sharpFile.jpeg(config.image.jpeg.options || {});
             }
             doSharp = true;
@@ -123,24 +142,36 @@ export const compressImage = async (data, resize, toWebp = false) => {
             outputFormat = 'webp';
             sharpFile = sharpFile.webp(createWebpOptions(config.image.webp.options_lossly) || {});
             doSharp = true;
-            toWebp = false; // Don't need to convert to webP again
+            toFormat = 'unchanged'; // Don't need to convert to webP again
             break;
     }
     if (doSharp) {
-        if (toWebp) {
+        if (toFormat === 'webp') {
             sharpFile = sharpFile.webp(createWebpOptions(meta.format === 'png' ? config.image.webp.options_lossless : config.image.webp.options_lossly));
             outputFormat = 'webp';
         }
-        if (resize.width && resize.height) {
-            sharpFile = sharpFile.resize({ ...resize, fit: 'fill', withoutEnlargement: true });
+        else if (toFormat === 'pjpg') {
+            sharpFile = sharpFile.jpeg({ ...config.image.jpeg.options, progressive: true } || {});
+            outputFormat = 'jpg';
+        }
+        if (((_a = options.resize) === null || _a === void 0 ? void 0 : _a.width) && ((_b = options.resize) === null || _b === void 0 ? void 0 : _b.height)) {
+            sharpFile = sharpFile.resize({ ...options.resize, fit: 'fill', withoutEnlargement: true });
         }
-        return { format: outputFormat, data: await sharpFile.toBuffer() };
+        //
+        // Output image processed
+        //
+        // Add to cache
+        const outputImage = { format: outputFormat, data: await sharpFile.toBuffer() };
+        await addToCacheCompressImage(cacheHash, outputImage);
+        // Go
+        return outputImage;
     }
+    // Unknown input format or error while processing
     return undefined;
 };
-const compressImageFile = async (file, toWebP = false) => {
+const compressImageFile = async (file) => {
     const buffer = await fs.readFile(file);
-    return compressImage(buffer, {}, toWebP);
+    return compressImage(buffer, {});
 };
 export async function compress(exclude) {
     const spinner = ora(getProgressText()).start();

package/dist/config.d.ts

@@ -1,9 +1,9 @@
-export declare type WebpOptions = {
+export type WebpOptions = {
     effort: number;
     mode: 'lossless' | 'lossly';
     quality: number;
 };
-export declare type Options = {
+export type Options = {
     image: {
         embed_size: number;
         srcset_min_width: number;

package/dist/index.js

@@ -9,13 +9,14 @@ import { fast } from './config.js';
 import { printTitle } from './logger.js';
 import { exit } from 'process';
 import kleur from 'kleur';
+import { cleanCache } from './cache.js';
 const logo = `     __                                    __    
     |__|____    _____ ___________    ____ |  | __
     |  \\__  \\  /     \\\\____ \\__  \\ _/ ___\\|  |/ /
     |  |/ __ \\|  Y Y  \\  |_> > __ \\\\  \\___|    < 
 /\\__|  (____  /__|_|  /   __(____  /\\___  >__|_ \\
 \\______|    \\/      \\/|  |       \\/     \\/     \\/
-                      |__| by ‹div›RIOTS (c)2022
+                      |__| by ‹div›RIOTS (c)2022-2023
 `;
 console.log(logo);
 const program = new Command();
@@ -32,6 +33,8 @@ program.command('pack', { isDefault: true })
     .option('--fail', 'Exits with a non-zero return code if issues.')
     .option('--onlyoptim', 'Only optimize (PASS 1).')
     .option('--onlycomp', 'Only compress (PASS 2).')
+    .option('--cleancache', 'Clean cache before running')
+    .option('--nocache', 'Run with no use of cache')
     .action(async (dir, options) => {
     $state.dir = dir;
     $state.args = options;
@@ -39,6 +42,10 @@ program.command('pack', { isDefault: true })
     if (options.fast) {
         fast();
     }
+    // Clean cache
+    if (options.cleancache) {
+        cleanCache();
+    }
     if (!options.onlycomp) {
         printTitle('PASS 1 - Optimizing');
         console.time('Done');

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 { isNumeric } from './utils.js';
-import config from './config.js';
-import { compressImage } from './compress.js';
-import svgToMiniDataURI from 'mini-svg-data-uri';
-import $state from './state.js';
-import kleur from 'kleur';
-import ora from 'ora';
-import { isLocal, Resource, translateSrc } from './utils/resource.js';
+import { globby } from "globby";
+import * as path from "path";
+import * as fs from "fs/promises";
+import cheerio from "cheerio";
+import { isNumeric } from "./utils.js";
+import config from "./config.js";
+import { compressImage } from "./compress.js";
+import svgToMiniDataURI from "mini-svg-data-uri";
+import $state from "./state.js";
+import kleur from "kleur";
+import ora from "ora";
+import { isLocal, Resource, translateSrc } from "./utils/resource.js";
 async function analyse(file) {
-    console.log('▶ ' + file);
+    console.log("▶ " + file);
     const html = (await fs.readFile(path.join($state.dir, file))).toString();
-    const $ = cheerio.load(html, {});
-    const imgs = $('img');
+    const $ = cheerio.load(html, { withStartIndices: true, decodeEntities: false });
+    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,72 +34,102 @@ 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, { type: 'warn', 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, { type: 'a11y', 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');
-        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 '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');
+         * Attribute 'decoding'
+         */
+        img.attr("decoding", "async");
         if (!isLocal(attrib_src)) {
             // Image not local, don't touch it
             return;
         }
         /*
-        * Loading image
-        */
+         * 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}"` });
+            $state.reportIssue(htmlfile, {
+                type: "erro",
+                msg: `Can't find img on disk src="${attrib_src}"`,
+            });
             return;
         }
         /*
@@ -107,11 +139,18 @@ async function processImage(htmlfile, $, imgElement) {
         if (!$state.optimizedFiles.has(originalImage.filePathAbsolute)) {
             // Let's avoid to optimize same images twice
             $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()) {
+            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(originalImage.filePathAbsolute) === newExtension ? '' : newExtension;
+                const additionalExtension = path.extname(originalImage.filePathAbsolute) === newExtension
+                    ? ""
+                    : newExtension;
                 const newFilename = originalImage.filePathAbsolute + additionalExtension;
                 if (!$state.args.nowrite) {
                     fs.writeFile(newFilename, newImage.data);
@@ -119,11 +158,13 @@ async function processImage(htmlfile, $, imgElement) {
                 $state.compressedFiles.add(newFilename);
                 // Report compression result
                 $state.reportSummary({
-                    action: (newFilename !== originalImage.filePathAbsolute) ? `${await originalImage.getExt()}->${newImage.format}` : path.extname(originalImage.filePathAbsolute),
+                    action: newFilename !== originalImage.filePathAbsolute
+                        ? `${await originalImage.getExt()}->${newImage.format}`
+                        : path.extname(originalImage.filePathAbsolute),
                     originalSize: await originalImage.getLen(),
-                    compressedSize: newImage.data.length
+                    compressedSize: newImage.data.length,
                 });
-                img.attr('src', attrib_src + additionalExtension);
+                img.attr("src", attrib_src + additionalExtension);
             }
         }
         /*
@@ -137,23 +178,27 @@ 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: await originalImage.getLen(), 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,
+                });
             }
         }
         /*
@@ -167,13 +212,13 @@ async function processImage(htmlfile, $, imgElement) {
         //
         // Stop here if svg
         //
-        if (await originalImage.getExt() === 'svg') {
+        if ((await originalImage.getExt()) === "svg") {
             return;
         }
         /*
          * Attribute 'srcset'
          */
-        const attr_srcset = img.attr('srcset');
+        const attr_srcset = img.attr("srcset");
         if (attr_srcset) {
             // If srcset is set, don't touch it.
             // The compress pass will compress the images
@@ -182,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;
@@ -198,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(await originalImage.getData(), { 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);
                     }
@@ -209,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, { type: 'erro', msg: e.message || `Unexpected error while processing image: ${JSON.stringify(e)}` });
+        $state.reportIssue(htmlfile, {
+            type: "erro",
+            msg: e.message ||
+                `Unexpected error while processing image: ${JSON.stringify(e)}`,
+        });
     }
 }
 async function setImageSize(img, image) {
-    let width = img.attr('width');
-    let height = img.attr('height');
+    let width = img.attr("width");
+    let height = img.attr("height");
     let width_new = undefined;
     let height_new = undefined;
     // Check valid values
@@ -249,7 +298,7 @@ async function setImageSize(img, image) {
         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.`);
@@ -268,33 +317,38 @@ async function setImageSize(img, image) {
     }
     else {
         // No width or height provided - set both to image size
-        if (await image.getExt() === 'svg') {
+        if ((await image.getExt()) === "svg") {
             // svg with no height and width has special sizing by browsers
             // They size it inside 300x150 unless they have width and height
             // attributes
             // Load svg
             const c = cheerio.load(await image.getData(), {});
-            const svg = c('svg').first();
-            const svg_viewbox = svg.attr('viewbox'); // bug in cheerio here, should be "viewBox"
-            const svg_width = svg.attr('width');
-            const svg_height = svg.attr('height');
+            const svg = c("svg").first();
+            const svg_viewbox = svg.attr("viewbox"); // bug in cheerio here, should be "viewBox"
+            const svg_width = svg.attr("width");
+            const svg_height = svg.attr("height");
             // Calculate aspect ratio from viewbox
             let svg_aspectratio_from_viewbox = undefined;
             if (svg_viewbox) {
-                const box = svg_viewbox.split(' ');
+                const box = svg_viewbox.split(" ");
                 const w = parseInt(box[2], 10);
                 const h = parseInt(box[3], 10);
                 svg_aspectratio_from_viewbox = w / h;
             }
             // Set size
             //
-            if (svg_width && isNumeric(svg_width) && svg_height && isNumeric(svg_height)) {
+            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) {
+            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) {
@@ -324,21 +378,20 @@ async function setImageSize(img, image) {
     if (width_new !== undefined && height_new !== undefined) {
         const result_w = Math.round(width_new);
         const result_h = Math.round(height_new);
-        img.attr('width', result_w.toFixed(0));
-        img.attr('height', result_h.toFixed(0));
+        img.attr("width", result_w.toFixed(0));
+        img.attr("height", result_h.toFixed(0));
         return [result_w, result_h];
     }
     // Something when wrong
     throw new Error(`Unexpected issue when resolving image size "${image.src}"`);
 }
 export async function optimize(exclude) {
-    const glob = ['**/*.{htm,html}'];
+    const glob = ["**/*.{htm,html}"];
     if (exclude)
-        glob.push('!' + exclude);
+        glob.push("!" + exclude);
     const paths = await globby(glob, { cwd: $state.dir });
     // Sequential async
     for (const file of paths) {
         await analyse(file);
     }
-    ;
 }

package/dist/state.d.ts

@@ -1,18 +1,19 @@
-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;
 };

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

@@ -1,6 +1,6 @@
 /// <reference types="node" resolution-mode="require"/>
 import { FileExtension, MimeType } from 'file-type';
-declare type ImageMeta = {
+type ImageMeta = {
     width: number | undefined;
     height: number | undefined;
     isProgressive: boolean;

package/dist/utils/resource.js

@@ -74,10 +74,14 @@ export class Resource {
     }
     static async loadResource(projectRoot, relativeFile, src) {
         if (!isLocal(src)) {
-            throw new Error('Source should be local');
+            throw new Error('src should be local');
         }
-        const relativePath = path.join(projectRoot, src.startsWith('/') ? '' : path.dirname(relativeFile), src);
-        const absolutePath = path.resolve(relativePath);
+        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);
         }

package/dist/version.d.ts

@@ -0,0 +1 @@
+export declare const VERSION: string;

package/dist/version.js

@@ -0,0 +1,3 @@
+// @ts-ignore
+import json from '../package.json' assert { type: 'json' };
+export const VERSION = json.version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@divriots/jampack",
-  "version": "0.2.4",
+  "version": "0.4.1",
   "description": "Packer for static websites",
   "author": "Georges Gomes @georges-gomes",
   "bin": {
@@ -16,7 +16,7 @@
     "/dist"
   ],
   "dependencies": {
-    "@swc/core": "^1.3.4",
+    "@swc/core": "^1.3.21",
     "@types/cheerio": "^0.22.31",
     "@types/commander": "^2.12.2",
     "@types/csso": "^5.0.0",
@@ -25,26 +25,27 @@
     "@types/sharp": "^0.31.0",
     "@types/svgo": "^2.6.4",
     "@types/table": "^6.3.2",
-    "chalk": "^5.0.1",
+    "chalk": "^5.1.2",
     "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",
+    "hasha": "^5.2.2",
+    "html-minifier-terser": "^7.1.0",
     "kleur": "^4.1.5",
     "mini-svg-data-uri": "^1.4.4",
     "ora": "^6.1.2",
-    "sharp": "^0.31.1",
+    "sharp": "^0.31.2",
     "svgo": "^2.8.0",
-    "table": "^6.8.0"
+    "table": "^6.8.1"
   },
   "devDependencies": {
-    "@types/node": "^16.9.4",
+    "@types/node": "^16.11.59",
     "shx": "^0.3.3",
     "ts-node": "^10.2.1",
-    "tslib": "^2.3.1",
-    "typescript": "^4.8.4"
+    "tslib": "^2.4.1",
+    "typescript": "^4.9.3"
   },
   "scripts": {
     "watch": "pnpm build --watch",