@nx/react 20.2.0-canary.20241204-75b2080 → 20.2.0-rc.0

package/generators.json

@@ -64,13 +64,15 @@
       "factory": "./src/generators/host/host",
       "schema": "./src/generators/host/schema.json",
       "x-type": "application",
-      "description": "Generate a host react application"
+      "description": "Generate a host react application",
+      "aliases": ["consumer"]
     },
     "remote": {
       "factory": "./src/generators/remote/remote",
       "schema": "./src/generators/remote/schema.json",
       "x-type": "application",
-      "description": "Generate a remote react application"
+      "description": "Generate a remote react application",
+      "aliases": ["producer"]
     },
     "cypress-component-configuration": {
       "factory": "./src/generators/cypress-component-configuration/cypress-component-configuration#cypressComponentConfigGenerator",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "20.2.0-canary.20241204-75b2080",
+  "version": "20.2.0-rc.0",
   "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": {
@@ -38,11 +38,11 @@
     "minimatch": "9.0.3",
     "picocolors": "^1.1.0",
     "tslib": "^2.3.0",
-    "@nx/devkit": "20.2.0-canary.20241204-75b2080",
-    "@nx/js": "20.2.0-canary.20241204-75b2080",
-    "@nx/eslint": "20.2.0-canary.20241204-75b2080",
-    "@nx/web": "20.2.0-canary.20241204-75b2080",
-    "@nx/module-federation": "20.2.0-canary.20241204-75b2080",
+    "@nx/devkit": "20.2.0-rc.0",
+    "@nx/js": "20.2.0-rc.0",
+    "@nx/eslint": "20.2.0-rc.0",
+    "@nx/web": "20.2.0-rc.0",
+    "@nx/module-federation": "20.2.0-rc.0",
     "express": "^4.19.2",
     "http-proxy-middleware": "^3.0.3"
   },

package/plugins/bundle-rollup.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-// TODO(v22): Remove this in Nx 22 and migrate to explicit rollup.config.js files.
+// TODO(v22): Remove this in Nx 22 and migrate to explicit rollup.config.cjs files.
 /**
- * @deprecated Use `withNx` function from `@nx/rollup/with-nx` in your rollup.config.js file instead. Use `nx g @nx/rollup:convert-to-inferred` to generate the rollup.config.js file if it does not exist.
+ * @deprecated Use `withNx` function from `@nx/rollup/with-nx` in your rollup.config.cjs file instead. Use `nx g @nx/rollup:convert-to-inferred` to generate the rollup.config.cjs file if it does not exist.
  */
 function getRollupOptions(options) {
     const extraGlobals = {

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

@@ -28,16 +28,18 @@
           }
         ]
       },
-      "description": "List of remote applications to run in development mode (i.e. using serve target).",
-      "x-priority": "important"
+      "description": "List of Producer (remote) applications to run in development mode (i.e. using serve target).",
+      "x-priority": "important",
+      "alias": "devProducers"
     },
     "skipRemotes": {
       "type": "array",
       "items": {
         "type": "string"
       },
-      "description": "List of remote applications to not automatically serve, either statically or in development mode. This will not remove the remotes from the `module-federation.config` file, and therefore the application may still try to fetch these remotes.\nThis option is useful if you have other means for serving the `remote` application(s).\n**NOTE:** Remotes that are not in the workspace will be skipped automatically.",
-      "x-priority": "important"
+      "description": "List of Producer (remote) applications to not automatically serve, either statically or in development mode. This will not remove the Producers (remotes) from the `module-federation.config` file, and therefore the application may still try to fetch these Producers (remotes).\nThis option is useful if you have other means for serving the Producer (remote) application(s).\n**NOTE:** Producers (remotes) that are not in the workspace will be skipped automatically.",
+      "x-priority": "important",
+      "alias": "skipProducers"
     },
     "buildTarget": {
       "type": "string",
@@ -111,25 +113,27 @@
     },
     "static": {
       "type": "boolean",
-      "description": "Whether to use a static file server instead of the webpack-dev-server. This should be used for remote applications that are also host applications."
+      "description": "Whether to use a static file server instead of the webpack-dev-server. This should be used for Producer (remote) applications that are also Consumer (host) applications."
     },
     "isInitialHost": {
       "type": "boolean",
-      "description": "Whether the host that is running this executor is the first in the project tree to do so.",
+      "description": "Whether the Consumer (host) that is running this executor is the first in the project tree to do so.",
       "default": true,
-      "x-priority": "internal"
+      "x-priority": "internal",
+      "alias": "isInitialConsumer"
     },
     "parallel": {
       "type": "number",
-      "description": "Max number of parallel processes for building static remotes"
+      "description": "Max number of parallel processes for building static Producers (remotes)"
     },
     "staticRemotesPort": {
       "type": "number",
-      "description": "The port at which to serve the file-server for the static remotes."
+      "description": "The port at which to serve the file-server for the static Producers (remotes).",
+      "alias": "staticProducersPort"
     },
     "pathToManifestFile": {
       "type": "string",
-      "description": "Path to a Module Federation manifest file (e.g. `my/path/to/module-federation.manifest.json`) containing the dynamic remote applications relative to the workspace root."
+      "description": "Path to a Module Federation manifest file (e.g. `my/path/to/module-federation.manifest.json`) containing the dynamic Producer (remote) applications relative to the workspace root."
     }
   },
   "examplesFile": "../../../docs/module-federation-dev-server-examples.md"

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

@@ -2,7 +2,7 @@
   "version": 2,
   "outputCapture": "direct-nodejs",
   "title": "Module Federation SSR Dev Server",
-  "description": "Serve a SSR host application along with its known remotes.",
+  "description": "Serve a SSR Consumer (host) application along with its known Producers (remotes).",
   "cli": "nx",
   "type": "object",
   "properties": {
@@ -27,16 +27,18 @@
       "items": {
         "type": "string"
       },
-      "description": "List of remote applications to run in development mode (i.e. using serve target).",
-      "x-priority": "important"
+      "description": "List of Producer (remote) applications to run in development mode (i.e. using serve target).",
+      "x-priority": "important",
+      "alias": "devProducers"
     },
     "skipRemotes": {
       "type": "array",
       "items": {
         "type": "string"
       },
-      "description": "List of remote applications to not automatically serve, either statically or in development mode.",
-      "x-priority": "important"
+      "description": "List of Producer (remote) applications to not automatically serve, either statically or in development mode.",
+      "x-priority": "important",
+      "alias": "skipProducers"
     },
     "host": {
       "type": "string",
@@ -45,11 +47,12 @@
     },
     "staticRemotesPort": {
       "type": "number",
-      "description": "The port at which to serve the file-server for the static remotes."
+      "description": "The port at which to serve the file-server for the static Producers (remotes).",
+      "alias": "staticProducersPort"
     },
     "pathToManifestFile": {
       "type": "string",
-      "description": "Path to a Module Federation manifest file (e.g. `my/path/to/module-federation.manifest.json`) containing the dynamic remote applications relative to the workspace root."
+      "description": "Path to a Module Federation manifest file (e.g. `my/path/to/module-federation.manifest.json`) containing the dynamic Producer (remote) applications relative to the workspace root."
     },
     "ssl": {
       "type": "boolean",
@@ -66,9 +69,10 @@
     },
     "isInitialHost": {
       "type": "boolean",
-      "description": "Whether the host that is running this executor is the first in the project tree to do so.",
+      "description": "Whether the Consumer (host) that is running this executor is the first in the project tree to do so.",
       "default": true,
-      "x-priority": "internal"
+      "x-priority": "internal",
+      "alias": "isInitialConsumer"
     }
   },
   "required": ["browserTarget", "serverTarget"]

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

@@ -58,7 +58,7 @@ async function buildHost(nxBin, buildTarget, context) {
             }
             if (stdoutString.includes('Successfully ran target build')) {
                 staticProcess.stdout.removeAllListeners('data');
-                devkit_1.logger.info(`NX Built host`);
+                devkit_1.logger.info(`NX Built Consumer (host)`);
                 res();
             }
         });
@@ -67,7 +67,7 @@ async function buildHost(nxBin, buildTarget, context) {
             staticProcess.stdout.removeAllListeners('data');
             staticProcess.stderr.removeAllListeners('data');
             if (code !== 0) {
-                rej(`Host failed to build. See above for details.`);
+                rej(`Consumer (host) failed to build. See above for details.`);
             }
             else {
                 res();
@@ -132,8 +132,8 @@ function startProxies(staticRemotesConfig, hostServeOptions, mappedLocationOfHos
         process.on('SIGTERM', () => proxyServer.close());
         process.on('exit', () => proxyServer.close());
     }
-    devkit_1.logger.info(`NX Static remotes proxies started successfully`);
-    devkit_1.logger.info(`NX Starting static host proxy...`);
+    devkit_1.logger.info(`NX Static Producers (remotes) proxies started successfully`);
+    devkit_1.logger.info(`NX Starting static Consumer (host) proxy...`);
     const expressProxy = express();
     expressProxy.use(createProxyMiddleware({
         target: mappedLocationOfHost,
@@ -155,7 +155,7 @@ function startProxies(staticRemotesConfig, hostServeOptions, mappedLocationOfHos
         .listen(hostServeOptions.port);
     process.on('SIGTERM', () => proxyServer.close());
     process.on('exit', () => proxyServer.close());
-    devkit_1.logger.info('NX Static host proxy started successfully');
+    devkit_1.logger.info('NX Static Consumer (host) proxy started successfully');
 }
 async function* moduleFederationStaticServer(schema, context) {
     // Force Node to resolve to look for the nx binary that is inside node_modules

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

@@ -2,7 +2,7 @@
   "version": 2,
   "outputCapture": "direct-nodejs",
   "title": "Module Federation Static Dev Server",
-  "description": "Serve a host application statically along with it's remotes.",
+  "description": "Serve a Consumer (host) application statically along with its Producers (remotes).",
   "cli": "nx",
   "type": "object",
   "properties": {

package/src/generators/component-story/component-story.js

@@ -13,8 +13,7 @@ function createComponentStoriesFile(host, { project, componentPath, interactionT
         tsModule = (0, ensure_typescript_1.ensureTypescript)();
     }
     const proj = (0, devkit_1.getProjects)(host).get(project);
-    const sourceRoot = proj.sourceRoot;
-    const componentFilePath = (0, devkit_1.joinPathFragments)(sourceRoot, componentPath);
+    const componentFilePath = (0, devkit_1.joinPathFragments)(proj.sourceRoot ?? proj.root, componentPath);
     const componentDirectory = componentFilePath.replace(componentFilePath.slice(componentFilePath.lastIndexOf('/')), '');
     const isPlainJs = componentFilePath.endsWith('.jsx') || componentFilePath.endsWith('.js');
     const componentFileName = componentFilePath

package/src/generators/federate-module/schema.json

@@ -3,11 +3,15 @@
   "cli": "nx",
   "$id": "NxReactFederateModule",
   "title": "Federate Module",
-  "description": "Create a federated module, which can be loaded by a remote host.",
+  "description": "Create a federated module, which can be loaded by a Consumer (host) via a Producer (remote).",
   "examples": [
     {
-      "command": "nx g federate-module MyModule --path=./src/component/my-cmp.ts --remote=my-remote-app --remoteDirectory=apps/my-remote-app",
-      "description": "Create a federated module from my-remote-app, that exposes my-cmp from ./src/component/my-cmp.ts as MyModule."
+      "command": "nx g federate-module MyModule --path=./src/component/my-cmp.ts --remote=myRemote --remoteDirectory=apps/myRemote",
+      "description": "Create a federated module from myRemote, that exposes my-cmp from ./src/component/my-cmp.ts as MyModule."
+    },
+    {
+      "command": "nx g federate-module MyModule --path=./src/component/my-cmp.ts --producer=myProducer --producerDirectory=apps/myProducer",
+      "description": "Create a federated module from myProducer, that exposes my-cmp from ./src/component/my-cmp.ts as MyModule."
     }
   ],
   "type": "object",
@@ -30,12 +34,14 @@
     },
     "remote": {
       "type": "string",
-      "description": "The name of the remote.",
-      "x-prompt": "What is/should the remote be named?"
+      "description": "The name of the Producer (remote).",
+      "x-prompt": "What is/should the Producer (remote) be named?",
+      "alias": "producer"
     },
     "remoteDirectory": {
-      "description": "The directory of the new remote application if one needs to be created.",
-      "type": "string"
+      "description": "The directory of the new Producer (remote) application if one needs to be created.",
+      "type": "string",
+      "alias": "producerDirectory"
     },
     "style": {
       "description": "The file extension to be used for style files.",
@@ -70,7 +76,7 @@
     },
     "host": {
       "type": "string",
-      "description": "The host / shell application for this remote."
+      "description": "The Consumer (host) application for this Producer (remote)."
     },
     "bundler": {
       "description": "The bundler to use.",

package/src/generators/host/schema.json

@@ -2,8 +2,8 @@
   "$schema": "https://json-schema.org/schema",
   "$id": "GeneratorReactHost",
   "cli": "nx",
-  "title": "Generate Module Federation Setup for React Host App",
-  "description": "Create Module Federation configuration files for given React Host Application.",
+  "title": "Generate Module Federation Setup for React Consumer (Host) App",
+  "description": "Create Module Federation configuration files for given React Consumer (Host) Application.",
   "type": "object",
   "properties": {
     "directory": {
@@ -18,7 +18,7 @@
     },
     "name": {
       "type": "string",
-      "description": "The name of the host application to generate the Module Federation configuration",
+      "description": "The name of the Consumer (host) application to generate the Module Federation configuration",
       "pattern": "^[a-zA-Z][^:]*$",
       "x-priority": "important"
     },
@@ -74,7 +74,7 @@
     },
     "dynamic": {
       "type": "boolean",
-      "description": "Should the host application use dynamic federation?",
+      "description": "Should the Consumer (host) application use dynamic federation?",
       "default": false
     },
     "skipFormat": {
@@ -141,18 +141,19 @@
     },
     "remotes": {
       "type": "array",
-      "description": "A list of remote application names that the host application should consume.",
+      "description": "A list of Producer (remote) application names that the Consumer (host) application should consume.",
       "default": [],
-      "x-priority": "important"
+      "x-priority": "important",
+      "alias": "producers"
     },
     "devServerPort": {
       "type": "number",
-      "description": "The port for the dev server of the remote app.",
+      "description": "The port for the dev server of the Producer (remote) app.",
       "default": 4200,
       "x-priority": "important"
     },
     "ssr": {
-      "description": "Whether to configure SSR for the host application",
+      "description": "Whether to configure SSR for the Consumer (host) application",
       "type": "boolean",
       "default": false
     },

package/src/generators/library/lib/add-rollup-build-target.js

@@ -32,33 +32,36 @@ async function addRollupBuildTarget(host, options) {
         : p.plugin === '@nx/rollup/plugin');
     if (hasRollupPlugin) {
         // New behavior, using rollup config file and inferred target.
-        host.write((0, devkit_1.joinPathFragments)(options.projectRoot, 'rollup.config.js'), (0, devkit_1.stripIndents) `
-      const { withNx } = require('@nx/rollup/with-nx');
-      const url = require('@rollup/plugin-url');
-      const svg = require('@svgr/rollup');
-      
-      module.exports = withNx({
-        main: '${(0, maybe_js_1.maybeJs)(options, './src/index.ts')}',
-        outputPath: '${(0, devkit_1.joinPathFragments)((0, devkit_1.offsetFromRoot)(options.projectRoot), 'dist', options.projectRoot)}',
-        tsConfig: './tsconfig.lib.json',
-        compiler: '${options.compiler ?? 'babel'}',
-        external: ${JSON.stringify(external)},
-        format: ['esm'],
-        assets:[{ input: '.', output: '.', glob: 'README.md'}],
-      }, {
-        // Provide additional rollup configuration here. See: https://rollupjs.org/configuration-options
-        plugins: [
-          svg({
-            svgo: false,
-            titleProp: true,
-            ref: true,
-          }),
-          url({
-            limit: 10000, // 10kB
-          }),
-        ],
-      });
-    `);
+        host.write((0, devkit_1.joinPathFragments)(options.projectRoot, 'rollup.config.cjs'), `const { withNx } = require('@nx/rollup/with-nx');
+const url = require('@rollup/plugin-url');
+const svg = require('@svgr/rollup');
+
+module.exports = withNx(
+  {
+    main: '${(0, maybe_js_1.maybeJs)(options, './src/index.ts')}',
+    outputPath: '${options.isUsingTsSolutionConfig
+            ? './dist'
+            : (0, devkit_1.joinPathFragments)((0, devkit_1.offsetFromRoot)(options.projectRoot), 'dist', options.projectRoot)}',
+    tsConfig: './tsconfig.lib.json',
+    compiler: '${options.compiler ?? 'babel'}',
+    external: ${JSON.stringify(external)},
+    format: ['esm'],
+    assets:[{ input: '.', output: '.', glob: 'README.md'}],
+  }, {
+    // Provide additional rollup configuration here. See: https://rollupjs.org/configuration-options
+    plugins: [
+      svg({
+        svgo: false,
+        titleProp: true,
+        ref: true,
+      }),
+      url({
+        limit: 10000, // 10kB
+      }),
+    ],
+  }
+);
+`);
     }
     else {
         // Legacy behavior, there is a target in project.json using rollup executor.

package/src/generators/remote/lib/update-host-with-remote.js

@@ -24,7 +24,7 @@ function updateHostWithRemote(host, hostName, remoteName) {
     }
     else {
         // TODO(jack): Point to the nx.dev guide when ready.
-        devkit_1.logger.warn(`Could not find configuration at ${moduleFederationConfigPath}. Did you generate this project with "@nx/react:host"?`);
+        devkit_1.logger.warn(`Could not find configuration at ${moduleFederationConfigPath}. Did you generate this project with "@nx/react:host" or "@nx/react:consumer"?`);
     }
     if (host.exists(appComponentPath)) {
         let sourceCode = host.read(appComponentPath).toString();
@@ -32,7 +32,7 @@ function updateHostWithRemote(host, hostName, remoteName) {
         host.write(appComponentPath, (0, devkit_1.applyChangesToString)(sourceCode, (0, ast_utils_1.addRemoteRoute)(source, (0, devkit_1.names)(remoteName))));
     }
     else {
-        devkit_1.logger.warn(`Could not find app component at ${appComponentPath}. Did you generate this project with "@nx/react:host"?`);
+        devkit_1.logger.warn(`Could not find app component at ${appComponentPath}. Did you generate this project with "@nx/react:host" or "@nx/react:consumer"?`);
     }
 }
 function findAppComponentPath(host, sourceRoot) {

package/src/generators/remote/schema.json

@@ -2,8 +2,8 @@
   "$schema": "https://json-schema.org/schema",
   "$id": "GeneratorReactRemote",
   "cli": "nx",
-  "title": "Generate Module Federation Setup for React Remote App",
-  "description": "Create Module Federation configuration files for given React Remote Application.",
+  "title": "Generate Module Federation Setup for React Producer (Remote) App",
+  "description": "Create Module Federation configuration files for given React Producer (Remote) Application.",
   "type": "object",
   "properties": {
     "directory": {
@@ -18,13 +18,13 @@
     },
     "name": {
       "type": "string",
-      "description": "The name of the remote application to generate the Module Federation configuration",
+      "description": "The name of the Producer (remote) application to generate the Module Federation configuration",
       "pattern": "^[a-zA-Z_$][a-zA-Z_$0-9]*$",
       "x-priority": "important"
     },
     "dynamic": {
       "type": "boolean",
-      "description": "Should the host application use dynamic federation?",
+      "description": "Should the Consumer (host) application use dynamic federation?",
       "default": false,
       "x-priority": "internal"
     },
@@ -147,16 +147,17 @@
     },
     "host": {
       "type": "string",
-      "description": "The host / shell application for this remote.",
-      "x-priority": "important"
+      "description": "The Consumer (host) application for this Producer (remote).",
+      "x-priority": "important",
+      "alias": "consumer"
     },
     "devServerPort": {
       "type": "number",
-      "description": "The port for the dev server of the remote app.",
+      "description": "The port for the dev server of the Producer (remote) app.",
       "x-priority": "important"
     },
     "ssr": {
-      "description": "Whether to configure SSR for the host application",
+      "description": "Whether to configure SSR for the Consumer (host) application",
       "type": "boolean",
       "default": false
     },

package/src/generators/stories/stories.js

@@ -29,7 +29,10 @@ async function projectRootPath(tree, config) {
         // libs/test-lib/src/lib
         projectDir = 'lib';
     }
-    return (0, devkit_1.joinPathFragments)(config.sourceRoot, projectDir);
+    else {
+        projectDir = '.';
+    }
+    return (0, devkit_1.joinPathFragments)(config.sourceRoot ?? config.root, projectDir);
 }
 function containsComponentDeclaration(tree, componentPath) {
     if (!tsModule) {
@@ -70,7 +73,7 @@ async function createAllStories(tree, projectName, interactionTests, js, project
         }
     });
     await Promise.all(componentPaths.map(async (componentPath) => {
-        const relativeCmpDir = componentPath.replace((0, path_1.join)(sourceRoot, '/'), '');
+        const relativeCmpDir = componentPath.replace((0, path_1.join)(sourceRoot ?? root, '/'), '');
         if (!containsComponentDeclaration(tree, componentPath)) {
             return;
         }

package/src/generators/storybook-configuration/configuration.js

@@ -32,8 +32,8 @@ async function storybookConfigurationGeneratorInternal(host, schema) {
     let uiFramework = '@storybook/react-vite';
     const projectConfig = (0, devkit_1.readProjectConfiguration)(host, schema.project);
     if (findWebpackConfig(host, projectConfig.root) ||
-        projectConfig.targets['build']?.executor === '@nx/rollup:rollup' ||
-        projectConfig.targets['build']?.executor === '@nx/expo:build') {
+        projectConfig.targets?.['build']?.executor === '@nx/rollup:rollup' ||
+        projectConfig.targets?.['build']?.executor === '@nx/expo:build') {
         uiFramework = '@storybook/react-webpack5';
     }
     if (uiFramework === '@storybook/react-vite') {