@divriots/jampack 0.22.1 → 0.23.0

package/README.md

@@ -94,6 +94,74 @@ becomes responsive with multiple formats including AVIF:
 </picture>
 ```
 
+[Read more](/features/optimize-images)
+
+### CDN images become responsive
+
+```html
+<img
+      src="https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      alt="Clouds in the sky by Taylor Van Riper"
+      width="2848"
+      height="4272"
+    />
+```
+
+becomes
+
+```html
+<img
+      src="https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      alt="Clouds in the sky by Taylor Van Riper"
+      width="2848"
+      height="4272"
+      loading="lazy"
+      decoding="async"
+      srcset="
+        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=2848&amp;fit=min&amp;auto=format 2848w,
+        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=2548&amp;fit=min&amp;auto=format 2548w,
+        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=2248&amp;fit=min&amp;auto=format 2248w,
+        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=1948&amp;fit=min&amp;auto=format 1948w,
+        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=1648&amp;fit=min&amp;auto=format 1648w,
+        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=1348&amp;fit=min&amp;auto=format 1348w,
+        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=1048&amp;fit=min&amp;auto=format 1048w
+      "
+      sizes="100vw"
+    />
+```
+
+[Read more](/features/optimize-images-cdn)
+
+### External images can be downloaded and optimized
+
+```html
+<img
+     src="https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=jpg&fit=crop&w=1287&q=80"
+     alt="Clouds in the sky by Taylor Van Riper"
+/>
+```
+
+becomes
+
+```html
+<img
+     src="_jampack/ab99b9d280ce4cf7cfc810b59f3a7739.jpg.webp"
+     alt="Clouds in the sky by Taylor Van Riper"
+     loading="lazy"
+     decoding="async"
+     width="1287"
+     height="1931"
+     srcset="
+        _jampack/ab99b9d280ce4cf7cfc810b59f3a7739.jpg.webp  1287w,
+        _jampack/ab99b9d280ce4cf7cfc810b59f3a7739@987w.webp  987w,
+        _jampack/ab99b9d280ce4cf7cfc810b59f3a7739@687w.webp  687w
+     "
+     sizes="100vw"
+    />
+```
+
+[Read more](/features/optimize-images-external)
+
 ### Above & below-the-fold
 
 `jampack` optimizes assets above-the-fold ⬆️.
@@ -106,21 +174,21 @@ Lazy-load assets below-the-fold ⬇️.
 
 - Images and Iframes are lazy loaded.
 
-See [Above-the-fold optimisations](https://jampack.divriots.com/features/optimize-above-the-fold/) for details.
+[Read more](https://jampack.divriots.com/features/optimize-above-the-fold/)
 
 ## Inline critical CSS
 
 Avoid [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) while stylesheets are downloaded and parsed.
 `jampack` will inline critical CSS and lazy-load the rest of CSS.
 
-See [Inline critical CSS](https://jampack.divriots.com/features/inline-critical-css/) for details.
+[Read more](https://jampack.divriots.com/features/inline-critical-css/)
 
 ## Prefetch links
 
 Speedup the future page navigations by prefetching the links on the page.
 Thanks to [quicklink](https://github.com/GoogleChromeLabs/quicklink), this can be done dynamically as links enter the viewport.
 
-See [Prefetch links](https://jampack.divriots.com/features/prefetch-links/) for details.
+[Read more](https://jampack.divriots.com/features/prefetch-links/)
 
 ### All assets are compressed
 
@@ -137,9 +205,8 @@ In a 2nd PASS, `jampack` compresses all untouched assets and keep the same name
 | `.webp`         | [`sharp`](https://sharp.pixelplumbing.com/)                 |  
 | `.avif`         | [`sharp`](https://sharp.pixelplumbing.com/)                 |  
 
-### And more!
+### [And a lot more!](https://jampack.divriots.com/)
 
-See [Documentation](https://jampack.divriots.com/) for all feature list and examples.
 
 ## Quick use
 
@@ -163,7 +230,7 @@ For more options see [CLI options](https://jampack.divriots.com/cli-options/).
 - [bayjs.org](https://bayjs.org/)
 - [qwind.pages.dev](https://qwind.pages.dev/)
 - [Bloycey's Blog](https://bloycey.blog/)
-- [codenanshu.in](https://codenanshu.in/)
+- [gxanshu.in](https://gxanshu.in/)
   
 > Add yours here
 

package/dist/compressors/css.d.ts

@@ -1,2 +1,4 @@
 /// <reference types="node" resolution-mode="require"/>
+import { Options } from '../config-types.js';
 export declare function compressCSS(originalCode: Buffer, type?: 'inline' | undefined): Promise<Buffer>;
+export declare function loadConfig(config: Options): void;

package/dist/compressors/css.js

@@ -1,4 +1,6 @@
-import { transform as lightcss, transformStyleAttribute as lightcssStyleAttribute, } from 'lightningcss';
+import browserslist from 'browserslist';
+import { browserslistToTargets, transform as lightcss, transformStyleAttribute as lightcssStyleAttribute, } from 'lightningcss';
+let targets = browserslistToTargets(browserslist('defaults'));
 export async function compressCSS(originalCode, type) {
     // Compress with lightningcss
     let lightCSSData = undefined;
@@ -12,7 +14,11 @@ export async function compressCSS(originalCode, type) {
             lightCSSData = lightcssStyleAttribute(options).code;
         }
         else {
-            lightCSSData = lightcss({ filename: 'style.css', ...options }).code;
+            lightCSSData = lightcss({
+                filename: 'style.css',
+                targets,
+                ...options,
+            }).code;
         }
     }
     catch (e) {
@@ -26,3 +32,6 @@ export async function compressCSS(originalCode, type) {
     }
     return resultBuffer || originalCode;
 }
+export function loadConfig(config) {
+    targets = browserslistToTargets(browserslist(config.css.browserslist || config.general.browserslist));
+}

package/dist/compressors/html.js

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

package/dist/config-default.js

@@ -1,6 +1,10 @@
 const default_options = {
+    general: {
+        browserslist: 'defaults', // defaults = '> 0.5%, last 2 versions, Firefox ESR, not dead'
+    },
     html: {
         add_css_reset_as: 'inline',
+        sort_attributes: false,
     },
     css: {
         inline_critical_css: false,
@@ -10,8 +14,8 @@ const default_options = {
     },
     image: {
         embed_size: 1500,
-        srcset_min_width: 390 * 2,
-        srcset_max_width: 1920 * 2,
+        srcset_min_width: 390 * 2, // HiDPI phone
+        srcset_max_width: 1920 * 2, // 4K
         max_width: 99999,
         external: {
             process: 'off',

package/dist/config-types.d.ts

@@ -4,14 +4,19 @@ export type WebpOptions = {
     quality: number;
 };
 export type Options = {
+    general: {
+        browserslist: string;
+    };
     html: {
         add_css_reset_as: 'inline' | 'off';
+        sort_attributes: boolean;
     };
     js: {
         compressor: 'esbuild' | 'swc';
     };
     css: {
         inline_critical_css: boolean;
+        browserslist?: string;
     };
     image: {
         embed_size: number;

package/dist/index.js

@@ -5,7 +5,7 @@ import { optimize } from './optimize.js';
 import $state from './state.js';
 import { table } from 'table';
 import { formatBytes } from './utils.js';
-import { fast, loadConfig } from './config.js';
+import config, { fast, loadConfig } from './config.js';
 import { printTitle } from './logger.js';
 import { exit } from 'process';
 import kleur from 'kleur';
@@ -13,6 +13,7 @@ import { cleanCache } from './cache.js';
 import { VERSION } from './packagejson.js';
 import { mkdirSync } from 'fs';
 import { join } from 'path';
+import { loadConfig as loadConfigCSS } from './compressors/css.js';
 const logo = `     __                                    __    
     |__|____    _____ ___________    ____ |  | __
     |  \\__  \\  /     \\\\____ \\__  \\ _/ ___\\|  |/ /
@@ -67,6 +68,8 @@ program
         console.error('Failed to create `_jampack` folder.');
         exit(1);
     }
+    // Inject config into modules
+    loadConfigCSS(config);
     if (!options.onlycomp) {
         printTitle('PASS 1 - Optimizing');
         console.time('Done');

package/dist/optimize.js

@@ -26,9 +26,10 @@ function getIntAttr(img, attr) {
     return parsed;
 }
 async function analyse(file) {
-    var _a;
     console.log('▶ ' + file);
     const html = (await fs.readFile(path.join($state.dir, file))).toString();
+    if (!html.includes('<html'))
+        return;
     const $ = cheerio.load(html, { sourceCodeLocationInfo: true });
     const theFold = getTheFold($);
     const imgs = $('img');
@@ -100,22 +101,44 @@ async function analyse(file) {
     //
     let prependToHead = '';
     let appendToHead = '';
+    const heads = $('head'); // always exists because doc loaded with isDocument=true (default)
+    const charsetElements$ = heads.find('meta[charset]');
+    const wasCharsetFirst = !charsetElements$.prev().length;
     if (config.html.add_css_reset_as === 'inline') {
         prependToHead += `<style>:where(img){height:auto;}</style>`;
     }
     if (prependToHead || appendToHead) {
-        let heads = $('head');
-        if (heads.length === 0) {
-            // head tag doesn't exist
-            (_a = $('html')) === null || _a === void 0 ? void 0 : _a.prepend(`<head></head>`);
-        }
-        heads = $('head');
-        // head tag exist
         if (prependToHead)
             heads.prepend(prependToHead);
         if (appendToHead)
             heads.append(appendToHead);
     }
+    switch (charsetElements$.length) {
+        case 0:
+            $state.reportIssue(file, {
+                type: 'fix',
+                msg: 'Adding missing <meta charset="utf-8"> to the top of the <head>',
+            });
+            heads.prepend('<meta charset="utf-8">');
+            break;
+        case 1:
+            if (!wasCharsetFirst) {
+                $state.reportIssue(file, {
+                    type: 'perf',
+                    msg: 'Moving <meta charset> to the top of the <head>',
+                });
+            }
+            if (!wasCharsetFirst || prependToHead)
+                heads.prepend(charsetElements$);
+            break;
+        default:
+            $state.reportIssue(file, {
+                type: 'fix',
+                msg: 'Multiple <meta charset> found in the <head>: taking only the first one and deleting the others',
+            });
+            charsetElements$.remove();
+            heads.prepend(charsetElements$.first());
+    }
     // Add to <body>
     //
     let appendToBody = '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@divriots/jampack",
-  "version": "0.22.1",
+  "version": "0.23.0",
   "cache-version": {
     "img": "v1",
     "img-ext": "v1"
@@ -28,34 +28,35 @@
   "dependencies": {
     "@divriots/cheerio": "1.0.0-rc.12",
     "@proload/core": "^0.3.3",
-    "@swc/core": "^1.3.86",
+    "@swc/core": "^1.3.100",
     "add": "^2.0.6",
+    "browserslist": "^4.22.2",
     "commander": "^10.0.1",
     "critters": "^0.0.20",
     "deepmerge": "^4.3.1",
-    "esbuild": "^0.19.3",
-    "file-type": "^18.5.0",
+    "esbuild": "^0.19.9",
+    "file-type": "^18.7.0",
     "globby": "^13.2.2",
     "hasha": "^5.2.2",
     "html-minifier-terser": "^7.2.0",
     "kleur": "^4.1.5",
-    "lightningcss": "^1.22.0",
+    "lightningcss": "^1.22.1",
     "mini-svg-data-uri": "^1.4.4",
     "ora": "^7.0.1",
     "quicklink": "^2.3.0",
-    "sharp": "^0.32.6",
-    "svgo": "^3.0.2",
+    "sharp": "^0.33.0",
+    "svgo": "^3.1.0",
     "table": "^6.8.1",
-    "unpic": "^3.11.0",
-    "undici": "^5.24.0"
+    "undici": "^5.24.0",
+    "unpic": "^3.16.0"
   },
   "devDependencies": {
-    "@types/html-minifier-terser": "^7.0.0",
-    "@types/node": "^20.6.2",
+    "@types/html-minifier-terser": "^7.0.2",
+    "@types/node": "^20.10.4",
     "shx": "^0.3.3",
-    "ts-node": "^10.2.1",
+    "ts-node": "^10.9.2",
     "tslib": "^2.6.2",
-    "typescript": "^5.2.2"
+    "typescript": "^5.3.3"
   },
   "scripts": {
     "watch": "pnpm build --watch",