The description of extended Props is not output correctly

Open
#997 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
48/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
typescript
Domain
documentation

Research direction

Start by reproducing the TypeScript example with @react-docgen/cli@3.0.0 and inspect how descriptions are chosen for inherited props. Trace the extended Props handling and add a regression test for the FooProps/BarProps case. Done means param1 uses "FooProps param1" while inherited and other prop descriptions remain correct.

Written by the indexing model from the issue text.

Description

I created FooProps by extending BarProps, but the description of FooProps is not used; instead, the description of BarProps is adopted.

Input

export interface BarProps {
  /** BarProps param1 */
  param1: any;
}

export interface FooProps extends BarProps {
  /** FooProps param1 */
  param1: string;
  /** FooProps param2 */
  param2: string;
}

export const Foo = (props: FooProps) => {
  return <div>foo</div>;
};

output

{
  "./src/foo.tsx": [
    {
      "description": "",
      "methods": [],
      "displayName": "Foo",
      "props": {
        "param1": {
          "required": true,
          "tsType": {
            "name": "string"
          },
          "description": "BarProps param1"
        },
        "param2": {
          "required": true,
          "tsType": {
            "name": "string"
          },
          "description": "FooProps param2"
        }
      }
    }
  ]
}

The props.param1.description should be "FooProps param1" instead of "BarProps param1".

Tested on @react-docgen/cli@3.0.0

Dominant language
TypeScript
Stars
3.8k
Forks
316
Avg merge
3h 28m
Merged PRs (30d)
6

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from reactjs/react-docgen

All issues in reactjs/react-docgen

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.