html-bundle 6.0.0 → 6.0.3

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
@@ -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

@@ -32,7 +32,7 @@ const execFilePromise = promisify(execFile);
 if (bundleConfig.deletePrev) {
     await rm(bundleConfig.build, { force: true, recursive: true });
 }
-glob(`${bundleConfig.src}/**/*.*`, build);
+glob(`${bundleConfig.src}/**/*`, build);
 async function build(err, files, firstRun = true) {
     if (err) {
         console.error(err);
@@ -95,12 +95,11 @@ async function build(err, files, firstRun = true) {
             });
         }
         const watcher = watch(bundleConfig.src);
-        let addCount = 0; // The add watcher will add all the files initially - do not rebuild them
         watcher.on("add", async (file) => {
-            if (addCount++ <= files.length || INLINE_BUNDLE_FILE.test(file)) {
+            file = String.raw `${file}`.replace(/\\/g, "/"); // glob and chokidar diff
+            if (files.includes(file) || INLINE_BUNDLE_FILE.test(file)) {
                 return;
             }
-            file = String.raw `${file}`.replace(/\\/g, "/"); // glob and chokidar diff
             await rebuild(file);
             console.log(`⚡ added ${file} to the build`);
         });
@@ -205,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.0",
+  "version": "6.0.3",
   "description": "A very simple bundler for HTML SFC",
   "bin": "./dist/bundle.mjs",
   "scripts": {
@@ -36,8 +36,8 @@
     "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",

package/src/bundle.mts

@@ -48,7 +48,7 @@ if (bundleConfig.deletePrev) {
   await rm(bundleConfig.build, { force: true, recursive: true });
 }
 
-glob(`${bundleConfig.src}/**/*.*`, build);
+glob(`${bundleConfig.src}/**/*`, build);
 
 async function build(err: any, files: string[], firstRun = true) {
   if (err) {
@@ -127,12 +127,11 @@ async function build(err: any, files: string[], firstRun = true) {
     }
 
     const watcher = watch(bundleConfig.src);
-    let addCount = 0; // The add watcher will add all the files initially - do not rebuild them
     watcher.on("add", async (file) => {
-      if (addCount++ <= files.length || INLINE_BUNDLE_FILE.test(file)) {
+      file = String.raw`${file}`.replace(/\\/g, "/"); // glob and chokidar diff
+      if (files.includes(file) || INLINE_BUNDLE_FILE.test(file)) {
         return;
       }
-      file = String.raw`${file}`.replace(/\\/g, "/"); // glob and chokidar diff
 
       await rebuild(file);
 
@@ -244,12 +243,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}";