bench: Hono framework req/s variant + home-page chart

scripts/hono.js serves the same hello-world through Hono — a real
third-party web framework pulled from node_modules — to show esrun runs
unmodified npm ESM packages, not just runtime:http. Hono's Web-standard
app.fetch plugs into runtime:http / Bun.serve / Deno.serve; Node uses
@hono/node-server. rps.sh gains a SERVER selector (SERVER=scripts/hono.js).
esrun stays at parity (~40k req/s, marginally highest).

Adds RpsChart (higher-is-better) to the home-page benchmark card with the
measured Hono numbers. node_modules is gitignored; manifest + lockfile tracked.

Author: Thanga-Ganapathy

.gitignore

@@ -3,6 +3,9 @@
 debug
 target
 
+# Installed JS packages (bench framework deps; manifest + lockfile are tracked)
+node_modules
+
 # These are backup files generated by rustfmt
 **/*.rs.bk
 

bench/README.md

@@ -179,7 +179,36 @@ earlier "2× slower" reading came from the in-process `http` workload, where esr
 pays for the client and the server on the same thread; measured server-to-client
 it isn't there.
 
+### Through a framework (Hono)
+
+The same shape served through [Hono] — a real, third-party web framework —
+instead of each runtime's bare server. This is the framework counterpart to the
+Bun framework charts: it shows esrun runs **unmodified npm ESM packages** off
+`node_modules`, not just its own server. Hono is Web-standard
+(`app.fetch(request) -> Response`), so it plugs straight into `runtime:http`,
+`Bun.serve`, and `Deno.serve`; Node uses Hono's `@hono/node-server` adapter.
+
+```sh
+cd bench && bun install               # hono + @hono/node-server
+SERVER=scripts/hono.js bench/rps.sh   # -c 100 -p 1
+```
+
+```
+runtime |      req/sec
+--------+------------
+node    |      33,358
+bun     |      39,686
+deno    |      40,150
+esrun   |      40,220
+```
+
+esrun is again at parity (marginally highest), and the framework layer costs all
+four about the same as the bare server — Express, by contrast, cannot run on
+esrun at all (it is CommonJS and needs `node:http`'s `(req, res)` API; esrun is
+ESM-only and rejects `node:` builtins).
+
 [autocannon]: https://github.com/mcollina/autocannon
+[Hono]: https://hono.dev
 
 ## Caveats
 

bench/bun.lock

@@ -0,0 +1,8 @@
+{
+  "private": true,
+  "description": "Dev deps for the cross-runtime benchmark — Hono powers scripts/hono.js (rps.sh SERVER=scripts/hono.js). Install with: bun install",
+  "dependencies": {
+    "@hono/node-server": "^2.0.4",
+    "hono": "^4.12.25"
+  }
+}

bench/package.json

@@ -11,14 +11,17 @@
 # Needs `autocannon` (used via `bunx autocannon`, or a global install). If
 # neither is available the script explains and exits.
 #
-# Usage:  bench/rps.sh                       (auto-detects installed runtimes)
-#         CONN=250 PIPELINE=20 bench/rps.sh  (higher load / HTTP pipelining)
+# Usage:  bench/rps.sh                        (auto-detects installed runtimes)
+#         CONN=250 PIPELINE=20 bench/rps.sh   (higher load / HTTP pipelining)
 #         DURATION=10 bench/rps.sh
+#         SERVER=scripts/hono.js bench/rps.sh (serve through the Hono framework;
+#                                              run `bun add hono @hono/node-server` first)
 set -uo pipefail
 cd "$(dirname "$0")"
 
 ESRUN="${ESRUN:-../target/release/esrun}"
-PORT=3000   # scripts/helloserver.js binds this fixed port
+SERVER="${SERVER:-scripts/helloserver.js}"  # the hello-world server to run
+PORT=3000   # the server scripts bind this fixed port
 CONN="${CONN:-100}"
 PIPELINE="${PIPELINE:-1}"
 DURATION="${DURATION:-10}"
@@ -56,7 +59,7 @@ trap cleanup EXIT
 # Pulls req/s + latency out of autocannon's JSON for one runtime.
 measure() {
   local cmd="$1" j
-  $cmd scripts/helloserver.js >/dev/null 2>&1 &
+  $cmd "$SERVER" >/dev/null 2>&1 &
   SERVER_PID=$!
   # Wait for the port to accept connections (up to ~5s).
   for _ in $(seq 50); do
@@ -73,6 +76,7 @@ print(f\"{d['requests']['average']:.0f} {d['latency']['average']} {d['latency'][
 }
 
 echo "HTTP requests/sec — hello-world plaintext (\"Hello, World!\")"
+echo "server: $SERVER"
 echo "load: autocannon -c $CONN -p $PIPELINE -d ${DURATION}s on 127.0.0.1:$PORT"
 echo
 printf "%-7s | %12s | %11s | %11s\n" "runtime" "req/sec" "avg lat" "p99 lat"

bench/rps.sh

@@ -0,0 +1,27 @@
+// Same hello-world req/s shape as helloserver.js, but served through Hono — a
+// real, third-party web framework — to show esrun runs unmodified npm ESM
+// packages, not just its own server. This is the "framework" counterpart to the
+// Bun framework charts (e.g. their Express number). Hono is Web-standard: its
+// `app.fetch(request) -> Response` handler plugs straight into every runtime's
+// native server. Node has no Web-standard server, so it uses Hono's official
+// @hono/node-server adapter. Run by rps.sh via SERVER=scripts/hono.js.
+//
+// Install once (in bench/):  bun add hono @hono/node-server
+import { Hono } from "hono";
+
+const app = new Hono();
+app.get("/", (c) => c.text("Hello, World!"));
+
+const PORT = 3000;
+
+if (typeof Deno !== "undefined") {
+  Deno.serve({ hostname: "127.0.0.1", port: PORT, onListen() {} }, app.fetch);
+} else if (typeof Bun !== "undefined") {
+  Bun.serve({ hostname: "127.0.0.1", port: PORT, fetch: app.fetch });
+} else if (typeof process !== "undefined" && process.versions && process.versions.node) {
+  const { serve } = await import("@hono/node-server");
+  serve({ fetch: app.fetch, hostname: "127.0.0.1", port: PORT });
+} else {
+  const { serve } = await import("runtime:http");
+  serve({ hostname: "127.0.0.1", port: PORT }, app.fetch);
+}

bench/scripts/hono.js

@@ -1,4 +1,5 @@
 import BenchChart from "../components/BenchChart.jsx";
+import RpsChart from "../components/RpsChart.jsx";
 import InstallBox from "../components/InstallBox.jsx";
 import StatusIcon from "../components/StatusIcon.jsx";
 
@@ -89,6 +90,9 @@ export default function HomePage() {
                 </span>
               </div>
               <BenchChart metrics={HERO_METRICS} />
+              <div className="mt-5 border-t border-zinc-100 pt-5">
+                <RpsChart />
+              </div>
               <a
                 href="/docs/benchmarks"
                 className="mt-5 inline-block text-xs font-medium text-brand-600 hover:text-brand-700"

site/app/page.jsx

@@ -0,0 +1,70 @@
+// Higher-is-better companion to BenchChart for the HTTP requests/sec result
+// (bench/rps.sh). Data is inline because it comes from an external load
+// generator (autocannon), not the bench/run.sh JSON the other charts read.
+//
+// NOTE: the @opentf/web compiler rewrites `.map()` into a reactive list helper,
+// so non-render computations must use plain loops, and dynamic styles must be
+// objects (a style string becomes Object.assign(..., str)).
+const LABELS = { esrun: "esrun", bun: "Bun", node: "Node.js", deno: "Deno" };
+
+// req/s, Hono hello-world over autocannon -c 100, one Linux x86-64 box.
+const ROW = { esrun: 40220, deno: 40150, bun: 39686, node: 33358 };
+const ORDER = ["esrun", "deno", "bun", "node"];
+
+function fmt(v) {
+  return (v / 1000).toFixed(1) + "k";
+}
+
+export default function RpsChart() {
+  let max = 0;
+  let winner = null;
+  for (const rt of ORDER) {
+    if (ROW[rt] > max) {
+      max = ROW[rt];
+      winner = rt;
+    }
+  }
+
+  return (
+    <div>
+      <div className="mb-1.5 flex items-baseline justify-between">
+        <span className="text-xs font-semibold uppercase tracking-wider text-zinc-500">
+          HTTP requests/sec · Hono hello-world
+        </span>
+        <span className="text-[10px] text-zinc-400">higher is better</span>
+      </div>
+      <div className="space-y-1.5">
+        {ORDER.map((rt) => {
+          const pct = Math.max((ROW[rt] / max) * 100, 2);
+          const isWin = rt === winner;
+          return (
+            <div className="flex items-center gap-2.5">
+              <span className="w-14 shrink-0 text-right text-[11px] font-medium text-zinc-600">
+                {LABELS[rt]}
+              </span>
+              <div className="h-3 flex-1 overflow-hidden rounded-full bg-zinc-100">
+                <div
+                  className={
+                    isWin
+                      ? "h-full rounded-full bg-emerald-500"
+                      : "h-full rounded-full bg-zinc-300"
+                  }
+                  style={{ width: pct + "%" }}
+                />
+              </div>
+              <span
+                className={
+                  isWin
+                    ? "w-14 shrink-0 text-right text-[11px] font-semibold tabular-nums text-emerald-700"
+                    : "w-14 shrink-0 text-right text-[11px] tabular-nums text-zinc-500"
+                }
+              >
+                {fmt(ROW[rt])}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}