html-bundle 6.0.21 → 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);
@@ -244,8 +256,9 @@ async function writeInlineScripts(file) {
         const script = scripts[index];
         const scriptTextNode = script.childNodes[0];
         const isReferencedScript = script.attrs.find((a) => a.name === "src");
+        const type = script.attrs.find((a) => a.name === "type");
         const scriptContent = scriptTextNode?.value;
-        if (!scriptContent || isReferencedScript)
+        if (!scriptContent || isReferencedScript || type?.value === "importmap")
             continue;
         const jsFile = file.replace(".html", `-bundle-${index}.tsx`);
         inlineFiles.add(jsFile);
@@ -274,15 +287,21 @@ async function minifyHTML(file, buildFile) {
         const script = scripts[index];
         const scriptTextNode = script.childNodes[0];
         const isReferencedScript = script.attrs.find((a) => a.name === "src");
-        if (!scriptTextNode?.value || isReferencedScript)
+        const type = script.attrs.find((a) => a.name === "type");
+        if (!scriptTextNode?.value ||
+            isReferencedScript ||
+            type?.value === "importmap")
             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");
@@ -291,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/dist/utils.mjs

@@ -71,9 +71,9 @@ async function getBundleConfig() {
         port: 5000,
         esbuild: {},
         "html-minifier-terser": {},
+        deletePrev: true,
         critical: {},
         isCritical: false,
-        deletePrev: true,
         hmr: false,
         secure: false,
         handler: "",

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "html-bundle",
-  "version": "6.0.21",
+  "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.2",
-    "esbuild": "^0.19.11",
-    "fastify": "^4.25.2",
+    "cssnano": "^6.0.3",
+    "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.32",
+    "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);
@@ -293,8 +301,10 @@ async function writeInlineScripts(file: string) {
     const isReferencedScript = script.attrs.find(
       (a: { name: string }) => a.name === "src"
     );
+    const type = script.attrs.find((a: { name: string }) => a.name === "type");
     const scriptContent = scriptTextNode?.value;
-    if (!scriptContent || isReferencedScript) continue;
+    if (!scriptContent || isReferencedScript || type?.value === "importmap")
+      continue;
 
     const jsFile = file.replace(".html", `-bundle-${index}.tsx`);
     inlineFiles.add(jsFile);
@@ -327,19 +337,27 @@ async function minifyHTML(file: string, buildFile: string) {
     const isReferencedScript = script.attrs.find(
       (a: { name: string }) => a.name === "src"
     );
-    if (!scriptTextNode?.value || isReferencedScript) continue;
+    const type = script.attrs.find((a: { name: string }) => a.name === "type");
+    if (
+      !scriptTextNode?.value ||
+      isReferencedScript ||
+      type?.value === "importmap"
+    )
+      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
@@ -349,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",