@nx/react 17.3.1 → 17.3.2

package/migrations.json

@@ -47,6 +47,12 @@
       "version": "16.7.0-beta.2",
       "description": "Add @nx/react types to tsconfig types array",
       "implementation": "./src/migrations/update-16-7-0-add-typings/update-16-7-0-add-typings"
+    },
+    "add-module-federation-env-var-to-target-defaults": {
+      "cli": "nx",
+      "version": "18.0.0-beta.0",
+      "description": "Add NX_MF_DEV_SERVER_STATIC_REMOTES to inputs for task hashing when '@nx/webpack:webpack' is used for Module Federation.",
+      "factory": "./src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults"
     }
   },
   "packageJsonUpdates": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "17.3.1",
+  "version": "17.3.2",
   "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, 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,11 +37,11 @@
     "file-loader": "^6.2.0",
     "minimatch": "9.0.3",
     "tslib": "^2.3.0",
-    "@nx/devkit": "17.3.1",
-    "@nx/js": "17.3.1",
-    "@nx/eslint": "17.3.1",
-    "@nx/web": "17.3.1",
-    "@nrwl/react": "17.3.1"
+    "@nx/devkit": "17.3.2",
+    "@nx/js": "17.3.2",
+    "@nx/eslint": "17.3.2",
+    "@nx/web": "17.3.2",
+    "@nrwl/react": "17.3.2"
   },
   "publishConfig": {
     "access": "public"

package/src/generators/application/files/nx-welcome/src/app/nx-welcome.tsx

@@ -795,6 +795,25 @@ export function NxWelcome({ title }: { title: string }) {
                 nx g @nx/react:component ui/src/lib/button
               </pre>
             </details>
+            <details>
+              <summary>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                  />
+                </svg>
+                View project details
+              </summary>
+              <pre>nx show project {title} --web</pre>
+            </details>
             <details>
               <summary>
                 <svg

package/src/generators/host/host.js

@@ -11,6 +11,7 @@ const add_module_federation_files_1 = require("./lib/add-module-federation-files
 const normalize_remote_1 = require("./lib/normalize-remote");
 const setup_ssr_for_host_1 = require("./lib/setup-ssr-for-host");
 const update_module_federation_e2e_project_1 = require("./lib/update-module-federation-e2e-project");
+const add_mf_env_to_inputs_1 = require("../../utils/add-mf-env-to-inputs");
 async function hostGenerator(host, schema) {
     return hostGeneratorInternal(host, {
         projectNameAndRootFormat: 'derived',
@@ -78,6 +79,7 @@ async function hostGeneratorInternal(host, schema) {
     if (!options.setParserOptionsProject) {
         host.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.lint.json'));
     }
+    (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(host);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(host);
     }

package/src/generators/remote/remote.js

@@ -11,6 +11,7 @@ const setup_ssr_1 = require("../setup-ssr/setup-ssr");
 const setup_ssr_for_remote_1 = require("./lib/setup-ssr-for-remote");
 const setup_tspath_for_remote_1 = require("./lib/setup-tspath-for-remote");
 const add_remote_to_dynamic_host_1 = require("./lib/add-remote-to-dynamic-host");
+const add_mf_env_to_inputs_1 = require("../../utils/add-mf-env-to-inputs");
 function addModuleFederationFiles(host, options) {
     const templateVariables = {
         ...(0, devkit_1.names)(options.name),
@@ -85,6 +86,7 @@ async function remoteGeneratorInternal(host, schema) {
         const pathToMFManifest = (0, devkit_1.joinPathFragments)(hostConfig.sourceRoot, 'assets/module-federation.manifest.json');
         (0, add_remote_to_dynamic_host_1.addRemoteToDynamicHost)(host, options.name, options.devServerPort, pathToMFManifest);
     }
+    (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(host);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(host);
     }

package/src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults.d.ts

@@ -0,0 +1,2 @@
+import { type Tree } from '@nx/devkit';
+export default function (tree: Tree): Promise<void>;

package/src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const devkit_1 = require("@nx/devkit");
+const add_mf_env_to_inputs_1 = require("../../utils/add-mf-env-to-inputs");
+async function default_1(tree) {
+    if (!hasModuleFederationProject(tree)) {
+        return;
+    }
+    (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(tree);
+    await (0, devkit_1.formatFiles)(tree);
+}
+exports.default = default_1;
+function hasModuleFederationProject(tree) {
+    const projects = (0, devkit_1.getProjects)(tree);
+    for (const project of projects.values()) {
+        const targets = project.targets;
+        for (const [_, target] of Object.entries(targets)) {
+            if (target.executor === '@nx/webpack:webpack' &&
+                (tree.exists((0, devkit_1.joinPathFragments)(project.root, 'module-federation.config.ts')) ||
+                    tree.exists((0, devkit_1.joinPathFragments)(project.root, 'module-federation.config.js')))) {
+                return true;
+            }
+        }
+    }
+    return false;
+}

package/src/utils/add-mf-env-to-inputs.d.ts

@@ -0,0 +1,2 @@
+import { type Tree } from '@nx/devkit';
+export declare function addMfEnvToTargetDefaultInputs(tree: Tree): void;

package/src/utils/add-mf-env-to-inputs.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addMfEnvToTargetDefaultInputs = void 0;
+const devkit_1 = require("@nx/devkit");
+function addMfEnvToTargetDefaultInputs(tree) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    const webpackExecutor = '@nx/webpack:webpack';
+    const mfEnvVar = 'NX_MF_DEV_SERVER_STATIC_REMOTES';
+    nxJson.targetDefaults ??= {};
+    nxJson.targetDefaults[webpackExecutor] ??= {};
+    nxJson.targetDefaults[webpackExecutor].inputs ??= [];
+    let mfEnvVarExists = false;
+    for (const input of nxJson.targetDefaults[webpackExecutor].inputs) {
+        if (typeof input === 'object' && input['env'] === mfEnvVar) {
+            mfEnvVarExists = true;
+            break;
+        }
+    }
+    if (!mfEnvVarExists) {
+        nxJson.targetDefaults[webpackExecutor].inputs.push({ env: mfEnvVar });
+        (0, devkit_1.updateNxJson)(tree, nxJson);
+    }
+}
+exports.addMfEnvToTargetDefaultInputs = addMfEnvToTargetDefaultInputs;