@module-federation/storybook-addon/dist/src/utils/with-module-federation-enhanced-rsbuild.js

Storybook addon to consume remote module federated apps/components

import fs from 'node:fs';
import path from 'node:path';
import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
import { TEMP_DIR } from '@module-federation/sdk';
import { correctImportPath } from './correctImportPath.js';
const tempDirPath = path.resolve(process.cwd(), `node_modules/${TEMP_DIR}`);
export const PLUGIN_NAME = 'module-federation-storybook-addon';
// add bootstrap for host project
const bootstrapPath = path.resolve(process.cwd(), `node_modules/${TEMP_DIR}/storybook-bootstrap.js`);
const generateBootstrap = (context, entryPath) => {
    return `import('${correctImportPath(context, entryPath)}');`;
};
const writeBootstrap = (context, entryPath) => {
    if (!fs.existsSync(tempDirPath)) {
        fs.mkdirSync(tempDirPath);
    }
    if (fs.existsSync(bootstrapPath)) {
        fs.unlinkSync(bootstrapPath);
    }
    fs.writeFileSync(bootstrapPath, generateBootstrap(context, entryPath));
};
export const withModuleFederation = (rsbuildConfig, options) => {
    rsbuildConfig.plugins ??= [];
    rsbuildConfig.source ??= {};
    rsbuildConfig.source.entry ??= {};
    const entry = rsbuildConfig.source.entry;
    const context = rsbuildConfig.root || process.cwd();
    for (const entryName in entry) {
        if (Array.isArray(entry[entryName])) {
            writeBootstrap(context, entry[entryName][0]);
            entry[entryName] = [bootstrapPath];
        }
    }
    const rsbuildPlugin = {
        name: 'module-federation-storybook-plugin',
        setup: function (api) {
            api.modifyRsbuildConfig((config, { mergeRsbuildConfig }) => {
                const mfConfig = {
                    dev: {
                        // remoteEntry already includes one hmr runtime, and an additional one is not necessary.
                        hmr: false,
                    },
                };
                return mergeRsbuildConfig(config, mfConfig);
            });
            api.modifyBundlerChain(async (chain) => {
                chain.plugin(PLUGIN_NAME).use(ModuleFederationPlugin, [
                    {
                        name: options.name || PLUGIN_NAME,
                        shared: {
                            react: {
                                singleton: true,
                            },
                            'react-dom': {
                                singleton: true,
                            },
                            ...options.shared,
                        },
                        remotes: {
                            ...options.remotes,
                        },
                        shareStrategy: options.shareStrategy,
                    },
                ]);
            });
        },
    };
    rsbuildConfig.plugins.push(rsbuildPlugin);
    return rsbuildConfig;
};
export default withModuleFederation;
//# sourceMappingURL=with-module-federation-enhanced-rsbuild.js.map