html-bundle 6.0.22 → 6.1.0

package/README.md

@@ -63,6 +63,19 @@ Generate the config in the root and call it "bundle.config.js"
 **html-minifier-terser:** Your additional config<br>
 **critical:** Your additional config<br>
 
+Example:
+
+```javascript
+/** @type {import('html-bundle').Config} */
+export default {
+  secure: true,
+  handler: "utils/staticFiles.js",
+  esbuild: {
+    external: ["images"],
+  },
+};
+```
+
 ## Concept
 
 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. In order to trigger SPA Routers, the popstate event is being triggered after HMR Operations.

package/dist/bundle.mjs

@@ -103,7 +103,10 @@ async function build(files, firstRun = true) {
             if (files.includes(file) || INLINE_BUNDLE_FILE.test(file)) {
                 return;
             }
-            await rebuild(file);
+            try {
+                await rebuild(file);
+            }
+            catch { }
             console.log(`⚡ added ${file} to the build`);
         });
         watcher.on("change", async (file) => {
@@ -123,11 +126,14 @@ async function build(files, firstRun = true) {
             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);
+            try {
+                await rm(buildFile);
+                const bfDir = buildFile.split("/").slice(0, -1).join("/");
+                const stats = await readdir(bfDir);
+                if (!stats.length)
+                    await rm(bfDir);
+            }
+            catch { }
             console.log(`⚡ deleted ${file} from the build`);
         });
         async function rebuild(file) {
@@ -162,6 +168,11 @@ async function build(files, firstRun = true) {
                     await fileCopy(file);
                 }
             }
+            else if (handlerFile) {
+                const { stdout } = await execFilePromise("node", [handlerFile, file]);
+                if (String(stdout))
+                    console.log("📋 Logging Handler: ", String(stdout));
+            }
             serverSentEvents?.({ file, html });
         }
     }
@@ -177,7 +188,8 @@ async function minifyCSS(file, buildFile) {
         await writeFile(buildFile, result.css);
     }
     catch (err) {
-        console.error(err);
+        // @ts-ignore
+        console.error(err?.reason);
     }
 }
 async function minifyCode() {
@@ -207,7 +219,7 @@ async function minifyCode() {
         let missingPkg = false;
         if (err?.errors) {
             for (const error of err.errors) {
-                if (error.text?.startsWith("Could not resolve")) {
+                if (error.location && error.text?.startsWith("Could not resolve")) {
                     missingPkg = true;
                     const packageNameRegex = /(?<=").*(?=")/;
                     const [pkgName] = error.text.match(packageNameRegex);
@@ -282,11 +294,14 @@ async function minifyHTML(file, buildFile) {
             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, " ");
+        try {
+            const scriptContent = await readFile(buildInlineScript, {
+                encoding: "utf-8",
+            });
+            await rm(buildInlineScript);
+            scriptTextNode.value = scriptContent.replace(TEMPLATE_LITERAL_MINIFIER, " ");
+        }
+        catch { }
     }
     // Minify Inline Style
     const styles = findElements(DOM, (e) => getTagName(e) === "style");
@@ -295,11 +310,17 @@ async function minifyHTML(file, buildFile) {
         const styleContent = node?.value;
         if (!styleContent)
             continue;
-        const { css } = await CSSprocessor.process(styleContent, {
-            ...options,
-            from: undefined,
-        });
-        node.value = css;
+        try {
+            const { css } = await CSSprocessor.process(styleContent, {
+                ...options,
+                from: undefined,
+            });
+            node.value = css;
+        }
+        catch {
+            // @ts-ignore
+            console.error(err?.reason);
+        }
     }
     fileText = serialize(DOM);
     // Minify HTML

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "html-bundle",
-  "version": "6.0.22",
+  "version": "6.1.0",
   "description": "A very simple bundler for HTML SFC",
   "bin": "./dist/bundle.mjs",
+  "types": "./src/config.d.ts",
   "scripts": {
     "start": "tsc",
     "update": "npx npm-check-updates -u && npx typesync && npm i && npm outdated"
@@ -31,19 +32,19 @@
   },
   "bugs": "https://github.com/Krutsch/html-bundle/issues",
   "dependencies": {
-    "@fastify/static": "^6.12.0",
+    "@fastify/static": "^7.0.0",
     "@web/parse5-utils": "^2.1.0",
     "await-spawn": "^4.0.2",
     "chokidar": "^3.5.3",
     "critters": "^0.0.20",
     "cssnano": "^6.0.3",
-    "esbuild": "^0.19.11",
-    "fastify": "^4.25.2",
+    "esbuild": "^0.20.0",
+    "fastify": "^4.26.0",
     "glob": "^10.3.10",
     "html-minifier-terser": "^7.2.0",
     "hydro-js": "^1.5.14",
     "parse5": "^7.1.2",
-    "postcss": "^8.4.33",
+    "postcss": "^8.4.34",
     "postcss-load-config": "^5.0.2"
   }
 }

package/src/bundle.mts

@@ -138,7 +138,9 @@ async function build(files: string[], firstRun = true) {
         return;
       }
 
-      await rebuild(file);
+      try {
+        await rebuild(file);
+      } catch {}
 
       console.log(`⚡ added ${file} to the build`);
     });
@@ -162,11 +164,13 @@ async function build(files: string[], firstRun = true) {
       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);
+      try {
+        await rm(buildFile);
+        const bfDir = buildFile.split("/").slice(0, -1).join("/");
+        const stats = await readdir(bfDir);
+        if (!stats.length) await rm(bfDir);
+      } catch {}
 
       console.log(`⚡ deleted ${file} from the build`);
     });
@@ -200,6 +204,9 @@ async function build(files: string[], firstRun = true) {
         } else {
           await fileCopy(file);
         }
+      } else if (handlerFile) {
+        const { stdout } = await execFilePromise("node", [handlerFile, file]);
+        if (String(stdout)) console.log("📋 Logging Handler: ", String(stdout));
       }
 
       serverSentEvents?.({ file, html });
@@ -217,7 +224,8 @@ async function minifyCSS(file: string, buildFile: string) {
     });
     await writeFile(buildFile, result.css);
   } catch (err) {
-    console.error(err);
+    // @ts-ignore
+    console.error(err?.reason);
   }
 }
 
@@ -248,7 +256,7 @@ async function minifyCode(): Promise<unknown> {
     let missingPkg = false;
     if (err?.errors) {
       for (const error of err.errors) {
-        if (error.text?.startsWith("Could not resolve")) {
+        if (error.location && error.text?.startsWith("Could not resolve")) {
           missingPkg = true;
           const packageNameRegex = /(?<=").*(?=")/;
           const [pkgName] = error.text.match(packageNameRegex);
@@ -340,14 +348,16 @@ async function minifyHTML(file: string, buildFile: string) {
     // 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,
-      " "
-    );
+    try {
+      const scriptContent = await readFile(buildInlineScript, {
+        encoding: "utf-8",
+      });
+      await rm(buildInlineScript);
+      scriptTextNode.value = scriptContent.replace(
+        TEMPLATE_LITERAL_MINIFIER,
+        " "
+      );
+    } catch {}
   }
 
   // Minify Inline Style
@@ -357,11 +367,16 @@ async function minifyHTML(file: string, buildFile: string) {
     const styleContent = node?.value;
     if (!styleContent) continue;
 
-    const { css } = await CSSprocessor.process(styleContent, {
-      ...options,
-      from: undefined,
-    });
-    node.value = css;
+    try {
+      const { css } = await CSSprocessor.process(styleContent, {
+        ...options,
+        from: undefined,
+      });
+      node.value = css;
+    } catch {
+      // @ts-ignore
+      console.error(err?.reason);
+    }
   }
 
   fileText = serialize(DOM);

package/src/config.d.ts

@@ -0,0 +1,13 @@
+export type Config = {
+  build: string;
+  src: string;
+  port: number;
+  secure: boolean;
+  esbuild?: BuildOptions;
+  "html-minifier-terser"?: HTMLOptions;
+  critical?: Options;
+  deletePrev?: boolean;
+  isCritical?: boolean;
+  hmr?: boolean;
+  handler?: string;
+};

package/src/utils.mts

@@ -16,6 +16,7 @@ import {
   findElement,
   appendChild,
 } from "@web/parse5-utils";
+import { Config } from "./config";
 
 export const bundleConfig = await getBundleConfig();
 
@@ -89,19 +90,6 @@ export async function getPostCSSConfig() {
   }
 }
 
-export type Config = {
-  build: string;
-  src: string;
-  port: number;
-  secure: boolean;
-  esbuild?: BuildOptions;
-  "html-minifier-terser"?: HTMLOptions;
-  critical?: Options;
-  deletePrev?: boolean;
-  isCritical?: boolean;
-  hmr?: boolean;
-  handler?: string;
-};
 async function getBundleConfig(): Promise<Config> {
   const base = {
     build: "build",