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

[ianjennings]

How do we parse definitions?

We essentially need to turn these into JSON:

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

[ianjennings]

Ok, so I should parse specs.md into a JSON
And that can be used later to generate the hovering definition
And if we can incorporate the ASTExplorer then we will be able to tell the node type

Depends heavily on #2