evikit 2.12.0 → 2.14.0

package/README.md

@@ -59,8 +59,10 @@ Our language will be standard modern JavaScript as supported by Node.js directly
     - [File upload](#file-upload)
 - [Translation](#translation)
 - [Styling](#styling)
+  - [EviKit CSS](#evikit-css)
 - _TODO_ [Testing](#testing)
 - [Linting](#linting)
+- [esbuild](#esbuild)
 
 ### Create project
 
@@ -288,7 +290,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
 ```
@@ -880,7 +882,9 @@ export function acceptLanguages() {
 
 ### Styling
 
-EviKit is decoupled from styling, it's up to you how to design your app. I've had good experience with [daisyUI](https://daisyui.com/). Let's see how to set it up.
+#### Tailwind and daisyUI
+
+I've had good experience styling apps with [daisyUI](https://daisyui.com/). Let's see how to set it up.
 
 ```sh
 npm i -D @tailwindcss/vite daisyui
@@ -924,6 +928,126 @@ Change your `index.html` like this:
 
 Style your app however you like.
 
+#### EviKit CSS
+
+There's a stylesheet with a CSS reset and a small number of utility classes named like Tailwind and daisyUI. I use it to build my EviKit-based apps [with esbuild](#esbuild) and no plugins:
+
+- [EviKit's own landing page](https://codeberg.org/nykula/create-evikit)
+- [Lanquiz trivia game](https://codeberg.org/nykula/lanquiz)
+- [Yoself container monitoring tool](https://codeberg.org/nykula/yoself)
+
+The styles are written from scratch and aren't meant to replicate Tailwind exactly, just make apps look acceptable. In particular, they use a different palette, [X11 colors](https://www.w3.org/TR/css-color-3/) as provided by CSS itself; think late 90s, not web3.
+
+To try them, import EviKit in `index.css`:
+
+```css
+@import "evikit/css";
+```
+
+And change your `index.html` like in the above instructions for Tailwind.
+
+Margin:
+
+- m-8
+- mb-2 mb-4 sm:mb-4 -mb-4 mb-6 mb-8
+- mt-0 mt-2 mt-4 -mt-4 mt-6
+- mx-0 mx-auto
+- my-2 my-4 my-8
+
+Padding:
+
+- p-4 p-6 p-8 lg:p-8
+- pb-8
+
+Gap:
+
+- gap-2 gap-4 gap-8
+- gap-x-4
+- gap-y-6
+
+Width:
+
+- max-w-full sm:max-w-sm max-w-lg max-w-2xl max-w-5xl
+- w-32 w-auto w-fit w-full
+
+Height:
+
+- h-auto
+- min-h-screen
+
+Font:
+
+- font-thin font-semibold font-bold
+- tabular-nums
+- text-base
+- text-sm lg:text-sm
+- text-lg
+- text-xl lg:text-xl
+- text-2xl
+- lg:text-3xl
+- text-4xl lg:text-4xl
+- tracking-wider
+- uppercase
+- whitespace-nowrap
+
+Image:
+
+- bg-center
+- bg-cover
+- object-contain
+
+Layout:
+
+- absolute right-2 top-2
+- contents
+- flex flex-col flex-wrap
+- grid
+- grid-cols-1
+- grid-cols-2 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2
+- lg:grid-cols-3
+- lg:grid-cols-4
+- 2xl:grid-cols-6
+- hidden lg:hidden
+- items-center justify-center
+- overflow-auto overflow-hidden
+- row-span-2
+- text-center sm:text-center md:text-center
+
+Border:
+
+- border lg:border
+- border-b
+- !border-none lg:border-none
+- rounded-lg lg:rounded-lg
+- rounded-xl
+- shadow-sm lg:shadow-sm
+
+Component:
+
+- badge badge-info
+- btn btn-ghost btn-disabled
+- fieldset fieldset-legend label input
+- link
+- lg:table table-zebra
+
+Color:
+
+- opacity-0 opacity-50
+- bg-gray-50 bg-gray-100
+- !bg-transparent
+- border-gray-100
+- text-green-400
+- text-orange-400
+- text-red-400
+- fill-amber-300/[50%] stroke-amber-500 text-amber-400
+- fill-cyan-300/[50%] stroke-cyan-500 text-cyan-400
+- fill-fuchsia-300/[50%] stroke-fuchsia-500 text-fuchsia-400
+- fill-indigo-300/[50%] stroke-indigo-500 text-indigo-400
+- fill-lime-300/[50%] stroke-lime-500 text-lime-400
+- fill-purple-300/[50%] stroke-purple-500 text-purple-400
+- fill-teal-300/[50%] stroke-teal-500 text-teal-400
+- fill-yellow-300/[50%] stroke-yellow-500 text-yellow-400
+
 ### Background worker
 
 You can run something repeatedly in main process, not in listeners for each CPU core. In development, it will restart whenever you edit api routes.
@@ -1004,6 +1128,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. [EviKit CSS](#evikit-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/index.css

@@ -0,0 +1,717 @@
+* {
+  color: inherit;
+  font: inherit;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  text-align: inherit;
+  text-decoration: none;
+}
+
+html {
+  font-family: system-ui, sans-serif;
+  line-height: 1.5rem;
+}
+
+b {
+  font-weight: bold;
+}
+
+code {
+  font-family: monospace;
+}
+
+pre {
+  font-family: monospace;
+  font-size: 1rem;
+}
+
+summary {
+  list-style: revert;
+}
+
+/* Margin. */
+
+.m-8 {
+  margin: 2rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+@media (min-width: 640px) {
+  .sm\:mb-4 {
+    margin-bottom: 1rem;
+  }
+}
+
+.\-mb-4 {
+  margin-bottom: -1rem;
+}
+
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
+.mt-0 {
+  margin-top: 0;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.-mt-4 {
+  margin-top: -1rem;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.mx-0 {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.my-2 {
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.my-4 {
+  margin-bottom: 1rem;
+  margin-top: 1rem;
+}
+
+.my-8 {
+  margin-bottom: 2rem;
+  margin-top: 2rem;
+}
+
+/* Padding. */
+
+.p-4 {
+  padding: 1rem;
+}
+
+.p-6 {
+  padding: 1.5rem;
+}
+
+.p-8 {
+  padding: 2rem;
+}
+
+@media (min-width: 992px) {
+  .lg\:p-8 {
+    padding: 2rem;
+  }
+}
+
+.pb-8 {
+  padding-bottom: 2rem;
+}
+
+/* Gap. */
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.gap-8 {
+  gap: 2rem;
+}
+
+.gap-x-4 {
+  column-gap: 1rem;
+}
+
+.gap-y-6 {
+  row-gap: 1.5rem;
+}
+
+/* Width. */
+
+.max-w-full {
+  max-width: 100%;
+}
+
+@media (min-width: 640px) {
+  .sm\:max-w-sm {
+    max-width: 22rem;
+  }
+}
+
+.max-w-lg {
+  max-width: 32rem;
+}
+
+.max-w-2xl {
+  max-width: 40rem;
+}
+
+.max-w-5xl {
+  max-width: 60rem;
+}
+
+.w-32 {
+  width: 8rem;
+}
+
+.w-auto {
+  width: auto;
+}
+
+.w-fit {
+  width: fit-content;
+}
+
+.w-full {
+  width: 100%;
+}
+
+/* Height. */
+
+.h-auto {
+  height: auto;
+}
+
+.min-h-screen {
+  min-height: 100vh;
+}
+
+/* Font. */
+
+.font-thin {
+  font-weight: 300;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.tabular-nums {
+  font-variant-numeric: tabular-nums;
+}
+
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+@media (min-width: 992px) {
+  .lg\:text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.625rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+@media (min-width: 992px) {
+  .lg\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2.125rem;
+}
+
+@media (min-width: 992px) {
+  .lg\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+}
+
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.75rem;
+}
+
+@media (min-width: 992px) {
+  .lg\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.75rem;
+  }
+}
+
+.tracking-wider {
+  letter-spacing: 0.05rem;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+/* Image. */
+
+.bg-center {
+  background-position: center;
+}
+
+.bg-cover {
+  background-size: cover;
+}
+
+.object-contain {
+  object-fit: contain;
+}
+
+/* Layout. */
+
+.absolute {
+  position: absolute;
+}
+
+.contents {
+  display: contents;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+}
+
+.grid-cols-1 {
+  grid-template-columns: 1fr;
+}
+
+.grid-cols-2 {
+  grid-template-columns: 1fr 1fr;
+}
+
+@media (min-width: 640px) {
+  .sm\:grid-cols-2 {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:grid-cols-2 {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (min-width: 992px) {
+  .lg\:grid-cols-2 {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (min-width: 992px) {
+  .lg\:grid-cols-3 {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
+
+@media (min-width: 992px) {
+  .lg\:grid-cols-4 {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+}
+
+@media (min-width: 1200px) {
+  .\2xl\:grid-cols-6 {
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+  }
+}
+
+.hidden {
+  display: none;
+}
+
+@media (min-width: 992px) {
+  .lg\:hidden {
+    display: none;
+  }
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.right-2 {
+  right: 0.5rem;
+}
+
+.row-span-2 {
+  grid-row: 2;
+}
+
+.text-center {
+  text-align: center;
+}
+
+@media (min-width: 640px) {
+  .sm\:text-center {
+    text-align: center;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:text-center {
+    text-align: center;
+  }
+}
+
+.top-2 {
+  top: 0.5rem;
+}
+
+/* Border. */
+
+.border {
+  border: 1px solid;
+}
+
+@media (min-width: 992px) {
+  .lg\:border {
+    border: 1px solid;
+  }
+}
+
+.border-b {
+  border-bottom: 1px solid;
+}
+
+.\!border-none {
+  border: none !important;
+}
+
+@media (min-width: 992px) {
+  .lg\:border-none {
+    border: none;
+  }
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+@media (min-width: 992px) {
+  .lg\:rounded-lg {
+    border-radius: 0.5rem;
+  }
+}
+
+.rounded-xl {
+  border-radius: 1rem;
+}
+
+.shadow-sm {
+  box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.1);
+}
+
+@media (min-width: 992px) {
+  .lg\:shadow-sm {
+    box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.1);
+  }
+}
+
+/* Component. */
+
+.badge {
+  border-radius: 0.5rem;
+  display: inline-flex;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  padding: 0.0625rem 0.75rem;
+}
+
+.badge-info {
+  background-color: color-mix(in srgb, darkturquoise 6.25%, transparent);
+}
+
+.btn {
+  background-color: rgba(0, 0, 0, 0.03125);
+  border: 1px solid rgba(0, 0, 0, 0.0625);
+  border-radius: 0.25rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 600;
+  padding: 0.5rem 1rem;
+}
+
+.btn:focus,
+.btn:hover {
+  background-color: rgba(0, 0, 0, 0.125);
+}
+
+.btn-ghost:not(:focus):not(:hover) {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.btn-disabled {
+  background-color: rgba(0, 0, 0, 0.03125);
+  border-color: rgba(0, 0, 0, 0.03125);
+}
+
+.fieldset {
+  border: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-top: 0.25rem;
+}
+
+.fieldset-legend {
+  font-size: 0.75rem;
+  font-weight: bold;
+}
+
+.label {
+  display: table;
+  font-size: 0.75rem;
+}
+
+.input {
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+  max-width: 100%;
+  padding: 0.5rem 0.75rem;
+  width: 20rem;
+}
+
+.link {
+  text-decoration: underline;
+}
+
+.lg\:table {
+  border-collapse: collapse;
+  font-size: 0.875rem;
+  width: 100%;
+}
+
+@media (min-width: 992px) {
+  .lg\:table {
+    display: table;
+  }
+}
+
+.lg\:table thead th {
+  font-weight: 700;
+  opacity: 0.5;
+}
+
+.lg\:table tr > * {
+  padding: 0.75rem;
+}
+
+.table-zebra tr:nth-child(even) {
+  background-color: rgba(0, 0, 0, 0.025);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.075);
+}
+
+@media (prefers-color-scheme: dark) {
+  .table-zebra tr:nth-child(even) {
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+}
+
+/* Color. */
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-50 {
+  opacity: 0.5;
+}
+
+.bg-gray-50 {
+  background-color: rgba(0, 0, 0, 0.015625);
+}
+
+.bg-gray-100 {
+  background-color: rgba(0, 0, 0, 0.03125);
+}
+
+.\!bg-transparent {
+  background-color: transparent !important;
+}
+
+.border-gray-100 {
+  border-color: rgba(0, 0, 0, 0.03125);
+}
+
+.fill-amber-300\/\[50\%\] {
+  fill: color-mix(in srgb, chocolate 25%, transparent);
+}
+
+.fill-cyan-300\/\[50\%\] {
+  fill: color-mix(in srgb, darkcyan 25%, transparent);
+}
+
+.fill-fuchsia-300\/\[50\%\] {
+  fill: color-mix(in srgb, palevioletred 25%, transparent);
+}
+
+.fill-indigo-300\/\[50\%\] {
+  fill: color-mix(in srgb, darkolivegreen 25%, transparent);
+}
+
+.fill-lime-300\/\[50\%\] {
+  fill: color-mix(in srgb, green 25%, transparent);
+}
+
+.fill-purple-300\/\[50\%\] {
+  fill: color-mix(in srgb, darkorchid 25%, transparent);
+}
+
+.fill-teal-300\/\[50\%\] {
+  fill: color-mix(in srgb, darkturquoise 25%, transparent);
+}
+
+.fill-yellow-300\/\[50\%\] {
+  fill: color-mix(in srgb, yellowgreen 25%, transparent);
+}
+
+.stroke-amber-500 {
+  stroke: chocolate;
+}
+
+.stroke-cyan-500 {
+  stroke: darkcyan;
+}
+
+.stroke-fuchsia-500 {
+  stroke: palevioletred;
+}
+
+.stroke-indigo-500 {
+  stroke: darkolivegreen;
+}
+
+.stroke-lime-500 {
+  stroke: green;
+}
+
+.stroke-purple-500 {
+  stroke: darkorchid;
+}
+
+.stroke-teal-500 {
+  stroke: darkturquoise;
+}
+
+.stroke-yellow-500 {
+  stroke: yellowgreen;
+}
+
+.text-amber-400 {
+  color: chocolate;
+}
+
+.text-cyan-400 {
+  color: darkcyan;
+}
+
+.text-fuchsia-400 {
+  color: palevioletred;
+}
+
+.text-green-400 {
+  color: limegreen;
+}
+
+.text-indigo-400 {
+  color: darkolivegreen;
+}
+
+.text-lime-400 {
+  color: green;
+}
+
+.text-orange-400 {
+  color: orange;
+}
+
+.text-purple-400 {
+  color: darkorchid;
+}
+
+.text-red-400 {
+  color: red;
+}
+
+.text-teal-400 {
+  color: darkturquoise;
+}
+
+.text-yellow-400 {
+  color: yellowgreen;
+}

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "evikit",
   "description": "Preact/SQLite SSR framework for small web apps",
-  "version": "2.12.0",
+  "version": "2.14.0",
   "type": "module",
   "exports": {
     ".": "./index.js",
+    "./css": "./index.css",
     "./db": "./db.js",
     "./server": "./server.js",
-    "./sqlite": "./sqlite.js",
-    "./testing": "./testing.js"
+    "./sqlite": "./sqlite.js"
   },
   "bin": {
     "evikit-extract": "bin/evikit-extract.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/real-world-classes.js

@@ -0,0 +1,55 @@
+import { readFile } from "node:fs/promises";
+
+const html = await Promise.all(
+  [
+    "https://evikit.js.org",
+    "https://evikit.js.org/todo",
+    "https://yoself.nykula.com",
+    "https://yoself.nykula.com/404",
+  ].map(async (url) => await (await fetch(url)).text()),
+);
+const classes = [
+  ...new Set([
+    ...html.flatMap((html) =>
+      [...html.matchAll(/class=(?:"([^"]+)"|'([^']+)'|([^ ]+))/g)].flatMap(
+        ([, double, single, none]) =>
+          (double || single || none || "").split(" "),
+      ),
+    ),
+    ...(
+      await (
+        await fetch(
+          "https://codeberg.org/nykula/lanquiz/raw/branch/main/classes.log",
+        )
+      ).text()
+    )
+      .split("\n")
+      .filter(Boolean),
+  ]),
+]
+  .map((className) => ({
+    base: className.split(/[:!]|^!?-/).at(-1) || "",
+    className,
+    selector: `.${className.replace(/(\[|\]|[:/#!%])/g, "\\$1")}`,
+  }))
+  .filter(({ base }) => base)
+  .sort((a, b) => a.base.localeCompare(b.base));
+const css = await readFile("./index.css", "utf-8");
+const missing = classes
+  .filter(({ selector }) => !css.includes(selector))
+  .map(({ className }) => className)
+  .join("\n");
+const extra = [...css.matchAll(/\n *(\.[^ ,]+)/g)]
+  .map(([, selector]) => (selector || "").replace(/:focus|:hover/, ""))
+  .filter((selector) => !classes.some((c) => c.selector == selector))
+  .map((selector) => selector?.replace(/[.\\]/g, ""))
+  .join("\n");
+if (missing) {
+  console.log(`Missing:\n${missing}`);
+}
+if (missing && extra) {
+  console.log();
+}
+if (extra) {
+  console.log(`Extra:\n${extra}`);
+}

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")
+    : "";
+}