Add support for composed component via HoC

[MoOx]

HoC is a good pattern but when I use it, component are not recognized as such.

import Wrapper from "./Wrapper"

const SidebarItem = (props) => {
  return (
    // ...
  )
})

export default Wrapper(SidebarItem)

Any idea how can we add support for this?
I tried to add export { SidebarItem } but no luck :/

[sapegin]

resolver and handlers options might help here but I’ve never used them myself.

[tizmagik]

I'm looking into this right now. It's a real problem with @connect() wrapped components with react-redux for example.

Ideally we shouldn't need to export {unwrappedComponent} but I'll try to think of ways around this. Maybe we can define some mocks to use for those wrappers or something when running in the styleguide?

Any ideas would be helpful!

[idris]

Also wondering about this as many of our components are wrapped with Relay.createContainer

[rewmike]

Has anyone tried this using the resolver option?

[benknight]

Yeah as HoCs become a popular pattern this is definitely a serious limitation.

[sapegin]

Any other ideas than export a component with some special name?

[benknight]

My temporary solution is having a directory structure like this:

my-component
- my-component.jsx
- index.js
- readme.md

Where index.js serves as the entry point and the HoC wrapping happens there, thus leaving my-component.jsx unwrapped, and using that in the styleguide instead and manually passing it whatever props the HoC provided.

[tizmagik]

I was able to do this on my project, although, it wasn't too pretty. I'm thinking about a way we can support HoC generically in react-styleguidist -- any insight/help would be appreciated!

But anyway, here's what I did. I hope it's helpful to some. Using the following, I was able to render an @connect() (redux connected) component -- although it was a very basic component with minimal other dependencies.

Use the handlers option defined like so (I think this mostly comes directly from the docs in this project):

    handlers: docgen.defaultHandlers.concat(function (documentation, docPath) {
        // Calculate a display name for components based upon the declared class name.
        if (docPath.value.type === 'ClassDeclaration' && docPath.value.id.type === 'Identifier') {
            documentation.set('displayName', docPath.value.id.name);

            // Calculate the key required to find the component in the module exports
            if (docPath.parentPath.value.type === 'ExportNamedDeclaration') {
                documentation.set('path', docPath.value.id.name);
            }
        }

        // The component is the default export
        if (docPath.parentPath.value.type === 'ExportDefaultDeclaration') {
            documentation.set('docPath', 'default');
        }
    }),

I then used webpack.resolve.alias to define a mock for redux (specifically for @connect()), like so:

updateWebpackConfig: webpackConfig => {
  webpackConfig.resolve = Object.assign(webpackConfig.resolve, appConfig.resolve);

  // Mock @connect() components
  webpackConfig.resolve.alias['react-redux'] = path.join(__dirname, '/src/util/mockRedux.js');

  // ... other stuff ...

  return webpackConfig;
}

And then mockRedux.js is very simple:

export const connect = () => c => c;

This mostly works, but it's not ideal, but throwing it out there in case it sparks some more ideas on how to solve this cleanly in this project.

[rewmike]

The "quick fix" in my project was to use a broader resolver, however it has resulted in some console errors being reported in the browser (it's finding duplicate definitions). I've made a note to look into it later (but hoping the issue is resolved sooner).

resolver: require('react-docgen').resolver.findAllComponentDefinitions

[nhavar]

I noticed that react-docgen has a pull request recently to add an HOC resolver in the mix. reactjs/react-docgen#124

[tizmagik]

@nhavar yea I noticed that too. Hopefully it gets merged soon so we can close the loop on this issue! 😄

[hauptrolle]

First of all thank you for your nice work. The Styleguide is awesome!

But I have a problem with a HOC wich wraps my component.
I use https://github.com/kentor/react-click-outside for my custom dropdown component, which should close on a "click-outside". But when I try to use my wrapped component in the styleguide I get the error: "Module build failed: ReferenceError: file is not defined"

I this a known problem?

Cheers!

[sapegin]

@hauptrolle Most probably #179. I’d wait a few days for the new version with updated react-docgen — it might be fixed already there.

[hauptrolle]

@sapegin That would be awesome 👍 Thank you for your fast reply!

[sapegin]

4.0.0 is out!

[sapegin]

Could anyone update the cookbook? I’m afraid I don’t have a good example.