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

[jvivs]

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

[fkling]

Mmh. My hunch is that the babylon 7 parser or its settings aren't passed correctly to recast. I will have to investigate this locally. Thank you for reporting!

(Also thank you for the kind words, it's always nice to hear that :smiley:)

[yarian]

@fkling Did you ever get to looking at this? Is there a code pointer you could share for where to look? I'm not involved with this project but wouldn't mind taking a look if it's as simple as you commented.

[fkling]

@yarian: I think when I looked at it it seems that recast isn't taking any external options at all.

However, when I try it now it seems to parse correctly. Are you experiencing issues?

[yarian]

@fkling Sorry for delay, for some reason didn't get notified. Yeah it doesn't work for me:

[danieldelcore]

Hey all 👋

Looking into this a bit today since it's been bothering me for a while. First time poking around this code so the observations i've made might be a little naive haha!

1. Babylon6 seems to always work with JSX

2. All others error when attempting to render JSX elements with both an opening and closing tag.

For example:

import React from 'react';

const Button = () => {
  return (
    <div>
      Hello {this.props.name}
    </div>
  );
};

3. Self closing JSX elements like <div/> seem to work fine.

I've checked the config/settings getting passed into the various parsers and I can't seem spot anything wrong or missing. To me this seems like a legit parsing error, maybe a dependency needs to be updated or something 🤔

[danieldelcore]

It seems like adding the jsx plugin to recast's typescript parser does the trick! Raised a pr against recast ☝️

However, still not sure why the other parsers are still broken 🤔

[albertogasparin]

Can confirm this is still an issue with Flow as parser too 😞