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").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 logs
• DEBUG=docgen:include - Included modules
• DEBUG=docgen:exclude - Excluded modules
• DEBUG=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!