html-bundle 6.0.16 → 6.0.17

package/dist/bundle.mjs

@@ -1,341 +1,345 @@
-#!/usr/bin/env node
-import { performance } from "perf_hooks";
-import { readFile, rm, writeFile, readdir, lstat } 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 Critters from "critters";
-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("--isCritical") || bundleConfig.isCritical;
-const critters = new Critters({
-    path: bundleConfig.build,
-    logLevel: "silent",
-});
-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);
-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|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, files, firstRun = true) {
-    if (err) {
-        console.error(err);
-        process.exit(1);
-    }
-    if (isHMR && firstRun) {
-        fastify = await createDefaultServer(isSecure);
-        await fastify.listen({ port: bundleConfig.port });
-        console.log(`💻 Sever listening on http${isSecure ? "s" : ""}://localhost:5000.`);
-    }
-    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 {
-                if ((await lstat(file)).isDirectory())
-                    continue;
-                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);
-        watcher.on("add", async (file) => {
-            file = String.raw `${file}`.replace(/\\/g, "/"); // glob and chokidar diff
-            if (files.includes(file) || INLINE_BUNDLE_FILE.test(file)) {
-                return;
-            }
-            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 (/\.(jsx?|tsx?)$/.test(file)) {
-                inlineFiles.add(file);
-                await minifyCode();
-            }
-            else if (!file.endsWith(".css")) {
-                if (handlerFile) {
-                    const { stdout } = await execFilePromise("node", [handlerFile, file]);
-                    if (String(stdout))
-                        console.log("📋 Logging Handler: ", String(stdout));
-                }
-                else {
-                    await fileCopy(file);
-                }
-            }
-            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",
-            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);
-                    await awaitSpawn(process.platform === "win32" ? "npm.cmd" : "npm", [
-                        "install",
-                        pkgName,
-                    ]);
-                    console.log(`📦 Package ${pkgName} was installed for you`);
-                }
-            }
-            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
-    try {
-        fileText = await minify(fileText, {
-            collapseWhitespace: true,
-            removeComments: true,
-            ...bundleConfig["html-minifier-terser"],
-        });
-    }
-    catch (e) {
-        console.error(e);
-    }
-    if (isCritical) {
-        try {
-            const isPartical = !fileText.startsWith("<!DOCTYPE html>");
-            fileText = await critters.process(fileText);
-            // fix critters jsdom
-            if (isPartical) {
-                fileText = fileText.replace(/<\/?(html|head|body)>/g, "");
-            }
-        }
-        catch (err) {
-            console.error(err);
-        }
-    }
-    await writeFile(buildFile, fileText);
-    return fileText;
-}
-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`);
-}
+#!/usr/bin/env node
+import { performance } from "perf_hooks";
+import { readFile, rm, writeFile, readdir, lstat } from "fs/promises";
+import { execFile } from "child_process";
+import { promisify } from "util";
+import { sep } from "path";
+import { glob } from "glob";
+import postcss from "postcss";
+import esbuild from "esbuild";
+import Critters from "critters";
+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("--isCritical") || bundleConfig.isCritical;
+const critters = new Critters({
+    path: bundleConfig.build,
+    logLevel: "silent",
+});
+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);
+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|jsx?|tsx?)$/;
+const execFilePromise = promisify(execFile);
+if (bundleConfig.deletePrev) {
+    await rm(bundleConfig.build, { force: true, recursive: true });
+}
+async function build(files, firstRun = true) {
+    if (isHMR && firstRun) {
+        fastify = await createDefaultServer(isSecure);
+        await fastify.listen({ port: bundleConfig.port });
+        console.log(`💻 Sever listening on http${isSecure ? "s" : ""}://localhost:${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 {
+                if ((await lstat(file)).isDirectory())
+                    continue;
+                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(files, false);
+            });
+        }
+        const watcher = watch(bundleConfig.src);
+        watcher.on("add", async (file) => {
+            file = String.raw `${file}`.replace(/\\/g, sep); // glob and chokidar diff
+            if (files.includes(file) || INLINE_BUNDLE_FILE.test(file)) {
+                return;
+            }
+            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, sep);
+            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, sep);
+            inlineFiles.delete(file);
+            const buildFile = getBuildPath(file)
+                .replace(".ts", ".js")
+                .replace(".jsx", ".js");
+            await rm(buildFile);
+            const bfDir = buildFile.split(sep).slice(0, -1).join(sep);
+            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 (/\.(jsx?|tsx?)$/.test(file)) {
+                inlineFiles.add(file);
+                await minifyCode();
+            }
+            else if (!file.endsWith(".css")) {
+                if (handlerFile) {
+                    const { stdout } = await execFilePromise("node", [handlerFile, file]);
+                    if (String(stdout))
+                        console.log("📋 Logging Handler: ", String(stdout));
+                }
+                else {
+                    await fileCopy(file);
+                }
+            }
+            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",
+            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);
+                    await awaitSpawn(process.platform === "win32" ? "npm.cmd" : "npm", [
+                        "install",
+                        pkgName,
+                    ]);
+                    console.log(`📦 Package ${pkgName} was installed for you`);
+                }
+            }
+            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
+    try {
+        fileText = await minify(fileText, {
+            collapseWhitespace: true,
+            removeComments: true,
+            ...bundleConfig["html-minifier-terser"],
+        });
+    }
+    catch (e) {
+        console.error(e);
+    }
+    if (isCritical) {
+        try {
+            const isPartical = !fileText.startsWith("<!DOCTYPE html>");
+            fileText = await critters.process(fileText);
+            // fix critters jsdom
+            if (isPartical) {
+                fileText = fileText.replace(/<\/?(html|head|body)>/g, "");
+            }
+        }
+        catch (err) {
+            console.error(err);
+        }
+    }
+    await writeFile(buildFile, fileText);
+    return fileText;
+}
+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`);
+}
+try {
+    const files = await glob(`${bundleConfig.src}/**/*`);
+    await build(files);
+}
+catch (err) {
+    console.error(err);
+    process.exit(1);
+}

package/dist/utils.mjs

@@ -1,112 +1,112 @@
-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("/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, 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) {
+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(path.sep).slice(0, -1).join(path.sep);
+    return mkdir(dir, { recursive: true });
+}
+export function getBuildPath(file) {
+    return file.replace(`${bundleConfig.src}${path.sep}`, `${bundleConfig.build}${path.sep}`);
+}
+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, `${path.sep}index.html`), {
+            encoding: "utf-8",
+        });
+        reply.header("Content-Type", "text/html; charset=UTF-8");
+        return reply.send(addHMRCode(file, `${bundleConfig.src}${path.sep}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, 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, $, $$, setShouldSetReactivity } from "hydro-js";
   window.isHMR = true;
   window.lastCalled = new Map();
@@ -213,5 +213,5 @@ function getHMRCode(file, id, src) {
       }
     });
   }
-`;
-}
+`;
+}

package/package.json

@@ -1,49 +1,49 @@
-{
-  "name": "html-bundle",
-  "version": "6.0.16",
-  "description": "A very simple bundler for HTML SFC",
-  "bin": "./dist/bundle.mjs",
-  "scripts": {
-    "start": "tsc",
-    "update": "npx npm-check-updates -u && npx typesync && npm i && npm outdated"
-  },
-  "keywords": [
-    "bundler",
-    "SFC",
-    "HTML",
-    "TypeScript",
-    "esbuild",
-    "hydro-js"
-  ],
-  "author": "Fabian Krutsch <f.krutsch@gmx.de> (https://krutsch.netlify.app/)",
-  "license": "MIT",
-  "devDependencies": {
-    "@types/cssnano": "^5.0.0",
-    "@types/glob": "^8.0.0",
-    "@types/html-minifier-terser": "^7.0.0",
-    "@types/parse5": "^7.0.0",
-    "@types/postcss-load-config": "^3.0.1",
-    "typescript": "^4.9.4"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Krutsch/html-bundle.git"
-  },
-  "bugs": "https://github.com/Krutsch/html-bundle/issues",
-  "dependencies": {
-    "@fastify/static": "^6.6.1",
-    "@web/parse5-utils": "^1.3.0",
-    "await-spawn": "^4.0.2",
-    "chokidar": "^3.5.3",
-    "critters": "^0.0.16",
-    "cssnano": "^5.1.14",
-    "esbuild": "^0.17.3",
-    "fastify": "^4.11.0",
-    "glob": "^8.1.0",
-    "html-minifier-terser": "^7.1.0",
-    "hydro-js": "^1.5.13",
-    "parse5": "^7.1.2",
-    "postcss": "^8.4.21",
-    "postcss-load-config": "^4.0.1"
-  }
-}
+{
+  "name": "html-bundle",
+  "version": "6.0.17",
+  "description": "A very simple bundler for HTML SFC",
+  "bin": "./dist/bundle.mjs",
+  "scripts": {
+    "start": "tsc",
+    "update": "npx npm-check-updates -u && npx typesync && npm i && npm outdated"
+  },
+  "keywords": [
+    "bundler",
+    "SFC",
+    "HTML",
+    "TypeScript",
+    "esbuild",
+    "hydro-js"
+  ],
+  "author": "Fabian Krutsch <f.krutsch@gmx.de> (https://krutsch.netlify.app/)",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/cssnano": "^5.0.0",
+    "@types/glob": "^8.1.0",
+    "@types/html-minifier-terser": "^7.0.0",
+    "@types/parse5": "^7.0.0",
+    "@types/postcss-load-config": "^3.0.1",
+    "typescript": "^5.0.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Krutsch/html-bundle.git"
+  },
+  "bugs": "https://github.com/Krutsch/html-bundle/issues",
+  "dependencies": {
+    "@fastify/static": "^6.10.1",
+    "@web/parse5-utils": "^2.0.0",
+    "await-spawn": "^4.0.2",
+    "chokidar": "^3.5.3",
+    "critters": "^0.0.16",
+    "cssnano": "^6.0.0",
+    "esbuild": "^0.17.18",
+    "fastify": "^4.17.0",
+    "glob": "^10.2.2",
+    "html-minifier-terser": "^7.2.0",
+    "hydro-js": "^1.5.14",
+    "parse5": "^7.1.2",
+    "postcss": "^8.4.23",
+    "postcss-load-config": "^4.0.1"
+  }
+}

package/src/bundle.mts

@@ -6,7 +6,8 @@ import { performance } from "perf_hooks";
 import { readFile, rm, writeFile, readdir, lstat } from "fs/promises";
 import { execFile } from "child_process";
 import { promisify } from "util";
-import glob from "glob";
+import { sep } from "path";
+import { glob } from "glob";
 import postcss from "postcss";
 import esbuild from "esbuild";
 import Critters from "critters";
@@ -53,19 +54,14 @@ 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);
-  }
-
+async function build(files: string[], firstRun = true) {
   if (isHMR && firstRun) {
     fastify = await createDefaultServer(isSecure);
     await fastify.listen({ port: bundleConfig.port });
     console.log(
-      `💻 Sever listening on http${isSecure ? "s" : ""}://localhost:5000.`
+      `💻 Sever listening on http${isSecure ? "s" : ""}://localhost:${
+        bundleConfig.port
+      }.`
     );
   }
 
@@ -130,13 +126,13 @@ async function build(err: any, files: string[], firstRun = true) {
       );
       tsConfigWatcher.on("change", async () => {
         timer = performance.now();
-        await build(null, files, false);
+        await build(files, false);
       });
     }
 
     const watcher = watch(bundleConfig.src);
     watcher.on("add", async (file) => {
-      file = String.raw`${file}`.replace(/\\/g, "/"); // glob and chokidar diff
+      file = String.raw`${file}`.replace(/\\/g, sep); // glob and chokidar diff
       if (files.includes(file) || INLINE_BUNDLE_FILE.test(file)) {
         return;
       }
@@ -149,7 +145,7 @@ async function build(err: any, files: string[], firstRun = true) {
       if (INLINE_BUNDLE_FILE.test(file)) {
         return;
       }
-      file = String.raw`${file}`.replace(/\\/g, "/");
+      file = String.raw`${file}`.replace(/\\/g, sep);
 
       await rebuild(file);
 
@@ -159,7 +155,7 @@ async function build(err: any, files: string[], firstRun = true) {
       if (INLINE_BUNDLE_FILE.test(file)) {
         return;
       }
-      file = String.raw`${file}`.replace(/\\/g, "/");
+      file = String.raw`${file}`.replace(/\\/g, sep);
 
       inlineFiles.delete(file);
       const buildFile = getBuildPath(file)
@@ -167,7 +163,7 @@ async function build(err: any, files: string[], firstRun = true) {
         .replace(".jsx", ".js");
       await rm(buildFile);
 
-      const bfDir = buildFile.split("/").slice(0, -1).join("/");
+      const bfDir = buildFile.split(sep).slice(0, -1).join(sep);
       const stats = await readdir(bfDir);
       if (!stats.length) await rm(bfDir);
 
@@ -400,3 +396,11 @@ async function rebuildCSS(files: string[], config?: string) {
 
   if (config) console.log(`⚡ modified ${config}.config`);
 }
+
+try {
+  const files = await glob(`${bundleConfig.src}/**/*`);
+  await build(files);
+} catch (err) {
+  console.error(err);
+  process.exit(1);
+}

package/src/utils.mts

@@ -1,4 +1,4 @@
-import type { Node, ParentNode } from "@web/parse5-utils";
+import type { Node } from "@web/parse5-utils";
 import type { FastifyServerOptions } from "fastify";
 import { copyFile, mkdir, readFile } from "fs/promises";
 import path from "path";
@@ -22,12 +22,15 @@ export function fileCopy(file: string) {
 
 export function createDir(file: string) {
   const buildPath = getBuildPath(file);
-  const dir = buildPath.split("/").slice(0, -1).join("/");
+  const dir = buildPath.split(path.sep).slice(0, -1).join(path.sep);
   return mkdir(dir, { recursive: true });
 }
 
 export function getBuildPath(file: string) {
-  return file.replace(`${bundleConfig.src}/`, `${bundleConfig.build}/`);
+  return file.replace(
+    `${bundleConfig.src}${path.sep}`,
+    `${bundleConfig.build}${path.sep}`
+  );
 }
 
 const CONNECTIONS: Array<any> = []; // In order to send the HMR information
@@ -48,13 +51,15 @@ export async function createDefaultServer(isSecure: boolean) {
   );
   fastify.setNotFoundHandler(async (_req, reply) => {
     const file = await readFile(
-      path.join(process.cwd(), bundleConfig.build, "/index.html"),
+      path.join(process.cwd(), bundleConfig.build, `${path.sep}index.html`),
       {
         encoding: "utf-8",
       }
     );
     reply.header("Content-Type", "text/html; charset=UTF-8");
-    return reply.send(addHMRCode(file, `${bundleConfig.src}/index.html`));
+    return reply.send(
+      addHMRCode(file, `${bundleConfig.src}${path.sep}index.html`)
+    );
   });
   fastify.register(fastifyStatic, {
     root: path.join(process.cwd(), bundleConfig.build),