npm - html-bundle - Versions diffs - 5.5.0 → 6.0.1-beta - Mend

html-bundle 5.5.0 → 6.0.1-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/utils.mjs ADDED Viewed

@@ -0,0 +1,166 @@
+import { copyFile, mkdir, readFile } from "fs/promises";
+import path from "path";
+import Fastify from "fastify";
+import fastifyStatic from "fastify-static";
+import postcssrc from "postcss-load-config";
+import cssnano from "cssnano";
+import { parse, parseFragment, serialize } from "parse5";
+import { createScript, getTagName, findElement, appendChild, } from "@web/parse5-utils";
+export const bundleConfig = await getBundleConfig();
+export function fileCopy(file) {
+    return copyFile(file, getBuildPath(file));
+}
+export function createDir(file) {
+    const buildPath = getBuildPath(file);
+    const dir = buildPath.split("/").slice(0, -1).join("/");
+    return mkdir(dir, { recursive: true });
+}
+export function getBuildPath(file) {
+    return file.replace(`${bundleConfig.src}/`, `${bundleConfig.build}/`);
+}
+const CONNECTIONS = []; // In order to send the HMR information
+export let serverSentEvents;
+export async function createDefaultServer(isSecure) {
+    const fastify = Fastify(isSecure
+        ? {
+            http2: true,
+            https: {
+                key: await readFile(path.join(process.cwd(), "localhost-key.pem")),
+                cert: await readFile(path.join(process.cwd(), "localhost.pem")),
+            },
+        }
+        : void 0);
+    fastify.setNotFoundHandler(async (_req, reply) => {
+        const file = await readFile(path.join(process.cwd(), bundleConfig.build, "/index.html"), {
+            encoding: "utf-8",
+        });
+        reply.header("Content-Type", "text/html; charset=UTF-8");
+        return reply.send(addHMRCode(file, `${bundleConfig.src}/index.html`));
+    });
+    fastify.register(fastifyStatic, {
+        root: path.join(process.cwd(), bundleConfig.build),
+    });
+    fastify.get("/events", (_req, reply) => {
+        reply.raw.setHeader("Content-Type", "text/event-stream");
+        reply.raw.setHeader("Cache-Control", "no-cache");
+        !isSecure && reply.raw.setHeader("Connection", "keep-alive");
+        CONNECTIONS.push(reply.raw);
+        serverSentEvents = (data) => CONNECTIONS.forEach((rep) => {
+            rep.write(`data: ${JSON.stringify(data)}\n\n`);
+        });
+    });
+    return fastify;
+}
+export function getPostCSSConfig() {
+    try {
+        return postcssrc({});
+    }
+    catch {
+        return { plugins: [cssnano], options: {}, file: "" };
+    }
+}
+async function getBundleConfig() {
+    const base = {
+        build: "build",
+        src: "src",
+        port: 5000,
+        esbuild: {},
+        "html-minifier-terser": {},
+        critical: {},
+    };
+    try {
+        const cfgPath = path.resolve(process.cwd(), "bundle.config.js");
+        const config = await import(`file://${cfgPath}`);
+        return { ...base, ...config.default };
+    }
+    catch {
+        return base;
+    }
+}
+const htmlIdMap = new Map();
+export function addHMRCode(html, file, ast) {
+    if (!htmlIdMap.has(file)) {
+        htmlIdMap.set(file, randomText());
+    }
+    const script = createScript({ type: "module" }, getHMRCode(file, htmlIdMap.get(file), bundleConfig.src));
+    let DOM;
+    if (html.includes("<!DOCTYPE html>") || html.includes("<html")) {
+        DOM = ast || parse(html);
+        const headNode = findElement(DOM, (e) => getTagName(e) === "head");
+        appendChild(headNode, script);
+    }
+    else {
+        DOM = ast || parseFragment(html);
+        appendChild(DOM, script);
+    }
+    //@ts-ignore
+    DOM.childNodes.forEach((node) => node.attrs?.push({ name: "data-hmr", value: htmlIdMap.get(file) }));
+    return serialize(DOM);
+}
+function randomText() {
+    return Math.random().toString(32).slice(2);
+}
+function getHMRCode(file, id, src) {
+    return `import { render, html, $, $$, setInsertDiffing } from "hydro-js";
+  if (!window.eventsource${id}) {
+    setInsertDiffing(true);
+    window.eventsource${id} = new EventSource("/events");
+    window.eventsource${id}.addEventListener("message", ({ data }) => {
+      const dataObj = JSON.parse(data);
+      const file = "${file}";
+      if (file === dataObj.file && "html" in dataObj) {
+        if (dataObj.html.startsWith('<!DOCTYPE html>') || dataObj.html.startsWith('<html')) {
+          document.head.remove(); // Don't try to diff the head – just re-run the scripts
+          render(html\`\${dataObj.html}\`, document.documentElement);
+        } else {
+          const hmrID = "${id}";
+          const newHTML = html\`\${dataObj.html}\`;
+          const hmrElems = Array.from(newHTML.childNodes);
+          const hmrWheres = Array.from($$(\`[data-hmr="\${hmrID}"]\`))
+          // render new elements for old elements. Then, remove rest old elements and add add new elements after the last old one
+          hmrWheres.forEach((where, index) => {
+            if (index < hmrElems.length) {
+              render(hmrElems[index], where, false);
+            } else {
+              where.remove();
+            }
+          });
+          for (let rest = hmrWheres.length; rest < hmrElems.length; rest++) {
+            if (hmrWheres.length) {
+              const template = document.createElement('template');
+              hmrElems[hmrWheres.length - 1].after(template);
+              render(hmrElems[rest], template, false);
+              template.remove();
+            } else {
+              render(hmrElems[rest], false, false)
+            }
+          }
+        }
+        setTimeout(() => dispatchEvent(new Event("popstate")));
+      } else if (dataObj.file.endsWith("css")) {
+        updateElem("link");
+      } else if (dataObj.file.endsWith("js")) {
+        updateElem("script")
+      }
+      function updateElem(type) {
+        const hmrId = "${id}";
+        const noSrcFile = dataObj.file.replace(\`${src}/\`, '');
+        const attr = type === "script" ? "src" : "href";
+        const elem = $(\`[data-hmr="\${hmrId}"] \${type}[\${attr}^="\${noSrcFile}"]\`); // could be $(\`\${type}[data-hmr="\${hmrId}"][\${attr}^="\${noSrcFile}"]\`) ?
+        if (elem) {
+          const clone = document.createElement(type);
+          for (const key of elem.getAttributeNames()) {
+            clone.setAttribute(key, elem.getAttribute(key));
+          }
+          clone.setAttribute(attr, elem.getAttribute(attr) + "?v=" + String(Math.random().toFixed(4)).slice(2));
+          render(clone, elem, false);
+        }
+      }
+    });
+  }
+`;
+}

package/package.json CHANGED Viewed

@@ -1,8 +1,8 @@
 {
   "name": "html-bundle",
-  "version": "5.5.0",
+  "version": "6.0.1-beta",
   "description": "A very simple bundler for HTML SFC",
-  "bin": "./dist/bundle.js",
+  "bin": "./dist/bundle.mjs",
   "scripts": {
     "start": "tsc",
     "update": "npx npm-check-updates -u && npx typesync && npm i && npm outdated"
@@ -32,6 +32,7 @@
   "bugs": "https://github.com/Krutsch/html-bundle/issues",
   "dependencies": {
     "@web/parse5-utils": "^1.3.0",
+    "await-spawn": "^4.0.2",
     "chokidar": "^3.5.2",
     "critical": "^4.0.1",
     "cssnano": "^5.0.14",

package/src/bundle.mts ADDED Viewed

@@ -0,0 +1,381 @@
+#!/usr/bin/env node
+import type { TextNode } from "parse5";
+import type { AcceptedPlugin } from "postcss";
+import { performance } from "perf_hooks";
+import { readFile, rm, writeFile, readdir } from "fs/promises";
+import { execFile } from "child_process";
+import { promisify } from "util";
+import glob from "glob";
+import postcss from "postcss";
+import esbuild from "esbuild";
+import critical from "critical";
+import { minify } from "html-minifier-terser";
+import { watch } from "chokidar";
+import { serialize, parse, parseFragment } from "parse5";
+import { getTagName, findElements } from "@web/parse5-utils";
+import awaitSpawn from "await-spawn";
+import {
+  fileCopy,
+  createDefaultServer,
+  getPostCSSConfig,
+  getBuildPath,
+  createDir,
+  bundleConfig,
+  serverSentEvents,
+  addHMRCode,
+} from "./utils.mjs";
+const isHMR = process.argv.includes("--hmr") || bundleConfig.hmr;
+const isCritical = process.argv.includes("--critical") || bundleConfig.critical;
+const isSecure = process.argv.includes("--secure") || bundleConfig.secure; // uses CSP for critical too
+const handlerFile = process.argv.includes("--handler")
+  ? process.argv[process.argv.indexOf("--handler") + 1]
+  : bundleConfig.handler;
+process.env.NODE_ENV = isHMR ? "development" : "production"; // just in case other tools are using it
+const timer = performance.now();
+let { plugins, options, file: postcssFile } = await getPostCSSConfig();
+let CSSprocessor = postcss(plugins as AcceptedPlugin[]);
+let fastify;
+const inlineFiles = new Set<string>();
+const TEMPLATE_LITERAL_MINIFIER = /\n\s+/g;
+const INLINE_BUNDLE_FILE = /-bundle-\d+.tsx$/;
+const SUPPORTED_FILES = /\.(html|css|m?jsx?|m?tsx?)$/;
+const execFilePromise = promisify(execFile);
+await rm(bundleConfig.build, { force: true, recursive: true });
+glob(`${bundleConfig.src}/**/*.*`, build);
+async function build(err: any, files: string[]) {
+  if (err) {
+    console.error(err);
+    process.exit(1);
+  }
+  if (isHMR) {
+    fastify = await createDefaultServer(isSecure);
+    fastify.listen(bundleConfig.port);
+    console.log(`💻 Sever listening on port ${bundleConfig.port}.`);
+  }
+  for (const file of files) {
+    await createDir(file);
+    if (!SUPPORTED_FILES.test(file)) {
+      if (handlerFile) {
+        const { stdout } = await execFilePromise("node", [handlerFile, file]);
+        console.log("📋 Logging Handler: ", String(stdout));
+      } else {
+        await fileCopy(file);
+      }
+    } else {
+      if (file.endsWith(".html")) {
+        await writeInlineScripts(file);
+      } else if (file.endsWith(".css")) {
+        await minifyCSS(file, getBuildPath(file));
+      } else {
+        inlineFiles.add(file);
+      }
+    }
+  }
+  await minifyCode();
+  for (const file of inlineFiles) {
+    if (INLINE_BUNDLE_FILE.test(file)) {
+      inlineFiles.delete(file);
+      await rm(file);
+    }
+  }
+  for (const file of files) {
+    if (file.endsWith(".html")) {
+      await minifyHTML(file, getBuildPath(file));
+    }
+  }
+  console.log(
+    `🚀 Build finished in ${(performance.now() - timer).toFixed(2)}ms ✨`
+  );
+  if (isHMR) {
+    console.log(`⌛ Waiting for file changes ...`);
+    if (postcssFile) {
+      const postCSSWatcher = watch(postcssFile);
+      const tailwindCSSWatcher = watch(
+        postcssFile.replace("postcss", "tailwind")
+      ); // Assuming that the file ext is the same
+      const cssFiles = files.filter((file) => file.endsWith(".css"));
+      postCSSWatcher.on(
+        "change",
+        async () => await rebuildCSS(cssFiles, "postcss")
+      );
+      tailwindCSSWatcher.on(
+        "change",
+        async () => await rebuildCSS(cssFiles, "tailwind")
+      );
+    }
+    const watcher = watch(bundleConfig.src);
+    let addCount = 0; // The add watcher will add all the files initially - do not rebuild them
+    watcher.on("add", async (file) => {
+      if (addCount++ <= files.length || INLINE_BUNDLE_FILE.test(file)) {
+        return;
+      }
+      file = String.raw`${file}`.replace(/\\/g, "/"); // glob and chokidar diff
+      await rebuild(file);
+      console.log(`⚡ added ${file} to the build`);
+    });
+    watcher.on("change", async (file) => {
+      if (INLINE_BUNDLE_FILE.test(file)) {
+        return;
+      }
+      file = String.raw`${file}`.replace(/\\/g, "/");
+      await rebuild(file);
+      console.log(`⚡ modified ${file} on the build`);
+    });
+    watcher.on("unlink", async (file) => {
+      if (INLINE_BUNDLE_FILE.test(file)) {
+        return;
+      }
+      file = String.raw`${file}`.replace(/\\/g, "/");
+      inlineFiles.delete(file);
+      const buildFile = getBuildPath(file)
+        .replace(".ts", ".js")
+        .replace(".jsx", ".js");
+      await rm(buildFile);
+      const bfDir = buildFile.split("/").slice(0, -1).join("/");
+      const stats = await readdir(bfDir);
+      if (!stats.length) await rm(bfDir);
+      console.log(`⚡ deleted ${file} from the build`);
+    });
+    async function rebuild(file: string) {
+      // Rebuild all CSS because a change in any file might need to trigger PostCSS zu rebuild(e.g. Tailwind CSS)
+      await rebuildCSS(files.filter((file) => file.endsWith(".css")));
+      let html;
+      if (file.endsWith(".html")) {
+        // To refill the inlineFiles needed to build JS
+        for (const htmlFile of files.filter((file) => file.endsWith("html"))) {
+          await writeInlineScripts(htmlFile);
+        }
+        await minifyCode();
+        for (const file of inlineFiles) {
+          if (INLINE_BUNDLE_FILE.test(file)) {
+            inlineFiles.delete(file);
+            await rm(file);
+          }
+        }
+        html = await minifyHTML(file, getBuildPath(file));
+      } else if (/(m?jsx?|m?tsx?)$/.test(file)) {
+        await minifyCode();
+      } else {
+        const { stdout } = await execFilePromise("node", [handlerFile, file]);
+        console.log("📋 Logging Handler: ", String(stdout));
+      }
+      serverSentEvents!({ file, html });
+    }
+  }
+}
+async function minifyCSS(file: string, buildFile: string) {
+  try {
+    const fileText = await readFile(file, { encoding: "utf-8" });
+    const result = await CSSprocessor.process(fileText, {
+      ...options,
+      from: file,
+      to: buildFile,
+    });
+    await writeFile(buildFile, result.css);
+  } catch (err) {
+    console.error(err);
+  }
+}
+async function minifyCode(): Promise<unknown> {
+  try {
+    return await esbuild.build({
+      entryPoints: Array.from(inlineFiles),
+      charset: "utf8",
+      format: "esm",
+      incremental: isHMR,
+      sourcemap: isHMR,
+      splitting: true,
+      define: {
+        "process.env.NODE_ENV": process.env.NODE_ENV,
+      },
+      loader: { ".js": "jsx", ".ts": "tsx" },
+      bundle: true,
+      minify: true,
+      outdir: bundleConfig.build,
+      outbase: bundleConfig.src,
+      ...bundleConfig.esbuild,
+    });
+    // Stop app from crashing.
+  } catch (err: any) {
+    if (!isHMR) {
+      console.error(err);
+    }
+    let missingPkg = false;
+    if (err?.errors) {
+      for (const error of err.errors) {
+        if (error.text?.startsWith("Could not resolve")) {
+          missingPkg = true;
+          const packageNameRegex = /(?<=").*(?=")/;
+          const [pkgName] = error.text.match(packageNameRegex);
+          console.log(`📦 Package ${pkgName} was installed for you`);
+          await awaitSpawn(process.platform === "win32" ? "npm.cmd" : "npm", [
+            "install",
+            pkgName,
+          ]);
+        }
+      }
+      if (missingPkg) {
+        missingPkg = false;
+        return minifyCode();
+      }
+    }
+  }
+}
+const htmlFilesCache = new Map();
+async function writeInlineScripts(file: string) {
+  let fileText = await readFile(file, { encoding: "utf-8" });
+  let DOM;
+  if (fileText.includes("<!DOCTYPE html>") || fileText.includes("<html")) {
+    DOM = parse(fileText);
+  } else {
+    DOM = parseFragment(fileText);
+  }
+  if (isHMR) {
+    fileText = addHMRCode(fileText, file, DOM);
+  }
+  htmlFilesCache.set(file, [fileText, DOM]);
+  const scripts = findElements(DOM, (e) => getTagName(e) === "script");
+  for (let index = 0; index < scripts.length; index++) {
+    const script = scripts[index];
+    const scriptTextNode = script.childNodes[0] as TextNode;
+    const isReferencedScript = script.attrs.find((a) => a.name === "src");
+    const scriptContent = scriptTextNode?.value;
+    if (!scriptContent || isReferencedScript) continue;
+    const jsFile = file.replace(".html", `-bundle-${index}.tsx`);
+    inlineFiles.add(jsFile);
+    await writeFile(jsFile, scriptContent);
+  }
+}
+async function minifyHTML(file: string, buildFile: string) {
+  let fileText, DOM;
+  if (htmlFilesCache.has(file)) {
+    const cache = htmlFilesCache.get(file);
+    fileText = cache[0];
+    DOM = cache[1];
+  } else {
+    fileText = await readFile(file, { encoding: "utf-8" });
+    if (fileText.includes("<!DOCTYPE html>") || fileText.includes("<html")) {
+      DOM = parse(fileText);
+    } else {
+      DOM = parseFragment(fileText);
+    }
+  }
+  // Minify Code
+  const scripts = findElements(DOM, (e) => getTagName(e) === "script");
+  for (let index = 0; index < scripts.length; index++) {
+    const script = scripts[index];
+    const scriptTextNode = script.childNodes[0] as TextNode;
+    const isReferencedScript = script.attrs.find((a) => a.name === "src");
+    if (!scriptTextNode?.value || isReferencedScript) continue;
+    // Use bundled file
+    const buildInlineScript = buildFile.replace(".html", `-bundle-${index}.js`);
+    const scriptContent = await readFile(buildInlineScript, {
+      encoding: "utf-8",
+    });
+    await rm(buildInlineScript);
+    scriptTextNode.value = scriptContent.replace(
+      TEMPLATE_LITERAL_MINIFIER,
+      " "
+    );
+  }
+  // Minify Inline Style
+  const styles = findElements(DOM, (e) => getTagName(e) === "style");
+  for (const style of styles) {
+    const node = style.childNodes[0] as TextNode;
+    const styleContent = node?.value;
+    if (!styleContent) continue;
+    const { css } = await CSSprocessor.process(styleContent, {
+      ...options,
+      from: undefined,
+    });
+    node.value = css;
+  }
+  fileText = serialize(DOM);
+  // Minify HTML
+  fileText = await minify(fileText, {
+    collapseWhitespace: true,
+    removeComments: true,
+    ...bundleConfig["html-minifier-terser"],
+  });
+  if (!isCritical) {
+    await writeFile(buildFile, fileText);
+    return fileText;
+  } else {
+    const buildFileArr = buildFile.split("/");
+    const fileWithBase = buildFileArr.pop();
+    const buildDir = buildFileArr.join("/");
+    // critical is generating the files on the fs
+    try {
+      const { html } = await critical.generate({
+        base: buildDir,
+        html: fileText,
+        target: fileWithBase,
+        inline: !isSecure,
+        extract: true,
+        rebase: () => {},
+        ...bundleConfig.critical,
+      });
+      return html;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+}
+async function rebuildCSS(files: string[], config?: string) {
+  const newConfig = await getPostCSSConfig();
+  plugins = newConfig.plugins;
+  options = newConfig.options;
+  CSSprocessor = postcss(plugins as AcceptedPlugin[]);
+  for (const file of files) {
+    await minifyCSS(file, getBuildPath(file));
+  }
+  if (config) console.log(`⚡ modified ${config}.config`);
+}

package/src/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+declare module "await-spawn" {
+  export default (cmd: string, args: string[]): Promise<unknown> => {};
+}