@divriots/jampack 0.31.1 → 0.32.0

package/dist/config-default.js

@@ -65,6 +65,12 @@ const default_options = {
             how: 'native',
         },
     },
+    video: {
+        autoplay_lazyload: {
+            when: 'below-the-fold',
+            how: 'js',
+        },
+    },
     misc: {
         prefetch_links: 'off',
     },

package/dist/config-types.d.ts

@@ -65,6 +65,12 @@ export type Options = {
             how: 'native' | 'js';
         };
     };
+    video: {
+        autoplay_lazyload: {
+            when: 'never' | 'below-the-fold' | 'always';
+            how: 'js';
+        };
+    };
     misc: {
         prefetch_links: 'in-viewport' | 'off';
     };

package/dist/optimize.js

@@ -13,6 +13,7 @@ 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';
 import { processIframe } from './optimizers/process-iframe.js';
+import { processVideo } from './optimizers/process-video.js';
 const UNPIC_DEFAULT_HOST_REGEX = /^https:\/\/n\//g;
 const ABOVE_FOLD_DATA_ATTR = 'data-abovethefold';
 function getIntAttr(img, attr) {
@@ -33,68 +34,9 @@ async function analyse(state, file) {
         return;
     const $ = cheerio.load(html, { sourceCodeLocationInfo: true });
     const theFold = getTheFold($);
-    const imgs = $('img');
-    const imgsArray = [];
-    imgs.each((index, imgElement) => {
-        imgsArray.push(imgElement);
-    });
-    // Process images sequentially
-    const spinnerImg = ora({ prefixText: ' ' }).start();
-    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 img = $(imgElement);
-        const isAboveTheFold = isElementAboveTheFold(img, imgElement, theFold);
-        img.removeAttr(ABOVE_FOLD_DATA_ATTR);
-        try {
-            await processImage(state, file, img, isAboveTheFold);
-        }
-        catch (e) {
-            state.reportIssue(file, {
-                type: 'erro',
-                msg: e.message ||
-                    `Unexpected error while processing image: ${JSON.stringify(e)}`,
-            });
-        }
-    }
-    // Reset spinner
-    spinnerImg.text = kleur.dim(`<img> [${imgsArray.length}/${imgsArray.length}]`);
-    // Notify issues
-    const issues = state.issues.get(file);
-    if (issues) {
-        spinnerImg.fail();
-        console.log(kleur.red(`  ${issues.length} issue${issues.length > 1 ? 's' : ''}`));
-    }
-    else {
-        spinnerImg.succeed();
-    }
-    const iframes = $('iframe');
-    const iframesArray = [];
-    iframes.each((index, ifElement) => {
-        iframesArray.push(ifElement);
-    });
-    // Process iframes sequentially
-    const spinnerIframe = ora({ prefixText: ' ' }).start();
-    for (let i = 0; i < iframesArray.length; i++) {
-        const ifElement = iframesArray[i];
-        spinnerIframe.text = kleur.dim(`<iframe> [${i + 1}/${iframesArray.length}] ${$(ifElement).attr('src')}`);
-        const ifr = $(ifElement);
-        const isAboveTheFold = isElementAboveTheFold(ifr, ifElement, theFold);
-        ifr.removeAttr(ABOVE_FOLD_DATA_ATTR);
-        try {
-            await processIframe(state, file, $, ifElement, isAboveTheFold, appendToBody);
-        }
-        catch (e) {
-            state.reportIssue(file, {
-                type: 'erro',
-                msg: e.message ||
-                    `Unexpected error while processing image: ${JSON.stringify(e)}`,
-            });
-        }
-    }
-    // Reset spinner
-    spinnerIframe.text = kleur.dim(`<iframe> [${iframesArray.length}/${iframesArray.length}]`);
-    spinnerIframe.succeed();
+    await processTag(state, file, $, 'img', 'src', processImage, theFold, appendToBody);
+    await processTag(state, file, $, 'iframe', 'src', processIframe, theFold, appendToBody);
+    await processTag(state, file, $, 'video', 'src', processVideo, theFold, appendToBody);
     // Remove the fold
     //
     if (theFold) {
@@ -774,3 +716,41 @@ export async function optimize(state, include, exclude) {
         await analyse(state, file);
     }
 }
+async function processTag(state, file, $, tag, attribute_to_log, processor, theFold, appendToBody) {
+    const previous_issues = state.issues.get(file);
+    const tags = $(tag);
+    const tagsArray = [];
+    tags.each((index, tagElement) => {
+        tagsArray.push(tagElement);
+    });
+    // Process tags sequentially
+    const spinnerImg = ora({ prefixText: ' ' }).start();
+    for (let i = 0; i < tagsArray.length; i++) {
+        const tagElement = tagsArray[i];
+        spinnerImg.text = kleur.dim(`<${tag}> [${i + 1}/${tagsArray.length}] ${$(tagElement).attr(attribute_to_log)}`);
+        const el = $(tagElement);
+        const isAboveTheFold = isElementAboveTheFold(el, tagElement, theFold);
+        el.removeAttr(ABOVE_FOLD_DATA_ATTR);
+        try {
+            await processor(state, file, el, isAboveTheFold, appendToBody);
+        }
+        catch (e) {
+            state.reportIssue(file, {
+                type: 'erro',
+                msg: e.message ||
+                    `Unexpected error while processing ${tag}: ${JSON.stringify(e)}`,
+            });
+        }
+    }
+    // Reset spinner
+    spinnerImg.text = kleur.dim(`<${tag}> [${tagsArray.length}/${tagsArray.length}]`);
+    // Notify issues
+    const issues = state.issues.get(file);
+    const newIssues = ((issues === null || issues === void 0 ? void 0 : issues.length) || 0) - ((previous_issues === null || previous_issues === void 0 ? void 0 : previous_issues.length) || 0);
+    if (newIssues > 0) {
+        spinnerImg.fail();
+    }
+    else {
+        spinnerImg.succeed();
+    }
+}

package/dist/optimizers/process-iframe.d.ts

@@ -1,3 +1,3 @@
 import * as cheerio from '@divriots/cheerio';
 import type { GlobalState } from '../state.js';
-export declare function processIframe(state: GlobalState, htmlfile: string, $: cheerio.CheerioAPI, imgElement: cheerio.Element, isAboveTheFold: boolean, appendToBody: Record<string, string>): Promise<void>;
+export declare function processIframe(state: GlobalState, htmlfile: string, iframe: cheerio.Cheerio<cheerio.Element>, isAboveTheFold: boolean, appendToBody: Record<string, string>): Promise<void>;

package/dist/optimizers/process-iframe.js

@@ -1,6 +1,5 @@
-import { install_dependency } from '../utils/install-dep.js';
-export async function processIframe(state, htmlfile, $, imgElement, isAboveTheFold, appendToBody) {
-    const iframe = $(imgElement);
+import { install_lozad } from '../utils/install-dep.js';
+export async function processIframe(state, htmlfile, iframe, isAboveTheFold, appendToBody) {
     // Reset loading attribute
     iframe.removeAttr('loading');
     const lazyloadOptions = state.options.iframe.lazyload;
@@ -18,19 +17,7 @@ export async function processIframe(state, htmlfile, $, imgElement, isAboveTheFo
                 iframe.attr('class', 'jampack-lozad');
                 iframe.attr('data-src', src);
                 iframe.removeAttr('src');
-                await install_dependency(state, htmlfile, {
-                    source: {
-                        npm_package_name: 'lozad',
-                        absolute_path_to_file: '/dist',
-                        filename: 'lozad.es.js',
-                    },
-                    destination: {
-                        folder_name: 'lozad-1.16',
-                        code_loader: `import lozad from "./lozad.es.js";
-            const observer = lozad('.jampack-lozad', { rootMargin: '100px 0px', threshold: [0.1] });
-            observer.observe();`,
-                    },
-                }, appendToBody);
+                await install_lozad(state, htmlfile, appendToBody);
             }
         }
     }

package/dist/optimizers/process-video.d.ts

@@ -0,0 +1,3 @@
+import * as cheerio from '@divriots/cheerio';
+import type { GlobalState } from '../state.js';
+export declare function processVideo(state: GlobalState, htmlfile: string, video: cheerio.Cheerio<cheerio.Element>, isAboveTheFold: boolean, appendToBody: Record<string, string>): Promise<void>;

package/dist/optimizers/process-video.js

@@ -0,0 +1,29 @@
+import { install_lozad } from '../utils/install-dep.js';
+export async function processVideo(state, htmlfile, video, isAboveTheFold, appendToBody) {
+    const autoplay = video.attr('autoplay');
+    if (!autoplay || autoplay === '0' || autoplay === 'false') {
+        // If the video is not autoplay we can postpone loading
+        // if there is a poster
+        if (video.attr('poster')) {
+            video.attr('preload', 'none');
+            return;
+        }
+        // TODO create poster for videos without poster
+    }
+    const lazyloadOptions = state.options.video.autoplay_lazyload;
+    if (lazyloadOptions.when === 'never') {
+        return;
+    }
+    if (lazyloadOptions.when === 'always' ||
+        (lazyloadOptions.when === 'below-the-fold' && !isAboveTheFold)) {
+        if (lazyloadOptions.how === 'js') {
+            video.attr('class', 'jampack-lozad');
+            const src = video.attr('src');
+            if (src) {
+                video.attr('data-src', src);
+                video.removeAttr('src');
+            }
+            await install_lozad(state, htmlfile, appendToBody);
+        }
+    }
+}

package/dist/utils/install-dep.d.ts

@@ -10,3 +10,4 @@ export declare function install_dependency(state: GlobalState, html_file: string
         code_loader: string;
     };
 }, appendToBody: Record<string, string>): Promise<void>;
+export declare function install_lozad(state: GlobalState, html_file: string, appendToBody: Record<string, string>): Promise<void>;

package/dist/utils/install-dep.js

@@ -25,3 +25,18 @@ export async function install_dependency(state, html_file, options, appendToBody
         appendToBody[options.source.npm_package_name] = `<script type="module" src="${path.relative(path_html, url_loader)}"></script>`;
     }
 }
+export async function install_lozad(state, html_file, appendToBody) {
+    return install_dependency(state, html_file, {
+        source: {
+            npm_package_name: 'lozad',
+            absolute_path_to_file: '/dist',
+            filename: 'lozad.es.js',
+        },
+        destination: {
+            folder_name: 'lozad-1.16',
+            code_loader: `import lozad from "./lozad.es.js";
+      const observer = lozad('.jampack-lozad', { rootMargin: '100px 0px', threshold: [0.1] });
+      observer.observe();`,
+        },
+    }, appendToBody);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@divriots/jampack",
-  "version": "0.31.1",
+  "version": "0.32.0",
   "cache-version": {
     "img": "v1",
     "img-ext": "v1"