chore(react): update MFE language to module federation (#9888)

docs/generated/packages/react.json

@@ -836,11 +836,11 @@
       "path": "/packages/react/src/generators/hook/schema.json"
     },
     {
-      "name": "mfe-host",
-      "factory": "./src/generators/mfe-host/mfe-host#mfeHostGenerator",
+      "name": "host",
+      "factory": "./src/generators/host/host#hostGenerator",
       "schema": {
         "$schema": "http://json-schema.org/schema",
-        "$id": "GeneratorReactMFEHost",
+        "$id": "GeneratorReactHost",
         "cli": "nx",
         "title": "Generate Module Federation Setup for React Host App",
         "description": "Create Module Federation configuration files for given React Host Application.",
@@ -986,17 +986,17 @@
         "presets": []
       },
       "description": "Generate a host react application",
-      "aliases": "host",
-      "implementation": "/packages/react/src/generators/mfe-host/mfe-host#mfeHostGenerator.ts",
+      "implementation": "/packages/react/src/generators/host/host#hostGenerator.ts",
+      "aliases": [],
       "hidden": false,
-      "path": "/packages/react/src/generators/mfe-host/schema.json"
+      "path": "/packages/react/src/generators/host/schema.json"
     },
     {
-      "name": "mfe-remote",
-      "factory": "./src/generators/mfe-remote/mfe-remote#mfeRemoteGenerator",
+      "name": "remote",
+      "factory": "./src/generators/remote/remote#remoteGenerator",
       "schema": {
         "$schema": "http://json-schema.org/schema",
-        "$id": "GeneratorReactMFERemote",
+        "$id": "GeneratorReactRemote",
         "cli": "nx",
         "title": "Generate Module Federation Setup for React Remote App",
         "description": "Create Module Federation configuration files for given React Remote Application.",
@@ -1146,18 +1146,18 @@
         "presets": []
       },
       "description": "Generate a remote react application",
-      "aliases": "remote",
-      "implementation": "/packages/react/src/generators/mfe-remote/mfe-remote#mfeRemoteGenerator.ts",
+      "implementation": "/packages/react/src/generators/remote/remote#remoteGenerator.ts",
+      "aliases": [],
       "hidden": false,
-      "path": "/packages/react/src/generators/mfe-remote/schema.json"
+      "path": "/packages/react/src/generators/remote/schema.json"
     }
   ],
   "executors": [
     {
-      "name": "mfe-dev-server",
-      "implementation": "/packages/react/src/executors/mfe-dev-server/mfe-dev-server.impl.ts",
+      "name": "module-federation-dev-server",
+      "implementation": "/packages/react/src/executors/module-federation-dev-server/module-federation-dev-server.impl.ts",
       "schema": {
-        "title": "Web Dev Server",
+        "title": "Module Federation Dev Server",
         "description": "Serve a web application.",
         "cli": "nx",
         "type": "object",
@@ -1237,10 +1237,10 @@
         },
         "presets": []
       },
-      "description": "Serve an MFE host or remote application.",
+      "description": "Serve a host or remote application.",
       "aliases": [],
       "hidden": false,
-      "path": "/packages/react/src/executors/mfe-dev-server/schema.json"
+      "path": "/packages/react/src/executors/module-federation-dev-server/schema.json"
     }
   ]
 }

docs/packages.json

@@ -191,7 +191,7 @@
     "name": "react",
     "path": "generated/packages/react.json",
     "schemas": {
-      "executors": ["mfe-dev-server"],
+      "executors": ["module-federation-dev-server"],
       "generators": [
         "init",
         "application",
@@ -203,8 +203,8 @@
         "stories",
         "component-cypress-spec",
         "hook",
-        "mfe-host",
-        "mfe-remote"
+        "host",
+        "remote"
       ]
     }
   },

e2e/react/src/react.mfe.test.ts → e2e/react/src/react.module-federation.test.ts

@@ -10,7 +10,7 @@ import {
   updateFile,
 } from '@nrwl/e2e/utils';
 
-describe('React MFE', () => {
+describe('React Module Federation', () => {
   let proj: string;
 
   beforeEach(() => (proj = newProject()));
@@ -22,16 +22,16 @@ describe('React MFE', () => {
     const remote3 = uniq('remote3');
 
     runCLI(
-      `generate @nrwl/react:mfe-host ${shell} --style=css --remotes=${remote1},${remote2} --no-interactive`
+      `generate @nrwl/react:host ${shell} --style=css --remotes=${remote1},${remote2} --no-interactive`
     );
     runCLI(
-      `generate @nrwl/react:mfe-remote ${remote3} --style=css --host=${shell} --no-interactive`
+      `generate @nrwl/react:remote ${remote3} --style=css --host=${shell} --no-interactive`
     );
 
-    checkFilesExist(`apps/${shell}/mfe.config.js`);
-    checkFilesExist(`apps/${remote1}/mfe.config.js`);
-    checkFilesExist(`apps/${remote2}/mfe.config.js`);
-    checkFilesExist(`apps/${remote3}/mfe.config.js`);
+    checkFilesExist(`apps/${shell}/module-federation.config.js`);
+    checkFilesExist(`apps/${remote1}/module-federation.config.js`);
+    checkFilesExist(`apps/${remote2}/module-federation.config.js`);
+    checkFilesExist(`apps/${remote3}/module-federation.config.js`);
 
     await expect(runCLIAsync(`test ${shell}`)).resolves.toMatchObject({
       combinedOutput: expect.stringContaining('Test Suites: 1 passed, 1 total'),
@@ -41,10 +41,10 @@ describe('React MFE', () => {
       `apps/${shell}/webpack.config.js`,
       stripIndents`
         const withModuleFederation = require('@nrwl/react/module-federation');
-        const mfeConfig = require('./mfe.config');
+        const moduleFederationConfig = require('./module-federation.config');
 
         module.exports = withModuleFederation({
-          ...mfeConfig,
+          ...moduleFederationConfig,
           remotes: [
             ['${remote1}', '${remote1}@http://localhost:${readPort(
         remote1

packages/react/executors.json

@@ -1,16 +1,16 @@
 {
   "builders": {
-    "mfe-dev-server": {
-      "implementation": "./src/executors/mfe-dev-server/compat",
-      "schema": "./src/executors/mfe-dev-server/schema.json",
-      "description": "Serve an MFE host or remote application."
+    "module-federation-dev-server": {
+      "implementation": "./src/executors/module-federation-dev-server/compat",
+      "schema": "./src/executors/module-federation-dev-server/schema.json",
+      "description": "Serve a host or remote application."
     }
   },
   "executors": {
-    "mfe-dev-server": {
-      "implementation": "./src/executors/mfe-dev-server/mfe-dev-server.impl",
-      "schema": "./src/executors/mfe-dev-server/schema.json",
-      "description": "Serve an MFE host or remote application."
+    "module-federation-dev-server": {
+      "implementation": "./src/executors/module-federation-dev-server/module-federation-dev-server.impl",
+      "schema": "./src/executors/module-federation-dev-server/schema.json",
+      "description": "Serve a host or remote application."
     }
   }
 }

packages/react/generators.json

@@ -150,18 +150,16 @@
       "aliases": "c"
     },
 
-    "mfe-host": {
-      "factory": "./src/generators/mfe-host/mfe-host#mfeHostGenerator",
-      "schema": "./src/generators/mfe-host/schema.json",
-      "description": "Generate a host react application",
-      "aliases": "host"
-    },
-
-    "mfe-remote": {
-      "factory": "./src/generators/mfe-remote/mfe-remote#mfeRemoteGenerator",
-      "schema": "./src/generators/mfe-remote/schema.json",
-      "description": "Generate a remote react application",
-      "aliases": "remote"
+    "host": {
+      "factory": "./src/generators/host/host#hostGenerator",
+      "schema": "./src/generators/host/schema.json",
+      "description": "Generate a host react application"
+    },
+
+    "remote": {
+      "factory": "./src/generators/remote/remote#remoteGenerator",
+      "schema": "./src/generators/remote/schema.json",
+      "description": "Generate a remote react application"
     }
   }
 }

packages/react/index.ts

@@ -15,5 +15,5 @@ export { reactInitGenerator } from './src/generators/init/init';
 export { reduxGenerator } from './src/generators/redux/redux';
 export { storiesGenerator } from './src/generators/stories/stories';
 export { storybookConfigurationGenerator } from './src/generators/storybook-configuration/configuration';
-export { mfeHostGenerator } from './src/generators/mfe-host/mfe-host';
+export { hostGenerator } from './src/generators/host/host';
 export type { SupportedStyles } from './typings/style';

packages/react/module-federation.ts

@@ -1,7 +1,7 @@
-import { withModuleFederation } from './src/mfe/with-module-federation';
+import { withModuleFederation } from './src/module-federation/with-module-federation';
 
-export * from './src/mfe/webpack-utils';
-export * from './src/mfe/with-module-federation';
+export * from './src/module-federation/webpack-utils';
+export * from './src/module-federation/with-module-federation';
 export { withModuleFederation as default };
 
 module.exports = withModuleFederation;

packages/react/src/executors/module-federation-dev-server/compat.ts

@@ -0,0 +1,5 @@
+import { convertNxExecutor } from '@nrwl/devkit';
+
+import devServer from './module-federation-dev-server.impl';
+
+export default convertNxExecutor(devServer);

packages/react/src/executors/mfe-dev-server/mfe-dev-server.impl.ts → packages/react/src/executors/module-federation-dev-server/module-federation-dev-server.impl.ts

@@ -4,26 +4,30 @@ import devServerExecutor, {
 } from '@nrwl/web/src/executors/dev-server/dev-server.impl';
 import { join } from 'path';
 
-type MFEDevServerOptions = WebDevServerOptions & {
+type ModuleFederationDevServerOptions = WebDevServerOptions & {
   apps?: string[];
 };
 
-export default async function* mfeDevServer(
-  options: MFEDevServerOptions,
+export default async function* moduleFederationDevServer(
+  options: ModuleFederationDevServerOptions,
   context: ExecutorContext
 ) {
   let iter = devServerExecutor(options, context);
   const p = context.workspace.projects[context.projectName];
 
-  const mfeConfigPath = join(context.root, p.root, 'mfe.config.js');
+  const moduleFederationConfigPath = join(
+    context.root,
+    p.root,
+    'module-federation.config.js'
+  );
 
-  let mfeConfig: any;
+  let moduleFederationConfig: any;
   try {
-    mfeConfig = require(mfeConfigPath);
+    moduleFederationConfig = require(moduleFederationConfigPath);
   } catch {
     // TODO(jack): Add a link to guide
     throw new Error(
-      `Could not load ${mfeConfigPath}. Was this project generated with "@nrwl/react:mfe-host"?`
+      `Could not load ${moduleFederationConfigPath}. Was this project generated with "@nrwl/react:host"?`
     );
   }
 
@@ -33,7 +37,7 @@ export default async function* mfeDevServer(
   // remotes: ['app1', 'http://example.com']
   // ```
   // This shouldn't happen for local dev, but we support it regardless.
-  let apps = options.apps ?? mfeConfig.remotes ?? [];
+  let apps = options.apps ?? moduleFederationConfig.remotes ?? [];
   apps = apps.map((a) => (Array.isArray(a) ? a[0] : a));
 
   for (const app of apps) {

packages/react/src/executors/mfe-dev-server/schema.json → packages/react/src/executors/module-federation-dev-server/schema.json

@@ -1,5 +1,5 @@
 {
-  "title": "Web Dev Server",
+  "title": "Module Federation Dev Server",
   "description": "Serve a web application.",
   "cli": "nx",
   "type": "object",

packages/react/src/generators/mfe-host/files/mfe/webpack.config.js__tmpl__ → packages/react/src/generators/host/files/module-federation/webpack.config.js__tmpl__

@@ -1,6 +1,6 @@
 const withModuleFederation = require('@nrwl/react/module-federation');
-const mfeConfig = require('./mfe.config');
+const moduleFederationConfig = require('./module-federation.config');
 
 module.exports = withModuleFederation({
-    ...mfeConfig,
+    ...moduleFederationConfig,
 });

packages/react/src/generators/mfe-host/files/mfe/webpack.config.prod.js__tmpl__ → packages/react/src/generators/host/files/module-federation/webpack.config.prod.js__tmpl__

@@ -1,8 +1,8 @@
 const withModuleFederation = require('@nrwl/react/module-federation');
-const mfeConfig = require('./mfe.config');
+const moduleFederationConfig = require('./module-federation.config');
 
 module.exports = withModuleFederation({
-    ...mfeConfig,
+    ...moduleFederationConfig,
     /*
      * Remote overrides for production.
      * Each entry is a pair of an unique name and the URL where it is deployed.

packages/react/src/generators/mfe-host/mfe-host.ts → packages/react/src/generators/host/host.ts

@@ -2,18 +2,18 @@ import { formatFiles, Tree } from '@nrwl/devkit';
 
 import applicationGenerator from '../application/application';
 import { normalizeOptions } from '../application/lib/normalize-options';
-import { mfeRemoteGenerator } from '../mfe-remote/mfe-remote';
-import { updateMfeProject } from '../../rules/update-mfe-project';
-import { addMfeFiles } from './lib/add-mfe-files';
-import { updateMfeE2eProject } from './lib/update-mfe-e2e-project';
+import { updateModuleFederationProject } from '../../rules/update-module-federation-project';
+import { addModuleFederationFiles } from './lib/add-module-federation-files';
+import { updateModuleFederationE2eProject } from './lib/update-module-federation-e2e-project';
 import { Schema } from './schema';
+import remoteGenerator from '../remote/remote';
 
-export async function mfeHostGenerator(host: Tree, schema: Schema) {
+export async function hostGenerator(host: Tree, schema: Schema) {
   const options = normalizeOptions(host, schema);
 
   const initTask = await applicationGenerator(host, {
     ...options,
-    // The target use-case for MFE is loading remotes as child routes, thus always enable routing.
+    // The target use-case is loading remotes as child routes, thus always enable routing.
     routing: true,
   });
 
@@ -23,7 +23,7 @@ export async function mfeHostGenerator(host: Tree, schema: Schema) {
     let remotePort = options.devServerPort + 1;
     for (const remote of schema.remotes) {
       remotesWithPorts.push({ name: remote, port: remotePort });
-      await mfeRemoteGenerator(host, {
+      await remoteGenerator(host, {
         name: remote,
         style: options.style,
         skipFormat: options.skipFormat,
@@ -36,9 +36,9 @@ export async function mfeHostGenerator(host: Tree, schema: Schema) {
     }
   }
 
-  addMfeFiles(host, options, remotesWithPorts);
-  updateMfeProject(host, options);
-  updateMfeE2eProject(host, options);
+  addModuleFederationFiles(host, options, remotesWithPorts);
+  updateModuleFederationProject(host, options);
+  updateModuleFederationE2eProject(host, options);
 
   if (!options.skipFormat) {
     await formatFiles(host);
@@ -47,4 +47,4 @@ export async function mfeHostGenerator(host: Tree, schema: Schema) {
   return initTask;
 }
 
-export default mfeHostGenerator;
+export default hostGenerator;

packages/react/src/generators/mfe-host/lib/add-mfe-files.ts → packages/react/src/generators/host/lib/add-module-federation-files.ts

@@ -2,7 +2,7 @@ import { NormalizedSchema } from '../schema';
 import { generateFiles, names } from '@nrwl/devkit';
 import { join } from 'path';
 
-export function addMfeFiles(
+export function addModuleFederationFiles(
   host,
   options: NormalizedSchema,
   defaultRemoteManifest: { name: string; port: number }[]
@@ -28,7 +28,7 @@ export function addMfeFiles(
   // New entry file is created here.
   generateFiles(
     host,
-    join(__dirname, `../files/mfe`),
+    join(__dirname, `../files/module-federation`),
     options.appProjectRoot,
     templateVariables
   );

packages/react/src/generators/mfe-host/lib/update-mfe-e2e-project.ts → packages/react/src/generators/host/lib/update-module-federation-e2e-project.ts

@@ -5,7 +5,10 @@ import {
   updateProjectConfiguration,
 } from '@nrwl/devkit';
 
-export function updateMfeE2eProject(host: Tree, options: NormalizedSchema) {
+export function updateModuleFederationE2eProject(
+  host: Tree,
+  options: NormalizedSchema
+) {
   const e2eName = `${options.name}-e2e`;
   try {
     let projectConfig = readProjectConfiguration(host, e2eName);

packages/react/src/generators/mfe-host/schema.json → packages/react/src/generators/host/schema.json

@@ -1,6 +1,6 @@
 {
   "$schema": "http://json-schema.org/schema",
-  "$id": "GeneratorReactMFEHost",
+  "$id": "GeneratorReactHost",
   "cli": "nx",
   "title": "Generate Module Federation Setup for React Host App",
   "description": "Create Module Federation configuration files for given React Host Application.",