`export default Component` and functional components declared with `function()` do not work about babel-plugin-react-docgen HOT 10 CLOSED

This all stems from my fondness of exporting everything (for unit-tests and storybooks) but making a default export that is the complete redux-connected component, as I use it my app. Most of my code looks like this, and I'd love to be able to get the doctext out:

import React from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'

/** A dumb component that says "hello" */
export const Demo = ({name}) => (<div>Hello {name}</div>)

Demo.propTypes = {
  /** the name of the person to say "hello" to */
  name: PropTypes.string
}

Demo.defaultProps = {
  name: 'World'
}

export const mapStateToProps = state => ({
  name: state.name
})

export default connect(mapStateToProps)(Demo)

This makes it so I can unit-test my state-mappings, the Component (without redux) and write storybook stories for just the component, but it's also super-simple to use in my redux-enabled app.

from babel-plugin-react-docgen.

@konsumer @danielduan i made a pr which allows you to use one of the builtin resolvers of react-docgen by passing options to the babel plugin.

I'm not sure how to write the tests for it however :(

from babel-plugin-react-docgen.

It looks like we might not support stateless functional components like function Component() {}. A workaround would be to write it as Component() => {}. You are welcome to submit a PR to add this though.

We haven't tested it with Docgen 3, but that's probably not the issue here.

from babel-plugin-react-docgen.

@danielduan Thanks for the feedback. Per your suggestion, I tried a couple different approaches and found the following.

These work:

const Button = () => { /*omitted*/ }
export default Button;

class Button extends Component { /*omitted*/ }
export default Button;

These don't work:

function Button() { /*omitted*/ }
export default Button;

export default class Button extends Component { /*omitted*/ }

Also, thanks for opening the door for a PR. I would do it but I don't have the time at this very moment. I wouldn't totally mind opening a PR to document more explicitly what syntax is valid for this plugin to kick in. I see there is an example on the README that conflicts with what I've found, I wouldn't mind updating that example.

from babel-plugin-react-docgen.

I am having a similar issue (see here and here for a demo.) I can make it work if I only export 1 interface (stateless function or not) but I like to export default + individual components.

Maybe a simple detect-react-components strategy would help:

1. If only default or 1 exported function, that's the react component
2. If there is more than one exported function (default and/or other exports) try to annotate them all, I don't really mind if other non-react-component functions get annotated, maybe hide behind a flag to not be so greedy about matching functions

If this makes sense, I'll work on a PR.

from babel-plugin-react-docgen.

I think there's a few bugs here:

1. inlined export doesn't get detected export default class Button
2. named exports don't get docgen info when there's a default export
3. function Button() doesn't get recognized as stateless functional components

Your approach sounds good and will fix 2, but you might need to address 1 as well.

from babel-plugin-react-docgen.

Yeh, I see your point. Maybe 1 could be resolved with "extends React.Component?" check. I feel like a straight check for "of the things exported, if it's a function or extends React.Component, or is createReactClass" would, if not overly-greedy, hit all the targets. As I said, I don't really mind if too much is annotated, as it can just be ignored. Does this seem like a sensible approach?

from babel-plugin-react-docgen.

I made an issue (and patch) here that resolves this for my use-case. I suspect that I am probably missing some key detail, but if it gets in, it should resolve the issue.

from babel-plugin-react-docgen.

In CLI it seems to work fine with a different built-in resolver, but I don't see any way to add that config to babel-plugin-react-docgen, as it's used in storybook's webpack config.

react-docgen --pretty --resolver findAllComponentDefinitions src/stories/Demo.js:

[
  {
    "description": "A dumb component that says \"hello\"",
    "methods": [],
    "props": {
      "name": {
        "type": {
          "name": "string"
        },
        "required": false,
        "description": "the name of the person to say \"hello\" to",
        "defaultValue": {
          "value": "'World'",
          "computed": false
        }
      }
    }
  }
]

If the default were findAllComponentDefinitions, or we were able to override the resolver with a config var, it would make it work for my use-case.

from babel-plugin-react-docgen.

We could expose it as an option for the babel plugin. I'm gonna guess there's probably a way to pass something to react-docgen to turn on findAllComponentDefinitions too.

Sorry I'm not too responsive this past week and I'm gonna be away for the next one as well. If you find a solution, please do update and open a PR.

from babel-plugin-react-docgen.