DOCSEARCHbyAlgolia
Submit Docs

Storybook Rsbuild

repository·main·Indexed 41 days ago

https://github.com/rstackjs/storybook-rsbuild

A high-performance builder for Storybook that leverages Rsbuild and Rspack to provide fast build and Hot Module Replacement (HMR) performance across various web frameworks. It includes specialized support for React Native Web via storybook-react-native-web-rsbuild and rsbuild-plugin-react-native-web, as well as an addon for Modern.js projects.

Tokens
47.7K
Snippets
159
Records
230
Agent score
51%

What's inside Storybook Rsbuild

  1. Overview of Storybook Rsbuild

    main
    Storybook Rsbuild allows you to build your Storybook instances using Rsbuild, which leverages Rspack for high-performance builds and Hot Module Replacement (HMR). It is designed to be fully compatible with the existing Storybook ecosystem while providing significantly faster development cycles.

  2. Understand the project package structure

    main

    The repository is organized into several functional areas:

    • packages/builder-rsbuild: The core Rsbuild builder package.
    • packages/framework-*: Renderer packages (e.g., html, react, react-native-web, vue3, web-components) containing runtime logic in src/.
    • packages/addon-*: Storybook addons (e.g., modernjs, rslib, rstack).
    • packages/rsbuild-plugin-react-native-web: A standalone Rsbuild plugin.
    • sandboxes/: Runnable Storybook applications used for regression testing.
    • tests/: A root-level cross-package integration test project.
    • e2e/: Playwright end-to-end tests.
    • website/: The public documentation site (built with Rspress).

  4. Understand Modern.js integration limitations in Storybook

    main

    Because storybook-addon-modernjs works as an addon rather than a full Storybook framework, it has specific limitations due to how Modern.js transforms configuration before passing it to Rsbuild.

    Supported

    • Modern.js Configuration files
    • Modern.js plugins that modify configuration
    • Rsbuild plugins

    Unsupported

    • Webpack: Only Rspack is supported.
    • SSR: Server-Side Rendering configuration will not work in Storybook.
    • Runtime capabilities: Features like <Link> navigation are unavailable.
    • Modern.js Plugin Hooks: Plugins will only successfully call the config and resolveConfig hooks; other lifecycle hooks may not function as expected.

  6. Implement Module Federation in Storybook Rsbuild

    main

    Storybook Rsbuild supports Module Federation out of the box. You can implement two primary patterns:

    1. Host Application: Use the Modern.js Module Federation pattern to create a host application that loads federated modules from a remote, all running within Storybook.
    2. Federated Component Library: Use the Rslib Module Federation pattern to develop a federated component library using Rslib and Storybook.

  10. Understand dependency bundling in packages/*

    main

    In this monorepo, dependency classification in packages/* determines whether a package is bundled or externalized:

    • Bundled: devDependencies are always bundled.
    • Externalized: dependencies, optionalDependencies, and peerDependencies are externalized via createRslibConfig (which enables output.autoExternal).
    • Vendoring: Some packages (e.g., slash, pretty-hrtime in storybook-builder-rsbuild) are intentionally placed in devDependencies so they are vendored into the bundle rather than being externalized.

    Warning: Do not reclassify dependencies from devDependencies to dependencies without verifying the factory's external policy, as this changes the published output.