簡介
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)未變更的影格會略過，因此應用程式閒置時不會輸出任何記錄。