Skip to content

Commit 0b0a8a9

Browse files
committed
Update readme
1 parent 05718c3 commit 0b0a8a9

File tree

1 file changed

+27
-17
lines changed

1 file changed

+27
-17
lines changed

Diff for: README.md

+27-17
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
# react-docgen [![Build Status](https://travis-ci.org/reactjs/react-docgen.svg?branch=master)](https://travis-ci.org/reactjs/react-docgen)
22

3-
`react-docgen` is a CLI and toolbox to help extracting information from React components, and generate documentation from it.
3+
`react-docgen` is a CLI and toolbox to help extracting information from [React][] components, and generate documentation from it.
44

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.
5+
It uses [recast][] and [babylon][] 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.
66

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).
7+
It provides a default implementation for React components defined via `React.createClass` or [ES2015 class definitions][classes]. These component definitions must follow certain guidelines in order to be analyzable (see below for more info).
88

99
## Install
1010

@@ -36,7 +36,7 @@ Extract meta information from React components.
3636
If a directory is passed, it is recursively traversed.
3737
```
3838

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.
39+
By default, `react-docgen` will look for the exported component created through `React.createClass` or a class definition in each file. Have a look below for how to customize this behavior.
4040

4141
Have a look at `example/` for an example of how to use the result to generate
4242
a markdown version of the documentation.
@@ -50,7 +50,7 @@ var reactDocs = require('react-docgen');
5050
var componentInfo = reactDocs.parse(src);
5151
```
5252

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:
53+
As with the CLI, this will look for the exported component created through `React.createClass` or a class definition in the provided source. The whole process of analyzing the source code is separated into two parts:
5454

5555
- Locating/finding the nodes in the AST which define the component
5656
- Extracting information from those nodes
@@ -68,32 +68,39 @@ As with the CLI, this will look for the exported component created through `Reac
6868

6969
#### resolver
7070

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
71+
The resolver's task is to extract those parts from the source code which the handlers can analyze. For example, the `findExportedComponentDefinition` resolver inspects the AST to find
7272

7373
```js
7474
var Component = React.createClass(<def>);
7575
module.exports = Component;
76+
77+
// or
78+
79+
class Component extends React.Component {
80+
// ...
81+
}
82+
module.exports = Component;
7683
```
7784

78-
and returns the ObjectExpression to which `<def>` resolves.
85+
and returns the ObjectExpression to which `<def>` resolves to, or the class declaration itself.
7986

80-
`findAllReactCreateClassCalls` works similarly, but simply finds all `React.createClass` calls, not only the one that creates the exported component.
87+
`findAllComponentDefinitions` works similarly, but finds *all* `React.createClass` calls and class definitions, not only the one that is exported.
88+
89+
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.
8190

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-
8491
#### handlers
8592

8693
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.
8794

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.
95+
For example, while the `propTypesHandler` expects the prop types definition to be an ObjectExpression and be available as `propTypes` in the component definition, most of the work is actually performed by the `getPropType` utility function.
8996

9097
## Guidelines for default resolvers and handlers
9198

9299
- Modules have to export a single component, and only that component is
93100
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.
101+
- When using `React.createClass`, the component definition (the value passed to it) must resolve to an object literal.
102+
- When using classes, the class must either `extend React.Component` *or* define a `render()` method.
103+
- `propTypes` must be an object literal or resolve to an object literal in the same file.
97104
- The `return` statement in `getDefaultProps` must contain an object literal.
98105

99106
## Example
@@ -192,8 +199,8 @@ The structure of the JSON blob / JavaScript object is as follows:
192199

193200
```
194201
{
195-
"description": string
196-
"props": {
202+
["description": string,]
203+
["props": {
197204
"<propName>": {
198205
"type": {
199206
"name": "<typeName>",
@@ -208,7 +215,7 @@ The structure of the JSON blob / JavaScript object is as follows:
208215
}]
209216
},
210217
...
211-
},
218+
},]
212219
["composes": <componentNames>]
213220
}
214221
```
@@ -219,4 +226,7 @@ The structure of the JSON blob / JavaScript object is as follows:
219226
- `<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.
220227

221228

229+
[react]: http://facebook.github.io/react/
222230
[recast]: https://github.com/benjamn/recast
231+
[babylon]: https://github.com/babel/babel/tree/master/packages/babylon
232+
[classes]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

0 commit comments

Comments
 (0)