Uruchamianie w terminalu

text run uruchamia tę samą aplikację w terminalu. Layout, komponenty, mapy klawiszy i handlery tras są wspólne, a wynik to ANSI z pełną paletą kolorów zamiast spanów CSS %c.

#text run

Dodaj skrypt i uruchom go:

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

text run importuje każdy plik z app/, montuje App Router z historią w pamięci i rysuje go na pełnym ekranie. <Link>, useRouter(), notFound() i redirect() działają bez zmian, a wywołania fetch("/api/…") do tego samego źródła uruchamiają twoje handlery tras w tym samym procesie. Ctrl+C kończy działanie i przywraca historię przewijania. Wymaga środowiska Bun.

#Kończenie działania klawiszem q

Użytkownicy terminala oczekują klawisza q. useApp().exit() odmontowuje aplikację i przywraca terminal; w przeglądarce odmontowuje aplikację konsolową.

#Własne CLI

Dla pojedynczego komponentu użyj renderToTerminal. Montuje jeden element bez App Router, a fetch("/api/…") dociera do twoich handlerów tras tylko przy uruchomieniu przez text run, więc przekaż komponentowi jego dane:

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

Uruchom go poleceniem bun cli.tsx. DeploymentsPage pobiera swoje wiersze, więc wymaga text run.

#Różnice

Terminale odmalowują ekran szybciej (do 60 klatek/s zamiast ~15) i dopasowują siatkę do okna zamiast do zadokowanej konsoli. Obrazy wymagają danych pikseli zamiast adresu URL. Cała reszta, w tym ten panel, korzysta z tego samego kodu.