Provide Rspack Storybook builder?

[fi3ework]

Please use the reaction with 👍 to vote for support Rspack bulider with Storybook.

[Narretz]

This would be really great. For example, if you're migrating a project from webpack to rspack, you don't need rsbuild. But then you want to migrate storybook as well, and you suddenly need rsbuild, which comes with its own dependencies, config file and plugins. I don't think specific rspack frameworks are the way to go, but if storybook-rsbuild could support reading a rspack.config instead of an rsbuild.config, that would be great.

e: I realized that the rspack config of an app will always be somewhat incompatible with storybook. But rsbuild does make it easy to re-use the config you need. Here's for example my minimal vue3 + storybook + rsbuild via rspack config:

import { DefinePlugin } from '@rspack/core';
import { defineConfig } from '@rsbuild/core';
import rspackAppConfig from '../packages/client/rspack.config';
import { VueLoaderPlugin } from 'vue-loader';

export default defineConfig({
  tools: {
    rspack: (config, { mergeConfig }) => {
      const appConfig = rspackAppConfig({});

      return mergeConfig(
        config,
        {
          module: appConfig.module,
          resolve: appConfig.resolve,
          experiments: appConfig.experiments,
          plugins: [new VueLoaderPlugin()],
        },
        {
          resolve: {
            alias: {
             // for string component templates
              vue: 'vue/dist/vue.esm-bundler.js',
            },
          },
          plugins: [
            new DefinePlugin({
              __VUE_OPTIONS_API__: 'true',
              __VUE_PROD_DEVTOOLS__: 'false',
              __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
            }),
          ],
        }
      );
    },
  },
});

Maybe something like this could be added to the docs.

[fi3ework]

Maybe something like this could be added to the docs.

This is a way to use Rspack config with storybook-builder-rsbuild, but it's not verified in many scenes. Rsbuild has many built-in features, so that may cause an implicit difference. Providing Rspack builder is not hard IMO, we're considering to support in the future.

[Narretz]

You are right, my example doesn't actually work when building, only when watching. In build mode, experiments: css extracts the css into chunks, but storybook / rsbuild expects the original chunks for each vue component. Or something like that.

[szimek]

This would be awesome to have. We're trying to migrate a pretty big and old project from webpack to rspack. It all works and the performance is so much better (e.g. hmr time was reduced from ~8s to ~0.5s), but Storybook is unfortunately a blocker for us. Maybe we could keep using webpack just for Storybook for now and use rspack for the app.

[fi3ework]

I'll take a time to check out how to extract the webpack / Rspack configurations from webpack.config.js / rspack.config.js.

TBH, as per #88 (comment). It's possible to achieve of reuse of webpack config, the remaining questions are:

• We need to maintain the current implementation with Rsbuild, even we don't need to use with it, to make the architecture isomorphic. Or, add a layer to work with raw Rspack, and change the Rsbuild on top of it.
• We need to reset some configurations in Rsbuild and preserve the dev server part, as it will be overridden by Storybook anyway.