@channel.io/react-docgen-typescript-plugin
v1.0.0
Published
A webpack plugin to inject react typescript docgen information.
Downloads
13
Readme
NOTE:
react-docgen-typescript-plugin
is forked from the original repository for customized usecase in Channel.io.
Install
npm install --save-dev react-docgen-typescript-plugin
# or
yarn add -D react-docgen-typescript-plugin
Usage
NOTE: The TypeScript compiler options
allowSyntheticDefaultImports
andesModuleInterop
will makereact-docgen-typescript-plugin
a lot harder! Turn them off for faster build times.
const ts = require('typescript');
const ReactDocgenTypescriptPlugin = require("react-docgen-typescript-plugin").default;
module.exports = {
plugins: [
// Will default to loading your root tsconfig.json
new ReactDocgenTypescriptPlugin(),
// or with a specific tsconfig
new ReactDocgenTypescriptPlugin({ tsconfigPath: "./tsconfig.dev.json" }),
// or with compiler options
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 modulesDEBUG=docgen:docs
- Generated docs
DEBUG=docgen:* npm run storybook
Another great way of debugging your generated docs is to use a
debugger
statement in your component source file. If you turn off source maps you will be able to see the code that this package generates.
Prior Art
- sn-client - Inspired by this custom webpack plugin
- react-docgen-typescript-loader - Webpack loader to generate docgen information from Typescript React components.
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!