Support for builded code about react-docgen

[fkling]

I tried to do it

What exactly did you try?

i had problem with npm test

I fixed the test setup in 546635c .

[fkling]

Closing this, since I haven't heard back. I'm also not sure if we can do much here, since, in general, the shape of transpiled code is unknown and there may not be enough information to find the information we we want.

[just-boris]

Hello!

I have also tried to gather documentation for sources after Babel.
Currently, there is now a problem with _interopRequireDefault function:

Given the following code

'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = _interopDefault(require('react'));

function MyComponent(_ref) {
    var className = _ref.className,
        children = _ref.children,
        style = _ref.style;

    return React.createElement(
        'button',
        { className: className, style: style },
        children
    );
}

module.exports = MyComponent;

The problem here is that React identifier is recognized as a result of unknown _interopDefault function. I think it makes sense to check the arguments of the call, whether there is a require or not.
When I added there also a check for arguments, it worked fine.

What do you think about fixing this?

[fkling]

@just-boris, why do you run react-docgen on compiled code? In general I don't think it makes sense to try to fix this since Babel removes a lot of the syntax that react-docgen uses to extract information. Just think about what classes are compiled to:

class Foo extends React.Component {
 propTypes = {
   bar: React.PropTypes.string,
 };
}

becomes

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Foo = function (_React$Component) {
  _inherits(Foo, _React$Component);

  function Foo() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, Foo);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Foo.__proto__ || Object.getPrototypeOf(Foo)).call.apply(_ref, [this].concat(args))), _this), _this.propTypes = {
      bar: React.PropTypes.string
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  return Foo;
}(React.Component);

I'd think this becomes impossible to reliably extract information from.

[just-boris]

Well, of course, if I could run Docgen on top of source code, I did it...

In my case, the problem is that build process for files is a bit complex. I am trying to build documentation using React-styleguidist, it requires me to use Webpack, but the project is built with Rollup, so I have to either, maintain the second version of configuration with Webpack loaders, or just generate documentation based on built files.

Also, to define propTypes, you need to add as static property, and then Babel will write it like

var Foo = function (_React$Component) {
  _inherits(Foo, _React$Component);

  function Foo() {
    _classCallCheck(this, Foo);

    return _possibleConstructorReturn(this, (Foo.__proto__ || Object.getPrototypeOf(Foo)).apply(this, arguments));
  }

  return Foo;
}(React.Component);

Foo.propTypes = {
  bar: React.PropTypes.string
};

Which is recongizable by React-docgen right now.

I have already built a styleguide with modified version of React-docgen, and the only problem, that I have found was about unrecognized React require.