Closed
Description
I've used react-docgen to create a webpack plugin that generates a markdown documentation. But I've encountered a small issue when trying to access the description of PropTypes directly nested inside arrayOf or objectOf.
In some of my components I'd like to describe the meaning of the type in the arrayOf or objectOf and not just the inner properties that each value needs to have. Currently I can achieve this in the description of arrayOf or objectOf, but this can look odd when a single object is described within the containing collection.
Given the example code below:
/**
* General component description.
*/
var Component = React.createClass({
displayName: 'Component',
propTypes: {
/**
* Comments of PropTypes that are direct children of arrayOf don't work.
*/
prop: React.PropTypes.arrayOf(
/**
* This comment won't be generated in the resulting react-docgen object.
*/
React.PropTypes.shape({
/**
* Simple Prop inside a nested shape works
*/
subProp: React.PropTypes.number
})),
/**
* This applies to objectOf as well.
*/
anotherProp: React.PropTypes.objectOf(
/**
* Again, this comment won't be generated in the resulting react-docgen object.
*/
React.PropTypes.number
).isRequired,
/**
* Top level shape works as expected.
*/
topLevelShape: React.PropTypes.shape({
/**
* Index has a description
*/
index: React.PropTypes.number,
/**
* Value has a description
*/
value: React.PropTypes.string
})
},
render: function() {
// ...
}
});The resulting react-docgen object looks like this
{
"description": "General component description.",
"displayName": "Component",
"methods": [],
"props": {
"prop": {
"type": {
"name": "arrayOf",
"value": {
"name": "shape",
"value": {
"subProp": {
"name": "number",
"description": "Simple Prop inside a nested shape works",
"required": false
}
}
}
},
"required": false,
"description": "Comments of PropTypes that are direct children of arrayOf don't work."
},
"anotherProp": {
"type": {
"name": "objectOf",
"value": {
"name": "number"
}
},
"required": true,
"description": "This applies to objectOf as well."
},
"topLevelShape": {
"type": {
"name": "shape",
"value": {
"index": {
"name": "number",
"description": "Index has a description",
"required": false
},
"value": {
"name": "string",
"description": "Value has a description",
"required": false
}
}
},
"required": false,
"description": "Top level shape works as expected."
}
}
}The comments above the directly nested types are not present.