KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agents #developer-tools #typescript #codex #cli #claude-code #mcp #rust #deepseek-harness #ai-agent

react-docgen-typescript-plugin

★ 69 Open GitHub ↗

A webpack plugin to inject react typescript docgen information

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<div align="center">
 <img height="200"
 src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png">
 <h1>react-docgen-typescript-plugin</h1>
 A webpack plugin to inject react typescript docgen information
</div>

## 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)):

<table>
 <tr>
 <td align="center"><a href="http://hipstersmoothie.com/"><img src="https://avatars3.githubusercontent.com/u/1192452?v=4?s=100" width="100px;" alt=""/> Andrew Lisowski</a> <a href="https://github.com/hipstersmoothie/react-docgen-typescript-plugin/commits?author=hipstersmoothie" title="Code">💻</a> <a href="#design-hipstersmoothie" title="Design">🎨</a> <a href="https://github.com/hipstersmoothie/react-docgen-typescript-plugin/commits?author=hipstersmoothie" title="Documentation">📖</a> <a href="#ideas-hipstersmoothie" title="Ideas, Planning, & Feedback">🤔</a> <a href="#maintenance-hipstersmoothie" title="Maintenance">🚧</a> <a href="#infra-hipstersmoothie" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/hipstersmoothie/react-docgen-typescript-plugin/commits?author=hipstersmoothie" title="Tests">⚠️</a></td>
 <td align="center"><a href="http://shilman.net/"><img src="https://avatars2.githubusercontent.com/u/488689?v=4?s=100" width="100px;" alt=""/> Michael Shilman</a> <a href="https://github.com/hipstersmoothie/react-docgen-typescript-plugin/commits?author=shilman" title="Code">💻</a></td>
 <td align="center"><a href="https://github.com/kherock"><img src="https://avatars.githubusercontent.com/u/4993980?v=4?s=100" width="100px;" alt=""/> Kyle Herock</a> <a href="https://github.com/hipstersmoothie/react-docgen-typescript-plugin/commits?author=kherock" title="Code">💻</a></td>
 <td align="center"><a href="https://survivejs.com/"><img src="https://avatars.githubusercontent.com/u/166921?v=4?s=100" width="100px;" alt=""/> Juho Vepsäläinen</a> <a href="#infra-bebraw" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/hipstersmoothie/react-docgen-typescript-plugin/commits?author=bebraw" title="Tests">⚠️</a> <a href="https://github.com/hipstersmoothie/react-docgen-typescript-plugin/commits?author=bebraw" title="Code">💻</a> <a href="https://github.com/hipstersmoothie/react-docgen-typescript-plugin/commits?author=bebraw" title="Documentation">📖</a></td>
 <td align="center"><a href="https://github.com/zhzz"><img src="https://avatars.githubusercontent.com/u/4607770?v=4?s=100" width="100px;" alt=""/> Egor Pogadaev</a> <a href="https://github.com/hipstersmoothie/react-docgen-typescript-plugin/commits?author=zhzz" title="Tests">⚠️</a> <a href="https://github.com/hipstersmoothie/react-docgen-typescript-plugin/commits?author=zhzz" title="Code">💻</a></td>
 <td align="center"><a href="https://github.com/sairus2k"><img src="https://avatars.githubusercontent.com/u/1106887?v=4?s=100" width="100px;" alt=""/> Anton Savoskin</a> <a href="https://github.com/hipstersmoothie/react-docgen-typescript-plugin/commits?author=sairus2k" title="Code">💻</a></td>
 <td align="center"><a href="http://trevorburnham.com/"><img src="https://avatars.githubusercontent.com/u/224895?v=4?s=100" width="100px;" alt=""/> Trevor Burnham</a> <a href="https://github.com/hipstersmoothie/react-docgen-typescript-plugin/commits?author=TrevorBurnham" title="Tests">⚠️</a> <a href="https://github.com/hipstersmoothie/react-docgen-typescript-plugin/commits?author=TrevorBurnham" title="Code">💻</a></td>
 </tr>
 <tr>
 <td align="center"><a href="https://github.com/meriouma"><img src="https://avatars.githubusercontent.com/u/1082552?v=4?s=100" width="100px;" alt=""/> Maxime Meriouma-Caron</a> <a href="#infra-meriouma" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/hipstersmoothie/react-docgen-typescript-plugin/commits?author=meriouma" title="Tests">⚠️</a> <a href="https://github.com/hipstersmoothie/react-docgen-typescript-plugin/commits?author=meriouma" title="Code">💻</a></td>
 <td align="center"><a href="https://github.com/askoufis"><img src="https://avatars.githubusercontent.com/u/5663042?v=4?s=100" width="100px;" alt=""/> Adam Skoufis</a> <a href="https://github.com/hipstersmoothie/react-docgen-typescript-plugin/commits?author=askoufis" title="Code">💻</a></td>
 <td align="center"><a href="https://sorenstudios.com/"><img src="https://avatars.githubusercontent.com/u/295939?v=4?s=100" width="100px;" alt=""/> Nicholas Narsing</a> <a href="https://github.com/hipstersmoothie/react-docgen-typescript-plugin/commits?author=soren121" title="Documentation">📖</a> <a href="https://github.com/hipstersmoothie/react-docgen-typescript-plugin/commits?author=soren121" title="Tests">⚠️</a> <a href="https://github.com/hipstersmoothie/react-docgen-typescript-plugin/commits?author=soren121" title="Code">💻</a></td>
 </tr>
</table>

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

react-docgen-typescript-plugin

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README