למידה/פרק 9 מתוך 10

הרצה בטרמינל

הרצת אותו לוח בקרה במסך מלא בטרמינל באמצעות ⁦text run⁩.

האפליקציה של הפרק הזה רצה במסוף. יש לפתוח אותו עם ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C (תחילה להפעיל תכונות למפתחים), ואז לנסות אותה.

צפייה בפרק3:31

בפרק הזה

`text run`
יציאה עם `q`
⁦CLI⁩ משלכם
ההבדלים

text run מריץ את אותה אפליקציה בטרמינל. ה-layout, הרכיבים, מפות המקשים ומטפלי הנתיבים משותפים, והפלט הוא ANSI בצבע מלא במקום רכיבי span של CSS עם %c.

`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.

ההבדלים

טרמינלים מציירים מחדש מהר יותר (עד 60 fps במקום כ-15) ומתאימים את גודל הרשת לחלון במקום למסוף המעוגן. תמונות דורשות נתוני פיקסלים במקום כתובת URL. כל השאר, כולל לוח הבקרה הזה, משתמש באותו קוד.

התנסות

זו Acme Deploys בסוף הפרק, רצה ב-DevTools. יש ללחוץ על המשטח, ואז להשתמש במקשים שלמטה.

▼ 09 · הרצה בטרמינל

פתיחת המסוף

⌘⌥J

CtrlShiftJ

⌘⌥K

CtrlShiftK

⌘⌥C

האפליקציה מרונדרת ב-DevTools.תחילה יש להפעיל את "הצגת תכונות למפתחי אתרים" בהגדרות Safari → מתקדם. אחר כך ללחוץ כאן וללחוץ על Enter.

פתיחה במחשב

האפליקציה הזו מרונדרת במסוף של DevTools, שדורש דפדפן במחשב.

בוחן

2 שאלות

להשלמת הפרק, יש לענות על כל השאלות.

מה משתנה כשהיישום רץ בטרמינל?

איך יישום סוגר את עצמו?