babel-plugin-react-docgen-typescript

babel-plugin-react-docgen-typescript is a Babel Plugin to generate docgen data from React components written in TypeScript.

Installation

$3

* @babel/core

$ npm install --save-dev babel-plugin-react-docgen-typescript

Usage

Via .bablerc

``json { "plugins": [ [ "babel-plugin-react-docgen-typescript", { "docgenCollectionName": "STORYBOOK_REACT_CLASSES", "include": "components.*\\.tsx$", "exclude": "stories\\.tsx$" } ] ] }`

`$3`

This plugin calls out to a parser from react-docgen-typescript for all files ending in .tsx$. This is very inefficient. This plugin is a bit of a hack.

To speed things up a bit, it is recommended to include the plugin settings include and exclude to restrict parsing to your component directories.

`$3`

| Setting | Required | Type | Description | Example | | -------------------- | ------------ | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | | skipPropsWithName | false | string[] or string | This option is passed along toreact-docgen-typescript's parser. It globally ignores props with the specified name(s). | "classname" or ["classname", "color"]| | skipPropsWithoutDoc | false | boolean | This option is passed along toreact-docgen-typescript's parser. It globally ignores props without documentation. | true| | shouldExtractLiteralValuesFromEnum | false | boolean | This option is passed along toreact-docgen-typescript's parser. It convert string enums and unions to docgen enum format. Possible values are still accessible. | true| | shouldExtractValuesFromUnion | false | boolean | This option is passed along toreact-docgen-typescript's parser. It convert multiple types to docgen enum format. Possible values are still accessible. | true| | docgenCollectionName | false | string | Enables collecting docgen data into a global object. This is used to integrate with tools like Storybook. |"STORYBOOK_REACT_CLASSES"| | include | false | string | A regular expression of files to pass along toreact-docgen-typescript's parser. Defaults to \.tsx$. | "components.*\\.tsx$"| | exclude | false | string | A regular expression to filter the results from include. For instance, you can add a regular expression to prevent files ending in.stories.tsx from being processed in your component directories. | "stories\\.tsx$"` |

License

MIT

Usage

Via .bablerc

json
{
  "plugins": [
    [
      "babel-plugin-react-docgen-typescript",
      {
        "docgenCollectionName": "STORYBOOK_REACT_CLASSES",
        "include": "components.*\\.tsx$",
        "exclude": "stories\\.tsx$"
      }
    ]
  ]
}

$3

This plugin calls out to a parser from react-docgen-typescript for all files ending in .tsx$. This is very inefficient. This plugin is a bit of a hack.

To speed things up a bit, it is recommended to include the plugin settings include and exclude to restrict parsing to your component directories.

$3

| Setting          | Required | Type           | Description                                                                                                                                                                                       | Example                               |
| -------------------- | ------------ | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
| skipPropsWithName    | false        | string[] or string | This option is passed along to

react-docgen-typescript

's parser. It globally ignores props with the specified name(s).                                                                              |

"classname" or ["classname", "color"]

 |
| skipPropsWithoutDoc  | false        | boolean            | This option is passed along to

react-docgen-typescript

's parser. It globally ignores props without documentation.                                                                                   |

true

                                    |
| shouldExtractLiteralValuesFromEnum  | false        | boolean            | This option is passed along to

react-docgen-typescript

's parser. It convert string enums and unions to docgen enum format. Possible values are still accessible.                                                                                   |

true

                                    |
| shouldExtractValuesFromUnion  | false        | boolean            | This option is passed along to

react-docgen-typescript

's parser. It convert multiple types to docgen enum format. Possible values are still accessible.                                                                                   |

true

                                    |
| docgenCollectionName | false        | string             | Enables collecting docgen data into a global object. This is used to integrate with tools like Storybook.                                                                                             |

"STORYBOOK_REACT_CLASSES"

               |
| include              | false        | string             | A regular expression of files to pass along to

react-docgen-typescript's parser. Defaults to \.tsx$. | "components.*\\.tsx$"

                   |
| exclude              | false        | string             | A regular expression to filter the results from include. For instance, you can add a regular expression to prevent files ending in

.stories.tsx from being processed in your component directories. | "stories\\.tsx$"` |