Text.js 1.0
Text.js 1.0 已推出穩定版。在 DevTools 主控台中渲染 React 19 與 App Router 應用程式,每個影格呼叫一次 console.log。
今天我們發布 Text.js 1.0,這是為網頁打造的主控台框架。
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:消除閃爍。
- 由右至左文字。 希伯來文和阿拉伯文依視覺順序渲染,並支援阿拉伯文字形塑形,採用的 UAX #9 實作通過了全部 770,241 個
BidiTest.txt測試案例。參閱主控台中的由右至左文字。 - 響應式主控台。 Text.js 會配合停駐的 DevTools 面板尺寸,支援頁面縮放和工具列換行。取消停駐時,則改用
120×36。 text run。 同一個 App Router 應用程式可在真正的終端機中渲染。- 代理與編輯器工具。
text mcp透過 Model Context Protocol 將應用程式提供給程式設計代理,而 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 伺服器。