Tree view appears to have some trouble with JSX when using Recast
- Dominant language
- JavaScript
- Stars
- 6.5k
- Forks
- 772
- PR merge metrics
- No merged PRs in 30d
Description
**Describe the bug**
First off, a HUGE thank you for making this project available. It's been so incredibly helpful!
I appear to have broken the tree view and code when attempting to using JSX syntax in conjunction with recast.
Instead of displaying the super-helpful AST viewer, the tree view prints an error message like this: `Invalid regular expression: missing /`.
It seems some of the `recast` configuration may be misidentifying a closing JSX tag with a regular expression.
When switching to a different parser (ex: `babylon7`), the tree view displays as expected.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to the example [gist](https://astexplorer.net/#/gist/8a86c88a37143c3548397f606479ad06/601540198f013661ad5aa03a5038ac6186b197a9) to replicate the bug.
2. Examine the "Tree" tab of the AST Viewer
3. See error message `Line 4: Invalid regular expression: missing /`
**Expected behavior**
The interactive AST display rendered as it does with vanilla JavaScript.
**Screenshots**
Here's the state of the code editor:

**Browser (please complete the following information):**
- OS: macOS 10.14.6
- Browser: Brave (Chromium browser)
- Version: (Brave) 0.68.138 Chromium: 77.0.3865.75 (Official Build) (64-bit)
**astexplorer settings:**
- Selected parser: `recast` configured to use `babylon7`
- Selected transformer (if applicable): `jscodeshift`
- Contents of the local storage key `explorerSettingsV1`
```
{"showTransformPanel":false,"parserSettings":{},"parserPerCategory":{},"workbench":{"parser":"acorn","code":"/**\n * Paste or drop some JavaScript here and explore\n * the syntax tree created by chosen parser.\n * You can use all the cool new features from ES6\n * and even more. Enjoy!\n */\n\nlet tips = [\n \"Click on any AST node with a '+' to expand it\",\n\n \"Hovering over a node highlights the \\\n corresponding part in the source code\",\n\n \"Shift click on an AST node expands the whole substree\"\n];\n\nfunction printTips() {\n tips.forEach((tip, i) => console.log(`Tip ${i}:` + tip));\n}\n","keyMap":"default","transform":{"code":"","transformer":null}}}
```
**Additional context**
The code editor *also* seems to have a syntax highlighting problem with the closing tag as well, so the issue with JSX may not be entirely limited to the AST Tree viewer
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.