evikit 2.12.0 → 2.13.0

package/README.md

@@ -61,6 +61,7 @@ Our language will be standard modern JavaScript as supported by Node.js directly
 - [Styling](#styling)
 - _TODO_ [Testing](#testing)
 - [Linting](#linting)
+- [esbuild](#esbuild)
 
 ### Create project
 
@@ -288,7 +289,7 @@ The following commands should work now:
 # Run dev server with hot reload for Preact and full restart on API change.
 npx vite dev
 
-# Build server and client for production.
+# Build client for production.
 npx tsc
 npx vite build
 ```
@@ -1004,6 +1005,36 @@ npx eslint .
 
 You can add these commands (without npx) as `format` and `lint` scripts in your `package.json`.
 
+## esbuild
+
+If you don't need Tailwind (e.g. `index.css` is enough for you) or bundle analyzer, and are ok with full-page refresh instead of hot module replacement, you can have EviKit use [esbuild](https://esbuild.github.io/) as a smaller alternative to Vite.
+
+```sh
+npm i -D esbuild
+npm install-scripts approve esbuild
+npm rm @preact/preset-vite vite vite-bundle-analyzer
+rm -f vite.config.js
+```
+
+Change the `production` call in your `index.js`:
+
+```js
+app.use(production({ prerender }));
+```
+
+The following commands should work now:
+
+```sh
+# Run dev server with watch mode.
+node --env-file=.env index.js dev
+
+# Build client for production.
+npx tsc
+node --env-file=.env index.js build
+```
+
+You can change the `dev` and `build` scripts in your `package.json` accordingly.
+
 ## License
 
 SPDX-License-Identifier: MIT

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "evikit",
   "description": "Preact/SQLite SSR framework for small web apps",
-  "version": "2.12.0",
+  "version": "2.13.0",
   "type": "module",
   "exports": {
     ".": "./index.js",
@@ -32,15 +32,22 @@
   },
   "peerDependencies": {
     "accept-language": "^3.0.20",
+    "esbuild": "^0.28.2",
     "hoofd": "^1.7.3",
     "preact": "^10.29.2",
     "preact-iso": "^2.12.0",
     "valibot": "^1.4.0"
   },
+  "peerDependenciesMeta": {
+    "esbuild": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@eslint/compat": "^2.1.0",
     "@eslint/js": "^10.0.1",
     "@types/node": "^24.13.3",
+    "esbuild": "^0.28.2",
     "eslint": "^10.4.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-perfectionist": "^5.9.0",
@@ -48,5 +55,8 @@
     "prettier": "^3.8.3",
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.59.4"
+  },
+  "allowScripts": {
+    "esbuild": true
   }
 }

package/server.d.ts

@@ -29,7 +29,7 @@ export function production({
   html,
   prerender,
 }: {
-  html: string;
+  html?: string;
   prerender({ lang, url }: { lang: string; url: string }): Promise<{
     data: object;
     head: {

package/server.js

@@ -4,7 +4,8 @@ import acceptLanguage from "accept-language";
 import { po } from "gettext-parser";
 import cluster from "node:cluster";
 import { createHash } from "node:crypto";
-import { readFile } from "node:fs/promises";
+import { existsSync } from "node:fs";
+import { readFile, unlink, writeFile } from "node:fs/promises";
 import { availableParallelism } from "node:os";
 import { h } from "preact";
 import { renderToString } from "preact-render-to-string";
@@ -207,10 +208,104 @@ export function json(output) {
   };
 }
 
+let esbuild = false;
+
 /** @param {{ listen: (port: number, callback: () => void) => { close(): void, on(event: "error", callback: (error: unknown) => void ): void } }} app */
-export function listen(app) {
+export async function listen(app) {
+  if (esbuild && cluster.isPrimary) {
+    let esbuildPort = 0;
+
+    async function makeHtml() {
+      await writeFile(
+        "./dist/index.html",
+        (await readFile("./index.html", "utf-8"))
+          .replace(
+            "/index.css",
+            "/index.css?" + (await sha256("./dist/index.css")),
+          )
+          .replace(
+            /<script[^>]+><\/script>/,
+            '<script src="/src/prerender.js?' +
+              (await sha256("./dist/src/prerender.js")) +
+              '"></script>' +
+              (esbuildPort
+                ? '<script>new EventSource("http://localhost:' +
+                  esbuildPort +
+                  '/esbuild").addEventListener("change", () => location.reload());</script>'
+                : ""),
+          ),
+      );
+    }
+
+    if (process.argv[2] == "build") {
+      const { build } = await import("esbuild");
+      if (existsSync("./dist/api.js")) {
+        await unlink("./dist/api.js");
+      }
+      await build({
+        bundle: true,
+        entryPoints: ["./index.css", "./src/prerender.js"],
+        outdir: "./dist",
+      });
+      await makeHtml();
+      return;
+    }
+
+    if (process.argv[2] == "dev" && cluster.isPrimary) {
+      const { context } = await import("esbuild");
+
+      const { watch: watchApi } = await context({
+        bundle: true,
+        entryPoints: ["./src/api.js"],
+        external: ["esbuild"],
+        outdir: "./dist",
+        platform: "node",
+      });
+      await watchApi();
+
+      const { serve: servePrerender, watch: watchPrerender } = await context({
+        bundle: true,
+        entryPoints: ["./index.css", "./src/prerender.js"],
+        outdir: "./dist",
+      });
+      await watchPrerender();
+      ({ port: esbuildPort } = await servePrerender({
+        cors: {
+          origin:
+            process.env["ORIGIN"] ||
+            `http://localhost:${Number(process.env["PORT"]) || 5173}`,
+        },
+      }));
+
+      let subprocess = cluster.fork();
+      let lastHash =
+        (await sha256("./dist/api.js")) +
+        (await sha256("./dist/index.css")) +
+        (await sha256("./dist/src/prerender.js"));
+      await makeHtml();
+      setInterval(async () => {
+        const hash =
+          (await sha256("./dist/api.js")) +
+          (await sha256("./dist/index.css")) +
+          (await sha256("./dist/src/prerender.js"));
+        if (hash != lastHash) {
+          lastHash = hash;
+          await makeHtml();
+          subprocess.kill();
+          subprocess = cluster.fork();
+        }
+      }, 1000);
+    }
+
+    await makeHtml();
+  }
+
   const port = Number(process.env["PORT"]) || 5173;
-  if (cluster.isPrimary && parallelism() > 1) {
+  if (
+    cluster.isPrimary &&
+    parallelism() > 1 &&
+    (!esbuild || !process.argv[2])
+  ) {
     /** @type {{ on(event: "message", callback: (message: any) => void): void, send(message: any, _: any, options: { keepOpen: boolean }): void }[]} */
     const forks = [];
     for (let i = 0; i < parallelism(); i++) {
@@ -226,7 +321,7 @@ export function listen(app) {
         }
       });
     }
-  } else {
+  } else if ((esbuild && !process.argv[2]) || cluster.isPrimary) {
     const server = app.listen(port, () => {
       if (cluster.isPrimary || process.env["i"] == "0") {
         console.log(
@@ -244,14 +339,20 @@ export function listen(app) {
   }
 }
 
-/** @param {{ html: string, prerender({ cookie, lang, url }: { cookie?: string | undefined, lang: string, url: string }): Promise<{ data: {}, head: { elements: Set<{ props: { [k: string]: string }, type: string }>, lang: string, title: string }, html: string }> }} props */
+/** @param {{ html?: string, prerender({ cookie, lang, url }: { cookie?: string | undefined, lang: string, url: string }): Promise<{ data: {}, head: { elements: Set<{ props: { [k: string]: string }, type: string }>, lang: string, title: string }, html: string }> }} props */
 export function production({ html, prerender }) {
+  if (!html) {
+    esbuild = true;
+  }
   /**
    * @param {import("node:http").IncomingMessage} req
    * @param {import("node:http").ServerResponse<import("node:http").IncomingMessage>} res
    */
   return async function onRequest(req, res) {
     try {
+      if (!html) {
+        html = await readFile("./dist/index.html", "utf-8");
+      }
       const rendered = await prerender({
         cookie: req.headers.cookie,
         lang: acceptLanguage.get(req.headers["accept-language"]) || "en",
@@ -271,9 +372,7 @@ export function production({ html, prerender }) {
       res.end(
         html
           .replace(/lang=".+?"/, () => `lang="${rendered.head.lang}"`)
-          .replace(/<title>.+<\/title>/, () =>
-            renderToString(h("title", null, rendered.head.title)),
-          )
+          .replace(/<title>.+<\/title>/, "")
           .replace(/<!--app-head-->[\s\S]+?<body/, (match) =>
             match
               .replace(/<link[^>]+>/g, (link) =>
@@ -283,19 +382,20 @@ export function production({ html, prerender }) {
           )
           .replace(
             `<!--app-head-->`,
-            [...rendered.head.elements.values()]
-              .map(
-                ({ props, type }) =>
-                  `<${type} ` +
-                  Object.entries(props)
-                    .map(([name, value]) => `${name}="${value}"`)
-                    .join(" ") +
-                  (type == "script" ? `</${type}>` : " />"),
-              )
-              .join(""),
+            renderToString(h("title", null, rendered.head.title)) +
+              [...rendered.head.elements.values()]
+                .map(
+                  ({ props, type }) =>
+                    `<${type} ` +
+                    Object.entries(props)
+                      .map(([name, value]) => `${name}="${value}"`)
+                      .join(" ") +
+                    (type == "script" ? `</${type}>` : " />"),
+                )
+                .join(""),
           )
           .replace(
-            /(<div id="app">)[\s\S]+<!--app-html-->/,
+            /(<div id="app">)[\s\S]*<!--app-html-->/,
             (_, div) =>
               div +
               rendered.html +
@@ -666,3 +766,12 @@ function ArrayOf(input) {
 function parallelism() {
   return Number(process.env["PARALLELISM"]) || availableParallelism();
 }
+
+/** @param {string} file */
+async function sha256(file) {
+  return existsSync(file)
+    ? createHash("sha256")
+        .update(await readFile(file))
+        .digest("hex")
+    : "";
+}