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

package/dist/index.d.ts

@@ -1,6 +1,4 @@
-export { type RspackAppConfigContext, type RspackAppOptions, createRspackApp } from './app';
-export { createRspackHtmlApp, type RspackHtmlAppOptions } from './html-app';
-export type { BuildTarget } from './build-target';
-export { RSPACK_LOADER } from './loader';
+export { type RspackAppConfigContext, type RspackAppChainContext, type RspackAppOptions, type BuildTarget, createRspackApp, RSPACK_LOADER } from './rspack';
+export { createRspackHtmlApp, type RspackHtmlAppOptions } from './rspack-html';
 import * as rspack from '@rspack/core';
 export { rspack };

package/dist/index.mjs

@@ -1,7 +1,7 @@
 export {
-  createRspackApp
-} from "./app.mjs";
-export { createRspackHtmlApp } from "./html-app.mjs";
-export { RSPACK_LOADER } from "./loader.mjs";
+  createRspackApp,
+  RSPACK_LOADER
+} from "./rspack/index.mjs";
+export { createRspackHtmlApp } from "./rspack-html/index.mjs";
 import * as rspack from "@rspack/core";
 export { rspack };

package/dist/{app.d.ts → rspack/app.d.ts}

@@ -59,6 +59,38 @@ 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 应用配置选项接口。
  *
@@ -109,6 +141,15 @@ export interface RspackAppOptions {
      * @param context - 配置上下文，包含框架实例、构建目标和配置对象
      */
     config?: (context: RspackAppConfigContext) => void;
+    /**
+     * Rspack chain 配置钩子函数。
+     *
+     * 使用 rspack-chain 提供链式配置方式，可以更灵活地修改 Rspack 配置。
+     * 在 config 钩子之后调用，如果有 chain 钩子则优先使用链式配置。
+     *
+     * @param context - 配置上下文，包含框架实例、构建目标和 chain 配置对象
+     */
+    chain?: (context: RspackAppChainContext) => void;
 }
 /**
  * 创建 Rspack 应用实例。

package/dist/{app.mjs → rspack/app.mjs}

@@ -8,7 +8,7 @@ import {
 } from "@esmx/core";
 import { createVmImport } from "@esmx/import";
 import hotMiddleware from "webpack-hot-middleware";
-import { createRspackConfig } from "./config.mjs";
+import { createRspackConfig } from "./chain-config.mjs";
 import { pack } from "./pack.mjs";
 import { createRsBuild } from "./utils/index.mjs";
 const extension = path.extname(fileURLToPath(import.meta.url));
@@ -54,9 +54,7 @@ async function createMiddleware(esmx, options = {}) {
   ];
 }
 function generateBuildConfig(esmx, options, buildTarget) {
-  const config = createRspackConfig(esmx, buildTarget, options);
-  options.config?.({ esmx, options, buildTarget, config });
-  return config;
+  return createRspackConfig(esmx, buildTarget, options);
 }
 function rewriteRender(esmx) {
   return async (options) => {

package/dist/rspack/build-target.d.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/dist/rspack/chain-config.d.ts

@@ -0,0 +1,7 @@
+import type { Esmx } from '@esmx/core';
+import type { RspackOptions } from '@rspack/core';
+import RspackChain from 'rspack-chain';
+import type { RspackAppOptions } from './app';
+import type { BuildTarget } from './build-target';
+export declare function createChainConfig(esmx: Esmx, buildTarget: BuildTarget, options: RspackAppOptions): RspackChain;
+export declare function createRspackConfig(esmx: Esmx, buildTarget: BuildTarget, options: RspackAppOptions): RspackOptions;

package/dist/rspack/chain-config.mjs

@@ -0,0 +1,133 @@
+import { moduleLinkPlugin } from "@esmx/rspack-module-link-plugin";
+import { rspack } from "@rspack/core";
+import RspackChain from "rspack-chain";
+import nodeExternals from "webpack-node-externals";
+import { HMR_DIR, HMR_JSONP } from "./hmr-config.mjs";
+export function createChainConfig(esmx, buildTarget, options) {
+  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"
+      })
+    ]);
+  }
+  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, 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 = {};
+  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 = [];
+  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, buildTarget, options) {
+  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/dist/rspack/index.d.ts

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

package/dist/rspack/index.mjs

@@ -0,0 +1,4 @@
+export {
+  createRspackApp
+} from "./app.mjs";
+export { RSPACK_LOADER } from "./loader.mjs";

package/dist/{html-app.d.ts → rspack-html/index.d.ts}

@@ -1,45 +1,6 @@
 import type { Esmx } from '@esmx/core';
 import { type SwcLoaderOptions } from '@rspack/core';
-import { type RspackAppOptions } from './app';
-import type { BuildTarget } from './build-target';
-import { RSPACK_LOADER } from './loader';
-/**
- * Rspack HTML 应用配置选项接口
- *
- * @example
- * ```ts
- * // entry.node.ts
- * export default {
- *   async devApp(esmx) {
- *     return import('@esmx/rspack').then((m) =>
- *       m.createRspackHtmlApp(esmx, {
- *         // 将 CSS 输出到独立的 CSS 文件中
- *         css: 'css',
- *         // 自定义 loader
- *         loaders: {
- *           styleLoader: 'vue-style-loader'
- *         },
- *         // 配置 CSS 相关 loader
- *         styleLoader: {
- *           injectType: 'singletonStyleTag'
- *         },
- *         cssLoader: {
- *           modules: true
- *         },
- *         // 配置构建目标
- *         target: {
- *           web: ['chrome>=87'],
- *           node: ['node>=16']
- *         },
- *         // 定义全局常量
- *         definePlugin: {
- *           'process.env.APP_ENV': JSON.stringify('production')
- *         }
- *       })
- *     );
- *   }
- * };
- */
+import { type BuildTarget, RSPACK_LOADER, type RspackAppOptions } from '../rspack';
 export interface RspackHtmlAppOptions extends RspackAppOptions {
     /**
      * CSS 输出模式配置
@@ -221,78 +182,4 @@ export interface RspackHtmlAppOptions extends RspackAppOptions {
         node?: string[];
     };
 }
-/**
- * 创建 Rspack HTML 应用实例。
- *
- * 该函数提供了完整的 Web 应用构建配置，支持以下资源类型的处理：
- * - TypeScript/JavaScript
- * - Web Worker
- * - JSON
- * - CSS/Less
- * - 视频/图片
- * - 字体文件
- *
- * @param esmx - Esmx 框架实例
- * @param options - Rspack HTML 应用配置选项
- * @returns 返回应用实例，包含中间件、渲染函数和构建函数
- *
- * @example
- * ```ts
- * // 开发环境配置
- * // entry.node.ts
- * export default {
- *   async devApp(esmx) {
- *     return import('@esmx/rspack').then((m) =>
- *       m.createRspackHtmlApp(esmx, {
- *         // 配置 CSS 输出模式
- *         css: 'css',
- *         // 配置 TypeScript 编译选项
- *         swcLoader: {
- *           jsc: {
- *             parser: {
- *               syntax: 'typescript',
- *               decorators: true
- *             }
- *           }
- *         },
- *         // 配置构建目标
- *         target: {
- *           web: ['chrome>=87'],
- *           node: ['node>=16']
- *         },
- *         // 自定义 Rspack 配置
- *         config({ config }) {
- *           // 添加自定义 loader
- *           config.module.rules.push({
- *             test: /\.vue$/,
- *             loader: 'vue-loader'
- *           });
- *         }
- *       })
- *     );
- *   }
- * };
- *
- * // 生产环境配置
- * // entry.node.ts
- * export default {
- *   async buildApp(esmx) {
- *     return import('@esmx/rspack').then((m) =>
- *       m.createRspackHtmlApp(esmx, {
- *         // 启用代码压缩
- *         minimize: true,
- *         // 配置全局常量
- *         definePlugin: {
- *           'process.env.NODE_ENV': JSON.stringify('production'),
- *           'process.env.IS_SERVER': {
- *             server: 'true',
- *             client: 'false'
- *           }
- *         }
- *       })
- *     );
- *   }
- * };
- * ```
- */
 export declare function createRspackHtmlApp(esmx: Esmx, options?: RspackHtmlAppOptions): Promise<import("@esmx/core").App>;

package/dist/rspack-html/index.mjs

@@ -0,0 +1,158 @@
+import {
+  rspack
+} from "@rspack/core";
+import NodePolyfillPlugin from "node-polyfill-webpack-plugin";
+import {
+  RSPACK_LOADER,
+  createRspackApp
+} from "../rspack/index.mjs";
+export async function createRspackHtmlApp(esmx, options) {
+  options = {
+    ...options,
+    target: {
+      web: ["chrome>=64", "edge>=79", "firefox>=67", "safari>=11.1"],
+      node: ["node>=24"],
+      ...options?.target
+    },
+    css: options?.css ? options.css : esmx.isProd ? "css" : "js"
+  };
+  return createRspackApp(esmx, {
+    ...options,
+    chain(context) {
+      const { chain, buildTarget, esmx: esmx2 } = context;
+      chain.stats("errors-warnings");
+      chain.devtool(false);
+      chain.cache(false);
+      configureAssetRules(chain, esmx2);
+      chain.module.rule("json").test(/\.json$/i).type("json");
+      configureWorkerRule(chain, esmx2, options);
+      configureTypeScriptRule(chain, buildTarget, options);
+      configureOptimization(chain, options);
+      chain.plugin("node-polyfill").use(NodePolyfillPlugin);
+      configureDefinePlugin(chain, buildTarget, options);
+      chain.resolve.extensions.clear().add("...").add(".ts");
+      configureCssRules(chain, esmx2, options);
+      options?.chain?.(context);
+    }
+  });
+}
+function configureAssetRules(chain, esmx) {
+  chain.module.rule("images").test(/\.(jpe?g|png|gif|bmp|webp|svg)$/i).type("asset/resource").set("generator", {
+    filename: filename(esmx, "images")
+  });
+  chain.module.rule("media").test(/\.(mp4|webm|ogg|mp3|wav|flac|aac)$/i).type("asset/resource").set("generator", {
+    filename: filename(esmx, "media")
+  });
+  chain.module.rule("fonts").test(/\.(woff|woff2|eot|ttf|otf)(\?.*)?$/i).type("asset/resource").set("generator", {
+    filename: filename(esmx, "fonts")
+  });
+}
+function configureWorkerRule(chain, esmx, options) {
+  chain.module.rule("worker").test(/\.worker\.(c|m)?(t|j)s$/i).use("worker-loader").loader(
+    options.loaders?.workerRspackLoader ?? RSPACK_LOADER.workerRspackLoader
+  ).options({
+    esModule: false,
+    filename: `${esmx.name}/workers/[name].[contenthash]${esmx.isProd ? ".final" : ""}.js`
+  });
+}
+function configureTypeScriptRule(chain, buildTarget, options) {
+  chain.module.rule("typescript").test(/\.(ts|mts)$/i).use("swc-loader").loader(
+    options.loaders?.builtinSwcLoader ?? RSPACK_LOADER.builtinSwcLoader
+  ).options({
+    env: {
+      targets: buildTarget === "client" ? options?.target?.web : options?.target?.node,
+      ...options?.swcLoader?.env
+    },
+    jsc: {
+      parser: {
+        syntax: "typescript",
+        ...options?.swcLoader?.jsc?.parser
+      },
+      ...options?.swcLoader?.jsc
+    },
+    ...options?.swcLoader
+  }).end().type("javascript/auto");
+}
+function configureOptimization(chain, options) {
+  chain.optimization.minimizer("swc-js-minimizer").use(rspack.SwcJsMinimizerRspackPlugin, [
+    {
+      minimizerOptions: {
+        format: {
+          comments: false
+        }
+      }
+    }
+  ]);
+  chain.optimization.minimizer("lightningcss-minimizer").use(rspack.LightningCssMinimizerRspackPlugin, [
+    {
+      minimizerOptions: {
+        targets: options.target?.web,
+        errorRecovery: false
+      }
+    }
+  ]);
+}
+function configureDefinePlugin(chain, buildTarget, options) {
+  if (options.definePlugin) {
+    const defineOptions = {};
+    Object.entries(options.definePlugin).forEach(([name, value]) => {
+      const targetValue = typeof value === "string" ? value : value[buildTarget];
+      if (typeof targetValue === "string" && name !== targetValue) {
+        defineOptions[name] = targetValue;
+      }
+    });
+    if (Object.keys(defineOptions).length) {
+      chain.plugin("define").use(rspack.DefinePlugin, [defineOptions]);
+    }
+  }
+}
+function configureCssRules(chain, esmx, options) {
+  if (options.css === false) {
+    return;
+  }
+  if (options.css === "js") {
+    configureCssInJS(chain, esmx, options);
+    return;
+  }
+  configureCssExtract(chain, esmx, options);
+}
+function configureCssInJS(chain, esmx, options) {
+  chain.module.rule("css").test(/\.css$/).use("style-loader").loader(options.loaders?.styleLoader ?? RSPACK_LOADER.styleLoader).options(options.styleLoader || {}).end().use("css-loader").loader(options.loaders?.cssLoader ?? RSPACK_LOADER.cssLoader).options(options.cssLoader || {}).end().use("lightning-css-loader").loader(
+    options.loaders?.lightningcssLoader ?? RSPACK_LOADER.lightningcssLoader
+  ).options({
+    targets: options.target?.web ?? [],
+    minify: esmx.isProd
+  }).end().type("javascript/auto");
+  const lessRule = chain.module.rule("less").test(/\.less$/).use("style-loader").loader(options.loaders?.styleLoader ?? RSPACK_LOADER.styleLoader).options(options.styleLoader || {}).end().use("css-loader").loader(options.loaders?.cssLoader ?? RSPACK_LOADER.cssLoader).options(options.cssLoader || {}).end().use("lightning-css-loader").loader(
+    options.loaders?.lightningcssLoader ?? RSPACK_LOADER.lightningcssLoader
+  ).options({
+    targets: options.target?.web ?? [],
+    minify: esmx.isProd
+  }).end().use("less-loader").loader(options.loaders?.lessLoader ?? RSPACK_LOADER.lessLoader).options(options.lessLoader || {}).end();
+  if (options.styleResourcesLoader) {
+    lessRule.use("style-resources-loader").loader(
+      options.loaders?.styleResourcesLoader ?? RSPACK_LOADER.styleResourcesLoader
+    ).options(options.styleResourcesLoader);
+  }
+  lessRule.type("javascript/auto");
+}
+function configureCssExtract(chain, esmx, options) {
+  chain.set("experiments", {
+    ...chain.get("experiments") || {},
+    css: true
+  });
+  const experiments = chain.get("experiments");
+  if (!experiments || !experiments.css) {
+    return;
+  }
+  const lessRule = chain.module.rule("less").test(/\.less$/).use("less-loader").loader(options.loaders?.lessLoader ?? RSPACK_LOADER.lessLoader).options(options.lessLoader || {}).end();
+  if (options.styleResourcesLoader) {
+    lessRule.use("style-resources-loader").loader(
+      options.loaders?.styleResourcesLoader ?? RSPACK_LOADER.styleResourcesLoader
+    ).options(options.styleResourcesLoader);
+  }
+  lessRule.type("css");
+}
+function filename(esmx, name, ext = "[ext]") {
+  return esmx.isProd ? `${name}/[name].[contenthash:8].final${ext}` : `${name}/[path][name]${ext}`;
+}

package/package.json

@@ -63,14 +63,15 @@
         }
     },
     "dependencies": {
-        "@esmx/import": "3.0.0-rc.44",
-        "@esmx/rspack-module-link-plugin": "3.0.0-rc.44",
+        "@esmx/import": "3.0.0-rc.46",
+        "@esmx/rspack-module-link-plugin": "3.0.0-rc.46",
         "@npmcli/arborist": "^9.0.1",
         "@rspack/core": "1.4.8",
         "css-loader": "^7.1.2",
         "less-loader": "^12.2.0",
         "node-polyfill-webpack-plugin": "^4.1.0",
         "pacote": "^21.0.0",
+        "rspack-chain": "^1.1.1",
         "style-loader": "^4.0.0",
         "style-resources-loader": "^1.5.0",
         "webpack-hot-middleware": "^2.26.1",
@@ -79,8 +80,8 @@
     },
     "devDependencies": {
         "@biomejs/biome": "1.9.4",
-        "@esmx/core": "3.0.0-rc.44",
-        "@esmx/lint": "3.0.0-rc.44",
+        "@esmx/core": "3.0.0-rc.46",
+        "@esmx/lint": "3.0.0-rc.46",
         "@types/node": "^24.0.0",
         "@types/npmcli__arborist": "^6.3.1",
         "@types/pacote": "^11.1.8",
@@ -92,7 +93,7 @@
         "unbuild": "3.5.0",
         "vitest": "3.2.4"
     },
-    "version": "3.0.0-rc.44",
+    "version": "3.0.0-rc.46",
     "type": "module",
     "private": false,
     "exports": {
@@ -111,5 +112,5 @@
         "template",
         "public"
     ],
-    "gitHead": "c83ac6a9b183e5f1a98884d9ae18ff99aacf1a54"
+    "gitHead": "dcac010017466e95e1c7db78094d4925c27d54b9"
 }

package/src/index.ts

@@ -1,11 +1,12 @@
 export {
     type RspackAppConfigContext,
+    type RspackAppChainContext,
     type RspackAppOptions,
-    createRspackApp
-} from './app';
-export { createRspackHtmlApp, type RspackHtmlAppOptions } from './html-app';
-export type { BuildTarget } from './build-target';
-export { RSPACK_LOADER } from './loader';
+    type BuildTarget,
+    createRspackApp,
+    RSPACK_LOADER
+} from './rspack';
+export { createRspackHtmlApp, type RspackHtmlAppOptions } from './rspack-html';
 
 import * as rspack from '@rspack/core';