When we started working on Rollup, we knew that we needed to make it easy for application developers to figure out what props a component expects. To us that meant providing documentation so that application developers wouldn’t need to look for the entry .jsx file and then examine the propTypes. We first looked for packages that we could run our .jsx files through that would then output Markdown based on the component comments and props, but couldn’t find any that did just that. So we decided to build our own documentation generator based on react-docgen.
react-docgen parses React component files into an AST in JSON format. We then take the output and pipe it through some clever Handlebars templates to produce a Markdown document for each React component. This process is encapsulated in our gulp-react-docs plugin. We decided to implement our documentation generator as a gulp plugin to make it easy to generate documentation for multiple components at a time.
So, using gulp-react-docs we do something like this in our gulpfile.js:
To take components with inline documentation that looks like this: