@esmx/rspack 3.0.0-rc.117 → 3.0.0-rc.118

package/README.md

@@ -32,7 +32,7 @@
 - **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
+- **SSR Support** - Built-in SSR support for easy isomorphic application building
 - **Developer Experience** - Supports hot reload, intelligent hints, and TypeScript
 
 ## 📦 Installation
@@ -48,6 +48,20 @@ pnpm add @esmx/rspack -D
 yarn add @esmx/rspack -D
 ```
 
+## 🚀 Quick Start
+
+Use it from your `entry.node.ts`:
+
+```typescript
+import type { EsmxOptions } from '@esmx/core';
+
+export default {
+  async devApp(esmx) {
+    return import('@esmx/rspack').then((m) => m.createRspackHtmlApp(esmx));
+  }
+} satisfies EsmxOptions;
+```
+
 ## 📚 Documentation
 
 Visit the [official documentation](https://esmx.dev/api/app/rspack.html) for detailed usage guides and API reference.

package/README.zh-CN.md

@@ -29,11 +29,11 @@
 
 ## 🚀 特性
 
-- **高性能构建** - 基于 Rspack 的极速构建，为应用提供卓越的开发体验
-- **应用支持** - 完整支持标准应用和 HTML 应用的开发与构建
+- **高性能构建** - 基于 Rspack 的极速构建，提供卓越的开发体验
+- **应用支持** - 完整支持标准应用与 HTML 应用的开发与构建
 - **资源处理** - 智能处理各类资源，支持 JavaScript、CSS、图片等
-- **SSR 支持** - 内置服务端渲染支持，轻松构建同构应用
-- **开发体验** - 支持热更新、智能提示和 TypeScript
+- **SSR 支持** - 内置 SSR 支持，轻松构建同构应用
+- **开发体验** - 支持热更新、智能提示与 TypeScript
 
 ## 📦 安装
 
@@ -48,6 +48,20 @@ pnpm add @esmx/rspack -D
 yarn add @esmx/rspack -D
 ```
 
+## 🚀 快速开始
+
+在 `entry.node.ts` 中使用：
+
+```typescript
+import type { EsmxOptions } from '@esmx/core';
+
+export default {
+  async devApp(esmx) {
+    return import('@esmx/rspack').then((m) => m.createRspackHtmlApp(esmx));
+  }
+} satisfies EsmxOptions;
+```
+
 ## 📚 文档
 
 访问[官方文档](https://esmx.dev/api/app/rspack.html)获取详细的使用指南和 API 参考。

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

@@ -1,4 +1,4 @@
-import type RspackChain from 'rspack-chain';
+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;

package/dist/module-link/config.mjs

@@ -40,9 +40,11 @@ function createExternalsFunction(opts, compilerContext) {
           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);
+          if (value.file) {
+            const resolvedPath = await resolvePath(value.file);
+            if (resolvedPath) {
+              importMap.set(resolvedPath, identifier);
+            }
           }
         })
       );
@@ -72,9 +74,11 @@ function createExternalsFunction(opts, compilerContext) {
     return importName || null;
   };
   const FILE_EXT_REGEX = /\.worker\.(js|mjs|cjs|jsx|mjsx|cjsx|ts|mts|cts|tsx|mtsx|ctsx)$/i;
+  const wrapperFiles = new Set(opts.wrapperFiles);
   return async (data) => {
     if (!data.request || !data.context || !data.contextInfo?.issuer || FILE_EXT_REGEX.test(data.contextInfo.issuer))
       return;
+    if (wrapperFiles.has(data.contextInfo.issuer)) return;
     const defaultContext = compilerContext;
     const resolvePath = async (request, context = defaultContext) => {
       if (!data.getResolve) {

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

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

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

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

package/dist/module-link/index.mjs

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

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

@@ -1,12 +1,32 @@
 import type { Compiler, StatsCompilation } from '@rspack/core';
-import type { ManifestJsonExports, ParsedModuleLinkPluginOptions } from './types';
+import type { ManifestJsonChunks, ManifestJsonExports, ParsedModuleLinkPluginOptions } from './types';
 export declare const RSPACK_PLUGIN_NAME = "rspack-module-link-plugin";
 export declare class ManifestPlugin {
     private opts;
-    constructor(opts: ParsedModuleLinkPluginOptions);
+    constructor(opts: ParsedModuleLinkPluginOptions, isProduction: boolean);
     apply(compiler: Compiler): void;
 }
 export declare function getExports(opts: ParsedModuleLinkPluginOptions, stats: StatsCompilation): ManifestJsonExports;
+/**
+ * Build the `chunks` section of the federation manifest from rspack stats.
+ *
+ * Each emitted chunk that owns at least one JS module gets a manifest entry
+ * keyed by a stable, root-relative identifier (`<remote>@<source-path>`). The
+ * entry lists:
+ *
+ *   - `js`   — the chunk's primary JS asset
+ *   - `css`  — every `.css` file the chunk emitted; consumed by the host's
+ *              renderHost to inject `<link rel="stylesheet">` into `<head>`
+ *              (G5). This is how `import './x.css'` in a remote translates
+ *              into stylesheet delivery in the browser without the runtime
+ *              having to evaluate CSS as JS.
+ *   - `resources` — auxiliary assets (sourcemaps, images, fonts) so the host
+ *              can preload / fingerprint them.
+ *
+ * Pure function over stats + root path — kept testable without booting a
+ * real rspack build.
+ */
+export declare function getChunks(opts: ParsedModuleLinkPluginOptions, stats: StatsCompilation, root: string): ManifestJsonChunks;
 export declare function generateIdentifier({ root, name, filePath }: {
     root: string;
     name: string;

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

@@ -1,7 +1,8 @@
+import { buildManifestProtocolFields } from "@esmx/core";
 import upath from "upath";
 export const RSPACK_PLUGIN_NAME = "rspack-module-link-plugin";
 export class ManifestPlugin {
-  constructor(opts) {
+  constructor(opts, isProduction) {
     this.opts = opts;
   }
   apply(compiler) {
@@ -11,6 +12,10 @@ export class ManifestPlugin {
       RSPACK_PLUGIN_NAME,
       (compilation) => {
         let manifestJson = {
+          ...buildManifestProtocolFields(
+            compiler.options.context ?? process.cwd(),
+            []
+          ),
           name: opts.name,
           exports: {},
           scopes: opts.scopes,
@@ -29,12 +34,26 @@ export class ManifestPlugin {
             });
             const exports = getExports(opts, stats);
             const resources = Object.keys(assets).map(transFileName).filter((file) => !file.includes("hot-update"));
+            const chunksStats = compilation.getStats().toJson({
+              all: false,
+              chunks: true,
+              modules: true,
+              chunkModules: true,
+              ids: true,
+              entrypoints: true,
+              chunkRelations: true
+            });
+            const root = compilation.options.context ?? process.cwd();
             manifestJson = {
+              ...buildManifestProtocolFields(
+                root,
+                Object.values(exports).filter((exp) => exp.pkg).map((exp) => exp.name)
+              ),
               name: opts.name,
               exports,
               scopes: opts.scopes,
               files: resources,
-              chunks: getChunks(opts, compilation)
+              chunks: getChunks(opts, chunksStats, root)
             };
             const { RawSource } = compiler.rspack.sources;
             compilation.emitAsset(
@@ -91,26 +110,14 @@ export function getExports(opts, stats) {
   }
   return exports;
 }
-function getChunks(opts, compilation) {
-  const stats = compilation.getStats().toJson({
-    all: false,
-    chunks: true,
-    modules: true,
-    chunkModules: true,
-    ids: true
-  });
+export function getChunks(opts, stats, root) {
   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/");
-    });
+    const module = pickPrimaryJsModule(chunk);
     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,
@@ -127,6 +134,9 @@ function getChunks(opts, compilation) {
   }
   return buildChunks;
 }
+function pickPrimaryJsModule(chunk) {
+  return chunk.modules?.sort((a, b) => (a.index ?? -1) - (b?.index ?? -1))?.find((module) => module.moduleType?.includes("javascript/"));
+}
 export function generateIdentifier({
   root,
   name,

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,195 @@
+import { describe, expect, it } from "vitest";
+import { generateIdentifier, getChunks, getExports } from "./manifest-plugin.mjs";
+const baseOpts = {
+  name: "remote",
+  exports: {},
+  imports: {},
+  scopes: {},
+  ext: ".mjs",
+  deps: [],
+  preEntries: [],
+  wrapperFiles: [],
+  injectChunkName: false
+};
+const ROOT = "/abs/project";
+function mkChunk(o) {
+  return {
+    files: o.files ?? [],
+    auxiliaryFiles: o.auxiliaryFiles ?? [],
+    modules: (o.modules ?? []).map((m, i) => ({
+      id: i,
+      index: m.index ?? i,
+      nameForCondition: m.nameForCondition,
+      moduleType: m.moduleType ?? "javascript/auto"
+    }))
+  };
+}
+describe("getChunks \u2014 CSS extraction", () => {
+  it("populates css[] when a chunk emitted .css files", () => {
+    const stats = {
+      chunks: [
+        mkChunk({
+          files: [
+            "src/entry.client.95f6085b.final.mjs",
+            "src/entry.client.a73d6772.final.css"
+          ],
+          modules: [
+            {
+              nameForCondition: `${ROOT}/src/entry.client.ts`,
+              moduleType: "javascript/auto"
+            }
+          ]
+        })
+      ]
+    };
+    const chunks = getChunks(baseOpts, stats, ROOT);
+    const entry = chunks["remote@src/entry.client.ts"];
+    expect(entry).toBeDefined();
+    expect(entry.js).toBe("src/entry.client.95f6085b.final.mjs");
+    expect(entry.css).toEqual(["src/entry.client.a73d6772.final.css"]);
+  });
+  it("returns empty css[] when chunk has no stylesheet", () => {
+    const stats = {
+      chunks: [
+        mkChunk({
+          files: ["vue.b8a9c2d3.final.mjs"],
+          modules: [
+            {
+              nameForCondition: `${ROOT}/node_modules/vue/index.mjs`,
+              moduleType: "javascript/esm"
+            }
+          ]
+        })
+      ]
+    };
+    const entry = getChunks(baseOpts, stats, ROOT)["remote@node_modules/vue/index.mjs"];
+    expect(entry).toBeDefined();
+    expect(entry.css).toEqual([]);
+  });
+  it("extracts multiple CSS chunks per JS chunk (split stylesheets)", () => {
+    const stats = {
+      chunks: [
+        mkChunk({
+          files: [
+            "chunks/widget.111.final.mjs",
+            "chunks/widget.111.final.css",
+            "chunks/widget.111.theme.css"
+          ],
+          modules: [
+            {
+              nameForCondition: `${ROOT}/src/widget.ts`,
+              moduleType: "javascript/esm"
+            }
+          ]
+        })
+      ]
+    };
+    const entry = getChunks(baseOpts, stats, ROOT)["remote@src/widget.ts"];
+    expect(entry.css).toEqual([
+      "chunks/widget.111.final.css",
+      "chunks/widget.111.theme.css"
+    ]);
+  });
+  it("ignores chunks without a JS module (CSS-only / asset-only)", () => {
+    const stats = {
+      chunks: [
+        mkChunk({
+          files: ["orphan.111.final.css"],
+          modules: []
+        })
+      ]
+    };
+    expect(getChunks(baseOpts, stats, ROOT)).toEqual({});
+  });
+  it("respects opts.ext for the JS file lookup (.cjs / .js / .mjs)", () => {
+    const stats = {
+      chunks: [
+        mkChunk({
+          files: ["src/x.111.js", "src/x.111.css"],
+          modules: [
+            {
+              nameForCondition: `${ROOT}/src/x.ts`,
+              moduleType: "javascript/auto"
+            }
+          ]
+        })
+      ]
+    };
+    const chunks = getChunks({ ...baseOpts, ext: ".js" }, stats, ROOT);
+    expect(chunks["remote@src/x.ts"].js).toBe("src/x.111.js");
+    expect(chunks["remote@src/x.ts"].css).toEqual(["src/x.111.css"]);
+  });
+  it("writes auxiliaryFiles (sourcemaps, images) into resources[]", () => {
+    const stats = {
+      chunks: [
+        mkChunk({
+          files: ["src/a.111.mjs"],
+          auxiliaryFiles: ["src/a.111.mjs.map", "assets/logo.svg"],
+          modules: [
+            {
+              nameForCondition: `${ROOT}/src/a.ts`,
+              moduleType: "javascript/esm"
+            }
+          ]
+        })
+      ]
+    };
+    const entry = getChunks(baseOpts, stats, ROOT)["remote@src/a.ts"];
+    expect(entry.resources).toEqual([
+      "src/a.111.mjs.map",
+      "assets/logo.svg"
+    ]);
+  });
+  it("returns {} when stats has no chunks at all", () => {
+    expect(getChunks(baseOpts, {}, ROOT)).toEqual({});
+  });
+});
+describe("generateIdentifier", () => {
+  it("normalises absolute path to root-relative POSIX form", () => {
+    expect(
+      generateIdentifier({
+        root: "/abs/project",
+        name: "remote",
+        filePath: "/abs/project/src/entry.client.ts"
+      })
+    ).toBe("remote@src/entry.client.ts");
+  });
+  it("falls back to absolute path when no root provided", () => {
+    expect(
+      generateIdentifier({
+        root: "",
+        name: "remote",
+        filePath: "/abs/project/src/x.ts"
+      })
+    ).toBe("remote@/abs/project/src/x.ts");
+  });
+});
+describe("getExports", () => {
+  it("binds export entries to their hashed asset filenames", () => {
+    const opts = {
+      ...baseOpts,
+      exports: {
+        "src/entry.client": {
+          name: "src/entry.client",
+          file: "./src/entry.client",
+          pkg: false,
+          identifier: "remote/src/entry.client"
+        }
+      }
+    };
+    const stats = {
+      entrypoints: {
+        "src/entry.client": {
+          chunks: [],
+          assets: [
+            { name: "src/entry.client.95f6085b.final.mjs" }
+          ]
+        }
+      }
+    };
+    const out = getExports(opts, stats);
+    expect(out["src/entry.client"].file).toBe(
+      "src/entry.client.95f6085b.final.mjs"
+    );
+  });
+});

package/dist/module-link/parse.mjs

@@ -19,6 +19,7 @@ export function parseOptions(options) {
     scopes: options.scopes ?? {},
     injectChunkName: options.injectChunkName ?? false,
     preEntries: options.preEntries ?? [],
-    deps
+    deps,
+    wrapperFiles: options.wrapperFiles ?? []
   };
 }

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

@@ -12,6 +12,15 @@ export interface ModuleLinkPluginOptions {
     injectChunkName?: boolean;
     preEntries?: string[];
     deps?: string[];
+    /**
+     * Absolute paths of pkg-export wrapper files (one per pkg export). When
+     * the externals function sees an import whose issuer is one of these
+     * wrappers, it skips externalization — the wrapper IS the federation
+     * chunk for that package, so externalizing its inner
+     * `import __m from '<pkg-path>'` would route back to the wrapper itself
+     * (cyclic).
+     */
+    wrapperFiles?: string[];
 }
 export interface ParsedModuleLinkPluginOptions {
     name: string;
@@ -22,4 +31,5 @@ export interface ParsedModuleLinkPluginOptions {
     injectChunkName: boolean;
     preEntries: string[];
     deps: string[];
+    wrapperFiles: string[];
 }

package/dist/rspack/app.d.ts

@@ -76,7 +76,7 @@ export interface RspackAppChainContext {
      * rspack-chain configuration object.
      * You can use the chain API in chain hooks to modify the configuration.
      */
-    chain: import('rspack-chain').default;
+    chain: import('rspack-chain').RspackChain;
     /**
      * Options object passed when creating the application.
      */

package/dist/rspack/app.mjs

@@ -1,3 +1,6 @@
+import crypto from "node:crypto";
+import fs from "node:fs/promises";
+import path from "node:path";
 import { pathToFileURL } from "node:url";
 import {
   createApp,
@@ -29,10 +32,12 @@ async function createMiddleware(esmx, options = {}) {
   if (esmx.command !== esmx.COMMAND.dev) {
     return [];
   }
-  const rsBuild = createRsBuild([
-    generateBuildConfig(esmx, options, "client"),
-    generateBuildConfig(esmx, options, "server")
-  ]);
+  const rsBuild = createRsBuild(
+    await Promise.all([
+      generateBuildConfig(esmx, options, "client"),
+      generateBuildConfig(esmx, options, "server")
+    ])
+  );
   rsBuild.watch();
   const hot = hotMiddleware(rsBuild.compilers[0], {
     path: `${esmx.basePath}hot-middleware`
@@ -46,7 +51,7 @@ async function createMiddleware(esmx, options = {}) {
     }
   ];
 }
-function generateBuildConfig(esmx, options, buildTarget) {
+async function generateBuildConfig(esmx, options, buildTarget) {
   return createRspackConfig(esmx, buildTarget, options);
 }
 function rewriteRender(esmx) {
@@ -74,11 +79,18 @@ function rewriteBuild(esmx, options = {}) {
   }
   return async () => {
     const ok = await createRsBuild(
-      targets.map((target) => generateBuildConfig(esmx, options, target))
+      await Promise.all(
+        targets.map(
+          (target) => generateBuildConfig(esmx, options, target)
+        )
+      )
     ).build();
     if (!ok) {
       return false;
     }
+    if (esmx.isProd) {
+      await updateManifestIntegrity(esmx);
+    }
     esmx.writeSync(
       esmx.resolvePath("dist/index.mjs"),
       `
@@ -100,3 +112,36 @@ start();
     return pack(esmx);
   };
 }
+async function updateManifestIntegrity(esmx) {
+  const clientDir = esmx.resolvePath("dist/client");
+  const manifestPath = path.join(clientDir, "manifest.json");
+  const manifestExists = await fs.access(manifestPath).then(() => true).catch(() => false);
+  if (!manifestExists) {
+    console.warn(
+      `SRI generation skipped: client manifest not found at ${manifestPath}`
+    );
+    return;
+  }
+  const manifestContent = await fs.readFile(manifestPath, "utf-8");
+  const manifest = JSON.parse(manifestContent);
+  const integrity = {};
+  async function walkDir(dir, relativeDir = "") {
+    const entries = await fs.readdir(dir, { withFileTypes: true });
+    for (const entry of entries) {
+      const fullPath = path.join(dir, entry.name);
+      const relativePath = relativeDir ? `${relativeDir}/${entry.name}` : entry.name;
+      if (entry.isDirectory()) {
+        await walkDir(fullPath, relativePath);
+      } else if (entry.isFile() && (entry.name.endsWith(".mjs") || entry.name.endsWith(".js")) && !entry.name.includes("hot-update") && entry.name !== "manifest.json") {
+        const content = await fs.readFile(fullPath);
+        const hash = crypto.createHash("sha384").update(content).digest("base64");
+        integrity[relativePath] = `sha384-${hash}`;
+      }
+    }
+  }
+  await walkDir(clientDir);
+  if (Object.keys(integrity).length > 0) {
+    manifest.integrity = integrity;
+    await fs.writeFile(manifestPath, JSON.stringify(manifest, null, 4));
+  }
+}

package/dist/rspack/chain-config.d.ts

@@ -1,7 +1,7 @@
 import type { Esmx } from '@esmx/core';
 import type { RspackOptions } from '@rspack/core';
-import RspackChain from 'rspack-chain';
+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;
+export declare function createChainConfig(esmx: Esmx, buildTarget: BuildTarget, options: RspackAppOptions): Promise<RspackChain>;
+export declare function createRspackConfig(esmx: Esmx, buildTarget: BuildTarget, options: RspackAppOptions): Promise<RspackOptions>;