💄 format codebase and fix validate test render result

Author: cowboyd

README.md

@@ -1,47 +1,49 @@
 # clayterm
 
-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.
+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.
 
 ## Features
 
-**Declarative terminal UI** — Build terminal interfaces the same way you'd
-build a web page. Clayterm uses [Clay](https://github.com/nicbarker/clay) under
-the hood, giving you flexbox-like layout, pointer detection, and scroll
-containers — all rendered to the terminal as box-drawing characters and ANSI
-escape sequences.
+**Declarative terminal UI** — Build terminal interfaces the same way you'd build
+a web page. Clayterm uses [Clay](https://github.com/nicbarker/clay) under the
+hood, giving you flexbox-like layout, pointer detection, and scroll containers —
+all rendered to the terminal as box-drawing characters and ANSI escape
+sequences.
 
 **Zero I/O** — Clayterm never reads stdin or writes stdout. You feed it bytes
 and get bytes back. This makes it trivially embeddable in any framework, any
 runtime, any event loop. There are no opinions about how you do I/O, just pure
 computation.
 
-**Runs everywhere** — The entire engine is compiled to WebAssembly, so
-clayterm will run anywhere JavaScript runs with no native
-dependencies, and no build step for consumers.
+**Runs everywhere** — The entire engine is compiled to WebAssembly, so clayterm
+will run anywhere JavaScript runs with no native dependencies, and no build step
+for consumers.
 
 ### Demo
 
 The application in this demo uses Clayterm for all layout and input parsing
 
 #### Keyboard Events
 
-The input parser decodes raw terminal bytes into structured events.
-Here you can see each key event as the string "hello world" is typed.
+The input parser decodes raw terminal bytes into structured events. Here you can
+see each key event as the string "hello world" is typed.
 
 ![Keyboard events demo](demo/keyboard-key-events.gif)
 
 #### Pointer Events
 
-Here we see hover styles applied to UI elements in response to the
-pointer state. Clay drives the hit testing; no manual coordinate math
-required.
+Here we see hover styles applied to UI elements in response to the pointer
+state. Clay drives the hit testing; no manual coordinate math required.
 
 ![Pointer events demo](demo/keyboard-pointer-events.gif)
 
-
 ## Architecture
 
-Clayterm does not do any I/O itself. On the ouput side, it converts UI elements into a raw sequence of bytes and pointer events, and on the input side, it converts a stream of raw bytes into structured events.
+Clayterm does not do any I/O itself. On the ouput side, it converts UI elements
+into a raw sequence of bytes and pointer events, and on the input side, it
+converts a stream of raw bytes into structured events.
 
 ### Output
 
@@ -126,7 +128,10 @@ let { output } = term.render([
     layout: { padding: { left: 1, right: 1 } },
     border: {
       color: rgba(0, 255, 0),
-      left: 1, right: 1, top: 1, bottom: 1,
+      left: 1,
+      right: 1,
+      top: 1,
+      bottom: 1,
     },
     cornerRadius: { tl: 1, tr: 1, bl: 1, br: 1 },
   }),

demo/keyboard.ts

@@ -1,5 +1,14 @@
 // deno-lint-ignore-file no-fallthrough
-import { createChannel, each, ensure, main, race, resource, type Stream, until } from "effection";
+import {
+  createChannel,
+  each,
+  ensure,
+  main,
+  race,
+  resource,
+  type Stream,
+  until,
+} from "effection";
 import {
   close,
   createTerm,
@@ -37,7 +46,8 @@ function isKeyEvent(e: InputEvent | PointerEvent): e is KeyEvent {
 }
 
 function matches(k: KeyDef, event: InputEvent | PointerEvent): boolean {
-  return isKeyEvent(event) && event.type === "keydown" && event.code.toUpperCase() === k.code.toUpperCase();
+  return isKeyEvent(event) && event.type === "keydown" &&
+    event.code.toUpperCase() === k.code.toUpperCase();
 }
 
 let hovered = rgba(80, 80, 100);
@@ -310,13 +320,15 @@ function toggle(ops: Op[], enabled: boolean, name: string): void {
   );
 }
 
-let flagNames: (keyof Omit<AppContext, "mode" | "event" | "logged" | "log" | "entered">)[] = [
-  "Disambiguate escape codes",
-  "Report event types",
-  "Report alternate keys",
-  "Report all keys as escapes",
-  "Report associated text",
-];
+let flagNames:
+  (keyof Omit<AppContext, "mode" | "event" | "logged" | "log" | "entered">)[] =
+    [
+      "Disambiguate escape codes",
+      "Report event types",
+      "Report alternate keys",
+      "Report all keys as escapes",
+      "Report associated text",
+    ];
 
 let logEntries: { key: string; name: keyof EventFilter }[] = [
   { key: "a", name: "keydown" },
@@ -332,10 +344,16 @@ let logEntries: { key: string; name: keyof EventFilter }[] = [
   { key: "k", name: "pointerclick" },
 ];
 
-function logToggle(ops: Op[], entries: typeof logEntries, ctx: AppContext): void {
+function logToggle(
+  ops: Op[],
+  entries: typeof logEntries,
+  ctx: AppContext,
+): void {
   for (let entry of entries) {
     ops.push(
-      open(`log:${entry.name}`, { layout: { direction: "ltr", height: fixed(1), gap: 1 } }),
+      open(`log:${entry.name}`, {
+        layout: { direction: "ltr", height: fixed(1), gap: 1 },
+      }),
     );
     ops.push(text(`${entry.key}.`, { color: dim }));
     toggle(ops, ctx.log[entry.name], entry.name);
@@ -364,7 +382,9 @@ function configPanel(ops: Op[], ctx: AppContext): void {
   for (let i = 0; i < flagNames.length; i++) {
     let name = flagNames[i];
     ops.push(
-      open(`flag:${name}`, { layout: { direction: "ltr", height: fixed(1), gap: 1 } }),
+      open(`flag:${name}`, {
+        layout: { direction: "ltr", height: fixed(1), gap: 1 },
+      }),
     );
     ops.push(text(`${i + 1}.`, { color: dim }));
     toggle(ops, ctx[name], name);
@@ -437,12 +457,21 @@ function keyboard(ctx: AppContext): Op[] {
   let badgeHint = ctx.mode === "input"
     ? "Ctrl+X Ctrl+X to enter config"
     : "Set flags with keys [0-5], Enter to save";
-  let mouseBg = ctx["Capture mouse events"] ? rgba(40, 180, 80) : rgba(80, 80, 80);
+  let mouseBg = ctx["Capture mouse events"]
+    ? rgba(40, 180, 80)
+    : rgba(80, 80, 80);
   let mouseLabel = ctx["Capture mouse events"] ? "capture" : "system";
   ops.push(
-    open("badges", { layout: { direction: "ttb", gap: 1, padding: { top: 1 } } }),
-    open("badge:mode", { layout: { direction: "ltr", height: fixed(1), padding: { bottom: 1 } } }),
-    open("", { layout: { padding: { left: 1, right: 1 } }, bg: rgba(60, 60, 60) }),
+    open("badges", {
+      layout: { direction: "ttb", gap: 1, padding: { top: 1 } },
+    }),
+    open("badge:mode", {
+      layout: { direction: "ltr", height: fixed(1), padding: { bottom: 1 } },
+    }),
+    open("", {
+      layout: { padding: { left: 1, right: 1 } },
+      bg: rgba(60, 60, 60),
+    }),
     text("mode", { color: rgba(220, 220, 220) }),
     close(),
     open("", { layout: { padding: { left: 1, right: 1 } }, bg: badgeBg }),
@@ -451,7 +480,10 @@ function keyboard(ctx: AppContext): Op[] {
     text(` ${badgeHint}`, { color: dim }),
     close(),
     open("badge:mouse", { layout: { direction: "ltr", height: fixed(1) } }),
-    open("", { layout: { padding: { left: 1, right: 1 } }, bg: rgba(60, 60, 60) }),
+    open("", {
+      layout: { padding: { left: 1, right: 1 } },
+      bg: rgba(60, 60, 60),
+    }),
     text("mouse", { color: rgba(220, 220, 220) }),
     close(),
     open("", { layout: { padding: { left: 1, right: 1 } }, bg: mouseBg }),
@@ -552,7 +584,7 @@ await main(function* () {
 
   let pointer = {
     events: createChannel<PointerEvent, void>(),
-    state: undefined as { x: number; y: number; down: boolean} | undefined,
+    state: undefined as { x: number; y: number; down: boolean } | undefined,
   };
 
   for (let event of yield* each(merge(input, pointer.events))) {
@@ -578,18 +610,24 @@ await main(function* () {
 
     if (context["Capture mouse events"]) {
       if ("x" in event) {
-        pointer.state = { x: event.x, y: event.y, down: event.type === "mousedown" };
+        pointer.state = {
+          x: event.x,
+          y: event.y,
+          down: event.type === "mousedown",
+        };
       }
     } else {
       pointer.state = undefined;
     }
 
-    let { output, events } = term.render(keyboard(context), { pointer: pointer.state });
+    let { output, events } = term.render(keyboard(context), {
+      pointer: pointer.state,
+    });
 
     for (let event of events) {
       yield* pointer.events.send(event);
     }
-    
+
     Deno.stdout.writeSync(output);
 
     yield* each.next();
@@ -623,7 +661,7 @@ function* recognizer(): Iterator<AppContext, never, InputEvent | PointerEvent> {
     logged: null,
   };
 
-  let event= yield current;
+  let event = yield current;
 
   let mode = inputmode({ ...current, event });
 
@@ -670,59 +708,63 @@ function* configmode(context: AppContext): Mode {
   let event = yield context;
   while (true) {
     if (event.type === "keydown" && event.key === "Enter") {
-      return inputmode({...context, event: null });
+      return inputmode({ ...context, event: null });
     }
     if (event.type === "keydown") {
       let k = (event as KeyEvent).key;
       let entry = logEntries.find((e) => e.key === k);
       if (entry) {
-        context = { ...context, log: { ...context.log, [entry.name]: !context.log[entry.name] } };
+        context = {
+          ...context,
+          log: { ...context.log, [entry.name]: !context.log[entry.name] },
+        };
       }
       if ("012345".indexOf(event.key) >= 0) {
-      context = { ...context };
-      context["Report associated text"] = false;
-      context["Report all keys as escapes"] = false;
-      context["Report alternate keys"] = false;
-      context["Report event types"] = false;
-      context["Disambiguate escape codes"] = false;                        
-      switch (event.key) {
-        case "5":
-          context["Report associated text"] = true;
-        case "4":
-          context["Report all keys as escapes"] = true;
-        case "3":
-          context["Report alternate keys"] = true;
-        case "2":
-          context["Report event types"] = true;
-        case "1":
-          context["Disambiguate escape codes"] = true;
-          break;
-        case "0":
-          break;
-      }
+        context = { ...context };
+        context["Report associated text"] = false;
+        context["Report all keys as escapes"] = false;
+        context["Report alternate keys"] = false;
+        context["Report event types"] = false;
+        context["Disambiguate escape codes"] = false;
+        switch (event.key) {
+          case "5":
+            context["Report associated text"] = true;
+          case "4":
+            context["Report all keys as escapes"] = true;
+          case "3":
+            context["Report alternate keys"] = true;
+          case "2":
+            context["Report event types"] = true;
+          case "1":
+            context["Disambiguate escape codes"] = true;
+            break;
+          case "0":
+            break;
+        }
       }
     }
     event = yield context;
   }
 }
 
-
-function merge<A,B, TClose>(a: Stream<A,TClose>, b: Stream<B,TClose>): Stream<A|B, TClose> {
-  return resource(function*(provide) {
+function merge<A, B, TClose>(
+  a: Stream<A, TClose>,
+  b: Stream<B, TClose>,
+): Stream<A | B, TClose> {
+  return resource(function* (provide) {
     let subscription = {
       a: yield* a,
       b: yield* b,
-    }
+    };
 
     return yield* provide({
       *next() {
-        return yield* race([subscription.a.next(),subscription.b.next()]);
+        return yield* race([subscription.a.next(), subscription.b.next()]);
       },
-    })
-  });  
+    });
+  });
 }
 
-
 type EventFilter = {
   keydown: boolean;
   keyrepeat: boolean;
@@ -750,4 +792,3 @@ type AppContext = {
   ["Report associated text"]: boolean;
   ["Capture mouse events"]: boolean;
 };
-

input-native.ts

@@ -77,7 +77,15 @@ export const KEY_TAB = 0x09;
 export const KEY_BACKSPACE = 0x7F;
 export const KEY_SPACE = 0x20;
 
-import { array, int32, offsets, struct, uint8, uint16, uint32 } from "./typedef.ts";
+import {
+  array,
+  int32,
+  offsets,
+  struct,
+  uint16,
+  uint32,
+  uint8,
+} from "./typedef.ts";
 
 const MAX_TEXT_CODEPOINTS = 8;