npm - html-bundle - Versions diffs - 6.0.0-beta → 6.0.0 - Mend

html-bundle 6.0.0-beta → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md +22 -13
package/dist/bundle.mjs +33 -18
package/dist/{utils.js → utils.mjs} +52 -25
package/logo.jpg +0 -0
package/package.json +1 -1
package/src/bundle.mts +32 -18
package/src/{utils.ts → utils.mts} +49 -23

package/README.md CHANGED Viewed

@@ -1,19 +1,21 @@
 # html-bundle
+<p align="center">
+  <img src="./logo.jpg" style="width:500px;" />
+</p>
 A (primarily) zero-config bundler for HTML files. The idea is to use HTML as Single File Components, because HTML can already include `<style>` and `<script>` elements.
 ## Features
 - 🦾 TypeScript (reference it as .js or write inline TS)
 - 📦 Automatic Package Installation
-- 💨 HMR
+- 💨 HMR and automatic reconnect
 - ⚡ [ESBuild](https://github.com/evanw/esbuild)
 - 🦔 [Critical CSS](https://github.com/evanw/esbuild)
-- 💅 PostCSS and Tailwind CSS Support
+- 🚋 Watcher on PostCSS and Tailwind CSS and TS Config
 - 🛡️ Almost no need to restart
-![Demo](./example.gif)
 ## Installation and Usage
 ```properties
@@ -39,7 +41,7 @@ $ npm run build
 ## CLI
-`--hmr`: boots up a static server and enables Hot Module Replacement. **This generates a development build.**<br>
+`--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>
 `--handler`: path to your custom handler. Here, you can handle all non-supported files. You can get the filename via `process.argv[2]`.
@@ -52,6 +54,7 @@ Generate the config in the root and call it "bundle.config.js"
 **src:** input path. Default to "src"<br>
 **build:** output path. Defaults to "build"<br>
 **port:** For the HMR Server. Defaults to 5000<br>
+**deletePrev:** Whether to delelte the build folder. Defaults to true<br>
 **esbuild:** Your additional config<br>
 **html-minifier-terser:** Your additional config<br>
 **critical:** Your additional config<br>
@@ -76,13 +79,14 @@ Set `"jsxFactory": "h"` in `tsconfig.json` for JSX.
     <title>Example</title>
     <meta name="Description" content="Example for html-bundle" />
     <script type="module">
-      import { render, h } from "hydro-js";
+      import { render, h, reactive } from "hydro-js";
-      function Example() {
-        return <main id="app">Testing html-bundle</main>;
+      function Example({ name }) {
+        return <main id="app">Hi {name}</main>;
       }
-      render(<Example />, "#app");
+      const name = reactive("Tester");
+      render(<Example name={name} />, "#app");
     </script>
     <style>
       body {
@@ -100,7 +104,7 @@ Set `"jsxFactory": "h"` in `tsconfig.json` for JSX.
 ![Output](output.JPG)
-## Example Vue.js
+## Example Vue.js@next
 Set `"jsxFactory": "h"` in `tsconfig.json`.
@@ -136,7 +140,7 @@ Set `"jsxFactory": "h"` in `tsconfig.json`.
 ## Example React
-Set `"jsxFactory": "React.createElement"` in `tsconfig.json`.
+Set `"jsxFactory": "h"` in `tsconfig.json`.
 ```html
 <!DOCTYPE html>
@@ -149,6 +153,7 @@ Set `"jsxFactory": "React.createElement"` in `tsconfig.json`.
   <script type="module">
     import React, { useState } from "react";
     import { render } from "react-dom";
+    const h = React.createElement;
     function Example() {
       const [count, setCount] = useState(0);
@@ -161,10 +166,14 @@ Set `"jsxFactory": "React.createElement"` in `tsconfig.json`.
       );
     }
-    render(<Example />, document.getElementById("root"));
+    render(<Example />, document.getElementById("app"));
   </script>
   <body>
-    <div id="root"></div>
+    <div id="app"></div>
   </body>
 </html>
 ```
+### Demo
+![Demo](./example.gif)

package/dist/bundle.mjs CHANGED Viewed

@@ -12,7 +12,7 @@ import { watch } from "chokidar";
 import { serialize, parse, parseFragment } from "parse5";
 import { getTagName, findElements } from "@web/parse5-utils";
 import awaitSpawn from "await-spawn";
-import { fileCopy, createDefaultServer, getPostCSSConfig, getBuildPath, createDir, bundleConfig, serverSentEvents, addHMRCode, } from "./utils.js";
+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 isSecure = process.argv.includes("--secure") || bundleConfig.secure; // uses CSP for critical too
@@ -20,23 +20,25 @@ const handlerFile = process.argv.includes("--handler")
     ? process.argv[process.argv.indexOf("--handler") + 1]
     : bundleConfig.handler;
 process.env.NODE_ENV = isHMR ? "development" : "production"; // just in case other tools are using it
-const timer = performance.now();
+let timer = performance.now();
 let { plugins, options, file: postcssFile } = await getPostCSSConfig();
 let CSSprocessor = postcss(plugins);
 let fastify;
 const inlineFiles = new Set();
 const TEMPLATE_LITERAL_MINIFIER = /\n\s+/g;
 const INLINE_BUNDLE_FILE = /-bundle-\d+.tsx$/;
-const SUPPORTED_FILES = /\.(html|css|m?jsx?|m?tsx?)$/;
+const SUPPORTED_FILES = /\.(html|css|jsx?|tsx?)$/;
 const execFilePromise = promisify(execFile);
-await rm(bundleConfig.build, { force: true, recursive: true });
+if (bundleConfig.deletePrev) {
+    await rm(bundleConfig.build, { force: true, recursive: true });
+}
 glob(`${bundleConfig.src}/**/*.*`, build);
-async function build(err, files) {
+async function build(err, files, firstRun = true) {
     if (err) {
         console.error(err);
         process.exit(1);
     }
-    if (isHMR) {
+    if (isHMR && firstRun) {
         fastify = await createDefaultServer(isSecure);
         fastify.listen(bundleConfig.port);
         console.log(`💻 Sever listening on port ${bundleConfig.port}.`);
@@ -46,7 +48,8 @@ async function build(err, files) {
         if (!SUPPORTED_FILES.test(file)) {
             if (handlerFile) {
                 const { stdout } = await execFilePromise("node", [handlerFile, file]);
-                console.log("📋 Logging Handler: ", String(stdout));
+                if (String(stdout))
+                    console.log("📋 Logging Handler: ", String(stdout));
             }
             else {
                 await fileCopy(file);
@@ -77,14 +80,19 @@ async function build(err, files) {
         }
     }
     console.log(`🚀 Build finished in ${(performance.now() - timer).toFixed(2)}ms ✨`);
-    if (isHMR) {
+    if (isHMR && firstRun) {
         console.log(`⌛ Waiting for file changes ...`);
         if (postcssFile) {
             const postCSSWatcher = watch(postcssFile);
             const tailwindCSSWatcher = watch(postcssFile.replace("postcss", "tailwind")); // Assuming that the file ext is the same
+            const tsConfigWatcher = watch(postcssFile.split("\\").slice(0, -1).join("\\") + "\\tsconfig.json");
             const cssFiles = files.filter((file) => file.endsWith(".css"));
             postCSSWatcher.on("change", async () => await rebuildCSS(cssFiles, "postcss"));
             tailwindCSSWatcher.on("change", async () => await rebuildCSS(cssFiles, "tailwind"));
+            tsConfigWatcher.on("change", async () => {
+                timer = performance.now();
+                await build(null, files, false);
+            });
         }
         const watcher = watch(bundleConfig.src);
         let addCount = 0; // The add watcher will add all the files initially - do not rebuild them
@@ -126,7 +134,7 @@ async function build(err, files) {
             let html;
             if (file.endsWith(".html")) {
                 // To refill the inlineFiles needed to build JS
-                for (const htmlFile of files.filter((file) => file.endsWith("html"))) {
+                for (const htmlFile of files.filter((file) => file.endsWith(".html"))) {
                     await writeInlineScripts(htmlFile);
                 }
                 await minifyCode();
@@ -138,14 +146,16 @@ async function build(err, files) {
                 }
                 html = await minifyHTML(file, getBuildPath(file));
             }
-            else if (/(m?jsx?|m?tsx?)$/.test(file)) {
+            else if (/\.(jsx?|tsx?)$/.test(file)) {
+                inlineFiles.add(file);
                 await minifyCode();
             }
             else {
                 const { stdout } = await execFilePromise("node", [handlerFile, file]);
-                console.log("📋 Logging Handler: ", String(stdout));
+                if (String(stdout))
+                    console.log("📋 Logging Handler: ", String(stdout));
             }
-            serverSentEvents({ file, html });
+            serverSentEvents?.({ file, html });
         }
     }
 }
@@ -173,7 +183,7 @@ async function minifyCode() {
             sourcemap: isHMR,
             splitting: true,
             define: {
-                "process.env.NODE_ENV": process.env.NODE_ENV,
+                "process.env.NODE_ENV": `"${process.env.NODE_ENV}"`,
             },
             loader: { ".js": "jsx", ".ts": "tsx" },
             bundle: true,
@@ -283,11 +293,16 @@ async function minifyHTML(file, buildFile) {
     }
     fileText = serialize(DOM);
     // Minify HTML
-    fileText = await minify(fileText, {
-        collapseWhitespace: true,
-        removeComments: true,
-        ...bundleConfig["html-minifier-terser"],
-    });
+    try {
+        fileText = await minify(fileText, {
+            collapseWhitespace: true,
+            removeComments: true,
+            ...bundleConfig["html-minifier-terser"],
+        });
+    }
+    catch (e) {
+        console.error(e);
+    }
     if (!isCritical) {
         await writeFile(buildFile, fileText);
         return fileText;

package/dist/{utils.js → utils.mjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { access, copyFile, mkdir, readFile } from "fs/promises";
+import { copyFile, mkdir, readFile } from "fs/promises";
 import path from "path";
 import Fastify from "fastify";
 import fastifyStatic from "fastify-static";
@@ -40,20 +40,25 @@ export async function createDefaultServer(isSecure) {
     fastify.register(fastifyStatic, {
         root: path.join(process.cwd(), bundleConfig.build),
     });
-    fastify.get("/events", (_req, reply) => {
+    fastify.get("/hmr", (_req, reply) => {
         reply.raw.setHeader("Content-Type", "text/event-stream");
         reply.raw.setHeader("Cache-Control", "no-cache");
         !isSecure && reply.raw.setHeader("Connection", "keep-alive");
         CONNECTIONS.push(reply.raw);
-        serverSentEvents = (data) => CONNECTIONS.forEach((rep) => {
-            rep.write(`data: ${JSON.stringify(data)}\n\n`);
-        });
+        serverSentEvents = (data) => {
+            if (/\.(jsx?|tsx?)$/.test(data.file)) {
+                data.file = data.file.replace(".ts", ".js").replace(".jsx", ".js");
+            }
+            CONNECTIONS.forEach((rep) => {
+                rep.write(`data: ${JSON.stringify(data)}\n\n`);
+            });
+        };
     });
     return fastify;
 }
-export function getPostCSSConfig() {
+export async function getPostCSSConfig() {
     try {
-        return postcssrc({});
+        return await postcssrc({});
     }
     catch {
         return { plugins: [cssnano], options: {}, file: "" };
@@ -67,15 +72,14 @@ async function getBundleConfig() {
         esbuild: {},
         "html-minifier-terser": {},
         critical: {},
+        deletePrev: true,
     };
     try {
-        const cfgPath = path.resolve(process.cwd(), "bundle.config.cjs");
-        await access(cfgPath, 0);
+        const cfgPath = path.resolve(process.cwd(), "bundle.config.js");
         const config = await import(`file://${cfgPath}`);
         return { ...base, ...config.default };
     }
     catch {
-        console.log("catch");
         return base;
     }
 }
@@ -84,7 +88,7 @@ export function addHMRCode(html, file, ast) {
     if (!htmlIdMap.has(file)) {
         htmlIdMap.set(file, randomText());
     }
-    const script = createScript({ type: "module" }, getHMRCode(file, htmlIdMap.get(file), bundleConfig.src, bundleConfig.build));
+    const script = createScript({ type: "module" }, getHMRCode(file, htmlIdMap.get(file), bundleConfig.src));
     let DOM;
     if (html.includes("<!DOCTYPE html>") || html.includes("<html")) {
         DOM = ast || parse(html);
@@ -102,22 +106,35 @@ export function addHMRCode(html, file, ast) {
 function randomText() {
     return Math.random().toString(32).slice(2);
 }
-function getHMRCode(file, id, src, build) {
-    return `import { render, html, $, $$, setInsertDiffing } from "hydro-js";
+function getHMRCode(file, id, src) {
+    return `import { render, html, $, $$, setShouldSetReactivity } from "hydro-js";
+  window.isHMR = true;
   if (!window.eventsource${id}) {
-    setInsertDiffing(true);
-    window.eventsource${id} = new EventSource("/events");
+    window.eventsource${id} = new EventSource("/hmr");
+    window.eventsource${id}.addEventListener('error', (e) => {
+      setTimeout(() => {
+        window.eventsource${id} = new EventSource("/hmr");
+      }, 1000);
+    });
     window.eventsource${id}.addEventListener("message", ({ data }) => {
       const dataObj = JSON.parse(data);
       const file = "${file}";
       if (file === dataObj.file && "html" in dataObj) {
+        let newHTML;
+        try {
+          newHTML = html\`\${dataObj.html}\`
+        } catch {
+          setShouldSetReactivity(false);
+          newHTML = html\`\${dataObj.html}\`
+          setShouldSetReactivity(true);
+        }
         if (dataObj.html.startsWith('<!DOCTYPE html>') || dataObj.html.startsWith('<html')) {
           document.head.remove(); // Don't try to diff the head – just re-run the scripts
-          render(html\`\${dataObj.html}\`, document.documentElement);
+          render(newHTML, document.documentElement, false);
         } else {
           const hmrID = "${id}";
-          const newHTML = html\`\${dataObj.html}\`;
           const hmrElems = Array.from(newHTML.childNodes);
           const hmrWheres = Array.from($$(\`[data-hmr="\${hmrID}"]\`))
           // render new elements for old elements. Then, remove rest old elements and add add new elements after the last old one
@@ -140,10 +157,12 @@ function getHMRCode(file, id, src, build) {
           }
         }
-        setTimeout(() => dispatchEvent(new Event("popstate")));
-      } else if (dataObj.file.endsWith("css")) {
+        if (dataObj.file === \`${src}/index.html\`) {
+          dispatchEvent(new Event("popstate"));
+        }
+      } else if (dataObj.file.endsWith(".css")) {
         updateElem("link");
-      } else if (dataObj.file.endsWith("js")) {
+      } else if (dataObj.file.endsWith(".js")) {
         updateElem("script")
       }
@@ -154,14 +173,22 @@ function getHMRCode(file, id, src, build) {
         const elem = $(\`[data-hmr="\${hmrId}"] \${type}[\${attr}^="\${noSrcFile}"]\`); // could be $(\`\${type}[data-hmr="\${hmrId}"][\${attr}^="\${noSrcFile}"]\`) ?
         if (elem) {
-          const clone = document.createElement(type);
-          for (const key of elem.getAttributeNames()) {
-            clone.setAttribute(key, elem.getAttribute(key));
+          updateOne(type, attr, elem)
+        } else {
+          for(const e of $$(\`[data-hmr="\${hmrId}"] \${type}\`)) {
+            updateOne(type, attr, e);
           }
-          clone.setAttribute(attr, elem.getAttribute(attr) + "?v=" + String(Math.random().toFixed(4)).slice(2));
-          render(clone, elem, false);
         }
       }
+      function updateOne(type, attr, elem) {
+        const clone = document.createElement(type);
+        for (const key of elem.getAttributeNames()) {
+          clone.setAttribute(key, elem.getAttribute(key));
+        }
+        clone.setAttribute(attr, elem.getAttribute(attr) + "?v=" + String(Math.random().toFixed(4)).slice(2));
+        render(clone, elem, false);
+      }
     });
   }
 `;

package/logo.jpg ADDED Viewed

Binary file

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "html-bundle",
-  "version": "6.0.0-beta",
+  "version": "6.0.0",
   "description": "A very simple bundler for HTML SFC",
   "bin": "./dist/bundle.mjs",
   "scripts": {

package/src/bundle.mts CHANGED Viewed

@@ -24,7 +24,7 @@ import {
   bundleConfig,
   serverSentEvents,
   addHMRCode,
-} from "./utils.js";
+} from "./utils.mjs";
 const isHMR = process.argv.includes("--hmr") || bundleConfig.hmr;
 const isCritical = process.argv.includes("--critical") || bundleConfig.critical;
@@ -34,27 +34,29 @@ const handlerFile = process.argv.includes("--handler")
   : bundleConfig.handler;
 process.env.NODE_ENV = isHMR ? "development" : "production"; // just in case other tools are using it
-const timer = performance.now();
+let timer = performance.now();
 let { plugins, options, file: postcssFile } = await getPostCSSConfig();
 let CSSprocessor = postcss(plugins as AcceptedPlugin[]);
 let fastify;
 const inlineFiles = new Set<string>();
 const TEMPLATE_LITERAL_MINIFIER = /\n\s+/g;
 const INLINE_BUNDLE_FILE = /-bundle-\d+.tsx$/;
-const SUPPORTED_FILES = /\.(html|css|m?jsx?|m?tsx?)$/;
+const SUPPORTED_FILES = /\.(html|css|jsx?|tsx?)$/;
 const execFilePromise = promisify(execFile);
-await rm(bundleConfig.build, { force: true, recursive: true });
+if (bundleConfig.deletePrev) {
+  await rm(bundleConfig.build, { force: true, recursive: true });
+}
 glob(`${bundleConfig.src}/**/*.*`, build);
-async function build(err: any, files: string[]) {
+async function build(err: any, files: string[], firstRun = true) {
   if (err) {
     console.error(err);
     process.exit(1);
   }
-  if (isHMR) {
+  if (isHMR && firstRun) {
     fastify = await createDefaultServer(isSecure);
     fastify.listen(bundleConfig.port);
     console.log(`💻 Sever listening on port ${bundleConfig.port}.`);
@@ -66,7 +68,7 @@ async function build(err: any, files: string[]) {
     if (!SUPPORTED_FILES.test(file)) {
       if (handlerFile) {
         const { stdout } = await execFilePromise("node", [handlerFile, file]);
-        console.log("📋 Logging Handler: ", String(stdout));
+        if (String(stdout)) console.log("📋 Logging Handler: ", String(stdout));
       } else {
         await fileCopy(file);
       }
@@ -97,7 +99,7 @@ async function build(err: any, files: string[]) {
     `🚀 Build finished in ${(performance.now() - timer).toFixed(2)}ms ✨`
   );
-  if (isHMR) {
+  if (isHMR && firstRun) {
     console.log(`⌛ Waiting for file changes ...`);
     if (postcssFile) {
@@ -105,6 +107,9 @@ async function build(err: any, files: string[]) {
       const tailwindCSSWatcher = watch(
         postcssFile.replace("postcss", "tailwind")
       ); // Assuming that the file ext is the same
+      const tsConfigWatcher = watch(
+        postcssFile.split("\\").slice(0, -1).join("\\") + "\\tsconfig.json"
+      );
       const cssFiles = files.filter((file) => file.endsWith(".css"));
       postCSSWatcher.on(
@@ -115,6 +120,10 @@ async function build(err: any, files: string[]) {
         "change",
         async () => await rebuildCSS(cssFiles, "tailwind")
       );
+      tsConfigWatcher.on("change", async () => {
+        timer = performance.now();
+        await build(null, files, false);
+      });
     }
     const watcher = watch(bundleConfig.src);
@@ -165,7 +174,7 @@ async function build(err: any, files: string[]) {
       let html;
       if (file.endsWith(".html")) {
         // To refill the inlineFiles needed to build JS
-        for (const htmlFile of files.filter((file) => file.endsWith("html"))) {
+        for (const htmlFile of files.filter((file) => file.endsWith(".html"))) {
           await writeInlineScripts(htmlFile);
         }
         await minifyCode();
@@ -176,14 +185,15 @@ async function build(err: any, files: string[]) {
           }
         }
         html = await minifyHTML(file, getBuildPath(file));
-      } else if (/(m?jsx?|m?tsx?)$/.test(file)) {
+      } else if (/\.(jsx?|tsx?)$/.test(file)) {
+        inlineFiles.add(file);
         await minifyCode();
       } else {
         const { stdout } = await execFilePromise("node", [handlerFile, file]);
-        console.log("📋 Logging Handler: ", String(stdout));
+        if (String(stdout)) console.log("📋 Logging Handler: ", String(stdout));
       }
-      serverSentEvents!({ file, html });
+      serverSentEvents?.({ file, html });
     }
   }
 }
@@ -212,7 +222,7 @@ async function minifyCode(): Promise<unknown> {
       sourcemap: isHMR,
       splitting: true,
       define: {
-        "process.env.NODE_ENV": process.env.NODE_ENV,
+        "process.env.NODE_ENV": `"${process.env.NODE_ENV}"`,
       },
       loader: { ".js": "jsx", ".ts": "tsx" },
       bundle: true,
@@ -336,11 +346,15 @@ async function minifyHTML(file: string, buildFile: string) {
   fileText = serialize(DOM);
   // Minify HTML
-  fileText = await minify(fileText, {
-    collapseWhitespace: true,
-    removeComments: true,
-    ...bundleConfig["html-minifier-terser"],
-  });
+  try {
+    fileText = await minify(fileText, {
+      collapseWhitespace: true,
+      removeComments: true,
+      ...bundleConfig["html-minifier-terser"],
+    });
+  } catch (e) {
+    console.error(e);
+  }
   if (!isCritical) {
     await writeFile(buildFile, fileText);

package/src/{utils.ts → utils.mts} RENAMED Viewed

@@ -1,5 +1,5 @@
 import type { FastifyServerOptions } from "fastify";
-import { access, copyFile, mkdir, readFile } from "fs/promises";
+import { copyFile, mkdir, readFile } from "fs/promises";
 import path from "path";
 import Fastify from "fastify";
 import fastifyStatic from "fastify-static";
@@ -58,24 +58,28 @@ export async function createDefaultServer(isSecure: boolean) {
   fastify.register(fastifyStatic, {
     root: path.join(process.cwd(), bundleConfig.build),
   });
-  fastify.get("/events", (_req, reply) => {
+  fastify.get("/hmr", (_req, reply) => {
     reply.raw.setHeader("Content-Type", "text/event-stream");
     reply.raw.setHeader("Cache-Control", "no-cache");
     !isSecure && reply.raw.setHeader("Connection", "keep-alive");
     CONNECTIONS.push(reply.raw);
-    serverSentEvents = (data) =>
+    serverSentEvents = (data) => {
+      if (/\.(jsx?|tsx?)$/.test(data.file)) {
+        data.file = data.file.replace(".ts", ".js").replace(".jsx", ".js");
+      }
       CONNECTIONS.forEach((rep) => {
         rep.write(`data: ${JSON.stringify(data)}\n\n`);
       });
+    };
   });
   return fastify;
 }
-export function getPostCSSConfig() {
+export async function getPostCSSConfig() {
   try {
-    return postcssrc({});
+    return await postcssrc({});
   } catch {
     return { plugins: [cssnano], options: {}, file: "" };
   }
@@ -89,15 +93,14 @@ async function getBundleConfig() {
     esbuild: {},
     "html-minifier-terser": {},
     critical: {},
+    deletePrev: true,
   };
   try {
-    const cfgPath = path.resolve(process.cwd(), "bundle.config.cjs");
-    await access(cfgPath, 0);
+    const cfgPath = path.resolve(process.cwd(), "bundle.config.js");
     const config = await import(`file://${cfgPath}`);
     return { ...base, ...config.default };
   } catch {
-    console.log("catch");
     return base;
   }
 }
@@ -114,7 +117,7 @@ export function addHMRCode(
   const script = createScript(
     { type: "module" },
-    getHMRCode(file, htmlIdMap.get(file), bundleConfig.src, bundleConfig.build)
+    getHMRCode(file, htmlIdMap.get(file), bundleConfig.src)
   );
   let DOM;
@@ -139,22 +142,35 @@ function randomText() {
   return Math.random().toString(32).slice(2);
 }
-function getHMRCode(file: string, id: string, src: string, build: string) {
-  return `import { render, html, $, $$, setInsertDiffing } from "hydro-js";
+function getHMRCode(file: string, id: string, src: string) {
+  return `import { render, html, $, $$, setShouldSetReactivity } from "hydro-js";
+  window.isHMR = true;
   if (!window.eventsource${id}) {
-    setInsertDiffing(true);
-    window.eventsource${id} = new EventSource("/events");
+    window.eventsource${id} = new EventSource("/hmr");
+    window.eventsource${id}.addEventListener('error', (e) => {
+      setTimeout(() => {
+        window.eventsource${id} = new EventSource("/hmr");
+      }, 1000);
+    });
     window.eventsource${id}.addEventListener("message", ({ data }) => {
       const dataObj = JSON.parse(data);
       const file = "${file}";
       if (file === dataObj.file && "html" in dataObj) {
+        let newHTML;
+        try {
+          newHTML = html\`\${dataObj.html}\`
+        } catch {
+          setShouldSetReactivity(false);
+          newHTML = html\`\${dataObj.html}\`
+          setShouldSetReactivity(true);
+        }
         if (dataObj.html.startsWith('<!DOCTYPE html>') || dataObj.html.startsWith('<html')) {
           document.head.remove(); // Don't try to diff the head – just re-run the scripts
-          render(html\`\${dataObj.html}\`, document.documentElement);
+          render(newHTML, document.documentElement, false);
         } else {
           const hmrID = "${id}";
-          const newHTML = html\`\${dataObj.html}\`;
           const hmrElems = Array.from(newHTML.childNodes);
           const hmrWheres = Array.from($$(\`[data-hmr="\${hmrID}"]\`))
           // render new elements for old elements. Then, remove rest old elements and add add new elements after the last old one
@@ -177,10 +193,12 @@ function getHMRCode(file: string, id: string, src: string, build: string) {
           }
         }
-        setTimeout(() => dispatchEvent(new Event("popstate")));
-      } else if (dataObj.file.endsWith("css")) {
+        if (dataObj.file === \`${src}/index.html\`) {
+          dispatchEvent(new Event("popstate"));
+        }
+      } else if (dataObj.file.endsWith(".css")) {
         updateElem("link");
-      } else if (dataObj.file.endsWith("js")) {
+      } else if (dataObj.file.endsWith(".js")) {
         updateElem("script")
       }
@@ -191,14 +209,22 @@ function getHMRCode(file: string, id: string, src: string, build: string) {
         const elem = $(\`[data-hmr="\${hmrId}"] \${type}[\${attr}^="\${noSrcFile}"]\`); // could be $(\`\${type}[data-hmr="\${hmrId}"][\${attr}^="\${noSrcFile}"]\`) ?
         if (elem) {
-          const clone = document.createElement(type);
-          for (const key of elem.getAttributeNames()) {
-            clone.setAttribute(key, elem.getAttribute(key));
+          updateOne(type, attr, elem)
+        } else {
+          for(const e of $$(\`[data-hmr="\${hmrId}"] \${type}\`)) {
+            updateOne(type, attr, e);
           }
-          clone.setAttribute(attr, elem.getAttribute(attr) + "?v=" + String(Math.random().toFixed(4)).slice(2));
-          render(clone, elem, false);
         }
       }
+      function updateOne(type, attr, elem) {
+        const clone = document.createElement(type);
+        for (const key of elem.getAttributeNames()) {
+          clone.setAttribute(key, elem.getAttribute(key));
+        }
+        clone.setAttribute(attr, elem.getAttribute(attr) + "?v=" + String(Math.random().toFixed(4)).slice(2));
+        render(clone, elem, false);
+      }
     });
   }
 `;