Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Typescript: Component declaration reference is not recognized by parser #898

Open
isaac-y-baron opened this issue Feb 6, 2024 · 0 comments

Comments

@isaac-y-baron
Copy link

Description

Many Typescript libraries publish types in declaration files (.d.ts) alongside their associated .js bundles. In .d.ts files generated through TS compilation, function types are often defined using declaration references, such as:

declare const MyComponent: React.FunctionComponent<ComponentProps>;

Currently declaration references are not recognized by reactDocgen.parse(). When react-docgen parses a .d.ts file with a single declaration reference, it emits an error: Error: No suitable component definition found..

Desired Behavior

The following code:

import * as React from 'react';

interface ComponentProps {
  foo: string;
}

/**
 * My component is so darn cool!
 */
const Component1: React.FunctionComponent<ComponentProps> = () => <div />;

/**
 * Mine too!
 */
declare const Component2: React.FunctionComponent<ComponentProps>;

Results in the following output:

[
  {
    "description": "My component is so darn cool!",
    "displayName": "Component1",
    "methods": [],
    "props": {
      "foo": {
        "required": true,
        "tsType": {
          "name": "string"
        },
        "description": ""
      }
    }
  },
  {
    "description": "Mine too!",
    "displayName": "Component2",
    "methods": [],
    "props": {
      "foo": {
        "required": true,
        "tsType": {
          "name": "string"
        },
        "description": ""
      }
    }
  }
]

Actual Behavior

The same code results in the following output:

[
  {
    "description": "My component is so darn cool!",
    "displayName": "Component1",
    "methods": [],
    "props": {
      "foo": {
        "required": true,
        "tsType": {
          "name": "string"
        },
        "description": ""
      }
    }
  }
]

Steps to Reproduce

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant