@esmx/rspack 3.0.0-rc.11 → 3.0.0-rc.110

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

@@ -1,33 +1,30 @@
-import fs from 'node:fs';
 import { pathToFileURL } from 'node:url';
-import { styleText } from 'node:util';
 import {
     type App,
+    createApp,
     type Esmx,
     type Middleware,
-    PathType,
+    mergeMiddlewares,
     RenderContext,
     type RenderContextOptions,
-    type ServerRenderHandle,
-    createApp,
-    mergeMiddlewares
+    type ServerRenderHandle
 } 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 { createRspackConfig } from './chain-config';
 import { pack } from './pack';
 import { createRsBuild } from './utils';
 
 /**
- * Rspack 应用配置上下文接口。
+ * Rspack application configuration context interface.
  *
- * 该接口提供了在配置钩子函数中可以访问的上下文信息，允许你：
- * - 访问 Esmx 框架实例
- * - 获取当前的构建目标（client/server/node）
- * - 修改 Rspack 配置
- * - 访问应用选项
+ * This interface provides context information accessible in configuration hook functions, allowing you to:
+ * - Access the Esmx framework instance
+ * - Get the current build target (client/server/node)
+ * - Modify Rspack configuration
+ * - Access application options
  *
  * @example
  * ```ts
@@ -36,18 +33,9 @@ import { createRsBuild } from './utils';
  *   async devApp(esmx) {
  *     return import('@esmx/rspack').then((m) =>
  *       m.createRspackApp(esmx, {
- *         // 配置钩子函数
+ *         // Configuration hook function
  *         config(context) {
- *           // 访问构建目标
- *           if (context.buildTarget === 'client') {
- *             // 修改客户端构建配置
- *             context.config.optimization = {
- *               ...context.config.optimization,
- *               splitChunks: {
- *                 chunks: 'all'
- *               }
- *             };
- *           }
+ *           // Access build target
  *         }
  *       })
  *     );
@@ -57,37 +45,73 @@ import { createRsBuild } from './utils';
  */
 export interface RspackAppConfigContext {
     /**
-     * Esmx 框架实例。
-     * 可用于访问框架提供的 API 和工具函数。
+     * Esmx framework instance.
+     * Can be used to access framework APIs and utility functions.
      */
     esmx: Esmx;
 
     /**
-     * 当前的构建目标。
-     * - 'client': 客户端构建，生成浏览器可执行的代码
-     * - 'server': 服务端构建，生成 SSR 渲染代码
-     * - 'node': Node.js 构建，生成服务器入口代码
+     * Current build target.
+     * - 'client': Client build, generates browser-executable code
+     * - 'server': Server build, generates SSR rendering code
+     * - 'node': Node.js build, generates server entry code
      */
     buildTarget: BuildTarget;
 
     /**
-     * Rspack 编译配置对象。
-     * 你可以在配置钩子中修改这个对象来自定义构建行为。
+     * Rspack compilation configuration object.
+     * You can modify this object in configuration hooks to customize build behavior.
      */
     config: RspackOptions;
 
     /**
-     * 创建应用时传入的选项对象。
+     * Options object passed when creating the application.
+     */
+    options: RspackAppOptions;
+}
+
+/**
+ * Rspack chain configuration context interface.
+ *
+ * This interface provides context information accessible in chain hook functions, allowing you to:
+ * - Access the Esmx framework instance
+ * - Get the current build target (client/server/node)
+ * - Modify configuration using rspack-chain
+ * - Access application options
+ */
+export interface RspackAppChainContext {
+    /**
+     * Esmx framework instance.
+     * Can be used to access framework APIs and utility functions.
+     */
+    esmx: Esmx;
+
+    /**
+     * Current build target.
+     * - 'client': Client build, generates browser-executable code
+     * - 'server': Server build, generates SSR rendering code
+     * - 'node': Node.js build, generates server entry code
+     */
+    buildTarget: BuildTarget;
+
+    /**
+     * rspack-chain configuration object.
+     * You can use the chain API in chain hooks to modify the configuration.
+     */
+    chain: import('rspack-chain').default;
+
+    /**
+     * Options object passed when creating the application.
      */
     options: RspackAppOptions;
 }
 
 /**
- * Rspack 应用配置选项接口。
+ * Rspack application configuration options interface.
  *
- * 该接口提供了创建 Rspack 应用时可以使用的配置选项，包括：
- * - 代码压缩选项
- * - Rspack 配置钩子函数
+ * This interface provides configuration options available when creating a Rspack application, including:
+ * - Code compression options
+ * - Rspack configuration hook functions
  *
  * @example
  * ```ts
@@ -96,15 +120,10 @@ export interface RspackAppConfigContext {
  *   async devApp(esmx) {
  *     return import('@esmx/rspack').then((m) =>
  *       m.createRspackApp(esmx, {
- *         // 禁用代码压缩
+ *         // Disable code compression
  *         minimize: false,
- *         // 自定义 Rspack 配置
+ *         // Custom Rspack configuration
  *         config(context) {
- *           if (context.buildTarget === 'client') {
- *             context.config.optimization.splitChunks = {
- *               chunks: 'all'
- *             };
- *           }
  *         }
  *       })
  *     );
@@ -114,37 +133,43 @@ export interface RspackAppConfigContext {
  */
 export interface RspackAppOptions {
     /**
-     * 是否启用代码压缩。
+     * Whether to enable code compression.
      *
-     * - true: 启用代码压缩
-     * - false: 禁用代码压缩
-     * - undefined: 根据环境自动判断（生产环境启用，开发环境禁用）
+     * - true: Enable code compression
+     * - false: Disable code compression
+     * - undefined: Automatically determine based on environment (enabled in production, disabled in development)
      *
      * @default undefined
      */
     minimize?: boolean;
 
     /**
-     * Rspack 配置钩子函数。
+     * Called before the build starts, this function allows you to modify the Rspack compilation configuration.
+     * Supports differentiated configuration for different build targets (client/server/node).
      *
-     * 在构建开始前调用，可以通过该函数修改 Rspack 的编译配置。
-     * 支持针对不同的构建目标（client/server/node）进行差异化配置。
-     *
-     * @param context - 配置上下文，包含框架实例、构建目标和配置对象
+     * @param context - Configuration context, containing framework instance, build target, and configuration object
      */
     config?: (context: RspackAppConfigContext) => void;
+
+    /**
+     * Uses rspack-chain to provide chained configuration method, allowing more flexible modification of Rspack configuration.
+     * Called after the config hook, if chain hook exists, chained configuration is preferred.
+     *
+     * @param context - Configuration context, containing framework instance, build target, and chain configuration object
+     */
+    chain?: (context: RspackAppChainContext) => void;
 }
 
 /**
- * 创建 Rspack 应用实例。
+ * Create Rspack application instance.
  *
- * 该函数根据运行环境（开发/生产）创建不同的应用实例：
- * - 开发环境：配置热更新中间件和实时渲染
- * - 生产环境：配置构建任务
+ * This function creates different application instances based on the runtime environment (development/production):
+ * - Development environment: Configures hot update middleware and real-time rendering
+ * - Production environment: Configures build tasks
  *
- * @param esmx - Esmx 框架实例
- * @param options - Rspack 应用配置选项
- * @returns 返回应用实例
+ * @param esmx - Esmx framework instance
+ * @param options - Rspack application configuration options
+ * @returns Returns application instance
  *
  * @example
  * ```ts
@@ -154,7 +179,7 @@ export interface RspackAppOptions {
  *     return import('@esmx/rspack').then((m) =>
  *       m.createRspackApp(esmx, {
  *         config(context) {
- *           // 配置 loader 处理不同类型的文件
+ *           // Configure loader to handle different file types
  *           context.config.module = {
  *             rules: [
  *               {
@@ -208,22 +233,20 @@ async function createMiddleware(
     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
+    // @ts-expect-error
     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
+                // @ts-expect-error
                 return hot(req, res, next);
             }
             return next();
@@ -235,11 +258,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) {
@@ -251,14 +271,7 @@ function rewriteRender(esmx: Esmx) {
         const module = await vmImport(
             `${esmx.name}/src/entry.server`,
             import.meta.url,
-            {
-                console,
-                setTimeout,
-                clearTimeout,
-                process,
-                URL,
-                global
-            }
+            global
         );
         const serverRender: ServerRenderHandle = module[rc.entryName];
         if (typeof serverRender === 'function') {
@@ -269,40 +282,22 @@ function rewriteRender(esmx: Esmx) {
 }
 
 function rewriteBuild(esmx: Esmx, options: RspackAppOptions = {}) {
+    const targets: BuildTarget[] = ['client', 'server'];
+    if (!esmx.moduleConfig.lib) {
+        targets.push('node');
+    }
     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;
-                }
-            }
+        const ok = await createRsBuild(
+            targets.map((target) => generateBuildConfig(esmx, options, target))
+        ).build();
+        if (!ok) {
+            return false;
         }
-        await createRsBuild([
-            generateBuildConfig(esmx, options, 'client'),
-            generateBuildConfig(esmx, options, 'server'),
-            generateBuildConfig(esmx, options, 'node')
-        ]).build();
         esmx.writeSync(
-            esmx.resolvePath('dist/index.js'),
+            esmx.resolvePath('dist/index.mjs'),
             `
 async function start() {
-    const options = await import('./node/src/entry.node.js').then(
+    const options = await import('./node/src/entry.node.mjs').then(
         (mod) => mod.default
     );
     const { Esmx } = await import('@esmx/core');
@@ -314,6 +309,8 @@ async function start() {
 start();
 `.trim()
         );
+        console.log('\n');
+        console.log(esmx.generateSizeReport().text);
         return pack(esmx);
     };
 }

package/src/rspack/build-target.ts

@@ -0,0 +1,7 @@
+/**
+ * Build target environment type
+ * - node: Node.js environment build
+ * - client: Browser environment build
+ * - server: Server-side rendering build
+ */
+export type BuildTarget = 'node' | 'client' | 'server';

package/src/rspack/chain-config.ts

@@ -0,0 +1,165 @@
+import type { Esmx } from '@esmx/core';
+import type { RspackOptions } from '@rspack/core';
+import { rspack } from '@rspack/core';
+import RspackChain from 'rspack-chain';
+import nodeExternals from 'webpack-node-externals';
+import type { ModuleLinkPluginOptions } from '../module-link';
+import { initModuleLink } from '../module-link';
+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 chain = new RspackChain();
+
+    chain.context(esmx.root);
+    chain.mode(esmx.isProd ? 'production' : 'development');
+    chain.target(isClient ? 'web' : 'node24');
+    chain.cache(!esmx.isProd);
+
+    chain.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}`
+        );
+
+    chain.output.set(
+        'cssFilename',
+        esmx.isProd ? '[name].[contenthash:8].final.css' : '[name].css'
+    );
+    chain.output.set(
+        'cssChunkFilename',
+        esmx.isProd
+            ? 'chunks/[name].[contenthash:8].final.css'
+            : 'chunks/[name].css'
+    );
+    chain.output.path(esmx.resolvePath('dist', buildTarget));
+
+    chain.plugin('progress').use(rspack.ProgressPlugin, [
+        {
+            prefix: buildTarget
+        }
+    ]);
+
+    if (isHot) {
+        chain.plugin('hmr').use(rspack.HotModuleReplacementPlugin);
+    }
+
+    chain.module.parser.set('javascript', {
+        url: isClient ? true : 'relative',
+        importMeta: false,
+        strictExportPresence: true
+    });
+
+    chain.module.generator.set('asset', {
+        emit: isClient
+    });
+
+    chain.module.generator.set('asset/resource', {
+        emit: isClient
+    });
+
+    chain.resolve.alias.set(esmx.name, esmx.root);
+
+    chain.optimization
+        .minimize(options.minimize ?? esmx.isProd)
+        .emitOnErrors(true);
+
+    chain.externalsPresets({
+        web: isClient,
+        node: isServer || isNode
+    });
+
+    chain.externalsType('module-import');
+
+    if (isNode) {
+        chain.externals([
+            // @ts-expect-error
+            nodeExternals({
+                // @ts-expect-error
+                importType: 'module-import'
+            })
+        ]);
+    }
+
+    chain.experiments({
+        ...(chain.get('experiments') || {}),
+        outputModule: true,
+        nativeWatcher: true,
+        rspackFuture: {
+            bundlerInfo: { force: false }
+        }
+    });
+
+    chain.set('lazyCompilation', false);
+
+    initModuleLink(chain, createModuleLinkConfig(esmx, buildTarget));
+
+    return chain;
+}
+
+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;
+}

package/src/rspack/index.ts

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

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

@@ -1,34 +1,15 @@
+import { fileURLToPath } from 'node:url';
+
 function resolve(name: string) {
-    return new URL(import.meta.resolve(name)).pathname;
+    return fileURLToPath(import.meta.resolve(name));
 }
 
 export const RSPACK_LOADER = {
-    /**
-     * Rspack 内置的 builtin:swc-loader
-     */
     builtinSwcLoader: 'builtin:swc-loader',
-    /**
-     * Rspack 内置的 lightningcss-loader
-     */
     lightningcssLoader: 'builtin:lightningcss-loader',
-    /**
-     * css-loader
-     */
     cssLoader: resolve('css-loader'),
-    /**
-     * style-loader
-     */
     styleLoader: resolve('style-loader'),
-    /**
-     * less-loader
-     */
     lessLoader: resolve('less-loader'),
-    /**
-     * style-resources-loader
-     */
     styleResourcesLoader: resolve('style-resources-loader'),
-    /**
-     * worker-rspack-loader
-     */
     workerRspackLoader: resolve('worker-rspack-loader')
 } satisfies Record<string, string>;