react-docgen-typescript-plugin
A webpack plugin to inject react typescript docgen information
## Install
```sh
npm install --save-dev react-docgen-typescript-plugin
# or
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.
```ts
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](https://github.com/styleguidist/react-docgen-typescript#parseroptions) 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 logs
- `DEBUG=docgen:include` - Included modules
- `DEBUG=docgen:exclude` - Excluded modules
- `DEBUG=docgen:docs` - Generated docs
```bash
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](https://github.com/SenseNet/sn-client/) - Inspired by this custom webpack plugin
- [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader/) - Webpack loader to generate docgen information from Typescript React components.
## Contributors β¨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
