التشغيل في الطرفية

يشغّل الأمر text run التطبيق نفسه في الطرفية. يشترك التطبيق في التخطيط والمكوّنات وخرائط المفاتيح ومعالجات المسارات، ويكون الخرج بتنسيق ANSI بالألوان الحقيقية بدلًا من عناصر span بتنسيق CSS مع %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() تركيب التطبيق ويستعيد الطرفية؛ وفي المتصفح يفكّ تركيب تطبيق وحدة التحكم.

#واجهة سطر أوامر خاصة بك

لعرض مكوّن واحد، استخدم 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. يستخدم كل ما عدا ذلك، بما فيه لوحة المعلومات هذه، الشيفرة نفسها.