html-bundle 6.1.8 → 6.2.1

package/README.md

@@ -50,6 +50,17 @@ $ npm run build
 `--isCritical`: 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]`.
 
+## import
+It is also possible to start the server by importing the package. This could be useful, if you intend to add routes for local development.
+```js
+import router from "html-bundle";
+
+router.get("/test", (_req, reply) => {
+  return reply.send("hi");
+});
+```
+
+
 ## Optional Config
 
 _The CLI flags can also be set by the config. Flags set by the CLI will override the config._

package/dist/bundle.d.mts

@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+import type { Router } from "express-serve-static-core";
+import { type BuildOptions } from "esbuild";
+import { type Options } from "beasties";
+import { type Options as MinifyOptions } from "html-minifier-terser";
+declare let router: Router | undefined;
+export default router;
+export type Config = {
+    build: string;
+    src: string;
+    port: number;
+    secure: boolean;
+    esbuild?: BuildOptions;
+    "html-minifier-terser"?: MinifyOptions;
+    critical?: Options;
+    deletePrev?: boolean;
+    isCritical?: boolean;
+    hmr?: boolean;
+    handler?: string;
+    host?: string;
+    key?: Buffer;
+    cert?: Buffer;
+};

package/dist/bundle.mjs

@@ -29,7 +29,7 @@ process.env.NODE_ENV = isHMR ? "development" : "production"; // just in case oth
 let timer = performance.now();
 let { plugins, options, file: postcssFile } = await getPostCSSConfig();
 let CSSprocessor = postcss(plugins);
-let fastify;
+let router;
 const inlineFiles = new Set();
 const TEMPLATE_LITERAL_MINIFIER = /\n\s+/g;
 const INLINE_BUNDLE_FILE = /-bundle-\d+.tsx$/;
@@ -79,8 +79,9 @@ async function build(files, firstRun = true) {
     }
     console.log(`🚀 Build finished in ${(performance.now() - timer).toFixed(2)}ms ✨`);
     if (isHMR && firstRun) {
-        fastify = await createDefaultServer(isSecure);
-        await fastify.listen({ port: bundleConfig.port, host: bundleConfig.host });
+        const [dynamicRouter, server] = await createDefaultServer(isSecure);
+        router = dynamicRouter;
+        server.listen({ port: bundleConfig.port, host: bundleConfig.host });
         console.log(`💻 Server listening on http${isSecure ? "s" : ""}://${bundleConfig.host === "::" ? "localhost" : bundleConfig.host}:${bundleConfig.port} and is shared in the local network.`);
         console.log(`⌛ Waiting for file changes ...`);
         const chokidarOptions = { awaitWriteFinish: false };
@@ -289,7 +290,8 @@ async function minifyHTML(file, buildFile) {
         const type = script.attrs.find((a) => a.name === "type");
         if (!scriptTextNode?.value ||
             isReferencedScript ||
-            type?.value === "importmap")
+            type?.value === "importmap" ||
+            type?.value === "application/ld+json")
             continue;
         // Use bundled file
         const buildInlineScript = buildFile.replace(".html", `-bundle-${index}.js`);
@@ -368,3 +370,4 @@ catch (err) {
     console.error(err);
     process.exit(1);
 }
+export default router;

package/dist/utils.d.mts

@@ -0,0 +1,22 @@
+import type { Config } from "./bundle.mjs";
+import type { Router } from "express-serve-static-core";
+import { type Server } from "http";
+import { type Server as HTTPSServer } from "https";
+import postcssrc from "postcss-load-config";
+import cssnano from "cssnano";
+import { parse, parseFragment } from "parse5";
+export declare const bundleConfig: Config;
+export declare function fileCopy(file: string): Promise<void>;
+export declare function createDir(file: string): Promise<string | undefined>;
+export declare function getBuildPath(file: string): string;
+export declare let serverSentEvents: undefined | (({ file, html }: {
+    file: string;
+    html?: string;
+}) => void);
+export declare function createDefaultServer(isSecure: boolean): Promise<[Router, Server | HTTPSServer]>;
+export declare function getPostCSSConfig(): Promise<postcssrc.Result | {
+    plugins: (typeof cssnano)[];
+    options: {};
+    file: string;
+}>;
+export declare function addHMRCode(html: string, file: string, ast?: ReturnType<typeof parse | typeof parseFragment>): string;

package/dist/utils.mjs

@@ -1,7 +1,8 @@
 import { copyFile, mkdir, readFile } from "fs/promises";
 import path from "path";
-import Fastify from "fastify";
-import fastifyStatic from "@fastify/static";
+import http from "http";
+import https from "https";
+import express from "express";
 import postcssrc from "postcss-load-config";
 import cssnano from "cssnano";
 import { parse, parseFragment, serialize } from "parse5";
@@ -21,32 +22,15 @@ export function getBuildPath(file) {
 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: bundleConfig.key ||
-                    (await readFile(path.join(process.cwd(), "localhost-key.pem"))),
-                cert: bundleConfig.cert ||
-                    (await readFile(path.join(process.cwd(), "localhost.pem"))),
-            },
-        }
-        : void 0);
-    fastify.setNotFoundHandler(async (_req, reply) => {
-        reply.type("text/html");
-        const file = await readFile(path.join(process.cwd(), bundleConfig.build, "/index.html"), {
-            encoding: "utf-8",
-        });
-        return reply.send(file);
-    });
-    fastify.register(fastifyStatic, {
-        root: path.join(process.cwd(), bundleConfig.build),
-    });
-    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);
+    const router = express.Router();
+    const app = express();
+    app.use(router);
+    app.use(express.static(path.join(process.cwd(), bundleConfig.build)));
+    router.get("/hmr", (_req, reply) => {
+        reply.setHeader("Content-Type", "text/event-stream");
+        reply.setHeader("Cache-Control", "no-cache");
+        !isSecure && reply.setHeader("Connection", "keep-alive");
+        CONNECTIONS.push(reply);
         serverSentEvents = (data) => {
             if (/\.(jsx?|tsx?)$/.test(data.file)) {
                 data.file = data.file.replace(".ts", ".js").replace(".jsx", ".js");
@@ -56,7 +40,24 @@ export async function createDefaultServer(isSecure) {
             });
         };
     });
-    return fastify;
+    app.use(async (_req, res) => {
+        res.setHeader("Content-Type", "text/html");
+        const file = await readFile(path.join(process.cwd(), bundleConfig.build, "index.html"), {
+            encoding: "utf-8",
+        });
+        res.send(file);
+    });
+    return [
+        router,
+        isSecure
+            ? https.createServer({
+                key: bundleConfig.key ||
+                    (await readFile(path.join(process.cwd(), "localhost-key.pem"))),
+                cert: bundleConfig.cert ||
+                    (await readFile(path.join(process.cwd(), "localhost.pem"))),
+            }, app)
+            : http.createServer({}, app),
+    ];
 }
 export async function getPostCSSConfig() {
     try {

package/package.json

@@ -1,9 +1,15 @@
 {
   "name": "html-bundle",
-  "version": "6.1.8",
+  "version": "6.2.1",
   "description": "A very simple bundler for HTML SFC",
   "bin": "./dist/bundle.mjs",
-  "types": "./src/config.d.ts",
+  "main": "./dist/bundle.mjs",
+  "module": "./dist/bundle.mjs",
+  "exports": {
+    "import": "./dist/bundle.mjs",
+    "default": "./dist/bundle.mjs"
+  },
+  "types": "./dist/bundle.d.mts",
   "scripts": {
     "start": "tsc",
     "update": "npx npm-check-updates -u && npx typesync && npm i && npm outdated"
@@ -16,15 +22,16 @@
     "esbuild",
     "hydro-js"
   ],
-  "author": "Fabian Klingenberg <klingenberg.fabian@gmx.de> (https://klingenberg.netlify.app/)",
+  "author": "Fabian Klingenberg <klingenberg.fabian@gmx.de> (https://klingenberg.works/)",
   "license": "MIT",
   "devDependencies": {
     "@types/cssnano": "^5.1.3",
-    "@types/glob": "^8.1.0",
+    "@types/express": "~5.0.2",
+    "@types/glob": "^9.0.0",
     "@types/html-minifier-terser": "^7.0.2",
     "@types/parse5": "^7.0.0",
     "@types/postcss-load-config": "^3.0.1",
-    "typescript": "^5.6.3"
+    "typescript": "^5.8.3"
   },
   "repository": {
     "type": "git",
@@ -32,19 +39,18 @@
   },
   "bugs": "https://github.com/Krutsch/html-bundle/issues",
   "dependencies": {
-    "@fastify/static": "^8.0.2",
     "@web/parse5-utils": "^2.1.0",
     "await-spawn": "^4.0.2",
-    "beasties": "^0.1.0",
-    "chokidar": "^4.0.1",
-    "cssnano": "^7.0.6",
-    "esbuild": "^0.24.0",
-    "fastify": "^5.0.0",
-    "glob": "^11.0.0",
+    "beasties": "^0.4.0",
+    "chokidar": "^5.0.0",
+    "cssnano": "^7.0.7",
+    "esbuild": "^0.27.0",
+    "express": "^5.1.0",
+    "glob": "^13.0.0",
     "html-minifier-terser": "^7.2.0",
-    "hydro-js": "^1.5.22",
-    "parse5": "^7.2.0",
-    "postcss": "^8.4.47",
+    "hydro-js": "^1.8.8",
+    "parse5": "^8.0.0",
+    "postcss": "^8.5.4",
     "postcss-load-config": "^6.0.1"
   }
 }

package/src/bundle.mts

@@ -2,6 +2,7 @@
 
 import type { Node, TextNode } from "@web/parse5-utils";
 import type { AcceptedPlugin } from "postcss";
+import type { Router } from "express-serve-static-core";
 import { performance } from "perf_hooks";
 import { readFile, rm, writeFile, readdir, lstat } from "fs/promises";
 import { execFile } from "child_process";
@@ -9,9 +10,10 @@ import { promisify } from "util";
 import { sep } from "path";
 import { glob } from "glob";
 import postcss from "postcss";
-import esbuild from "esbuild";
-import Beasties from "beasties";
-import { minify } from "html-minifier-terser";
+import express from "express";
+import esbuild, { type BuildOptions } from "esbuild";
+import Beasties, { type Options } from "beasties";
+import { minify, type Options as MinifyOptions } from "html-minifier-terser";
 import { watch } from "chokidar";
 import { serialize, parse, parseFragment } from "parse5";
 import { getTagName, findElements } from "@web/parse5-utils";
@@ -44,7 +46,7 @@ process.env.NODE_ENV = isHMR ? "development" : "production"; // just in case oth
 let timer = performance.now();
 let { plugins, options, file: postcssFile } = await getPostCSSConfig();
 let CSSprocessor = postcss(plugins as AcceptedPlugin[]);
-let fastify;
+let router: Router | undefined;
 const inlineFiles = new Set<string>();
 const TEMPLATE_LITERAL_MINIFIER = /\n\s+/g;
 const INLINE_BUNDLE_FILE = /-bundle-\d+.tsx$/;
@@ -92,16 +94,17 @@ async function build(files: string[], firstRun = true) {
   }
 
   console.log(
-    `🚀 Build finished in ${(performance.now() - timer).toFixed(2)}ms ✨`
+    `🚀 Build finished in ${(performance.now() - timer).toFixed(2)}ms ✨`,
   );
 
   if (isHMR && firstRun) {
-    fastify = await createDefaultServer(isSecure);
-    await fastify.listen({ port: bundleConfig.port, host: bundleConfig.host });
+    const [dynamicRouter, server] = await createDefaultServer(isSecure);
+    router = dynamicRouter;
+    server.listen({ port: bundleConfig.port, host: bundleConfig.host });
     console.log(
       `💻 Server listening on http${isSecure ? "s" : ""}://${
         bundleConfig.host === "::" ? "localhost" : bundleConfig.host
-      }:${bundleConfig.port} and is shared in the local network.`
+      }:${bundleConfig.port} and is shared in the local network.`,
     );
 
     console.log(`⌛ Waiting for file changes ...`);
@@ -111,21 +114,21 @@ async function build(files: string[], firstRun = true) {
       const postCSSWatcher = watch(postcssFile, chokidarOptions);
       const tailwindCSSWatcher = watch(
         postcssFile.replace("postcss", "tailwind"),
-        chokidarOptions
+        chokidarOptions,
       ); // Assuming that the file ext is the same
       const tsConfigWatcher = watch(
         postcssFile.split("\\").slice(0, -1).join("\\") + "\\tsconfig.json",
-        chokidarOptions
+        chokidarOptions,
       );
 
       const cssFiles = files.filter((file) => file.endsWith(".css"));
       postCSSWatcher.on(
         "change",
-        async () => await rebuildCSS(cssFiles, "postcss")
+        async () => await rebuildCSS(cssFiles, "postcss"),
       );
       tailwindCSSWatcher.on(
         "change",
-        async () => await rebuildCSS(cssFiles, "tailwind")
+        async () => await rebuildCSS(cssFiles, "tailwind"),
       );
       tsConfigWatcher.on("change", async () => {
         timer = performance.now();
@@ -302,7 +305,7 @@ async function writeInlineScripts(file: string) {
     const script = scripts[index];
     const scriptTextNode = script.childNodes[0] as TextNode;
     const isReferencedScript = script.attrs.find(
-      (a: { name: string }) => a.name === "src"
+      (a: { name: string }) => a.name === "src",
     );
     const type = script.attrs.find((a: { name: string }) => a.name === "type");
     const scriptContent = scriptTextNode?.value;
@@ -338,13 +341,14 @@ async function minifyHTML(file: string, buildFile: string) {
     const script = scripts[index];
     const scriptTextNode = script.childNodes[0] as TextNode;
     const isReferencedScript = script.attrs.find(
-      (a: { name: string }) => a.name === "src"
+      (a: { name: string }) => a.name === "src",
     );
     const type = script.attrs.find((a: { name: string }) => a.name === "type");
     if (
       !scriptTextNode?.value ||
       isReferencedScript ||
-      type?.value === "importmap"
+      type?.value === "importmap" ||
+      type?.value === "application/ld+json"
     )
       continue;
 
@@ -358,7 +362,7 @@ async function minifyHTML(file: string, buildFile: string) {
       await rm(buildInlineScript);
       scriptTextNode.value = scriptContent.replace(
         TEMPLATE_LITERAL_MINIFIER,
-        " "
+        " ",
       );
     } catch {}
   }
@@ -431,3 +435,22 @@ try {
   console.error(err);
   process.exit(1);
 }
+
+export default router;
+
+export type Config = {
+  build: string;
+  src: string;
+  port: number;
+  secure: boolean;
+  esbuild?: BuildOptions;
+  "html-minifier-terser"?: MinifyOptions;
+  critical?: Options;
+  deletePrev?: boolean;
+  isCritical?: boolean;
+  hmr?: boolean;
+  handler?: string;
+  host?: string;
+  key?: Buffer;
+  cert?: Buffer;
+};

package/src/utils.mts

@@ -1,9 +1,11 @@
 import type { Node } from "@web/parse5-utils";
-import type { FastifyServerOptions } from "fastify";
+import type { Config } from "./bundle.mjs";
+import type { Router } from "express-serve-static-core";
 import { copyFile, mkdir, readFile } from "fs/promises";
 import path from "path";
-import Fastify from "fastify";
-import fastifyStatic from "@fastify/static";
+import http, { type Server } from "http";
+import https, { type Server as HTTPSServer } from "https";
+import express from "express";
 import postcssrc from "postcss-load-config";
 import cssnano from "cssnano";
 import { parse, parseFragment, serialize } from "parse5";
@@ -13,7 +15,6 @@ import {
   findElement,
   appendChild,
 } from "@web/parse5-utils";
-import { Config } from "./config";
 
 export const bundleConfig = await getBundleConfig();
 
@@ -35,42 +36,19 @@ const CONNECTIONS: Array<any> = []; // In order to send the HMR information
 export let serverSentEvents:
   | undefined
   | (({ file, html }: { file: string; html?: string }) => void);
-export async function createDefaultServer(isSecure: boolean) {
-  const fastify = Fastify(
-    isSecure
-      ? ({
-          http2: true,
-          https: {
-            key:
-              bundleConfig.key ||
-              (await readFile(path.join(process.cwd(), "localhost-key.pem"))),
-            cert:
-              bundleConfig.cert ||
-              (await readFile(path.join(process.cwd(), "localhost.pem"))),
-          },
-        } as FastifyServerOptions)
-      : void 0
-  );
-  fastify.setNotFoundHandler(async (_req, reply) => {
-    reply.type("text/html");
-    const file = await readFile(
-      path.join(process.cwd(), bundleConfig.build, "/index.html"),
-      {
-        encoding: "utf-8",
-      }
-    );
-    return reply.send(file);
-  });
-  fastify.register(fastifyStatic, {
-    root: path.join(process.cwd(), bundleConfig.build),
-  });
-  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);
+export async function createDefaultServer(
+  isSecure: boolean
+): Promise<[Router, Server | HTTPSServer]> {
+  const router = express.Router();
+  const app = express();
+  app.use(router);
+  app.use(express.static(path.join(process.cwd(), bundleConfig.build)));
 
+  router.get("/hmr", (_req, reply) => {
+    reply.setHeader("Content-Type", "text/event-stream");
+    reply.setHeader("Cache-Control", "no-cache");
+    !isSecure && reply.setHeader("Connection", "keep-alive");
+    CONNECTIONS.push(reply);
     serverSentEvents = (data) => {
       if (/\.(jsx?|tsx?)$/.test(data.file)) {
         data.file = data.file.replace(".ts", ".js").replace(".jsx", ".js");
@@ -80,7 +58,34 @@ export async function createDefaultServer(isSecure: boolean) {
       });
     };
   });
-  return fastify;
+
+  app.use(async (_req, res) => {
+    res.setHeader("Content-Type", "text/html");
+    const file = await readFile(
+      path.join(process.cwd(), bundleConfig.build, "index.html"),
+      {
+        encoding: "utf-8",
+      }
+    );
+    res.send(file);
+  });
+
+  return [
+    router,
+    isSecure
+      ? https.createServer(
+          {
+            key:
+              bundleConfig.key ||
+              (await readFile(path.join(process.cwd(), "localhost-key.pem"))),
+            cert:
+              bundleConfig.cert ||
+              (await readFile(path.join(process.cwd(), "localhost.pem"))),
+          },
+          app
+        )
+      : http.createServer({}, app),
+  ];
 }
 
 export async function getPostCSSConfig() {

package/tsconfig.json

@@ -6,6 +6,7 @@
     "outDir": "./dist",
     "rootDir": "./src",
     "strict": true,
+    "declaration": true,
     "skipLibCheck": true,
     "moduleResolution": "node",
     "esModuleInterop": true,

package/src/config.d.ts

@@ -1,16 +0,0 @@
-export type Config = {
-  build: string;
-  src: string;
-  port: number;
-  secure: boolean;
-  esbuild?: BuildOptions;
-  "html-minifier-terser"?: HTMLOptions;
-  critical?: Options;
-  deletePrev?: boolean;
-  isCritical?: boolean;
-  hmr?: boolean;
-  handler?: string;
-  host?: string;
-  key?: Buffer;
-  cert?: Buffer;
-};