VS Code

L’extension Text.js pour VS Code affiche la frame de votre console à côté du code. Elle reflète l’application exécutée avec text dev, ou effectue elle-même le rendu du fichier ouvert si rien n’est en cours d’exécution. Elle ajoute aussi la génération de fichiers App Router, des extraits de code et des liens pour les codes d’erreur TX###.

#Installation

Installez Text.js depuis le Visual Studio Marketplace. Dans VS Code, ouvrez la vue Extensions (⌘⇧X) et recherchez textjs.vscode-textjs, ou exécutez :

code --install-extension textjs.vscode-textjs

Elle s’active dans tout dossier contenant une application Text.js : un fichier text.config.ts, ou un paquet qui dépend de @textjs/app et possède un répertoire app/. Les monorepos contenant plusieurs applications fonctionnent aussi.

#Aperçu en direct

Ouvrez un fichier page.tsx, layout.tsx ou un composant et lancez Text.js: Open Preview (⌘K V), ou cliquez sur le bouton d’aperçu dans la barre de titre de l’éditeur. Le panneau dessine la frame avec le même habillage DevTools et les mêmes cellules Menlo que la console de votre navigateur.

L’aperçu reçoit ses frames de l’une de deux sources. Le badge de la barre d’outils indique laquelle est active :

auto (par défaut) utilise le mode en direct si possible, et le mode sans navigateur sinon. Fixez l’un des deux depuis le badge ou avec textjs.preview.mode.

#Clavier

Cliquez sur la console pour envoyer les touches à l’application : flèches, Tab, raccourcis, saisie et collage fonctionnent comme dans le navigateur. Cliquez en dehors de la console pour arrêter. Les raccourcis de l’éditeur tels que ⌘P et ⌘⇧P restent transmis à VS Code. Faire défiler au-dessus de la console envoie des événements de molette.

Dans le champ d’adresse, vous pouvez saisir une route, telle que /deployments/dpl_a1, pour naviguer dans l’une ou l’autre source.

#Mode en direct

Lorsqu’un aperçu est ouvert, le serveur de développement demande aux onglets connectés de transmettre leurs frames en continu. Les onglets n’envoient que les lignes modifiées et cessent tout envoi à la fermeture de l’aperçu, donc une application sans aperçu ouvert ne subit aucun surcoût. L’enregistrement d’un fichier passe par Fast Refresh, et l’aperçu se met à jour avec l’onglet.

Activez Suivre (textjs.preview.followEditor) pour déplacer l’onglet du navigateur vers la route du fichier page.tsx que vous modifiez.

Les onglets en arrière-plan ne reçoivent aucune frame d’animation et conservent donc normalement leurs frames jusqu’à redevenir visibles. Lorsqu’un aperçu les observe, un onglet en arrière-plan dessine une frame dès qu’une entrée arrive, donc la saisie dans l’aperçu continue de déclencher des mises à jour. Les animations d’un onglet en arrière-plan se mettent à jour environ une fois par seconde. Placez l’application dans sa propre fenêtre pour conserver des animations régulières.

#Mode sans navigateur

L’extension lance un petit programme d’exécution dans votre projet. Il charge les fichiers de route avec les versions de Vite et de @textjs/app du projet, donc les alias, TypeScript et JSX se comportent comme dans text dev. Il monte App Router à la route du fichier ouvert, avec ses layouts, en utilisant un historique en mémoire :

Les appels fetch("/api/...") de même origine exécutent vos gestionnaires route.ts dans le même processus, comme avec text run. La grille suit les dimensions du panneau, et l’enregistrement de n’importe quel fichier de l’application déclenche un nouveau rendu. Les erreurs s’affichent au-dessus de la frame, avec des liens vers leurs pages TX###.

#Commandes

Les commandes de génération de fichiers figurent aussi dans le menu contextuel des dossiers de l’Explorateur. Elles acceptent les segments App Router tels que settings, blog/[slug], docs/[...path] et (marketing)/about, et refusent de placer une page et un route.ts dans le même segment. Les projets JavaScript (sans tsconfig.json) reçoivent des fichiers .jsx et .js.

#Extraits de code

#Codes d’erreur

Survolez un code TX### où qu’il soit : dans le code source, les journaux, le panneau Sortie ou une trace de pile collée. L’infobulle affiche son titre, son message et son paquet, avec un lien vers sa page sur textjs.org. Chaque code est aussi un lien (clic avec ⌘).

#Barre d’état

L’élément ▼ affiche l’état du serveur de développement et les dimensions de la grille de la console, par exemple ▼ :3000 120×36. Les onglets signalent leurs dimensions au serveur de développement à chaque changement, même sans aperçu ouvert. Cliquez sur l’élément pour accéder aux commandes principales.

#Paramètres

#Confiance de l’espace de travail

L’aperçu et le serveur de développement exécutent le code de votre projet (sa configuration Vite, text.config.* et ses composants). En mode restreint, l’extension ne propose que les extraits de code, la génération de fichiers et les liens d’erreur, et ignore textjs.preview.runtime, textjs.devServer.command et textjs.devServer.url dans les paramètres de l’espace de travail. Accordez votre confiance à l’espace de travail pour activer l’aperçu. Les fichiers situés hors des dossiers de votre espace de travail ne sont jamais affichés en aperçu.

#Fonctionnement

text dev expose trois points de terminaison pour les éditeurs. Ils répondent uniquement aux connexions de bouclage adressées à un hôte de bouclage (localhost, 127.0.0.1, [::1]), et uniquement aux requêtes sans Origin ou avec l’origine du serveur de développement. Les requêtes intersites et no-cors des navigateurs sont rejetées :

Les onglets envoient leurs frames au serveur de développement via la socket HMR de Vite, qui exige un jeton propre à chaque serveur. Le format de transmission est exporté depuis @textjs/app/frame-protocol (FrameEncoder, FrameDecoder, parseInputMessage) si vous souhaitez créer votre propre outil de visualisation. Rien de tout cela ne figure dans la sortie de text build.