مقدمة

⁦Text.js⁩ إطار عمل يستخدم React لتطبيقات تُعرض في وحدة التحكم ضمن DevTools باستخدام console.log.

import { useState } from "react";import { Box, Text, useInput } from "@textjs/app";export default function Page() {  const [count, setCount] = useState(0);  useInput((e) => {    if (e.key === "up") setCount((c) => c + 1);    if (e.key === "down") setCount((c) => c - 1);  });  return (    <Box className="flex-col p-1 border rounded">      <Text bold>count = {count}</Text>    </Box>  );}

المعاينة تفاعلية. انقر عليها واضغط ↑.

#المزايا المضمّنة

• ⁦React 19⁩: العرض المتزامن، و Suspense وحدود الأخطاء.
• ⁦App Router⁩: التخطيطات والصفحات والمقاطع الديناميكية ومعالجات المسارات.
• تخطيط Yoga: flexbox في WebAssembly، مع محاذاة إلى خلايا ذات أبعاد صحيحة.
• Turbolog: استدعاء واحد للدالة console.log لكل إطار تغيّر.
• واجهة وحدة التحكم: تستضيف الصفحة لوحة تركيز وحقل إدخال مخفيًا فقط.

#آلية العمل

تتدفق الحالة نزولًا: React، ثم التخطيط، ثم مخزن مؤقت للخلايا، ثم وحدة التحكم.

React 19 ▼ Yoga ▼ CellBuffer ▼ console.log(format, ...css)

تُتخطّى الإطارات التي لم تتغيّر، لذا لا تسجّل التطبيقات الخاملة شيئًا.

#الخطوات التالية

• التثبيت: أنشئ تطبيقك الأول.
• التوجيه: الصفحات والتخطيطات والتنقل.
• Turbolog: كيفية ترميز الإطارات.
• OpenCode: واجهة مستخدم طرفية لوكيل مبنية باستخدام Text.js.