Text.js 1.0
Text.js 1.0 已稳定。它在 DevTools 控制台中渲染 React 19 和 App Router 应用,每帧调用一次 console.log。
今天我们发布 Text.js 1.0,这是面向 Web 的控制台框架。
bunx create-text-app@latestText.js 在 Chrome DevTools 控制台中渲染 React 19 应用,通过 console.log 绘制布局、路由、焦点、输入、表单、图表和流式 Markdown。
1.0 的功能
- App Router。
layout.tsx、page.tsx、[param]、loading.tsx、error.tsx、not-found.tsx和api/*/route.ts,与window.location同步。遵循 Next.js App Router 约定。 - Turbolog。 Yoga flexbox 负责单元格网格布局,类型化数组
CellBuffer存储网格,游程编码器将其转换为一次console.log(format, ...css)调用。空闲帧不调用控制台。 - 组件库。
Box、Text、ScrollBox、Input、Select、Tabs、Markdown、Diff、虚拟化List、Table、Tree、图表、对话框、提示消息,以及基于useKeymap的Ctrl+K命令面板。 - 追加帧。 每一帧都追加在上一帧下方,因此控制台不会在帧间闪现空白。详情见 Turbolog:消除闪烁。
- 从右到左的文本。 基于通过全部 770,241 个
BidiTest.txt测试用例的 UAX #9 实现,希伯来语和阿拉伯语按视觉顺序渲染,并支持阿拉伯文字形塑造。参见控制台中的从右到左文本。 - 响应式控制台。 Text.js 适配停靠的 DevTools 面板,支持页面缩放和工具栏换行。取消停靠后,回退为
120×36。 text run。 同一个 App Router 应用可在真正的终端中渲染。- 智能体和编辑器工具。
text mcp通过模型上下文协议向编程智能体提供你的应用,Text.js DevTools 扩展则在控制台旁添加一个面板。eslint-plugin-textjs和 VS Code 扩展也包含在 1.0 中。
一次更名
框架包现已更名为 @textjs/next。textjs 这个名称在 npm 上已被占用。请更新导入:
- import { Box, Text } from "textjs";+ import { Box, Text } from "@textjs/next";1.0.2 更新: 包现已更名为 @textjs/app,@textjs/next 已弃用。要切换,请运行 bun remove @textjs/next && bun add @textjs/app,并从 @textjs/app 导入。
性能数据
在密集的 100×32 仪表盘上(46 个文本节点、149 个 %c span),使用 packages/core/test/perf.test.ts 测得:
| 帧 | 平均值 |
|---|---|
| 完整重绘(布局、绘制、编码) | 0.163 ms |
| 单行编辑(输入) | 0.011 ms |
| 空闲 | 0.000 ms,0 次控制台调用 |
未发生变化的帧在分配字符串之前就会返回,因此空闲帧的测量结果为 0.000 ms。
试用
打开 textjs.org,按 ⌘⌥J(Windows 和 Linux 上按 Ctrl+Shift+J)。网站会在你的控制台中运行 Text.js 应用,每个页面对应一个视图。Playground 提供仪表盘、流式 Markdown 和贪吃蛇。OpenCode 可连接到你本地的 OpenCode 服务器。