Source Loader

Storybook source-loader is a webpack loader that annotates Storybook story files with their source code. It powers the storysource and docs addons.

Options

Options

The loader can be customized with the following options:

parser

The parser that will be parsing your code to AST (based on prettier)

Allowed values:

javascript - default
typescript
flow

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?$/,
    use: [
      {
        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:

{
  printWidth: 100,
  tabWidth: 2,
  bracketSpacing: true,
  trailingComma: 'es5',
  singleQuote: true,
}

Usage:

module.exports = function ({ config }) {
  config.module.rules.push({
    test: /\.stories\.jsx?$/,
    use: [
      {
        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:

[/^eslint-.*/, /^global.*/];

Usage:

module.exports = function ({ config }) {
  config.module.rules.push({
    test: /\.stories\.jsx?$/,
    use: [
      {
        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:

module.exports = function ({ config }) {
  config.module.rules.push({
    test: /\.stories\.jsx?$/,
    use: [
      {
        loader: require.resolve('@storybook/source-loader'),
        options: { injectDecorator: false },
      },
    ],
    enforce: 'pre',
  });

  return config;
};

Current Tags

7.0.27 ... latest (2 years ago)
7.1.0-rc.1 ... next (2 years ago)
6.5.17-alpha.0 ... prerelease (2 years ago)

33 Versions

7.1.0-rc.1 ... 2 years ago
7.0.27 ... 2 years ago
6.5.17-alpha.0 ... 2 years ago
7.1.0-beta.0 ... 2 years ago
7.0.26 ... 2 years ago
7.1.0-alpha.29 ... 2 years ago
6.5.16 ... 3 years ago
6.5.5-alpha.3 ... 3 years ago
6.5.0-rc.1 ... 3 years ago
6.5.5 ... 3 years ago
6.5.0-beta.8 ... 3 years ago
6.4.22 ... 3 years ago
6.5.0-alpha.38 ... 4 years ago
6.4.18 ... 4 years ago
6.5.0-alpha.23 ... 4 years ago
6.4.14 ... 4 years ago
6.5.0-alpha.18 ... 4 years ago
6.4.13 ... 4 years ago
6.4.12 ... 4 years ago
6.4.0-beta.0 ... 4 years ago
6.4.0-alpha.34 ... 4 years ago
6.3.8 ... 4 years ago
6.4.0-alpha.30 ... 4 years ago
6.3.7 ... 4 years ago
6.2.0-alpha.10 ... 5 years ago
6.0.28-alpha.3 ... 5 years ago
6.1.11 ... 5 years ago
5.3.21 ... 5 years ago
6.1.0-alpha.9 ... 5 years ago
6.1.0-alpha.3 ... 5 years ago
6.0.21 ... 5 years ago
6.0.0-beta.27 ... 5 years ago
5.3.19 ... 5 years ago