@esmx/rspack/src/rspack/chain-config.ts

A high-performance Rspack integration for Esmx microfrontend framework, providing Module Linking and SSR capabilities.

import type { Esmx } from '@esmx/core';
import {
    type ModuleLinkPluginOptions,
    moduleLinkPlugin
} from '@esmx/rspack-module-link-plugin';
import { rspack } from '@rspack/core';
import type { RspackOptions } from '@rspack/core';
import RspackChain from 'rspack-chain';
import nodeExternals from 'webpack-node-externals';
import type { RspackAppOptions } from './app';
import type { BuildTarget } from './build-target';

export function createChainConfig(
    esmx: Esmx,
    buildTarget: BuildTarget,
    options: RspackAppOptions
): RspackChain {
    const isHot = buildTarget === 'client' && !esmx.isProd;
    const isClient = buildTarget === 'client';
    const isServer = buildTarget === 'server';
    const isNode = buildTarget === 'node';

    const config = new RspackChain();

    config.context(esmx.root);
    config.mode(esmx.isProd ? 'production' : 'development');
    config.target(isClient ? 'web' : 'node24');
    config.cache(!esmx.isProd);

    config.output
        .clean(esmx.isProd)
        .filename(
            !isNode && esmx.isProd
                ? '[name].[contenthash:8].final.mjs'
                : '[name].mjs'
        )
        .chunkFilename(
            esmx.isProd
                ? 'chunks/[name].[contenthash:8].final.mjs'
                : 'chunks/[name].mjs'
        )
        .publicPath(
            isClient ? 'auto' : `${esmx.basePathPlaceholder}${esmx.basePath}`
        );

    config.output.set(
        'cssFilename',
        esmx.isProd ? '[name].[contenthash:8].final.css' : '[name].css'
    );
    config.output.set(
        'cssChunkFilename',
        esmx.isProd
            ? 'chunks/[name].[contenthash:8].final.css'
            : 'chunks/[name].css'
    );
    config.output.path(esmx.resolvePath('dist', buildTarget));

    config.plugin('progress').use(rspack.ProgressPlugin, [
        {
            prefix: buildTarget
        }
    ]);

    config
        .plugin('module-link')
        .use(moduleLinkPlugin, [createModuleLinkConfig(esmx, buildTarget)]);

    if (isHot) {
        config.plugin('hmr').use(rspack.HotModuleReplacementPlugin);
    }

    config.module.parser.set('javascript', {
        url: isClient ? true : 'relative'
    });

    config.module.generator.set('asset', {
        emit: isClient
    });

    config.module.generator.set('asset/resource', {
        emit: isClient
    });

    config.resolve.alias.set(esmx.name, esmx.root);

    config.optimization
        .minimize(options.minimize ?? esmx.isProd)
        .emitOnErrors(true);

    config.externalsPresets({
        web: isClient,
        node: isServer || isNode
    });
    config.externalsType('module-import');

    if (isNode) {
        config.externals([
            // @ts-ignore
            nodeExternals({
                // @ts-ignore
                importType: 'module-import'
            })
        ]);
    }
    config.experiments({
        nativeWatcher: true
    });

    return config;
}

function createModuleLinkConfig(
    esmx: Esmx,
    buildTarget: BuildTarget
): ModuleLinkPluginOptions {
    const isClient = buildTarget === 'client';
    const isServer = buildTarget === 'server';
    const isNode = buildTarget === 'node';

    if (isNode) {
        return {
            name: esmx.name,
            exports: {
                'src/entry.node': {
                    pkg: false,
                    file: './src/entry.node'
                }
            }
        };
    }

    const preEntries: string[] = [];
    if (isClient && !esmx.isProd) {
        preEntries.push(
            `${import.meta.resolve('webpack-hot-middleware/client.js')}?path=/${esmx.name}/hot-middleware`
        );
    }

    return {
        ...esmx.moduleConfig.environments[buildTarget],
        name: esmx.name,
        injectChunkName: isServer,
        deps: Object.keys(esmx.moduleConfig.links),
        preEntries
    };
}

export function createRspackConfig(
    esmx: Esmx,
    buildTarget: BuildTarget,
    options: RspackAppOptions
): RspackOptions {
    const chain = createChainConfig(esmx, buildTarget, options);
    options.chain?.({ esmx, options, buildTarget, chain });
    const config = chain.toConfig();
    options.config?.({ esmx, options, buildTarget, config });
    return config;
}