@esmx/rspack 3.0.0-rc.10 → 3.0.0-rc.103

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Esmx Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,29 +1,57 @@
-# @esmx/rspack
-
-基于 Rspack 提供高性能的构建能力，支持标准应用和 HTML 应用的开发与构建。
-
-## 特性
-
-- 🚀 **高性能构建** - 基于 Rspack 的极速构建，为应用提供卓越的开发体验
-- 💡 **应用支持** - 完整支持标准应用和 HTML 应用的开发与构建
-- 🎨 **资源处理** - 智能处理各类资源，支持 JavaScript、CSS、图片等
-- 🛠️ **SSR 支持** - 内置服务端渲染支持，轻松构建同构应用
-- 🔧 **开发体验** - 支持热更新、智能提示和 TypeScript
-
-## 安装
+<div align="center">
+  <img src="https://esmx.dev/logo.svg?t=2025" width="120" alt="Esmx Logo" />
+  <h1>@esmx/rspack</h1>
+  
+  <div>
+    <a href="https://www.npmjs.com/package/@esmx/rspack">
+      <img src="https://img.shields.io/npm/v/@esmx/rspack.svg" alt="npm version" />
+    </a>
+    <a href="https://github.com/esmnext/esmx/actions/workflows/build.yml">
+      <img src="https://github.com/esmnext/esmx/actions/workflows/build.yml/badge.svg" alt="Build" />
+    </a>
+    <a href="https://esmx.dev/coverage/">
+      <img src="https://img.shields.io/badge/coverage-live%20report-brightgreen" alt="Coverage Report" />
+    </a>
+    <a href="https://nodejs.org/">
+      <img src="https://img.shields.io/node/v/@esmx/rspack.svg" alt="node version" />
+    </a>
+    <a href="https://bundlephobia.com/package/@esmx/rspack">
+      <img src="https://img.shields.io/bundlephobia/minzip/@esmx/rspack" alt="size" />
+    </a>
+  </div>
+  
+  <p>A high-performance Rspack integration for Esmx microfrontend framework, providing SSR and Module Linking capabilities</p>
+  
+  <p>
+    English | <a href="https://github.com/esmnext/esmx/blob/master/packages/rspack/README.zh-CN.md">中文</a>
+  </p>
+</div>
+
+## 🚀 Features
+
+- **High-Performance Build** - Ultra-fast building based on Rspack, providing excellent development experience
+- **Application Support** - Complete support for standard applications and HTML applications development and building
+- **Asset Processing** - Smart processing of various assets including JavaScript, CSS, images
+- **SSR Support** - Built-in server-side rendering support for easy isomorphic application building
+- **Developer Experience** - Supports hot reload, intelligent hints, and TypeScript
+
+## 📦 Installation
 
 ```bash
+# npm
+npm install @esmx/rspack -D
+
+# pnpm
 pnpm add @esmx/rspack -D
-# 或
+
+# yarn
 yarn add @esmx/rspack -D
-# 或
-npm install @esmx/rspack -D
 ```
 
-## 文档
+## 📚 Documentation
 
-访问 [@esmx/rspack 官方文档](https://www.esmnext.com/api/app/rspack.html) 获取详细的使用指南和 API 文档。
+Visit the [official documentation](https://esmx.dev/api/app/rspack.html) for detailed usage guides and API reference.
 
-## 许可证
+## 📄 License
 
-MIT
+MIT © [Esmx Team](https://github.com/esmnext/esmx)

package/README.zh-CN.md

@@ -0,0 +1,57 @@
+<div align="center">
+  <img src="https://esmx.dev/logo.svg?t=2025" width="120" alt="Esmx Logo" />
+  <h1>@esmx/rspack</h1>
+  
+  <div>
+    <a href="https://www.npmjs.com/package/@esmx/rspack">
+      <img src="https://img.shields.io/npm/v/@esmx/rspack.svg" alt="npm version" />
+    </a>
+    <a href="https://github.com/esmnext/esmx/actions/workflows/build.yml">
+      <img src="https://github.com/esmnext/esmx/actions/workflows/build.yml/badge.svg" alt="Build" />
+    </a>
+    <a href="https://esmx.dev/coverage/">
+      <img src="https://img.shields.io/badge/coverage-live%20report-brightgreen" alt="Coverage Report" />
+    </a>
+    <a href="https://nodejs.org/">
+      <img src="https://img.shields.io/node/v/@esmx/rspack.svg" alt="node version" />
+    </a>
+    <a href="https://bundlephobia.com/package/@esmx/rspack">
+      <img src="https://img.shields.io/bundlephobia/minzip/@esmx/rspack" alt="size" />
+    </a>
+  </div>
+  
+  <p>为 Esmx 微前端框架提供的高性能 Rspack 集成，具备 SSR 和模块链接能力</p>
+  
+  <p>
+    <a href="https://github.com/esmnext/esmx/blob/master/packages/rspack/README.md">English</a> | 中文
+  </p>
+</div>
+
+## 🚀 特性
+
+- **高性能构建** - 基于 Rspack 的极速构建，为应用提供卓越的开发体验
+- **应用支持** - 完整支持标准应用和 HTML 应用的开发与构建
+- **资源处理** - 智能处理各类资源，支持 JavaScript、CSS、图片等
+- **SSR 支持** - 内置服务端渲染支持，轻松构建同构应用
+- **开发体验** - 支持热更新、智能提示和 TypeScript
+
+## 📦 安装
+
+```bash
+# npm
+npm install @esmx/rspack -D
+
+# pnpm
+pnpm add @esmx/rspack -D
+
+# yarn
+yarn add @esmx/rspack -D
+```
+
+## 📚 文档
+
+访问[官方文档](https://esmx.dev/api/app/rspack.html)获取详细的使用指南和 API 参考。
+
+## 📄 许可证
+
+MIT © [Esmx Team](https://github.com/esmnext/esmx) 

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 BuildTarget, createRspackApp, RSPACK_LOADER, type RspackAppChainContext, type RspackAppConfigContext, type RspackAppOptions } 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/module-link/config.d.ts

@@ -0,0 +1,5 @@
+import type RspackChain from 'rspack-chain';
+import type { ParsedModuleLinkPluginOptions } from './types';
+export declare function applyEntryConfig(chain: RspackChain, opts: ParsedModuleLinkPluginOptions): void;
+export declare function applyModuleConfig(chain: RspackChain): void;
+export declare function applyExternalsConfig(chain: RspackChain, opts: ParsedModuleLinkPluginOptions): void;

package/dist/module-link/config.mjs

@@ -0,0 +1,100 @@
+export function applyEntryConfig(chain, opts) {
+  if (chain.entryPoints.has("main")) {
+    const mainEntry = chain.entry("main");
+    if (mainEntry.values().length === 0) {
+      chain.entryPoints.clear();
+    }
+  }
+  for (const value of Object.values(opts.exports)) {
+    if (value.file) {
+      const entry = chain.entry(value.name);
+      for (const preEntry of opts.preEntries) {
+        entry.add(preEntry);
+      }
+      entry.add(value.file);
+    }
+  }
+}
+export function applyModuleConfig(chain) {
+  chain.output.set("module", true).set("chunkFormat", "module").set("chunkLoading", "import").set("workerChunkLoading", "import");
+  chain.output.library({
+    type: "module"
+  });
+}
+export function applyExternalsConfig(chain, opts) {
+  const existingExternals = chain.get("externals") || [];
+  const externals = Array.isArray(existingExternals) ? [...existingExternals] : [existingExternals];
+  const compilerContext = chain.get("context") ?? process.cwd();
+  const externalFunc = createExternalsFunction(opts, compilerContext);
+  externals.push(externalFunc);
+  chain.externals(externals);
+}
+function createExternalsFunction(opts, compilerContext) {
+  const importMap = /* @__PURE__ */ new Map();
+  let initPromise = null;
+  const init = (resolvePath) => {
+    if (initPromise) return initPromise;
+    initPromise = (async () => {
+      await Promise.all(
+        Object.values(opts.exports).map(async (value) => {
+          const identifier = value.pkg ? value.name : value.identifier;
+          importMap.set(identifier, identifier);
+          importMap.set(value.name, identifier);
+          const resolvedPath = await resolvePath(value.file);
+          if (resolvedPath) {
+            importMap.set(resolvedPath, identifier);
+          }
+        })
+      );
+      for (const key of Object.keys(opts.imports)) {
+        importMap.set(key, key);
+      }
+    })();
+    return initPromise;
+  };
+  const match = async (request, context, resolvePath) => {
+    if (!request) return null;
+    if (opts.deps.length > 0) {
+      const matchedDep = opts.deps.find(
+        (dep) => request === dep || request.startsWith(`${dep}/`)
+      );
+      if (matchedDep) {
+        return request;
+      }
+    }
+    let importName = importMap.get(request);
+    if (!importName) {
+      const resolvedPath = await resolvePath(request, context);
+      if (resolvedPath) {
+        importName = importMap.get(resolvedPath);
+      }
+    }
+    return importName || null;
+  };
+  const FILE_EXT_REGEX = /\.worker\.(js|mjs|cjs|jsx|mjsx|cjsx|ts|mts|cts|tsx|mtsx|ctsx)$/i;
+  return async (data) => {
+    if (!data.request || !data.context || !data.contextInfo?.issuer || FILE_EXT_REGEX.test(data.contextInfo.issuer))
+      return;
+    const defaultContext = compilerContext;
+    const resolvePath = async (request, context = defaultContext) => {
+      if (!data.getResolve) {
+        return null;
+      }
+      const resolveFunc = data.getResolve();
+      return new Promise((resolve) => {
+        resolveFunc(context, request, (err, res) => {
+          resolve(typeof res === "string" ? res : null);
+        });
+      });
+    };
+    await init(resolvePath);
+    const matchedIdentifier = await match(
+      data.request,
+      data.context,
+      resolvePath
+    );
+    if (matchedIdentifier) {
+      return `module-import ${matchedIdentifier}`;
+    }
+  };
+}

package/dist/module-link/config1.d.ts

@@ -0,0 +1,3 @@
+import type RspackChain from 'rspack-chain';
+import type { ParsedModuleLinkPluginOptions } from './types';
+export declare function applyChainConfig1(chain: RspackChain, opts: ParsedModuleLinkPluginOptions): void;

package/dist/module-link/config1.mjs

@@ -0,0 +1,16 @@
+import {
+  applyEntryConfig,
+  applyExternalsConfig,
+  applyModuleConfig
+} from "./config.mjs";
+export function applyChainConfig1(chain, opts) {
+  applyEntryConfig(chain, opts);
+  applyExternalsConfig(chain, opts);
+  applyModuleConfig(chain);
+  if (chain.get("mode") === "production") {
+    chain.output.library({
+      type: "modern-module"
+    });
+    chain.optimization.set("avoidEntryIife", true);
+  }
+}

package/dist/module-link/config2.d.ts

@@ -0,0 +1,3 @@
+import type RspackChain from 'rspack-chain';
+import type { ParsedModuleLinkPluginOptions } from './types';
+export declare function applyChainConfig2(chain: RspackChain, opts: ParsedModuleLinkPluginOptions): void;

package/dist/module-link/config2.mjs

@@ -0,0 +1,17 @@
+import { rspack } from "@rspack/core";
+import {
+  applyEntryConfig,
+  applyExternalsConfig,
+  applyModuleConfig
+} from "./config.mjs";
+export function applyChainConfig2(chain, opts) {
+  applyEntryConfig(chain, opts);
+  applyExternalsConfig(chain, opts);
+  if (chain.get("mode") === "production") {
+    chain.output.set("module", true);
+    chain.plugin("esm-library").use(new rspack.experiments.EsmLibraryPlugin());
+    chain.optimization.set("runtimeChunk", "single");
+  } else {
+    applyModuleConfig(chain);
+  }
+}

package/dist/module-link/index.d.ts

@@ -0,0 +1,4 @@
+import type RspackChain from 'rspack-chain';
+import type { ModuleLinkPluginOptions } from './types';
+export declare function initModuleLink(chain: RspackChain, options: ModuleLinkPluginOptions): void;
+export type { ModuleLinkPluginOptions } from './types';

package/dist/module-link/index.mjs

@@ -0,0 +1,8 @@
+import { applyChainConfig1 } from "./config1.mjs";
+import { ManifestPlugin } from "./manifest-plugin.mjs";
+import { parseOptions } from "./parse.mjs";
+export function initModuleLink(chain, options) {
+  const opts = parseOptions(options);
+  applyChainConfig1(chain, opts);
+  chain.plugin("module-link-manifest").use(ManifestPlugin, [opts]);
+}

package/dist/module-link/manifest-plugin.d.ts

@@ -0,0 +1,14 @@
+import type { Compiler, StatsCompilation } from '@rspack/core';
+import type { ManifestJsonExports, ParsedModuleLinkPluginOptions } from './types';
+export declare const RSPACK_PLUGIN_NAME = "rspack-module-link-plugin";
+export declare class ManifestPlugin {
+    private opts;
+    constructor(opts: ParsedModuleLinkPluginOptions);
+    apply(compiler: Compiler): void;
+}
+export declare function getExports(opts: ParsedModuleLinkPluginOptions, stats: StatsCompilation): ManifestJsonExports;
+export declare function generateIdentifier({ root, name, filePath }: {
+    root: string;
+    name: string;
+    filePath: string;
+}): string;

package/dist/module-link/manifest-plugin.mjs

@@ -0,0 +1,141 @@
+import upath from "upath";
+export const RSPACK_PLUGIN_NAME = "rspack-module-link-plugin";
+export class ManifestPlugin {
+  constructor(opts) {
+    this.opts = opts;
+  }
+  apply(compiler) {
+    const opts = this.opts;
+    const { Compilation } = compiler.rspack;
+    compiler.hooks.thisCompilation.tap(
+      RSPACK_PLUGIN_NAME,
+      (compilation) => {
+        let manifestJson = {
+          name: opts.name,
+          exports: {},
+          scopes: opts.scopes,
+          files: [],
+          chunks: {}
+        };
+        compilation.hooks.processAssets.tap(
+          {
+            name: RSPACK_PLUGIN_NAME,
+            stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL
+          },
+          (assets) => {
+            const stats = compilation.getStats().toJson({
+              hash: true,
+              entrypoints: true
+            });
+            const exports = getExports(opts, stats);
+            const resources = Object.keys(assets).map(transFileName).filter((file) => !file.includes("hot-update"));
+            manifestJson = {
+              name: opts.name,
+              exports,
+              scopes: opts.scopes,
+              files: resources,
+              chunks: getChunks(opts, compilation)
+            };
+            const { RawSource } = compiler.rspack.sources;
+            compilation.emitAsset(
+              "manifest.json",
+              new RawSource(JSON.stringify(manifestJson, null, 4))
+            );
+          }
+        );
+        if (opts.injectChunkName) {
+          compilation.hooks.processAssets.tap(
+            {
+              name: RSPACK_PLUGIN_NAME,
+              stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS
+            },
+            (assets) => {
+              const { RawSource } = compiler.rspack.sources;
+              for (const [key, value] of Object.entries(
+                manifestJson.chunks
+              )) {
+                const asset = assets[value.js];
+                if (!asset) {
+                  return;
+                }
+                const source = new RawSource(
+                  `import.meta.chunkName = import.meta.chunkName ?? ${JSON.stringify(key)};
+${asset.source()}`
+                );
+                compilation.updateAsset(value.js, source);
+              }
+            }
+          );
+        }
+      }
+    );
+  }
+}
+function transFileName(fileName) {
+  return fileName.replace(/^.\//, "");
+}
+export function getExports(opts, stats) {
+  const entrypoints = stats.entrypoints || {};
+  const exports = {};
+  for (const [key, value] of Object.entries(entrypoints)) {
+    const asset = value.assets?.find((item) => {
+      return item.name.endsWith(opts.ext) && item.name.startsWith(key) && !item.name.includes("hot-update");
+    });
+    if (!asset) continue;
+    if (key in opts.exports) {
+      exports[key] = {
+        ...opts.exports[key],
+        file: asset.name
+      };
+    }
+  }
+  return exports;
+}
+function getChunks(opts, compilation) {
+  const stats = compilation.getStats().toJson({
+    all: false,
+    chunks: true,
+    modules: true,
+    chunkModules: true,
+    ids: true
+  });
+  const buildChunks = {};
+  if (!stats.chunks) return buildChunks;
+  for (const chunk of stats.chunks) {
+    const module = chunk.modules?.sort((a, b) => {
+      return (a.index ?? -1) - (b?.index ?? -1);
+    })?.find((module2) => {
+      return module2.moduleType?.includes("javascript/");
+    });
+    if (!module?.nameForCondition) continue;
+    const js = chunk.files?.find((file) => file.endsWith(opts.ext));
+    if (!js) continue;
+    const root = compilation.options.context ?? process.cwd();
+    const name = generateIdentifier({
+      root,
+      name: opts.name,
+      filePath: module.nameForCondition
+    });
+    const css = chunk.files?.filter((file) => file.endsWith(".css")) ?? [];
+    const resources = chunk.auxiliaryFiles ?? [];
+    buildChunks[name] = {
+      name,
+      js,
+      css,
+      resources
+    };
+  }
+  return buildChunks;
+}
+export function generateIdentifier({
+  root,
+  name,
+  filePath
+}) {
+  const unixFilePath = upath.toUnix(filePath);
+  if (!root) {
+    return `${name}@${unixFilePath}`;
+  }
+  const file = upath.relative(upath.toUnix(root), unixFilePath);
+  return `${name}@${file}`;
+}

package/dist/module-link/parse.d.ts

@@ -0,0 +1,2 @@
+import type { ModuleLinkPluginOptions, ParsedModuleLinkPluginOptions } from './types';
+export declare function parseOptions(options: ModuleLinkPluginOptions): ParsedModuleLinkPluginOptions;

package/dist/module-link/parse.mjs

@@ -0,0 +1,24 @@
+export function parseOptions(options) {
+  const exports = {};
+  if (options.exports) {
+    for (const [name, item] of Object.entries(options.exports)) {
+      exports[name] = {
+        name,
+        pkg: !!item.pkg,
+        file: item.file,
+        identifier: `${options.name}/${name}`
+      };
+    }
+  }
+  const deps = (options.deps ?? []).filter((name) => name !== options.name);
+  return {
+    name: options.name,
+    ext: options.ext ? `.${options.ext}` : ".mjs",
+    exports,
+    imports: options.imports ?? {},
+    scopes: options.scopes ?? {},
+    injectChunkName: options.injectChunkName ?? false,
+    preEntries: options.preEntries ?? [],
+    deps
+  };
+}

package/dist/module-link/types.d.ts

@@ -0,0 +1,25 @@
+import type { ManifestJsonExports } from '@esmx/core';
+export type { ManifestJson, ManifestJsonChunk, ManifestJsonChunks, ManifestJsonExport, ManifestJsonExports } from '@esmx/core';
+export interface ModuleLinkPluginOptions {
+    name: string;
+    ext?: string;
+    imports?: Record<string, string>;
+    scopes?: Record<string, Record<string, string>>;
+    exports?: Record<string, {
+        pkg?: boolean;
+        file: string;
+    }>;
+    injectChunkName?: boolean;
+    preEntries?: string[];
+    deps?: string[];
+}
+export interface ParsedModuleLinkPluginOptions {
+    name: string;
+    ext: string;
+    exports: ManifestJsonExports;
+    imports: Record<string, string>;
+    scopes: Record<string, Record<string, string>>;
+    injectChunkName: boolean;
+    preEntries: string[];
+    deps: string[];
+}