Intention to parse/extract description?

[dennisreimann]

I came here looking for an alternative to react-docgen, which as you describe lacks proper ways to parse complex prop-types structures, i.e. with imported types. Your library works great and offers what I am looking for, so thanks for that! 👍

The one thing I miss™️ are the description prop-type properties as they are offered by react-docgen. As your library does not use a parser this might not be trivial to add, but I wanted to ask about your thoughts regarding this and whether or not you'd be interested in a contribution for this feature.

[diegohaz]

Hi @dennisreimann.

I would like to add this feature, but I have no idea how to implement that. I'm open for suggestions.

[dennisreimann]

I dove a little deeper and checked some possibilities (extract-comments and using @babel/parser directly). Even though it's pretty simple to get the comments from the parsed file, I don't see a way to map them to the PropType definitions.

There is no parser information (like line numbers etc.) available in the parse-prop-types output and even if, this would be limited to the original files – exluding PropTypes which were imported from other files. To fix the latter we'd have to add more meta information to the output, which isn't nice either.

What's your opinion on consuming a proprietary attribute like propDescriptions in the parsePropTypes signature? Like so:

const parsePropTypes = ({
  propTypes = {},
  defaultProps = {},
  propDescriptions = {}
} : {
  propTypes?: Object,
  defaultProps?: Object,
  propDescriptions?: Object
}) // …

This would allow for defining the descriptions programmatically, similar to the defaultProps:

Person.propTypes = {
  name: PropTypes.string
}

Person.propDescriptions = {
  name: "The persons first and last name"
}

It'd be a proprietary way to define this information and it's not as elegant/intuitive as via the comments, but at least there's be a way to further describe the PropTypes and it'd be way easier to implement.

What are your thoughts?

[diegohaz]

I think that's a good solution. But that propDescriptions should be removed from the production bundle somehow. Otherwise, they will increase significantly the bundle size, since strings aren't minified.

Maybe there's some babel plugin that eliminates code with comment flags? Something like this:

// babel-eliminate-next
Person.propDescriptions = {
  name: "The persons first and last name"
}

[dennisreimann]

For Babel there is babel-plugin-transform-react-remove-prop-types, but it doesn't trim this proprietary attribute. Another solution would be to leverage Webpacks DefinePlugin.

In my case the comments/descriptions aren't as extensive as I would care, but I understand the concern and there have been prior discussions about removing PropTypes alltogether.

Thinking about it I'm also intrigued by the idea of having something like description as a function implemented directly in the prop-types package, similar to how react-desc does it. Other people are interested in something like this as well and it'd be great to have it in prop-types directly, as we aren't using React but HyperApp which also works with JSX.

[antoniojps]

Any evolvement in this feature? Would be great!