mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 22:51:18 +08:00
141 lines
2.7 KiB
Markdown
141 lines
2.7 KiB
Markdown
<h1>Source Loader</h1>
|
|
|
|
Storybook `source-loader` is a webpack loader that annotates Storybook story files with their source code. It powers the [storysource](https://github.com/storybookjs/storybook/tree/next/addons/storysource) and [docs](https://github.com/storybookjs/storybook/tree/next/addons/docs) addons.
|
|
|
|
- [Options](#options)
|
|
- [parser](#parser)
|
|
- [prettierConfig](#prettierconfig)
|
|
- [uglyCommentsRegex](#uglycommentsregex)
|
|
- [injectDecorator](#injectdecorator)
|
|
|
|
## Options
|
|
|
|
The loader can be customized with the following options:
|
|
|
|
### parser
|
|
|
|
The parser that will be parsing your code to AST (based on [prettier](https://github.com/prettier/prettier/tree/master/src/language-js))
|
|
|
|
Allowed values:
|
|
|
|
- `javascript` - default
|
|
- `typescript`
|
|
- `flow`
|
|
|
|
Be sure to update the regex test for the webpack rule if utilizing Typescript files.
|
|
|
|
Usage:
|
|
|
|
```js
|
|
module.exports = function ({ config }) {
|
|
config.module.rules.push({
|
|
test: /\.stories\.tsx?$/,
|
|
loaders: [
|
|
{
|
|
loader: require.resolve('@storybook/source-loader'),
|
|
options: { parser: 'typescript' },
|
|
},
|
|
],
|
|
enforce: 'pre',
|
|
});
|
|
|
|
return config;
|
|
};
|
|
```
|
|
|
|
### prettierConfig
|
|
|
|
The prettier configuration that will be used to format the story source in the addon panel.
|
|
|
|
Defaults:
|
|
|
|
```js
|
|
{
|
|
printWidth: 100,
|
|
tabWidth: 2,
|
|
bracketSpacing: true,
|
|
trailingComma: 'es5',
|
|
singleQuote: true,
|
|
}
|
|
```
|
|
|
|
Usage:
|
|
|
|
```js
|
|
module.exports = function ({ config }) {
|
|
config.module.rules.push({
|
|
test: /\.stories\.jsx?$/,
|
|
loaders: [
|
|
{
|
|
loader: require.resolve('@storybook/source-loader'),
|
|
options: {
|
|
prettierConfig: {
|
|
printWidth: 100,
|
|
singleQuote: false,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
enforce: 'pre',
|
|
});
|
|
|
|
return config;
|
|
};
|
|
```
|
|
|
|
### uglyCommentsRegex
|
|
|
|
The array of regex that is used to remove "ugly" comments.
|
|
|
|
Defaults:
|
|
|
|
```js
|
|
[/^eslint-.*/, /^global.*/];
|
|
```
|
|
|
|
Usage:
|
|
|
|
```js
|
|
module.exports = function ({ config }) {
|
|
config.module.rules.push({
|
|
test: /\.stories\.jsx?$/,
|
|
loaders: [
|
|
{
|
|
loader: require.resolve('@storybook/source-loader'),
|
|
options: {
|
|
uglyCommentsRegex: [/^eslint-.*/, /^global.*/],
|
|
},
|
|
},
|
|
],
|
|
enforce: 'pre',
|
|
});
|
|
|
|
return config;
|
|
};
|
|
```
|
|
|
|
### injectDecorator
|
|
|
|
Tell storysource whether you need inject decorator. If false, you need to add the decorator by yourself;
|
|
|
|
Defaults: true
|
|
|
|
Usage:
|
|
|
|
```js
|
|
module.exports = function ({ config }) {
|
|
config.module.rules.push({
|
|
test: /\.stories\.jsx?$/,
|
|
loaders: [
|
|
{
|
|
loader: require.resolve('@storybook/source-loader'),
|
|
options: { injectDecorator: false },
|
|
},
|
|
],
|
|
enforce: 'pre',
|
|
});
|
|
|
|
return config;
|
|
};
|
|
```
|