Executar em um terminal

text run executa o mesmo app em um terminal. Layout, componentes, mapas de teclas e manipuladores de rota são compartilhados, e a saída usa ANSI truecolor em vez de spans CSS com %c.

#text run

Adicione um script e execute-o:

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

text run importa todos os arquivos de app/, monta o App Router com um histórico em memória e o desenha em tela cheia. <Link>, useRouter(), notFound() e redirect() funcionam sem alterações, e chamadas fetch("/api/…") de mesma origem executam seus manipuladores de rota no mesmo processo. Ctrl+C encerra o app e restaura seu histórico de rolagem. Requer Bun.

#Sair com q

Quem usa terminal espera q. useApp().exit() desmonta o app e restaura o terminal; no navegador, desmonta o app do console.

#Sua própria CLI

Para um único componente, use renderToTerminal. Ele monta um elemento sem o App Router, e fetch("/api/…") só acessa seus manipuladores de rota com text run, então passe os dados ao componente:

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

Execute com bun cli.tsx. DeploymentsPage busca suas linhas, por isso precisa de text run.

#O que muda

Terminais repintam mais rápido (até 60 fps em vez de ~15) e dimensionam a grade pela janela em vez do console acoplado. Imagens precisam de dados de pixels em vez de uma URL. Todo o resto, incluindo este painel, usa o mesmo código.