Guide
Storybook
Guide
Storybook

Rslib

This addon will load a reuseable Rsbuild config from Rslib config file for storybook-builder-rsbuild, which will make Storybook use an coherent configuration with Rslib.

It also provides a way to development mf (Module Federation) format output.

You could check the example of a React component library with Rslib and Storybook.

Getting started

Installation

npm
yarn
pnpm
bun
npm install storybook-addon-rslib -D

Setup .storybook/main.ts

export default {
  addons: ['storybook-addon-rslib'],
}

or with config

export default {
  addons: [
    {
      name: 'storybook-addon-rslib',
      options: {
        // Check options section.
      },
    },
  ],
}

Module Federation

Rslib Module Federation Documentation

Options

export interface AddonOptions {
  rslib?: {
    /**
     * `cwd` passed to loadConfig of Rslib
     * @default undefined
     */
    cwd?: string
    /**
     *  `path` passed to loadConfig of Rslib
     * @default undefined
     */
    configPath?: string
    /**
     * The lib config index in `lib` field to use, will be merged with the other fields in the config.
     * Set to a number to use the lib config at that index.
     * Set to `false` to disable using the lib config.
     * @default 0
     */
    libIndex?: number | false
    /**
     * Modify the Rslib lib config before transforming it to Rsbuild config which will be merged
     * with Storybook. You can modify the configuration in the config parameters in place.
     * @experimental subject to change at any time
     * @default undefined
     */
    modifyLibConfig?: (config: LibConfig) => void
    /**
     * Modify the Rsbuild config transformed from lib config before merging with Storybook
     * config. You can modify the configuration in the config parameters in place.
     * @experimental subject to change at any time
     * @default undefined
     */
    modifyLibRsbuildConfig?: (config: RsbuildConfig) => void
  }
}
ON THIS PAGE