Skip to content

A web tool to explore the ASTs generated by various parsers.

License

Notifications You must be signed in to change notification settings

fkling/astexplorer

Repository files navigation

AST explorer

Gitpod ready-to-code Join the chat at https://gitter.im/astexplorer/Lobby Build Status

Paste or drop code into the editor and inspect the generated AST on https://astexplorer.net/

The AST explorer provides following code parsers:

Experimental / custom syntax

Depending on the parser settings, it not only supports ES5/CSS3 but also

Transforms

Since future syntax is supported, the AST explorer is a useful tool for developers who want to create AST transforms. In fact, following transformers are included so you can prototype your own plugins:

More Features

  • Save and fork code snippets. Copy the URL to share them.
  • Copying an AST or dropping a file containing an AST into the window will parse the AST and update the code using escodegen.
  • Otherwise, the content of text editor will be replaced with the content of the file (i.e. you can drag and drop JS files).
  • Choose between multiple parsers and configure them.
  • shift+click on a node expands the full subtree.
  • Hovering over a node highlights the corresponding text in the source code
  • Editing the source or moving the cursor around will automatically highlight the corresponding AST node (or its ancestors of it isn't expanded)
  • You can use $node in the console to refer to the last opened/toggled AST node.

Contributions

I'm happy about any feedback, feature request or PR to make this tool as useful as possible!


How to add a new parser

  1. Go to website/.
  2. Install the new parser as dependency: yarn add theParser
  3. Copy one of the existing examples in src/parsers/{language}.
  4. Adjust the code as necessary:
  • Update metadata.
  • Load the right parser (loadParser).
  • Call the right parsing method with the right/necessary options in parse.
  • Implement the nodeToRange method (this is for highlighting).
  • Implement the getNodeName method (this is for quick look through the tree).
  • Implement opensByDefault method for auto-expansion of specific properties.
  • Define _ignoredProperties set or implement forEachProperty generator method for filtering.
  • Provide a renderSettings method if applicable.

How to add a new transformer

  1. Go to website/.
  2. Install the new transformer as dependency.
  3. Copy one of the existing examples in src/parsers/{language}/transformers.
  4. Adjust the code as necessary:
  • Update metadata and defaultParserID.
  • Load the right transformer (loadTransformer).
  • Call the transformation method in transform.
  • Change sample transformation code in codeExample.txt.

Build your own version for development

IMPORTANT: For various reasons the project still requires Node.js version 16 (see .tools-versions). If you use a tool like asdf switching versions will happen automatically.

  1. Clone the repository.
  2. Go to website/.
  3. Install all dependencies with yarn install

Run yarn run build for the final minimized version. Run yarn run watch for incremental builds.

Run yarn start to start a simple static webserver.