JavaScript AST Explorer

Zo verken je een JavaScript-AST

1. Plak je code in JavaScript-code, of klik op Voorbeeld laden om met een kleine module te beginnen.
2. Kies het Brontype: Module (import/export, strict mode) voor ES-modules, of Script (klassiek) voor gewone scripts die sloppy-mode-functies zoals with mogen gebruiken.
3. De boom wordt bijgewerkt zodra je even stopt met typen. Klik op Parsen om meteen te parsen.
4. Klik in de Syntaxisboom op het pijltje om een node uit of in te klappen. Klik op de naam van een node om de bijbehorende code in de editor te selecteren. Het paneel Geselecteerde node toont het type, de eigenschap waar de node onder valt, het tekenbereik, regel en kolom, de eenvoudige eigenschappen (naam, operator, ruwe waarde…) en de broncode.
5. Het werkt ook andersom: klik ergens in de code, verplaats de cursor met het toetsenbord of selecteer een stukje code, en de diepste node die het bevat wordt in de boom uitgeklapt en gemarkeerd.
6. Open ESTree-JSON om de volledige boom als JSON te zien, met of zonder Posities meenemen (start, end, loc). Daarna kun je hem Kopiëren of JSON downloaden.

De tellers tonen het aantal Nodes, de Maximale diepte van de boom en het aantal Statements op het hoogste niveau.

Wat is een abstracte syntaxisboom?

Voordat een JavaScript-engine, linter of bundler iets met je code kan doen, zet hij de tekst om in een boom van nodes. Elke node heeft een type (VariableDeclaration, CallExpression, Identifier…) en kind-nodes in benoemde eigenschappen. Voor total += size; krijg je een ExpressionStatement waarvan de expression een AssignmentExpression is met de operator +=, een left-identifier total en een right-identifier size. Haakjes, puntkomma’s en commentaar verdwijnen: de boom houdt alleen de structuur over die ertoe doet. Daarom heet hij abstract.

Deze tool gebruikt Acorn, de kleine en snelle parser achter veel JavaScript-tools, met ecmaVersion: "latest". De uitvoer volgt ESTree, het gedeelde formaat dat ook Espree (ESLint) produceert en dat de meeste tools voor codetransformatie begrijpen. De exacte nodetypes kennen is onmisbaar als je een ESLint-regel schrijft, een codemod voor Babel of jscodeshift, een Prettier-plug-in of elk ander script dat code analyseert.

Posities, bereiken en JSON-export

Elke node heeft start en end, de posities van het eerste teken en van het teken direct na het laatste in de broncode, plus een loc-object met regels (vanaf 1) en kolommen. In de JSON beginnen kolommen bij 0, zoals in de uitvoer van Acorn; het paneel Geselecteerde node telt ze vanaf 1, zoals de meeste editors. Zet Posities meenemen (start, end, loc) uit voor een lichtere JSON die makkelijker te vergelijken is tussen twee versies van je code.

Sommige waarden kunnen niet als JSON worden geschreven: letterlijke reguliere expressies krijgen "value": null (hun regex-eigenschap bewaart patroon en flags) en BigInt-literals worden als strings geschreven, zoals de ESTree-specificatie aanraadt.

Grenzen en privacy

De code wordt in je browser geparsed en nooit uitgevoerd of verstuurd: de parser leest alleen de tekst. De invoer is beperkt tot één miljoen tekens. Heel grote bomen worden op aanvraag getoond, telkens een reeks kinderen, en een JSON die te groot is voor een voorbeeld kun je nog steeds downloaden. JSX en TypeScript zijn geen standaard-JavaScript, dus Acorn meldt ze als syntaxfouten.