Im Terminal ausführen

text run führt dieselbe App in einem Terminal aus. Layout, Komponenten, Keymaps und Route-Handler werden gemeinsam genutzt, und die Ausgabe erfolgt als Truecolor-ANSI statt als %c-CSS-Spans.

#text run

Füge ein Skript hinzu und führe es aus:

bun run tui                        # render ./app at /bun run tui -- --path /deployments # start on another route

text run importiert jede Datei in app/, mountet den App Router mit einer History im Arbeitsspeicher und zeichnet ihn im Vollbild. <Link>, useRouter(), notFound() und redirect() funktionieren unverändert, und fetch("/api/…")-Aufrufe mit derselben Origin führen deine Route-Handler im selben Prozess aus. Ctrl+C beendet die App und stellt deinen Scrollback wieder her. Dafür ist Bun erforderlich.

#Mit q beenden

Terminal-Nutzer erwarten q. useApp().exit() unmountet die App und stellt das Terminal wieder her; im Browser unmountet es die Konsolen-App.

#Deine eigene CLI

Verwende für eine einzelne Komponente renderToTerminal. Es mountet ein Element ohne den App Router, und fetch("/api/…") erreicht deine Route-Handler nur unter text run, also übergib der Komponente ihre Daten:

import { renderToTerminal } from "@textjs/app/terminal";import { Table } from "@textjs/app";import { DEPLOYMENTS } from "./lib/deployments";const columns = [{ key: "commit", header: "Commit" }, { key: "project", header: "Project", width: 10 }];const app = await renderToTerminal(<Table columns={columns} rows={DEPLOYMENTS} autoFocus />);await app.waitUntilExit();

Führe es mit bun cli.tsx aus. DeploymentsPage ruft seine Zeilen ab und benötigt deshalb text run.

#Die Unterschiede

Terminals zeichnen schneller neu (bis zu 60 fps statt ~15) und passen das Raster an das Fenster statt an die angedockte Konsole an. Bilder benötigen Pixeldaten statt einer URL. Alles andere, einschließlich dieses Dashboards, verwendet denselben Code.