Skip to content

v2.0.0
Compare
Choose a tag to compare
@fkling fkling released this 24 Jul 23:11
· 2216 commits to main since this release
v2.0.0
849cf4a

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.

Assets 2
Loading