@divriots/jampack 0.30.3 → 0.31.0

package/dist/config-default.js

@@ -59,6 +59,12 @@ const default_options = {
             add_width_and_height: false,
         },
     },
+    iframe: {
+        lazyload: {
+            when: 'below-the-fold',
+            how: 'native',
+        },
+    },
     misc: {
         prefetch_links: 'off',
     },

package/dist/config-types.d.ts

@@ -59,6 +59,12 @@ export type Options = {
             add_width_and_height: boolean;
         };
     };
+    iframe: {
+        lazyload: {
+            when: 'never' | 'below-the-fold' | 'always';
+            how: 'native' | 'js';
+        };
+    };
     misc: {
         prefetch_links: 'in-viewport' | 'off';
     };

package/dist/config.js

@@ -1,5 +1,5 @@
 // @ts-ignore
-import load from '@proload/core';
+import load from './proload/esm/index.mjs';
 import deepmerge from 'deepmerge';
 import default_options from './config-default.js';
 import fast_options_override from './config-fast.js';

package/dist/optimize.js

@@ -12,6 +12,7 @@ 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';
+import { processIframe } from './optimizers/process-iframe.js';
 const UNPIC_DEFAULT_HOST_REGEX = /^https:\/\/n\//g;
 const ABOVE_FOLD_DATA_ATTR = 'data-abovethefold';
 function getIntAttr(img, attr) {
@@ -25,6 +26,8 @@ function getIntAttr(img, attr) {
 }
 async function analyse(state, file) {
     console.log('▶ ' + file);
+    // For processes to add into
+    const appendToBody = {};
     const html = (await fs.readFile(path.join(state.dir, file))).toString();
     if (!html.includes('<html'))
         return;
@@ -79,7 +82,7 @@ async function analyse(state, file) {
         const isAboveTheFold = isElementAboveTheFold(ifr, ifElement, theFold);
         ifr.removeAttr(ABOVE_FOLD_DATA_ATTR);
         try {
-            await processIframe(file, $, ifElement, isAboveTheFold);
+            await processIframe(state, file, $, ifElement, isAboveTheFold, appendToBody);
         }
         catch (e) {
             state.reportIssue(file, {
@@ -142,14 +145,15 @@ async function analyse(state, file) {
     }
     // Add to <body>
     //
-    let appendToBody = '';
     if (options.misc.prefetch_links === 'in-viewport') {
-        appendToBody += await prefetch_links_in_viewport(state, file);
+        await prefetch_links_in_viewport(state, file, appendToBody);
     }
-    if (appendToBody) {
+    // Custom code
+    const keys_to_install = Object.keys(appendToBody);
+    if (keys_to_install.length > 0) {
         const body = $('body');
         if (body.length > 0) {
-            body.append(appendToBody);
+            keys_to_install.forEach((key) => body.append(appendToBody[key]));
         }
     }
     // Render HTML
@@ -760,12 +764,6 @@ async function setImageSize(state, htmlfile, img, image) {
     // Something when wrong
     throw new Error(`Unexpected issue when resolving image size "${image.src}"`);
 }
-async function processIframe(htmlfile, $, imgElement, isAboveTheFold) {
-    const iframe = $(imgElement);
-    if (!isAboveTheFold) {
-        iframe.attr('loading', 'lazy');
-    }
-}
 export async function optimize(state, include, exclude) {
     const glob = include ? [include] : ['**/*.{htm,html}'];
     if (exclude)

package/dist/optimizers/prefetch-links.d.ts

@@ -1,2 +1,2 @@
 import { GlobalState } from '../state.js';
-export declare function prefetch_links_in_viewport(state: GlobalState, html_file: string): Promise<string>;
+export declare function prefetch_links_in_viewport(state: GlobalState, html_file: string, appendToBody: Record<string, string>): Promise<void>;

package/dist/optimizers/prefetch-links.js

@@ -1,26 +1,17 @@
-import * as fs from 'fs/promises';
-import * as path from 'path';
 import { createRequire } from 'node:module';
+import { install_dependency } from '../utils/install-dep.js';
 const require = createRequire(import.meta.url);
-const src_filename = 'quicklink.mjs';
-const folder = `/_jampack/quicklink-2.3.0`;
-const url_loader = `${folder}/loader.js`;
-export async function prefetch_links_in_viewport(state, html_file) {
-    const path_html = path.dirname('/' + html_file);
-    const quickLinkDestination = path.join(state.dir, folder, src_filename);
-    const payloadStored = await fs
-        .access(quickLinkDestination)
-        .catch(() => false);
-    if (!payloadStored) {
-        const path_loader = path.join(state.dir, url_loader);
-        await fs.mkdir(path.join(state.dir, folder), { recursive: true });
-        // Write loader
-        const code_loader = `import { listen } from "./${src_filename}";
-    listen();`;
-        await fs.writeFile(path_loader, code_loader);
-        // Write quicklink code
-        const source = require.resolve(`quicklink/dist/${src_filename}`);
-        await fs.copyFile(source, quickLinkDestination);
-    }
-    return `<script type="module" src="${path.relative(path_html, url_loader)}"></script>`;
+export async function prefetch_links_in_viewport(state, html_file, appendToBody) {
+    await install_dependency(state, html_file, {
+        source: {
+            npm_package_name: 'quicklink',
+            absolute_path_to_file: '/dist',
+            filename: 'quicklink.mjs',
+        },
+        destination: {
+            folder_name: 'quicklink-2.3.0',
+            code_loader: `import { listen } from "./quicklink.mjs";
+    listen();`,
+        },
+    }, appendToBody);
 }

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

@@ -0,0 +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>;

package/dist/optimizers/process-iframe.js

@@ -0,0 +1,37 @@
+import { install_dependency } from '../utils/install-dep.js';
+export async function processIframe(state, htmlfile, $, imgElement, isAboveTheFold, appendToBody) {
+    const iframe = $(imgElement);
+    // Reset loading attribute
+    iframe.removeAttr('loading');
+    const lazyloadOptions = state.options.iframe.lazyload;
+    if (lazyloadOptions.when === 'never') {
+        return;
+    }
+    if (lazyloadOptions.when === 'always' ||
+        (lazyloadOptions.when === 'below-the-fold' && !isAboveTheFold)) {
+        if (lazyloadOptions.how === 'native') {
+            iframe.attr('loading', 'lazy');
+        }
+        else if (lazyloadOptions.how === 'js') {
+            const src = iframe.attr('src');
+            if (src) {
+                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);
+            }
+        }
+    }
+}

package/dist/proload/error.cjs

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * @type import('./error.cjs').ProloadError
+ */
+class ProloadError extends Error {
+    constructor(opts = {}) {
+        super(opts.message);
+        this.name = 'ProloadError';
+        this.code = opts.code || 'ERR_PROLOAD_INVALID';
+        if (Error.captureStackTrace) {
+            Error.captureStackTrace(this, this.constructor);
+        }
+    }
+}
+/**
+ * @type import('./error.cjs').assert
+ */
+function assert(bool, message, code) {
+    if (bool)
+        return;
+    if (message instanceof Error)
+        throw message;
+    throw new ProloadError({ message, code });
+}
+module.exports.ProloadError = ProloadError;
+module.exports.assert = assert;

package/dist/proload/error.d.cts

@@ -0,0 +1,11 @@
+/**
+ * @type import('./error.cjs').ProloadError
+ */
+export class ProloadError extends Error {
+    constructor(opts?: {});
+    code: any;
+}
+/**
+ * @type import('./error.cjs').assert
+ */
+export function assert(bool: any, message: any, code: any): any;

package/dist/proload/esm/index.d.mts

@@ -0,0 +1,27 @@
+export default load;
+import { ProloadError } from "../error.cjs";
+/**
+ *
+ * @param {string} namespace
+ * @param {import('../index').LoadOptions} opts
+ */
+declare function load(namespace: string, opts?: any): Promise<{
+    filePath: any;
+    raw: any;
+    value: {};
+} | undefined>;
+declare namespace load {
+    export { defaultPlugins as plugins };
+    export function use(plugins: any): void;
+}
+/**
+ *
+ * @param {string} namespace
+ * @param {import('../index').LoadOptions} opts
+ */
+declare function resolveConfig(namespace: string, opts?: any): Promise<any>;
+declare const defaultPlugins: {
+    name: string;
+    transform(mdl: any): any;
+}[];
+export { ProloadError, resolveConfig as resolve };

package/dist/proload/esm/index.mjs

@@ -0,0 +1,231 @@
+import escalade from "escalade";
+import { join, dirname, extname, resolve } from "path";
+import deepmerge from "deepmerge";
+import { existsSync, readdir, readFile, stat } from "fs";
+import { promisify } from "util";
+import { createRequire } from "module";
+import requireOrImport from "./requireOrImport.mjs";
+import { assert, ProloadError } from "../error.cjs";
+export { ProloadError };
+const toStats = promisify(stat);
+const toRead = promisify(readdir);
+const toReadFile = promisify(readFile);
+const require = createRequire(import.meta.url);
+let merge = deepmerge;
+const defaultExtensions = ['js', 'cjs', 'mjs'];
+const defaultFileNames = ['[name].config'];
+const validNames = (namespace) => {
+    const extensionPlugins = load.plugins.filter(p => Array.isArray(p.extensions));
+    const fileNamePlugins = load.plugins.filter(p => Array.isArray(p.fileNames));
+    const validExtensions = [...defaultExtensions].concat(...extensionPlugins.map(p => p.extensions));
+    const validFileNames = [...defaultFileNames].concat(...fileNamePlugins.map(p => p.fileNames));
+    const result = validFileNames
+        .map(fileName => fileName.replace('[name]', namespace))
+        .reduce((acc, fileName) => {
+        return [...acc].concat(...validExtensions.map(ext => `${fileName}${ext ? '.' + ext.replace(/^\./, '') : ''}`));
+    }, []);
+    return result;
+};
+/**
+ * @param {any} val
+ * @returns {val is Record<any, any>}
+ */
+const isObject = (val) => val != null && typeof val === "object" && Array.isArray(val) === false;
+const requireOrImportWithMiddleware = (filePath) => {
+    let registerPlugins = load.plugins.filter((plugin) => typeof plugin.register !== "undefined");
+    let transformPlugins = load.plugins.filter((plugin) => typeof plugin.transform !== "undefined");
+    return requireOrImport(filePath, { middleware: registerPlugins }).then(async (mdl) => Promise.all(transformPlugins.map((plugin) => {
+        return Promise.resolve(plugin.transform(mdl)).then((result) => {
+            if (result)
+                mdl = result;
+        });
+    })).then(() => mdl));
+};
+/**
+ *
+ * @param {string} namespace
+ * @param {{ filePath: string, extension: string }} opts
+ * @returns {Promise<{ filePath: string, value: string }>}
+ */
+async function resolveExtension(namespace, { filePath, extension }) {
+    let resolvedPath;
+    if (extension.startsWith("./") || extension.startsWith("../")) {
+        if (extname(extension) === "") {
+            resolvedPath = resolve(dirname(filePath), `${extension}${extname(filePath)}`);
+        }
+        if (!existsSync(resolvedPath))
+            resolvedPath = null;
+        if (!resolvedPath) {
+            resolvedPath = resolve(dirname(filePath), extension);
+        }
+        if (!existsSync(resolvedPath))
+            resolvedPath = null;
+    }
+    if (!resolvedPath) {
+        const pkg = require.resolve(extension, {
+            cwd: dirname(filePath),
+        });
+        const accepted = validNames(namespace);
+        for (const config of accepted) {
+            try {
+                resolvedPath = `${pkg}/${config}`;
+                if (resolvedPath && existsSync(resolvedPath)) {
+                    break;
+                }
+                else {
+                    resolvedPath = null;
+                }
+            }
+            catch (e) { }
+        }
+    }
+    if (!resolvedPath) {
+        resolvedPath = require.resolve(extension, { cwd: dirname(filePath) });
+    }
+    if (!resolvedPath)
+        return;
+    const value = await requireOrImportWithMiddleware(resolvedPath);
+    return { filePath: resolvedPath, value };
+}
+async function resolveExtensions(namespace, { filePath, value: raw, context }, acc = {}) {
+    let value = typeof raw === "function" ? await raw(context) : raw;
+    if (Array.isArray(value))
+        return value;
+    assert(isObject(value), `${namespace} configuration expects an "object" but encountered ${value}`);
+    acc = merge(acc, value);
+    if (!("extends" in value))
+        return acc;
+    assert(Array.isArray(value.extends), `${namespace} "extends" must be an array`);
+    const configs = await Promise.all(value.extends.map((extension) => resolveExtension(namespace, { filePath, extension }).then((config) => resolveExtensions(namespace, { ...config, context }, acc))));
+    for (const config of configs) {
+        acc = merge(acc, config);
+    }
+    delete acc.extends;
+    return acc;
+}
+/**
+ *
+ * @param {string} namespace
+ * @param {import('../index').LoadOptions} opts
+ */
+async function resolveConfig(namespace, opts = {}) {
+    const accepted = validNames(namespace);
+    const { context, accept } = opts;
+    const input = opts.cwd || process.cwd();
+    let mustExist = true;
+    if (typeof opts.mustExist !== "undefined") {
+        mustExist = opts.mustExist;
+    }
+    if (typeof opts.merge === "function") {
+        merge = opts.merge;
+    }
+    let filePath;
+    if (typeof opts.filePath === "string") {
+        const absPath = opts.filePath.startsWith(".")
+            ? resolve(opts.filePath, input)
+            : opts.filePath;
+        if (existsSync(absPath)) {
+            filePath = absPath;
+        }
+    }
+    else {
+        filePath = await escalade(input, async (dir, names) => {
+            if (accept) {
+                for (const n of names) {
+                    if (accept(n, { directory: dir }) === true)
+                        return n;
+                }
+            }
+            for (const n of accepted) {
+                if (names.includes(n))
+                    return n;
+            }
+            if (names.includes("config")) {
+                let d = join(dir, "config");
+                let _, stats = await toStats(d);
+                let entries = [];
+                if (stats.isDirectory()) {
+                    entries = await toRead(d);
+                    for (const n of accepted) {
+                        if (entries.includes(n))
+                            return join("config", n);
+                    }
+                }
+            }
+            if (names.includes("package.json")) {
+                let file = join(dir, "package.json");
+                let _, contents = await toReadFile(file).then((r) => JSON.parse(r.toString()));
+                if (contents[namespace])
+                    return "package.json";
+            }
+        });
+    }
+    if (mustExist) {
+        assert(!!filePath, `Unable to resolve a ${namespace} configuration`, "ERR_PROLOAD_NOT_FOUND");
+    }
+    else if (!filePath) {
+        return;
+    }
+    return filePath;
+}
+/**
+ *
+ * @param {string} namespace
+ * @param {import('../index').LoadOptions} opts
+ */
+async function load(namespace, opts = {}) {
+    const { context } = opts;
+    let mustExist = true;
+    if (typeof opts.mustExist !== 'undefined') {
+        mustExist = opts.mustExist;
+    }
+    const filePath = await resolveConfig(namespace, opts);
+    if (mustExist) {
+        assert(!!filePath, `Unable to resolve a ${namespace} configuration`, 'ERR_PROLOAD_NOT_FOUND');
+    }
+    else if (!filePath) {
+        return;
+    }
+    let rawValue = await requireOrImportWithMiddleware(filePath);
+    if (filePath.endsWith('package.json'))
+        rawValue = rawValue[namespace];
+    // Important: "empty" config files will be returned as `Module {}`
+    // We should handle them here
+    if (rawValue && !(rawValue instanceof Object)) {
+        if (mustExist) {
+            assert(true, `Resolved a ${namespace} configuration, but no configuration was exported`, "ERR_PROLOAD_NOT_FOUND");
+        }
+        else {
+            return;
+        }
+    }
+    const resolvedValue = await resolveExtensions(namespace, {
+        filePath,
+        value: rawValue,
+        context,
+    });
+    return {
+        filePath,
+        raw: rawValue,
+        value: resolvedValue,
+    };
+}
+const defaultPlugins = [
+    {
+        name: "@proload/extract-default",
+        transform(mdl) {
+            if (mdl.default && Object.keys(mdl).length === 1) {
+                return mdl.default;
+            }
+            ;
+            return mdl;
+        },
+    },
+];
+/** @type import('../index').Plugin[] */
+load.plugins = defaultPlugins;
+load.use = (plugins) => {
+    load.plugins = [...load.plugins, ...plugins];
+};
+export default load;
+export { resolveConfig as resolve };

package/dist/proload/esm/requireOrImport.d.mts

@@ -0,0 +1,7 @@
+/**
+ *
+ * @param {string} filePath
+ */
+export default function requireOrImport(filePath: string, { middleware }?: {
+    middleware?: any[] | undefined;
+}): Promise<any>;

package/dist/proload/esm/requireOrImport.mjs

@@ -0,0 +1,21 @@
+"use strict";
+import { createRequire } from 'module';
+import { pathToFileURL } from 'url';
+let require = createRequire(import.meta.url);
+/**
+ *
+ * @param {string} filePath
+ */
+export default async function requireOrImport(filePath, { middleware = [] } = {}) {
+    await Promise.all(middleware.map(plugin => plugin.register(filePath)));
+    return new Promise(async (resolve, reject) => {
+        const fileUrl = pathToFileURL(filePath).toString();
+        try {
+            const mdl = await import(fileUrl);
+            return resolve(mdl);
+        }
+        catch (e) {
+            reject(e);
+        }
+    });
+}

package/dist/state.d.ts

@@ -26,6 +26,7 @@ export declare class GlobalState {
     targets: import("lightningcss").Targets;
     compressedFiles: Set<string>;
     issues: Map<string, Issue[]>;
+    installed_dependencies: Set<string>;
     summary: Summary;
     summaryByExtension: Record<string, Summary>;
     reportIssue(sourceFile: string, issue: Issue): void;

package/dist/state.js

@@ -8,6 +8,7 @@ export class GlobalState {
         this.targets = defaultTargets();
         this.compressedFiles = new Set();
         this.issues = new Map();
+        this.installed_dependencies = new Set();
         this.summary = {
             nbFiles: 0,
             nbFilesCompressed: 0,

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

@@ -0,0 +1,12 @@
+import { GlobalState } from '../state.js';
+export declare function install_dependency(state: GlobalState, html_file: string, options: {
+    source: {
+        npm_package_name: string;
+        absolute_path_to_file: string;
+        filename: string;
+    };
+    destination: {
+        folder_name: string;
+        code_loader: string;
+    };
+}, appendToBody: Record<string, string>): Promise<void>;

package/dist/utils/install-dep.js

@@ -0,0 +1,27 @@
+import * as fs from 'fs/promises';
+import * as path from 'path';
+import { createRequire } from 'node:module';
+const require = createRequire(import.meta.url);
+export async function install_dependency(state, html_file, options, appendToBody) {
+    const path_html = path.dirname('/' + html_file);
+    const folder = `/_jampack/${options.destination.folder_name}`;
+    const src_filename = options.source.filename;
+    const url_loader = `${folder}/loader.js`;
+    // Install dependency in /_jampack if not done yet
+    if (!state.installed_dependencies.has(options.source.npm_package_name)) {
+        const quickLinkDestination = path.join(state.dir, folder, src_filename);
+        const path_loader = path.join(state.dir, url_loader);
+        await fs.mkdir(path.join(state.dir, folder), { recursive: true });
+        // Write loader
+        const code_loader = options.destination.code_loader;
+        await fs.writeFile(path_loader, code_loader);
+        // Write quicklink code
+        const source = require.resolve(`${options.source.npm_package_name}${options.source.absolute_path_to_file}/${src_filename}`);
+        await fs.copyFile(source, quickLinkDestination);
+        state.installed_dependencies.add(options.source.npm_package_name);
+    }
+    // Add custom code to the end of body if not done yet
+    if (!(options.source.npm_package_name in appendToBody)) {
+        appendToBody[options.source.npm_package_name] = `<script type="module" src="${path.relative(path_html, url_loader)}"></script>`;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@divriots/jampack",
-  "version": "0.30.3",
+  "version": "0.31.0",
   "cache-version": {
     "img": "v1",
     "img-ext": "v1"
@@ -28,7 +28,6 @@
   "dependencies": {
     "@commander-js/extra-typings": "^12.0.0",
     "@divriots/cheerio": "1.0.0-rc.12",
-    "@proload/core": "^0.3.3",
     "@swc/core": "^1.4.16",
     "add": "^2.0.6",
     "browserslist": "^4.23.0",
@@ -42,6 +41,7 @@
     "html-minifier-terser": "^7.2.0",
     "kleur": "^4.1.5",
     "lightningcss": "^1.25.1",
+    "lozad": "^1.16.0",
     "mini-svg-data-uri": "^1.4.4",
     "ora": "^8.0.1",
     "quicklink": "^2.3.0",