@nx/react 23.0.0-beta.20 → 23.0.0-beta.22

package/generators.json

@@ -65,14 +65,26 @@
       "schema": "./src/generators/host/schema.json",
       "x-type": "application",
       "description": "Generate a host react application",
-      "aliases": ["consumer"]
+      "x-deprecated": "Use `@nx/react:consumer` instead (dynamic federation, no static-serve orchestration). Removed in Nx v24."
     },
     "remote": {
       "factory": "./src/generators/remote/remote",
       "schema": "./src/generators/remote/schema.json",
       "x-type": "application",
       "description": "Generate a remote react application",
-      "aliases": ["producer"]
+      "x-deprecated": "Use `@nx/react:provider` instead. Removed in Nx v24."
+    },
+    "consumer": {
+      "factory": "./src/generators/consumer/consumer",
+      "schema": "./src/generators/consumer/schema.json",
+      "x-type": "application",
+      "description": "Create a React Module Federation consumer that loads federated components dynamically via an inline PROVIDERS list in src/mf.ts. Supports Vite (default), Rsbuild, and Rspack."
+    },
+    "provider": {
+      "factory": "./src/generators/provider/provider",
+      "schema": "./src/generators/provider/schema.json",
+      "x-type": "application",
+      "description": "Create a React Module Federation provider that exposes a federated component. Supports Vite (default), Rsbuild, and Rspack."
     },
     "cypress-component-configuration": {
       "factory": "./src/generators/cypress-component-configuration/cypress-component-configuration#cypressComponentConfigGenerator",
@@ -96,7 +108,8 @@
       "factory": "./src/generators/federate-module/federate-module#federateModuleGenerator",
       "schema": "./src/generators/federate-module/schema.json",
       "description": "Federate a module.",
-      "hidden": false
+      "hidden": false,
+      "x-deprecated": "The new `@nx/react:provider` generator exposes modules directly. Removed in Nx v24."
     }
   }
 }

package/migrations.json

@@ -4,31 +4,36 @@
       "cli": "nx",
       "version": "20.2.0-beta.2",
       "description": "Update the ModuleFederationConfig import use @nx/module-federation.",
-      "factory": "./src/migrations/update-20-2-0/migrate-mf-imports-to-new-package"
+      "factory": "./src/migrations/update-20-2-0/migrate-mf-imports-to-new-package",
+      "documentation": "./src/migrations/update-20-2-0/migrate-mf-imports-to-new-package.md"
     },
     "update-20-2-0-update-with-module-federation-import": {
       "cli": "nx",
       "version": "20.2.0-beta.2",
       "description": "Update the withModuleFederation import use @nx/module-federation/webpack.",
-      "factory": "./src/migrations/update-20-2-0/migrate-with-mf-import-to-new-package"
+      "factory": "./src/migrations/update-20-2-0/migrate-with-mf-import-to-new-package",
+      "documentation": "./src/migrations/update-20-2-0/migrate-with-mf-import-to-new-package.md"
     },
     "ensure-nx-module-federation-package": {
       "cli": "nx",
       "version": "20.3.0-beta.2",
       "description": "If workspace includes Module Federation projects, ensure the new @nx/module-federation package is installed.",
-      "factory": "./src/migrations/update-20-3-0/ensure-nx-module-federation-package"
+      "factory": "./src/migrations/update-20-3-0/ensure-nx-module-federation-package",
+      "documentation": "./src/migrations/update-20-3-0/ensure-nx-module-federation-package.md"
     },
     "add-mf-env-var-to-target-defaults": {
       "cli": "nx",
       "version": "20.4.0-beta.0",
       "description": "Add NX_MF_DEV_REMOTES to inputs for task hashing when '@nx/webpack:webpack' or '@nx/rspack:rspack' is used for Module Federation.",
-      "factory": "./src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults"
+      "factory": "./src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults",
+      "documentation": "./src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults.md"
     },
     "update-21-0-0-update-babel-loose": {
       "cli": "nx",
       "version": "21.0.0-beta.11",
       "description": "Replaces `classProperties.loose` option with `loose`.",
-      "factory": "./src/migrations/update-21-0-0/update-babel-loose"
+      "factory": "./src/migrations/update-21-0-0/update-babel-loose",
+      "documentation": "./src/migrations/update-21-0-0/update-babel-loose.md"
     },
     "update-22-0-0-add-svgr-to-webpack-config": {
       "cli": "nx",
@@ -40,7 +45,8 @@
       "cli": "nx",
       "version": "23.0.0-beta.10",
       "description": "Rewrites imports of NxReactWebpackPlugin from '@nx/react' to the sub-path '@nx/react/webpack-plugin'.",
-      "factory": "./src/migrations/update-23-0-0/remove-nx-react-webpack-plugin-import"
+      "factory": "./src/migrations/update-23-0-0/remove-nx-react-webpack-plugin-import",
+      "documentation": "./src/migrations/update-23-0-0/remove-nx-react-webpack-plugin-import.md"
     }
   },
   "packageJsonUpdates": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "23.0.0-beta.20",
+  "version": "23.0.0-beta.22",
   "private": false,
   "description": "The React plugin for Nx contains executors and generators for managing React applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Vitest, Playwright, Cypress, and Storybook.\n\n- Generators for applications, libraries, components, hooks, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -37,28 +37,28 @@
     "@svgr/webpack": "^8.0.1",
     "minimatch": "10.2.5",
     "tslib": "^2.3.0",
-    "@nx/devkit": "23.0.0-beta.20",
-    "@nx/js": "23.0.0-beta.20",
-    "@nx/eslint": "23.0.0-beta.20",
-    "@nx/web": "23.0.0-beta.20",
-    "@nx/module-federation": "23.0.0-beta.20",
-    "@nx/rollup": "23.0.0-beta.20",
+    "@nx/devkit": "23.0.0-beta.22",
+    "@nx/js": "23.0.0-beta.22",
+    "@nx/eslint": "23.0.0-beta.22",
+    "@nx/web": "23.0.0-beta.22",
+    "@nx/module-federation": "23.0.0-beta.22",
+    "@nx/rollup": "23.0.0-beta.22",
     "express": "^4.21.2",
     "http-proxy-middleware": "^3.0.5",
     "semver": "^7.6.3"
   },
   "devDependencies": {
-    "@nx/cypress": "23.0.0-beta.20",
-    "@nx/playwright": "23.0.0-beta.20",
-    "@nx/rsbuild": "23.0.0-beta.20",
-    "@nx/vite": "23.0.0-beta.20",
-    "@nx/vitest": "23.0.0-beta.20",
-    "@nx/webpack": "23.0.0-beta.20",
-    "@nx/storybook": "23.0.0-beta.20",
-    "nx": "23.0.0-beta.20"
+    "@nx/cypress": "23.0.0-beta.22",
+    "@nx/playwright": "23.0.0-beta.22",
+    "@nx/rsbuild": "23.0.0-beta.22",
+    "@nx/vite": "23.0.0-beta.22",
+    "@nx/vitest": "23.0.0-beta.22",
+    "@nx/webpack": "23.0.0-beta.22",
+    "@nx/storybook": "23.0.0-beta.22",
+    "nx": "23.0.0-beta.22"
   },
   "optionalDependencies": {
-    "@nx/vite": "23.0.0-beta.20"
+    "@nx/vite": "23.0.0-beta.22"
   },
   "publishConfig": {
     "access": "public"

package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"module-federation-dev-server.impl.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/executors/module-federation-dev-server/module-federation-dev-server.impl.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAU,MAAM,YAAY,CAAC;AAarD,OAAO,EAAE,gCAAgC,EAAE,MAAM,UAAU,CAAC;AAE5D,wBAA+B,yBAAyB,CACtD,MAAM,EAAE,gCAAgC,EACxC,OAAO,EAAE,eAAe,GACvB,qBAAqB,CAAC;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAuG/D"}
+{"version":3,"file":"module-federation-dev-server.impl.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/executors/module-federation-dev-server/module-federation-dev-server.impl.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAU,MAAM,YAAY,CAAC;AAarD,OAAO,EAAE,gCAAgC,EAAE,MAAM,UAAU,CAAC;AAG5D,wBAA+B,yBAAyB,CACtD,MAAM,EAAE,gCAAgC,EACxC,OAAO,EAAE,eAAe,GACvB,qBAAqB,CAAC;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAwG/D"}

package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.js

@@ -12,7 +12,9 @@ const dev_server_impl_1 = tslib_1.__importDefault(require("@nx/webpack/src/execu
 const fs_1 = require("fs");
 const path_1 = require("path");
 const lib_1 = require("./lib");
+const module_federation_deprecation_1 = require("../../utils/module-federation-deprecation");
 async function* moduleFederationDevServer(schema, context) {
+    (0, module_federation_deprecation_1.warnReactMfDevServerExecutorDeprecation)();
     const options = (0, lib_1.normalizeOptions)(schema);
     const currIter = options.static
         ? (0, file_server_impl_1.default)({

package/src/executors/module-federation-dev-server/schema.json

@@ -3,6 +3,7 @@
   "continuous": true,
   "outputCapture": "direct-nodejs",
   "title": "Module Federation Dev Server",
+  "x-deprecated": "The `@nx/react:module-federation-dev-server` executor is deprecated. Dynamic federation in `@nx/react:consumer` removes the need for host-orchestrated remote serving. Removed in Nx v24.",
   "description": "Serve a web application.",
   "cli": "nx",
   "type": "object",

package/src/executors/module-federation-ssr-dev-server/module-federation-ssr-dev-server.impl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"module-federation-ssr-dev-server.impl.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/executors/module-federation-ssr-dev-server/module-federation-ssr-dev-server.impl.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAU,MAAM,YAAY,CAAC;AAYrD,OAAO,EAAE,mCAAmC,EAAE,MAAM,UAAU,CAAC;AAE/D,wBAA+B,4BAA4B,CACzD,mBAAmB,EAAE,mCAAmC,EACxD,OAAO,EAAE,eAAe,iCA4GzB"}
+{"version":3,"file":"module-federation-ssr-dev-server.impl.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/executors/module-federation-ssr-dev-server/module-federation-ssr-dev-server.impl.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAU,MAAM,YAAY,CAAC;AAYrD,OAAO,EAAE,mCAAmC,EAAE,MAAM,UAAU,CAAC;AAG/D,wBAA+B,4BAA4B,CACzD,mBAAmB,EAAE,mCAAmC,EACxD,OAAO,EAAE,eAAe,iCA6GzB"}

package/src/executors/module-federation-ssr-dev-server/module-federation-ssr-dev-server.impl.js

@@ -11,7 +11,9 @@ const ssr_dev_server_impl_1 = tslib_1.__importDefault(require("@nx/webpack/src/e
 const fs_1 = require("fs");
 const path_1 = require("path");
 const lib_1 = require("./lib");
+const module_federation_deprecation_1 = require("../../utils/module-federation-deprecation");
 async function* moduleFederationSsrDevServer(ssrDevServerOptions, context) {
+    (0, module_federation_deprecation_1.warnReactMfSsrDevServerExecutorDeprecation)();
     const options = (0, lib_1.normalizeOptions)(ssrDevServerOptions);
     // TODO(JamesHenry): remove type assertion once the nx repo is updated to use https://github.com/nrwl/nx/pull/33095
     let iter = (0, ssr_dev_server_impl_1.default)(options, context);

package/src/executors/module-federation-ssr-dev-server/schema.json

@@ -3,6 +3,7 @@
   "continuous": true,
   "outputCapture": "direct-nodejs",
   "title": "Module Federation SSR Dev Server",
+  "x-deprecated": "The `@nx/react:module-federation-ssr-dev-server` executor is deprecated. SSR is not first-classed in the new `@nx/react:consumer`/`@nx/react:provider` generators. Removed in Nx v24.",
   "description": "Serve a SSR Consumer (host) application along with its known Producers (remotes).",
   "cli": "nx",
   "type": "object",

package/src/executors/module-federation-static-server/module-federation-static-server.impl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"module-federation-static-server.impl.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/executors/module-federation-static-server/module-federation-static-server.impl.ts"],"names":[],"mappings":"AAaA,OAAO,EAIL,mBAAmB,EACpB,MAAM,iCAAiC,CAAC;AAOzC,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAEhE,OAAO,EAAE,gCAAgC,EAAE,MAAM,wCAAwC,CAAC;AAC1F,OAAO,EAAE,kCAAkC,EAAE,MAAM,UAAU,CAAC;AAgJ9D,wBAAgB,YAAY,CAC1B,mBAAmB,EAAE,mBAAmB,EACxC,gBAAgB,EAAE,gCAAgC,EAClD,oBAAoB,EAAE,MAAM,EAC5B,wBAAwB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAChD,UAAU,CAAC,EAAE;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,QAgEvD;AAED,wBAA+B,4BAA4B,CACzD,MAAM,EAAE,kCAAkC,EAC1C,OAAO,EAAE,eAAe;;;aAiJzB"}
+{"version":3,"file":"module-federation-static-server.impl.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/executors/module-federation-static-server/module-federation-static-server.impl.ts"],"names":[],"mappings":"AAaA,OAAO,EAIL,mBAAmB,EACpB,MAAM,iCAAiC,CAAC;AAQzC,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAEhE,OAAO,EAAE,gCAAgC,EAAE,MAAM,wCAAwC,CAAC;AAC1F,OAAO,EAAE,kCAAkC,EAAE,MAAM,UAAU,CAAC;AAgJ9D,wBAAgB,YAAY,CAC1B,mBAAmB,EAAE,mBAAmB,EACxC,gBAAgB,EAAE,gCAAgC,EAClD,oBAAoB,EAAE,MAAM,EAC5B,wBAAwB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAChD,UAAU,CAAC,EAAE;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,QAgEvD;AAED,wBAA+B,4BAA4B,CACzD,MAAM,EAAE,kCAAkC,EAC1C,OAAO,EAAE,eAAe;;;aAkJzB"}

package/src/executors/module-federation-static-server/module-federation-static-server.impl.js

@@ -10,6 +10,7 @@ const utils_1 = require("@nx/module-federation/src/executors/utils");
 const utils_2 = require("@nx/module-federation/src/utils");
 const file_server_impl_1 = tslib_1.__importDefault(require("@nx/web/src/executors/file-server/file-server.impl"));
 const wait_for_port_open_1 = require("@nx/web/src/utils/wait-for-port-open");
+const module_federation_deprecation_1 = require("../../utils/module-federation-deprecation");
 const child_process_1 = require("child_process");
 const fs_1 = require("fs");
 const path_1 = require("path");
@@ -159,6 +160,7 @@ function startProxies(staticRemotesConfig, hostServeOptions, mappedLocationOfHos
     devkit_1.logger.info('NX Static Consumer (host) proxy started successfully');
 }
 async function* moduleFederationStaticServer(schema, context) {
+    (0, module_federation_deprecation_1.warnReactMfStaticServerExecutorDeprecation)();
     // Force Node to resolve to look for the nx binary that is inside node_modules
     const nxBin = require.resolve('nx/bin/nx');
     // Get the remotes from the module federation config

package/src/executors/module-federation-static-server/schema.json

@@ -3,6 +3,7 @@
   "continuous": true,
   "outputCapture": "direct-nodejs",
   "title": "Module Federation Static Dev Server",
+  "x-deprecated": "The `@nx/react:module-federation-static-server` executor is deprecated. Use `vite preview` / `rsbuild preview` via `nx:run-commands` instead. Removed in Nx v24.",
   "description": "Serve a Consumer (host) application statically along with its Producers (remotes).",
   "cli": "nx",
   "type": "object",

package/src/generators/_utils/mf-dependencies.d.ts

@@ -0,0 +1,8 @@
+import type { SupportedBundler } from './normalize';
+export interface DepsBundle {
+    dependencies: Record<string, string>;
+    devDependencies: Record<string, string>;
+}
+export declare function getProviderDeps(bundler: SupportedBundler): DepsBundle;
+export declare function getConsumerDeps(bundler: SupportedBundler): DepsBundle;
+//# sourceMappingURL=mf-dependencies.d.ts.map

package/src/generators/_utils/mf-dependencies.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mf-dependencies.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/_utils/mf-dependencies.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,MAAM,WAAW,UAAU;IACzB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACzC;AAQD,wBAAgB,eAAe,CAAC,OAAO,EAAE,gBAAgB,GAAG,UAAU,CAarE;AAED,wBAAgB,eAAe,CAAC,OAAO,EAAE,gBAAgB,GAAG,UAAU,CAcrE"}

package/src/generators/_utils/mf-dependencies.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getProviderDeps = getProviderDeps;
+exports.getConsumerDeps = getConsumerDeps;
+const tslib_1 = require("tslib");
+const mfVersions = tslib_1.__importStar(require("./mf-versions"));
+const versions_1 = require("@nx/js/src/utils/versions");
+const versions_2 = require("../../utils/versions");
+// Returned to both surfaces:
+// - addDependenciesToPackageJson(tree, deps, devDeps) writes to root package.json
+//   so bare `vite` / `rsbuild` / `rspack` in the run-commands serve target resolve
+//   in integrated workspaces.
+// - The per-project package.json template uses the same map so a pnpm-workspace
+//   setup (which installs per-project) gets the same versions without drift.
+function getProviderDeps(bundler) {
+    const base = {
+        dependencies: {
+            react: versions_2.reactVersion,
+            'react-dom': versions_2.reactDomVersion,
+        },
+        devDependencies: {
+            '@types/react': versions_2.typesReactVersion,
+            '@types/react-dom': versions_2.typesReactDomVersion,
+            typescript: versions_1.typescriptVersion,
+        },
+    };
+    return mergeWith(base, bundlerDeps(bundler));
+}
+function getConsumerDeps(bundler) {
+    const base = {
+        dependencies: {
+            '@module-federation/runtime': mfVersions.moduleFederationRuntimeVersion,
+            react: versions_2.reactVersion,
+            'react-dom': versions_2.reactDomVersion,
+        },
+        devDependencies: {
+            '@types/react': versions_2.typesReactVersion,
+            '@types/react-dom': versions_2.typesReactDomVersion,
+            typescript: versions_1.typescriptVersion,
+        },
+    };
+    return mergeWith(base, bundlerDeps(bundler));
+}
+function bundlerDeps(bundler) {
+    switch (bundler) {
+        case 'vite':
+            return {
+                dependencies: {},
+                devDependencies: {
+                    '@module-federation/vite': mfVersions.moduleFederationVitePluginVersion,
+                    '@vitejs/plugin-react': mfVersions.vitejsPluginReactVersion,
+                    vite: mfVersions.viteVersion,
+                },
+            };
+        case 'rsbuild':
+            return {
+                dependencies: {},
+                devDependencies: {
+                    '@module-federation/rsbuild-plugin': mfVersions.moduleFederationRsbuildPluginVersion,
+                    '@rsbuild/core': mfVersions.rsbuildCoreVersion,
+                    '@rsbuild/plugin-react': mfVersions.rsbuildPluginReactVersion,
+                },
+            };
+        case 'rspack':
+            // Rspack provider/consumer both put @module-federation/enhanced in
+            // dependencies (it's imported at runtime by the federation plugin call).
+            return {
+                dependencies: {
+                    '@module-federation/enhanced': mfVersions.moduleFederationEnhancedVersion,
+                },
+                devDependencies: {
+                    '@rspack/cli': mfVersions.rspackCliVersion,
+                    '@rspack/core': mfVersions.rspackCoreVersion,
+                    '@rspack/dev-server': mfVersions.rspackDevServerVersion,
+                },
+            };
+    }
+}
+function mergeWith(a, b) {
+    return {
+        dependencies: { ...a.dependencies, ...b.dependencies },
+        devDependencies: { ...a.devDependencies, ...b.devDependencies },
+    };
+}

package/src/generators/_utils/mf-versions.d.ts

@@ -0,0 +1,12 @@
+export declare const moduleFederationEnhancedVersion = "^2.4.0";
+export declare const moduleFederationVitePluginVersion = "^1.15.5";
+export declare const moduleFederationRuntimeVersion = "^2.4.0";
+export declare const viteVersion = "^8.0.13";
+export declare const vitejsPluginReactVersion = "^6.0.2";
+export declare const rsbuildCoreVersion = "^1.4.0";
+export declare const rsbuildPluginReactVersion = "^1.3.0";
+export declare const moduleFederationRsbuildPluginVersion = "^2.5.0";
+export declare const rspackCoreVersion = "^2.0.3";
+export declare const rspackCliVersion = "^2.0.3";
+export declare const rspackDevServerVersion = "2.0.1";
+//# sourceMappingURL=mf-versions.d.ts.map

package/src/generators/_utils/mf-versions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mf-versions.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/_utils/mf-versions.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,+BAA+B,WAAW,CAAC;AACxD,eAAO,MAAM,iCAAiC,YAAY,CAAC;AAC3D,eAAO,MAAM,8BAA8B,WAAW,CAAC;AAGvD,eAAO,MAAM,WAAW,YAAY,CAAC;AACrC,eAAO,MAAM,wBAAwB,WAAW,CAAC;AAGjD,eAAO,MAAM,kBAAkB,WAAW,CAAC;AAC3C,eAAO,MAAM,yBAAyB,WAAW,CAAC;AAIlD,eAAO,MAAM,oCAAoC,WAAW,CAAC;AAG7D,eAAO,MAAM,iBAAiB,WAAW,CAAC;AAC1C,eAAO,MAAM,gBAAgB,WAAW,CAAC;AAIzC,eAAO,MAAM,sBAAsB,UAAU,CAAC"}

package/src/generators/_utils/mf-versions.js

@@ -0,0 +1,29 @@
+"use strict";
+// Module Federation runtime + bundler-specific deps live here. Framework
+// versions (react, react-dom, @types/*, typescript) are owned by @nx/react
+// (../../utils/versions) and @nx/js so each dep has a single source of truth.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rspackDevServerVersion = exports.rspackCliVersion = exports.rspackCoreVersion = exports.moduleFederationRsbuildPluginVersion = exports.rsbuildPluginReactVersion = exports.rsbuildCoreVersion = exports.vitejsPluginReactVersion = exports.viteVersion = exports.moduleFederationRuntimeVersion = exports.moduleFederationVitePluginVersion = exports.moduleFederationEnhancedVersion = void 0;
+// Module Federation runtime packages. Keep `runtime` on the same major as
+// `enhanced` / the `vite` plugin (both pull runtime 2.4.x). A 0.x runtime in
+// the consumer would mismatch the 2.x runtime baked into the providers.
+exports.moduleFederationEnhancedVersion = '^2.4.0';
+exports.moduleFederationVitePluginVersion = '^1.15.5';
+exports.moduleFederationRuntimeVersion = '^2.4.0';
+// Vite stack.
+exports.viteVersion = '^8.0.13';
+exports.vitejsPluginReactVersion = '^6.0.2';
+// Rsbuild stack.
+exports.rsbuildCoreVersion = '^1.4.0';
+exports.rsbuildPluginReactVersion = '^1.3.0';
+// Official MF rsbuild integration. Peers @rsbuild/core ^1.3.21, so the pin
+// above satisfies it. Used instead of @module-federation/enhanced/rspack so
+// the federation config is a first-class rsbuild plugin, not a tools.rspack hack.
+exports.moduleFederationRsbuildPluginVersion = '^2.5.0';
+// Rspack stack.
+exports.rspackCoreVersion = '^2.0.3';
+exports.rspackCliVersion = '^2.0.3';
+// Pinned (no ^) to dodge the broken 2.0.2 publish, which ships no dist/ so
+// @rspack/cli can't load it for `rspack serve`. Re-float to ^ once upstream
+// republishes a fixed 2.0.3+.
+exports.rspackDevServerVersion = '2.0.1';

package/src/generators/_utils/normalize.d.ts

@@ -0,0 +1,20 @@
+import { Tree } from '@nx/devkit';
+export type SupportedBundler = 'vite' | 'rsbuild' | 'rspack';
+export type SupportedSurface = 'consumer' | 'provider';
+export interface NormalizedScaffoldOptions {
+    projectName: string;
+    federationName: string;
+    bundler: SupportedBundler;
+    port: number;
+    projectRoot: string;
+}
+export interface RawScaffoldOptions {
+    directory: string;
+    surface: SupportedSurface;
+    bundler?: SupportedBundler;
+    port?: number;
+}
+export declare function getDefaultPort(bundler: SupportedBundler, surface: SupportedSurface): number;
+export declare function toFederationName(projectName: string): string;
+export declare function normalizeScaffoldOptions(tree: Tree, raw: RawScaffoldOptions): Promise<NormalizedScaffoldOptions>;
+//# sourceMappingURL=normalize.d.ts.map

package/src/generators/_utils/normalize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalize.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/_utils/normalize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,IAAI,EAAE,MAAM,YAAY,CAAC;AAGzC,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC7D,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,UAAU,CAAC;AAevD,MAAM,WAAW,yBAAyB;IACxC,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,cAAc,CAC5B,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,gBAAgB,GACxB,MAAM,CAGR;AAKD,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAe5D;AAED,wBAAsB,wBAAwB,CAC5C,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,kBAAkB,GACtB,OAAO,CAAC,yBAAyB,CAAC,CAYpC"}

package/src/generators/_utils/normalize.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultPort = getDefaultPort;
+exports.toFederationName = toFederationName;
+exports.normalizeScaffoldOptions = normalizeScaffoldOptions;
+const devkit_1 = require("@nx/devkit");
+const internal_1 = require("@nx/devkit/internal");
+// Default ports are split so a `consumer` + `provider` generated with no
+// overrides don't collide. Consumer gets the round base (the user navigates
+// to it); providers get base+1, base+2, etc., so a manifest pointing at
+// `consumer-base + 1` lines up with the first generated provider.
+//
+// Vite base deliberately avoids 5000 (macOS AirTunes binds it on the IPv4
+// wildcard, leading to silent EADDRINUSE on `127.0.0.1`).
+const DEFAULT_BASE_PORTS = {
+    vite: 5100,
+    rsbuild: 3100,
+    rspack: 8100,
+};
+function getDefaultPort(bundler, surface) {
+    const base = DEFAULT_BASE_PORTS[bundler];
+    return surface === 'consumer' ? base : base + 1;
+}
+// Federation `name` must be a JS identifier so the bundler can use it as a
+// global namespace. Hyphens are allowed in project names but invalid as an
+// identifier, so we coerce to underscores.
+function toFederationName(projectName) {
+    if (!/[A-Za-z0-9]/.test(projectName)) {
+        throw new Error(`Cannot derive a federation name from project name '${projectName}'. Use letters, digits, hyphens, or underscores.`);
+    }
+    const candidate = projectName
+        .replace(/-/g, '_')
+        .replace(/[^A-Za-z0-9_]/g, '');
+    if (/^[0-9]/.test(candidate)) {
+        throw new Error(`Federation name '${candidate}' (derived from project '${projectName}') cannot start with a digit. Rename the project.`);
+    }
+    return candidate;
+}
+async function normalizeScaffoldOptions(tree, raw) {
+    const bundler = raw.bundler ?? 'vite';
+    const { projectName, projectRoot } = await (0, internal_1.determineProjectNameAndRootOptions)(tree, {
+        projectType: 'application',
+        directory: raw.directory,
+    });
+    const federationName = toFederationName((0, devkit_1.names)(projectName).fileName);
+    const port = raw.port ?? getDefaultPort(bundler, raw.surface);
+    return { projectName, federationName, bundler, port, projectRoot };
+}

package/src/generators/consumer/consumer.d.ts

@@ -0,0 +1,5 @@
+import { GeneratorCallback, Tree } from '@nx/devkit';
+import type { ConsumerGeneratorSchema } from './schema';
+export declare function consumerGenerator(tree: Tree, schema: ConsumerGeneratorSchema): Promise<GeneratorCallback>;
+export default consumerGenerator;
+//# sourceMappingURL=consumer.d.ts.map

package/src/generators/consumer/consumer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consumer.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/consumer/consumer.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EAIjB,IAAI,EACL,MAAM,YAAY,CAAC;AAgBpB,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAgBxD,wBAAsB,iBAAiB,CACrC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,uBAAuB,GAC9B,OAAO,CAAC,iBAAiB,CAAC,CAqI5B;AAED,eAAe,iBAAiB,CAAC"}

package/src/generators/consumer/consumer.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.consumerGenerator = consumerGenerator;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const versions_1 = require("@nx/js/src/utils/versions");
+const versions_2 = require("../../utils/versions");
+const mfVersions = tslib_1.__importStar(require("../_utils/mf-versions"));
+const mf_dependencies_1 = require("../_utils/mf-dependencies");
+const normalize_1 = require("../_utils/normalize");
+const provider_1 = tslib_1.__importDefault(require("../provider/provider"));
+// `--mode=...` is rspack's portable equivalent of `NODE_ENV=...` and works on
+// Windows without a shell prefix.
+const BUNDLER_DEV_COMMAND = {
+    vite: 'vite',
+    rsbuild: 'rsbuild dev',
+    rspack: 'rspack serve --mode=development',
+};
+const BUNDLER_BUILD_COMMAND = {
+    vite: 'vite build',
+    rsbuild: 'rsbuild build',
+    rspack: 'rspack build --mode=production',
+};
+async function consumerGenerator(tree, schema) {
+    const opts = await (0, normalize_1.normalizeScaffoldOptions)(tree, {
+        directory: schema.directory,
+        surface: 'consumer',
+        bundler: schema.bundler,
+        port: schema.port,
+    });
+    // When the user explicitly passes `--providerNames=p1,p2`, generate a
+    // sibling provider app per entry and wire them into the consumer's
+    // PROVIDERS list + App.tsx. When the flag is omitted, ship a placeholder
+    // `my-provider` entry pointing at the per-bundler provider-default port
+    // without generating an actual provider project.
+    const providerNames = schema.providerNames?.length
+        ? schema.providerNames
+        : ['my-provider'];
+    const shouldGenerateProviders = !!schema.providerNames?.length;
+    const providerDefaultPort = (0, normalize_1.getDefaultPort)(opts.bundler, 'provider');
+    const providers = providerNames.map((name, i) => ({
+        name,
+        // The federation container name the provider build emits. Must match the
+        // provider's federation `name`, which is derived the same way (see
+        // provider.ts / normalize.ts) - it strips chars that aren't valid in a JS
+        // identifier, so a naive `alias.replace(/-/g, '_')` in the consumer would
+        // diverge for names with dots/slashes/@ and loadRemote() would resolve the
+        // URL but look up the wrong container.
+        federationName: (0, normalize_1.toFederationName)((0, devkit_1.names)(name).fileName),
+        componentName: `Provider${(0, devkit_1.names)(name).className}`,
+        directory: (0, devkit_1.joinPathFragments)(opts.projectRoot, '..', name),
+        port: providerDefaultPort + i,
+    }));
+    (0, devkit_1.addProjectConfiguration)(tree, opts.projectName, {
+        root: opts.projectRoot,
+        sourceRoot: (0, devkit_1.joinPathFragments)(opts.projectRoot, 'src'),
+        projectType: 'application',
+        targets: {
+            serve: {
+                executor: 'nx:run-commands',
+                continuous: true,
+                options: {
+                    command: BUNDLER_DEV_COMMAND[opts.bundler],
+                    cwd: opts.projectRoot,
+                },
+            },
+            build: {
+                executor: 'nx:run-commands',
+                options: {
+                    command: BUNDLER_BUILD_COMMAND[opts.bundler],
+                    cwd: opts.projectRoot,
+                },
+            },
+        },
+    });
+    const tasks = [];
+    if (shouldGenerateProviders) {
+        for (const p of providers) {
+            tasks.push(await (0, provider_1.default)(tree, {
+                directory: p.directory,
+                bundler: opts.bundler,
+                port: p.port,
+                // Wire `nx serve <provider>` to also spin up this consumer.
+                consumer: opts.projectName,
+            }));
+        }
+    }
+    // Point at `remoteEntry.js`, which every supported bundler emits at dev
+    // time. `mf-manifest.json` is richer (https://module-federation.io/configure/manifest-fields)
+    // but `@module-federation/vite` only emits it at build time, so a consumer
+    // serving against a dev-mode vite provider would get the SPA-fallback HTML
+    // and crash on JSON.parse. Swap to mf-manifest.json manually for prod if
+    // you want the extra metadata.
+    const remotes = providers.map((p) => ({
+        // `alias` is the key the consumer references (loadRemote/lazyProvider);
+        // `name` is the provider's federation container name; `entry` is its
+        // remoteEntry.js URL.
+        alias: p.name,
+        name: p.federationName,
+        entry: `http://localhost:${p.port}/remoteEntry.js`,
+    }));
+    // Vite emits ESM `remoteEntry.js`; rspack/rsbuild emit UMD. The federation
+    // runtime needs `type: 'module'` for ESM (else loads as a classic <script>
+    // and the browser throws #RUNTIME-001) and NO type for UMD (else
+    // #RUNTIME-002). We only generate same-bundler providers via --providerNames,
+    // so a single per-consumer setting is correct.
+    const remoteType = opts.bundler === 'vite' ? 'module' : null;
+    const templateSubstitutions = {
+        projectName: opts.projectName,
+        federationName: opts.federationName,
+        port: opts.port,
+        bundler: opts.bundler,
+        providers,
+        remotes,
+        remoteType,
+        versions: {
+            ...mfVersions,
+            reactVersion: versions_2.reactVersion,
+            reactDomVersion: versions_2.reactDomVersion,
+            typesReactVersion: versions_2.typesReactVersion,
+            typesReactDomVersion: versions_2.typesReactDomVersion,
+            typescriptVersion: versions_1.typescriptVersion,
+        },
+        tmpl: '',
+    };
+    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, 'files', '_common'), opts.projectRoot, templateSubstitutions);
+    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, 'files', opts.bundler), opts.projectRoot, templateSubstitutions);
+    // Write deps into the workspace root package.json so bare bundler bins
+    // resolve when nx invokes the generated run-commands serve target.
+    const deps = (0, mf_dependencies_1.getConsumerDeps)(opts.bundler);
+    tasks.push((0, devkit_1.addDependenciesToPackageJson)(tree, deps.dependencies, deps.devDependencies));
+    await (0, devkit_1.formatFiles)(tree);
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.default = consumerGenerator;