html-bundle 5.5.2 → 6.0.1

package/src/bundle.mts

@@ -1,732 +1,394 @@
 #!/usr/bin/env node
 
-import fs from "fs";
+import type { TextNode } from "parse5";
+import type { AcceptedPlugin } from "postcss";
 import { performance } from "perf_hooks";
-import Event from "events";
+import { readFile, rm, writeFile, readdir } from "fs/promises";
+import { execFile } from "child_process";
+import { promisify } from "util";
 import glob from "glob";
-import path from "path";
-import Fastify, {
-  FastifyReply,
-  FastifyRequest,
-  FastifyServerOptions,
-} from "fastify";
-import fastifyStatic from "fastify-static";
-import postcss, { AcceptedPlugin, ProcessOptions } from "postcss";
-import postcssrc from "postcss-load-config";
-import cssnano from "cssnano";
+import postcss from "postcss";
 import esbuild from "esbuild";
 import critical from "critical";
 import { minify } from "html-minifier-terser";
 import { watch } from "chokidar";
 import { serialize, parse, parseFragment } from "parse5";
+import { getTagName, findElements } from "@web/parse5-utils";
+import awaitSpawn from "await-spawn";
 import {
-  createScript,
-  getTagName,
-  appendChild,
-  findElement,
-  findElements,
-  ParentNode,
-} from "@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: ReturnType<typeof 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(plugins as AcceptedPlugin[]);
-
-  // Performance Observer and file watcher
-  const globHTML = new Event.EventEmitter();
-  const taskEmitter = new Event.EventEmitter();
-  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 && !addedHMR) {
-        addedHMR = true;
-        if (file) {
-          const postCSSWatcher = watch(file);
-          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);
-        // The add watcher will add all the files initially - do not rebuild them
-        let initialAdd = 0;
-        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;
-          }
-
-          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.mkdir(buildPathDir, { recursive: true }, (err) => {
-            errorHandler(err);
-
-            rebuild(filename);
-            console.log(`⚡ added ${buildFilename}`);
-          });
-        });
-        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;
-          }
+  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
+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
+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|jsx?|tsx?)$/;
+const execFilePromise = promisify(execFile);
+
+if (bundleConfig.deletePrev) {
+  await rm(bundleConfig.build, { force: true, recursive: true });
+}
 
-          filename = String.raw`${filename}`.replace(/\\/g, "/");
-          rebuild(filename);
-          const [buildFilename] = getBuildNames(filename);
-          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;
-          }
+glob(`${bundleConfig.src}/**/*`, build);
 
-          filename = String.raw`${filename}`.replace(/\\/g, "/");
-          JSTSFiles.delete(filename);
-          const [buildFilename, buildPathDir] = getBuildNames(filename);
-          fs.rm(tsMaybeX2JS(buildFilename), (err) => {
-            errorHandler(err);
-
-            console.log(`⚡ deleted ${buildFilename}`);
-            const length = fs.readdirSync(buildPathDir).length;
-            if (!length) fs.rmdir(buildPathDir, errorHandler);
-          });
-        });
-      }
-    }
-  });
-
-  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);
-      }
-    });
+async function build(err: any, files: string[], firstRun = true) {
+  if (err) {
+    console.error(err);
+    process.exit(1);
   }
 
-  // Basic configuration
-  const SOURCE_FOLDER = "src";
-  const BUILD_FOLDER = "build";
-  const TEMPLATE_LITERAL_MINIFIER = /\n\s+/g;
-  const CONNECTIONS: Array<any> = []; // HMR
-  let htmlTasks = 0;
-
-  // Server for HMR
-  type serverSentEventObject = (
-    | { html: string }
-    | { css: string }
-    | { js: string }
-  ) & { filename: string };
-  let serverSentEvents: undefined | ((data: serverSentEventObject) => void);
-  if (isHMR) {
-    fastify = Fastify(
-      isSecure
-        ? ({
-            http2: true,
-            https: {
-              key: fs.readFileSync(
-                path.join(process.cwd(), "localhost-key.pem")
-              ),
-              cert: fs.readFileSync(path.join(process.cwd(), "localhost.pem")),
-            },
-          } as FastifyServerOptions)
-        : void 0
-    );
-
-    fastify.setNotFoundHandler((_req, reply) => {
-      const file = fs.readFileSync(
-        path.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(fastifyStatic, {
-      root: path.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`);
-        });
-    });
+  if (isHMR && firstRun) {
+    fastify = await createDefaultServer(isSecure);
+    fastify.listen(bundleConfig.port);
+    console.log(`💻 Sever listening on port ${bundleConfig.port}.`);
   }
 
-  // THE BUNDLE CODE
-  // Glob all files and transform the code
-  glob(`${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(`${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);
-    }
-  });
+  for (const file of files) {
+    await createDir(file);
 
-  const JSTSFiles = new Set<string>();
-  glob(`${SOURCE_FOLDER}/**/!(*.d).{ts,js,tsx,jsx}`, {}, (err, files) => {
-    errorHandler(err);
-    if (files.length) {
-      expectedTasks += 1;
+    if (!SUPPORTED_FILES.test(file)) {
+      if (handlerFile) {
+        const { stdout } = await execFilePromise("node", [handlerFile, file]);
+        if (String(stdout)) console.log("📋 Logging Handler: ", String(stdout));
+      } else {
+        await fileCopy(file);
+      }
     } 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(`${SOURCE_FOLDER}/**/*.html`, {}, async (err, files) => {
-        errorHandler(err);
-
-        await createGlobalJS(files);
-        files.forEach((filename) => {
-          const [buildFilename, buildPathDir] = getBuildNames(filename);
-          fs.mkdirSync(buildPathDir, { recursive: true });
-          minifyHTML(filename, buildFilename);
-        });
-      });
-    }
-  });
-
-  function createGlobalJS(files: Array<string>) {
-    const scriptFilenames: string[] = [];
-
-    files.forEach((filename) => {
-      const fileText = fs.readFileSync(filename, { encoding: "utf-8" });
-
-      let DOM;
-      if (fileText.includes("<!DOCTYPE html>") || fileText.includes("<html")) {
-        DOM = parse(fileText);
+      if (file.endsWith(".html")) {
+        await writeInlineScripts(file);
+      } else if (file.endsWith(".css")) {
+        await minifyCSS(file, getBuildPath(file));
       } else {
-        DOM = parseFragment(fileText);
+        inlineFiles.add(file);
       }
-
-      const scripts = findElements(DOM, (e) => 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?.value;
-        if (!scriptContent || isReferencedScript) return;
-
-        const jsFilename = filename.replace(".html", `-bundle-${index}.js`);
-        scriptFilenames.push(jsFilename);
-        fs.writeFileSync(jsFilename, scriptContent);
-      });
-    });
-
-    scriptFilenames.forEach((file) => JSTSFiles.add(file));
-    return minifyTSJS(true)
-      .catch(console.error)
-      .finally(() =>
-        scriptFilenames.forEach((file) => {
-          JSTSFiles.delete(file);
-          try {
-            fs.rmSync(file);
-          } catch {}
-        })
-      );
+    }
   }
-
-  function minifyTSJS(isInline: boolean = false, file?: string): Promise<any> {
-    return esbuild
-      .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 && file) {
-            const changedFile = tsMaybeX2JS(file);
-            const [buildFilename] = getBuildNames(changedFile);
-            const js = fs.readFileSync(buildFilename, { encoding: "utf8" });
-            serverSentEvents({
-              js,
-              filename: buildFilename.split(`${BUILD_FOLDER}/`).pop()!,
-            });
-          }
-        }
-      });
+  await minifyCode();
+  for (const file of inlineFiles) {
+    if (INLINE_BUNDLE_FILE.test(file)) {
+      inlineFiles.delete(file);
+      await rm(file);
+    }
   }
-
-  function minifyCSS(filename: string, buildFilename: string) {
-    const fileText = fs.readFileSync(filename, { encoding: "utf-8" });
-    return CSSprocessor.process(fileText, {
-      ...(options as ProcessOptions),
-      from: filename,
-      to: buildFilename,
-    })
-      .then((result) => {
-        fs.writeFileSync(buildFilename, result.css);
-        taskEmitter.emit("done");
-        globHTML.emit("getReady");
-
-        if (serverSentEvents) {
-          serverSentEvents({
-            css: result.css,
-            filename: buildFilename.split(`${BUILD_FOLDER}/`).pop()!,
-          });
-        }
-      })
-      .catch((err: Error) => {
-        console.error(err);
-      });
+  for (const file of files) {
+    if (file.endsWith(".html")) {
+      await minifyHTML(file, getBuildPath(file));
+    }
   }
 
-  async function minifyHTML(filename: string, buildFilename: string) {
-    let fileText = fs.readFileSync(filename, { encoding: "utf-8" });
+  console.log(
+    `🚀 Build finished in ${(performance.now() - timer).toFixed(2)}ms ✨`
+  );
 
-    let DOM;
-    if (fileText.includes("<!DOCTYPE html>") || fileText.includes("<html")) {
-      DOM = parse(fileText);
-    } else {
-      DOM = parseFragment(fileText);
-    }
+  if (isHMR && firstRun) {
+    console.log(`⌛ Waiting for file changes ...`);
 
-    // Minify Code
-    const scripts = findElements(DOM, (e) => 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?.value || isReferencedScript) return;
-
-      // Use bundled file and remove it from fs
-      const bundledFilename = buildFilename.replace(
-        ".html",
-        `-bundle-${index}.js`
+    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"
       );
-      try {
-        const scriptContent = fs.readFileSync(bundledFilename, {
-          encoding: "utf-8",
-        });
-        fs.rmSync(bundledFilename);
-        // Replace src with bundled code
-        //@ts-ignore
-        scriptTextNode.value = scriptContent.replace(
-          TEMPLATE_LITERAL_MINIFIER,
-          " "
-        );
-      } catch {}
-    });
 
-    // Minify Inline Style
-    const styles = findElements(DOM, (e) => getTagName(e) === "style");
-    for (const style of styles) {
-      const node = style.childNodes[0];
-      //@ts-ignore
-      const styleContent = node?.value;
-      if (!styleContent) continue;
-
-      const { css } = await CSSprocessor.process(styleContent, {
-        ...(options as ProcessOptions),
-        from: undefined,
+      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);
       });
-      //@ts-ignore
-      node.value = css;
     }
 
-    fileText = serialize(DOM);
+    const watcher = watch(bundleConfig.src);
+    watcher.on("add", async (file) => {
+      file = String.raw`${file}`.replace(/\\/g, "/"); // glob and chokidar diff
+      if (files.includes(file) || INLINE_BUNDLE_FILE.test(file)) {
+        return;
+      }
 
-    // Minify HTML
-    fileText = await minify(fileText, {
-      collapseWhitespace: true,
-      removeComments: true,
-    });
+      await rebuild(file);
 
-    if (isCritical) {
-      const buildFilenameArr = buildFilename.split("/");
-      const fileWithBase = buildFilenameArr.pop();
-      const buildDir = buildFilenameArr.join("/");
-
-      // critical is generating the files on the fs
-      return critical
-        .generate({
-          base: buildDir,
-          html: fileText,
-          target: fileWithBase,
-          inline: !isCSP,
-          extract: true,
-          rebase: () => {},
-        })
-        .then(({ html }: any) => {
-          taskEmitter.emit("done");
-
-          if (serverSentEvents) {
-            serverSentEvents({
-              html: addHMRCode(html, buildFilename),
-              filename: buildFilename,
-            });
-          }
-        })
-        .catch((err: Error) => {
-          console.error(err);
-        });
-    } else {
-      fs.writeFileSync(buildFilename, fileText);
+      console.log(`⚡ added ${file} to the build`);
+    });
+    watcher.on("change", async (file) => {
+      if (INLINE_BUNDLE_FILE.test(file)) {
+        return;
+      }
+      file = String.raw`${file}`.replace(/\\/g, "/");
 
-      taskEmitter.emit("done");
+      await rebuild(file);
 
-      if (serverSentEvents) {
-        serverSentEvents({
-          html: addHMRCode(fileText, buildFilename),
-          filename: buildFilename,
-        });
+      console.log(`⚡ modified ${file} on the build`);
+    });
+    watcher.on("unlink", async (file) => {
+      if (INLINE_BUNDLE_FILE.test(file)) {
+        return;
       }
-    }
-  }
+      file = String.raw`${file}`.replace(/\\/g, "/");
 
-  // Helper functions from here
-  function createPostCSSConfig() {
-    try {
-      return postcssrc.sync({});
-    } catch {
-      return { plugins: [cssnano], options: {}, file: "" };
-    }
-  }
+      inlineFiles.delete(file);
+      const buildFile = getBuildPath(file)
+        .replace(".ts", ".js")
+        .replace(".jsx", ".js");
+      await rm(buildFile);
 
-  function getBuildNames(filename: string) {
-    const buildFilename = filename.replace(
-      `${SOURCE_FOLDER}/`,
-      `${BUILD_FOLDER}/`
-    );
-    const buildFilenameArr = buildFilename.split("/");
-    buildFilenameArr.pop();
-    const buildPathDir = buildFilenameArr.join("/");
-    return [buildFilename, buildPathDir];
-  }
+      const bfDir = buildFile.split("/").slice(0, -1).join("/");
+      const stats = await readdir(bfDir);
+      if (!stats.length) await rm(bfDir);
 
-  async function rebuild(filename: string) {
-    const [buildFilename] = getBuildNames(filename);
+      console.log(`⚡ deleted ${file} from the build`);
+    });
 
-    if (/\.(j|t)sx?$/.test(filename)) {
-      JSTSFiles.add(filename);
-    } else if (filename.endsWith(".css")) {
-      await minifyCSS(filename, buildFilename);
-    }
+    async function rebuild(file: string) {
+      // Rebuild all CSS because a change in any file might need to trigger PostCSS zu rebuild(e.g. Tailwind CSS)
+      await rebuildCSS(files.filter((file) => file.endsWith(".css")));
 
-    glob(`${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);
+      let html;
+      if (file.endsWith(".html")) {
+        // To refill the inlineFiles needed to build JS
+        for (const htmlFile of files.filter((file) => file.endsWith(".html"))) {
+          await writeInlineScripts(htmlFile);
         }
-
-        if (/\.(j|t)sx?$/.test(filename) && serverSentEvents) {
-          const jsFile = tsMaybeX2JS(buildFilename);
-          try {
-            // Do not try to send empty files
-            serverSentEvents({
-              js: fs.readFileSync(jsFile, { encoding: "utf-8" }),
-              filename: jsFile.split(`${BUILD_FOLDER}/`).pop()!,
-            });
-          } catch {}
+        await minifyCode();
+        for (const file of inlineFiles) {
+          if (INLINE_BUNDLE_FILE.test(file)) {
+            inlineFiles.delete(file);
+            await rm(file);
+          }
         }
-      }
-    });
-  }
-
-  const getHMRCode = (
-    filename: string,
-    id: string
-  ) => `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}\`;
+        html = await minifyHTML(file, getBuildPath(file));
+      } else if (/\.(jsx?|tsx?)$/.test(file)) {
+        inlineFiles.add(file);
+        await minifyCode();
       } else {
-        newHTML = html\`<body>\${dataObj.html}</body>\`
-        isBody = true
+        const { stdout } = await execFilePromise("node", [handlerFile, file]);
+        if (String(stdout)) console.log("📋 Logging Handler: ", String(stdout));
       }
 
-      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;
+      serverSentEvents?.({ file, html });
+    }
+  }
+}
 
-        // Looks like JS did not reload? Last resort - hard refresh
-        if (newElementCount < 5 && Math.abs(newElementCount - oldElementCount) > 10) {
-          location.reload() 
-        }
-      }
-      setInsertDiffing(false);
-      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) {
-      window.onceEveryXTime(100, window.updateJS, [updateAttr]);
+async function minifyCSS(file: string, buildFile: string) {
+  try {
+    const fileText = await readFile(file, { encoding: "utf-8" });
+    const result = await CSSprocessor.process(fileText, {
+      ...options,
+      from: file,
+      to: buildFile,
+    });
+    await writeFile(buildFile, result.css);
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+async function minifyCode(): Promise<unknown> {
+  try {
+    return await esbuild.build({
+      entryPoints: Array.from(inlineFiles),
+      charset: "utf8",
+      format: "esm",
+      incremental: isHMR,
+      sourcemap: isHMR,
+      splitting: true,
+      define: {
+        "process.env.NODE_ENV": `"${process.env.NODE_ENV}"`,
+      },
+      loader: { ".js": "jsx", ".ts": "tsx" },
+      bundle: true,
+      minify: true,
+      outdir: bundleConfig.build,
+      outbase: bundleConfig.src,
+      ...bundleConfig.esbuild,
+    });
+    // Stop app from crashing.
+  } catch (err: any) {
+    if (!isHMR) {
+      console.error(err);
     }
 
-    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));
+    let missingPkg = false;
+    if (err?.errors) {
+      for (const error of err.errors) {
+        if (error.text?.startsWith("Could not resolve")) {
+          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,
+          ]);
         }
       }
-    };
-  });
 
-  if (!window.updateCSS) {
-    window.updateCSS = function updateCSS(updateAttr) {
-      $$('link').forEach(updateAttr("href"));
-      window.fnToLastCalled.set(window.updateCSS, performance.now())
+      if (missingPkg) {
+        missingPkg = false;
+        return minifyCode();
+      }
     }
   }
-  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);
-    }
+}
+
+const htmlFilesCache = new Map();
+async function writeInlineScripts(file: string) {
+  let fileText = await readFile(file, { encoding: "utf-8" });
+
+  let DOM;
+  if (fileText.includes("<!DOCTYPE html>") || fileText.includes("<html")) {
+    DOM = parse(fileText);
+  } else {
+    DOM = parseFragment(fileText);
   }
-  if (!window.fnToLastCalled) {
-    window.fnToLastCalled = new Map();
+
+  if (isHMR) {
+    fileText = addHMRCode(fileText, file, DOM);
   }
-  if (!window.onceEveryXTime) {
-    window.onceEveryXTime = function (time, fn, params) {
-      if (!window.fnToLastCalled.has(fn) || performance.now() - window.fnToLastCalled.get(fn) > time) {
-        fn(...params)
-      }
-    }
+  htmlFilesCache.set(file, [fileText, DOM]);
+
+  const scripts = findElements(DOM, (e) => getTagName(e) === "script");
+  for (let index = 0; index < scripts.length; index++) {
+    const script = scripts[index];
+    const scriptTextNode = script.childNodes[0] as TextNode;
+    const isReferencedScript = script.attrs.find((a) => a.name === "src");
+    const scriptContent = scriptTextNode?.value;
+    if (!scriptContent || isReferencedScript) continue;
+
+    const jsFile = file.replace(".html", `-bundle-${index}.tsx`);
+    inlineFiles.add(jsFile);
+    await writeFile(jsFile, scriptContent);
   }
-}`;
+}
 
-  function randomText() {
-    return Math.random().toString(32).slice(2);
-  }
+async function minifyHTML(file: string, buildFile: string) {
+  let fileText, DOM;
 
-  const htmlIdMap = new Map();
-  function addHMRCode(html: string, filename: string) {
-    if (!htmlIdMap.has(filename)) {
-      htmlIdMap.set(filename, randomText());
-    }
+  if (htmlFilesCache.has(file)) {
+    const cache = htmlFilesCache.get(file);
+    fileText = cache[0];
+    DOM = cache[1];
+  } else {
+    fileText = await readFile(file, { encoding: "utf-8" });
 
-    const script = createScript(
-      { type: "module" },
-      getHMRCode(filename, htmlIdMap.get(filename))
-    );
-    let ast;
-    if (html.includes("<!DOCTYPE html>") || html.includes("<html")) {
-      ast = parse(html);
-      const headNode = findElement(ast, (e) => getTagName(e) === "head");
-      appendChild(headNode as ParentNode, script);
+    if (fileText.includes("<!DOCTYPE html>") || fileText.includes("<html")) {
+      DOM = parse(fileText);
     } else {
-      ast = parseFragment(html);
-      appendChild(ast, script);
-      ast.childNodes.forEach((node) =>
-        //@ts-ignore
-        node.attrs?.push({ name: "data-hmr", value: htmlIdMap.get(filename) })
-      );
+      DOM = parseFragment(fileText);
     }
+  }
 
-    // Burst CSS cache
-    findElements(ast, (e) => 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)}`;
-      }
-    });
+  // Minify Code
+  const scripts = findElements(DOM, (e) => getTagName(e) === "script");
+  for (let index = 0; index < scripts.length; index++) {
+    const script = scripts[index];
+    const scriptTextNode = script.childNodes[0] as TextNode;
+    const isReferencedScript = script.attrs.find((a) => a.name === "src");
+    if (!scriptTextNode?.value || isReferencedScript) continue;
+
+    // Use bundled file
+    const buildInlineScript = buildFile.replace(".html", `-bundle-${index}.js`);
 
-    return serialize(ast);
+    const scriptContent = await readFile(buildInlineScript, {
+      encoding: "utf-8",
+    });
+    await rm(buildInlineScript);
+    scriptTextNode.value = scriptContent.replace(
+      TEMPLATE_LITERAL_MINIFIER,
+      " "
+    );
   }
 
-  function createHMRHandlers(files: Array<string>) {
-    files.forEach((filename) => {
-      const newFilename = "/" + filename.replace(/src\//, "");
-      const filePath = newFilename.split("/");
-      const endName = filePath.pop();
+  // Minify Inline Style
+  const styles = findElements(DOM, (e) => getTagName(e) === "style");
+  for (const style of styles) {
+    const node = style.childNodes[0] as TextNode;
+    const styleContent = node?.value;
+    if (!styleContent) continue;
 
-      if (endName!.endsWith("index.html")) {
-        //@ts-ignore
-        fastify.get(filePath.join("/") + "/", HMRHandler);
-      }
-      //@ts-ignore
-      fastify.get(newFilename, HMRHandler);
+    const { css } = await CSSprocessor.process(styleContent, {
+      ...options,
+      from: undefined,
     });
+    node.value = css;
   }
 
-  function HMRHandler(request: FastifyRequest, reply: FastifyReply) {
-    let filename = request.url;
-    if (filename.endsWith("/")) {
-      filename += "index.html";
-    }
-    filename = BUILD_FOLDER + filename;
-    const file = fs.readFileSync(filename, {
-      encoding: "utf-8",
-    });
+  fileText = serialize(DOM);
 
-    reply.header("Content-Type", "text/html; charset=UTF-8");
-    return reply.send(addHMRCode(file, filename));
+  // Minify HTML
+  try {
+    fileText = await minify(fileText, {
+      collapseWhitespace: true,
+      removeComments: true,
+      ...bundleConfig["html-minifier-terser"],
+    });
+  } catch (e) {
+    console.error(e);
   }
 
-  function errorHandler(err: Error | null) {
-    if (err) {
+  if (!isCritical) {
+    await writeFile(buildFile, fileText);
+    return fileText;
+  } else {
+    const buildFileArr = buildFile.split("/");
+    const fileWithBase = buildFileArr.pop();
+    const buildDir = buildFileArr.join("/");
+
+    // critical is generating the files on the fs
+    try {
+      const { html } = await critical.generate({
+        base: buildDir,
+        html: fileText,
+        target: fileWithBase,
+        inline: !isSecure,
+        extract: true,
+        rebase: () => {},
+        ...bundleConfig.critical,
+      });
+      return html;
+    } catch (err) {
       console.error(err);
-      process.exit(1);
     }
   }
+}
 
-  function tsMaybeX2JS(filename: string): string {
-    return filename.replace(".ts", ".js").replace(".jsx", ".js");
+async function rebuildCSS(files: string[], config?: string) {
+  const newConfig = await getPostCSSConfig();
+  plugins = newConfig.plugins;
+  options = newConfig.options;
+  CSSprocessor = postcss(plugins as AcceptedPlugin[]);
+  for (const file of files) {
+    await minifyCSS(file, getBuildPath(file));
   }
-}
-function createDefaultServer(BUILD_FOLDER = "build") {
-  fastify = Fastify(
-    isSecure
-      ? ({
-          http2: true,
-          https: {
-            key: fs.readFileSync(path.join(process.cwd(), "localhost-key.pem")),
-            cert: fs.readFileSync(path.join(process.cwd(), "localhost.pem")),
-          },
-        } as FastifyServerOptions)
-      : void 0
-  );
-  fastify.register(fastifyStatic, {
-    root: path.join(process.cwd(), BUILD_FOLDER),
-  });
+
+  if (config) console.log(`⚡ modified ${config}.config`);
 }