search

strothj / react-docgen-typescript-loader

Webpack loader to generate docgen information from Typescript React components.
Other
360 stars 47 forks source link

Preserve Parent Info #50

Open RichiCoder1 opened 4 years ago

RichiCoder1 commented 4 years ago

It'd be nice if the type info (source file, parent) that react-docgen-typescript produces were preserved in some form.

We're currently producing components with interfaces like this:

type CtaLinkProps = React.ComponentPropsWithoutRef<'a'> & {
    /** Contains a URL that the hyperlink points to. */
    href: string;

    children: ReactRequiredChildren;
};

The upshot of this being that in addition to the explicitly defined propTypes, we also get all the HTML props. We like this behavior however....it'd be nice to break the props table that Info displays into "defined by Component" props and "defined by underlying element" prop. We could do this with a custom PropTable, but without the source type info we can't break down the prop types without some really bizzare hacks. Are only other option is to filter out the HTMLElement props using propFilter, but we'd like to keep them in some form.

I'd be willing to make a PR to this end if there is interest.

strothj commented 4 years ago

This sounds great.

You'll need to review the docgen structure returned from the underlying react-docgen-typescript project to determine if the information you need is present or not. That library performs the actual data extraction from the source code.

If it doesn't provide the necessary information, you'd need to make a pull request there first to expose it. After you've exposed that information, it should be straight forward to attach it in this Webpack loader. This loader takes that information and attaches it to each component as a field.

From there you'd either use a custom table component or follow this up with a pull request to the relevant Storybook add-on.

I'd be happy to accept any pull request you make if you decide to develop this feature.