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 storybook-addon-rslib -D

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