html-bundle 5.5.0 → 6.0.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "html-bundle",
-  "version": "5.5.0",
+  "version": "6.0.0",
   "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

@@ -0,0 +1,395 @@
+#!/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
+let 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|jsx?|tsx?)$/;
+const execFilePromise = promisify(execFile);
+
+if (bundleConfig.deletePrev) {
+  await rm(bundleConfig.build, { force: true, recursive: true });
+}
+
+glob(`${bundleConfig.src}/**/*.*`, build);
+
+async function build(err: any, files: string[], firstRun = true) {
+  if (err) {
+    console.error(err);
+    process.exit(1);
+  }
+
+  if (isHMR && firstRun) {
+    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]);
+        if (String(stdout)) 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 && firstRun) {
+    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 tsConfigWatcher = watch(
+        postcssFile.split("\\").slice(0, -1).join("\\") + "\\tsconfig.json"
+      );
+
+      const cssFiles = files.filter((file) => file.endsWith(".css"));
+      postCSSWatcher.on(
+        "change",
+        async () => await rebuildCSS(cssFiles, "postcss")
+      );
+      tailwindCSSWatcher.on(
+        "change",
+        async () => await rebuildCSS(cssFiles, "tailwind")
+      );
+      tsConfigWatcher.on("change", async () => {
+        timer = performance.now();
+        await build(null, files, false);
+      });
+    }
+
+    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 (/\.(jsx?|tsx?)$/.test(file)) {
+        inlineFiles.add(file);
+        await minifyCode();
+      } else {
+        const { stdout } = await execFilePromise("node", [handlerFile, file]);
+        if (String(stdout)) 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
+  try {
+    fileText = await minify(fileText, {
+      collapseWhitespace: true,
+      removeComments: true,
+      ...bundleConfig["html-minifier-terser"],
+    });
+  } catch (e) {
+    console.error(e);
+  }
+
+  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

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

package/src/utils.mts

@@ -0,0 +1,231 @@
+import type { FastifyServerOptions } from "fastify";
+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: string) {
+  return copyFile(file, getBuildPath(file));
+}
+
+export function createDir(file: string) {
+  const buildPath = getBuildPath(file);
+  const dir = buildPath.split("/").slice(0, -1).join("/");
+  return mkdir(dir, { recursive: true });
+}
+
+export function getBuildPath(file: string) {
+  return file.replace(`${bundleConfig.src}/`, `${bundleConfig.build}/`);
+}
+
+const CONNECTIONS: Array<any> = []; // In order to send the HMR information
+export let serverSentEvents:
+  | undefined
+  | (({ file, html }: { file: string; html?: string }) => void);
+export async function createDefaultServer(isSecure: boolean) {
+  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")),
+          },
+        } as FastifyServerOptions)
+      : 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("/hmr", (_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) => {
+      if (/\.(jsx?|tsx?)$/.test(data.file)) {
+        data.file = data.file.replace(".ts", ".js").replace(".jsx", ".js");
+      }
+      CONNECTIONS.forEach((rep) => {
+        rep.write(`data: ${JSON.stringify(data)}\n\n`);
+      });
+    };
+  });
+  return fastify;
+}
+
+export async function getPostCSSConfig() {
+  try {
+    return await postcssrc({});
+  } catch {
+    return { plugins: [cssnano], options: {}, file: "" };
+  }
+}
+
+async function getBundleConfig() {
+  const base = {
+    build: "build",
+    src: "src",
+    port: 5000,
+    esbuild: {},
+    "html-minifier-terser": {},
+    critical: {},
+    deletePrev: true,
+  };
+
+  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: string,
+  file: string,
+  ast?: ReturnType<typeof parse | typeof parseFragment>
+) {
+  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: string, id: string, src: string) {
+  return `import { render, html, $, $$, setShouldSetReactivity } from "hydro-js";
+  window.isHMR = true;
+  if (!window.eventsource${id}) {
+    window.eventsource${id} = new EventSource("/hmr");
+    window.eventsource${id}.addEventListener('error', (e) => {
+      setTimeout(() => {
+        window.eventsource${id} = new EventSource("/hmr");
+      }, 1000);
+    });
+    window.eventsource${id}.addEventListener("message", ({ data }) => {
+      const dataObj = JSON.parse(data);
+      const file = "${file}";
+
+      if (file === dataObj.file && "html" in dataObj) {
+        let newHTML;
+        try {
+          newHTML = html\`\${dataObj.html}\`
+        } catch {
+          setShouldSetReactivity(false);
+          newHTML = html\`\${dataObj.html}\`
+          setShouldSetReactivity(true);
+        }
+        
+        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(newHTML, document.documentElement, false);
+        } else {
+          const hmrID = "${id}";
+          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)
+            }
+          }
+        }
+        
+        if (dataObj.file === \`${src}/index.html\`) {
+          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) {
+          updateOne(type, attr, elem)
+        } else {
+          for(const e of $$(\`[data-hmr="\${hmrId}"] \${type}\`)) {
+            updateOne(type, attr, e);
+          }
+        }
+      }
+
+      function updateOne(type, attr, 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);
+      }
+    });
+  }
+`;
+}