@divriots/jampack 0.15.0 → 0.20.0

package/README.md

@@ -116,7 +116,7 @@ In a 2nd PASS, `jampack` compresses all untouched assets and keep the same name
 | --------------- | --------------------- | 
 | `.html`,`.htm`  | [`html-minifier-terser`](https://github.com/terser/html-minifier-terser) |   
 | `.css`          | [`lightningCSS`](https://lightningcss.dev)  |
-| `.js`           | [`swc`](https://swc.rs/)                   |   
+| `.js`           | [`esbuild`](https://esbuild.github.io/) or [`swc`](https://swc.rs/)                   |   
 | `.svg`          | [`svgo`](https://github.com/svg/svgo)                  |  
 | `.jpg`,`.jpeg`  | [`sharp`](https://sharp.pixelplumbing.com/)                 |  
 | `.png`          | [`sharp`](https://sharp.pixelplumbing.com/)                |    

package/dist/compressors/js.js

@@ -1,8 +1,20 @@
 import swc from '@swc/core';
+import * as esbuild from 'esbuild';
+import config from '../config.js';
 export async function compressJS(originalCode) {
-    const newjsresult = await swc.minify(originalCode, {
-        compress: true,
-        mangle: true,
-    });
-    return newjsresult.code;
+    let resultCode = originalCode;
+    switch (config.js.compressor) {
+        case 'esbuild':
+            resultCode = (await esbuild.transform(originalCode, {
+                minify: true,
+            })).code;
+            break;
+        case 'swc':
+            resultCode = (await swc.minify(originalCode, {
+                compress: true,
+                mangle: true,
+            })).code;
+            break;
+    }
+    return resultCode;
 }

package/dist/config-default.js

@@ -2,9 +2,15 @@ const default_options = {
     html: {
         add_css_reset_as: 'inline',
     },
+    css: {
+        inline_critical_css: false, // Doesn't work yet
+    },
+    js: {
+        compressor: 'esbuild',
+    },
     image: {
         embed_size: 1500,
-        srcset_min_width: 640,
+        srcset_min_width: 390 * 2,
         srcset_max_width: 1920 * 2,
         max_width: 99999,
         external: {
@@ -40,5 +46,8 @@ const default_options = {
             optimization: true,
         },
     },
+    misc: {
+        prefetch_links: 'off',
+    },
 };
 export default default_options;

package/dist/config-fast.js

@@ -1,7 +1,7 @@
 const fast_options_override = {
     image: {
         embed_size: 0,
-        srcset_min_width: 16000,
+        srcset_min_width: 99999,
         compress: false,
         jpeg: {
             options: {
@@ -25,5 +25,8 @@ const fast_options_override = {
             optimization: false,
         },
     },
+    misc: {
+        prefetch_links: 'none',
+    },
 };
 export default fast_options_override;

package/dist/config-types.d.ts

@@ -7,6 +7,12 @@ export type Options = {
     html: {
         add_css_reset_as: 'inline' | 'off';
     };
+    js: {
+        compressor: 'esbuild' | 'swc';
+    };
+    css: {
+        inline_critical_css: boolean;
+    };
     image: {
         embed_size: number;
         srcset_min_width: number;
@@ -37,4 +43,7 @@ export type Options = {
             optimization: boolean;
         };
     };
+    misc: {
+        prefetch_links: 'in-viewport' | 'off';
+    };
 };

package/dist/optimize.js

@@ -11,6 +11,8 @@ import kleur from 'kleur';
 import ora from 'ora';
 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';
 async function analyse(file) {
     var _a;
     console.log('▶ ' + file);
@@ -76,22 +78,58 @@ async function analyse(file) {
     spinnerIframe.text = kleur.dim(`<iframe> [${imgsArray.length}/${imgsArray.length}]`);
     spinnerIframe.succeed();
     // Remove the fold
+    //
     if (theFold) {
         $('the-fold').remove();
     }
-    // Add CSS to head
+    // Add to <head>
+    //
+    let prependToHead = '';
+    let appendToHead = '';
     if (config.html.add_css_reset_as === 'inline') {
-        const CSS = `<style>:where(img){height:auto;}</style>`;
-        const heads = $('head');
-        if (heads.length > 0) {
-            heads.prepend(CSS);
+        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>`);
         }
-        else {
-            (_a = $('html')) === null || _a === void 0 ? void 0 : _a.prepend(`<head>${CSS}</head>`);
+        heads = $('head');
+        // head tag exist
+        if (prependToHead)
+            heads.prepend(prependToHead);
+        if (appendToHead)
+            heads.append(appendToHead);
+    }
+    // Add to <body>
+    //
+    let appendToBody = '';
+    if (config.misc.prefetch_links === 'in-viewport') {
+        appendToBody += await prefetch_links_in_viewport(file);
+    }
+    if (appendToBody) {
+        const body = $('body');
+        if (body.length > 0) {
+            body.append(appendToBody);
+        }
+    }
+    // Render HTML
+    //
+    let htmlResult = $.html();
+    // Inline critical css
+    //
+    if (config.css.inline_critical_css) {
+        try {
+            const location = path.resolve(path.dirname(path.join($state.dir, file)));
+            htmlResult = await inlineCriticalCss(location, htmlResult);
+        }
+        catch (e) {
+            console.warn('Fail to inline critical CSS', e);
         }
     }
     if (!$state.args.nowrite) {
-        await fs.writeFile(path.join($state.dir, file), $.html());
+        await fs.writeFile(path.join($state.dir, file), htmlResult);
     }
 }
 function getTheFold($) {

package/dist/optimizers/inline-critical-css.d.ts

@@ -0,0 +1 @@
+export declare function inlineCriticalCss(path: string, html: string): any;

package/dist/optimizers/inline-critical-css.js

@@ -0,0 +1,11 @@
+// @ts-ignore
+import Critters from 'critters';
+export function inlineCriticalCss(path, html) {
+    const critters = new Critters({
+        compress: false,
+        fonts: false,
+        logLevel: 'info',
+        path,
+    });
+    return critters.process(html);
+}

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

@@ -0,0 +1 @@
+export declare function prefetch_links_in_viewport(html_file: string): Promise<string>;

package/dist/optimizers/prefetch-links.js

@@ -0,0 +1,26 @@
+import $state from '../state.js';
+import * as fs from 'fs/promises';
+import * as path from 'path';
+import * as url from 'url';
+const src_filename = 'quicklink.mjs';
+const folder = `/_jampack/quicklink-2.3.0`;
+const url_loader = `${folder}/loader.js`;
+const url_quicklink = `${folder}/${src_filename}`;
+let payloadStored = false;
+export async function prefetch_links_in_viewport(html_file) {
+    const path_html = path.dirname('/' + html_file);
+    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 "./quicklink.mjs";
+    listen();`;
+        await fs.writeFile(path_loader, code_loader);
+        // Write quicklink code
+        const source = path.join(path.dirname(url.fileURLToPath(import.meta.url)), `../../node_modules/quicklink/dist/${src_filename}`);
+        await fs.copyFile(source, path.join($state.dir, folder, src_filename));
+        // We don't need to store them anymore
+        payloadStored = true;
+    }
+    return `<script type="module" src="${path.relative(path_html, url_loader)}"></script>`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@divriots/jampack",
-  "version": "0.15.0",
+  "version": "0.20.0",
   "cache-version": {
     "img": "v1",
     "img-ext": "v1"
@@ -22,9 +22,12 @@
   "dependencies": {
     "@divriots/cheerio": "1.0.0-rc.12",
     "@proload/core": "^0.3.3",
-    "@swc/core": "^1.3.80",
+    "@swc/core": "^1.3.82",
+    "add": "^2.0.6",
     "commander": "^10.0.1",
+    "critters": "^0.0.20",
     "deepmerge": "^4.3.1",
+    "esbuild": "^0.19.2",
     "file-type": "^18.5.0",
     "globby": "^13.2.2",
     "hasha": "^5.2.2",
@@ -33,6 +36,7 @@
     "lightningcss": "^1.21.5",
     "mini-svg-data-uri": "^1.4.4",
     "ora": "^7.0.1",
+    "quicklink": "^2.3.0",
     "sharp": "^0.32.5",
     "svgo": "^3.0.2",
     "table": "^6.8.1",
@@ -48,7 +52,7 @@
   },
   "scripts": {
     "watch": "pnpm build --watch",
-    "try": "shx rm -fr demo && cp -R demo_rf demo && node ./dist/index.js ./demo --nocache --onlyoptim",
+    "try": "shx rm -fr demo && cp -R demo_ref demo && node ./dist/index.js ./demo --nocache",
     "build": "shx rm -rf dist && tsc -b",
     "lint": "eslint . --ext .ts --config .eslintrc",
     "prepublishOnly": "pnpm build",