fkling / fkling/astexplorer

Tree view appears to have some trouble with JSX when using Recast

Open
#460 8 comments 3 reactions 0 assignees View on GitHub
bug
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:
![Screen Shot 2019-11-14 at 7 57 25 PM](https://user-images.githubusercontent.com/749210/68916206-bfb35800-0719-11ea-8cd9-96c6f65bb2d1.png)

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.