Text.js
← Блог

Text.js 1.0

Text.js 1.0 стабилен. Он рендерит приложения React 19 и App Router в консоли DevTools с одним вызовом console.log на кадр.

Adam

Сегодня мы выпускаем Text.js 1.0, консольный фреймворк для веба.

bunx create-text-app@latest

Text.js рендерит приложения React 19 в консоли Chrome DevTools: макеты, маршрутизацию, фокус, ввод, формы, графики и потоковый Markdown отрисовывает console.log.

Что вошло в 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, графики, диалоги, всплывающие уведомления и палитра команд Ctrl+K на основе useKeymap.
  • Дописываемые кадры. Кадры дописываются ниже предыдущего, поэтому консоль не вспыхивает пустотой между кадрами. Подробнее об этом в статье 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 span %c), измерено с помощью packages/core/test/perf.test.ts:

КадрСреднее
Полная перерисовка (расчёт макета, отрисовка, кодирование)0,163 мс
Изменение одной строки (ввод текста)0,011 мс
Без изменений0,000 мс, 0 вызовов консоли

Обработка неизменившегося кадра завершается до выделения памяти под строку, поэтому кадры без изменений занимают 0,000 мс.

Попробовать

Откройте textjs.org и нажмите ⌘⌥J (Ctrl+Shift+J в Windows и Linux). Сайт запускает приложение Text.js в вашей консоли, по одному представлению на страницу. В Playground есть панель показателей, потоковый Markdown и «Змейка». OpenCode подключается к вашему локальному серверу OpenCode.

Полный список изменений находится в журнале изменений, а исходный код — на GitHub.