Allow JSX with @babel/eslint-parser

[karlhorky]

Hi there! First of all, thanks so much for AST explorer, it's amazing for learning about ASTs and getting into things like ESLint plugin development.

I wanted to add the Babel preset @babel/preset-react in order to enable JSX parsing with @babel/eslint-parser.

For example, at this demo you see this:

unknown: Support for the experimental syntax 'jsx' isn't currently enabled (1:1):

> 1 | <a
    | ^
  2 |   rel={"asdf"}
  3 | />

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

---

However, I'm unfamiliar with the internals of the codebase here, so it's possible that I've gotten something wrong.

[karlhorky]

Hm, I realize that in the parse method I don't actually need access to the preset, so I've simplified here (again, I'm not sure if I'm doing the right thing):

ab8798f

[karlhorky]

Also moved @babel/parser-react from devDependencies to dependencies in 9862e65, to indicate that it is a dependency required by a parser.

[fkling]

Thank you! Don't know if it makes any difference (since I assume @babel/eslint-parser doesn't actually do any transformation), but would using @babel/plugin-syntax-jsx suffice?

[karlhorky]

I'm fine with switching to @babel/plugin-syntax-jsx if you'd prefer! I'm not sure what else @babel/preset-react adds...

[fkling]

It includes two transform plugins that are not needed in this case: https://babeljs.io/docs/en/babel-preset-react . They are probably never invoked, but I guess that they would still be bundled.

[karlhorky]

Ok no problem, switched to @babel/plugin-syntax-jsx.

Is it necessary to require the plugin in loadParser? I required it just in case it was necessary, but maybe Babel is loading it by itself anyway just with the string from the config?

Referring to this line here: https://github.com/fkling/astexplorer/pull/630/files#diff-1ad633961c523945e09257be4996bcc13d0aba974f4522d89b11972cbb30e5f8R16

[fkling]

I tested it locally and it seems to work fine now 👍🏻 Thank you!

[karlhorky]

Great, thanks for testing and merge! 🙌 Tweeted about it haha https://twitter.com/karlhorky/status/1490662541462224897