اجرا در ترمینال

دستور text run همان برنامه را در ترمینال اجرا می‌کند. چیدمان، کامپوننت‌ها، نقشهٔ کلیدها و کنترل‌گرهای مسیر مشترک هستند و خروجی به‌جای spanهای CSS با %c، از نوع ANSI با رنگ واقعی است.

#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 fps به‌جای حدود 15) و اندازهٔ شبکه را به‌جای کنسول متصل‌شده به لبهٔ پنجره، با خود پنجره تنظیم می‌کنند. تصاویر به‌جای URL به داده‌های پیکسلی نیاز دارند. بقیهٔ موارد، از جمله این داشبورد، از همان کد استفاده می‌کنند.