Text.js
سیکھیں/باب 9 از 10

ٹرمینل میں چلانا

⁦text run⁩ کمانڈ سے یہی ڈیش بورڈ ٹرمینل میں پوری اسکرین پر چلائیں۔

اس باب کی ایپ آپ کے کونسول میں چل رہی ہے۔ اسے ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C سے کھولیں (پہلے ڈیولپر فیچرز فعال کریں)، پھر اسے آزمائیں۔
باب دیکھیں3:31

اس باب میں

  • `text run`
  • `q` سے بند کرنا
  • آپ کی اپنی CLI
  • فرق

text run وہی ایپ ٹرمینل میں چلاتا ہے۔ لے آؤٹ، کمپوننٹس، کی میپس اور روٹ ہینڈلرز مشترک ہیں، اور آؤٹ پٹ %c ⁦CSS spans⁩ کے بجائے ⁦truecolor ANSI⁩ ہوتا ہے۔

text run

ایک اسکرپٹ شامل کریں اور اسے چلائیں:

package.json+2-1json
  "scripts": {    "dev": "text dev",    "build": "text build",ہٹائے گئے:     "start": "text start"شامل کردہ:     "start": "text start",شامل کردہ:     "tui": "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() بغیر تبدیلی کے کام کرتے ہیں، اور ⁦same-origin⁩ fetch("/api/…") کالز آپ کے روٹ ہینڈلرز اسی پروسیس میں چلاتی ہیں۔ Ctrl+C ایپ بند کرتا ہے اور آپ کا اسکرول بیک بحال کرتا ہے۔ اسے Bun درکار ہے۔

q سے بند کرنا

ٹرمینل کے صارفین q کی توقع رکھتے ہیں۔ useApp().exit() ایپ کو اَن ماؤنٹ کرتا ہے اور ٹرمینل بحال کرتا ہے؛ براؤزر میں یہ کونسول ایپ کو اَن ماؤنٹ کرتا ہے۔

app/layout.tsx+3tsx
شامل کردہ: import { useApp } from "@textjs/app";export default function RootLayout({ children }: { children?: ReactNode }) {شامل کردہ:   const app = useApp();  useInput((e) => {    if (e.key === "backspace") router.back();شامل کردہ:     if (e.input === "q") app.exit();  });

آپ کی اپنی CLI

ایک کمپوننٹ کے لیے renderToTerminal استعمال کریں۔ یہ ⁦App Router⁩ کے بغیر ایک ایلیمنٹ ماؤنٹ کرتا ہے، اور fetch("/api/…") صرف text run کے تحت آپ کے روٹ ہینڈلرز تک پہنچتا ہے، اس لیے کمپوننٹ کو اس کا ڈیٹا پاس کریں:

cli.tsxtsx
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 درکار ہے۔

فرق

ٹرمینلز زیادہ تیزی سے ری پینٹ کرتے ہیں (~15 کے بجائے 60 fps تک) اور گرڈ کا سائز ڈاک کیے گئے کونسول کے بجائے ونڈو کے مطابق رکھتے ہیں۔ تصاویر کو URL کے بجائے پکسل ڈیٹا درکار ہوتا ہے۔ اس ڈیش بورڈ سمیت باقی سب کے لیے وہی کوڈ ہے۔

آزمائیں

یہ باب کے اختتام پر Acme Deploys ہے، جو DevTools میں چل رہی ہے۔ پیڈ پر کلک کریں، پھر نیچے دی گئی کلیدیں استعمال کریں۔

▼ 09 · ٹرمینل میں چلانا

کونسول کھولیں

⌘⌥J
CtrlShiftJ
⌘⌥K
CtrlShiftK
⌘⌥C

ایپ DevTools میں رینڈر ہوتی ہے۔پہلے Safari کی ترتیبات → ایڈوانسڈ میں “ویب ڈیولپرز کے لیے فیچرز دکھائیں” آن کریں۔ پھر یہاں کلک کریں اور ⁦Enter⁩ دبائیں۔

ڈیسک ٹاپ پر کھولیں

یہ ایپ DevTools کونسول میں رینڈر ہوتی ہے، جس کے لیے ڈیسک ٹاپ براؤزر چاہیے۔

کوئز

2 سوالات

باب مکمل کرنے کے لیے ہر سوال کا جواب دیں۔

ایپ ٹرمینل میں چلنے پر کیا بدلتا ہے؟

 

ایپ خود کیسے بند ہوتی ہے؟