Text.js
सीखें/10 में से अध्याय 9

टर्मिनल में चलाना

text run से उसी डैशबोर्ड को टर्मिनल में फ़ुल-स्क्रीन चलाएं।

इस अध्याय का ऐप आपके कंसोल में चल रहा है। ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C से इसे खोलें (पहले डेवलपर सुविधाएं चालू करें), फिर इसे आज़माएं।
अध्याय देखें3:31

इस अध्याय में

  • `text run`
  • `q` से बाहर निकलना
  • आपकी अपनी CLI
  • क्या अलग है

text run उसी ऐप को टर्मिनल में चलाता है। लेआउट, कंपोनेंट, कीमैप और रूट हैंडलर साझा होते हैं, और आउटपुट %c CSS span के बजाय ट्रूकलर 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() बिना बदलाव के काम करते हैं, और सेम-ऑरिजिन 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 सवाल

अध्याय पूरा करने के लिए हर सवाल का जवाब दें।

ऐप टर्मिनल में चलने पर क्या बदलता है?

 

ऐप ख़ुद को कैसे बंद करता है?