react-docgen-typescript-plugin

A webpack plugin to inject react typescript docgen information

Install

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.

const ts = require('typescript');
const ReactDocgenTypescriptPlugin = require("react-docgen-typescript-plugin");

module.exports = {
  plugins: [
    new ReactDocgenTypescriptPlugin(),
    // or with a tsconfig
    new ReactDocgenTypescriptPlugin({ tsconfigPath: "./tsconfig.json" }),
    // or with options
    new ReactDocgenTypescriptPlugin({ 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 logs
DEBUG=docgen:include - Included modules
DEBUG=docgen:exclude - Excluded modules

DEBUG=docgen:* npm run storybook

Prior Art

sn-client - Inspired by this custom webpack plugin
react-docgen-typescript-loader - Webpack loader to generate docgen information from Typescript React components.

Current Tags

0.5.3-canary.13.57da91b.0 ... canary (5 years ago)
0.7.0 ... latest (5 years ago)

7 Versions

0.7.0 ... 5 years ago
0.6.3 ... 5 years ago
0.6.0 ... 5 years ago
0.5.3-canary.13.57da91b.0 ... 5 years ago
0.5.2 ... 5 years ago
0.3.1-canary.e613c4c.0 ... 5 years ago
0.4.0 ... 5 years ago