@divriots/jampack 0.31.1 → 0.33.0

package/dist/cache.js

@@ -1,13 +1,15 @@
 import { hashSync as hasha } from 'hasha';
 import path from 'path';
-import * as fs from 'fs/promises';
+import * as fsp from 'fs/promises';
 import { CACHE_VERSIONS } from './packagejson.js';
 const listOfCategories = ['img', 'img-ext'];
 function getCacheFolder(state) {
     return state.args.cache_folder || '.jampack/cache';
 }
 async function cleanCache(state, full) {
+    var _a;
     const CACHE_FOLDER = getCacheFolder(state);
+    const fs = (_a = state.vfs) !== null && _a !== void 0 ? _a : fsp;
     if (full) {
         try {
             await fs.rm(CACHE_FOLDER, { recursive: true });
@@ -66,9 +68,11 @@ function getLocation(state, hash, category) {
     return path.join(CACHE_FOLDER, category, getVersionOfCategory(category), hash);
 }
 async function getFromCache(state, category, hash) {
+    var _a;
     if (state.args.nocache) {
         return undefined;
     }
+    const fs = (_a = state.vfs) !== null && _a !== void 0 ? _a : fsp;
     const location = getLocation(state, hash, category);
     try {
         const buffer = await fs.readFile(path.join(location, 'data'));
@@ -81,9 +85,11 @@ async function getFromCache(state, category, hash) {
     return undefined;
 }
 async function addToCache(state, category, hash, data) {
+    var _a;
     if (state.args.nocache) {
         return;
     }
+    const fs = (_a = state.vfs) !== null && _a !== void 0 ? _a : fsp;
     const location = getLocation(state, hash, category);
     await fs.mkdir(location, { recursive: true });
     await fs.writeFile(path.join(location, 'data'), data.buffer);

package/dist/compress.js

@@ -1,4 +1,4 @@
-import * as fs from 'fs/promises';
+import * as fsp from 'fs/promises';
 import * as path from 'path';
 import { formatBytes } from './utils.js';
 import { globby } from 'globby';
@@ -8,7 +8,9 @@ import { compressJS } from './compressors/js.js';
 import { compressHTML } from './compressors/html.js';
 import { compressImage } from './compressors/images.js';
 const processFile = async (state, file, stats) => {
+    var _a;
     let writeData = undefined;
+    const fs = (_a = state.vfs) !== null && _a !== void 0 ? _a : fsp;
     try {
         const ext = path.extname(file);
         switch (ext) {
@@ -69,6 +71,8 @@ const processFile = async (state, file, stats) => {
     state.reportSummary(result);
 };
 export async function compressFolder(state, exclude) {
+    var _a;
+    const fs = (_a = state.vfs) !== null && _a !== void 0 ? _a : fsp;
     const spinner = ora(getProgressText(state)).start();
     const globs = ['**/**', '!_jampack/**']; // Exclude jampack folder because already compressed
     if (exclude)

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

@@ -1,6 +1,6 @@
 import { globby } from 'globby';
 import * as path from 'path';
-import * as fs from 'fs/promises';
+import * as fsp from 'fs/promises';
 import { getCanonicalCdnForUrl, getTransformer } from 'unpic';
 import * as cheerio from '@divriots/cheerio';
 import { isNumeric } from './utils.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) {
@@ -25,76 +26,20 @@ function getIntAttr(img, attr) {
     return parsed;
 }
 async function analyse(state, file) {
+    var _a;
     console.log('▶ ' + file);
     // For processes to add into
     const appendToBody = {};
+    const fs = (_a = state.vfs) !== null && _a !== void 0 ? _a : fsp;
     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');
-    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);
+    await processTag(state, file, $, 'meta[property$=":image"], meta[name$=":image"]', 'content', processMetaImage, theFold, appendToBody);
     // Remove the fold
     //
     if (theFold) {
@@ -206,7 +151,7 @@ function getTheFold($) {
     return 0;
 }
 async function processImage(state, htmlfile, img, isAboveTheFold) {
-    var _a, _b;
+    var _a, _b, _c;
     /*
      * Attribute 'src'
      */
@@ -284,28 +229,21 @@ async function processImage(state, htmlfile, img, isAboveTheFold) {
     /*
      * Check for external images
      */
-    if (!isLocal(attrib_src) &&
-        isIncluded(attrib_src, config.image.external.src_include, config.image.external.src_exclude)) {
-        // Don't process external images
-        if (config.image.external.process === 'off')
+    const { external } = state.options.image;
+    if (isExternalImage(attrib_src, external)) {
+        if (external.process === 'off')
+            // Don't process external images
             return;
         try {
-            if (config.image.external.process === 'download') {
-                // Download external image for local processing
-                attrib_src = await downloadExternalImage(state, htmlfile, attrib_src);
-            }
-            else if (typeof config.image.external.process === 'function') {
-                // Custom processing for external image
-                attrib_src = await config.image.external.process(attrib_src);
-            }
-            img.attr('src', attrib_src);
+            const external_src = await externalImage(attrib_src, state, htmlfile);
+            if (external_src)
+                img.attr('src', (attrib_src = external_src));
         }
         catch (e) {
-            state.reportIssue(htmlfile, {
+            return state.reportIssue(htmlfile, {
                 type: 'warn',
                 msg: `Failed to process external image: ${attrib_src} - ${e.message}`,
-            });
-            return; // No more processing
+            }); // No more processing
         }
     }
     switch (config.image.cdn.process) {
@@ -357,7 +295,7 @@ async function processImage(state, htmlfile, img, isAboveTheFold) {
     /*
      * Loading image
      */
-    const originalImage = await Resource.loadResource(state.dir, htmlfile, attrib_src);
+    const originalImage = await Resource.loadResource(state, htmlfile, attrib_src);
     // No file -> give up
     if (!originalImage) {
         state.reportIssue(htmlfile, {
@@ -394,7 +332,7 @@ async function processImage(state, htmlfile, img, isAboveTheFold) {
         const newSrc = path.join(path.dirname(attrib_src), path.basename(attrib_src, path.extname(attrib_src)) +
             `.${newImage.format}`);
         if (!state.compressedFiles.has(newFilename) && !state.args.nowrite) {
-            fs.writeFile(newFilename, newImage.data);
+            await ((_b = state.vfs) !== null && _b !== void 0 ? _b : fsp).writeFile(newFilename, newImage.data);
         }
         // Mark new file as compressed
         state.compressedFiles.add(newFilename);
@@ -535,7 +473,7 @@ async function processImage(state, htmlfile, img, isAboveTheFold) {
                 // https://twitter.com/jonsneyers/status/1346389917816008704?s=19
                 const isLossless = mime === 'image/png' ||
                     (mime === 'image/webp' &&
-                        ((_b = (await originalImage.getImageMeta())) === null || _b === void 0 ? void 0 : _b.isLossless));
+                        ((_c = (await originalImage.getImageMeta())) === null || _c === void 0 ? void 0 : _c.isLossless));
                 if (!isLossless) {
                     sourcesToGenerate.push({
                         mime: 'image/avif',
@@ -566,6 +504,103 @@ async function processImage(state, htmlfile, img, isAboveTheFold) {
         }
     }
 }
+async function processMetaImage(state, htmlfile, meta) {
+    var _a, _b, _c;
+    const attribute = 'content';
+    let content = meta.attr(attribute);
+    if (!content)
+        return state.reportIssue(htmlfile, {
+            type: 'warn',
+            msg: `Missing [content] on meta - processing skipped.`,
+        });
+    // Setup to ignore
+    const { src_exclude, src_include, cdn, external } = state.options.image;
+    if (!isIncluded(content, src_include, src_exclude))
+        return;
+    /*
+     * Check for external images
+     */
+    if (isExternalImage(content, external)) {
+        if (external.process === 'off')
+            // Don't process external images
+            return;
+        try {
+            const external_content = await externalImage(content, state, htmlfile);
+            if (external_content)
+                meta.attr(attribute, (content = external_content));
+        }
+        catch (e) {
+            return state.reportIssue(htmlfile, {
+                type: 'warn',
+                msg: `Failed to process external image: ${attribute} - ${e.message}`,
+            }); // No more processing
+        }
+    }
+    const propName = meta.attr('property') ? 'property' : 'name';
+    const width = meta.closest(`meta[${propName}:width]`).attr(attribute);
+    switch (cdn.process) {
+        case 'off':
+            break;
+        case 'optimize':
+            let cdnTransformer = cdn.transformer;
+            if (cdnTransformer && !cdn.src_include) {
+                throw new Error('config.image.cdn.src_include is required when specifying a config.image.cdn.transformer');
+            }
+            if (!cdnTransformer) {
+                const canonical = getCanonicalCdnForUrl(content);
+                if (!canonical)
+                    break;
+                cdnTransformer = getTransformer(canonical.cdn);
+            }
+            if (!cdnTransformer)
+                break;
+            if (!isIncluded(content, cdn.src_include || /.*/, cdn.src_exclude))
+                break;
+            if (!width)
+                return state.reportIssue(htmlfile, {
+                    type: 'warn',
+                    msg: `Missing or malformed'width' attribute for image ${content}, unable to perform CDN transform`,
+                });
+            meta.attr(attribute, (_b = (_a = cdnTransformer({ url: content, width: +width })) === null || _a === void 0 ? void 0 : _a.toString()) === null || _b === void 0 ? void 0 : _b.replace(UNPIC_DEFAULT_HOST_REGEX, '/'));
+            return;
+    }
+    /*
+     * Loading image
+     */
+    const originalImage = await Resource.loadResource(state, htmlfile, content);
+    if (!originalImage)
+        return state.reportIssue(htmlfile, {
+            type: 'erro',
+            msg: `Can't find img on disk ${attribute}="${content}"`,
+        });
+    /*
+     * Compress image
+     */
+    const newImage = await compressImage(state, await originalImage.getData(), {
+        resize: width ? { width: +width } : undefined,
+        toFormat: meta.closest(`meta[${propName}:type]`).attr(attribute) === 'image/png'
+            ? 'png'
+            : 'jpeg',
+    });
+    if ((newImage === null || newImage === void 0 ? void 0 : newImage.data) && newImage.data.length < (await originalImage.getLen())) {
+        meta.attr(attribute, path.join(path.dirname(content), path.basename(content, path.extname(content)) + `.${newImage.format}`));
+        const newFilename = path.join(path.dirname(originalImage.filePathAbsolute), path.basename(originalImage.filePathAbsolute, path.extname(originalImage.filePathAbsolute)) + `.${newImage.format}`);
+        if (!state.compressedFiles.has(newFilename)) {
+            if (!state.args.nowrite)
+                await ((_c = state.vfs) !== null && _c !== void 0 ? _c : fsp).writeFile(newFilename, newImage.data);
+            // Mark new file as compressed
+            state.compressedFiles.add(newFilename);
+            // Report compression result
+            state.reportSummary({
+                action: newFilename !== originalImage.filePathAbsolute
+                    ? `${await originalImage.getExt()}->${newImage.format}`
+                    : path.extname(originalImage.filePathAbsolute),
+                originalSize: await originalImage.getLen(),
+                compressedSize: newImage.data.length,
+            });
+        }
+    }
+}
 const isIncluded = (src, includeConf, excludeConf) => !!src.match(includeConf) && (!excludeConf || !src.match(excludeConf));
 async function _generateSrcSet({ options }, startSrc, imageWidth, imageHeight, transformSrc) {
     // Start from original image
@@ -607,6 +642,7 @@ async function generateSrcSet(state, htmlfile, originalImage, startSrc, startSrc
     const imageHeight = (meta === null || meta === void 0 ? void 0 : meta.height) || 0;
     let previousImageSize = startSrcLength || Number.MAX_VALUE;
     return _generateSrcSet(state, startSrc, imageWidth, imageHeight, async (valueW) => {
+        var _a;
         const src = imageSrc(`@${valueW}w`);
         const absoluteFilename = translateSrc(state.dir, path.dirname(htmlfile), src);
         // Don't generate srcset file twice
@@ -621,7 +657,7 @@ async function generateSrcSet(state, htmlfile, originalImage, startSrc, startSrc
             else {
                 // Write file
                 if (!state.args.nowrite) {
-                    fs.writeFile(absoluteFilename, compressedImage.data);
+                    await ((_a = state.vfs) !== null && _a !== void 0 ? _a : fsp).writeFile(absoluteFilename, compressedImage.data);
                 }
                 // Set new previous size to beat
                 previousImageSize = compressedImage.data.length;
@@ -765,6 +801,7 @@ async function setImageSize(state, htmlfile, img, image) {
     throw new Error(`Unexpected issue when resolving image size "${image.src}"`);
 }
 export async function optimize(state, include, exclude) {
+    var _a;
     const glob = include ? [include] : ['**/*.{htm,html}'];
     if (exclude)
         glob.push('!' + exclude);
@@ -772,5 +809,55 @@ export async function optimize(state, include, exclude) {
     // Sequential async
     for (const file of paths) {
         await analyse(state, file);
+        (_a = state.onAnalysedFile) === null || _a === void 0 ? void 0 : _a.call(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();
+    }
+}
+const isExternalImage = (content, external) => !isLocal(content) &&
+    isIncluded(content, external.src_include, external.src_exclude);
+async function externalImage(content, state, htmlfile) {
+    const { process } = state.options.image.external;
+    if (process === 'download')
+        // Download external image for local processing
+        return await downloadExternalImage(state, htmlfile, content);
+    if (typeof process === 'function')
+        // Custom processing for external image
+        return await process(content);
+}

package/dist/optimizers/img-external.js

@@ -1,12 +1,12 @@
 import * as path from 'path';
-import * as fs from 'fs/promises';
+import * as fsp from 'fs/promises';
 import { hashSync as hasha } from 'hasha';
 import { fileTypeFromBuffer } from 'file-type';
 import { addToCache, getFromCache } from '../cache.js';
 import { parse } from '../utils/cache-control-parser.js';
 import '../utils/polyfill-fetch.js';
 export async function downloadExternalImage(state, htmlfile, href) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const hash = hasha(href, {
         algorithm: 'md5',
     });
@@ -97,6 +97,6 @@ export async function downloadExternalImage(state, htmlfile, href) {
         throw new Error('Unknown image format');
     const htmlFolder = path.dirname(htmlfile);
     const filename = path.relative(path.join(state.dir, htmlFolder), path.join(state.dir, `_jampack/${contentHash}.${ext}`));
-    await fs.writeFile(path.join(state.dir, htmlFolder, filename), buffer);
+    await ((_f = state.vfs) !== null && _f !== void 0 ? _f : fsp).writeFile(path.join(state.dir, htmlFolder, filename), buffer);
     return filename;
 }

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/state.d.ts

@@ -29,6 +29,8 @@ export declare class GlobalState {
     installed_dependencies: Set<string>;
     summary: Summary;
     summaryByExtension: Record<string, Summary>;
+    vfs?: typeof import('fs/promises');
+    onAnalysedFile?: (file: string) => void;
     reportIssue(sourceFile: string, issue: Issue): void;
     reportSummary(r: ReportItem): void;
 }

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

@@ -1,12 +1,14 @@
-import * as fs from 'fs/promises';
+import * as fsp 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) {
+    var _a;
     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`;
+    const fs = (_a = state.vfs) !== null && _a !== void 0 ? _a : fsp;
     // 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);
@@ -17,7 +19,12 @@ export async function install_dependency(state, html_file, options, appendToBody
         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);
+        if (state.vfs) {
+            await state.vfs.writeFile(quickLinkDestination, await fsp.readFile(source));
+        }
+        else {
+            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
@@ -25,3 +32,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/dist/utils/resource.d.ts

@@ -1,5 +1,6 @@
 import { FileExtension, MimeType } from 'file-type';
 import { ImageFormat } from '../compressors/images.js';
+import { GlobalState } from '../state.js';
 type ImageMeta = {
     width: number | undefined;
     height: number | undefined;
@@ -11,13 +12,14 @@ type ImageMeta = {
  * File extension, mime and data are loaded only on demand, then cached.
  */
 export declare class Resource {
+    private state;
     readonly src: string;
     readonly filePathAbsolute: string;
     private ext;
     private mime;
     private data;
     private image_meta;
-    constructor(src: string, filePathAbsolute: string);
+    constructor(state: GlobalState, src: string, filePathAbsolute: string);
     getData(): Promise<Buffer>;
     getImageMeta(): Promise<ImageMeta | null | undefined>;
     getLen(): Promise<number>;
@@ -25,9 +27,8 @@ export declare class Resource {
     getImageFormat(): Promise<ImageFormat | undefined>;
     getMime(): Promise<MimeType | 'image/svg+xml'>;
     private loadFileType;
-    static loadResource(projectRoot: string, relativeFile: string, src: string): Promise<Resource | undefined>;
+    static loadResource(state: GlobalState, relativeFile: string, src: string): Promise<Resource | undefined>;
 }
 export declare function isLocal(src: string): boolean;
-export declare function fileExists(path: string): Promise<boolean>;
 export declare function translateSrc(projectRoot: string, htmlRelativePath: string, src: string): string;
 export {};

package/dist/utils/resource.js

@@ -1,6 +1,6 @@
 import * as url from 'url';
 import * as path from 'path';
-import * as fs from 'fs/promises';
+import * as fsp from 'fs/promises';
 import { fileTypeFromBuffer } from 'file-type';
 import sharp from 'sharp';
 import { AllImageFormat } from '../compressors/images.js';
@@ -8,13 +8,15 @@ import { AllImageFormat } from '../compressors/images.js';
  * File extension, mime and data are loaded only on demand, then cached.
  */
 export class Resource {
-    constructor(src, filePathAbsolute) {
+    constructor(state, src, filePathAbsolute) {
+        this.state = state;
         this.src = src;
         this.filePathAbsolute = filePathAbsolute;
     }
     async getData() {
+        var _a;
         if (this.data === undefined) {
-            this.data = await fs.readFile(this.filePathAbsolute);
+            this.data = await ((_a = this.state.vfs) !== null && _a !== void 0 ? _a : fsp).readFile(this.filePathAbsolute);
         }
         return this.data;
     }
@@ -98,7 +100,7 @@ export class Resource {
             throw new Error(`Unknown file type "${this.src}"`);
         }
     }
-    static async loadResource(projectRoot, relativeFile, src) {
+    static async loadResource(state, relativeFile, src) {
         if (!isLocal(src)) {
             throw new Error('src should be local');
         }
@@ -106,10 +108,10 @@ export class Resource {
         if (!u.pathname) {
             throw new Error(`Invalid src format "${src}"`);
         }
-        const relativePath = path.join(projectRoot, src.startsWith('/') ? '' : path.dirname(relativeFile), u.pathname);
+        const relativePath = path.join(state.dir, src.startsWith('/') ? '' : path.dirname(relativeFile), u.pathname);
         let absolutePath = path.resolve(relativePath);
-        if (await fileExists(absolutePath)) {
-            return new Resource(src, absolutePath);
+        if (await fileExists(state, absolutePath)) {
+            return new Resource(state, src, absolutePath);
         }
         return undefined;
     }
@@ -118,9 +120,10 @@ export function isLocal(src) {
     const u = url.parse(src);
     return !u.host;
 }
-export async function fileExists(path) {
+async function fileExists(state, path) {
+    var _a;
     try {
-        await fs.stat(path);
+        await ((_a = state.vfs) !== null && _a !== void 0 ? _a : fsp).stat(path);
     }
     catch (e) {
         return false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@divriots/jampack",
-  "version": "0.31.1",
+  "version": "0.33.0",
   "cache-version": {
     "img": "v1",
     "img-ext": "v1"
@@ -60,18 +60,17 @@
     "tslib": "^2.6.2",
     "typescript": "^5.4.5"
   },
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "bugs": "https://github.com/divriots/jampack/issues",
+  "keywords": [],
+  "types": "dist/index.d.ts",
   "scripts": {
     "watch": "pnpm build --watch",
     "try": "shx rm -fr demo && cp -R demo_drc demo && node ./dist/index.js ./demo --nocache",
     "build": "shx rm -rf dist && tsc -b",
     "lint": "eslint . --ext .ts --config .eslintrc",
-    "prepublishOnly": "pnpm build",
     "cleanAllDotJampack": "find -s . | grep '.jampack$' | xargs rm -fr"
-  },
-  "engines": {
-    "node": ">=14.0.0"
-  },
-  "bugs": "https://github.com/divriots/jampack/issues",
-  "keywords": [],
-  "types": "dist/index.d.ts"
-}
+  }
+}