@esmx/rspack 3.0.0-rc.44 → 3.0.0-rc.46

package/src/{app.ts → rspack/app.ts}

@@ -15,7 +15,7 @@ import { createVmImport } from '@esmx/import';
 import type { RspackOptions } from '@rspack/core';
 import hotMiddleware from 'webpack-hot-middleware';
 import type { BuildTarget } from './build-target';
-import { createRspackConfig } from './config';
+import { createRspackConfig } from './chain-config';
 import { pack } from './pack';
 import { createRsBuild } from './utils';
 
@@ -87,6 +87,42 @@ export interface RspackAppConfigContext {
     options: RspackAppOptions;
 }
 
+/**
+ * Rspack 链式配置上下文接口。
+ *
+ * 该接口提供了在 chain 钩子函数中可以访问的上下文信息，允许你：
+ * - 访问 Esmx 框架实例
+ * - 获取当前的构建目标（client/server/node）
+ * - 使用 rspack-chain 修改配置
+ * - 访问应用选项
+ */
+export interface RspackAppChainContext {
+    /**
+     * Esmx 框架实例。
+     * 可用于访问框架提供的 API 和工具函数。
+     */
+    esmx: Esmx;
+
+    /**
+     * 当前的构建目标。
+     * - 'client': 客户端构建，生成浏览器可执行的代码
+     * - 'server': 服务端构建，生成 SSR 渲染代码
+     * - 'node': Node.js 构建，生成服务器入口代码
+     */
+    buildTarget: BuildTarget;
+
+    /**
+     * rspack-chain 配置对象。
+     * 你可以在 chain 钩子中使用链式 API 修改配置。
+     */
+    chain: import('rspack-chain');
+
+    /**
+     * 创建应用时传入的选项对象。
+     */
+    options: RspackAppOptions;
+}
+
 /**
  * Rspack 应用配置选项接口。
  *
@@ -138,6 +174,16 @@ export interface RspackAppOptions {
      * @param context - 配置上下文，包含框架实例、构建目标和配置对象
      */
     config?: (context: RspackAppConfigContext) => void;
+
+    /**
+     * Rspack chain 配置钩子函数。
+     *
+     * 使用 rspack-chain 提供链式配置方式，可以更灵活地修改 Rspack 配置。
+     * 在 config 钩子之后调用，如果有 chain 钩子则优先使用链式配置。
+     *
+     * @param context - 配置上下文，包含框架实例、构建目标和 chain 配置对象
+     */
+    chain?: (context: RspackAppChainContext) => void;
 }
 
 /**
@@ -240,11 +286,8 @@ function generateBuildConfig(
     esmx: Esmx,
     options: RspackAppOptions,
     buildTarget: BuildTarget
-) {
-    const config = createRspackConfig(esmx, buildTarget, options);
-    options.config?.({ esmx, options, buildTarget, config });
-
-    return config;
+): RspackOptions {
+    return createRspackConfig(esmx, buildTarget, options);
 }
 
 function rewriteRender(esmx: Esmx) {

package/src/rspack/build-target.ts

@@ -0,0 +1,8 @@
+/**
+ * Build target environment type
+ * @description Defines the build target environment for the application, used to configure specific optimizations and features during the build process
+ * - node: Build code to run in Node.js environment
+ * - client: Build code to run in browser environment
+ * - server: Build code to run in server environment
+ */
+export type BuildTarget = 'node' | 'client' | 'server';

package/src/rspack/chain-config.ts

@@ -0,0 +1,193 @@
+import type { Esmx } from '@esmx/core';
+import { 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';
+import { HMR_DIR, HMR_JSONP } from './hmr-config';
+
+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
+                ? 'exports/[name].[contenthash:8].final.mjs'
+                : 'exports/[name].mjs'
+        )
+        .chunkFilename(
+            esmx.isProd
+                ? 'chunks/[name].[contenthash:8].final.mjs'
+                : 'chunks/[name].mjs'
+        )
+        .publicPath(
+            isClient ? 'auto' : `${esmx.basePathPlaceholder}${esmx.basePath}`
+        )
+        .uniqueName(esmx.varName)
+        .hotUpdateGlobal(HMR_JSONP)
+        .chunkLoadingGlobal(`${HMR_JSONP}_chunk`)
+        .hotUpdateChunkFilename(`${HMR_DIR}/[id].[fullhash].hot-update.mjs`)
+        .hotUpdateMainFilename(
+            `${HMR_DIR}/[runtime].[fullhash].hot-update.json`
+        );
+
+    config.output.set(
+        'cssFilename',
+        esmx.isProd
+            ? 'exports/[name].[contenthash:8].final.css'
+            : 'exports/[name].css'
+    );
+    config.output.set(
+        'cssChunkFilename',
+        esmx.isProd
+            ? 'chunks/[name].[contenthash:8].final.css'
+            : 'chunks/[name].css'
+    );
+
+    const outputPath = (() => {
+        switch (buildTarget) {
+            case 'client':
+                return esmx.resolvePath('dist/client');
+            case 'server':
+                return esmx.resolvePath('dist/server');
+            case 'node':
+                return esmx.resolvePath('dist/node');
+        }
+    })();
+    config.output.path(outputPath);
+
+    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', {
+        dynamicImportMode: 'lazy',
+        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'
+            })
+        ]);
+    }
+
+    // Temporary fix for development environment
+    // Related issue: https://github.com/esmnext/esmx/issues/109
+    // TODO: Remove when Rspack officially supports these features
+    if (!esmx.isProd) {
+        config.optimization.splitChunks(false).runtimeChunk(false);
+        config.module.parser.set('javascript', {
+            ...config.module.parser.get('javascript'),
+            dynamicImportMode: 'eager'
+        });
+    }
+
+    return config;
+}
+
+function createModuleLinkConfig(esmx: Esmx, buildTarget: BuildTarget) {
+    const isClient = buildTarget === 'client';
+    const isServer = buildTarget === 'server';
+    const isNode = buildTarget === 'node';
+
+    if (isNode) {
+        return {
+            name: esmx.name,
+            exports: {
+                'src/entry.node': {
+                    rewrite: false,
+                    file: './src/entry.node'
+                }
+            }
+        };
+    }
+
+    const exports: Record<string, { rewrite: boolean; file: string }> = {};
+    for (const [name, item] of Object.entries(esmx.moduleConfig.exports)) {
+        if (item.inputTarget[buildTarget]) {
+            exports[name] = {
+                rewrite: item.rewrite,
+                file: item.inputTarget[buildTarget]
+            };
+        }
+    }
+
+    const preEntries: string[] = [];
+    if (isClient && !esmx.isProd) {
+        preEntries.push(
+            `${import.meta.resolve('webpack-hot-middleware/client.js')}?path=/${esmx.name}/hot-middleware`
+        );
+    }
+
+    return {
+        name: esmx.name,
+        injectChunkName: isServer,
+        imports: esmx.moduleConfig.imports,
+        deps: Object.keys(esmx.moduleConfig.links),
+        exports,
+        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;
+}

package/src/rspack/index.ts

@@ -0,0 +1,8 @@
+export {
+    type RspackAppConfigContext,
+    type RspackAppChainContext,
+    type RspackAppOptions,
+    createRspackApp
+} from './app';
+export type { BuildTarget } from './build-target';
+export { RSPACK_LOADER } from './loader';