Запуск в терминале

text run запускает то же приложение в терминале. Макет, компоненты, раскладки клавиш и обработчики маршрутов общие, а для вывода используется truecolor ANSI вместо CSS-span с %c.

#text run

Добавьте скрипт и запустите его:

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

text run импортирует каждый файл из app/, монтирует App Router с историей в памяти и отрисовывает его на весь экран. <Link>, useRouter(), notFound() и redirect() работают без изменений, а вызовы fetch("/api/…") к тому же источнику выполняют ваши обработчики маршрутов в том же процессе. Ctrl+C завершает работу и восстанавливает историю прокрутки. Для этого нужен Bun.

#Выход по q

Пользователи терминала ожидают выхода по q. useApp().exit() размонтирует приложение и восстанавливает терминал; в браузере этот вызов размонтирует консольное приложение.

#Собственный CLI

Для отдельного компонента используйте renderToTerminal. Он монтирует один элемент без App Router, а fetch("/api/…") обращается к вашим обработчикам маршрутов только при запуске через text run, поэтому передайте компоненту данные:

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

Запустите его командой bun cli.tsx. DeploymentsPage загружает свои строки, поэтому ему нужен text run.

#Отличия

Терминалы перерисовываются быстрее (до 60 кадров/с вместо ~15) и подгоняют сетку под размер окна, а не закреплённой консоли. Для изображений нужны пиксельные данные вместо URL. Всё остальное, включая эту панель, использует тот же код.