@storybook/source-loader

What is @storybook/source-loader?

The @storybook/source-loader package is a loader for webpack that allows you to load the source code of a story into Storybook. This enables you to display the source code in a live code editor or snippet for documentation purposes, which can be helpful for developers to understand how to use a component. It is part of the Storybook ecosystem, which is a tool for developing UI components in isolation for React, Vue, Angular, and more.

What are @storybook/source-loader's main functionalities?

Load story source code

This webpack configuration snippet shows how to include the @storybook/source-loader as a pre-loader for files that match the `.stories.js` or `.stories.jsx` pattern. This allows Storybook to display the source code of these stories.

module.exports = {
  module: {
    rules: [
      {
        test: /\.stories\.jsx?$/,
        loaders: [require.resolve('@storybook/source-loader')],
        enforce: 'pre',
      },
    ],
  },
};

Other packages similar to @storybook/source-loader

raw-loader

The raw-loader package is similar to @storybook/source-loader in that it allows you to import files as a string. However, it is not specific to Storybook and does not have the capability to integrate with Storybook's UI to display source code alongside component stories.

highlight.js

While not a webpack loader, highlight.js is a syntax highlighter that can be used to display source code in a formatted way on web pages. It is similar to @storybook/source-loader in that it helps with displaying readable source code, but it does not have the Storybook integration for loading story sources automatically.

storybook-addon-code

The storybook-addon-code package is an addon for Storybook that allows you to show code samples in your stories. It is similar to @storybook/source-loader in its purpose of displaying source code for documentation, but it works as an addon that you can configure within Storybook rather than a webpack loader.

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
  • parser
  • prettierConfig
  • uglyCommentsRegex
  • injectDecorator

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

Changelog

8.3.6

• CLI: Install Svelte CSF v5 in Svelte5 projects - #29323, thanks @shilman!
• Svelte: Add v5 stories to CLI templates - #29382, thanks @JReinhold!