JavaScript AST Explorer

Как да разгледате AST на JavaScript код

1. Поставете кода си в полето JavaScript код или щракнете Зареди примера, за да започнете с малък модул.
2. Изберете Тип на кода: Модул (import/export, строг режим) за ES модули или Скрипт (класически) за обикновени скриптове, които може да ползват възможности на нестрогия режим като with.
3. Дървото се обновява малко след като спрете да пишете. Щракнете Анализирай, за да го изпълните веднага.
4. В Синтактично дърво щракнете малката стрелка, за да разгънете или свиете възел. Щракнете върху името на възела, за да се избере съответният код в редактора. Панелът Избран възел показва типа му, свойството, към което принадлежи, диапазона от символи, реда и колоната, простите му свойства (име, оператор, суров низ на стойността…) и изходния му текст.
5. Работи и в обратната посока: щракнете където и да е в кода, преместете курсора с клавиатурата или маркирайте част от кода – най-дълбокият възел, който го съдържа, се разгъва и се оцветява в дървото.
6. Отворете ESTree JSON, за да видите цялото дърво като JSON – с или без Включи позиции (start, end, loc), след което го Копирай или Изтегли JSON.

Броячите показват броя на Възли, Максимална дълбочина на дървото и броя на Оператори на най-горно ниво.

Какво е абстрактно синтактично дърво?

Преди JavaScript енджинът, линтерът или бандлерът да направят нещо с кода ви, те го разбират като дърво от възли. Всеки възел има type (VariableDeclaration, CallExpression, Identifier…) и дъщерни възли в именувани свойства. За total += size; се получава ExpressionStatement, чийто expression е AssignmentExpression с оператор +=, ляв идентификатор total и десен идентификатор size. Скобите, точките и запетаите и коментарите изчезват: дървото запазва само важната структура, затова се нарича „абстрактно“.

Този инструмент използва Acorn – малкия и бърз парсер зад много JavaScript инструменти, с ecmaVersion: "latest". Резултатът следва ESTree – общия формат, който произвежда и Espree (ESLint) и който разбират повечето инструменти за трансформация на код. Познаването на точните типове възли е задължително, когато пишете правило за ESLint, codemod за Babel или jscodeshift, плъгин за Prettier или всеки скрипт, който анализира код.

Позиции, диапазони и експорт в JSON

Всеки възел има start и end – позициите на първия и на следващия след последния символ в изходния код, както и обект loc с редове (от 1) и колони. В JSON колоните започват от 0, както в изхода на Acorn. Панелът Избран възел ги показва от 1, както повечето редактори. Махнете отметката от Включи позиции (start, end, loc), за да получите по-лек JSON, който се сравнява по-лесно между две версии на кода.

Някои стойности не могат да се запишат в JSON: литералите на регулярни изрази получават "value": null (свойството regex запазва шаблона и флаговете), а BigInt литералите се записват като низове, както препоръчва спецификацията ESTree.

Ограничения и поверителност

Кодът се анализира във вашия браузър и никога не се изпълнява, нито се изпраща някъде: парсерът само чете текста. Входът е ограничен до един милион символа. Много големите дървета се изчертават при поискване, по няколко дъщерни възела наведнъж, а JSON, който е твърде голям за преглед, може пак да се изтегли. JSX и TypeScript не са стандартен JavaScript, затова Acorn ги отчита като синтактични грешки.