$ npm install @storybook/addon-storysource
This addon is used to show stories source in the addon panel.
First, install the addon
yarn add @storybook/addon-storysource --dev
Add this line to your addons.js
file
import '@storybook/addon-storysource/register';
Use this hook to a custom webpack.config. This will generate a decorator call in every story:
module.exports = function ({ config }) {
config.module.rules.push({
test: /\.stories\.jsx?$/,
loaders: [require.resolve('@storybook/addon-storysource/loader')],
enforce: 'pre',
});
return config;
};
The loader can be customized with the following options:
The parser that will be parsing your code to AST (based on prettier)
Allowed values:
javascript
- defaulttypescript
flow
Usage:
module.exports = function (baseConfig, env, defaultConfig) {
defaultConfig.module.rules.push({
test: /\.stories\.jsx?$/,
loaders: [
{
loader: require.resolve('@storybook/addon-storysource/loader'),
options: { parser: 'typescript' }
}
],
enforce: 'pre',
});
return defaultConfig;
};
The prettier configuration that will be used to format the story source in the addon panel.
Defaults:
{
printWidth: 120,
tabWidth: 2,
bracketSpacing: true,
trailingComma: 'es5',
singleQuote: true,
}
Usage:
module.exports = function (baseConfig, env, defaultConfig) {
defaultConfig.module.rules.push({
test: /\.stories\.jsx?$/,
loaders: [
{
loader: require.resolve('@storybook/addon-storysource/loader'),
options: {
prettierConfig: {
printWidth: 80,
singleQuote: false,
}
}
}
],
enforce: 'pre',
});
return defaultConfig;
};
The array of regex that is used to remove "ugly" comments.
Defaults:
[/^eslint-.*/, /^global.*/]
Usage:
module.exports = function (baseConfig, env, defaultConfig) {
defaultConfig.module.rules.push({
test: /\.stories\.jsx?$/,
loaders: [
{
loader: require.resolve('@storybook/addon-storysource/loader'),
options: {
uglyCommentsRegex: [
/^eslint-.*/,
/^global.*/,
]
}
}
],
enforce: 'pre',
});
return defaultConfig;
};
Tell storysource whether you need inject decorator.If false, you need to add the decorator by yourself;
Defaults: true
Usage:
module.exports = function (baseConfig, env, defaultConfig) {
defaultConfig.module.rules.push({
test: /\.stories\.jsx?$/,
loaders: [
{
loader: require.resolve('@storybook/addon-storysource/loader'),
options: { injectDecorator: false }
}
],
enforce: 'pre',
});
return defaultConfig;
};
© 2010 - cnpmjs.org x YWFE | Home | YWFE