React-styleguidist: Can't export HOC component?

[tiagojsalmeida]

First of all awesome work with Styleguidist!

I'm having issues with High order components (HOC).
Basically one of my component files is something like this:

function test(WrappedComponent) {
    class Test extends Component {
        test() {
            console.log('test');
        }

        render() {
            return (
                <WrappedComponent
                    {...this.props}
                    test={this.test.bind(this)}
                />
            );
        }
    }

    return Test;
}

export default test;

As you can see i'm exporting a function, hence getting this Issue:
Warning: test.js matches a pattern defined in ”components” or “sections” options in your style guide config but doesn’t export a component.

My handers are the same as in the example (https://github.com/styleguidist/react-styleguidist/blob/4e815924edee34f7e9661219283f8fa076ca32c5/docs/Configuration.md#handlers) but still not working.

Am I missing something?

[sapegin]

Try to export Test component.

[tiagojsalmeida]

But that's not the purpose. Also Test depends on WrappedComponent.

[sapegin]

You need to export a component, otherwise react-docgen couldn’t make documentation for it. Otherwise you can create a section and describe your HOC using regular Markdown.

[n1313]

@tiagojsalmeida the important thing to understand how RSG works is that in its core is react-docgen, which takes your files and parses them as strings without executing them. It cannot follow an import and it doesn't understand how HOCs work, but in exchange it can read your code comments. An approach I personally find useful when working with "wrapped" components is to export both wrapped and un-wrapped versions of the component: one goes into production, another goes into RSG. If your wrappers are complicated and add a lot of extra functionality then you should talk to react-docgen about parsing HOCs.

[tiagojsalmeida]

What about when my component is generated by a function call?

So per example, some of my components are like:

export default makeIcon('name-of-the-icon', 'red');

while makeIcon return a component.

So in theory i'm exporting a component but react-docgen doesn't detect it..

[sapegin]

It does static analysis which is far from magic and can’t really understand your code. If you believe it could be implemented please file an issue in react-docgen repo.

[xuelq007]

is there any solution for that? I also get the problem when export HOC.