فریم‌ورک کنسول

برنامه‌های فول‌استک React بسازید که در console.log رندر می‌شوند.

این صفحه در کنسول شما اجرا می‌شود. آن را با ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C باز کنید (ابتدا قابلیت‌های توسعه‌دهنده را فعال کنید)، روی پیش‌نمایش زیر کلیک کنید و ↑ ↓ را فشار دهید.

1import { useState } from "react";2import { AsciiFont, Box, Text, useInput } from "@textjs/app";34export default function Page() {5  const [count, setCount] = useState(0);6  useInput((e) => {7    if (e.key === "up") setCount((c) => c + 1);8    if (e.key === "down") setCount((c) => c - 1);9  });1011  return (12    <Box className="flex-col gap-1 p-2">13      <AsciiFont text="▼ TEXT.JS" />14      <Text color="muted">React 19 in console.log</Text>15      <Text bold color="accent">count = {count}</Text>16    </Box>17  );18}

viewport:3

React 19

⁦Text.js⁩ از رندر هم‌زمان، Suspense و مرزهای خطا پشتیبانی می‌کند.

App Router

پوشه‌های داخل ⁦app/⁩ به مسیر و چیدمان تبدیل می‌شوند و دکمه‌های بازگشت و جلو و پیوندهای عمیق کار می‌کنند.

شبکه واکنش‌گرا

شبکه در هر میزان بزرگ‌نمایی صفحه، با اندازه پنل متصل DevTools هماهنگ می‌شود.

ورودی صفحه‌کلید

کلیدها، جای‌گذاری و ترکیب نویسه‌های IME از طریق یک <textarea> پنهان به برنامه می‌رسند.

جدول‌ها، نمودارها، فرم‌ها و میان‌برها

زنده

preview://table:1

↑ ↓ حرکت · s مرتب‌سازی · Space انتخاب

مستندات

چیدمان

<Box>
<Stack>
<Grid>
<SplitPane>
<ScrollBox>
<Center>

داده‌ها

<List>
<Table>
<Tree>
<Markdown>
<Code>
<Diff>

نمودارها

<LineChart>
<BarChart>
<Sparkline>
<ProgressBar>
<Gradient>
<Image>

کنترل‌ها

<Input>
<Select>
<Checkbox>
<Switch>
<Slider>
<Dialog>

صفحه‌کلید

useKeymap
<KeyHelp>
<KeyHints>
<CommandPalette>
<StatusBar>
useFocus

هر فریم تغییریافته یک فراخوانی `console.log` است

کامیتی که هیچ سلولی را تغییر ندهد، هرگز به کنسول نمی‌رسد.

React 19
```
<Box>
 ├ <Text>
 └ <Text> 1
```
01کامیت
⁦React⁩ با یک reconciler سفارشی کامیت می‌کند.
Yoga
02چیدمان
⁦Yoga⁩ جعبه‌ها را روی سلول‌های کامل می‌چیند.
CellBuffer
03ترسیم
فقط ردیف‌های آسیب‌دیده دوباره ترسیم می‌شوند.
هش ردیف
04دروازهٔ تغییر
فریم‌های بدون تغییر اینجا متوقف می‌شوند.
RLE
05کدگذاری
3,200 سلول به 149 span از نوع ⁦%c⁩ تبدیل می‌شوند.
console.log
06ارسال
فریم‌ها با فاصلهٔ حداقل 66 ms به انتها افزوده می‌شوند.

فریم تغییریافته فریم بدون تغییر، 0 فراخوانی

فریم‌های افزوده‌شده به انتها

پاک کردن کنسول پیش از هر فریم، آن را تا ترسیم فریم بعدی در DevTools خالی نگه می‌دارد. Turbolog در عوض هر فریم را به انتها می‌افزاید.

خواندن نوشته

clear() + log()70.6% خالی

log(), appended1.0% خالی

0.163msبازترسیم کامل (چیدمان، ترسیم، کدگذاری)

0.011msویرایش یک ردیف، مانند فشردن کلید

0 فراخوانیفریم بیکار

149⁦ span⁩آرگومان‌های ⁦%c⁩ برای 3,200 سلول

داشبورد ⁦100×32⁩، میانگین 1,000 فریم · Apple M5 Pro · Bun 1.4.4مستندات موتور Turbolog

رندر مسیرها در سرور

برای رندر یک مسیر و کامپوننت‌های ناهمگام آن در سرور، runtime = "server" را صادر کنید. مرورگر به‌جای برنامه شما، یک پخش‌کننده فریم 21 kB (gzip) بارگیری می‌کند.

1import { Suspense } from "react";2import { Box, Text } from "@textjs/app";3import { db } from "@/lib/db";45export const runtime = "server";67async function Deploys() {8  const rows = await db.deploys.latest(5);9  return rows.map((d) => (10    <Text key={d.id}>{`${d.state}  ${d.branch}`}</Text>11  ));12}1314export default function Page() {15  return (16    <Box className="flex-col p-1">17      <Text bold>Deployments</Text>18      <Suspense fallback={<Text color="muted">Loading…</Text>}>19        <Deploys />20      </Suspense>21    </Box>22  );23}

اجرا در ترمینال‌ها و عامل‌ها نیز

ElementsConsoleSources

◌ Build docs fra1 42%

DevTools`text dev`

⁦Turbolog⁩ هر فریم را به‌صورت spanهای ⁦%c⁩ در یک console.log می‌نویسد.

◌ Build docs fra1 42%

ترمینال`text run`

دستور ⁦text run⁩ همان برنامهٔ ⁦App Router⁩ را با ANSI تمام‌رنگی رندر می‌کند و کنترل‌گرهای مسیر را درون پردازش اجرا می‌کند.

textjs · read_frame

→ read_frame { "path": "/" }

▼ Acme Deploys main

● Ready web iad1 2m

● Ready api sfo1 4m

◌ Build docs fra1 42%

عامل‌های کدنویسی`text mcp`

عامل‌ها از طریق MCP بین مسیرها جابه‌جا می‌شوند، کلیدها را فشار می‌دهند و هر فریم را به‌صورت متن ساده می‌خوانند.

کدنویسی با OpenCode در DevTools

⁦OpenCode Lite⁩ رابط متنی OpenCode است که با Text.js بازسازی شده تا در کنسول مرورگر شما اجرا شود.

امتحان محیط آزمایشی اتصال سرور شما

   The reconnect test is flaky…  +                                                                  
                                                                                                    
     → Explored: 1 search, 1 read                                                                   
                                                                                                    
     The client closes on the first onerror and never reconnects. I'll retry instead.               
                                                                                                    
  ┃                                                                                                 
  ┃  ← Edit src/events.ts                                                                           
  ┃                                                                                                 
  ┃    1   export function connect(url: string, onEvent: (e: Event) => void) {                      
  ┃    2     const source = new EventSource(url);                                                   
  ┃    3     source.onmessage = (m) => onEvent(JSON.parse(m.data));                                 
  ┃    4 -   source.onerror = () => source.close();                                                 
  ┃    4 +   source.onerror = () => {                                                               
  ┃    5 +     source.close();                                                                      
  ┃    6 +     setTimeout(() => connect(url, onEvent), 250);                                        
  ┃    7 +   };                                                                                     
  ┃    8     return () => source.close();                                                           
  ┃    9   }                                                                                        
  ┃                                                                                                 
                                                                                                    
  ┃                                                                                                 
  ┃  $ bun test test/events.test.ts                                                                 
  ┃                                                                                                 
  ┃  3 pass, 0 fail                                                                                 
  ┃                                                                                                 
                                                                                                    
     Fixed. connect() now reconnects after an error. All 3 tests pass, including the flaky one.     
                                                                                                    
     Build · Claude Opus 5.5 · 2.5s                                                                 
                                                                                                    
  ┃                                                                                                 
  ┃                                                                                                 
  ┃                                                                                                 
  ┃  Build · Claude Opus 5.5 Anthropic                                                              
  ╹▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀  
  ~/code/textjs:main                                           12.7K (3%) · $0.02  ctrl+p commands  
                                                                                                    

opencode:1

محیط آزمایشی

یک عامل اسکریپت‌شده به هر پرامپتی پاسخ می‌دهد، بدون نیاز به نصب.

یک دستور

دستور bunx ⁦@textjs/opencode⁩⁦@latest proxy⁩ را اجرا کنید و کدی را که چاپ می‌کند وارد کنید. صفحه به OpenCode روی دستگاه شما متصل می‌شود.

مدل‌ها و نشست‌های شما

با دستور ⁦/models⁩ هر مدلی را که سرورتان پیکربندی کرده انتخاب کنید. نشست‌ها، عامل‌ها و مدل‌ها از سرور OpenCode شما می‌آیند.

ساخت داشبورد استقرار در کنسول شما

این دوره رایگان 10 فصل دارد و حدود 65 دقیقه طول می‌کشد.

شروع یادگیری خواندن مستندات

فریم‌ورک کنسول

React 19

App Router

شبکه واکنش‌گرا

ورودی صفحه‌کلید

جدول‌ها، نمودارها، فرم‌ها و میان‌برها

هر فریم تغییریافته یک فراخوانی `console.log` است

01کامیت

02چیدمان

03ترسیم

04دروازهٔ تغییر

05کدگذاری

06ارسال

فریم‌های افزوده‌شده به انتها

رندر مسیرها در سرور

اجرا در ترمینال‌ها و عامل‌ها نیز

DevTools`text dev`

ترمینال`text run`

عامل‌های کدنویسی`text mcp`

کدنویسی با OpenCode در DevTools

محیط آزمایشی

یک دستور

مدل‌ها و نشست‌های شما

ابزارهای ویرایش، لینت و آزمون

افزونه DevTools

VS Code

ESLint

آزمون

کدهای خطا

⁦REPL⁩ کنسول

راست‌به‌چپ

قلم‌های FIGlet

ساخت داشبورد استقرار در کنسول شما

فریم‌ورک کنسول

React 19

App Router

شبکه واکنش‌گرا

ورودی صفحه‌کلید

جدول‌ها، نمودارها، فرم‌ها و میان‌برها

هر فریم تغییریافته یک فراخوانی console.log است

01کامیت

02چیدمان

03ترسیم

04دروازهٔ تغییر

05کدگذاری

06ارسال

فریم‌های افزوده‌شده به انتها

رندر مسیرها در سرور

اجرا در ترمینال‌ها و عامل‌ها نیز

DevToolstext dev

ترمینالtext run

عامل‌های کدنویسیtext mcp

کدنویسی با OpenCode در DevTools

محیط آزمایشی

یک دستور

مدل‌ها و نشست‌های شما

ابزارهای ویرایش، لینت و آزمون

افزونه DevTools

VS Code

ESLint

آزمون

کدهای خطا

⁦REPL⁩ کنسول

راست‌به‌چپ

قلم‌های FIGlet

ساخت داشبورد استقرار در کنسول شما

هر فریم تغییریافته یک فراخوانی `console.log` است

DevTools`text dev`

ترمینال`text run`

عامل‌های کدنویسی`text mcp`