gandm / language-babel

ES2017, flow, React JSX and GraphQL grammar and transpilation for ATOM
https://atom.io/packages/language-babel
MIT License
476 stars 83 forks source link

Issue with syntax highlighting components that take functions as props. #412

Closed jackfranklin closed 7 years ago

jackfranklin commented 7 years ago

Firstly, thank you so much for your work on this plugin. It's made working in Atom an absolute dream!

I've just come across what I think might be a very edge case syntax highlighting issue. It occurs when you have a component that you're passing in a function as a prop, and that function is an arrow function that returns another JSX element via an implicit return.

It's hard to describe, so I took screenshots! Here's the broken version - note that the children prop is an arrow function with an implicit return, and note that the syntax highlighting is off.

screen shot 2017-09-13 at 18 22 45

Here's a version where the arrow function is an explicitly returning one - it has a body wrapped in braces, and you can see the syntax highlighting is working correctly:

screen shot 2017-09-13 at 18 22 31

Additionally, if I take the broken first example and put the children prop onto its own line, that fixes the highlighting too:

screen shot 2017-09-13 at 18 25 45

It's a very edge case and easily avoided, but thought I'd raise the issue :)

gandm commented 7 years ago

Thanks for the report and kind words.

jackfranklin commented 7 years ago

Thank you so much for such a quick response!