إطار عمل وحدة التحكم

أنشئ تطبيقات 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 التغييرات عبر مُصالِح مخصص.
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`