This addon is used to show the compiled code of stories in the addon panel.
First, install the addon
yarn add @biotope/storybook-addon-compiled-code --devYou can add configuration for this addon by using a preset or by using the addon config with webpack
Add the following to your .storybook/main.js exports:
module.exports = {
addons: ['@storybook/addon-compiled-code'],
};You can pass configurations into the addon-compiled-code loader in your .storybook/main.js file, e.g.:
module.exports = {
addons: [
{
name: '@storybook/addon-compiled-code',
options: {
rule: {
// test: [/\.stories\.jsx?$/], This is default
include: [path.resolve(__dirname, '../src')], // You can specify directories
},
loaderOptions: {
prettierConfig: { printWidth: 80, singleQuote: false },
},
},
},
],
};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- defaulttypescriptflow
Be sure to update the regex test for the webpack rule if utilizing Typescript files.
Usage:
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;
};The prettier configuration that will be used to format the story source in the addon panel.
Defaults:
{
printWidth: 100,
tabWidth: 2,
bracketSpacing: true,
trailingComma: 'es5',
singleQuote: true,
}Usage:
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;
};The array of regex that is used to remove "ugly" comments.
Defaults:
[/^eslint-.*/, /^global.*/];Usage:
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;
};Tell storysource whether you need inject decorator. If false, you need to add the decorator by yourself;
Defaults: true
Usage:
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;
};Compiled Code will automatically use the light or dark syntax theme based on your storybook theme. See Theming Storybook for more information.