מבוא

⁦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⁩: רכיבי layout, דפים, מקטעים דינמיים ומטפלי נתיבים.
• ⁦Yoga layout⁩: flexbox ב-WebAssembly, מיושר לתאים במידות שלמות.
• Turbolog: קריאת console.log אחת לכל פריים שהשתנה.
• ממשק המסוף: הדף מכיל רק משטח מיקוד ושדה קלט מוסתר.

#אופן הפעולה

המצב זורם כלפי מטה: React, אחריו layout, אחריו חוצץ תאים, ואז המסוף.

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

המערכת מדלגת על פריימים שלא השתנו, ולכן אפליקציות במצב סרק לא כותבות דבר ליומן.

#השלבים הבאים

• התקנה: יצירת האפליקציה הראשונה.
• ניתוב: דפים, רכיבי layout וניווט.
• Turbolog: אופן קידוד הפריימים.
• OpenCode: ממשק טקסטואלי לסוכן שנבנה באמצעות Text.js.