html-bundle 5.4.15 → 5.5.0

package/{esm → dist}/bundle.js

@@ -34,32 +34,21 @@ else {
     // Performance Observer and file watcher
     const globHTML = new Event.EventEmitter();
     const taskEmitter = new Event.EventEmitter();
-    const start = performance.now();
+    let start = performance.now();
+    let addedHMR = false;
     let expectedTasks = 0; // This will be increased in globHandlers
     let finishedTasks = 0; // Current status
     taskEmitter.on("done", () => {
         finishedTasks++;
         if (finishedTasks === expectedTasks) {
             console.log(`🚀 Build finished in ${(performance.now() - start).toFixed(2)}ms ✨`);
-            if (isHMR) {
+            if (isHMR && !addedHMR) {
+                addedHMR = true;
                 if (file) {
                     const postCSSWatcher = watch(file);
-                    postCSSWatcher.on("change", () => {
-                        console.log("⚡ modified postcss.config – CSS will rebuild now.");
-                        const newConfig = createPostCSSConfig();
-                        plugins = newConfig.plugins;
-                        options = newConfig.options;
-                        CSSprocessor = postcss(plugins);
-                        glob(`${SOURCE_FOLDER}/**/*.css`, {}, (err, files) => {
-                            errorHandler(err);
-                            expectedTasks += files.length;
-                            for (const filename of files) {
-                                const [buildFilename, buildPathDir] = getBuildNames(filename);
-                                fs.mkdirSync(buildPathDir, { recursive: true });
-                                minifyCSS(filename, buildFilename);
-                            }
-                        });
-                    });
+                    const tailwindCSSWatcher = watch(file.replace("postcss", "tailwind"));
+                    postCSSWatcher.on("change", () => rebuildCSS("postcss"));
+                    tailwindCSSWatcher.on("change", () => rebuildCSS("tailwind"));
                 }
                 console.log(`⌛ Waiting for file changes ...`);
                 const watcher = watch(SOURCE_FOLDER);
@@ -67,6 +56,7 @@ else {
                 let initialAdd = 0;
                 let hasJSTS = false;
                 watcher.on("add", (filename) => {
+                    start = performance.now();
                     // Return if it was added by the build system itself
                     if (/-bundle-\d+\.(j|t)sx?$/.test(filename)) {
                         return;
@@ -89,6 +79,7 @@ else {
                     });
                 });
                 watcher.on("change", (filename) => {
+                    start = performance.now();
                     // Return if it was changed by the build system itself
                     if (/-bundle-\d+\.(j|t)sx?$/.test(filename)) {
                         return;
@@ -99,6 +90,7 @@ else {
                     console.log(`⚡ modified ${buildFilename}`);
                 });
                 watcher.on("unlink", (filename) => {
+                    start = performance.now();
                     // Return if it was deleted by the build system itself
                     if (/-bundle-\d+\.(j|t)sx?$/.test(filename)) {
                         return;
@@ -117,6 +109,23 @@ else {
             }
         }
     });
+    function rebuildCSS(config) {
+        start = performance.now();
+        console.log(`⚡ modified ${config}.config – CSS will rebuild now.`);
+        const newConfig = createPostCSSConfig();
+        plugins = newConfig.plugins;
+        options = newConfig.options;
+        CSSprocessor = postcss(plugins);
+        glob(`${SOURCE_FOLDER}/**/*.css`, {}, (err, files) => {
+            errorHandler(err);
+            expectedTasks += files.length;
+            for (const filename of files) {
+                const [buildFilename, buildPathDir] = getBuildNames(filename);
+                fs.mkdirSync(buildPathDir, { recursive: true });
+                minifyCSS(filename, buildFilename);
+            }
+        });
+    }
     // Basic configuration
     const SOURCE_FOLDER = "src";
     const BUILD_FOLDER = "build";
@@ -258,7 +267,7 @@ else {
             if (!isInline) {
                 taskEmitter.emit("done");
                 globHTML.emit("getReady");
-                if (serverSentEvents) {
+                if (serverSentEvents && file) {
                     const changedFile = tsMaybeX2JS(file);
                     const [buildFilename] = getBuildNames(changedFile);
                     const js = fs.readFileSync(buildFilename, { encoding: "utf8" });
@@ -339,7 +348,7 @@ else {
         }
         fileText = serialize(DOM);
         // Minify HTML
-        fileText = minify(fileText, {
+        fileText = await minify(fileText, {
             collapseWhitespace: true,
             removeComments: true,
         });
@@ -353,7 +362,6 @@ else {
                 base: buildDir,
                 html: fileText,
                 target: fileWithBase,
-                minify: true,
                 inline: !isCSP,
                 extract: true,
                 rebase: () => { },
@@ -488,7 +496,9 @@ if (!window.eventsource${id}) {
         }
       }
       setInsertDiffing(false);
-      dispatchEvent(new Event("popstate"));
+      if (dataObj.filename === 'build/index.html') {
+        dispatchEvent(new Event("popstate"));
+      }
     } else if ("css" in dataObj) {
       window.onceEveryXTime(100, window.updateCSS, [updateAttr]);
     } else if ("js" in dataObj) {

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "html-bundle",
-  "version": "5.4.15",
+  "version": "5.5.0",
   "description": "A very simple bundler for HTML SFC",
-  "bin": "./cjs/bundle.js",
+  "bin": "./dist/bundle.js",
   "scripts": {
-    "start": "tsc && tsc -p tsconfig.cjs.json",
+    "start": "tsc",
     "update": "npx npm-check-updates -u && npx typesync && npm i && npm outdated"
   },
   "keywords": [
@@ -18,12 +18,12 @@
   "author": "Fabian Krutsch <f.krutsch@gmx.de> (https://krutsch.netlify.app/)",
   "license": "MIT",
   "devDependencies": {
-    "@types/cssnano": "^4.0.0",
-    "@types/glob": "^7.1.3",
-    "@types/html-minifier-terser": "^5.1.1",
-    "@types/parse5": "^6.0.0",
+    "@types/cssnano": "^4.0.1",
+    "@types/glob": "^7.2.0",
+    "@types/html-minifier-terser": "^6.1.0",
+    "@types/parse5": "^6.0.3",
     "@types/postcss-load-config": "^3.0.1",
-    "typescript": "^4.3.2"
+    "typescript": "^4.5.4"
   },
   "repository": {
     "type": "git",
@@ -31,17 +31,17 @@
   },
   "bugs": "https://github.com/Krutsch/html-bundle/issues",
   "dependencies": {
-    "@web/parse5-utils": "^1.2.2",
-    "chokidar": "^3.5.1",
-    "critical": "^3.0.1",
-    "cssnano": "^5.0.4",
-    "esbuild": "^0.12.4",
-    "fastify": "^3.16.2",
-    "fastify-static": "^4.2.2",
-    "glob": "^7.1.7",
-    "html-minifier-terser": "^5.1.1",
+    "@web/parse5-utils": "^1.3.0",
+    "chokidar": "^3.5.2",
+    "critical": "^4.0.1",
+    "cssnano": "^5.0.14",
+    "esbuild": "^0.14.8",
+    "fastify": "^3.25.2",
+    "fastify-static": "^4.5.0",
+    "glob": "^7.2.0",
+    "html-minifier-terser": "^6.1.0",
     "parse5": "^6.0.1",
-    "postcss": "^8.3.0",
-    "postcss-load-config": "^3.0.1"
+    "postcss": "^8.4.5",
+    "postcss-load-config": "^3.1.0"
   }
 }

package/src/bundle.ts

@@ -49,7 +49,8 @@ if (isServeOnly) {
   // Performance Observer and file watcher
   const globHTML = new Event.EventEmitter();
   const taskEmitter = new Event.EventEmitter();
-  const start = performance.now();
+  let start = performance.now();
+  let addedHMR = false;
   let expectedTasks = 0; // This will be increased in globHandlers
   let finishedTasks = 0; // Current status
   taskEmitter.on("done", () => {
@@ -60,26 +61,13 @@ if (isServeOnly) {
         `🚀 Build finished in ${(performance.now() - start).toFixed(2)}ms ✨`
       );
 
-      if (isHMR) {
+      if (isHMR && !addedHMR) {
+        addedHMR = true;
         if (file) {
           const postCSSWatcher = watch(file);
-          postCSSWatcher.on("change", () => {
-            console.log("⚡ modified postcss.config – CSS will rebuild now.");
-            const newConfig = createPostCSSConfig();
-            plugins = newConfig.plugins;
-            options = newConfig.options;
-            CSSprocessor = postcss(plugins as AcceptedPlugin[]);
-
-            glob(`${SOURCE_FOLDER}/**/*.css`, {}, (err, files) => {
-              errorHandler(err);
-              expectedTasks += files.length;
-              for (const filename of files) {
-                const [buildFilename, buildPathDir] = getBuildNames(filename);
-                fs.mkdirSync(buildPathDir, { recursive: true });
-                minifyCSS(filename, buildFilename);
-              }
-            });
-          });
+          const tailwindCSSWatcher = watch(file.replace("postcss", "tailwind"));
+          postCSSWatcher.on("change", () => rebuildCSS("postcss"));
+          tailwindCSSWatcher.on("change", () => rebuildCSS("tailwind"));
         }
 
         console.log(`⌛ Waiting for file changes ...`);
@@ -89,6 +77,8 @@ if (isServeOnly) {
         let hasJSTS = false;
 
         watcher.on("add", (filename) => {
+          start = performance.now();
+          rebuildCSS();
           // Return if it was added by the build system itself
           if (/-bundle-\d+\.(j|t)sx?$/.test(filename)) {
             return;
@@ -112,6 +102,8 @@ if (isServeOnly) {
           });
         });
         watcher.on("change", (filename) => {
+          start = performance.now();
+          rebuildCSS();
           // Return if it was changed by the build system itself
           if (/-bundle-\d+\.(j|t)sx?$/.test(filename)) {
             return;
@@ -123,6 +115,7 @@ if (isServeOnly) {
           console.log(`⚡ modified ${buildFilename}`);
         });
         watcher.on("unlink", (filename) => {
+          start = performance.now();
           // Return if it was deleted by the build system itself
           if (/-bundle-\d+\.(j|t)sx?$/.test(filename)) {
             return;
@@ -143,6 +136,25 @@ if (isServeOnly) {
     }
   });
 
+  function rebuildCSS(config?: string) {
+    start = performance.now();
+    if (config)
+      console.log(`⚡ modified ${config}.config – CSS will rebuild now.`);
+    const newConfig = createPostCSSConfig();
+    plugins = newConfig.plugins;
+    options = newConfig.options;
+    CSSprocessor = postcss(plugins as AcceptedPlugin[]);
+    glob(`${SOURCE_FOLDER}/**/*.css`, {}, (err, files) => {
+      errorHandler(err);
+      expectedTasks += files.length;
+      for (const filename of files) {
+        const [buildFilename, buildPathDir] = getBuildNames(filename);
+        fs.mkdirSync(buildPathDir, { recursive: true });
+        minifyCSS(filename, buildFilename);
+      }
+    });
+  }
+
   // Basic configuration
   const SOURCE_FOLDER = "src";
   const BUILD_FOLDER = "build";
@@ -318,8 +330,8 @@ if (isServeOnly) {
           taskEmitter.emit("done");
           globHTML.emit("getReady");
 
-          if (serverSentEvents) {
-            const changedFile = tsMaybeX2JS(file!);
+          if (serverSentEvents && file) {
+            const changedFile = tsMaybeX2JS(file);
             const [buildFilename] = getBuildNames(changedFile);
             const js = fs.readFileSync(buildFilename, { encoding: "utf8" });
             serverSentEvents({
@@ -411,7 +423,7 @@ if (isServeOnly) {
     fileText = serialize(DOM);
 
     // Minify HTML
-    fileText = minify(fileText, {
+    fileText = await minify(fileText, {
       collapseWhitespace: true,
       removeComments: true,
     });
@@ -427,7 +439,6 @@ if (isServeOnly) {
           base: buildDir,
           html: fileText,
           target: fileWithBase,
-          minify: true,
           inline: !isCSP,
           extract: true,
           rebase: () => {},
@@ -576,7 +587,9 @@ if (!window.eventsource${id}) {
         }
       }
       setInsertDiffing(false);
-      dispatchEvent(new Event("popstate"));
+      if (dataObj.filename === 'build/index.html') {
+        dispatchEvent(new Event("popstate"));
+      }
     } else if ("css" in dataObj) {
       window.onceEveryXTime(100, window.updateCSS, [updateAttr]);
     } else if ("js" in dataObj) {

package/tsconfig.json

@@ -3,7 +3,7 @@
     "target": "ESNext",
     "module": "ESNext",
     "lib": ["ESNext"],
-    "outDir": "./esm",
+    "outDir": "./dist",
     "rootDir": "./src",
     "strict": true,
     "skipLibCheck": true,

package/cjs/bundle.js

@@ -1,681 +0,0 @@
-#!/usr/bin/env node
-"use strict";
-var __importDefault =
-  (this && this.__importDefault) ||
-  function (mod) {
-    return mod && mod.__esModule ? mod : { default: mod };
-  };
-Object.defineProperty(exports, "__esModule", { value: true });
-const fs_1 = __importDefault(require("fs"));
-const perf_hooks_1 = require("perf_hooks");
-const events_1 = __importDefault(require("events"));
-const glob_1 = __importDefault(require("glob"));
-const path_1 = __importDefault(require("path"));
-const fastify_1 = __importDefault(require("fastify"));
-const fastify_static_1 = __importDefault(require("fastify-static"));
-const postcss_1 = __importDefault(require("postcss"));
-const postcss_load_config_1 = __importDefault(require("postcss-load-config"));
-const cssnano_1 = __importDefault(require("cssnano"));
-const esbuild_1 = __importDefault(require("esbuild"));
-const critical_1 = __importDefault(require("critical"));
-const html_minifier_terser_1 = require("html-minifier-terser");
-const chokidar_1 = require("chokidar");
-const parse5_1 = require("parse5");
-const parse5_utils_1 = require("@web/parse5-utils");
-// CLI and options
-const isCritical = process.argv.includes("--critical");
-const isHMR = process.argv.includes("--hmr");
-const isCSP = process.argv.includes("--csp");
-const isSecure = process.argv.includes("--secure");
-const isServeOnly = process.argv.includes("--serveOnly");
-let fastify;
-if (isServeOnly) {
-  createDefaultServer();
-  fastify.listen(5000);
-  console.log(`💻 Sever listening on port 5000.`);
-} else {
-  process.env.NODE_ENV = isHMR ? "development" : "production";
-  let { plugins, options, file } = createPostCSSConfig();
-  let CSSprocessor = postcss_1.default(plugins);
-  // Performance Observer and file watcher
-  const globHTML = new events_1.default.EventEmitter();
-  const taskEmitter = new events_1.default.EventEmitter();
-  const start = perf_hooks_1.performance.now();
-  let expectedTasks = 0; // This will be increased in globHandlers
-  let finishedTasks = 0; // Current status
-  taskEmitter.on("done", () => {
-    finishedTasks++;
-    if (finishedTasks === expectedTasks) {
-      console.log(
-        `🚀 Build finished in ${(
-          perf_hooks_1.performance.now() - start
-        ).toFixed(2)}ms ✨`
-      );
-      if (isHMR) {
-        if (file) {
-          const postCSSWatcher = chokidar_1.watch(file);
-          postCSSWatcher.on("change", () => {
-            console.log("⚡ modified postcss.config – CSS will rebuild now.");
-            const newConfig = createPostCSSConfig();
-            plugins = newConfig.plugins;
-            options = newConfig.options;
-            CSSprocessor = postcss_1.default(plugins);
-            glob_1.default(`${SOURCE_FOLDER}/**/*.css`, {}, (err, files) => {
-              errorHandler(err);
-              expectedTasks += files.length;
-              for (const filename of files) {
-                const [buildFilename, buildPathDir] = getBuildNames(filename);
-                fs_1.default.mkdirSync(buildPathDir, { recursive: true });
-                minifyCSS(filename, buildFilename);
-              }
-            });
-          });
-        }
-        console.log(`⌛ Waiting for file changes ...`);
-        const watcher = chokidar_1.watch(SOURCE_FOLDER);
-        // The add watcher will add all the files initially - do not rebuild them
-        let initialAdd = 0;
-        let hasJSTS = false;
-        watcher.on("add", (filename) => {
-          // Return if it was added by the build system itself
-          if (/-bundle-\d+\.(j|t)sx?$/.test(filename)) {
-            return;
-          }
-          filename = String.raw`${filename}`.replace(/\\/g, "/");
-          if (filename.endsWith(".html") || filename.endsWith(".css")) {
-            initialAdd++;
-          } else if (hasJSTS === false && /\.(j|t)sx?$/.test(filename)) {
-            hasJSTS = true;
-            initialAdd++;
-          }
-          if (initialAdd <= expectedTasks) return;
-          const [buildFilename, buildPathDir] = getBuildNames(filename);
-          fs_1.default.mkdir(buildPathDir, { recursive: true }, (err) => {
-            errorHandler(err);
-            rebuild(filename);
-            console.log(`⚡ added ${buildFilename}`);
-          });
-        });
-        watcher.on("change", (filename) => {
-          // Return if it was changed by the build system itself
-          if (/-bundle-\d+\.(j|t)sx?$/.test(filename)) {
-            return;
-          }
-          filename = String.raw`${filename}`.replace(/\\/g, "/");
-          rebuild(filename);
-          const [buildFilename] = getBuildNames(filename);
-          console.log(`⚡ modified ${buildFilename}`);
-        });
-        watcher.on("unlink", (filename) => {
-          // Return if it was deleted by the build system itself
-          if (/-bundle-\d+\.(j|t)sx?$/.test(filename)) {
-            return;
-          }
-          filename = String.raw`${filename}`.replace(/\\/g, "/");
-          JSTSFiles.delete(filename);
-          const [buildFilename, buildPathDir] = getBuildNames(filename);
-          fs_1.default.rm(tsMaybeX2JS(buildFilename), (err) => {
-            errorHandler(err);
-            console.log(`⚡ deleted ${buildFilename}`);
-            const length = fs_1.default.readdirSync(buildPathDir).length;
-            if (!length) fs_1.default.rmdir(buildPathDir, errorHandler);
-          });
-        });
-      }
-    }
-  });
-  // Basic configuration
-  const SOURCE_FOLDER = "src";
-  const BUILD_FOLDER = "build";
-  const TEMPLATE_LITERAL_MINIFIER = /\n\s+/g;
-  const CONNECTIONS = []; // HMR
-  let htmlTasks = 0;
-  let serverSentEvents;
-  if (isHMR) {
-    fastify = fastify_1.default(
-      isSecure
-        ? {
-            http2: true,
-            https: {
-              key: fs_1.default.readFileSync(
-                path_1.default.join(process.cwd(), "localhost-key.pem")
-              ),
-              cert: fs_1.default.readFileSync(
-                path_1.default.join(process.cwd(), "localhost.pem")
-              ),
-            },
-          }
-        : void 0
-    );
-    fastify.setNotFoundHandler((_req, reply) => {
-      const file = fs_1.default.readFileSync(
-        path_1.default.join(process.cwd(), BUILD_FOLDER, "/index.html"),
-        {
-          encoding: "utf-8",
-        }
-      );
-      reply.header("Content-Type", "text/html; charset=UTF-8");
-      return reply.send(addHMRCode(file, "build/index.html"));
-    });
-    fastify.register(fastify_static_1.default, {
-      root: path_1.default.join(process.cwd(), BUILD_FOLDER),
-    });
-    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`);
-        });
-    });
-  }
-  // THE BUNDLE CODE
-  // Glob all files and transform the code
-  glob_1.default(`${SOURCE_FOLDER}/**/*.html`, {}, (err, files) => {
-    errorHandler(err);
-    expectedTasks += files.length;
-    htmlTasks += files.length;
-    if (isHMR) {
-      createHMRHandlers(files);
-      fastify.listen(5000);
-      console.log(`💻 Sever listening on port 5000.`);
-    }
-  });
-  glob_1.default(`${SOURCE_FOLDER}/**/*.css`, {}, (err, files) => {
-    errorHandler(err);
-    expectedTasks += files.length;
-    for (const filename of files) {
-      const [buildFilename, buildPathDir] = getBuildNames(filename);
-      fs_1.default.mkdirSync(buildPathDir, { recursive: true });
-      minifyCSS(filename, buildFilename);
-    }
-  });
-  const JSTSFiles = new Set();
-  glob_1.default(
-    `${SOURCE_FOLDER}/**/!(*.d).{ts,js,tsx,jsx}`,
-    {},
-    (err, files) => {
-      errorHandler(err);
-      if (files.length) {
-        expectedTasks += 1;
-      } else {
-        globHTML.emit("getReady");
-      }
-      files.forEach((file) => JSTSFiles.add(file));
-      minifyTSJS().catch(errorHandler);
-    }
-  );
-  globHTML.on("getReady", () => {
-    if (expectedTasks - htmlTasks === finishedTasks) {
-      // After CSS and JS because critical needs file built css files and inline script might reference js files.
-      glob_1.default(`${SOURCE_FOLDER}/**/*.html`, {}, async (err, files) => {
-        errorHandler(err);
-        await createGlobalJS(files);
-        files.forEach((filename) => {
-          const [buildFilename, buildPathDir] = getBuildNames(filename);
-          fs_1.default.mkdirSync(buildPathDir, { recursive: true });
-          minifyHTML(filename, buildFilename);
-        });
-      });
-    }
-  });
-  function createGlobalJS(files) {
-    const scriptFilenames = [];
-    files.forEach((filename) => {
-      const fileText = fs_1.default.readFileSync(filename, {
-        encoding: "utf-8",
-      });
-      let DOM;
-      if (fileText.includes("<!DOCTYPE html>") || fileText.includes("<html")) {
-        DOM = parse5_1.parse(fileText);
-      } else {
-        DOM = parse5_1.parseFragment(fileText);
-      }
-      const scripts = parse5_utils_1.findElements(
-        DOM,
-        (e) => parse5_utils_1.getTagName(e) === "script"
-      );
-      scripts.forEach((script, index) => {
-        const scriptTextNode = script.childNodes[0];
-        const isReferencedScript = script.attrs.find((a) => a.name === "src");
-        //@ts-ignore
-        const scriptContent =
-          scriptTextNode === null || scriptTextNode === void 0
-            ? void 0
-            : scriptTextNode.value;
-        if (!scriptContent || isReferencedScript) return;
-        const jsFilename = filename.replace(".html", `-bundle-${index}.js`);
-        scriptFilenames.push(jsFilename);
-        fs_1.default.writeFileSync(jsFilename, scriptContent);
-      });
-    });
-    scriptFilenames.forEach((file) => JSTSFiles.add(file));
-    return minifyTSJS(true)
-      .catch(console.error)
-      .finally(() =>
-        scriptFilenames.forEach((file) => {
-          JSTSFiles.delete(file);
-          try {
-            fs_1.default.rmSync(file);
-          } catch (_a) {}
-        })
-      );
-  }
-  function minifyTSJS(isInline = false, file) {
-    return esbuild_1
-      .build({
-        entryPoints: Array.from(JSTSFiles),
-        charset: "utf8",
-        format: "esm",
-        incremental: isHMR,
-        sourcemap: isHMR,
-        splitting: true,
-        define: {
-          "process.env.NODE_ENV": isHMR ? '"development"' : '"production"',
-        },
-        loader: { ".js": "jsx", ".ts": "tsx" },
-        bundle: true,
-        minify: true,
-        outdir: BUILD_FOLDER,
-        outbase: SOURCE_FOLDER,
-      })
-      .then(() => {
-        if (!isInline) {
-          taskEmitter.emit("done");
-          globHTML.emit("getReady");
-          if (serverSentEvents) {
-            const changedFile = tsMaybeX2JS(file);
-            const [buildFilename] = getBuildNames(changedFile);
-            const js = fs_1.default.readFileSync(buildFilename, {
-              encoding: "utf8",
-            });
-            serverSentEvents({
-              js,
-              filename: buildFilename.split(`${BUILD_FOLDER}/`).pop(),
-            });
-          }
-        }
-      });
-  }
-  function minifyCSS(filename, buildFilename) {
-    const fileText = fs_1.default.readFileSync(filename, { encoding: "utf-8" });
-    return CSSprocessor.process(
-      fileText,
-      Object.assign(Object.assign({}, options), {
-        from: filename,
-        to: buildFilename,
-      })
-    )
-      .then((result) => {
-        fs_1.default.writeFileSync(buildFilename, result.css);
-        taskEmitter.emit("done");
-        globHTML.emit("getReady");
-        if (serverSentEvents) {
-          serverSentEvents({
-            css: result.css,
-            filename: buildFilename.split(`${BUILD_FOLDER}/`).pop(),
-          });
-        }
-      })
-      .catch((err) => {
-        console.error(err);
-      });
-  }
-  async function minifyHTML(filename, buildFilename) {
-    let fileText = fs_1.default.readFileSync(filename, { encoding: "utf-8" });
-    let DOM;
-    if (fileText.includes("<!DOCTYPE html>") || fileText.includes("<html")) {
-      DOM = parse5_1.parse(fileText);
-    } else {
-      DOM = parse5_1.parseFragment(fileText);
-    }
-    // Minify Code
-    const scripts = parse5_utils_1.findElements(
-      DOM,
-      (e) => parse5_utils_1.getTagName(e) === "script"
-    );
-    scripts.forEach((script, index) => {
-      const scriptTextNode = script.childNodes[0];
-      const isReferencedScript = script.attrs.find((a) => a.name === "src");
-      //@ts-ignore
-      if (
-        !(scriptTextNode === null || scriptTextNode === void 0
-          ? void 0
-          : scriptTextNode.value) ||
-        isReferencedScript
-      )
-        return;
-      // Use bundled file and remove it from fs
-      const bundledFilename = buildFilename.replace(
-        ".html",
-        `-bundle-${index}.js`
-      );
-      try {
-        const scriptContent = fs_1.default.readFileSync(bundledFilename, {
-          encoding: "utf-8",
-        });
-        fs_1.default.rmSync(bundledFilename);
-        // Replace src with bundled code
-        //@ts-ignore
-        scriptTextNode.value = scriptContent.replace(
-          TEMPLATE_LITERAL_MINIFIER,
-          " "
-        );
-      } catch (_a) {}
-    });
-    // Minify Inline Style
-    const styles = parse5_utils_1.findElements(
-      DOM,
-      (e) => parse5_utils_1.getTagName(e) === "style"
-    );
-    for (const style of styles) {
-      const node = style.childNodes[0];
-      //@ts-ignore
-      const styleContent =
-        node === null || node === void 0 ? void 0 : node.value;
-      if (!styleContent) continue;
-      const { css } = await CSSprocessor.process(
-        styleContent,
-        Object.assign(Object.assign({}, options), { from: undefined })
-      );
-      //@ts-ignore
-      node.value = css;
-    }
-    fileText = parse5_1.serialize(DOM);
-    // Minify HTML
-    fileText = html_minifier_terser_1.minify(fileText, {
-      collapseWhitespace: true,
-      removeComments: true,
-    });
-    if (isCritical) {
-      const buildFilenameArr = buildFilename.split("/");
-      const fileWithBase = buildFilenameArr.pop();
-      const buildDir = buildFilenameArr.join("/");
-      // critical is generating the files on the fs
-      return critical_1.default
-        .generate({
-          base: buildDir,
-          html: fileText,
-          target: fileWithBase,
-          minify: true,
-          inline: !isCSP,
-          extract: true,
-          rebase: () => {},
-        })
-        .then(({ html }) => {
-          taskEmitter.emit("done");
-          if (serverSentEvents) {
-            serverSentEvents({
-              html: addHMRCode(html, buildFilename),
-              filename: buildFilename,
-            });
-          }
-        })
-        .catch((err) => {
-          console.error(err);
-        });
-    } else {
-      fs_1.default.writeFileSync(buildFilename, fileText);
-      taskEmitter.emit("done");
-      if (serverSentEvents) {
-        serverSentEvents({
-          html: addHMRCode(fileText, buildFilename),
-          filename: buildFilename,
-        });
-      }
-    }
-  }
-  // Helper functions from here
-  function createPostCSSConfig() {
-    try {
-      return postcss_load_config_1.default.sync({});
-    } catch (_a) {
-      return { plugins: [cssnano_1.default], options: {}, file: "" };
-    }
-  }
-  function getBuildNames(filename) {
-    const buildFilename = filename.replace(
-      `${SOURCE_FOLDER}/`,
-      `${BUILD_FOLDER}/`
-    );
-    const buildFilenameArr = buildFilename.split("/");
-    buildFilenameArr.pop();
-    const buildPathDir = buildFilenameArr.join("/");
-    return [buildFilename, buildPathDir];
-  }
-  async function rebuild(filename) {
-    const [buildFilename] = getBuildNames(filename);
-    if (/\.(j|t)sx?$/.test(filename)) {
-      JSTSFiles.add(filename);
-    } else if (filename.endsWith(".css")) {
-      await minifyCSS(filename, buildFilename);
-    }
-    glob_1.default(`${SOURCE_FOLDER}/**/*.html`, {}, async (err, files) => {
-      errorHandler(err);
-      await createGlobalJS(files);
-      if (filename.endsWith(".html")) {
-        minifyHTML(filename, buildFilename);
-      } else if (
-        /\.(j|t)sx?$/.test(filename) ||
-        (filename.endsWith(".css") && isCritical)
-      ) {
-        for (const htmlFilename of files) {
-          const [htmlBuildFilename] = getBuildNames(htmlFilename);
-          await minifyHTML(htmlFilename, htmlBuildFilename);
-        }
-        if (/\.(j|t)sx?$/.test(filename) && serverSentEvents) {
-          const jsFile = tsMaybeX2JS(buildFilename);
-          try {
-            // Do not try to send empty files
-            serverSentEvents({
-              js: fs_1.default.readFileSync(jsFile, { encoding: "utf-8" }),
-              filename: jsFile.split(`${BUILD_FOLDER}/`).pop(),
-            });
-          } catch (_a) {}
-        }
-      }
-    });
-  }
-  const getHMRCode = (
-    filename,
-    id
-  ) => `import { render, html, setShouldSetReactivity, $$, setGlobalSchedule, setInsertDiffing } from "https://unpkg.com/hydro-js/dist/library.js";
-
-if (!window.eventsource${id}) {
-  setGlobalSchedule(false);
-  setShouldSetReactivity(false);
-
-  window.eventsource${id} = new EventSource("/events");
-  window.eventsource${id}.addEventListener("message", ({ data }) => {
-    const dataObj = JSON.parse(data);
-
-    if ("html" in dataObj && "${filename}" === dataObj.filename) {
-      setInsertDiffing(true);
-
-      let newHTML;
-      let isBody;
-
-      if (dataObj.html.startsWith('<!DOCTYPE html>') || dataObj.html.startsWith('<html')) {
-        newHTML = html\`\${dataObj.html}\`;
-      } else {
-        newHTML = html\`<body>\${dataObj.html}</body>\`
-        isBody = true
-      }
-
-      if (isBody) {
-        const hmrID = "${id}";
-        const hmrElems = Array.from(newHTML.childNodes);
-        const hmrWheres = Array.from($$(\`[data-hmr="\${hmrID}"]\`))
-        // Render new Elements in old Elements, also 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);
-            } 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);
-            template.remove();
-          } else {
-            render(hmrElems[rest])
-          }
-        }
-      } else {
-        const oldElementCount = document.body.querySelectorAll('*').length;
-        render(newHTML, document.documentElement);
-        const newElementCount = document.body.querySelectorAll('*').length;
-
-        // Looks like JS did not reload? Last resort - hard refresh
-        if (newElementCount < 5 && Math.abs(newElementCount - oldElementCount) > 10) {
-          location.reload() 
-        }
-      }
-      setInsertDiffing(false);
-      dispatchEvent(new Event("popstate"));
-    } else if ("css" in dataObj) {
-      window.onceEveryXTime(100, window.updateCSS, [updateAttr]);
-    } else if ("js" in dataObj) {
-      window.onceEveryXTime(100, window.updateJS, [updateAttr]);
-    }
-
-    function updateAttr (attr, forceUpdate = false) {
-      return (elem) => {
-        const attrValue = elem[attr].replace(/\\?v=.*/, "");
-        if (forceUpdate || attrValue.endsWith(dataObj.filename)) {
-          elem[attr] = \`\${attrValue}?v=\${Math.random().toFixed(4)}\`;
-        } else if (elem.localName === 'script' && !elem.src && new RegExp(\`["']\${dataObj.filename}["']\`).test(elem.textContent)) {
-          elem.setAttribute('data-inline', String(Math.random().toFixed(4)).slice(2));
-        }
-      }
-    };
-  });
-
-  if (!window.updateCSS) {
-    window.updateCSS = function updateCSS(updateAttr) {
-      $$('link').forEach(updateAttr("href"));
-      window.fnToLastCalled.set(window.updateCSS, performance.now())
-    }
-  }
-  if (!window.updateJS) {
-    window.updateJS = function updateJS(updateAttr) {
-      window.fnToLastCalled.set(window.updateJS, performance.now());
-      const copy = html\`\${document.documentElement.outerHTML}\`;
-      copy.querySelectorAll('script').forEach(updateAttr("src"));
-      render(copy, document.documentElement);
-    }
-  }
-  if (!window.fnToLastCalled) {
-    window.fnToLastCalled = new Map();
-  }
-  if (!window.onceEveryXTime) {
-    window.onceEveryXTime = function (time, fn, params) {
-      if (!window.fnToLastCalled.has(fn) || performance.now() - window.fnToLastCalled.get(fn) > time) {
-        fn(...params)
-      }
-    }
-  }
-}`;
-  function randomText() {
-    return Math.random().toString(32).slice(2);
-  }
-  const htmlIdMap = new Map();
-  function addHMRCode(html, filename) {
-    if (!htmlIdMap.has(filename)) {
-      htmlIdMap.set(filename, randomText());
-    }
-    const script = parse5_utils_1.createScript(
-      { type: "module" },
-      getHMRCode(filename, htmlIdMap.get(filename))
-    );
-    let ast;
-    if (html.includes("<!DOCTYPE html>") || html.includes("<html")) {
-      ast = parse5_1.parse(html);
-      const headNode = parse5_utils_1.findElement(
-        ast,
-        (e) => parse5_utils_1.getTagName(e) === "head"
-      );
-      parse5_utils_1.appendChild(headNode, script);
-    } else {
-      ast = parse5_1.parseFragment(html);
-      parse5_utils_1.appendChild(ast, script);
-      ast.childNodes.forEach((node) => {
-        var _a;
-        //@ts-ignore
-        return (_a = node.attrs) === null || _a === void 0
-          ? void 0
-          : _a.push({ name: "data-hmr", value: htmlIdMap.get(filename) });
-      });
-    }
-    // Burst CSS cache
-    parse5_utils_1
-      .findElements(ast, (e) => parse5_utils_1.getTagName(e) === "link")
-      .forEach((link) => {
-        const href = link.attrs.find((attr) => attr.name === "href");
-        const rel = link.attrs.find((attr) => attr.name === "rel");
-        if (rel.value === "stylesheet") {
-          href.value += `?v=${Math.random().toFixed(4)}`;
-        }
-      });
-    return parse5_1.serialize(ast);
-  }
-  function createHMRHandlers(files) {
-    files.forEach((filename) => {
-      const newFilename = "/" + filename.replace(/src\//, "");
-      const filePath = newFilename.split("/");
-      const endName = filePath.pop();
-      if (endName.endsWith("index.html")) {
-        //@ts-ignore
-        fastify.get(filePath.join("/") + "/", HMRHandler);
-      }
-      //@ts-ignore
-      fastify.get(newFilename, HMRHandler);
-    });
-  }
-  function HMRHandler(request, reply) {
-    let filename = request.url;
-    if (filename.endsWith("/")) {
-      filename += "index.html";
-    }
-    filename = BUILD_FOLDER + filename;
-    const file = fs_1.default.readFileSync(filename, {
-      encoding: "utf-8",
-    });
-    reply.header("Content-Type", "text/html; charset=UTF-8");
-    return reply.send(addHMRCode(file, filename));
-  }
-  function errorHandler(err) {
-    if (err) {
-      console.error(err);
-      process.exit(1);
-    }
-  }
-  function tsMaybeX2JS(filename) {
-    return filename.replace(".ts", ".js").replace(".jsx", ".js");
-  }
-}
-function createDefaultServer(BUILD_FOLDER = "build") {
-  fastify = fastify_1.default(
-    isSecure
-      ? {
-          http2: true,
-          https: {
-            key: fs_1.default.readFileSync(
-              path_1.default.join(process.cwd(), "localhost-key.pem")
-            ),
-            cert: fs_1.default.readFileSync(
-              path_1.default.join(process.cwd(), "localhost.pem")
-            ),
-          },
-        }
-      : void 0
-  );
-  fastify.register(fastify_static_1.default, {
-    root: path_1.default.join(process.cwd(), BUILD_FOLDER),
-  });
-}

package/tsconfig.cjs.json

@@ -1,16 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2017",
-    "module": "CommonJS",
-    "lib": ["ES2017"],
-    "outDir": "./cjs",
-    "rootDir": "./src",
-    "strict": true,
-    "skipLibCheck": true,
-    "moduleResolution": "node",
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "typeRoots": ["node_modules/@types"]
-  },
-  "include": ["src", "types"]
-}