html-bundle 6.0.1 → 6.0.5

package/README.md

@@ -16,6 +16,10 @@ A (primarily) zero-config bundler for HTML files. The idea is to use HTML as Sin
 - 🚋 Watcher on PostCSS and Tailwind CSS and TS Config
 - 🛡️ Almost no need to restart
 
+## Demo
+
+![Demo](./example.gif)
+
 ## Installation and Usage
 
 ```properties
@@ -43,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
@@ -61,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
 
@@ -100,10 +104,6 @@ Set `"jsxFactory": "h"` in `tsconfig.json` for JSX.
 </html>
 ```
 
-### Output
-
-![Output](output.JPG)
-
 ## Example Vue.js@next
 
 Set `"jsxFactory": "h"` in `tsconfig.json`.
@@ -173,7 +173,3 @@ Set `"jsxFactory": "h"` in `tsconfig.json`.
   </body>
 </html>
 ```
-
-### Demo
-
-![Demo](./example.gif)

package/dist/bundle.mjs

@@ -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]
@@ -204,11 +204,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

@@ -109,6 +109,7 @@ function randomText() {
 function getHMRCode(file, id, src) {
     return `import { render, html, $, $$, setShouldSetReactivity } from "hydro-js";
   window.isHMR = true;
+  window.lastCalled = new Map();
   if (!window.eventsource${id}) {
     window.eventsource${id} = new EventSource("/hmr");
     window.eventsource${id}.addEventListener('error', (e) => {
@@ -156,15 +157,35 @@ function getHMRCode(file, id, src) {
             }
           }
         }
+
+        $$('link[rel="stylesheet"][href]').forEach(link => {
+          link.setAttribute("href", link.getAttribute("href") + "?v=" + String(Math.random().toFixed(4)).slice(2));
+        })
+        if (dataObj.html.includes("<script")) updateElem("script");
+        
         
         if (dataObj.file === \`${src}/index.html\`) {
           dispatchEvent(new Event("popstate"));
         }
       } else if (dataObj.file.endsWith(".css")) {
-        updateElem("link");
+        const now = performance.now();
+        if (!window.lastCalled.has(dataObj.file) || now - window.lastCalled.get(dataObj.file) > 100) {
+          $$('link[rel="stylesheet"][href]').forEach(link => {
+            link.setAttribute("href", link.getAttribute("href") + "?v=" + String(Math.random().toFixed(4)).slice(2));
+          })
+          window.lastCalled.set(dataObj.file, now)
+        }
       } else if (dataObj.file.endsWith(".js")) {
-        updateElem("script")
+        const now = performance.now();
+        if (!window.lastCalled.has(dataObj.file) || now - window.lastCalled.get(dataObj.file) > 100) {
+          $$('link[rel="stylesheet"][href]').forEach(link => {
+            link.setAttribute("href", link.getAttribute("href") + "?v=" + String(Math.random().toFixed(4)).slice(2));
+          })
+          updateElem("script");
+          window.lastCalled.set(dataObj.file, now)
+        }
       }
+      
 
       function updateElem(type) {
         const hmrId = "${id}";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-bundle",
-  "version": "6.0.1",
+  "version": "6.0.5",
   "description": "A very simple bundler for HTML SFC",
   "bin": "./dist/bundle.mjs",
   "scripts": {
@@ -36,11 +36,12 @@
     "chokidar": "^3.5.2",
     "critical": "^4.0.1",
     "cssnano": "^5.0.14",
-    "esbuild": "^0.14.8",
-    "fastify": "^3.25.2",
+    "esbuild": "^0.14.9",
+    "fastify": "^3.25.3",
     "fastify-static": "^4.5.0",
     "glob": "^7.2.0",
     "html-minifier-terser": "^6.1.0",
+    "hydro-js": "^1.5.3",
     "parse5": "^6.0.1",
     "postcss": "^8.4.5",
     "postcss-load-config": "^3.1.0"

package/src/bundle.mts

@@ -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]
@@ -243,12 +244,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`);
         }
       }
 

package/src/utils.mts

@@ -145,6 +145,7 @@ function randomText() {
 function getHMRCode(file: string, id: string, src: string) {
   return `import { render, html, $, $$, setShouldSetReactivity } from "hydro-js";
   window.isHMR = true;
+  window.lastCalled = new Map();
   if (!window.eventsource${id}) {
     window.eventsource${id} = new EventSource("/hmr");
     window.eventsource${id}.addEventListener('error', (e) => {
@@ -192,15 +193,35 @@ function getHMRCode(file: string, id: string, src: string) {
             }
           }
         }
+
+        $$('link[rel="stylesheet"][href]').forEach(link => {
+          link.setAttribute("href", link.getAttribute("href") + "?v=" + String(Math.random().toFixed(4)).slice(2));
+        })
+        if (dataObj.html.includes("<script")) updateElem("script");
+        
         
         if (dataObj.file === \`${src}/index.html\`) {
           dispatchEvent(new Event("popstate"));
         }
       } else if (dataObj.file.endsWith(".css")) {
-        updateElem("link");
+        const now = performance.now();
+        if (!window.lastCalled.has(dataObj.file) || now - window.lastCalled.get(dataObj.file) > 100) {
+          $$('link[rel="stylesheet"][href]').forEach(link => {
+            link.setAttribute("href", link.getAttribute("href") + "?v=" + String(Math.random().toFixed(4)).slice(2));
+          })
+          window.lastCalled.set(dataObj.file, now)
+        }
       } else if (dataObj.file.endsWith(".js")) {
-        updateElem("script")
+        const now = performance.now();
+        if (!window.lastCalled.has(dataObj.file) || now - window.lastCalled.get(dataObj.file) > 100) {
+          $$('link[rel="stylesheet"][href]').forEach(link => {
+            link.setAttribute("href", link.getAttribute("href") + "?v=" + String(Math.random().toFixed(4)).slice(2));
+          })
+          updateElem("script");
+          window.lastCalled.set(dataObj.file, now)
+        }
       }
+      
 
       function updateElem(type) {
         const hmrId = "${id}";