react-docgen-typescript-plugin
A webpack plugin to inject react typescript docgen information
Install
npm install --save-dev react-docgen-typescript-plugin
yarn add -D react-docgen-typescript-plugin
Usage
NOTE: The TypeScript compiler options allowSyntheticDefaultImports
and esModuleInterop
will make
react-docgen-typescript-plugin
a lot harder! Turn them off for faster build times.
const ReactDocgenTypescriptPlugin = require("react-docgen-typescript-plugin");
module.exports = {
plugins: [
new ReactDocgenTypescriptPlugin(),
new ReactDocgenTypescriptPlugin({ tsconfigPath: "./tsconfig.dev.json" }),
new ReactDocgenTypescriptPlugin({ compilerOptions: { jsx: ts.JsxEmit.Preserve } }),
],
};
Options
This plugins support all parser options from react-docgen-typescript and all of the following options
Option | Type | Description | Default |
---|
tsconfigPath | string | Specify the location of the tsconfig.json to use. | null |
compilerOptions | object | Specify compiler options. Cannot be used with tsconfigPath | null |
docgenCollectionName | string or null | Specify the docgen collection name to use. All docgen information will be collected into this global object. Set to null to disable. | STORYBOOK_REACT_CLASSES |
setDisplayName | boolean | Set the components' display name. If you want to set display names yourself or are using another plugin to do this, you should disable this option. | true |
typePropName | string | Specify the name of the property for docgen info prop type. | type |
exclude | glob[] | Glob patterns to ignore and not generate docgen information for. (Great for ignoring large icon libraries) | [] |
include | glob[] | Glob patterns to generate docgen information for | ['/.tsx'] |
Debugging
If you want to see how this plugins is including and excluding modules set the DEBUG
environment variable.
DEBUG=docgen:*
- All logsDEBUG=docgen:include
- Included modulesDEBUG=docgen:exclude
- Excluded modules
DEBUG=docgen:* npm run storybook
Prior Art