VS Code

L’estensione Text.js per VS Code mostra il frame della console accanto al codice. Rispecchia l’app in esecuzione con text dev, oppure renderizza il file aperto quando non c’è nulla in esecuzione. Aggiunge anche la generazione di file per App Router, snippet e link per i codici di errore TX###.

#Installazione

Installa Text.js dal Visual Studio Marketplace. In VS Code, apri la vista Estensioni (⌘⇧X) e cerca textjs.vscode-textjs, oppure esegui:

code --install-extension textjs.vscode-textjs

Si attiva in qualsiasi cartella che contiene un’app Text.js: un text.config.ts, oppure un pacchetto che dipende da @textjs/app e ha una directory app/. Funziona anche nei monorepo con più app.

#Anteprima dal vivo

Apri un page.tsx, un layout.tsx o un componente ed esegui Text.js: Open Preview (⌘K V), oppure fai clic sul pulsante di anteprima nella barra del titolo dell’editor. Il pannello disegna il frame con la stessa cornice DevTools e le stesse celle Menlo della console del browser.

L’anteprima riceve i frame da una di due sorgenti. Il badge nella barra degli strumenti mostra quale è attiva:

auto (il valore predefinito) usa Live quando può e Headless altrimenti. Fissa una delle due modalità dal badge o con textjs.preview.mode.

#Tastiera

Fai clic sulla console per inviare i tasti all’app: frecce, Tab, scorciatoie, digitazione e incolla funzionano come nel browser. Fai clic fuori dalla console per smettere. Le scorciatoie dell’editor come ⌘P e ⌘⇧P continuano a essere inviate a VS Code. Lo scorrimento sopra la console invia eventi della rotellina.

Nel campo dell’indirizzo puoi digitare una route, come /deployments/dpl_a1, per navigare in entrambe le sorgenti.

#Modalità Live

Mentre un’anteprima è aperta, il server di sviluppo chiede alle schede connesse di trasmettere i propri frame. Le schede inviano solo le righe modificate e smettono di inviarle quando l’anteprima si chiude, quindi un’app senza anteprime aperte non sostiene alcun costo. Il salvataggio di un file passa attraverso Fast Refresh e l’anteprima si aggiorna insieme alla scheda.

Attiva Follow (textjs.preview.followEditor) per spostare la scheda del browser sulla route del page.tsx che stai modificando.

Le schede in background non ricevono frame di animazione, quindi normalmente trattengono i propri frame finché non tornano visibili. Mentre un’anteprima le osserva, una scheda in background disegna un frame non appena arriva un input, quindi la digitazione nell’anteprima continua a produrre aggiornamenti. Le animazioni in una scheda in background si aggiornano circa una volta al secondo. Metti l’app in una finestra dedicata per mantenerle regolari.

#Modalità Headless

L’estensione avvia un piccolo runner nel tuo progetto. Carica i file delle route tramite Vite e @textjs/app del progetto stesso, quindi alias, TypeScript e JSX si comportano come in text dev. Monta l’App Router sulla route del file aperto, con i suoi layout, usando una cronologia in memoria:

Le chiamate fetch("/api/...") della stessa origine eseguono gli handler route.ts nello stesso processo, come con text run. La griglia segue le dimensioni del pannello e il salvataggio di qualsiasi file nell’app la renderizza di nuovo. Gli errori appaiono sopra il frame, con link alle rispettive pagine TX###.

#Comandi

I comandi di generazione dei file si trovano anche nel menu contestuale delle cartelle in Esplora risorse. Accettano segmenti di App Router come settings, blog/[slug], docs/[...path] e (marketing)/about, e rifiutano di inserire un page e un route.ts nello stesso segmento. I progetti JavaScript (senza tsconfig.json) ricevono file .jsx e .js.

#Snippet

#Codici di errore

Passa il puntatore su un codice TX### ovunque si trovi: nel sorgente, nei log, nel pannello Output o in uno stack trace incollato. Il riquadro al passaggio del puntatore mostra titolo, messaggio e pacchetto, con un link alla relativa pagina su textjs.org. Ogni codice è anche un link (⌘-clic).

#Barra di stato

L’elemento ▼ mostra lo stato del server di sviluppo e le dimensioni della griglia della console, per esempio ▼ :3000 120×36. Le schede comunicano le proprie dimensioni al server di sviluppo ogni volta che cambiano, anche senza anteprime aperte. Fai clic sull’elemento per accedere ai comandi principali.

#Impostazioni

#Attendibilità dell’area di lavoro

L’anteprima e il server di sviluppo eseguono il codice del progetto (la configurazione Vite, text.config.* e i componenti). In modalità con restrizioni l’estensione offre solo snippet, generazione di file e link agli errori, e ignora textjs.preview.runtime, textjs.devServer.command e textjs.devServer.url nelle impostazioni dell’area di lavoro. Contrassegna l’area di lavoro come attendibile per attivare l’anteprima. I file esterni alle cartelle dell’area di lavoro non vengono mai mostrati in anteprima.

#Funzionamento

text dev espone tre endpoint per gli editor. Rispondono solo a connessioni di loopback indirizzate a un host di loopback (localhost, 127.0.0.1, [::1]) e solo a richieste senza Origin o con la stessa origine del server di sviluppo. Le richieste cross-site e no-cors dei browser vengono rifiutate:

Le schede inviano i frame al server di sviluppo tramite il socket HMR di Vite, che richiede un token per ogni server. Il formato di trasmissione è esportato da @textjs/app/frame-protocol (FrameEncoder, FrameDecoder, parseInputMessage) se vuoi creare un tuo visualizzatore. Nulla di tutto questo è presente nell’output di text build.