html-bundle 5.5.0 → 6.0.1-beta

package/README.md

@@ -1,6 +1,16 @@
 # html-bundle
 
-> A very simple zero-config bundler primarily for HTML files. The idea is to use HTML as Single File Components, because HTML can already include `<style>` and `<script>` elements. Additionally, `TypeScript` and `JSX` can be used as inline or referenced script in HTML.
+A (primarily) zero-config bundler for HTML files. The idea is to use HTML as Single File Components, because HTML can already include `<style>` and `<script>` elements.
+
+## Features
+
+- 🦾 TypeScript (reference it as .js or write inline TS)
+- 📦 Automatic Package Installation
+- 💨 HMR
+- ⚡ [ESBuild](https://github.com/evanw/esbuild)
+- 🦔 [Critical CSS](https://github.com/evanw/esbuild)
+- 💅 PostCSS and Tailwind CSS Support
+- 🛡️ Almost no need to restart
 
 ![Demo](./example.gif)
 
@@ -20,19 +30,7 @@ Add an entry to script in package.json (see flags below).
 }
 ```
 
-or ideally
-
-```json
-{
-  "scripts": {
-    "dev": "html-bundle --hmr --secure",
-    "build": "html-bundle --critical",
-    "serve": "html-bundle --serveOnly --secure"
-  }
-}
-```
-
-Add a `postcss.config.cjs` file and run the build command.
+Add a `postcss.config.js` file and run the build command.
 <em>If you do not create this config file, a minimal in-memory config file will be created with `cssnano` as plugin.</em>
 
 ```properties
@@ -41,22 +39,33 @@ $ npm run build
 
 ## CLI
 
-`--serveOnly`: boots up a static server for the build folder (fastify)<br>
+`--hmr`: boots up a static server and enables Hot Module Replacement. **This generates a development build.**<br>
 `--secure`: creates a secure HTTP2 over HTTPS instance. This requires the files `localhost.pem` and `localhost-key.pem` in the root folder. You can generate them with [mkcert](https://github.com/FiloSottile/mkcert) for instance.<br>
-`--hmr`: boots up a static server and enables Hot Module Replacement. This works at its best with non-root HTML files without file references.<br>
-`--critical`: uses [critical](https://www.npmjs.com/package/critical) to extract and inline critical-path CSS to HTML.<br>
-`--csp`: disables inline option from `critical`.
+`--critical`: uses critical to extract and inline critical-path CSS to HTML.<br>
+`--handler`: path to your custom handler. Here, you can handle all non-supported files. You can get the filename via `process.argv[2]`.
+
+## Optional Config
+
+_The CLI flags can also be set by the config. Flags set by the CLI will override the config._
+Generate the config in the root and call it "bundle.config.js"
+
+**src:** input path. Default to "src"<br>
+**build:** output path. Defaults to "build"<br>
+**port:** For the HMR Server. Defaults to 5000<br>
+**esbuild:** Your additional config<br>
+**html-minifier-terser:** Your additional config<br>
+**critical:** Your additional config<br>
 
 ## Concept
 
-The bundler always globs all HTML, CSS and TS/JS files from the `src/` directory and processes them to the `build/` directory. PostCSS is being used for CSS files and inline styles, html-minifier for HTML and esbuild to bundle, minify, etc. for inline and referenced TS/JS. There are no <strong>regexes</strong>, just <strong>AST</strong> transformations. Server-sent events and [hydro-js](https://github.com/Krutsch/hydro-js) are used for HMR.
+The bundler always globs all HTML, CSS and TS/JS files from the `src` (config) directory and processes them to the `build` (config) directory. PostCSS is being used for CSS files and inline styles, html-minifier-terser for HTML and esbuild to bundle, minify, etc. for inline and referenced TS/JS. Server-sent events and [hydro-js](https://github.com/Krutsch/hydro-js) are used for HMR. This will install hydro-js to your dependencies. In order to trigger SPA Routers, the popstate event is being triggered after HMR Operations.
 
 ## Example hydro-js
 
-Have a look at [hydro-starter](https://github.com/Krutsch/hydro-starter).<br>
+Get the idea from [hydro-starter](https://github.com/Krutsch/hydro-starter).<br>
 Set `"jsxFactory": "h"` in `tsconfig.json` for JSX.
 
-#### Input
+### Input
 
 ```html
 <!DOCTYPE html>

package/dist/bundle.mjs

@@ -0,0 +1,327 @@
+#!/usr/bin/env node
+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);
+let fastify;
+const inlineFiles = new Set();
+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, files) {
+    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) {
+            // 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, buildFile) {
+    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() {
+    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) {
+        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) {
+    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];
+        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, buildFile) {
+    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];
+        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];
+        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, config) {
+    const newConfig = await getPostCSSConfig();
+    plugins = newConfig.plugins;
+    options = newConfig.options;
+    CSSprocessor = postcss(plugins);
+    for (const file of files) {
+        await minifyCSS(file, getBuildPath(file));
+    }
+    if (config)
+        console.log(`⚡ modified ${config}.config`);
+}

package/dist/utils.js

@@ -0,0 +1,168 @@
+import { access, 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.cjs");
+        await access(cfgPath, 0);
+        const config = await import(`file://${cfgPath}`);
+        return { ...base, ...config.default };
+    }
+    catch {
+        console.log("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, bundleConfig.build));
+    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, build) {
+    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);
+        }
+      }
+    });
+  }
+`;
+}