VS Code

A extensão Text.js para VS Code mostra o quadro do console ao lado do código. Ela espelha o app em execução com text dev ou renderiza o próprio arquivo aberto quando nada está em execução. Também adiciona geração de estrutura do App Router, snippets e links para códigos de erro TX###.

#Instalação

Instale Text.js pelo Visual Studio Marketplace. No VS Code, abra a exibição Extensões (⌘⇧X) e procure por textjs.vscode-textjs, ou execute:

code --install-extension textjs.vscode-textjs

Ela é ativada em qualquer pasta que contenha um app Text.js: um text.config.ts, ou um pacote que dependa de @textjs/app e tenha um diretório app/. Monorepos com vários apps também funcionam.

#Prévia ao vivo

Abra um page.tsx, layout.tsx ou componente e execute Text.js: Open Preview (⌘K V), ou clique no botão de prévia na barra de título do editor. O painel desenha o quadro com a mesma interface do DevTools e as mesmas células em Menlo do console do navegador.

A prévia recebe seus quadros de uma de duas fontes. O indicador na barra de ferramentas mostra qual está ativa:

auto (o padrão) usa Live quando possível e Headless nos demais casos. Fixe uma das opções pelo indicador ou com textjs.preview.mode.

#Teclado

Clique no console para enviar teclas ao app: setas, Tab, atalhos, digitação e colagem funcionam como no navegador. Clique fora do console para parar. Atalhos do editor como ⌘P e ⌘⇧P continuam indo para o VS Code. Rolar sobre o console envia eventos da roda do mouse.

No campo de endereço, você pode digitar uma rota, como /deployments/dpl_a1, para navegar em qualquer uma das fontes.

#Modo Live

Enquanto uma prévia está aberta, o servidor de desenvolvimento pede às abas conectadas que transmitam seus quadros. As abas enviam apenas as linhas que mudaram e param de enviar quando a prévia fecha, então um app sem prévia aberta não tem custo adicional. Salvar um arquivo passa pelo Fast Refresh, e a prévia é atualizada junto com a aba.

Ative Follow (textjs.preview.followEditor) para levar a aba do navegador à rota do page.tsx que você está editando.

Abas em segundo plano não recebem quadros de animação, então normalmente mantêm seus quadros até ficarem visíveis novamente. Enquanto uma prévia acompanha a aba, uma aba em segundo plano desenha um quadro assim que recebe uma entrada, então digitar na prévia continua gerando atualizações. Animações em uma aba em segundo plano são atualizadas cerca de uma vez por segundo. Coloque o app em uma janela própria para mantê-las fluidas.

#Modo Headless

A extensão inicia um pequeno executor no seu projeto. Ele carrega arquivos de rota pelo Vite e pelo @textjs/app do próprio projeto, então aliases, TypeScript e JSX se comportam como em text dev. Ele monta o App Router na rota do arquivo aberto, com seus layouts, usando um histórico em memória:

Chamadas fetch("/api/...") de mesma origem executam seus manipuladores route.ts no mesmo processo, como em text run. A grade acompanha o tamanho do painel, e salvar qualquer arquivo do app o renderiza novamente. Os erros aparecem acima do quadro, com links para suas páginas TX###.

#Comandos

Os comandos de geração de estrutura também estão no menu de contexto de pastas do Explorador. Eles aceitam segmentos do App Router como settings, blog/[slug], docs/[...path] e (marketing)/about, e não permitem colocar um page e um route.ts no mesmo segmento. Projetos JavaScript (sem tsconfig.json) recebem arquivos .jsx e .js.

#Snippets

#Códigos de erro

Passe o cursor sobre um código TX### em qualquer lugar: no código-fonte, nos logs, no painel Saída ou em um rastreamento de pilha colado. A dica mostra o título, a mensagem e o pacote, com um link para a página do código em textjs.org. Cada código também é um link (clique com ⌘).

#Barra de status

O item ▼ mostra o estado do servidor de desenvolvimento e o tamanho da grade do console, por exemplo ▼ :3000 120×36. As abas informam seu tamanho ao servidor de desenvolvimento sempre que ele muda, mesmo sem prévia aberta. Clique no item para acessar os comandos principais.

#Configurações

#Confiança do espaço de trabalho

A prévia e o servidor de desenvolvimento executam o código do seu projeto (a configuração do Vite, text.config.* e componentes). No Modo Restrito, a extensão oferece apenas snippets, geração de estrutura e links de erros, e ignora textjs.preview.runtime, textjs.devServer.command e textjs.devServer.url das configurações do espaço de trabalho. Confie no espaço de trabalho para ativar a prévia. Arquivos fora das pastas do seu espaço de trabalho nunca são exibidos na prévia.

#Funcionamento

text dev disponibiliza três endpoints para editores. Eles respondem apenas a conexões de loopback direcionadas a um host de loopback (localhost, 127.0.0.1, [::1]), e apenas a requisições sem Origin ou com a própria origem do servidor de desenvolvimento. Requisições entre sites e no-cors dos navegadores são rejeitadas:

As abas enviam quadros ao servidor de desenvolvimento pelo socket HMR do Vite, que exige um token por servidor. O formato de transmissão é exportado de @textjs/app/frame-protocol (FrameEncoder, FrameDecoder, parseInputMessage) caso você queira criar seu próprio visualizador. Nada disso existe na saída de text build.