reactjs / react-docgen

A CLI and library to extract information from React component files for documentation generation purposes.
https://react-docgen.dev
MIT License
3.65k stars 295 forks source link

Typescript: Component props not parsed with 'call signature' type #897

Open isaac-y-baron opened 8 months ago

isaac-y-baron commented 8 months ago

Description

In Typescript, it's possible to type a function using a call signature.

For example, this is valid TS:

interface A {
  foo: string;
}

type FnType = (props: A) => string;

const Fn1: FnType = (props) => props.foo; // valid
const Fn2 = (props: A) => props.foo; // also valid

See example in TS Playground

In the above example, react-docgen generates types for Fn2, but does not generate types for Fn1 which is defined with a call signature type.

Expected Behavior

This code:

// component.tsx
interface A {
  foo: string;
}

type ComponentType = (props: A) => JSX.Element;

const Component1: ComponentType = (props) => <div />; // does not include generated props
const Component2 = (props: A) => <div />; // includes generated props

Produces this output:

[
  {
    "description": "",
    "displayName": "Component1",
    "methods": [],
    "props": {
      "foo": {
        "required": true,
        "tsType": {
          "name": "string"
        },
        "description": ""
      }
    }
  },
  {
    "description": "",
    "displayName": "Component2",
    "methods": [],
    "props": {
      "foo": {
        "required": true,
        "tsType": {
          "name": "string"
        },
        "description": ""
      }
    }
  }
]

Actual Behavior

The same code produces this output:

[
  {
    "description": "",
    "displayName": "Component1",
    "methods": []
  },
  {
    "description": "",
    "displayName": "Component2",
    "methods": [],
    "props": {
      "foo": {
        "required": true,
        "tsType": {
          "name": "string"
        },
        "description": ""
      }
    }
  }
]

Steps to Reproduce

Paste the .tsx sample code from the "Expected Behavior" section in the react-docgen playground with Language set to Typescript.