@esmx/rspack 3.0.0-rc.10

package/dist/utils/rsbuild.mjs

@@ -0,0 +1,97 @@
+import { styleText } from "node:util";
+import { rspack } from "@rspack/core";
+export function createRsBuild(options) {
+  const multiCompiler = rspack(options);
+  return {
+    get compilers() {
+      return multiCompiler.compilers;
+    },
+    build() {
+      return new Promise((resolve) => {
+        multiCompiler.run((err, stats) => {
+          if (err) {
+            return resolve(false);
+          }
+          if (stats?.hasErrors()) {
+            stats.toJson({ errors: true })?.errors?.forEach((err2) => {
+              console.log(styleText("red", err2.message));
+            });
+            return resolve(false);
+          }
+          multiCompiler.close((err2) => {
+            if (err2) {
+              console.log(styleText("red", err2.message));
+              return resolve(false);
+            }
+            process.nextTick(() => {
+              resolve(true);
+            });
+          });
+        });
+      });
+    },
+    watch() {
+      const watching = multiCompiler.watch({}, (err, stats) => {
+        if (err) {
+          console.error(err);
+          return;
+        }
+        if (stats?.hasErrors()) {
+          stats.toJson({ errors: true })?.errors?.forEach((err2) => {
+            console.log(styleText("red", err2.message));
+          });
+        }
+      });
+      const signals = ["SIGINT", "SIGTERM", "SIGHUP"];
+      signals.forEach((signal) => {
+        process.on(signal, () => {
+          watching.close(() => {
+            process.exit();
+          });
+        });
+      });
+      process.on("uncaughtException", handleExit);
+      process.on("unhandledRejection", handleExit);
+      function handleExit(err) {
+        console.error(err);
+        watching.close(() => {
+          process.exit(1);
+        });
+      }
+    }
+  };
+}
+export class RsBuild {
+  compiler;
+  constructor(options) {
+    this.compiler = rspack(options);
+  }
+  async build() {
+    return new Promise((resolve) => {
+      this.compiler.run((err, stats) => {
+        if (err) {
+          return resolve(false);
+        }
+        if (stats?.hasErrors()) {
+          stats.toJson({ errors: true })?.errors?.forEach((err2) => {
+            console.error(err2);
+          });
+          return resolve(false);
+        }
+        this.compiler.close((err2) => {
+          if (err2) {
+            console.error(err2);
+            return resolve(false);
+          }
+          process.nextTick(() => {
+            resolve(true);
+          });
+        });
+      });
+    });
+  }
+  watch() {
+    const watching = this.compiler.watch({}, () => {
+    });
+  }
+}

package/package.json

@@ -0,0 +1,108 @@
+{
+    "name": "@esmx/rspack",
+    "description": "A high-performance Rspack integration for Esmx microfrontend framework, providing module federation and SSR capabilities.",
+    "author": {
+        "name": "lzxb",
+        "url": "https://github.com/lzxb"
+    },
+    "contributors": [
+        {
+            "name": "RockShi1994",
+            "url": "https://github.com/RockShi1994"
+        },
+        {
+            "name": "jerrychan7",
+            "url": "https://github.com/jerrychan7"
+        }
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/js-esm/esmx.git",
+        "directory": "packages/rspack"
+    },
+    "homepage": "https://github.com/js-esm/esmx",
+    "bugs": {
+        "url": "https://github.com/js-esm/esmx/issues"
+    },
+    "template": "library-node",
+    "license": "MIT",
+    "keywords": [
+        "Rspack",
+        "TypeScript",
+        "JavaScript",
+        "CSS",
+        "Less",
+        "High Performance",
+        "Build Tool",
+        "Module Federation",
+        "SSR",
+        "Development Experience"
+    ],
+    "scripts": {
+        "lint:js": "biome check --write --no-errors-on-unmatched",
+        "lint:css": "stylelint '**/*.{css,vue}' --fix --aei",
+        "lint:type": "tsc --noEmit",
+        "test": "vitest run --pass-with-no-tests",
+        "coverage": "vitest run --coverage --pass-with-no-tests",
+        "build": "unbuild"
+    },
+    "peerDependencies": {
+        "@esmx/core": "*",
+        "less": "*"
+    },
+    "peerDependenciesMeta": {
+        "less": {
+            "optional": true
+        }
+    },
+    "dependencies": {
+        "@esmx/import": "3.0.0-rc.10",
+        "@esmx/rspack-module-link-plugin": "3.0.0-rc.10",
+        "@npmcli/arborist": "^8.0.0",
+        "@rspack/core": "1.2.8",
+        "css-loader": "^7.1.2",
+        "less-loader": "^12.2.0",
+        "node-polyfill-webpack-plugin": "^4.1.0",
+        "pacote": "^21.0.0",
+        "style-loader": "^4.0.0",
+        "style-resources-loader": "^1.5.0",
+        "webpack-hot-middleware": "^2.26.1",
+        "webpack-node-externals": "~3.0.0",
+        "worker-rspack-loader": "^3.1.2"
+    },
+    "devDependencies": {
+        "@biomejs/biome": "1.9.4",
+        "@esmx/core": "3.0.0-rc.10",
+        "@esmx/lint": "3.0.0-rc.10",
+        "@types/node": "22.13.10",
+        "@types/npmcli__arborist": "^5.6.11",
+        "@types/pacote": "^11.1.8",
+        "@types/webpack-hot-middleware": "^2.25.9",
+        "@types/webpack-node-externals": "^3.0.4",
+        "@vitest/coverage-v8": "3.0.8",
+        "stylelint": "16.15.0",
+        "typescript": "5.8.2",
+        "unbuild": "2.0.0",
+        "vitest": "3.0.8"
+    },
+    "version": "3.0.0-rc.10",
+    "type": "module",
+    "private": false,
+    "exports": {
+        ".": {
+            "import": "./dist/index.mjs",
+            "types": "./dist/index.d.ts"
+        }
+    },
+    "module": "dist/index.mjs",
+    "types": "./dist/index.d.ts",
+    "files": [
+        "lib",
+        "src",
+        "dist",
+        "*.mjs",
+        "template",
+        "public"
+    ],
+    "gitHead": "4a528ffecfdc6f2c6e7d97bc952427745f467691"
+}

package/src/app.ts

@@ -0,0 +1,319 @@
+import fs from 'node:fs';
+import { pathToFileURL } from 'node:url';
+import { styleText } from 'node:util';
+import {
+    type App,
+    type Esmx,
+    type Middleware,
+    PathType,
+    RenderContext,
+    type RenderContextOptions,
+    type ServerRenderHandle,
+    createApp,
+    mergeMiddlewares
+} from '@esmx/core';
+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 { pack } from './pack';
+import { createRsBuild } from './utils';
+
+/**
+ * Rspack 应用配置上下文接口。
+ *
+ * 该接口提供了在配置钩子函数中可以访问的上下文信息，允许你：
+ * - 访问 Esmx 框架实例
+ * - 获取当前的构建目标（client/server/node）
+ * - 修改 Rspack 配置
+ * - 访问应用选项
+ *
+ * @example
+ * ```ts
+ * // entry.node.ts
+ * export default {
+ *   async devApp(esmx) {
+ *     return import('@esmx/rspack').then((m) =>
+ *       m.createRspackApp(esmx, {
+ *         // 配置钩子函数
+ *         config(context) {
+ *           // 访问构建目标
+ *           if (context.buildTarget === 'client') {
+ *             // 修改客户端构建配置
+ *             context.config.optimization = {
+ *               ...context.config.optimization,
+ *               splitChunks: {
+ *                 chunks: 'all'
+ *               }
+ *             };
+ *           }
+ *         }
+ *       })
+ *     );
+ *   }
+ * };
+ * ```
+ */
+export interface RspackAppConfigContext {
+    /**
+     * Esmx 框架实例。
+     * 可用于访问框架提供的 API 和工具函数。
+     */
+    esmx: Esmx;
+
+    /**
+     * 当前的构建目标。
+     * - 'client': 客户端构建，生成浏览器可执行的代码
+     * - 'server': 服务端构建，生成 SSR 渲染代码
+     * - 'node': Node.js 构建，生成服务器入口代码
+     */
+    buildTarget: BuildTarget;
+
+    /**
+     * Rspack 编译配置对象。
+     * 你可以在配置钩子中修改这个对象来自定义构建行为。
+     */
+    config: RspackOptions;
+
+    /**
+     * 创建应用时传入的选项对象。
+     */
+    options: RspackAppOptions;
+}
+
+/**
+ * Rspack 应用配置选项接口。
+ *
+ * 该接口提供了创建 Rspack 应用时可以使用的配置选项，包括：
+ * - 代码压缩选项
+ * - Rspack 配置钩子函数
+ *
+ * @example
+ * ```ts
+ * // entry.node.ts
+ * export default {
+ *   async devApp(esmx) {
+ *     return import('@esmx/rspack').then((m) =>
+ *       m.createRspackApp(esmx, {
+ *         // 禁用代码压缩
+ *         minimize: false,
+ *         // 自定义 Rspack 配置
+ *         config(context) {
+ *           if (context.buildTarget === 'client') {
+ *             context.config.optimization.splitChunks = {
+ *               chunks: 'all'
+ *             };
+ *           }
+ *         }
+ *       })
+ *     );
+ *   }
+ * };
+ * ```
+ */
+export interface RspackAppOptions {
+    /**
+     * 是否启用代码压缩。
+     *
+     * - true: 启用代码压缩
+     * - false: 禁用代码压缩
+     * - undefined: 根据环境自动判断（生产环境启用，开发环境禁用）
+     *
+     * @default undefined
+     */
+    minimize?: boolean;
+
+    /**
+     * Rspack 配置钩子函数。
+     *
+     * 在构建开始前调用，可以通过该函数修改 Rspack 的编译配置。
+     * 支持针对不同的构建目标（client/server/node）进行差异化配置。
+     *
+     * @param context - 配置上下文，包含框架实例、构建目标和配置对象
+     */
+    config?: (context: RspackAppConfigContext) => void;
+}
+
+/**
+ * 创建 Rspack 应用实例。
+ *
+ * 该函数根据运行环境（开发/生产）创建不同的应用实例：
+ * - 开发环境：配置热更新中间件和实时渲染
+ * - 生产环境：配置构建任务
+ *
+ * @param esmx - Esmx 框架实例
+ * @param options - Rspack 应用配置选项
+ * @returns 返回应用实例
+ *
+ * @example
+ * ```ts
+ * // entry.node.ts
+ * export default {
+ *   async devApp(esmx) {
+ *     return import('@esmx/rspack').then((m) =>
+ *       m.createRspackApp(esmx, {
+ *         config(context) {
+ *           // 配置 loader 处理不同类型的文件
+ *           context.config.module = {
+ *             rules: [
+ *               {
+ *                 test: /\.ts$/,
+ *                 exclude: [/node_modules/],
+ *                 loader: 'builtin:swc-loader',
+ *                 options: {
+ *                   jsc: {
+ *                     parser: {
+ *                       syntax: 'typescript'
+ *                     }
+ *                   }
+ *                 }
+ *               },
+ *               {
+ *                 test: /\.css$/,
+ *                 use: ['style-loader', 'css-loader']
+ *               }
+ *             ]
+ *           };
+ *         }
+ *       })
+ *     );
+ *   }
+ * };
+ * ```
+ */
+export async function createRspackApp(
+    esmx: Esmx,
+    options?: RspackAppOptions
+): Promise<App> {
+    const app = await createApp(esmx, esmx.command);
+    switch (esmx.command) {
+        case esmx.COMMAND.dev:
+            app.middleware = mergeMiddlewares([
+                ...(await createMiddleware(esmx, options)),
+                app.middleware
+            ]);
+            app.render = rewriteRender(esmx);
+            break;
+        case esmx.COMMAND.build:
+            app.build = rewriteBuild(esmx, options);
+            break;
+    }
+    return app;
+}
+async function createMiddleware(
+    esmx: Esmx,
+    options: RspackAppOptions = {}
+): Promise<Middleware[]> {
+    if (esmx.command !== esmx.COMMAND.dev) {
+        return [];
+    }
+    // const middlewares: Middleware[] = [];
+
+    const rsBuild = createRsBuild([
+        generateBuildConfig(esmx, options, 'client'),
+        generateBuildConfig(esmx, options, 'server')
+    ]);
+    rsBuild.watch();
+
+    // @ts-ignore
+    const hot = hotMiddleware(rsBuild.compilers[0], {
+        path: `${esmx.basePath}hot-middleware`
+    });
+    return [
+        (req, res, next) => {
+            if (req.url?.startsWith(`${esmx.basePath}hot-middleware`)) {
+                // @ts-ignore
+                return hot(req, res, next);
+            }
+            return next();
+        }
+    ];
+}
+
+function generateBuildConfig(
+    esmx: Esmx,
+    options: RspackAppOptions,
+    buildTarget: BuildTarget
+) {
+    const config = createRspackConfig(esmx, buildTarget, options);
+    options.config?.({ esmx, options, buildTarget, config });
+
+    return config;
+}
+
+function rewriteRender(esmx: Esmx) {
+    return async (options?: RenderContextOptions): Promise<RenderContext> => {
+        const baseURL = pathToFileURL(esmx.root);
+        const importMap = await esmx.getImportMap('server');
+        const vmImport = createVmImport(baseURL, importMap);
+        const rc = new RenderContext(esmx, options);
+        const module = await vmImport(
+            `${esmx.name}/src/entry.server`,
+            import.meta.url,
+            {
+                console,
+                setTimeout,
+                clearTimeout,
+                process,
+                URL,
+                global
+            }
+        );
+        const serverRender: ServerRenderHandle = module[rc.entryName];
+        if (typeof serverRender === 'function') {
+            await serverRender(rc);
+        }
+        return rc;
+    };
+}
+
+function rewriteBuild(esmx: Esmx, options: RspackAppOptions = {}) {
+    return async (): Promise<boolean> => {
+        for (const item of esmx.moduleConfig.exports) {
+            if (item.type === PathType.root) {
+                const text = fs.readFileSync(
+                    esmx.resolvePath('./', item.exportPath),
+                    'utf-8'
+                );
+                if (/\bexport\s+\*\s+from\b/.test(text)) {
+                    console.log(
+                        styleText(
+                            'red',
+                            `The export * syntax is used in the file '${item.exportPath}', which will cause the packaging to fail.`
+                        )
+                    );
+                    console.log(
+                        styleText(
+                            'red',
+                            `Please use specific export syntax, such as export { a, b } from './a';`
+                        )
+                    );
+                    return false;
+                }
+            }
+        }
+        await createRsBuild([
+            generateBuildConfig(esmx, options, 'client'),
+            generateBuildConfig(esmx, options, 'server'),
+            generateBuildConfig(esmx, options, 'node')
+        ]).build();
+        esmx.writeSync(
+            esmx.resolvePath('dist/index.js'),
+            `
+async function start() {
+    const options = await import('./node/src/entry.node.js').then(
+        (mod) => mod.default
+    );
+    const { Esmx } = await import('@esmx/core');
+    const esmx = new Esmx(options);
+
+    await esmx.init(esmx.COMMAND.start);
+}
+
+start();
+`.trim()
+        );
+        return pack(esmx);
+    };
+}

package/src/build-target.ts

@@ -0,0 +1,8 @@
+/**
+ * 构建目标环境类型
+ * @description 定义了应用程序的构建目标环境，用于配置构建过程中的特定优化和功能
+ * - node: 构建为 Node.js 环境运行的代码
+ * - client: 构建为浏览器环境运行的代码
+ * - server: 构建为服务端环境运行的代码
+ */
+export type BuildTarget = 'node' | 'client' | 'server';

package/src/config.ts

@@ -0,0 +1,171 @@
+import type { Esmx } from '@esmx/core';
+import { moduleLinkPlugin } from '@esmx/rspack-module-link-plugin';
+import {
+    type ExternalItem,
+    type Plugins,
+    type RspackOptions,
+    rspack
+} from '@rspack/core';
+import nodeExternals from 'webpack-node-externals';
+import type { RspackAppOptions } from './app';
+import type { BuildTarget } from './build-target';
+
+/**
+ * 构建 Client、Server、Node 的基础配置
+ */
+export function createRspackConfig(
+    esmx: Esmx,
+    buildTarget: BuildTarget,
+    options: RspackAppOptions
+): RspackOptions {
+    const isWebApp = buildTarget === 'client' || buildTarget === 'server';
+    const isHot = buildTarget === 'client' && !esmx.isProd;
+    return {
+        /**
+         * 项目根目录，不可修改
+         */
+        context: esmx.root,
+        entry: (() => {
+            const importPaths: string[] = [];
+            switch (buildTarget) {
+                case 'client':
+                    importPaths.push(esmx.resolvePath('src/entry.client.ts'));
+                    isHot &&
+                        importPaths.push(
+                            `${resolve('webpack-hot-middleware/client')}?path=${esmx.basePath}hot-middleware&timeout=5000&overlay=false`
+                        );
+                    break;
+                case 'server':
+                    importPaths.push(esmx.resolvePath('src/entry.server.ts'));
+                    break;
+                case 'node':
+                    importPaths.push(esmx.resolvePath('src/entry.node.ts'));
+                    break;
+            }
+            return {
+                [`./src/entry.${buildTarget}`]: {
+                    import: importPaths
+                }
+            };
+        })(),
+        output: {
+            clean: esmx.isProd,
+            module: true,
+            chunkFormat: esmx.isProd ? 'module' : undefined,
+            chunkLoading: esmx.isProd ? 'import' : undefined,
+            chunkFilename: esmx.isProd
+                ? 'chunks/[name].[contenthash:8].final.js'
+                : 'chunks/[name].js',
+            library: {
+                type: esmx.isProd ? 'modern-module' : 'module'
+            },
+            filename:
+                buildTarget !== 'node' && esmx.isProd
+                    ? '[name].[contenthash:8].final.js'
+                    : '[name].js',
+            cssFilename: esmx.isProd
+                ? '[name].[contenthash:8].final.css'
+                : '[name].css',
+            cssChunkFilename: esmx.isProd
+                ? 'chunks/[name].[contenthash:8].final.css'
+                : 'chunks/[name].css',
+            publicPath:
+                buildTarget === 'client'
+                    ? 'auto'
+                    : `${esmx.basePathPlaceholder}${esmx.basePath}`,
+            uniqueName: esmx.varName,
+            hotUpdateChunkFilename: '__hot__/[id].[fullhash].hot-update.js',
+            hotUpdateMainFilename:
+                '__hot__/[runtime].[fullhash].hot-update.json',
+            path: ((): string => {
+                switch (buildTarget) {
+                    case 'client':
+                        return esmx.resolvePath('dist/client');
+                    case 'server':
+                        return esmx.resolvePath('dist/server');
+                    case 'node':
+                        return esmx.resolvePath('dist/node');
+                }
+            })(),
+            environment: {
+                nodePrefixForCoreModules: true
+            }
+        },
+        // 默认插件，不可修改
+        plugins: ((): Plugins => {
+            return [
+                // 进度条插件
+                new rspack.ProgressPlugin({
+                    prefix: buildTarget
+                }),
+                // 模块链接插件
+                isWebApp ? moduleLinkPlugin(esmx.moduleConfig) : false,
+                // 热更新插件
+                isHot ? new rspack.HotModuleReplacementPlugin() : false
+            ];
+        })(),
+        module: {
+            parser: {
+                javascript: {
+                    url: buildTarget === 'client' ? true : 'relative',
+                    importMeta: false,
+                    strictExportPresence: true
+                }
+            },
+            generator: {
+                asset: {
+                    emit: buildTarget === 'client'
+                },
+                'asset/resource': {
+                    emit: buildTarget === 'client'
+                }
+            },
+            rules: []
+        },
+        resolve: {
+            alias: {
+                [esmx.name]: esmx.root
+            }
+        },
+        optimization: {
+            minimize: options.minimize ?? esmx.isProd,
+            avoidEntryIife: esmx.isProd,
+            concatenateModules: esmx.isProd,
+            emitOnErrors: true,
+            splitChunks: {
+                chunks: 'async'
+            }
+        },
+        externalsPresets: {
+            web: buildTarget === 'client',
+            node: buildTarget === 'server' || buildTarget === 'node'
+        },
+        externalsType: 'module-import',
+        externals: ((): ExternalItem[] => {
+            if (buildTarget === 'node') {
+                return [
+                    // @ts-ignore
+                    nodeExternals({
+                        // @ts-ignore
+                        importType: 'module-import'
+                    })
+                ];
+            }
+            return [];
+        })(),
+        experiments: {
+            outputModule: true,
+            parallelCodeSplitting: true,
+            rspackFuture: {
+                bundlerInfo: { force: false }
+            }
+        },
+        target: buildTarget === 'client' ? 'web' : 'node22.6',
+        mode: esmx.isProd ? 'production' : 'development',
+        cache: !esmx.isProd
+    };
+}
+
+function resolve(name: string) {
+    return new URL(import.meta.resolve(name)).pathname;
+}