The repository contains the Storybook Rsbuild builder and framework integrations for UI frameworks.
| package | description |
|---|---|
| storybook-builder-rsbuild | Rsbuild powered builder for Storybook |
| storybook-react-rsbuild | React integration for Storybook with Rsbuild builder |
| storybook-vue3-rsbuild | Vue3 integration for Storybook with Rsbuild builder |
Note
Requirements: @rsbuild/core >= 0.6.15 and storybook >= 8.0 (checkout Storybook's release note for migration)
In Storybook v8, you don't need to manually install storybook-builder-rsbuild, it has been depended by the framework, such as storybook-react-rsbuild and storybook-vue3-rsbuild.
-
Install React framework integration
pnpm i storybook-react-rsbuild -D
-
Change
.storybook/main.jsimport { StorybookConfig } from 'storybook-react-rsbuild' const config: StorybookConfig = { framework: 'storybook-react-rsbuild', rsbuildFinal: (config) => { // Customize the final Rsbuild config here return config; }, }; export default config;
You're all set now. You could also checkout the example in sandboxes/react-rsbuild.
-
Install Vue3 framework integration
pnpm i storybook-vue3-rsbuild -D
-
Change
.storybook/main.jsimport { StorybookConfig } from 'storybook-vue3-rsbuild' const config: StorybookConfig = { framework: 'storybook-vue3-rsbuild', rsbuildFinal: (config) => { // Customize the final Rsbuild config here return config; }, }; export default config;
You're all set now. You could also checkout the example in sandboxes/vue3-rsbuild.
The builder will read your rsbuild.config.js file, though it may change some of the options in order to work correctly.
It looks for the Rsbuild config in the CWD. If your config is located elsewhere, specify the path using the rsbuildConfigPath builder option:
// .storybook/main.mjs
const config = {
framework: {
name: 'storybook-react-rsbuild',
options: {
builder: {
rsbuildConfigPath: '.storybook/customRsbuildConfig.js',
},
},
},
}
export default configYou can also override the merged Rsbuild config:
// use `mergeRsbuildConfig` to recursively merge Rsbuild options
import { mergeRsbuildConfig } from '@rsbuild/core'
const config = {
async rsbuildFinal(config, { configType }) {
// Be sure to return the customized config
return mergeRsbuildConfig(config, {
// Customize the Rsbuild config for Storybook
source: {
alias: { foo: 'bar' },
},
})
},
}
export default configThe rsbuildFinal function will give you config which is the combination of your project's Rsbuild config and the builder's own Rsbuild config.
You can tweak this as you want, for example to set up aliases, add new plugins etc.
The configType variable will be either "DEVELOPMENT" or "PRODUCTION".
The function should return the updated Rsbuild configuration.
Because Rspack temporarily does not support the webpackInclude magic comment, non-story files may be bundled, which could lead to build failures. These files can be ignored using rspack.IgnorePlugin (see exmaple #19).
// .storybook/main.js
import path from 'path'
import { mergeRsbuildConfig } from '@rsbuild/core'
export default {
framework: 'storybook-react-rsbuild',
async rsbuildFinal(config) {
return mergeRsbuildConfig(config, {
tools: {
rspack: (config, { addRules, appendPlugins, rspack, mergeConfig }) => {
return mergeConfig(config, {
plugins: [
new rspack.IgnorePlugin({
checkResource: (resource, context) => {
// for example, ignore all markdown files
const absPathHasExt = path.extname(resource)
if (absPathHasExt === '.md') {
return true
}
return false
},
}),
],
})
},
},
})
},
}- Support TS type check (fork-ts-checker-webpack-plugin)
- Support more frameworks (Preact / Svelte / vanilla html / Lit)
- Support
webpackIncludemagic comment 🌟 - Support persistent cache
- Support lazy compilation
- Support virtual modules
- Support
module.unknownContextCritical - Support
compilation.dependencyTemplates.setfor react-docgen-typescript 🌟
Some code is copied or modified from storybookjs/storybook.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent