@storybook/source-loader
TypeScript icon, indicating that this package has built-in type declarations

8.1.3 • Public • Published

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

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

Readme

Keywords

Package Sidebar

Install

npm i @storybook/source-loader

Weekly Downloads

1,585,528

Version

8.1.3

License

MIT

Unpacked Size

41.5 kB

Total Files

7

Last publish

Collaborators

  • domyen
  • kasperpeulen
  • valentinpalkovic
  • jreinhold
  • kylegach
  • ndelangen
  • shilman
  • tmeasday
  • ghengeveld
  • winkervsbecks
  • yannbf