Menjalankan di terminal

text run menjalankan aplikasi yang sama di terminal. Layout, komponen, keymap, dan route handler dipakai bersama, dan keluarannya berupa ANSI truecolor alih-alih span CSS %c.

#text run

Tambahkan skrip dan jalankan:

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

text run mengimpor setiap file di app/, memasang App Router dengan riwayat dalam memori, dan menggambarnya dalam layar penuh. <Link>, useRouter(), notFound() dan redirect() tetap berfungsi tanpa perubahan, dan pemanggilan fetch("/api/…") dengan origin yang sama menjalankan route handler Anda dalam proses yang sama. Ctrl+C keluar dan memulihkan riwayat gulir Anda. Ini memerlukan Bun.

#Keluar dengan q

Pengguna terminal mengharapkan q. useApp().exit() melepas aplikasi dan memulihkan terminal; di browser, ini melepas aplikasi konsol.

#CLI Anda sendiri

Untuk satu komponen, gunakan renderToTerminal. Fungsi ini memasang satu elemen tanpa App Router, dan fetch("/api/…") hanya menjangkau route handler Anda saat dijalankan melalui text run, jadi teruskan datanya ke komponen:

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

Jalankan dengan bun cli.tsx. DeploymentsPage mengambil data barisnya, jadi memerlukan text run.

#Perbedaannya

Terminal menggambar ulang lebih cepat (hingga 60 fps alih-alih ~15) dan menyesuaikan ukuran kisi dengan jendela, bukan konsol yang ditambatkan. Gambar memerlukan data piksel alih-alih URL. Selebihnya, termasuk dasbor ini, menggunakan kode yang sama.