AST Explorer dla JavaScriptu

Jak przeglądać AST kodu JavaScript

1. Wklej kod w pole Kod JavaScript albo kliknij Wczytaj przykład, aby zacząć od małego modułu.
2. Wybierz Typ źródła: Moduł (import/export, tryb ścisły) dla modułów ES lub Skrypt (klasyczny) dla zwykłych skryptów, które mogą korzystać z konstrukcji trybu nieścisłego, takich jak with.
3. Drzewo odświeża się chwilę po tym, jak przestaniesz pisać. Kliknij Parsuj, aby uruchomić analizę od razu.
4. W sekcji Drzewo składni kliknij małą strzałkę, aby rozwinąć lub zwinąć węzeł. Kliknięcie nazwy węzła zaznacza odpowiadający mu kod w edytorze, a panel Wybrany węzeł pokazuje jego typ, właściwość, do której należy, zakres znaków, wiersz i kolumnę, proste właściwości (nazwa, operator, surowa wartość…) oraz tekst źródłowy.
5. Działa to też w drugą stronę: kliknij w dowolnym miejscu kodu, przesuń kursor klawiaturą lub zaznacz fragment, a najgłębszy węzeł, który go zawiera, zostanie rozwinięty i podświetlony w drzewie.
6. Otwórz JSON ESTree, aby zobaczyć całe drzewo jako JSON, z opcją Dołącz pozycje (start, end, loc) lub bez niej, a potem użyj przycisku Kopiuj albo Pobierz JSON.

Liczniki pokazują liczbę węzłów (Węzły), Maksymalną głębokość drzewa oraz liczbę Instrukcji najwyższego poziomu.

Czym jest abstrakcyjne drzewo składni?

Zanim silnik JavaScriptu, linter czy bundler cokolwiek zrobi z twoim kodem, zamienia tekst w drzewo węzłów. Każdy węzeł ma type (VariableDeclaration, CallExpression, Identifier…) i węzły potomne zapisane w nazwanych właściwościach. Dla total += size; otrzymasz ExpressionStatement, którego expression to AssignmentExpression z operatorem +=, identyfikatorem total po lewej (left) i identyfikatorem size po prawej (right). Nawiasy, średniki i komentarze znikają: drzewo zachowuje tylko istotną strukturę – stąd nazwa abstrakcyjne.

Narzędzie korzysta z Acorn, małego i szybkiego parsera używanego przez wiele narzędzi JavaScript, z ustawieniem ecmaVersion: "latest". Wynik jest zgodny z ESTree – wspólnym formatem, który generuje też Espree (ESLint) i który rozumie większość narzędzi do transformacji kodu. Znajomość dokładnych typów węzłów jest niezbędna, gdy piszesz regułę ESLint, codemod w Babelu lub jscodeshift, wtyczkę do Prettiera albo dowolny skrypt analizujący kod.

Pozycje, zakresy i eksport do JSON

Każdy węzeł ma start i end – pozycję pierwszego znaku oraz pozycję tuż za ostatnim znakiem w źródle – a także obiekt loc z wierszami (od 1) i kolumnami. W JSON-ie kolumny liczone są od 0, tak jak w wyniku Acorna; panel Wybrany węzeł pokazuje je od 1, jak większość edytorów. Odznacz Dołącz pozycje (start, end, loc), aby uzyskać lżejszy JSON, który łatwiej porównać między dwiema wersjami kodu.

Niektórych wartości nie da się zapisać w JSON-ie: literały wyrażeń regularnych dostają "value": null (ich właściwość regex zachowuje wzorzec i flagi), a literały BigInt zapisywane są jako ciągi znaków, zgodnie z zaleceniem specyfikacji ESTree.

Limity i prywatność

Kod jest parsowany w twojej przeglądarce, nigdy nie jest wykonywany ani nigdzie wysyłany: parser tylko czyta tekst. Dane wejściowe są ograniczone do miliona znaków. Bardzo duże drzewa renderowane są na żądanie, partiami węzłów potomnych, a JSON zbyt duży na podgląd nadal można pobrać. JSX i TypeScript nie są standardowym JavaScriptem, więc Acorn zgłasza je jako błędy składni.