storybook-dep-webpack-plugin

A webpack plugin to inject storybook dependencies

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
storybook-dep-webpack-plugin
1.0.73 years ago5 years agoMinified + gzip package size for storybook-dep-webpack-plugin in KB

Readme

storybook-dep-webpack-plugin
A webpack plugin to collect dependencies data.
Works in conjunction with storybook-addon-deps
Dependencies plugin

Live demo

grommet-controls

Installation

npm i -D storybook-dep-webpack-plugin

Usage

You can register the plugin in two different ways

  1. New way - inside your storybook main.js webpack settings you will register the plugin:

const DependenciesPlugin = require('storybook-dep-webpack-plugin');

module.exports = {
...
  webpack: async (config, { configType }) => ({
    ...config,
    plugins: [
      ...config.plugins,
      new DependenciesPlugin()
    ]
  }),
...
};

  1. Older way - in your storybook webpack.config.js file, add and configure the plugin:

const DependenciesPlugin = require('storybook-dep-webpack-plugin');

module.exports = ({ config, mode }) => {
  ...
  config.plugins.push(new DependenciesPlugin());
  ...
  return config;
};

Options

filter - a RegExp or function to select the stories.
example:
config.plugins.push(new DependenciesPlugin({
  filter: (resource) => {
    return /\.(stories|story)\.[tj]sx?$/.test(resource) && resource.indexOf("Avatar") > -1;
  }
}));

exclude - a RegExp for the modules to exclude.
example:
config.plugins.push(new DependenciesPlugin({
  filter: /^@storybook|@babel/,
}));

maxLevels - How many levels deep to follow the dependencies.
example:
config.plugins.push(new DependenciesPlugin({
  maxLevels: 10,
}));

pickProperties - An array of the props to pick from the module webpack data.
example:
config.plugins.push(new DependenciesPlugin({
  pickProperties: ['id', 'name', 'request'],
}));

pickModuleProperties - An array of the props to pick from the module.module webpack data.
example:
config.plugins.push(new DependenciesPlugin({
  pickModuleProperties: [],
}));

Install and configure storybook-addon-deps

storybook-addon-deps