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.