html-bundle 6.0.2 → 6.0.6

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);
             }
         }
@@ -204,11 +206,11 @@ async function minifyCode() {
                     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,
                     ]);
+                    console.log(`📦 Package ${pkgName} was installed for you`);
                 }
             }
             if (missingPkg) {

package/dist/utils.mjs

@@ -164,8 +164,6 @@ function getHMRCode(file, id, src) {
         if (dataObj.html.includes("<script")) updateElem("script");
         
         
-        console.log("dispatch")
-        console.log(dataObj.file)
         if (dataObj.file === \`${src}/index.html\`) {
           dispatchEvent(new Event("popstate"));
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-bundle",
-  "version": "6.0.2",
+  "version": "6.0.6",
   "description": "A very simple bundler for HTML SFC",
   "bin": "./dist/bundle.mjs",
   "scripts": {
@@ -18,7 +18,7 @@
   "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",
@@ -36,13 +36,14 @@
     "chokidar": "^3.5.2",
     "critical": "^4.0.1",
     "cssnano": "^5.0.14",
-    "esbuild": "^0.14.8",
-    "fastify": "^3.25.2",
+    "esbuild": "^0.14.10",
+    "fastify": "^3.25.3",
     "fastify-static": "^4.5.0",
     "glob": "^7.2.0",
     "html-minifier-terser": "^6.1.0",
+    "hydro-js": "^1.5.7",
     "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 {
@@ -243,12 +245,13 @@ async function minifyCode(): Promise<unknown> {
           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,
           ]);
+
+          console.log(`📦 Package ${pkgName} was installed for you`);
         }
       }