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

package/dist/rspack/chain-config.mjs

@@ -1,8 +1,11 @@
+import path from "node:path";
+import { buildPkgWrapper } from "@esmx/pkg-wrapper";
 import { rspack } from "@rspack/core";
-import RspackChain from "rspack-chain";
+import { RspackChain } from "rspack-chain";
+import RspackVirtualModulePlugin from "rspack-plugin-virtual-module";
 import nodeExternals from "webpack-node-externals";
 import { initModuleLink } from "../module-link/index.mjs";
-export function createChainConfig(esmx, buildTarget, options) {
+export async function createChainConfig(esmx, buildTarget, options) {
   const isHot = buildTarget === "client" && !esmx.isProd;
   const isClient = buildTarget === "client";
   const isServer = buildTarget === "server";
@@ -38,8 +41,7 @@ export function createChainConfig(esmx, buildTarget, options) {
   }
   chain.module.parser.set("javascript", {
     url: isClient ? true : "relative",
-    importMeta: false,
-    strictExportPresence: true
+    importMeta: false
   });
   chain.module.generator.set("asset", {
     emit: isClient
@@ -48,7 +50,7 @@ export function createChainConfig(esmx, buildTarget, options) {
     emit: isClient
   });
   chain.resolve.alias.set(esmx.name, esmx.root);
-  chain.optimization.minimize(options.minimize ?? esmx.isProd).emitOnErrors(true);
+  chain.optimization.minimize(options.minimize ?? esmx.isProd).emitOnErrors(true).runtimeChunk("single");
   chain.externalsPresets({
     web: isClient,
     node: isServer || isNode
@@ -63,31 +65,39 @@ export function createChainConfig(esmx, buildTarget, options) {
       })
     ]);
   }
-  chain.experiments({
-    ...chain.get("experiments") || {},
-    outputModule: true,
-    nativeWatcher: true,
-    rspackFuture: {
-      bundlerInfo: { force: false }
-    }
-  });
+  chain.output.set("module", true);
+  chain.output.bundlerInfo({ force: false });
+  chain.set("nativeWatcher", true);
   chain.set("lazyCompilation", false);
-  initModuleLink(chain, createModuleLinkConfig(esmx, buildTarget));
+  const { linkOpts, virtualModules } = await createModuleLinkConfig(
+    esmx,
+    buildTarget
+  );
+  if (Object.keys(virtualModules).length > 0) {
+    chain.plugin("esmx-pkg-virtual-modules").use(RspackVirtualModulePlugin, [
+      virtualModules,
+      `.esmx-virtual-${esmx.name}`
+    ]);
+  }
+  initModuleLink(chain, linkOpts, esmx.isProd);
   return chain;
 }
-function createModuleLinkConfig(esmx, buildTarget) {
+async 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": {
-          pkg: false,
-          file: "./src/entry.node"
+      linkOpts: {
+        name: esmx.name,
+        exports: {
+          "src/entry.node": {
+            pkg: false,
+            file: "./src/entry.node"
+          }
         }
-      }
+      },
+      virtualModules: {}
     };
   }
   const preEntries = [];
@@ -96,16 +106,45 @@ function createModuleLinkConfig(esmx, buildTarget) {
       `${import.meta.resolve("webpack-hot-middleware/client.js")}?path=/${esmx.name}/hot-middleware`
     );
   }
+  const env = esmx.moduleConfig.environments[buildTarget];
+  const patchedExports = {};
+  const virtualModules = {};
+  const wrapperFiles = [];
+  const virtualBaseDir = path.join(
+    esmx.root,
+    "node_modules",
+    `.esmx-virtual-${esmx.name}`
+  );
+  for (const [name, exp] of Object.entries(env.exports)) {
+    if (exp.pkg && exp.file) {
+      const { source } = await buildPkgWrapper({
+        root: esmx.root,
+        spec: exp.file
+      });
+      const safeName = `${exp.file.replace(/[^A-Za-z0-9_-]/g, "_")}.mjs`;
+      virtualModules[safeName] = source;
+      const actualPath = path.join(virtualBaseDir, safeName);
+      wrapperFiles.push(actualPath);
+      patchedExports[name] = { ...exp, file: actualPath };
+    } else {
+      patchedExports[name] = exp;
+    }
+  }
   return {
-    ...esmx.moduleConfig.environments[buildTarget],
-    name: esmx.name,
-    injectChunkName: isServer,
-    deps: Object.keys(esmx.moduleConfig.links),
-    preEntries
+    linkOpts: {
+      ...env,
+      exports: patchedExports,
+      name: esmx.name,
+      injectChunkName: isServer,
+      deps: Object.keys(esmx.moduleConfig.links),
+      preEntries,
+      wrapperFiles
+    },
+    virtualModules
   };
 }
-export function createRspackConfig(esmx, buildTarget, options) {
-  const chain = createChainConfig(esmx, buildTarget, options);
+export async function createRspackConfig(esmx, buildTarget, options) {
+  const chain = await createChainConfig(esmx, buildTarget, options);
   options.chain?.({ esmx, options, buildTarget, chain });
   const config = chain.toConfig();
   options.config?.({ esmx, options, buildTarget, config });

package/dist/rspack-html/index.mjs

@@ -89,7 +89,7 @@ function configureOptimization(chain, options) {
     {
       minimizerOptions: {
         targets: getTargetSetting(options?.target, "client"),
-        errorRecovery: false
+        errorRecovery: true
       }
     }
   ]);
@@ -139,14 +139,7 @@ function configureCssInJS(chain, esmx, options) {
   lessRule.type("javascript/auto");
 }
 function configureCssExtract(chain, options) {
-  chain.set("experiments", {
-    ...chain.get("experiments") ?? {},
-    css: true
-  });
-  const experiments = chain.get("experiments");
-  if (!experiments || !experiments.css) {
-    return;
-  }
+  chain.module.rule("css").test(/\.css$/).type("css/auto");
   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(

package/package.json

@@ -63,35 +63,37 @@
         }
     },
     "dependencies": {
-        "@esmx/import": "3.0.0-rc.117",
+        "@esmx/import": "3.0.0-rc.118",
+        "@esmx/pkg-wrapper": "3.0.0-rc.118",
         "@npmcli/arborist": "^9.1.6",
-        "@rspack/core": "1.7.5",
+        "@rspack/core": "^2.0.6",
         "css-loader": "^7.1.2",
         "less-loader": "^12.3.0",
         "node-polyfill-webpack-plugin": "^4.1.0",
         "pacote": "^21.0.0",
-        "rspack-chain": "^1.4.3",
+        "rspack-chain": "^2.0.2",
+        "rspack-plugin-virtual-module": "^1.0.1",
         "style-loader": "^4.0.0",
         "style-resources-loader": "^1.5.0",
         "upath": "^2.0.1",
         "webpack-hot-middleware": "^2.26.1",
         "webpack-node-externals": "~3.0.0",
-        "worker-rspack-loader": "^3.1.2"
+        "worker-rspack-loader": "^3.1.5"
     },
     "devDependencies": {
         "@biomejs/biome": "2.3.7",
-        "@esmx/core": "3.0.0-rc.117",
+        "@esmx/core": "3.0.0-rc.118",
         "@types/node": "^24.0.0",
         "@types/npmcli__arborist": "^6.3.1",
         "@types/pacote": "^11.1.8",
         "@types/webpack-hot-middleware": "^2.25.12",
         "@types/webpack-node-externals": "^3.0.4",
-        "@vitest/coverage-v8": "3.2.4",
+        "@vitest/coverage-v8": "3.2.6",
         "typescript": "5.9.3",
         "unbuild": "3.6.1",
-        "vitest": "3.2.4"
+        "vitest": "3.2.6"
     },
-    "version": "3.0.0-rc.117",
+    "version": "3.0.0-rc.118",
     "type": "module",
     "private": false,
     "exports": {
@@ -110,5 +112,8 @@
         "template",
         "public"
     ],
-    "gitHead": "c8470bb917221494ee36f0c4ec1cd03560b01f4c"
+    "gitHead": "2fdbd62470f64e6e45568550941c78cb259e4917",
+    "publishConfig": {
+        "access": "public"
+    }
 }

package/src/module-link/config.ts

@@ -1,5 +1,5 @@
 import type { ExternalItem, ExternalItemFunctionData } from '@rspack/core';
-import type RspackChain from 'rspack-chain';
+import type { RspackChain } from 'rspack-chain';
 import type { ParsedModuleLinkPluginOptions } from './types';
 
 export function applyEntryConfig(
@@ -73,9 +73,11 @@ function createExternalsFunction(
                     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);
+                        }
                     }
                 })
             );
@@ -118,6 +120,8 @@ function createExternalsFunction(
     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: ExternalItemFunctionData) => {
         if (
             !data.request ||
@@ -127,6 +131,11 @@ function createExternalsFunction(
         )
             return;
 
+        // A pkg-export wrapper file IS the federation chunk for its package.
+        // Don't externalize its inner `import __m from '<abs-pkg-path>'` —
+        // that would route back to the wrapper itself (cyclic).
+        if (wrapperFiles.has(data.contextInfo.issuer)) return;
+
         const defaultContext = compilerContext;
         const resolvePath: ResolvePath = async (
             request: string,

package/src/module-link/config1.ts

@@ -1,4 +1,4 @@
-import type RspackChain from 'rspack-chain';
+import type { RspackChain } from 'rspack-chain';
 import {
     applyEntryConfig,
     applyExternalsConfig,

package/src/module-link/index.ts

@@ -1,19 +1,20 @@
-import type RspackChain from 'rspack-chain';
+import type { RspackChain } from 'rspack-chain';
 import { applyChainConfig1 } from './config1';
-// import { applyChainConfig2 } from './config2';
 import { ManifestPlugin } from './manifest-plugin';
 import { parseOptions } from './parse';
 import type { ModuleLinkPluginOptions } from './types';
 
 export function initModuleLink(
     chain: RspackChain,
-    options: ModuleLinkPluginOptions
+    options: ModuleLinkPluginOptions,
+    isProduction = false
 ): void {
     const opts = parseOptions(options);
     applyChainConfig1(chain, opts);
-    // applyChainConfig2(chain, opts);
 
-    chain.plugin('module-link-manifest').use(ManifestPlugin, [opts]);
+    chain
+        .plugin('module-link-manifest')
+        .use(ManifestPlugin, [opts, isProduction]);
 }
 
 export type { ModuleLinkPluginOptions } from './types';

package/src/module-link/manifest-plugin.test.ts

@@ -0,0 +1,227 @@
+import type { StatsCompilation } from '@rspack/core';
+import { describe, expect, it } from 'vitest';
+import { generateIdentifier, getChunks, getExports } from './manifest-plugin';
+import type { ParsedModuleLinkPluginOptions } from './types';
+
+const baseOpts: ParsedModuleLinkPluginOptions = {
+    name: 'remote',
+    exports: {},
+    imports: {},
+    scopes: {},
+    ext: '.mjs',
+    deps: [],
+    preEntries: [],
+    wrapperFiles: [],
+    injectChunkName: false
+};
+
+const ROOT = '/abs/project';
+
+function mkChunk(o: {
+    files?: string[];
+    modules?: Array<{
+        nameForCondition?: string;
+        moduleType?: string;
+        index?: number;
+    }>;
+    auxiliaryFiles?: string[];
+}): NonNullable<StatsCompilation['chunks']>[number] {
+    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'
+        }))
+    } as never;
+}
+
+describe('getChunks — CSS extraction', () => {
+    it('populates css[] when a chunk emitted .css files', () => {
+        const stats: StatsCompilation = {
+            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: StatsCompilation = {
+            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: StatsCompilation = {
+            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: StatsCompilation = {
+            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: StatsCompilation = {
+            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: StatsCompilation = {
+            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: ParsedModuleLinkPluginOptions = {
+            ...baseOpts,
+            exports: {
+                'src/entry.client': {
+                    name: 'src/entry.client',
+                    file: './src/entry.client',
+                    pkg: false,
+                    identifier: 'remote/src/entry.client'
+                }
+            }
+        };
+        const stats: StatsCompilation = {
+            entrypoints: {
+                'src/entry.client': {
+                    chunks: [],
+                    assets: [
+                        { name: 'src/entry.client.95f6085b.final.mjs' } as never
+                    ]
+                } as never
+            }
+        };
+
+        const out = getExports(opts, stats);
+        expect(out['src/entry.client'].file).toBe(
+            'src/entry.client.95f6085b.final.mjs'
+        );
+    });
+});

package/src/module-link/manifest-plugin.ts

@@ -1,4 +1,5 @@
-import type { Compilation, Compiler, StatsCompilation } from '@rspack/core';
+import { buildManifestProtocolFields } from '@esmx/core';
+import type { Compiler, StatsChunk, StatsCompilation } from '@rspack/core';
 import upath from 'upath';
 import type {
     ManifestJson,
@@ -10,7 +11,10 @@ import type {
 export const RSPACK_PLUGIN_NAME = 'rspack-module-link-plugin';
 
 export class ManifestPlugin {
-    constructor(private opts: ParsedModuleLinkPluginOptions) {}
+    constructor(
+        private opts: ParsedModuleLinkPluginOptions,
+        isProduction: boolean
+    ) {}
 
     apply(compiler: Compiler) {
         const opts = this.opts;
@@ -19,6 +23,10 @@ export class ManifestPlugin {
             RSPACK_PLUGIN_NAME,
             (compilation) => {
                 let manifestJson: ManifestJson = {
+                    ...buildManifestProtocolFields(
+                        compiler.options.context ?? process.cwd(),
+                        []
+                    ),
                     name: opts.name,
                     exports: {},
                     scopes: opts.scopes,
@@ -41,12 +49,29 @@ export class ManifestPlugin {
                         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: exports,
                             scopes: opts.scopes,
                             files: resources,
-                            chunks: getChunks(opts, compilation)
+                            chunks: getChunks(opts, chunksStats, root)
                         };
                         const { RawSource } = compiler.rspack.sources;
 
@@ -115,34 +140,40 @@ export function getExports(
     return exports;
 }
 
-function getChunks(
+/**
+ * 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 function getChunks(
     opts: ParsedModuleLinkPluginOptions,
-    compilation: Compilation
-) {
-    const stats = compilation.getStats().toJson({
-        all: false,
-        chunks: true,
-        modules: true,
-        chunkModules: true,
-        ids: true
-    });
+    stats: StatsCompilation,
+    root: string
+): ManifestJsonChunks {
     const buildChunks: ManifestJsonChunks = {};
     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((module) => {
-                return module.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,
@@ -161,6 +192,12 @@ function getChunks(
     return buildChunks;
 }
 
+function pickPrimaryJsModule(chunk: StatsChunk) {
+    return chunk.modules
+        ?.sort((a, b) => (a.index ?? -1) - (b?.index ?? -1))
+        ?.find((module) => module.moduleType?.includes('javascript/'));
+}
+
 export function generateIdentifier({
     root,
     name,

package/src/module-link/parse.ts

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