|
| 1 | +# react-docgen |
| 2 | + |
| 3 | +`react-docgen` is a CLI and toolbox to help extracting information from React components, and generate documentation from it. |
| 4 | + |
| 5 | +It uses [recast][] to parse the source into an AST and provides methods to process this AST to extract the desired information. The output / return value is a JSON blob / JavaScript object. |
| 6 | + |
| 7 | +It provides a default implementation for React components defined via `React.createClass`. These component definitions must follow certain guidelines in order to be analyzable (see below for more info). |
| 8 | + |
| 9 | +## Install |
| 10 | + |
| 11 | +Install the module directly from npm: |
| 12 | + |
| 13 | +``` |
| 14 | +npm install -g react-docgen |
| 15 | +``` |
| 16 | + |
| 17 | +## CLI |
| 18 | + |
| 19 | +Installing the module adds a `react-docgen` executable which allows you do convert |
| 20 | +a single file, multiple files or an input stream. We are trying to make the |
| 21 | +executable as versatile as possible so that it can be integrated into many |
| 22 | +workflows. |
| 23 | + |
| 24 | +``` |
| 25 | +Usage: react-docgen [path]... [options] |
| 26 | +
|
| 27 | +path A component file or directory. If no path is provided it reads from stdin. |
| 28 | +
|
| 29 | +Options: |
| 30 | + -o FILE, --out FILE store extracted information in FILE |
| 31 | + --pretty pretty print JSON |
| 32 | + -x, --extension File extensions to consider. Repeat to define multiple extensions. Default: [js,jsx] |
| 33 | + -i, --ignore Folders to ignore. Default: [node_modules,__tests__] |
| 34 | +
|
| 35 | +Extract meta information from React components. |
| 36 | +If a directory is passed, it is recursively traversed. |
| 37 | +``` |
| 38 | + |
| 39 | +By default, `react-docgen` will look for the exported component created through `React.createClass` in each file. Have a look below for how to customize this behavior. |
| 40 | + |
| 41 | +Have a look at `example/` for an example of how to use the result to generate |
| 42 | +a markdown version of the documentation. |
| 43 | + |
| 44 | +## API |
| 45 | + |
| 46 | +The tool can be used programmatically to extract component information and customize the extraction process: |
| 47 | + |
| 48 | +```js |
| 49 | +var reactDocs = require('react-docgen'); |
| 50 | +var componentInfo = reactDocs.parse(src); |
| 51 | +``` |
| 52 | + |
| 53 | +As with the CLI, this will look for the exported component created through `React.createClass` in the provided source. The whole process of analyzing the source code is separated into two parts: |
| 54 | + |
| 55 | +- Locating/finding the nodes in the AST which define the component |
| 56 | +- Extracting information from those nodes |
| 57 | + |
| 58 | +`parse` accepts more arguments with which this behavior can be customized. |
| 59 | + |
| 60 | +### parse(source \[, resolver \[, handlers\]\]) |
| 61 | + |
| 62 | +| Parameter | Type | Description | |
| 63 | +| -------------- | ------ | --------------- | |
| 64 | +| source | string | The source text | |
| 65 | +| resolver | function | A function of the form `(ast: ASTNode, recast: Object) => (NodePath|Array<NodePath>)`. Given an AST and a reference to recast, it returns an (array of) NodePath which represents the component definition. | |
| 66 | +| handlers | Array\<function\> | An array of functions of the form `(documentation: Documentation, definition: NodePath) => void`. Each function is called with a `Documentation` object and a reference to the component definition as returned by `resolver`. Handlers extract relevant information from the definition and augment `documentation`. |
| 67 | + |
| 68 | + |
| 69 | +#### resolver |
| 70 | + |
| 71 | +The resolver's task is to extract those parts from the source code which the handlers can analyze. For example, the `findExportedReactCreateClassCall` resolver inspects the AST to find |
| 72 | + |
| 73 | +```js |
| 74 | +var Component = React.createClass(<def>); |
| 75 | +module.exports = Component; |
| 76 | +``` |
| 77 | + |
| 78 | +and returns the ObjectExpression to which `<def>` resolves. |
| 79 | + |
| 80 | +`findAllReactCreateClassCalls` works similarly, but simply finds all `React.createClass` calls, not only the one that creates the exported component. |
| 81 | + |
| 82 | + This makes it easy, together with the utility methods created to analyze the AST, to introduce new or custom resolver methods. For example, a resolver could look for plain ObjectExpressions with a `render` method or `class Component extends React.Component` instead (**note:** a default resolver for `class` based react components is planned). |
| 83 | + |
| 84 | +#### handlers |
| 85 | + |
| 86 | +Handlers do the actual work and extract the desired information from the result the resolver returned. Like the resolver, they try to delegate as much work as possible to the reusable utility functions. |
| 87 | + |
| 88 | +For example, while the `propTypesHandler` expects the prop types definition to be an ObjectExpression and be located inside an ObjectExpression under the property name `propTypes`, most of the work is actually performed by the `getPropType` utility function. |
| 89 | + |
| 90 | +## Guidelines for default resolvers and handlers |
| 91 | + |
| 92 | +- Modules have to export a single component, and only that component is |
| 93 | + analyzed. |
| 94 | +- The component definition must be an object literal. |
| 95 | +- `propTypes` must be an object literal or resolve to an object literal in the |
| 96 | + same file. |
| 97 | +- The `return` statement in `getDefaultProps` must contain an object literal. |
| 98 | + |
| 99 | +## Example |
| 100 | + |
| 101 | +For the following component |
| 102 | + |
| 103 | +```js |
| 104 | +var React = require('react'); |
| 105 | + |
| 106 | +/** |
| 107 | + * General component description. |
| 108 | + */ |
| 109 | +var Component = React.createClass({ |
| 110 | + propTypes: { |
| 111 | + /** |
| 112 | + * Description of prop "foo". |
| 113 | + */ |
| 114 | + foo: React.PropTypes.number, |
| 115 | + /** |
| 116 | + * Description of prop "bar" (a custom validation function). |
| 117 | + */ |
| 118 | + bar: function(props, propName, componentName) { |
| 119 | + // ... |
| 120 | + }, |
| 121 | + baz: React.PropTypes.oneOfType([ |
| 122 | + React.PropTypes.number, |
| 123 | + React.PropTypes.string |
| 124 | + ]), |
| 125 | + }, |
| 126 | + |
| 127 | + getDefaultProps: function() { |
| 128 | + return { |
| 129 | + foo: 42, |
| 130 | + bar: 21 |
| 131 | + }; |
| 132 | + }, |
| 133 | + |
| 134 | + render: function() { |
| 135 | + // ... |
| 136 | + } |
| 137 | +}); |
| 138 | + |
| 139 | +module.exports = Component; |
| 140 | +``` |
| 141 | + |
| 142 | +we are getting this output: |
| 143 | + |
| 144 | +``` |
| 145 | +{ |
| 146 | + "props": { |
| 147 | + "foo": { |
| 148 | + "type": { |
| 149 | + "name": "number" |
| 150 | + }, |
| 151 | + "required": false, |
| 152 | + "description": "Description of prop \"foo\".", |
| 153 | + "defaultValue": { |
| 154 | + "value": "42", |
| 155 | + "computed": false |
| 156 | + } |
| 157 | + }, |
| 158 | + "bar": { |
| 159 | + "type": { |
| 160 | + "name": "custom" |
| 161 | + }, |
| 162 | + "required": false, |
| 163 | + "description": "Description of prop \"bar\" (a custom validation function).", |
| 164 | + "defaultValue": { |
| 165 | + "value": "21", |
| 166 | + "computed": false |
| 167 | + } |
| 168 | + }, |
| 169 | + "baz": { |
| 170 | + "type": { |
| 171 | + "name": "union", |
| 172 | + "value": [ |
| 173 | + { |
| 174 | + "name": "number" |
| 175 | + }, |
| 176 | + { |
| 177 | + "name": "string" |
| 178 | + } |
| 179 | + ] |
| 180 | + }, |
| 181 | + "required": false, |
| 182 | + "description": "" |
| 183 | + } |
| 184 | + }, |
| 185 | + "description": "General component description." |
| 186 | +} |
| 187 | +``` |
| 188 | + |
| 189 | +## Result data structure |
| 190 | + |
| 191 | +The structure of the JSON blob / JavaScript object is as follows: |
| 192 | + |
| 193 | +``` |
| 194 | +{ |
| 195 | + "description": string |
| 196 | + "props": { |
| 197 | + "<propName>": { |
| 198 | + "type": { |
| 199 | + "name": "<typeName>", |
| 200 | + ["value": <typeValue>] |
| 201 | + ["raw": string] |
| 202 | + }, |
| 203 | + "required": boolean, |
| 204 | + "description": string, |
| 205 | + ["defaultValue": { |
| 206 | + "value": number | string, |
| 207 | + "computed": boolean |
| 208 | + }] |
| 209 | + }, |
| 210 | + ... |
| 211 | + }, |
| 212 | + ["composes": <componentNames>] |
| 213 | +} |
| 214 | +``` |
| 215 | +(`[...]` means the property may not exist if such information was not found in the component definition) |
| 216 | + |
| 217 | +- `<propName>`: For each prop that was found, there will be an entry in `props` under the same name. |
| 218 | +- `<typeName>`: The name of the type, which is usually corresponds to the function name in `React.PropTypes`. However, for types define with `oneOf`, we use `"enum"` and for `oneOfType` we use `"union"`. If a custom function is provided or the type cannot be resolved to anything of `React.PropTypes`, we use `"custom"`. |
| 219 | +- `<typeValue>`: Some types accept parameters which define the type in more detail (such as `arrayOf`, `instanceOf`, `oneOf`, etc). Those are stored in `<typeValue>`. The data type of `<typeValue>` depends on the type definition. |
| 220 | + |
| 221 | + |
| 222 | +[recast]: https://github.com/benjamn/recast |
0 commit comments