close

    Rslib

    This addon loads a reusable Rsbuild config from your Rslib configuration file so storybook-builder-rsbuild mirrors the same setup used by your library build.

    It also lets you develop the mf (Module Federation) format inside Storybook.

    See the React component library example for a full reference implementation.

    Getting started

    Installation

    npm
    yarn
    pnpm
    bun
    deno
    npm install @rsbuild/core storybook-addon-rslib -D

    Install @rsbuild/core directly so the version that the addon and your framework package use is pinned in your own lockfile. Use this alongside the framework package from your project's framework guide (e.g. storybook-react-rsbuild).

    Setup .storybook/main.ts

    .storybook/main.ts
    export default {
  
    addons: string[]
    addons    : ['storybook-addon-rslib'],    
}

    Or configure the addon manually:

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

    Module Federation

    Review the Rslib Module Federation documentation to prepare the mf output before loading it in Storybook.

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