Explorador de AST JavaScript

Como explorar a AST de um código JavaScript

1. Cola o teu código em Código JavaScript ou clica em Carregar o exemplo para começar com um pequeno módulo.
2. Escolhe o Tipo de código: Módulo (import/export, modo estrito) para módulos ES, ou Script (clássico) para scripts comuns que podem usar funcionalidades do modo não estrito, como with.
3. A árvore é atualizada um instante depois de parares de escrever. Clica em Analisar para a gerar de imediato.
4. Na Árvore sintática, clica na pequena seta para abrir ou fechar um nó. Clica no nome de um nó para selecionar o código correspondente no editor; o painel Nó selecionado mostra o tipo, a propriedade a que pertence, o intervalo de caracteres, a linha e a coluna, as propriedades simples (nome, operador, valor em bruto…) e o texto do código.
5. Também funciona no sentido inverso: clica em qualquer ponto do código, move o cursor com o teclado ou seleciona um excerto, e o nó mais profundo que o contém é aberto e realçado na árvore.
6. Abre JSON ESTree para veres a árvore completa em JSON, com ou sem Incluir posições (start, end, loc), e depois clica em Copiar ou Transferir JSON.

Os contadores mostram o número de Nós, a Profundidade máxima da árvore e o número de Instruções de nível superior.

O que é uma árvore sintática abstrata?

Antes de um motor JavaScript, um linter ou um bundler fazer seja o que for com o teu código, o texto é analisado e transformado numa árvore de nós. Cada nó tem um type (VariableDeclaration, CallExpression, Identifier…) e nós filhos guardados em propriedades com nome. Para total += size; obténs um ExpressionStatement cuja expression é uma AssignmentExpression com o operador +=, um identificador left chamado total e um identificador right chamado size. Os parênteses, os pontos e vírgulas e os comentários desaparecem: a árvore guarda apenas a estrutura relevante, e é por isso que se diz abstrata.

Esta ferramenta usa o Acorn, o parser pequeno e rápido em que assentam muitas ferramentas JavaScript, com ecmaVersion: "latest". O resultado segue o ESTree, o formato comum também produzido pelo Espree (ESLint) e reconhecido pela maioria das ferramentas de transformação de código. Conhecer os tipos de nó exatos é essencial quando escreves uma regra ESLint, um codemod Babel ou jscodeshift, um plugin do Prettier ou qualquer script que analise código.

Posições, intervalos e exportação JSON

Cada nó tem start e end, as posições do primeiro carácter e do carácter a seguir ao último no código, e um objeto loc com linhas (a partir de 1) e colunas. No JSON, as colunas começam em 0, como no resultado do Acorn; o painel Nó selecionado mostra-as a partir de 1, como a maioria dos editores. Desmarca Incluir posições (start, end, loc) para obteres um JSON mais leve, mais fácil de comparar entre duas versões do código.

Alguns valores não podem ser escritos em JSON: os literais de expressões regulares ficam com "value": null (a propriedade regex guarda o padrão e as flags) e os literais BigInt são escritos como strings, tal como recomenda a especificação ESTree.

Limites e privacidade

O código é analisado no teu navegador e nunca é executado nem enviado para lado nenhum: o parser limita-se a ler o texto. A entrada está limitada a um milhão de caracteres. As árvores muito grandes são desenhadas à medida que as abres, um lote de filhos de cada vez, e um JSON demasiado grande para pré-visualizar pode, mesmo assim, ser transferido. JSX e TypeScript não são JavaScript padrão, por isso o Acorn assinala-os como erros de sintaxe.