webpack-react-docgen-typescript

A webpack loader with cache for react/typescript components for storybook

Uses react-docgen-typescript for typescript prop parsing

Installation

npm i -D webpack-react-docgen-typescript

Usage

1. Add Storybook preset to .storybook/main.js

module.exports = {
  presets: ['webpack-react-docgen-typescript/preset', ...]
...
}  

or with options:

  presets: [
  {
    name: require.resolve('webpack-react-docgen-typescript/preset'),
    options: {
      fileNameResolver: ({ resourcePath, cacheFolder }) => path.join(cacheFolder, resourcePath.replace(/[^a-z0-9]/gi, '_')),
    },
  },  

2. Manually configure webpack.config.js:

  module: {
      rules: [
        {
          test: /\.(ts|tsx)$/,
          loader: require.resolve('babel-loader'),
          options: {
            presets: [['react-app', { flow: false, typescript: true }]],
          }
        },
        {
          test: /\.(ts|tsx)$/,
          exclude: /\.(story|stories).(ts|tsx)$/,
          loader: require.resolve("webpack-react-docgen-typescript"),
          options: {
            propFilter: { 
              skipPropsWithoutDoc: true,
              skipPropsWithName: ['prop4']
            }
          }
        }
      ],
    }
  });

Options

• forceRegenerate?: boolean; If true, the cahce files will be regenerated forcefully.

• fileNameResolver?: (object) => string; custom function to generate file names for the parsed typescript files. By default those files are created in your node_modules/.cache/webpack-react-docgen-typescript folder

The remaining options are parserOptions from react-docgen-typescript

ParserOptions {
  propFilter?: StaticPropFilter | PropFilter;
  componentNameResolver?: ComponentNameResolver;
  shouldExtractLiteralValuesFromEnum?: boolean;
  savePropValueAsString?: boolean;
}

StaticPropFilter {
  skipPropsWithName?: string[] | string;
  skipPropsWithoutDoc?: boolean;
}

PropFilter = (props: PropItem, component: Component) => boolean;

ComponentNameResolver = (
  exp: ts.Symbol,
  source: ts.SourceFile
) => string | undefined | null | false;