@divriots/jampack 0.21.1 → 0.22.1

package/dist/config-default.js

@@ -18,6 +18,11 @@ const default_options = {
             src_include: /^.*$/,
             src_exclude: null,
         },
+        cdn: {
+            process: 'off',
+            src_include: /^.*$/,
+            src_exclude: null,
+        },
         compress: true,
         jpeg: {
             options: {

package/dist/config-types.d.ts

@@ -23,6 +23,11 @@ export type Options = {
             src_include: RegExp;
             src_exclude: RegExp | null;
         };
+        cdn: {
+            process: 'off' | 'optimize';
+            src_include: RegExp;
+            src_exclude: RegExp | null;
+        };
         compress: boolean;
         jpeg: {
             options: {

package/dist/optimize.js

@@ -1,6 +1,7 @@
 import { globby } from 'globby';
 import * as path from 'path';
 import * as fs from 'fs/promises';
+import { getCanonicalCdnForUrl, getTransformer } from 'unpic';
 import * as cheerio from '@divriots/cheerio';
 import { isNumeric } from './utils.js';
 import config from './config.js';
@@ -13,6 +14,17 @@ import { isLocal, Resource, translateSrc } from './utils/resource.js';
 import { downloadExternalImage } from './optimizers/img-external.js';
 import { inlineCriticalCss } from './optimizers/inline-critical-css.js';
 import { prefetch_links_in_viewport } from './optimizers/prefetch-links.js';
+const UNPIC_DEFAULT_HOST_REGEX = /^https:\/\/n\//g;
+const ABOVE_FOLD_DATA_ATTR = 'data-abovethefold';
+function getIntAttr(img, attr) {
+    const stringValue = img.attr(attr);
+    if (!stringValue)
+        return;
+    const parsed = parseInt(stringValue);
+    if (isNaN(parsed))
+        return;
+    return parsed;
+}
 async function analyse(file) {
     var _a;
     console.log('▶ ' + file);
@@ -29,9 +41,11 @@ async function analyse(file) {
     for (let i = 0; i < imgsArray.length; i++) {
         const imgElement = imgsArray[i];
         spinnerImg.text = kleur.dim(`<img> [${i + 1}/${imgsArray.length}] ${$(imgElement).attr('src')}`);
-        const isAboveTheFold = imgElement.startIndex < theFold;
+        const img = $(imgElement);
+        const isAboveTheFold = isImgAboveTheFold(img, imgElement, theFold);
+        img.removeAttr(ABOVE_FOLD_DATA_ATTR);
         try {
-            await processImage(file, $, imgElement, isAboveTheFold);
+            await processImage(file, img, isAboveTheFold);
         }
         catch (e) {
             $state.reportIssue(file, {
@@ -131,6 +145,15 @@ async function analyse(file) {
         await fs.writeFile(path.join($state.dir, file), htmlResult);
     }
 }
+function isImgAboveTheFold(img, imgElement, theFold) {
+    const aboveTheFoldAttr = img.attr(ABOVE_FOLD_DATA_ATTR);
+    if (aboveTheFoldAttr) {
+        const parsed = parseInt(aboveTheFoldAttr);
+        if (!Number.isNaN(parsed))
+            return !!parsed;
+    }
+    return imgElement.startIndex < theFold;
+}
 function getTheFold($) {
     const theFolds = $('the-fold');
     // If you have the-fold
@@ -154,9 +177,8 @@ function getTheFold($) {
     }
     return 0;
 }
-async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
+async function processImage(htmlfile, img, isAboveTheFold) {
     var _a, _b, _c;
-    const img = $(imgElement);
     /*
      * Attribute 'src'
      */
@@ -226,10 +248,50 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
      * Check for external images
      */
     if (!isLocal(attrib_src)) {
+        switch (config.image.cdn.process) {
+            case 'off':
+                break;
+            case 'optimize':
+                const canonical = getCanonicalCdnForUrl(attrib_src);
+                if (!canonical)
+                    break;
+                const cdnTransformer = getTransformer(canonical.cdn);
+                if (!cdnTransformer)
+                    break;
+                if (!isIncluded(attrib_src, config.image.cdn.src_include, config.image.cdn.src_exclude))
+                    break;
+                let attrib_width = getIntAttr(img, 'width');
+                if (!attrib_width) {
+                    $state.reportIssue(htmlfile, {
+                        type: 'warn',
+                        msg: `Missing or malformed'width' attribute for image ${attrib_src}, unable to perform CDN transform`,
+                    });
+                    return;
+                }
+                let attrib_height = getIntAttr(img, 'height');
+                if (!attrib_height) {
+                    $state.reportIssue(htmlfile, {
+                        type: 'warn',
+                        msg: `Missing or malformed 'height' attribute for image ${attrib_src}, unable to perform CDN transform`,
+                    });
+                    return;
+                }
+                const new_srcset = await generateSrcSetForCdn(attrib_src, cdnTransformer, attrib_width, attrib_height);
+                if (new_srcset !== null) {
+                    img.attr('srcset', new_srcset);
+                }
+                // Add sizes attribute if not specified
+                if (img.attr('srcset') && !img.attr('sizes')) {
+                    img.attr('sizes', '100vw');
+                }
+                return;
+        }
         switch (config.image.external.process) {
             case 'off': // Don't process external images
                 return;
             case 'download': // Download external image for local processing
+                if (!isIncluded(attrib_src, config.image.external.src_include, config.image.external.src_exclude))
+                    break;
                 try {
                     attrib_src = await downloadExternalImage(htmlfile, attrib_src);
                     img.attr('src', attrib_src);
@@ -482,6 +544,33 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
         }
     }
 }
+const isIncluded = (src, includeConf, excludeConf) => !!src.match(includeConf) && (!excludeConf || !src.match(excludeConf));
+async function _generateSrcSet(startSrc, imageWidth, imageHeight, transformSrc) {
+    // Start from original image
+    let new_srcset = '';
+    if (!imageWidth || !imageHeight) {
+        // Forget about srcset
+        return null;
+    }
+    // Start reduction
+    const step = 300; //px
+    let valueW = !startSrc ? imageWidth : imageWidth - step;
+    valueW = Math.min(valueW, config.image.srcset_max_width);
+    while (valueW >= config.image.srcset_min_width) {
+        let src = await transformSrc(valueW);
+        if (src) {
+            new_srcset += `, ${src} ${valueW}w`;
+        }
+        // reduce size
+        valueW -= step;
+    }
+    if (new_srcset) {
+        return startSrc
+            ? `${startSrc} ${imageWidth}w` + new_srcset
+            : new_srcset.slice(2);
+    }
+    return null;
+}
 async function generateSrcSet(htmlfile, originalImage, startSrc, startSrcLength, options) {
     const ext = path.extname(originalImage.src);
     const fullbasename = originalImage.src.slice(0, -ext.length);
@@ -491,24 +580,13 @@ async function generateSrcSet(htmlfile, originalImage, startSrc, startSrcLength,
             ? 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();
     const imageWidth = (meta === null || meta === void 0 ? void 0 : meta.width) || 0;
     const imageHeight = (meta === null || meta === void 0 ? void 0 : meta.height) || 0;
-    if (!imageWidth || !imageHeight) {
-        // Forget about srcset
-        return null;
-    }
-    // Start reduction
-    const step = 300; //px
-    let valueW = !startSrc ? imageWidth : imageWidth - step;
-    valueW = Math.min(valueW, config.image.srcset_max_width);
     let previousImageSize = startSrcLength || Number.MAX_VALUE;
-    while (valueW >= config.image.srcset_min_width) {
+    return _generateSrcSet(startSrc, imageWidth, imageHeight, async (valueW) => {
         const src = imageSrc(`@${valueW}w`);
         const absoluteFilename = translateSrc($state.dir, path.dirname(htmlfile), src);
-        let doAddToSrcSet = true;
         // Don't generate srcset file twice
         if (!$state.compressedFiles.has(absoluteFilename)) {
             const compressedImage = await compressImage(await originalImage.getData(), { ...options, resize: { width: valueW } });
@@ -516,7 +594,7 @@ async function generateSrcSet(htmlfile, originalImage, startSrc, startSrcLength,
                 compressedImage.data.length >= previousImageSize) {
                 // New image is not compressed or bigger than previous image in srcset
                 // Don't add to srcset
-                doAddToSrcSet = false;
+                return;
             }
             else {
                 // Write file
@@ -529,18 +607,17 @@ async function generateSrcSet(htmlfile, originalImage, startSrc, startSrcLength,
                 $state.compressedFiles.add(absoluteFilename);
             }
         }
-        if (doAddToSrcSet) {
-            new_srcset += `, ${src} ${valueW}w`;
-        }
-        // reduce size
-        valueW -= step;
-    }
-    if (new_srcset) {
-        return startSrc
-            ? `${startSrc} ${imageWidth}w` + new_srcset
-            : new_srcset.slice(2);
-    }
-    return null;
+        return src;
+    });
+}
+async function generateSrcSetForCdn(startSrc, cdnTransformer, imageWidth, imageHeight) {
+    return _generateSrcSet('', imageWidth, imageHeight, (valueW) => {
+        var _a, _b;
+        return (_b = (_a = cdnTransformer({
+            url: startSrc,
+            width: valueW,
+        })) === null || _a === void 0 ? void 0 : _a.toString()) === null || _b === void 0 ? void 0 : _b.replace(UNPIC_DEFAULT_HOST_REGEX, '/');
+    });
 }
 async function setImageSize(htmlfile, img, image) {
     let width = img.attr('width');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@divriots/jampack",
-  "version": "0.21.1",
+  "version": "0.22.1",
   "cache-version": {
     "img": "v1",
     "img-ext": "v1"
@@ -19,6 +19,12 @@
     "/bin",
     "/dist"
   ],
+  "exports": {
+    "./optimize": "./dist/optimize.js",
+    "./compress": "./dist/compress.js",
+    "./config": "./dist/config.js",
+    "./state": "./dist/state.js"
+  },
   "dependencies": {
     "@divriots/cheerio": "1.0.0-rc.12",
     "@proload/core": "^0.3.3",
@@ -40,6 +46,7 @@
     "sharp": "^0.32.6",
     "svgo": "^3.0.2",
     "table": "^6.8.1",
+    "unpic": "^3.11.0",
     "undici": "^5.24.0"
   },
   "devDependencies": {