مقدمه

⁦Text.js⁩ یک فریم‌ورک React برای برنامه‌هایی است که با console.log در کنسول DevTools رندر می‌شوند.

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.