Exécution dans un terminal

text run exécute la même application dans un terminal. Le layout, les composants, les keymaps et les gestionnaires de route sont partagés, et la sortie utilise l’ANSI en couleurs vraies au lieu de spans CSS %c.

#text run

Ajoutez un script et exécutez-le :

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

text run importe chaque fichier de app/, monte l’App Router avec un historique en mémoire et l’affiche en plein écran. <Link>, useRouter(), notFound() et redirect() fonctionnent sans modification, et les appels fetch("/api/…") de même origine exécutent vos gestionnaires de route dans le même processus. Ctrl+C quitte l’application et restaure votre historique de défilement. Bun est requis.

#Quitter avec q

Les utilisateurs de terminaux s’attendent à pouvoir utiliser q. useApp().exit() démonte l’application et restaure le terminal ; dans le navigateur, il démonte l’application de la console.

#Votre propre CLI

Pour un composant seul, utilisez renderToTerminal. Cette fonction monte un élément sans l’App Router, et fetch("/api/…") n’atteint vos gestionnaires de route que sous text run, alors transmettez ses données au composant :

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

Exécutez-le avec bun cli.tsx. DeploymentsPage récupère ses lignes, il lui faut donc text run.

#Les différences

Les terminaux rafraîchissent l’affichage plus vite (jusqu’à 60 fps au lieu d’environ 15) et adaptent la grille à la fenêtre plutôt qu’à la console ancrée. Les images nécessitent des données de pixels au lieu d’une URL. Tout le reste, y compris ce tableau de bord, utilise le même code.