@divriots/jampack 0.11.7 → 0.12.0

package/README.md

@@ -49,7 +49,11 @@ becomes responsive with dimensions:
 
 ```html
 <img src="./redpanda.jpg.webp" alt="Red panda" 
-     srcset="./redpanda.jpg.webp 3872w, ./redpanda@3572w.jpg.webp 3572w, ./redpanda@3272w.jpg.webp 3272w, ./redpanda@2972w.jpg.webp 2972w, ./redpanda@2672w.jpg.webp 2672w, ./redpanda@2372w.jpg.webp 2372w, ./redpanda@2072w.jpg.webp 2072w, ./redpanda@1772w.jpg.webp 1772w, ./redpanda@1472w.jpg.webp 1472w, ./redpanda@1172w.jpg.webp 1172w, ./redpanda@872w.jpg.webp 872w"
+     srcset="
+     ./redpanda.jpg.webp 3872w, ./redpanda@3572w.jpg.webp 3572w, ./redpanda@3272w.jpg.webp 3272w, 
+     ./redpanda@2972w.jpg.webp 2972w, ./redpanda@2672w.jpg.webp 2672w, ./redpanda@2372w.jpg.webp 2372w,
+     ./redpanda@2072w.jpg.webp 2072w, ./redpanda@1772w.jpg.webp 1772w, ./redpanda@1472w.jpg.webp 1472w,
+     ./redpanda@1172w.jpg.webp 1172w, ./redpanda@872w.jpg.webp 872w"
      sizes="100vw"
      loading="lazy"
      decoding="async"
@@ -69,9 +73,24 @@ becomes responsive with multiple formats including AVIF:
 
 ```html
 <picture>
-    <source type="image/avif" srcset="./redpanda@1936w.avif 1936w, ./redpanda@1636w.avif 1636w, ./redpanda@1336w.avif 1336w, ./redpanda@1036w.avif 1036w, ./redpanda@736w.avif 736w">
-    <source type="image/webp" srcset="./redpanda@1936w.webp 1936w, ./redpanda@1636w.webp 1636w, ./redpanda@1336w.webp 1336w, ./redpanda@1036w.webp 1036w, ./redpanda@736w.webp 736w">
-    <img src="./redpanda.jpg" alt="Red panda" loading="lazy" decoding="async" width="1936" height="1296" srcset="./redpanda.jpg 1936w, ./redpanda@1636w.jpg 1636w, ./redpanda@1336w.jpg 1336w, ./redpanda@1036w.jpg 1036w, ./redpanda@736w.jpg 736w" sizes="100vw">
+    <source type="image/avif" 
+            srcset="./redpanda@1936w.avif 1936w, ./redpanda@1636w.avif 1636w,
+                    ./redpanda@1336w.avif 1336w, ./redpanda@1036w.avif 1036w,
+                    ./redpanda@736w.avif 736w">
+    <source type="image/webp" 
+            srcset="./redpanda@1936w.webp 1936w, ./redpanda@1636w.webp 1636w,
+                    ./redpanda@1336w.webp 1336w, ./redpanda@1036w.webp 1036w,
+                    ./redpanda@736w.webp 736w">
+    <img src="./redpanda.jpg" 
+         alt="Red panda" 
+         loading="lazy" 
+         decoding="async" 
+         width="1936" 
+         height="1296" 
+         srcset="./redpanda.jpg 1936w, ./redpanda@1636w.jpg 1636w,
+                 ./redpanda@1336w.jpg 1336w, ./redpanda@1036w.jpg 1036w,
+                 ./redpanda@736w.jpg 736w"
+         sizes="100vw">
 </picture>
 ```
 

package/dist/cache.d.ts

@@ -1,7 +1,11 @@
 /// <reference types="node" resolution-mode="require"/>
-import type { Image } from './compressors/images.js';
+export type Category = 'img' | 'img-ext';
+export type CacheData = {
+    buffer: Buffer;
+    meta: any;
+};
 declare function cleanCache(full: boolean): Promise<void>;
 declare function computeCacheHash(buffer: Buffer, options?: any): string;
-declare function getFromCacheCompressImage(hash: string): Promise<Image | undefined>;
-declare function addToCacheCompressImage(hash: string, image: Image): Promise<void>;
-export { cleanCache, computeCacheHash, getFromCacheCompressImage, addToCacheCompressImage, };
+declare function getFromCache(category: Category, hash: string): Promise<CacheData | undefined>;
+declare function addToCache(category: Category, hash: string, data: CacheData): Promise<void>;
+export { cleanCache, computeCacheHash, getFromCache, addToCache };

package/dist/cache.js

@@ -4,6 +4,7 @@ import * as fs from 'fs/promises';
 import { VERSION } from './version.js';
 import $state from './state.js';
 const CACHE_FOLDER = '.jampack/cache';
+const CACHE_FOLDER_VERSION = CACHE_FOLDER + '/' + VERSION;
 async function cleanCache(full) {
     if (full) {
         try {
@@ -32,37 +33,37 @@ function computeCacheHash(buffer, options) {
     if ($state.args.nocache) {
         return '';
     }
-    let hash = `${VERSION}/${hasha(buffer, { algorithm: 'sha256' })}`;
+    let hash = `${hasha(buffer, { algorithm: 'sha256' })}`;
     if (options) {
         hash += '/' + hasha(JSON.stringify(options), { algorithm: 'md5' });
     }
     return hash;
 }
-function getLocation(hash) {
-    return path.join(CACHE_FOLDER, hash);
+function getLocation(hash, category) {
+    return path.join(CACHE_FOLDER_VERSION, category, hash);
 }
-async function getFromCacheCompressImage(hash) {
+async function getFromCache(category, hash) {
     if ($state.args.nocache) {
         return undefined;
     }
-    const location = getLocation(hash);
+    const location = getLocation(hash, category);
     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 };
+        const buffer = await fs.readFile(path.join(location, 'data'));
+        const meta = JSON.parse((await fs.readFile(path.join(location, 'meta'))).toString());
+        return { buffer, meta };
     }
     catch (e) {
         // Problem during cache loading or not in cache
     }
     return undefined;
 }
-async function addToCacheCompressImage(hash, image) {
+async function addToCache(category, hash, data) {
     if ($state.args.nocache) {
         return;
     }
-    const location = getLocation(hash);
+    const location = getLocation(hash, category);
     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));
+    await fs.writeFile(path.join(location, 'data'), data.buffer);
+    await fs.writeFile(path.join(location, 'meta'), JSON.stringify(data.meta));
 }
-export { cleanCache, computeCacheHash, getFromCacheCompressImage, addToCacheCompressImage, };
+export { cleanCache, computeCacheHash, getFromCache, addToCache };

package/dist/compressors/images.js

@@ -1,6 +1,6 @@
 import sharp from 'sharp';
 import { optimize as svgo } from 'svgo';
-import { getFromCacheCompressImage, addToCacheCompressImage, computeCacheHash, } from '../cache.js';
+import { getFromCache, addToCache, computeCacheHash } from '../cache.js';
 import config from '../config.js';
 export const AllImageFormat = ['webp', 'svg', 'jpg', 'png', 'avif'];
 function createWebpOptions(opt) {
@@ -13,9 +13,9 @@ function createWebpOptions(opt) {
 export async function compressImage(data, options) {
     var _a, _b;
     const cacheHash = computeCacheHash(data, options);
-    const imageFromCache = await getFromCacheCompressImage(cacheHash);
+    const imageFromCache = await getFromCache('img', cacheHash);
     if (imageFromCache) {
-        return imageFromCache;
+        return { data: imageFromCache.buffer, format: imageFromCache.meta };
     }
     // Load modifiable toFormat
     let toFormat = options.toFormat || 'unchanged';
@@ -128,7 +128,10 @@ export async function compressImage(data, options) {
         format: outputFormat,
         data: await sharpFile.toBuffer(),
     };
-    await addToCacheCompressImage(cacheHash, outputImage);
+    await addToCache('img', cacheHash, {
+        buffer: outputImage.data,
+        meta: outputImage.format,
+    });
     // Go
     return outputImage;
 }

package/dist/index.js

@@ -11,6 +11,8 @@ import { exit } from 'process';
 import kleur from 'kleur';
 import { cleanCache } from './cache.js';
 import { VERSION } from './version.js';
+import { mkdirSync } from 'fs';
+import { join } from 'path';
 const logo = `     __                                    __    
     |__|____    _____ ___________    ____ |  | __
     |  \\__  \\  /     \\\\____ \\__  \\ _/ ___\\|  |/ /
@@ -54,6 +56,14 @@ program
     }
     // Clean cache
     cleanCache(options.cleancache);
+    // Create _jampack folder
+    try {
+        mkdirSync(join($state.dir, '_jampack'));
+    }
+    catch (e) {
+        console.error(e.message);
+        exit(1);
+    }
     if (!options.onlycomp) {
         printTitle('PASS 1 - Optimizing');
         console.time('Done');

package/dist/optimize.js

@@ -10,6 +10,7 @@ import $state from './state.js';
 import kleur from 'kleur';
 import ora from 'ora';
 import { isLocal, Resource, translateSrc } from './utils/resource.js';
+import { downloadExternalImage } from './optimizers/img-external.js';
 async function analyse(file) {
     var _a;
     console.log('▶ ' + file);
@@ -122,7 +123,7 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
     /*
      * Attribute 'src'
      */
-    const attrib_src = img.attr('src');
+    let attrib_src = img.attr('src');
     if (!attrib_src) {
         const attrib_data_src = img.attr('data-src');
         if (attrib_data_src) {
@@ -189,18 +190,25 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
      */
     if (!isLocal(attrib_src)) {
         switch (config.image.external.process) {
-            case 'off':
-                // Don't process external images
+            case 'off': // Don't process external images
                 return;
-            case 'download':
-                // Download external image for local processing
+            case 'download': // Download external image for local processing
+                try {
+                    attrib_src = await downloadExternalImage(attrib_src);
+                    img.attr('src', attrib_src);
+                }
+                catch (e) {
+                    $state.reportIssue(htmlfile, {
+                        type: 'warn',
+                        msg: `Failed to download image: ${attrib_src} - ${e.message}`,
+                    });
+                    return; // No more processing
+                }
                 break;
-            case 'cdn-srcset-when-possible':
-                // Use unpic to use CDN capabilities
-                throw new Error('External images with `cdn-srcset-when-possible` is not implemented yet.');
-            case 'add-dimensions-only':
-                // Only add dimensions of image
+            case 'add-dimensions-only': // Only add dimensions of image
                 throw new Error('External images with `add-dimensions-only` is not implemented yet.');
+            case 'cdn-srcset-when-possible': // Use unpic to use CDN capabilities
+                throw new Error('External images with `cdn-srcset-when-possible` is not implemented yet.');
         }
     }
     /*

package/dist/optimizers/img-external.d.ts

@@ -0,0 +1 @@
+export declare function downloadExternalImage(href: string): Promise<string>;

package/dist/optimizers/img-external.js

@@ -0,0 +1,99 @@
+import * as path from 'path';
+import * as fs from 'fs/promises';
+import hasha from 'hasha';
+import { fileTypeFromBuffer } from 'file-type';
+import { addToCache, getFromCache } from '../cache.js';
+import { parse } from '../utils/cache-control-parser.js';
+import $state from '../state.js';
+export async function downloadExternalImage(href) {
+    var _a, _b, _c, _d, _e;
+    const hash = hasha(href, {
+        algorithm: 'md5',
+    });
+    // Default with values from cache
+    let buffer;
+    let ext;
+    // Image is in cache?
+    const dataFromCache = await getFromCache('img-ext', hash);
+    const cacheControl = (_a = dataFromCache === null || dataFromCache === void 0 ? void 0 : dataFromCache.meta) === null || _a === void 0 ? void 0 : _a.CacheControl;
+    if (dataFromCache && cacheControl) {
+        const date = (_b = dataFromCache === null || dataFromCache === void 0 ? void 0 : dataFromCache.meta) === null || _b === void 0 ? void 0 : _b.Date;
+        const maxAge = cacheControl['max-age'];
+        const expires = (_c = dataFromCache === null || dataFromCache === void 0 ? void 0 : dataFromCache.meta) === null || _c === void 0 ? void 0 : _c.Expires;
+        let expireTime = NaN;
+        if (date && maxAge) {
+            expireTime = Date.parse(date) + maxAge * 1000;
+        }
+        else if (expires) {
+            expireTime = Date.parse(expires);
+        }
+        else {
+            // No max-age with Date and no expires
+            // No information for cache validity
+            // We have to make a request
+        }
+        // Is cache still valid?
+        if (expireTime && Date.now() < expireTime) {
+            buffer = dataFromCache.buffer;
+            ext = dataFromCache.meta.Extension;
+        }
+    }
+    // No buffer, then no cache hit so let's HTTP request
+    if (!buffer) {
+        const lastdate = (_d = dataFromCache === null || dataFromCache === void 0 ? void 0 : dataFromCache.meta) === null || _d === void 0 ? void 0 : _d.Date;
+        const fetchOption = lastdate
+            ? { headers: { 'If-Modified-Since': lastdate } }
+            : {};
+        console.log('Downloading ' + href);
+        const resp = await fetch(href, fetchOption);
+        switch (resp.status) {
+            case 200: // New image
+                const responseBuffer = await resp.arrayBuffer();
+                // Detect extension
+                ext = (_e = (await fileTypeFromBuffer(responseBuffer))) === null || _e === void 0 ? void 0 : _e.ext;
+                buffer = Buffer.from(responseBuffer);
+                // Did the server requested no cache?
+                const cacheControl = parse(resp.headers.get('Cache-Control') || '');
+                const maxAge = cacheControl['max-age'];
+                if (cacheControl['no-store'] ||
+                    cacheControl['no-cache'] ||
+                    cacheControl['must-revalidate'] ||
+                    (maxAge !== undefined && maxAge < 1)) {
+                    // No cache requested
+                }
+                else {
+                    // Add downloaded image to cache
+                    await addToCache('img-ext', hash, {
+                        buffer,
+                        meta: {
+                            Date: resp.headers.get('Date'),
+                            Extension: ext,
+                            CacheControl: cacheControl,
+                        },
+                    });
+                }
+                break;
+            case 304: // Not modified - image in cache is good to use
+                if (dataFromCache) {
+                    buffer = dataFromCache.buffer;
+                    ext = dataFromCache.meta.Extension;
+                }
+                else {
+                    // This is not possible
+                    throw new Error('Assert error: 304 responses but no data in cache');
+                }
+                break;
+            default: // Otherwise something is wrong
+                throw new Error(resp.statusText);
+        }
+    }
+    // buffer can't be undefined here
+    if (!buffer)
+        throw new Error('Buffer is undefined');
+    // Construct local filename
+    if (!ext)
+        throw new Error('Unknown image format');
+    const filename = `/_jampack/${hash}.${ext}`;
+    fs.writeFile(path.join($state.dir, filename), buffer);
+    return filename;
+}

package/dist/utils/cache-control-parser.d.ts

@@ -0,0 +1,16 @@
+export interface CacheControl {
+    'max-age'?: number;
+    's-maxage'?: number;
+    'stale-while-revalidate'?: number;
+    'stale-if-error'?: number;
+    public?: boolean;
+    private?: boolean;
+    'no-store'?: boolean;
+    'no-cache'?: boolean;
+    'must-revalidate'?: boolean;
+    'proxy-revalidate'?: boolean;
+    immutable?: boolean;
+    'no-transform'?: boolean;
+}
+export declare const parse: (cacheControlHeader: string) => CacheControl;
+export declare const stringify: (cacheControl: CacheControl) => string;

package/dist/utils/cache-control-parser.js

@@ -0,0 +1,95 @@
+// Copied from https://github.com/etienne-martin/cache-control-parser (MIT licence)
+// The npm package was not ESM - can't be used
+const SUPPORTED_DIRECTIVES = [
+    'max-age',
+    's-maxage',
+    'stale-while-revalidate',
+    'stale-if-error',
+    'public',
+    'private',
+    'no-store',
+    'no-cache',
+    'must-revalidate',
+    'proxy-revalidate',
+    'immutable',
+    'no-transform',
+];
+export const parse = (cacheControlHeader) => {
+    const cacheControl = {};
+    const directives = cacheControlHeader
+        .toLowerCase()
+        .split(',')
+        .map((str) => str
+        .trim()
+        .split('=')
+        .map((str) => str.trim()));
+    for (const [directive, value] of directives) {
+        switch (directive) {
+            case 'max-age':
+                const maxAge = parseInt(value, 10);
+                if (isNaN(maxAge))
+                    continue;
+                cacheControl['max-age'] = maxAge;
+                break;
+            case 's-maxage':
+                const sharedMaxAge = parseInt(value, 10);
+                if (isNaN(sharedMaxAge))
+                    continue;
+                cacheControl['s-maxage'] = sharedMaxAge;
+                break;
+            case 'stale-while-revalidate':
+                const staleWhileRevalidate = parseInt(value, 10);
+                if (isNaN(staleWhileRevalidate))
+                    continue;
+                cacheControl['stale-while-revalidate'] = staleWhileRevalidate;
+                break;
+            case 'stale-if-error':
+                const staleIfError = parseInt(value, 10);
+                if (isNaN(staleIfError))
+                    continue;
+                cacheControl['stale-if-error'] = staleIfError;
+                break;
+            case 'public':
+                cacheControl.public = true;
+                break;
+            case 'private':
+                cacheControl.private = true;
+                break;
+            case 'no-store':
+                cacheControl['no-store'] = true;
+                break;
+            case 'no-cache':
+                cacheControl['no-cache'] = true;
+                break;
+            case 'must-revalidate':
+                cacheControl['must-revalidate'] = true;
+                break;
+            case 'proxy-revalidate':
+                cacheControl['proxy-revalidate'] = true;
+                break;
+            case 'immutable':
+                cacheControl.immutable = true;
+                break;
+            case 'no-transform':
+                cacheControl['no-transform'] = true;
+                break;
+        }
+    }
+    return cacheControl;
+};
+export const stringify = (cacheControl) => {
+    const directives = [];
+    for (const [key, value] of Object.entries(cacheControl)) {
+        if (!SUPPORTED_DIRECTIVES.includes(key))
+            continue;
+        switch (typeof value) {
+            case 'boolean':
+                directives.push(`${key}`);
+                break;
+            case 'number':
+                directives.push(`${key}=${value}`);
+                break;
+        }
+    }
+    return directives.join(', ');
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@divriots/jampack",
-  "version": "0.11.7",
+  "version": "0.12.0",
   "description": "Packer for static websites",
   "author": "Georges Gomes @georges-gomes",
   "bin": {
@@ -45,10 +45,11 @@
     "watch": "pnpm build --watch",
     "try": "shx rm -fr demo && cp -R demo_rf demo && node ./dist/index.js ./demo --nocache --onlyoptim",
     "build": "shx rm -rf dist && tsc -b",
-    "lint": "eslint . --ext .ts --config .eslintrc"
+    "lint": "eslint . --ext .ts --config .eslintrc",
+    "prepublishOnly": "pnpm build"
   },
   "engines": {
-    "node": ">=14.0.0"
+    "node": ">=18.0.0"
   },
   "bugs": "https://github.com/divriots/jampack/issues",
   "keywords": [],