Chạy trong terminal
Chạy cùng bảng điều khiển toàn màn hình trong terminal bằng text run.
Trong chương này
- `text run`
- Thoát bằng `q`
- CLI riêng của bạn
- Điểm khác biệt
text run chạy cùng ứng dụng trong terminal. Layout, component, keymap và route handler dùng chung, còn đầu ra là ANSI truecolor thay vì các span CSS %c.
text run
Thêm script rồi chạy:
"scripts": { "dev": "text dev", "build": "text build",Đã xóa: "start": "text start"Đã thêm: "start": "text start",Đã thêm: "tui": "text run" },bun run tui # render ./app at /bun run tui -- --path /deployments # start on another routetext run nhập mọi tệp trong app/, gắn App Router với lịch sử trong bộ nhớ và vẽ toàn màn hình. <Link>, useRouter(), notFound() và redirect() hoạt động như cũ, còn các lệnh gọi fetch("/api/…") cùng nguồn chạy route handler trong cùng tiến trình. Ctrl+C thoát và khôi phục lịch sử cuộn. Lệnh này cần Bun.
Thoát bằng q
Người dùng terminal mong đợi phím q. useApp().exit() gỡ ứng dụng và khôi phục terminal; trong trình duyệt, nó gỡ ứng dụng console.
Đã thêm: import { useApp } from "@textjs/app";export default function RootLayout({ children }: { children?: ReactNode }) {Đã thêm: const app = useApp(); useInput((e) => { if (e.key === "backspace") router.back();Đã thêm: if (e.input === "q") app.exit(); });CLI riêng của bạn
Với một component riêng lẻ, dùng renderToTerminal. Hàm này gắn một phần tử mà không dùng App Router, và fetch("/api/…") chỉ gọi tới route handler khi chạy bằng text run, nên hãy truyền dữ liệu cho component:
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();Chạy bằng bun cli.tsx. DeploymentsPage tự lấy các dòng dữ liệu nên cần text run.
Điểm khác biệt
Terminal vẽ lại nhanh hơn (tối đa 60 fps thay vì ~15) và điều chỉnh kích thước lưới theo cửa sổ thay vì console gắn ở cạnh trình duyệt. Hình ảnh cần dữ liệu pixel thay vì URL. Mọi thứ khác, kể cả bảng tổng quan này, đều dùng cùng mã nguồn.
Dùng thử
Đây là Acme Deploys ở cuối chương, đang chạy trong DevTools. Nhấp vào vùng focus, rồi dùng các phím bên dưới.
Mở console
Ứng dụng render trong DevTools.Trước tiên bật “Hiển thị tính năng cho nhà phát triển web” trong Cài đặt Safari → Nâng cao. Sau đó nhấp vào đây và nhấn Enter.
Mở trên máy tính
Ứng dụng này render trong console của DevTools, cần trình duyệt trên máy tính.
Bài trắc nghiệm
2 câu hỏiTrả lời mọi câu hỏi để hoàn thành chương.