Esecuzione in un terminale

text run esegue la stessa app in un terminale. Layout, componenti, mappe dei tasti e route handler sono condivisi, e l’output è ANSI truecolor anziché span CSS %c.

#text run

Aggiungi uno script ed eseguilo:

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

text run importa ogni file in app/, monta l’App Router con una cronologia in memoria e lo disegna a schermo intero. <Link>, useRouter(), notFound() e redirect() funzionano senza modifiche, e le chiamate fetch("/api/…") alla stessa origine eseguono i tuoi route handler nello stesso processo. Ctrl+C chiude l’app e ripristina la cronologia del terminale. Richiede Bun.

#Uscire con q

Chi usa il terminale si aspetta q. useApp().exit() smonta l’app e ripristina il terminale; nel browser smonta l’app della console.

#La tua CLI

Per un singolo componente, usa renderToTerminal. Monta un elemento senza l’App Router, e fetch("/api/…") raggiunge i tuoi route handler solo con text run, quindi passa al componente i suoi dati:

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();

Eseguilo con bun cli.tsx. DeploymentsPage recupera le proprie righe, quindi richiede text run.

#Le differenze

I terminali ridisegnano più velocemente (fino a 60 fps anziché ~15) e adattano la griglia alla finestra anziché alla console ancorata. Le immagini richiedono dati dei pixel anziché un URL. Tutto il resto, inclusa questa dashboard, usa lo stesso codice.