html-bundle 6.3.0 → 6.3.1

package/dist/utils.mjs

@@ -19,23 +19,31 @@ export function createDir(file) {
 export function getBuildPath(file) {
     return file.replace(`${bundleConfig.src}/`, `${bundleConfig.build}/`);
 }
-const CONNECTIONS = []; // In order to send the HMR information
+const CONNECTIONS = new Set(); // In order to send the HMR information
 export let serverSentEvents;
 export async function createDefaultServer(isSecure) {
     const router = express.Router();
     const app = express();
     app.use(router);
     app.use(express.static(path.join(process.cwd(), bundleConfig.build)));
-    router.get("/hmr", (_req, reply) => {
+    router.get("/hmr", (req, reply) => {
         reply.setHeader("Content-Type", "text/event-stream");
         reply.setHeader("Cache-Control", "no-cache");
         !isSecure && reply.setHeader("Connection", "keep-alive");
-        CONNECTIONS.push(reply);
+        reply.flushHeaders();
+        CONNECTIONS.add(reply);
+        req.on("close", () => {
+            CONNECTIONS.delete(reply);
+        });
         serverSentEvents = (data) => {
             if (/\.(jsx?|tsx?)$/.test(data.file)) {
                 data.file = data.file.replace(".ts", ".js").replace(".jsx", ".js");
             }
             CONNECTIONS.forEach((rep) => {
+                if (rep.destroyed || rep.writableEnded) {
+                    CONNECTIONS.delete(rep);
+                    return;
+                }
                 rep.write(`data: ${JSON.stringify(data)}\n\n`);
             });
         };
@@ -118,14 +126,50 @@ 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) => {
-      setTimeout(() => {
-        window.eventsource${id} = new EventSource("/hmr");
-      }, 1000);
+  window.htmlBundleHMRConnections ||= new Map();
+  window.htmlBundleHMRActiveId = "${id}";
+  let shouldReconnect = true;
+  let reconnectTimer;
+
+  for (const [hmrId, eventSource] of window.htmlBundleHMRConnections) {
+    if (hmrId !== "${id}") {
+      eventSource.close();
+      window.htmlBundleHMRConnections.delete(hmrId);
+      delete window["eventsource" + hmrId];
+    }
+  }
+
+  function closeEventSource() {
+    const eventSource = window.eventsource${id};
+    if (eventSource) {
+      eventSource.close();
+      window.htmlBundleHMRConnections.delete("${id}");
+      delete window.eventsource${id};
+    }
+  }
+
+  function connectEventSource() {
+    closeEventSource();
+    shouldReconnect = true;
+
+    const eventSource = new EventSource("/hmr");
+    window.eventsource${id} = eventSource;
+    window.htmlBundleHMRConnections.set("${id}", eventSource);
+
+    eventSource.addEventListener('error', () => {
+      eventSource.close();
+      if (window.eventsource${id} === eventSource) {
+        window.htmlBundleHMRConnections.delete("${id}");
+        delete window.eventsource${id};
+      }
+
+      if (shouldReconnect && window.htmlBundleHMRActiveId === "${id}") {
+        clearTimeout(reconnectTimer);
+        reconnectTimer = setTimeout(connectEventSource, 1000);
+      }
     });
-    window.eventsource${id}.addEventListener("message", ({ data }) => {
+
+    eventSource.addEventListener("message", ({ data }) => {
       if (window.lastScroll == null) {  
         window.lastScroll = window.scrollY;
       }
@@ -231,5 +275,18 @@ function getHMRCode(file, id, src) {
       }
     });
   }
+
+  window.addEventListener("pagehide", () => {
+    shouldReconnect = false;
+    clearTimeout(reconnectTimer);
+    if (window.htmlBundleHMRActiveId === "${id}") {
+      delete window.htmlBundleHMRActiveId;
+    }
+    closeEventSource();
+  }, { once: true });
+
+  if (!window.eventsource${id}) {
+    connectEventSource();
+  }
 `;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-bundle",
-  "version": "6.3.0",
+  "version": "6.3.1",
   "description": "A very simple bundler for HTML SFC",
   "bin": "./dist/bundle.mjs",
   "main": "./dist/bundle.mjs",
@@ -11,7 +11,7 @@
   },
   "types": "./dist/bundle.d.mts",
   "scripts": {
-    "start": "tsc",
+    "start": "tsc && node -e \"require('fs').chmodSync('dist/bundle.mjs', 0o755)\"",
     "test": "npm run start && node --test tests/*.test.mjs",
     "update": "npx npm-check-updates -u && npx typesync && npm i && npm outdated"
   },

package/src/utils.mts

@@ -32,28 +32,39 @@ export function getBuildPath(file: string) {
   return file.replace(`${bundleConfig.src}/`, `${bundleConfig.build}/`);
 }
 
-const CONNECTIONS: Array<any> = []; // In order to send the HMR information
+const CONNECTIONS = new Set<any>(); // In order to send the HMR information
 export let serverSentEvents:
   | undefined
   | (({ file, html }: { file: string; html?: string }) => void);
 export async function createDefaultServer(
-  isSecure: boolean
+  isSecure: boolean,
 ): Promise<[Router, Server | HTTPSServer]> {
   const router = express.Router();
   const app = express();
   app.use(router);
   app.use(express.static(path.join(process.cwd(), bundleConfig.build)));
 
-  router.get("/hmr", (_req, reply) => {
+  router.get("/hmr", (req, reply) => {
     reply.setHeader("Content-Type", "text/event-stream");
     reply.setHeader("Cache-Control", "no-cache");
     !isSecure && reply.setHeader("Connection", "keep-alive");
-    CONNECTIONS.push(reply);
+    reply.flushHeaders();
+
+    CONNECTIONS.add(reply);
+    req.on("close", () => {
+      CONNECTIONS.delete(reply);
+    });
+
     serverSentEvents = (data) => {
       if (/\.(jsx?|tsx?)$/.test(data.file)) {
         data.file = data.file.replace(".ts", ".js").replace(".jsx", ".js");
       }
       CONNECTIONS.forEach((rep) => {
+        if (rep.destroyed || rep.writableEnded) {
+          CONNECTIONS.delete(rep);
+          return;
+        }
+
         rep.write(`data: ${JSON.stringify(data)}\n\n`);
       });
     };
@@ -65,7 +76,7 @@ export async function createDefaultServer(
       path.join(process.cwd(), bundleConfig.build, "index.html"),
       {
         encoding: "utf-8",
-      }
+      },
     );
     res.send(file);
   });
@@ -82,7 +93,7 @@ export async function createDefaultServer(
               bundleConfig.cert ||
               (await readFile(path.join(process.cwd(), "localhost.pem"))),
           },
-          app
+          app,
         )
       : http.createServer({}, app),
   ];
@@ -125,7 +136,7 @@ const htmlIdMap = new Map();
 export function addHMRCode(
   html: string,
   file: string,
-  ast?: ReturnType<typeof parse | typeof parseFragment>
+  ast?: ReturnType<typeof parse | typeof parseFragment>,
 ) {
   if (!htmlIdMap.has(file)) {
     htmlIdMap.set(file, randomText());
@@ -133,7 +144,7 @@ export function addHMRCode(
 
   const script = createScript(
     { type: "module" },
-    getHMRCode(file, htmlIdMap.get(file), bundleConfig.src)
+    getHMRCode(file, htmlIdMap.get(file), bundleConfig.src),
   );
 
   let DOM;
@@ -148,7 +159,7 @@ export function addHMRCode(
 
   //@ts-ignore
   DOM.childNodes.forEach((node) =>
-    node.attrs?.push({ name: "data-hmr", value: htmlIdMap.get(file) })
+    node.attrs?.push({ name: "data-hmr", value: htmlIdMap.get(file) }),
   );
 
   return serialize(DOM as any);
@@ -162,14 +173,50 @@ 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) => {
-      setTimeout(() => {
-        window.eventsource${id} = new EventSource("/hmr");
-      }, 1000);
+  window.htmlBundleHMRConnections ||= new Map();
+  window.htmlBundleHMRActiveId = "${id}";
+  let shouldReconnect = true;
+  let reconnectTimer;
+
+  for (const [hmrId, eventSource] of window.htmlBundleHMRConnections) {
+    if (hmrId !== "${id}") {
+      eventSource.close();
+      window.htmlBundleHMRConnections.delete(hmrId);
+      delete window["eventsource" + hmrId];
+    }
+  }
+
+  function closeEventSource() {
+    const eventSource = window.eventsource${id};
+    if (eventSource) {
+      eventSource.close();
+      window.htmlBundleHMRConnections.delete("${id}");
+      delete window.eventsource${id};
+    }
+  }
+
+  function connectEventSource() {
+    closeEventSource();
+    shouldReconnect = true;
+
+    const eventSource = new EventSource("/hmr");
+    window.eventsource${id} = eventSource;
+    window.htmlBundleHMRConnections.set("${id}", eventSource);
+
+    eventSource.addEventListener('error', () => {
+      eventSource.close();
+      if (window.eventsource${id} === eventSource) {
+        window.htmlBundleHMRConnections.delete("${id}");
+        delete window.eventsource${id};
+      }
+
+      if (shouldReconnect && window.htmlBundleHMRActiveId === "${id}") {
+        clearTimeout(reconnectTimer);
+        reconnectTimer = setTimeout(connectEventSource, 1000);
+      }
     });
-    window.eventsource${id}.addEventListener("message", ({ data }) => {
+
+    eventSource.addEventListener("message", ({ data }) => {
       if (window.lastScroll == null) {  
         window.lastScroll = window.scrollY;
       }
@@ -275,5 +322,18 @@ function getHMRCode(file: string, id: string, src: string) {
       }
     });
   }
+
+  window.addEventListener("pagehide", () => {
+    shouldReconnect = false;
+    clearTimeout(reconnectTimer);
+    if (window.htmlBundleHMRActiveId === "${id}") {
+      delete window.htmlBundleHMRActiveId;
+    }
+    closeEventSource();
+  }, { once: true });
+
+  if (!window.eventsource${id}) {
+    connectEventSource();
+  }
 `;
 }

package/tests/bundle.test.mjs

@@ -91,6 +91,12 @@ test("addHMRCode injects stable HMR wiring", async () => {
 
   assert.match(fullDocument, /<script type="module">/);
   assert.match(fullDocument, /new EventSource\("\/hmr"\)/);
+  assert.match(
+    fullDocument,
+    /window\.htmlBundleHMRConnections \|\|= new Map\(\)/,
+  );
+  assert.match(fullDocument, /window\.addEventListener\("pagehide"/);
+  assert.match(fullDocument, /eventSource\.close\(\)/);
   assert.match(fullDocument, /data-hmr="[^"]+"/);
   assert.ok(
     fullDocument.indexOf("<head>") <
@@ -99,6 +105,7 @@ test("addHMRCode injects stable HMR wiring", async () => {
 
   assert.match(fragment, /^<main data-hmr="[^"]+">Hi<\/main>/);
   assert.match(fragment, /new EventSource\("\/hmr"\)/);
+  assert.match(fragment, /window\.htmlBundleHMRActiveId ===/);
 });
 
 test("getBuildPath maps src paths into the build directory", async () => {