babel / babel/sandboxes

Sandbox AST Dictionary

Open
#3 3 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
39
Forks
10
PR merge metrics
No merged PRs in 30d

Description

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](https://github.com/babel/babel/blob/main/packages/babel-parser/ast/spec.md) and [handbook](https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md#babel-plugin-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](https://codesandbox.io/s/github/babel/sandboxes) and [AST Explorer](https://astexplorer.net/)

**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

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.