HOC as a function won't get generated docs

[rsouthgate]

Similar to #177 but a slightly different scenario...

Given a HOC method like so:

import { bool } from 'prop-types';

const withSomeExtraProps = Wrapped => {
  class HigherOrderComponent extends Component  {
    static propTypes = Object.assign({}, Wrapped.propTypes, {
      /**
       * This should be picked up in the docgenInfo
       */
      anExtraProp: bool,
    });
    static defaultProps = Object.assign({}, Wrapped.defaultProps, {
      anExtraProp: false,
    });
    // ....the rest of the HOC logic
  }
  return HigherOrderComponent;
}

export default withSomeExtraProps;

I understand that this wouldn't automatically mean that the export default withSomeExtraProps(Wrapped) wouldn't automatically get the docgenInfo from the HOC added, but I thought individually this HOC would have it's own docgenInfo that I could reference on it's own.

However, it seems the inner component class here doesn't get recognised and parsed. Does the component class need to be exported for the parser to find it?

[fkling]

Does the component class need to be exported for the parser to find it?

In the default configuration yes. However, we have multiple resolvers that you can use to e.g. find all components defined in a file.

[purdrew]

I am running into the same situation. I've tried using the findAllComponentDefinitions.js resolver but it it still failing to identify the properties of the HOC. @rsouthgate Were you successful using an alternate resolver?

[fkling]

@deedubbu, you could also try https://github.com/Jmeyering/react-docgen-annotation-resolver .

[joaovieira]

Been having troubles with HOC as well. Boiling it down to the minimum, consider:

import React from 'react';
const enhanced = () => () => <div />;
export default enhanced;

I get:

Error: No suitable component definition found.

Are functions that return components (HOCs) not supported at all? Tried all the resolvers without success.

Though the end goal would be to pick up the propTypes definitions from the inner component as well.

[fkling]

Are functions that return components (HOCs) not supported at all?

They are not, at least not by default. The problem is that there are too many ways to define HOCs.

However, there is also nothing stopping anybody to write specific resolvers and handlers for specific HOCs 😉

[joaovieira]

Cool. Will have a look at that. Thanks for the quick reply 👍

[davidungio]

I couldn't get the https://github.com/Jmeyering/react-docgen-annotation-resolver to work with my HOC which is a function as well. Would love some direction on how to go about writing a custom one. Thanks!

[k4b7]

We have some HOCs in our code base along with our functions, constants, and stuff. It would be nice if react-docgen expanded its remit beyond strictly components. Are there any tools out there that cover both components and non-component code? typedoc looks nice for TypeScript projects, but it doesn't handle React components very well. :(

[kaiofelipejs]

My workaround for this issue:

const BaseComponent = withMyHOC(
  forwardRef(({ children, ...rest }, ref) => {
    return <div ref={ref}>{children}</div>;
  })
);

// added a comment explain this
const Component = props => <BaseComponent {...props} />;