react-docgen icon indicating copy to clipboard operation
react-docgen copied to clipboard

Entire import statement taken as the type of imported constant

Open Ayush-Warikoo opened this issue 3 years ago • 2 comments

This issue appears to be the same as https://github.com/reactjs/react-docgen/issues/150, however, now instead of it throwing an error, the entire import statement is presented as the type.

In my use case, a particular prop can only be one of a few strings which are constants defined in another file. When importing them directly, the json output copies the entire import statement, rather than just the constant value or name, for example:

import { const1, const2, const3, const4 } from './otherFile';
//...
Comp.propTypes = {
    prop: PropTypes.oneOf([const1, const2])
}

Which produces:

// ...
{
    "value": "import { const1, const2, const3, const4 } from './otherFile';",
    "computed": "true"
},
{
    "value": "import { const1, const2, const3, const4 } from './otherFile';",
    "computed": "true"
},
// ...

The work around for this is to import everything under an alias first, as mentioned in issue #150 (import * as constantsAlias from './otherFile';), which works, but it is preferable not to need a workaround and the previous issue was closed.

The situation can be replicated in the playground, where the imported constants are represented by imports from 'react':

import React, { Component, PureComponent, useEffect, useState } from 'react';
import PropTypes from 'prop-types';

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

MyComponent.propTypes = {
  foo: PropTypes.oneOf([
    Component,
    PureComponent,
    React.Component,
    React.PureComponent
  ]).isRequired,
};

export default MyComponent;

Which produces:

{
  "description": "",
  "displayName": "MyComponent",
  "methods": [],
  "props": {
    "foo": {
      "type": {
        "name": "enum",
        "value": [
          {
            "value": "import React, { Component, PureComponent, useEffect, useState } from 'react';", // bug
            "computed": true
          },
          {
            "value": "import React, { Component, PureComponent, useEffect, useState } from 'react';", // bug
            "computed": true
          },
          {
            "value": "React.Component",
            "computed": true
          },
          {
            "value": "React.PureComponent",
            "computed": true
          }
        ]
      },
      "required": true,
      "description": ""
    }
  }
}

Ayush-Warikoo avatar Apr 11 '22 00:04 Ayush-Warikoo

Thanks for reporting. This is definitely wrong, we will have a look soon.

danez avatar Apr 11 '22 08:04 danez

Indeed, I've just noticed probably the same issue:

orientation: PropTypes.oneOf([HORIZONTAL, VERTICAL]),

would produce literally those consts as strings in Storybook Docs as options, instead of the values they represent.

whitezo avatar Apr 22 '22 09:04 whitezo

The reported issue is now fixed in the main branch.

@whitezo Do you have a complete example? Especially where the constants are defined. If react-docgen cannot resolve the constants then it will just user their names.

danez avatar Mar 26 '23 18:03 danez