react-docgen

Fixes

• Fix docblock extraction for classes with decorators ( #49 , 44777a9040b7bde9498ee8cf0a527a4c747a6955 )

New: --resolver CLI option

The --resolver lets you specify from the CLI which resolver* to use. It can either be the name of a built-in resolver or a path to a JavaScript module that exports a resolver function:

react-docgen --resolver findExportedComponentDefinition ./path/to/component.js
# same as 
react-docgen ./path/to/component.js

react-docgen --resolver findAllComponentDefinitions ./path/to/component.js

react-docgen --resolver ./path/to/custom/resolver.js ./path/to/component.js

Read more about resolvers.

* Resolvers contain the logic to find React component definitions in the JavaScript files.

New

• Better support for React Native ( #44 )

Fixes

• Variables used for propTypes and defaultProps, e.g.

  MyClass.defaultProps = defaultProps;
  

  are now properly resolved for class and stateless components. Thanks to @oliviertassinari for reporting this issue! ( #45, #46 )

New

Support for stateless/funtional components (React v0.14)

Since React v0.14, components can be defined as simple functions:

function SimpleComponent(props) {
    return <div>{this.props.soSimple}</div>
}

Thanks to @iamdustan, react-docgen is now able to detect these components as well. The findExportedComponentDefinition and findAllComponentDefinitions have been updated accordingly.

A function is considered to be a stateless React component if we can determine that it returns a JSX element or the result of a React.createElement call. As always, there are limits to what can be achieved with static analysis, so it might not detect every possible case (but maybe your component is too complex then anways? ;) ).

Fixes

The propTypeCompositionHandler was not part of the default handlers and therefore the generated documentation didn't contain information about composition.

Improved

• Now parses code that uses do expressions or function bindings (https://github.com/reactjs/react-docgen/pull/32).

(I wasn't sure whether this should be considered to be a bug fix or new feature, but I went with new feature instead)

New

• Consider docblock above decorator annotations (#18). In the following example the docblock is now used for the component description:

  /**
  * This is the description
  */
  @SomeDecorator
  export default class extends React.Component {
  
  };
  

• Detect isRequired in shape annotations (second part of #21)

Fixes

• defaultPropHandler throws error when encountering non-Property node (#22)

New

• "Short" docblocks are now recognized (#20, d3a3f3f64d3642659c224d8fbc31fe53e8d855a9):

  /** Short docblock */
  

• Docblocks on shape fields are now added to the output (#21, f5415ced5c4b6eb604b4c39093b8875d29a12239):

  React.PropTypes.shape({
    /**
     * Field description
     */
     field: React.PropTypes.string
  });
  

  produces

  {
    name: 'shape',
    value: {
      field: {
        name: 'string',
        description: 'Field description',
      }
  }
  

Fixes

• Typo in getPropertyName export name (#19)

New: Support for ES2015 class definitions

react-docgen is now able to find components defined as ES2015 classes. A class either has to extend React.Component or has to define a render() method in order to be recognized as React component.

Examples:

class Component extends React.Component {
  // ...
}

class Component {
  render() {
    // ...
  }
}

are both considered React components. The default resolvers have been updated and renamed accordingly.

For propTypes, defaultProps and other properties, react-docgen supports class properties (ES7 stage 0 proposal at the moment of this release) and assignments to the constructor function. Example:

class Component extends React.Component {
  static propTypes = { ... };
}

// or

class Component extends React.Component {
  // ...
}
Component.propTypes = { ... };

New: displayNameHandler

This new default handler adds the displayName of a component to the documentation. Example:

var Component = React.createClass({
  displayName: 'Foo',
});
class Component extends React.Component {
  // ...
}
Component.displayName = 'Foo';

will result in the documentation object {displayName: 'Foo'}.

Changed: Structure of returned documentation object

The props and description properties are now not present anymore if no props or description could be extracted from the definition. I.e. instead of getting :

{
  "description": "",
  "props": {}
}

(like it is now), you would get

{}

This makes it easier to test for the existence of props in the first place:

if (doc.props) {
  // component has props, render them
}

Changes for custom handler implementations

API of Documentation class

The setDescription and getDescription methods are gone. Instead we added the generic set(key, value) and get(key) method. This allows custom handlers to add arbitrary data to the documentation. Data set this way will be added as properties to the result documentation object.

E.g. if a handler calls documentation.set('foobar', 42), the output will be

{
  "foobar": 42
}

New helper methods

getMemberPathValue is a new function which helps handlers to process component definitions, irrespectively if the definition is a React.createClass({}) call or a class Component {} declaration.

AST structure changes

Because react-docgen uses Babylon (Babel's parser) instead of esprima-fb now, custom handlers/resolvers might have to be updated because of slight AST representation differences.

react-docgen now understands the following constructs:

import foo from 'Foo';
import {foo} from 'Foo';
import {foo as bar} from 'Foo';

export var Component = React.createClass({});

var Component = React.createClass({});
export {Component};
export {Component as Foo};
export default Component;

export default React.createClass({});

You will now be able to use ES6 import and export declarations with your react components. However, to "detect" a React component, React.createClass(...) must still be present in the source.

• Add support for destructuring assignments

• Extract composition detection logic from propTypeHandler into
  propTypeCompositionHandler. propTypeHandler still delegates to
  propTypeCompositionHandler for backwards compatibility.
• Expose an array of default handlers as defaultHandlers on the root
  object.
• Relax requirements for composition detection in spread properties (see
  878d57d).