@divriots/jampack 0.8.1 → 0.9.1

package/dist/cache.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="node" resolution-mode="require"/>
 import type { Image } from './compressors/images.js';
-declare function cleanCache(): Promise<void>;
+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>;

package/dist/cache.js

@@ -4,13 +4,29 @@ import * as fs from 'fs/promises';
 import { VERSION } from './version.js';
 import $state from './state.js';
 const CACHE_FOLDER = '.jampack/cache';
-async function cleanCache() {
+async function cleanCache(full) {
+    if (full) {
+        try {
+            await fs.rm(CACHE_FOLDER, { recursive: true });
+        }
+        catch (e) {
+            // Nothing to do, probably not present
+        }
+        return;
+    }
+    // List versions in cache
+    let files;
     try {
-        await fs.rm(CACHE_FOLDER, { recursive: true });
+        files = await fs.readdir(CACHE_FOLDER);
     }
     catch (e) {
-        // Nothing to do, probably not present
+        // Nothing to do probably no cache available
+        return;
     }
+    // Delete old cache versions
+    await files
+        .filter((f) => f !== VERSION)
+        .forEach(async (f) => fs.rm(path.join(CACHE_FOLDER, f), { recursive: true }));
 }
 function computeCacheHash(buffer, options) {
     if ($state.args.nocache) {

package/dist/compressors/images.d.ts

@@ -2,7 +2,8 @@
 import sharp from 'sharp';
 import { MimeType } from 'file-type';
 export type ImageMimeType = MimeType | 'image/svg+xml';
-export type ImageFormat = 'webp' | 'svg' | 'jpg' | 'png' | 'avif' | undefined;
+export declare const AllImageFormat: string[];
+export type ImageFormat = typeof AllImageFormat[number] | undefined;
 export type Image = {
     format: ImageFormat;
     data: Buffer;

package/dist/compressors/images.js

@@ -2,6 +2,7 @@ import sharp from 'sharp';
 import { optimize as svgo } from 'svgo';
 import { getFromCacheCompressImage, addToCacheCompressImage, computeCacheHash, } from '../cache.js';
 import config from '../config.js';
+export const AllImageFormat = ['webp', 'svg', 'jpg', 'png', 'avif'];
 function createWebpOptions(opt) {
     return {
         nearLossless: opt.mode === 'lossless',

package/dist/config.js

@@ -1,6 +1,6 @@
 const default_options = {
     image: {
-        embed_size: 400,
+        embed_size: 1500,
         srcset_min_width: 640,
         compress: true,
         jpeg: {

package/dist/index.js

@@ -29,6 +29,7 @@ program
     .command('pack', { isDefault: true })
     .description('todo')
     .argument('<dir>', 'Directory to pack')
+    .option('--include <include>', 'Glob to include')
     .option('--exclude <exclude>', 'Glob to exclude')
     .option('--nowrite', 'No write')
     .option('--fast', 'Go fast. Mostly no compression just checks for issues.')
@@ -45,13 +46,11 @@ program
         fast();
     }
     // Clean cache
-    if (options.cleancache) {
-        cleanCache();
-    }
+    cleanCache(options.cleancache);
     if (!options.onlycomp) {
         printTitle('PASS 1 - Optimizing');
         console.time('Done');
-        await optimize(options.exclude);
+        await optimize(options.include, options.exclude);
         console.timeEnd('Done');
     }
     if (!options.onlyoptim && !options.fast) {

package/dist/optimize.d.ts

@@ -1 +1 @@
-export declare function optimize(exclude?: string): Promise<void>;
+export declare function optimize(include?: string, exclude?: string): Promise<void>;

package/dist/optimize.js

@@ -71,12 +71,26 @@ async function analyse(file) {
 }
 function getTheFold($) {
     const theFolds = $('the-fold');
-    if (!theFolds[0]) {
-        return 0;
-    }
-    // Pickup the position of the last `<the-fold>`
-    // @ts-ignore
-    return theFolds[theFolds.length - 1].startIndex;
+    // If you have the-fold
+    if (theFolds[0]) {
+        // Pickup the position of the last `<the-fold>`
+        // @ts-ignore
+        return theFolds[theFolds.length - 1].startIndex;
+    }
+    const theMains = $('main');
+    // If you have main
+    if (theMains[0]) {
+        // @ts-ignore
+        return theMains[0].startIndex + 5000;
+    }
+    const theBodys = $('body');
+    // If you have main
+    if (theBodys[0]) {
+        // Pickup the position of the last `<the-fold>`
+        // @ts-ignore
+        return theBodys[0].startIndex + 10000;
+    }
+    return 0;
 }
 async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
     var _a, _b;
@@ -220,6 +234,8 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
             img.attr('src', attrib_src + additionalExtension);
         }
         else {
+            // Drop new Image
+            newImage = undefined;
             // Report non-compression
             $state.reportSummary({
                 action: path.extname(originalImage.filePathAbsolute),
@@ -230,46 +246,60 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
     }
     /*
      * Embed small images
-     *
-     * TODO this is only embedding images that have
-     * successfully be compressed. Should embed original
-     * image if it fits the size.
+     * Only above the fold
      */
     let isEmbed = false;
-    if (newImage && newImage.data.length <= config.image.embed_size) {
-        let datauri = undefined;
-        switch (newImage.format) {
-            case 'svg':
-                datauri = svgToMiniDataURI(newImage.data.toString());
-                break;
-            case 'webp':
-                datauri = `data:image/webp;base64,${newImage.data.toString('base64')}`;
-                break;
-            case 'jpg':
-            case 'png':
-                // TODO but not possible in current code
-                break;
+    if (isAboveTheFold) {
+        let imageToEmbed = newImage;
+        // If new image was not generated then take the old image
+        if (!imageToEmbed) {
+            imageToEmbed = {
+                data: await originalImage.getData(),
+                format: await originalImage.getImageFormat(),
+            };
         }
-        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,
-            });
+        // Only embed small images
+        // matching the embed size
+        if (imageToEmbed.data.length <= config.image.embed_size) {
+            let datauri = undefined;
+            const ifmt = imageToEmbed.format;
+            switch (ifmt) {
+                case 'svg':
+                    datauri = svgToMiniDataURI(imageToEmbed.data.toString());
+                    break;
+                case 'webp':
+                case 'jpg':
+                case 'png':
+                    datauri = `data:image/${ifmt === 'jpg' ? 'jpeg' : ifmt};base64,${imageToEmbed.data.toString('base64')}`;
+                    break;
+            }
+            if (datauri) {
+                isEmbed = true;
+                img.attr('src', datauri);
+                img.removeAttr('loading');
+                img.removeAttr('decoding');
+                $state.reportSummary({
+                    action: `${imageToEmbed.format}->embed`,
+                    originalSize: await originalImage.getLen(),
+                    compressedSize: imageToEmbed.data.length,
+                });
+            }
         }
     }
-    if (isEmbed) {
-        // Image is embed, no need for more processing
+    if (isEmbed && (await originalImage.getExt()) === 'svg') {
+        // SVG has a different behaviour with image size
+        // Needs to be tested more
+        // For the moment skip image size for SVG
         return;
     }
     /*
      * Attribute 'width' & 'height'
      */
     const [w, h] = await setImageSize(htmlfile, img, originalImage);
+    if (isEmbed) {
+        // Image is embed, no need for more processing
+        return;
+    }
     //
     // Stop here if svg
     //
@@ -364,7 +394,12 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
 async function generateSrcSet(htmlfile, originalImage, startSrc, startSrcLength, options) {
     const ext = path.extname(originalImage.src);
     const fullbasename = originalImage.src.slice(0, -ext.length);
-    const imageSrc = (addition) => `${fullbasename}${addition}${options.toFormat === 'unchanged' ? ext : '.' + options.toFormat}`;
+    const imageSrc = (addition) => {
+        var _a;
+        return `${fullbasename}${addition}${options.toFormat === 'unchanged'
+            ? ext
+            : `.${(_a = options.toFormat) === null || _a === void 0 ? void 0 : _a.split('+')[0]}`}`;
+    };
     // Start from original image
     let new_srcset = '';
     const meta = await originalImage.getImageMeta();
@@ -537,8 +572,8 @@ async function setImageSize(htmlfile, img, image) {
     // Something when wrong
     throw new Error(`Unexpected issue when resolving image size "${image.src}"`);
 }
-export async function optimize(exclude) {
-    const glob = ['**/*.{htm,html}'];
+export async function optimize(include, exclude) {
+    const glob = include ? [include] : ['**/*.{htm,html}'];
     if (exclude)
         glob.push('!' + exclude);
     const paths = await globby(glob, { cwd: $state.dir });

package/dist/utils/resource.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="node" resolution-mode="require"/>
 import { FileExtension, MimeType } from 'file-type';
+import { ImageFormat } from '../compressors/images.js';
 type ImageMeta = {
     width: number | undefined;
     height: number | undefined;
@@ -21,6 +22,7 @@ export declare class Resource {
     getImageMeta(): Promise<ImageMeta | null | undefined>;
     getLen(): Promise<number>;
     getExt(): Promise<FileExtension | 'svg'>;
+    getImageFormat(): Promise<ImageFormat | undefined>;
     getMime(): Promise<MimeType | 'image/svg+xml'>;
     private loadFileType;
     static loadResource(projectRoot: string, relativeFile: string, src: string): Promise<Resource | undefined>;

package/dist/utils/resource.js

@@ -3,6 +3,7 @@ import * as path from 'path';
 import * as fs from 'fs/promises';
 import { fileTypeFromBuffer } from 'file-type';
 import sharp from 'sharp';
+import { AllImageFormat } from '../compressors/images.js';
 /**
  * File extension, mime and data are loaded only on demand, then cached.
  */
@@ -53,6 +54,12 @@ export class Resource {
         }
         return this.ext;
     }
+    async getImageFormat() {
+        const ext = (await this.getExt());
+        if (AllImageFormat.includes(ext))
+            return ext;
+        return undefined;
+    }
     async getMime() {
         if (this.mime === undefined) {
             await this.loadFileType();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@divriots/jampack",
-  "version": "0.8.1",
+  "version": "0.9.1",
   "description": "Packer for static websites",
   "author": "Georges Gomes @georges-gomes",
   "bin": {
@@ -49,7 +49,7 @@
   },
   "scripts": {
     "watch": "pnpm build --watch",
-    "try": "shx rm -fr demo && cp -R demo_avif demo && node ./dist/index.js ./demo --nocache",
+    "try": "shx rm -fr demo && cp -R demo_wcd demo && node ./dist/index.js ./demo --nocache --onlyoptim",
     "build": "shx rm -rf dist && tsc -b",
     "lint": "eslint . --ext .ts --config .eslintrc"
   },