html-bundle 6.0.1 → 6.0.2

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/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,37 @@ 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");
+        
         
+        console.log("dispatch")
+        console.log(dataObj.file)
         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.2",
   "description": "A very simple bundler for HTML SFC",
   "bin": "./dist/bundle.mjs",
   "scripts": {

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}";