简介
Text.js 是什么、包含什么，以及帧如何渲染。
Text.js 是一个 React 框架，用于构建通过 console.log 在 DevTools 控制台中渲染的应用。
实时↑ ↓ count · r resettsx
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 布局：在 WebAssembly 中运行的 flexbox，对齐到整数单元格。
- Turbolog：每个发生变化的帧调用一次
console.log。 - 控制台 UI：页面仅包含一个焦点捕获区和一个隐藏的输入框。
工作原理
状态向下流动：从 React 到布局，再到单元格缓冲区，最后到控制台。
React 19 ▼ Yoga ▼ CellBuffer ▼ console.log(format, ...css)未发生变化的帧会跳过，因此空闲应用不输出任何日志。