Redux connect support

[maximelebastard]

Hi,

I have a React/Redux app that I'd like to document. With redux, I use the connect() function.

But when I use it, react-docgen cannot find a valid component in my file.

This works:

const Contributors = React.createClass({...});
export default Contributors;

This does not:

const Contributors = React.createClass({...});
const mapStateToProps = (state) => {
  return { contributors: state.contributors }
}
export default connect(mapStateToProps)(Contributors);

I found a workaround by appending this to the end of file, but I don't know if it will not break something later:

module.exports = Contributors;

[rtsao]

I've run into this issue as well. I've added support for single unary higher-order-components in my personal fork. This is the relevant commit here: rtsao@9ca8127

You can turn your code to use a single unary higher-order component like so:

const Contributors = React.createClass({...});
const mapStateToProps = (state) => {
  return { contributors: state.contributors }
}

const hoc = (Component) => connect(mapStateToProps)(Component);

export default hoc(Contributors);

The above code will work with my fork.

If multiple higher order components are needed, you can use recompose's compose helper.

I think only supporting a single unary higher-order component seems like a reasonable compromise, since basically you can convert all forms of higher-order component composition into that form. To support multiple (or an arbitrary number of) call expressions or arguments it seems like one would need to go down a rabbit hole.

I'd be happy to create a PR if @fkling thinks my approach is reasonable. I haven't yet done so already because I worry I might have broken some existing code structure conventions (by requiring '../utils/match' and 'recast' directly within a resolver), but that's probably a straightforward refactor.

[fkling]

@rtsao:

I've added support for single unary higher-order-components in my personal fork

That seems very reasonable to me, and I think it would even make sense to expand this to non-unary functions. The other arguments could be included in the output as well, as far as possible. Happy to review that PR :)

@maximelebastard
As an intermediate solution, if you can use the findAllComponentDefinitions resolver, which looks for all component definitions, not just the exported ones.

[tizmagik]

@rtsao that looks very useful! Was a PR ever submitted for this?

To support multiple (or an arbitrary number of) call expressions or arguments it seems like one would need to go down a rabbit hole.

Maybe naive, but would it be possible to recursively resolve the "right" hand side expression until you reach a React class or undefined?

[rtsao]

Yeah, actually I think this should be very doable.

export default hoc1(Component);

export default hoc1(arg1a, arg1b)(Component);

export default hoc2(arg2b, arg2b)(
  hoc1(arg1a, arg2a)(Component)
);

export default hoc3(arg3a, arg3b)(
  hoc2(arg2b, arg2b)(
    hoc1(arg1a, arg2a)(Component)
  )
);

// etc...

When I get a chance I'll give it a go and submit a PR

[rtsao]

I've implemented this here: #124