html-bundle 6.0.3 → 6.0.7

package/README.md

@@ -47,7 +47,7 @@ $ npm run build
 
 `--hmr`: boots up a static server and enables Hot Module Replacement. **This generates a development build and works best when not triggered from the main index.html**<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>
-`--critical`: uses critical to extract and inline critical-path CSS to HTML.<br>
+`--isCritical`: 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
@@ -65,7 +65,7 @@ Generate the config in the root and call it "bundle.config.js"
 
 ## 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. This will install hydro-js to your dependencies. In order to trigger SPA Routers, the popstate event is being triggered after HMR Operations.
+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.
 
 ## Example hydro-js
 

package/dist/bundle.mjs

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import { performance } from "perf_hooks";
-import { readFile, rm, writeFile, readdir } from "fs/promises";
+import { readFile, rm, writeFile, readdir, lstat } from "fs/promises";
 import { execFile } from "child_process";
 import { promisify } from "util";
 import glob from "glob";
@@ -14,7 +14,7 @@ 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 isCritical = process.argv.includes("--isCritical") || bundleConfig.isCritical;
 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]
@@ -52,6 +52,8 @@ async function build(err, files, firstRun = true) {
                     console.log("📋 Logging Handler: ", String(stdout));
             }
             else {
+                if ((await lstat(file)).isDirectory())
+                    continue;
                 await fileCopy(file);
             }
         }

package/dist/utils.mjs

@@ -207,7 +207,8 @@ function getHMRCode(file, id, src) {
         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));
+        const attrVal = elem.getAttribute(attr);
+        if (attrVal) clone.setAttribute(attr, attrVal + "?v=" + String(Math.random().toFixed(4)).slice(2));
         render(clone, elem, false);
       }
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-bundle",
-  "version": "6.0.3",
+  "version": "6.0.7",
   "description": "A very simple bundler for HTML SFC",
   "bin": "./dist/bundle.mjs",
   "scripts": {
@@ -18,12 +18,12 @@
   "author": "Fabian Krutsch <f.krutsch@gmx.de> (https://krutsch.netlify.app/)",
   "license": "MIT",
   "devDependencies": {
-    "@types/cssnano": "^4.0.1",
+    "@types/cssnano": "^5.0.0",
     "@types/glob": "^7.2.0",
     "@types/html-minifier-terser": "^6.1.0",
     "@types/parse5": "^6.0.3",
     "@types/postcss-load-config": "^3.0.1",
-    "typescript": "^4.5.4"
+    "typescript": "^4.5.5"
   },
   "repository": {
     "type": "git",
@@ -33,16 +33,17 @@
   "dependencies": {
     "@web/parse5-utils": "^1.3.0",
     "await-spawn": "^4.0.2",
-    "chokidar": "^3.5.2",
+    "chokidar": "^3.5.3",
     "critical": "^4.0.1",
-    "cssnano": "^5.0.14",
-    "esbuild": "^0.14.9",
-    "fastify": "^3.25.3",
+    "cssnano": "^5.0.16",
+    "esbuild": "^0.14.14",
+    "fastify": "^3.27.0",
     "fastify-static": "^4.5.0",
     "glob": "^7.2.0",
     "html-minifier-terser": "^6.1.0",
+    "hydro-js": "^1.5.10",
     "parse5": "^6.0.1",
     "postcss": "^8.4.5",
-    "postcss-load-config": "^3.1.0"
+    "postcss-load-config": "^3.1.1"
   }
 }

package/src/bundle.mts

@@ -3,7 +3,7 @@
 import type { TextNode } from "parse5";
 import type { AcceptedPlugin } from "postcss";
 import { performance } from "perf_hooks";
-import { readFile, rm, writeFile, readdir } from "fs/promises";
+import { readFile, rm, writeFile, readdir, lstat } from "fs/promises";
 import { execFile } from "child_process";
 import { promisify } from "util";
 import glob from "glob";
@@ -27,7 +27,8 @@ import {
 } from "./utils.mjs";
 
 const isHMR = process.argv.includes("--hmr") || bundleConfig.hmr;
-const isCritical = process.argv.includes("--critical") || bundleConfig.critical;
+const isCritical =
+  process.argv.includes("--isCritical") || bundleConfig.isCritical;
 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]
@@ -70,6 +71,7 @@ async function build(err: any, files: string[], firstRun = true) {
         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 {

package/src/utils.mts

@@ -243,7 +243,8 @@ function getHMRCode(file: string, id: string, src: string) {
         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));
+        const attrVal = elem.getAttribute(attr);
+        if (attrVal) clone.setAttribute(attr, attrVal + "?v=" + String(Math.random().toFixed(4)).slice(2));
         render(clone, elem, false);
       }
     });