AST Explorer JavaScript

Come esplorare l’AST di un codice JavaScript

1. Incolla il tuo codice in Codice JavaScript, oppure clicca su Carica l’esempio per partire da un piccolo modulo.
2. Scegli il Tipo di sorgente: Modulo (import/export, strict mode) per gli ES module, oppure Script (classico) per gli script tradizionali che possono usare funzionalità della modalità non strict, come with.
3. L’albero si aggiorna un istante dopo che smetti di scrivere. Clicca su Analizza per avviare subito l’analisi.
4. Nell’Albero sintattico, clicca sulla piccola freccia per espandere o comprimere un nodo. Clicca sul nome di un nodo per selezionare il codice corrispondente nell’editor: il pannello Nodo selezionato mostra il tipo, la proprietà a cui appartiene, l’intervallo di caratteri, riga e colonna, le proprietà semplici (nome, operatore, valore raw…) e il testo sorgente.
5. Funziona anche al contrario: clicca in un punto qualsiasi del codice, sposta il cursore con la tastiera o seleziona un pezzo di codice, e il nodo più profondo che lo contiene viene espanso ed evidenziato nell’albero.
6. Apri JSON ESTree per vedere l’intero albero in formato JSON, con o senza Includi le posizioni (start, end, loc), poi usa Copia o Scarica JSON.

I contatori mostrano il numero di Nodi, la Profondità massima dell’albero e il numero di Istruzioni di primo livello.

Che cos’è un albero sintattico astratto?

Prima che un motore JavaScript, un linter o un bundler possa fare qualsiasi cosa con il tuo codice, deve trasformare il testo in un albero di nodi. Ogni nodo ha un type (VariableDeclaration, CallExpression, Identifier…) e dei nodi figli salvati in proprietà con un nome. Per total += size; ottieni un ExpressionStatement la cui expression è un AssignmentExpression con l’operatore +=, un identificatore left chiamato total e un identificatore right chiamato size. Parentesi, punti e virgola e commenti spariscono: l’albero conserva solo la struttura che conta, ed è per questo che si chiama astratto.

Questo strumento usa Acorn, il parser piccolo e veloce alla base di molti strumenti JavaScript, con ecmaVersion: "latest". Il risultato segue ESTree, il formato condiviso prodotto anche da Espree (ESLint) e compreso dalla maggior parte degli strumenti di trasformazione del codice. Conoscere i tipi di nodo esatti è fondamentale quando scrivi una regola ESLint, un codemod Babel o jscodeshift, un plugin Prettier o qualsiasi script che analizza codice.

Posizioni, intervalli ed esportazione JSON

Ogni nodo contiene start e end, cioè l’offset del suo primo carattere e quello successivo all’ultimo nel sorgente, e un oggetto loc con righe (a partire da 1) e colonne. Nel JSON le colonne partono da 0, come nell’output di Acorn; il pannello Nodo selezionato le mostra a partire da 1, come la maggior parte degli editor. Togli la spunta da Includi le posizioni (start, end, loc) per ottenere un JSON più leggero, più facile da confrontare tra due versioni del codice.

Alcuni valori non si possono scrivere in JSON: i letterali delle espressioni regolari ricevono "value": null (la loro proprietà regex conserva pattern e flag) e i letterali BigInt vengono scritti come stringhe, come raccomanda la specifica ESTree.

Limiti e privacy

Il codice viene analizzato nel tuo browser e non viene mai eseguito né inviato altrove: il parser legge soltanto il testo. L’input è limitato a un milione di caratteri. Gli alberi molto grandi vengono disegnati su richiesta, un gruppo di figli alla volta, e un JSON troppo grande per l’anteprima si può comunque scaricare. JSX e TypeScript non sono JavaScript standard, quindi Acorn li segnala come errori di sintassi.