Text.js 1.0

Aujourd’hui, nous publions Text.js 1.0, le framework console pour le Web.

bunx create-text-app@latest

Text.js affiche des applications React 19 dans la console des DevTools de Chrome, avec des layouts, du routage, la gestion du focus, des saisies, des formulaires, des graphiques et du Markdown en streaming, dessinés avec console.log.

#Les nouveautés de la version 1.0

• L’App Router. layout.tsx, page.tsx, [param], loading.tsx, error.tsx, not-found.tsx et api/*/route.ts, synchronisés avec window.location. Il suit les conventions de l’App Router de Next.js.
• Turbolog. Yoga flexbox dispose une grille de cellules, un CellBuffer à tableaux typés la stocke, et un encodeur par plages la transforme en un seul appel à console.log(format, ...css). Les frames inactives ne font aucun appel à la console.
• Un kit de composants. Box, Text, ScrollBox, Input, Select, Tabs, Markdown, Diff, List virtualisée, Table, Tree, des graphiques, des boîtes de dialogue, des notifications et une palette de commandes Ctrl+K fournie par useKeymap.
• Des frames ajoutées à la suite. Chaque frame est ajoutée sous la précédente, pour que la console ne clignote pas en se vidant entre deux frames. Plus de détails dans Turbolog : éliminer le clignotement.
• Le texte de droite à gauche. L’hébreu et l’arabe s’affichent dans l’ordre visuel, avec la mise en forme contextuelle de l’arabe, grâce à une implémentation d’UAX #9 qui réussit les 770 241 cas de BidiTest.txt. Consultez Le texte de droite à gauche dans la console.
• Une console adaptative. Text.js s’adapte au panneau DevTools ancré, y compris au zoom de la page et à une barre d’outils qui passe sur plusieurs lignes. Détaché, il utilise par défaut 120×36.
• text run. La même application App Router s’affiche dans un vrai terminal.
• Des outils pour les agents et les éditeurs. text mcp expose votre application aux agents de programmation via le Model Context Protocol, et l’extension Text.js DevTools ajoute un panneau à côté de « Console ». eslint-plugin-textjs et une extension VS Code font aussi partie de la version 1.0.

#Un changement de nom

Le paquet du framework s’appelle désormais @textjs/next. Le nom textjs était déjà pris sur npm. Mettez à jour vos imports :

- import { Box, Text } from "textjs";+ import { Box, Text } from "@textjs/next";

Mise à jour, 1.0.2 : le paquet s’appelle désormais @textjs/app, et @textjs/next est déprécié. Pour migrer, exécutez bun remove @textjs/next && bun add @textjs/app et importez depuis @textjs/app.

#Chiffres

Sur un tableau de bord dense de 100×32 (46 nœuds de texte, 149 spans %c), mesures effectuées avec packages/core/test/perf.test.ts :

Une frame inchangée retourne avant d’allouer une chaîne de caractères, ce qui donne une mesure de 0,000 ms pour les frames inactives.

#Essayer

Ouvrez textjs.org et appuyez sur ⌘⌥J (Ctrl+Shift+J sous Windows et Linux). Le site exécute une application Text.js dans votre console, avec une vue par page. Le Playground propose un tableau de bord, du Markdown en streaming et Snake. OpenCode se connecte à votre serveur OpenCode local.

La liste complète des changements figure dans le journal des modifications, et le code source est sur GitHub.