better-docs icon indicating copy to clipboard operation
better-docs copied to clipboard

Complex PropTypes support (shape, arrayOf, etc) in component

Open deanolium opened this issue 5 years ago • 2 comments

Currently better-docs doesn't properly support complex propTypes which consists of a propType nested in another (for example, propTypes.shape and propTypes.arrayOf). Instead it just renders this property as being 'shape' or 'arrayOf' which renders the documentation useless for components where you send in an object instead of primatives.

This can be easily fixed:

  • Update the included react-docgen to ^5.3.0
  • Fix the returned props from parseReact (in component.js) so that it returns the prop.type object instead of just the prop.type.name
  • Fix the proptypes.tmpl so that it uses the returned prop from parseReact correctly

Currently it looks like this functionality was half added but then dropped, as proptypes.tmpl has the code to iterate through the sub-props via propType.type.value, however component.js doesn't return that. Also line 27 of proptypes.tmpl assumes that propType.type is a string instead of an object, which conflicts with the section from line 33.

Of course, this fix will only go down one level. To go down more, the template would need to be recursive.

deanolium avatar May 22 '20 08:05 deanolium

I'm happy to work on this as a PR over the weekend since it's relatively straight forward (barring potentially the recursion), doing it in a way which maintains the current structure. Though to have the code done nicely will require a little refactoring (for instance, prop.type shouldn't be used as both a string and an object, but instead always an object with .name and everything else optional)

deanolium avatar May 22 '20 14:05 deanolium

Any updates on this issue?

mowagih96 avatar Nov 19 '20 19:11 mowagih96