Sandbox AST Dictionary

[ianjennings]

From sandboxes created by wlawt: babel#3

Feature request for Sandbox

The problem is: developers contributing first time to Babel may/may not understand the concepts being used

Outputs we'd consider:

• Be able to highlight input code and map to AST
• Mapping between AST nodes to high-level examples (i.e. ; is an EmptyStatement)
• For each mapping we can have definitions that explain what an EmptyStatement is and other examples that a developer can cycle through

Design spec:

1. Lots of definitions & examples can be referenced from the Babel parser and handbook
2. The highlighting should work similar to https://astexplorer.net/

UI Design:

• At the moment, it would be similar to what's available right now on sandboxes and AST Explorer

Other possibilities:

• When searching for "other examples", the added possibility to search through Github and find what other contributors previously used as examples/test cases

[ianjennings]

From https://hackmd.io/js_I3MpUR8GuSvv55DOnGw:

• option to show AST with code folding/highlighting (ASTExplorer)
  • example: AST Explorer babel/website#1933
• show AST at all steps in the transformation (babel-time-travel)
  • archived repo: https://github.com/babel/babel-time-travel
  • PR to add to current repl Add time travel panel in REPL babel/website#1736