Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/atanasster/storybook-dep-webpack-plugin
A webpack plugin to collect dependencies data.
https://github.com/atanasster/storybook-dep-webpack-plugin
dependencies storybook webpack
Last synced: 3 months ago
JSON representation
A webpack plugin to collect dependencies data.
- Host: GitHub
- URL: https://github.com/atanasster/storybook-dep-webpack-plugin
- Owner: atanasster
- License: mit
- Created: 2019-09-14T06:58:27.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T22:21:52.000Z (about 2 years ago)
- Last Synced: 2024-10-16T07:04:51.182Z (4 months ago)
- Topics: dependencies, storybook, webpack
- Language: TypeScript
- Homepage: https://atanasster.github.io/storybook-addon-deps/?path=/deps/design-system-avatarlist--short
- Size: 3.07 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# storybook-dep-webpack-plugin
A webpack plugin to collect dependencies data.
Works in conjunction with [storybook-addon-deps](https://github.com/atanasster/storybook-addon-deps/)
## Live demo
[grommet-controls](https://atanasster.github.io/grommet-controls/?path=/docs/controls-controls-avatar--main)
## Installation
```sh
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:
```js
const DependenciesPlugin = require('storybook-dep-webpack-plugin');
module.exports = {
...
webpack: async (config, { configType }) => ({
...config,
plugins: [
...config.plugins,
new DependenciesPlugin()
]
}),
...
};
```
### 2. Older way - in your storybook `webpack.config.js` file, add and configure the plugin:
```js
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](https://github.com/atanasster/storybook-addon-deps/blob/master/README.md)