@divriots/jampack 0.6.0 → 0.6.2

package/README.md

@@ -69,6 +69,7 @@ See [the list of features](https://jampack.divriots.com).
 - [LWC.studio](https://lwc.studio)
 - [Components.studio](https://components.studio)
 - [keycloak.ch](https://keycloak.ch)
+- [bayjs.org](https://bayjs.org/)
 
 > Add yours here
 

package/dist/cache.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="node" resolution-mode="require"/>
-import type { Image } from "./types.js";
+import type { Image } from './compressors/images.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 };
+export { cleanCache, computeCacheHash, getFromCacheCompressImage, addToCacheCompressImage, };

package/dist/cache.js

@@ -1,9 +1,9 @@
-import hasha from "hasha";
-import path from "path";
-import * as fs from "fs/promises";
+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";
+const CACHE_FOLDER = '.jampack/cache';
 async function cleanCache() {
     try {
         await fs.rm(CACHE_FOLDER, { recursive: true });
@@ -18,7 +18,7 @@ function computeCacheHash(buffer, options) {
     }
     let hash = `${VERSION}/${hasha(buffer, { algorithm: 'sha256' })}`;
     if (options) {
-        hash += "/" + hasha(JSON.stringify(options), { algorithm: 'md5' });
+        hash += '/' + hasha(JSON.stringify(options), { algorithm: 'md5' });
     }
     return hash;
 }
@@ -49,4 +49,4 @@ async function addToCacheCompressImage(hash, image) {
     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 };
+export { cleanCache, computeCacheHash, getFromCacheCompressImage, addToCacheCompressImage, };

package/dist/compress.d.ts

@@ -1,7 +1 @@
-import sharp from 'sharp';
-import type { Image } from './types.js';
-export declare const compressImage: (data: Buffer, options: {
-    resize?: sharp.ResizeOptions;
-    toFormat?: 'webp' | 'pjpg' | 'avif' | 'unchanged';
-}) => Promise<Image | undefined>;
-export declare function compress(exclude: string): Promise<void>;
+export declare function compressFolder(exclude: string): Promise<void>;

package/dist/compress.js

@@ -1,27 +1,13 @@
 import * as fs from 'fs/promises';
 import * as path from 'path';
-import { optimize as svgo } from 'svgo';
-import { minify as htmlminifier } from 'html-minifier-terser';
-import { minify as csso } from 'csso';
-import { transform as lightcss } from 'lightningcss';
 import { formatBytes } from './utils.js';
-import sharp from 'sharp';
-import swc from '@swc/core';
 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;
-}
+import { compressCSS } from './compressors/css.js';
+import { compressJS } from './compressors/js.js';
+import { compressHTML } from './compressors/html.js';
+import { compressImage } from './compressors/images.js';
 const processFile = async (file, stats) => {
     let writeData = undefined;
     try {
@@ -33,7 +19,8 @@ const processFile = async (file, stats) => {
             case '.svg':
             case '.webp':
             case '.avif':
-                const newImage = await compressImageFile(file);
+                const imgData = await fs.readFile(file);
+                const newImage = await compressImage(imgData, {});
                 if ((newImage === null || newImage === void 0 ? void 0 : newImage.data) && newImage.data.length < stats.size) {
                     writeData = newImage.data;
                 }
@@ -41,44 +28,14 @@ const processFile = async (file, stats) => {
             case '.html':
             case '.htm':
                 const htmldata = await fs.readFile(file);
-                const newhtmlData = await htmlminifier(htmldata.toString(), {
-                    minifyCSS: true,
-                    minifyJS: compressInlineJS,
-                    sortClassName: true,
-                    sortAttributes: true,
-                });
+                const newhtmlData = await compressHTML(htmldata);
                 writeData = newhtmlData;
                 break;
             case '.css':
                 const cssdata = await fs.readFile(file);
-                // Compress with csso
-                const cssoCSSData = Buffer.from(await csso(cssdata.toString(), { comments: false }).css);
-                // Compress with lightningcss
-                let lightCSSData;
-                try {
-                    lightCSSData = lightcss({
-                        filename: 'style.css',
-                        code: cssdata,
-                        minify: true,
-                        sourceMap: false,
-                    }).code;
-                }
-                catch (e) {
-                    // Error while processing with lightningcss
-                    // Ignore
-                }
-                // Pick the best
-                if (cssoCSSData && lightCSSData) {
-                    writeData =
-                        cssoCSSData.length <= lightCSSData.length
-                            ? cssoCSSData
-                            : lightCSSData;
-                }
-                else if (cssoCSSData && !lightCSSData) {
-                    writeData = cssoCSSData;
-                }
-                else if (!cssoCSSData && lightCSSData) {
-                    writeData = lightCSSData;
+                const newCSS = await compressCSS(cssdata);
+                if (newCSS && newCSS.length < cssdata.length) {
+                    writeData = newCSS;
                 }
                 break;
             case '.js':
@@ -110,122 +67,7 @@ const processFile = async (file, stats) => {
     $state.compressedFiles.add(file);
     $state.reportSummary(result);
 };
-function createWebpOptions(opt) {
-    return {
-        nearLossless: opt.mode === 'lossless',
-        quality: opt.quality,
-        effort: opt.effort,
-    };
-}
-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 });
-    const meta = await sharpFile.metadata();
-    if (meta.pages && meta.pages > 1) {
-        // Skip animated images for the moment.
-        return undefined;
-    }
-    let outputFormat;
-    // Special case for svg
-    if (meta.format === 'svg') {
-        const newData = svgo(data, {
-            multipass: true,
-            plugins: [
-                {
-                    name: 'preset-default',
-                    params: {
-                        overrides: {
-                            removeViewBox: false,
-                        },
-                    },
-                },
-            ],
-        });
-        if (newData.error || newData.modernError) {
-            console.log(`Error processing svg ${data}`);
-            return undefined;
-        }
-        return { format: 'svg', data: Buffer.from(newData.data, 'utf8') };
-    }
-    // The bitmap images
-    if (toFormat === 'unchanged') {
-        switch (meta.format) {
-            case 'png':
-                sharpFile = sharpFile.png(config.image.png.options || {});
-                outputFormat = 'png';
-                break;
-            case 'jpeg':
-            case 'jpg':
-                sharpFile = sharpFile.jpeg(config.image.jpeg.options || {});
-                outputFormat = 'jpg';
-                break;
-            case 'webp':
-                sharpFile = sharpFile.webp(createWebpOptions(config.image.webp.options_lossly) || {});
-                outputFormat = 'webp';
-                break;
-            case 'avif':
-                sharpFile = sharpFile.avif();
-                outputFormat = 'avif';
-                break;
-        }
-    }
-    else {
-        // To format
-        switch (toFormat) {
-            case 'pjpg':
-                sharpFile = sharpFile.jpeg({ ...config.image.jpeg.options, progressive: true } || {});
-                outputFormat = 'jpg';
-                break;
-            case 'webp':
-                sharpFile = sharpFile.webp(createWebpOptions(meta.format === 'png'
-                    ? config.image.webp.options_lossless
-                    : config.image.webp.options_lossly));
-                outputFormat = 'webp';
-                break;
-            case 'avif':
-                sharpFile = sharpFile.avif({ effort: 6 });
-                outputFormat = 'avif';
-                break;
-        }
-    }
-    // Unknow input format or output format
-    // Can't do
-    if (!outputFormat)
-        return undefined;
-    // If resize is requested
-    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,
-        });
-    }
-    //
-    // Output image processed
-    //
-    // Add to cache
-    const outputImage = {
-        format: outputFormat,
-        data: await sharpFile.toBuffer(),
-    };
-    await addToCacheCompressImage(cacheHash, outputImage);
-    // Go
-    return outputImage;
-};
-const compressImageFile = async (file) => {
-    const buffer = await fs.readFile(file);
-    return compressImage(buffer, {});
-};
-export async function compress(exclude) {
+export async function compressFolder(exclude) {
     const spinner = ora(getProgressText()).start();
     const globs = ['**/**'];
     if (exclude)

package/dist/compressors/css.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="node" resolution-mode="require"/>
+export declare function compressCSS(originalCode: Buffer, type?: 'inline' | undefined): Promise<Buffer>;

package/dist/compressors/css.js

@@ -0,0 +1,42 @@
+import { minify as csso } from 'csso';
+import { transform as lightcss, transformStyleAttribute as lightcssStyleAttribute, } from 'lightningcss';
+export async function compressCSS(originalCode, type) {
+    // csso only support css files. No inline style
+    let cssoCSSData = undefined;
+    if (type !== 'inline') {
+        // Compress with csso
+        cssoCSSData = Buffer.from(await csso(originalCode.toString(), { comments: false }).css);
+    }
+    // Compress with lightningcss
+    let lightCSSData;
+    try {
+        const options = {
+            code: originalCode,
+            minify: true,
+            sourceMap: false,
+        };
+        if (type === 'inline') {
+            lightCSSData = lightcssStyleAttribute(options).code;
+        }
+        else {
+            lightCSSData = lightcss({ filename: 'style.css', ...options }).code;
+        }
+    }
+    catch (e) {
+        // Error while processing with lightningcss
+        // Ignore, we have csso as backup
+    }
+    let resultBuffer = undefined;
+    // Pick the best
+    if (cssoCSSData && lightCSSData) {
+        resultBuffer =
+            cssoCSSData.length <= lightCSSData.length ? cssoCSSData : lightCSSData;
+    }
+    else if (cssoCSSData && !lightCSSData) {
+        resultBuffer = cssoCSSData;
+    }
+    else if (!cssoCSSData && lightCSSData) {
+        resultBuffer = lightCSSData;
+    }
+    return resultBuffer || originalCode;
+}

package/dist/compressors/html.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="node" resolution-mode="require"/>
+export declare function compressHTML(originalCode: Buffer): Promise<Buffer>;

package/dist/compressors/html.js

@@ -0,0 +1,27 @@
+import { minify } from 'html-minifier-terser';
+import { compressCSS } from './css.js';
+import { compressJS } from './js.js';
+async function minifyJSinHTML(originalCode) {
+    const newCode = await compressJS(originalCode);
+    if (newCode && newCode.length < originalCode.length)
+        return newCode;
+    return originalCode;
+}
+async function minifyCSSinHTML(originalCode, type) {
+    const originalBuffer = Buffer.from(originalCode);
+    const newCSS = await compressCSS(originalBuffer, type);
+    if (newCSS && newCSS.length < originalBuffer.length)
+        return newCSS.toString();
+    return originalCode;
+}
+export async function compressHTML(originalCode) {
+    const newhtmlData = await minify(originalCode.toString(), {
+        minifyCSS: minifyCSSinHTML,
+        minifyJS: minifyJSinHTML,
+        sortClassName: true,
+        sortAttributes: true,
+    });
+    if (newhtmlData)
+        return Buffer.from(newhtmlData, 'utf-8');
+    return originalCode;
+}

package/dist/compressors/images.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="node" resolution-mode="require"/>
+import sharp from 'sharp';
+export type ImageFormat = 'webp' | 'svg' | 'jpg' | 'png' | 'avif' | undefined;
+export type Image = {
+    format: ImageFormat;
+    data: Buffer;
+};
+export declare function compressImage(data: Buffer, options: {
+    resize?: sharp.ResizeOptions;
+    toFormat?: 'webp' | 'pjpg' | 'avif' | 'unchanged';
+}): Promise<Image | undefined>;

package/dist/compressors/images.js

@@ -0,0 +1,115 @@
+import sharp from 'sharp';
+import { optimize as svgo } from 'svgo';
+import { getFromCacheCompressImage, addToCacheCompressImage, computeCacheHash, } from '../cache.js';
+import config from '../config.js';
+function createWebpOptions(opt) {
+    return {
+        nearLossless: opt.mode === 'lossless',
+        quality: opt.quality,
+        effort: opt.effort,
+    };
+}
+export async function compressImage(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 });
+    const meta = await sharpFile.metadata();
+    if (meta.pages && meta.pages > 1) {
+        // Skip animated images for the moment.
+        return undefined;
+    }
+    let outputFormat;
+    // Special case for svg
+    if (meta.format === 'svg') {
+        const newData = svgo(data, {
+            multipass: true,
+            plugins: [
+                {
+                    name: 'preset-default',
+                    params: {
+                        overrides: {
+                            removeViewBox: false,
+                        },
+                    },
+                },
+            ],
+        });
+        if (newData.error || newData.modernError) {
+            console.log(`Error processing svg ${data}`);
+            return undefined;
+        }
+        return { format: 'svg', data: Buffer.from(newData.data, 'utf8') };
+    }
+    // The bitmap images
+    if (toFormat === 'unchanged') {
+        switch (meta.format) {
+            case 'png':
+                sharpFile = sharpFile.png(config.image.png.options || {});
+                outputFormat = 'png';
+                break;
+            case 'jpeg':
+            case 'jpg':
+                sharpFile = sharpFile.jpeg(config.image.jpeg.options || {});
+                outputFormat = 'jpg';
+                break;
+            case 'webp':
+                sharpFile = sharpFile.webp(createWebpOptions(config.image.webp.options_lossly) || {});
+                outputFormat = 'webp';
+                break;
+            case 'avif':
+                sharpFile = sharpFile.avif();
+                outputFormat = 'avif';
+                break;
+        }
+    }
+    else {
+        // To format
+        switch (toFormat) {
+            case 'pjpg':
+                sharpFile = sharpFile.jpeg({ ...config.image.jpeg.options, progressive: true } || {});
+                outputFormat = 'jpg';
+                break;
+            case 'webp':
+                sharpFile = sharpFile.webp(createWebpOptions(meta.format === 'png'
+                    ? config.image.webp.options_lossless
+                    : config.image.webp.options_lossly));
+                outputFormat = 'webp';
+                break;
+            case 'avif':
+                sharpFile = sharpFile.avif({ effort: 6 });
+                outputFormat = 'avif';
+                break;
+        }
+    }
+    // Unknow input format or output format
+    // Can't do
+    if (!outputFormat)
+        return undefined;
+    // If resize is requested
+    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,
+        });
+    }
+    //
+    // Output image processed
+    //
+    // Add to cache
+    const outputImage = {
+        format: outputFormat,
+        data: await sharpFile.toBuffer(),
+    };
+    await addToCacheCompressImage(cacheHash, outputImage);
+    // Go
+    return outputImage;
+}

package/dist/compressors/js copy.d.ts

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

package/dist/compressors/js copy.js

@@ -0,0 +1,8 @@
+import swc from '@swc/core';
+export async function compressJS(originalCode) {
+    const newjsresult = await swc.minify(originalCode, {
+        compress: true,
+        mangle: true,
+    });
+    return newjsresult.code;
+}

package/dist/compressors/js.d.ts

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

package/dist/compressors/js.js

@@ -0,0 +1,8 @@
+import swc from '@swc/core';
+export async function compressJS(originalCode) {
+    const newjsresult = await swc.minify(originalCode, {
+        compress: true,
+        mangle: true,
+    });
+    return newjsresult.code;
+}

package/dist/config.d.ts

@@ -1,6 +1,6 @@
 export type WebpOptions = {
     effort: number;
-    mode: "lossless" | "lossly";
+    mode: 'lossless' | 'lossly';
     quality: number;
 };
 export type Options = {

package/dist/config.js

@@ -1,7 +1,7 @@
 const default_options = {
     image: {
         embed_size: 400,
-        srcset_min_width: 400,
+        srcset_min_width: 640,
         compress: true,
         jpeg: {
             options: {
@@ -18,12 +18,12 @@ const default_options = {
             options_lossless: {
                 effort: 4,
                 quality: 80,
-                mode: "lossless",
+                mode: 'lossless',
             },
             options_lossly: {
                 effort: 4,
                 quality: 80,
-                mode: "lossly",
+                mode: 'lossly',
             },
         },
     },

package/dist/index.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import { Command } from 'commander';
-import { compress } from './compress.js';
+import { compressFolder } from './compress.js';
 import { optimize } from './optimize.js';
 import $state from './state.js';
 import { table } from 'table';
@@ -21,7 +21,10 @@ const logo = `     __                                    __
 `;
 console.log(logo);
 const program = new Command();
-program.name('jampack').description('Static website Optimizer').version(VERSION);
+program
+    .name('jampack')
+    .description('Static website Optimizer')
+    .version(VERSION);
 program
     .command('pack', { isDefault: true })
     .description('todo')
@@ -54,7 +57,7 @@ program
     if (!options.onlyoptim && !options.fast) {
         printTitle('PASS 2 - Compressing the rest');
         console.time('Done');
-        await compress(options.exclude);
+        await compressFolder(options.exclude);
         console.timeEnd('Done');
     }
     printSummary();

package/dist/optimize.js

@@ -4,7 +4,7 @@ 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 { compressImage } from './compressors/images.js';
 import svgToMiniDataURI from 'mini-svg-data-uri';
 import $state from './state.js';
 import kleur from 'kleur';
@@ -233,10 +233,14 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
          * Attribute 'srcset'
          */
         const attr_srcset = img.attr('srcset');
-        if (attr_srcset) {
-            // If srcset is set, don't touch it.
+        const attr_sizes = img.attr('sizes');
+        if (attr_srcset || attr_sizes) {
+            // If srcset or sizes are set, don't touch it.
             // The compress pass will compress the images
             // of the srcset
+            //
+            // TODO
+            // support if sizes alone is set (no srcset) and generate the appropriate srcset
         }
         else {
             // Generate image set
@@ -286,6 +290,7 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
             }
             if (new_srcset) {
                 img.attr('srcset', `${img.attr('src')} ${w}w` + new_srcset);
+                img.attr('sizes', '100vw');
             }
         }
     }
@@ -307,7 +312,7 @@ async function setImageSize(htmlfile, img, image) {
         if (!isNumeric(width)) {
             $state.reportIssue(htmlfile, {
                 type: 'warn',
-                msg: `Invalid width attribute "${width}" format - overriding`,
+                msg: `Invalid width attribute format: "${width}" - overriding`,
             });
             width = undefined;
         }
@@ -316,7 +321,7 @@ async function setImageSize(htmlfile, img, image) {
         if (!isNumeric(height)) {
             $state.reportIssue(htmlfile, {
                 type: 'warn',
-                msg: `Invalid height attribute "${height}" format - overriding`,
+                msg: `Invalid height attribute format: "${height}" - overriding`,
             });
             height = undefined;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@divriots/jampack",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "Packer for static websites",
   "author": "Georges Gomes @georges-gomes",
   "bin": {
@@ -25,7 +25,6 @@
     "@types/sharp": "^0.31.0",
     "@types/svgo": "^2.6.4",
     "@types/table": "^6.3.2",
-    "chalk": "^5.1.2",
     "cheerio": "0.22.0",
     "commander": "^9.4.1",
     "csso": "^5.0.5",