Package Exports

@storybook/source-loader
@storybook/source-loader/extract-source

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@storybook/source-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

{
  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;
};

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

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;
};