React Components

[axyz]

First of all this is really an amazing job.
On javascript code it works really well also on medium/big repositories. One thing that do not work well however are React components. usually they are just exported as normal classes (or functions or variables...) and the only unusual thing is that they appear in jsx code (e.g. <Component .... />)

Do you think would be hard to make them works, what implementations problems there may be?

P.S. thanks again for the effort

[jacktasia]

Thanks for the kind words and bringing this up. I think this will be pretty easy for me to do. I am using a lot of React myself recently, so I want this too. I'll update this issue with my progress.

[axyz]

great, thank you. Looking forward for it

[jacktasia]

So I got this working locally for React for the vast majority of my React code:

1. class MyComponent extends Component { ... used like <MyComponent someProp={1}>...</MyComponent>
2. const mySomething = <div>...</div>; used like <div>{mySomething}</div>

That covers the vast majority of my current React code. Is there any usage I am missing that I should support? If so, a code snippet or repo to test against would be appreciated. Thanks!

[axyz]

I use a lot of stateless components in function form so something like:

const MyComponent = props => <div>{props.text}</div>

but may also be

export default MyComponent = ({text}) => <div>{text}</div>

or more exotic stuff like

const MyComponent = ({
  prop1,
  prop2,
}, {
  context1,
  context2,
}) => (
  <div>{prop1} {context1}<div>
);

basically any function may be a component, so stuff like <MyComponent> should be search for source in the whole function scope.

If this leads to problems in the results you can somehow restrict to functions that returns jsx code or React.createElement, but it may be tricky.

Another possible case is the one where you have the name of the export different from the name of the function or class and being a simple assignation e.g.

class MyBaseComponent extends Component .....
const DecoratedComponent = Radium(Rezponsive(MyBaseComponent);
export default DecoratedComponent

but it should be an edge case, as usually people just export default it.

I will keep you updated if I can think of other edge cases.

P.S. lot of people use extends React.Component instead of just Component, in case you want to use it in a regexp.

[jacktasia]

@axyz I just pushed up a change that should cover most, if not all, of these cases. It should be available via MELPA within 12 hours of now. Please re-open this issue if you run into any problems. Thanks again!