npm - html-bundle - Versions diffs - 6.0.1-beta → 6.0.4 - Mend

html-bundle 6.0.1-beta → 6.0.4

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 (10) hide show

package/README.md CHANGED Viewed

@@ -1,17 +1,23 @@
 # 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
 ![Demo](./example.gif)
 ## Installation and Usage
@@ -39,7 +45,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 +58,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 +83,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 {
@@ -96,11 +104,7 @@ Set `"jsxFactory": "h"` in `tsconfig.json` for JSX.
 </html>
 ```
-### Output
-![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,10 @@ 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>
 ```

package/dist/bundle.mjs CHANGED Viewed

@@ -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 });
-glob(`${bundleConfig.src}/**/*.*`, build);
-async function build(err, files) {
+if (bundleConfig.deletePrev) {
+    await rm(bundleConfig.build, { force: true, recursive: true });
+}
+glob(`${bundleConfig.src}/**/*`, build);
+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,22 +80,26 @@ 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
         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`);
         });
@@ -126,7 +133,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 +145,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 +182,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,
@@ -195,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) {
@@ -283,11 +292,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.mjs CHANGED Viewed

@@ -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,6 +72,7 @@ async function getBundleConfig() {
         esbuild: {},
         "html-minifier-terser": {},
         critical: {},
+        deletePrev: true,
     };
     try {
         const cfgPath = path.resolve(process.cwd(), "bundle.config.js");
@@ -101,21 +107,35 @@ function randomText() {
     return Math.random().toString(32).slice(2);
 }
 function getHMRCode(file, id, src) {
-    return `import { render, html, $, $$, setInsertDiffing } from "hydro-js";
+    return `import { render, html, $, $$, setShouldSetReactivity } from "hydro-js";
+  window.isHMR = true;
+  window.lastCalled = new Map();
   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
@@ -137,13 +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");
-        setTimeout(() => dispatchEvent(new Event("popstate")));
-      } else if (dataObj.file.endsWith("css")) {
-        updateElem("link");
-      } else if (dataObj.file.endsWith("js")) {
-        updateElem("script")
+        if (dataObj.file === \`${src}/index.html\`) {
+          dispatchEvent(new Event("popstate"));
+        }
+      } else if (dataObj.file.endsWith(".css")) {
+        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")) {
+        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}";
@@ -152,14 +194,22 @@ function getHMRCode(file, id, src) {
         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/example.gif CHANGED Viewed

Binary file

package/logo.jpg ADDED Viewed

Binary file

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "html-bundle",
-  "version": "6.0.1-beta",
+  "version": "6.0.4",
   "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 CHANGED Viewed

@@ -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);
+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,15 +120,18 @@ 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);
-    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);
@@ -165,7 +173,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 +184,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 +221,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,
@@ -234,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`);
         }
       }
@@ -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.mts CHANGED Viewed

@@ -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,6 +93,7 @@ async function getBundleConfig() {
     esbuild: {},
     "html-minifier-terser": {},
     critical: {},
+    deletePrev: true,
   };
   try {
@@ -138,21 +143,35 @@ function randomText() {
 }
 function getHMRCode(file: string, id: string, src: string) {
-  return `import { render, html, $, $$, setInsertDiffing } from "hydro-js";
+  return `import { render, html, $, $$, setShouldSetReactivity } from "hydro-js";
+  window.isHMR = true;
+  window.lastCalled = new Map();
   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
@@ -174,13 +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");
-        setTimeout(() => dispatchEvent(new Event("popstate")));
-      } else if (dataObj.file.endsWith("css")) {
-        updateElem("link");
-      } else if (dataObj.file.endsWith("js")) {
-        updateElem("script")
+        if (dataObj.file === \`${src}/index.html\`) {
+          dispatchEvent(new Event("popstate"));
+        }
+      } else if (dataObj.file.endsWith(".css")) {
+        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")) {
+        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}";
@@ -189,14 +230,22 @@ function getHMRCode(file: string, id: string, src: 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);
+      }
     });
   }
 `;

package/dist/utils.js DELETED Viewed

@@ -1,168 +0,0 @@
-import { access, copyFile, mkdir, readFile } from "fs/promises";
-import path from "path";
-import Fastify from "fastify";
-import fastifyStatic from "fastify-static";
-import postcssrc from "postcss-load-config";
-import cssnano from "cssnano";
-import { parse, parseFragment, serialize } from "parse5";
-import { createScript, getTagName, findElement, appendChild, } from "@web/parse5-utils";
-export const bundleConfig = await getBundleConfig();
-export function fileCopy(file) {
-    return copyFile(file, getBuildPath(file));
-}
-export function createDir(file) {
-    const buildPath = getBuildPath(file);
-    const dir = buildPath.split("/").slice(0, -1).join("/");
-    return mkdir(dir, { recursive: true });
-}
-export function getBuildPath(file) {
-    return file.replace(`${bundleConfig.src}/`, `${bundleConfig.build}/`);
-}
-const CONNECTIONS = []; // In order to send the HMR information
-export let serverSentEvents;
-export async function createDefaultServer(isSecure) {
-    const fastify = Fastify(isSecure
-        ? {
-            http2: true,
-            https: {
-                key: await readFile(path.join(process.cwd(), "localhost-key.pem")),
-                cert: await readFile(path.join(process.cwd(), "localhost.pem")),
-            },
-        }
-        : void 0);
-    fastify.setNotFoundHandler(async (_req, reply) => {
-        const file = await readFile(path.join(process.cwd(), bundleConfig.build, "/index.html"), {
-            encoding: "utf-8",
-        });
-        reply.header("Content-Type", "text/html; charset=UTF-8");
-        return reply.send(addHMRCode(file, `${bundleConfig.src}/index.html`));
-    });
-    fastify.register(fastifyStatic, {
-        root: path.join(process.cwd(), bundleConfig.build),
-    });
-    fastify.get("/events", (_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`);
-        });
-    });
-    return fastify;
-}
-export function getPostCSSConfig() {
-    try {
-        return postcssrc({});
-    }
-    catch {
-        return { plugins: [cssnano], options: {}, file: "" };
-    }
-}
-async function getBundleConfig() {
-    const base = {
-        build: "build",
-        src: "src",
-        port: 5000,
-        esbuild: {},
-        "html-minifier-terser": {},
-        critical: {},
-    };
-    try {
-        const cfgPath = path.resolve(process.cwd(), "bundle.config.cjs");
-        await access(cfgPath, 0);
-        const config = await import(`file://${cfgPath}`);
-        return { ...base, ...config.default };
-    }
-    catch {
-        console.log("catch");
-        return base;
-    }
-}
-const htmlIdMap = new Map();
-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));
-    let DOM;
-    if (html.includes("<!DOCTYPE html>") || html.includes("<html")) {
-        DOM = ast || parse(html);
-        const headNode = findElement(DOM, (e) => getTagName(e) === "head");
-        appendChild(headNode, script);
-    }
-    else {
-        DOM = ast || parseFragment(html);
-        appendChild(DOM, script);
-    }
-    //@ts-ignore
-    DOM.childNodes.forEach((node) => node.attrs?.push({ name: "data-hmr", value: htmlIdMap.get(file) }));
-    return serialize(DOM);
-}
-function randomText() {
-    return Math.random().toString(32).slice(2);
-}
-function getHMRCode(file, id, src, build) {
-    return `import { render, html, $, $$, setInsertDiffing } from "hydro-js";
-  if (!window.eventsource${id}) {
-    setInsertDiffing(true);
-    window.eventsource${id} = new EventSource("/events");
-    window.eventsource${id}.addEventListener("message", ({ data }) => {
-      const dataObj = JSON.parse(data);
-      const file = "${file}";
-      if (file === dataObj.file && "html" in dataObj) {
-        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);
-        } 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
-          hmrWheres.forEach((where, index) => {
-            if (index < hmrElems.length) {
-              render(hmrElems[index], where, false);
-            } else {
-              where.remove();
-            }
-          });
-          for (let rest = hmrWheres.length; rest < hmrElems.length; rest++) {
-            if (hmrWheres.length) {
-              const template = document.createElement('template');
-              hmrElems[hmrWheres.length - 1].after(template);
-              render(hmrElems[rest], template, false);
-              template.remove();
-            } else {
-              render(hmrElems[rest], false, false)
-            }
-          }
-        }
-        setTimeout(() => dispatchEvent(new Event("popstate")));
-      } else if (dataObj.file.endsWith("css")) {
-        updateElem("link");
-      } else if (dataObj.file.endsWith("js")) {
-        updateElem("script")
-      }
-      function updateElem(type) {
-        const hmrId = "${id}";
-        const noSrcFile = dataObj.file.replace(\`${src}/\`, '');
-        const attr = type === "script" ? "src" : "href";
-        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));
-          }
-          clone.setAttribute(attr, elem.getAttribute(attr) + "?v=" + String(Math.random().toFixed(4)).slice(2));
-          render(clone, elem, false);
-        }
-      }
-    });
-  }
-`;
-}

package/output.JPG DELETED Viewed

Binary file