$ npm install @storybook/react-docgen-typescript-plugin
A webpack plugin to inject react typescript docgen information
npm install --save-dev react-docgen-typescript-plugin
# or
yarn add -D react-docgen-typescript-plugin
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 } }),
],
};
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'] |
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 docsDEBUG=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.
Thanks goes to these wonderful people (emoji key):
Andrew Lisowski π» π¨ π π€ π§ π β οΈ |
Michael Shilman π» |
Kyle Herock π» |
Juho VepsΓ€lΓ€inen π β οΈ π» π |
Egor Pogadaev β οΈ π» |
Anton Savoskin π» |
Trevor Burnham β οΈ π» |
This project follows the all-contributors specification. Contributions of any kind welcome!
© 2010 - cnpmjs.org x YWFE | Home | YWFE