Add CodSpeed performance benchmarks

Author: codspeed-hq[bot]

.github/workflows/codspeed.yml

@@ -0,0 +1,47 @@
+name: CodSpeed
+
+on:
+  push:
+    branches: main
+  pull_request:
+    branches: main
+  # `workflow_dispatch` allows CodSpeed to trigger backtest
+  # performance analysis in order to generate initial data.
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  id-token: write
+
+jobs:
+  benchmarks:
+    name: Run benchmarks
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          submodules: true
+
+      - name: Setup Deno
+        uses: denoland/setup-deno@v2
+        with:
+          deno-version: v2.x
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Build WASM
+        run: make
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run benchmarks
+        uses: CodSpeedHQ/action@v4
+        with:
+          mode: simulation
+          run: npx vitest bench --run

README.md

@@ -1,5 +1,7 @@
 # clayterm
 
+[![CodSpeed](https://img.shields.io/endpoint?url=https://codspeed.io/badge.json)](https://codspeed.io/bombshell-dev/clayterm?utm_source=badge)
+
 A low-level, platform-independent terminal renderer and event parser for
 JavaScript. You can use clayterm directly, or as the foundation for your own
 framework.

bench/input.bench.ts

@@ -0,0 +1,65 @@
+import { describe, bench, beforeAll } from "vitest";
+import { createInput, type Input } from "../input.ts";
+
+function bytes(...values: number[]): Uint8Array {
+  return new Uint8Array(values);
+}
+
+function str(s: string): Uint8Array {
+  return new TextEncoder().encode(s);
+}
+
+describe("input parsing", () => {
+  let input: Input;
+
+  beforeAll(async () => {
+    input = await createInput({ escLatency: 25 });
+  });
+
+  bench("printable ASCII (single char)", () => {
+    input.scan(bytes(0x61));
+  });
+
+  bench("printable ASCII (short string)", () => {
+    input.scan(str("hello world"));
+  });
+
+  bench("arrow key (CSI sequence)", () => {
+    input.scan(bytes(0x1b, 0x5b, 0x41));
+  });
+
+  bench("modifier combo (Ctrl+Shift+Arrow)", () => {
+    input.scan(bytes(0x1b, 0x5b, 0x31, 0x3b, 0x38, 0x41));
+  });
+
+  bench("SGR mouse press", () => {
+    input.scan(str("\x1b[<0;35;12M"));
+  });
+
+  bench("multi-event burst (arrows + text)", () => {
+    input.scan(
+      bytes(0x1b, 0x5b, 0x41, 0x1b, 0x5b, 0x42, 0x68, 0x69),
+    );
+  });
+
+  bench("UTF-8 3-byte character", () => {
+    input.scan(bytes(0xe4, 0xb8, 0xad));
+  });
+
+  bench("UTF-8 4-byte emoji", () => {
+    input.scan(bytes(0xf0, 0x9f, 0x8e, 0x89));
+  });
+
+  bench("Kitty protocol (CSI u with modifiers)", () => {
+    input.scan(str("\x1b[97;3u"));
+  });
+
+  let longBurst = new Uint8Array(200);
+  for (let i = 0; i < 200; i++) {
+    longBurst[i] = 0x61 + (i % 26);
+  }
+
+  bench("long input burst (200 bytes)", () => {
+    input.scan(longBurst);
+  });
+});

bench/ops.bench.ts

@@ -0,0 +1,121 @@
+import { describe, bench } from "vitest";
+import { close, fixed, grow, open, pack, rgba, text } from "../ops.ts";
+import type { Op } from "../ops.ts";
+
+function makeBuf(size: number): ArrayBuffer {
+  return new ArrayBuffer(size);
+}
+
+describe("pack", () => {
+  let simpleOps: Op[] = [
+    open("root", {
+      layout: { width: grow(), height: grow(), direction: "ttb" },
+    }),
+    text("Hello, World!"),
+    close(),
+  ];
+
+  bench("simple tree (root + text)", () => {
+    let buf = makeBuf(4096);
+    pack(simpleOps, buf, 0);
+  });
+
+  let complexOps: Op[] = [
+    open("root", {
+      layout: { width: grow(), height: grow(), direction: "ttb" },
+    }),
+    open("header", {
+      layout: {
+        width: grow(),
+        height: fixed(3),
+        padding: { left: 1, right: 1 },
+        direction: "ltr",
+      },
+      bg: rgba(30, 30, 40),
+      border: {
+        color: rgba(100, 100, 120),
+        bottom: 1,
+      },
+    }),
+    text("Title", { color: rgba(255, 255, 255), fontSize: 1 }),
+    close(),
+    open("body", {
+      layout: {
+        width: grow(),
+        height: grow(),
+        direction: "ltr",
+        gap: 1,
+      },
+    }),
+    open("sidebar", {
+      layout: {
+        width: fixed(20),
+        height: grow(),
+        direction: "ttb",
+        padding: { left: 1, right: 1, top: 1 },
+      },
+      bg: rgba(25, 25, 35),
+      border: {
+        color: rgba(60, 60, 80),
+        right: 1,
+      },
+    }),
+    text("Menu Item 1"),
+    text("Menu Item 2"),
+    text("Menu Item 3"),
+    close(),
+    open("main", {
+      layout: {
+        width: grow(),
+        height: grow(),
+        direction: "ttb",
+        padding: { left: 2, top: 1 },
+      },
+    }),
+    text("Main content area with longer text to exercise the encoder"),
+    close(),
+    close(),
+    open("footer", {
+      layout: {
+        width: grow(),
+        height: fixed(1),
+        padding: { left: 1 },
+        direction: "ltr",
+      },
+      bg: rgba(30, 30, 40),
+    }),
+    text("Status: OK"),
+    close(),
+    close(),
+  ];
+
+  bench("complex layout (header + sidebar + main + footer)", () => {
+    let buf = makeBuf(8192);
+    pack(complexOps, buf, 0);
+  });
+
+  let listOps: Op[] = [
+    open("root", {
+      layout: { width: grow(), height: grow(), direction: "ttb" },
+    }),
+    ...Array.from({ length: 50 }, (_, i) => [
+      open(`item-${i}`, {
+        layout: {
+          width: grow(),
+          height: fixed(1),
+          padding: { left: 2 },
+          direction: "ltr",
+        },
+        bg: i % 2 === 0 ? rgba(30, 30, 40) : rgba(35, 35, 45),
+      }),
+      text(`List item ${i}: some description text`),
+      close(),
+    ]).flat(),
+    close(),
+  ];
+
+  bench("large list (50 items)", () => {
+    let buf = makeBuf(32768);
+    pack(listOps, buf, 0);
+  });
+});