@nx/react 0.0.0-pr-29314-bfd9d0c → 0.0.0-pr-29636-b148ccc

package/LICENSE

@@ -1,6 +1,6 @@
 (The MIT License)
 
-Copyright (c) 2017-2024 Narwhal Technologies Inc.
+Copyright (c) 2017-2025 Narwhal Technologies Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

package/migrations.json

@@ -41,6 +41,18 @@
       "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"
+    },
+    "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"
+    },
+    "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"
     }
   },
   "packageJsonUpdates": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "0.0.0-pr-29314-bfd9d0c",
+  "version": "0.0.0-pr-29636-b148ccc",
   "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": "0.0.0-pr-29314-bfd9d0c",
-    "@nx/js": "0.0.0-pr-29314-bfd9d0c",
-    "@nx/eslint": "0.0.0-pr-29314-bfd9d0c",
-    "@nx/web": "0.0.0-pr-29314-bfd9d0c",
-    "@nx/module-federation": "0.0.0-pr-29314-bfd9d0c",
+    "@nx/devkit": "0.0.0-pr-29636-b148ccc",
+    "@nx/js": "0.0.0-pr-29636-b148ccc",
+    "@nx/eslint": "0.0.0-pr-29636-b148ccc",
+    "@nx/web": "0.0.0-pr-29636-b148ccc",
+    "@nx/module-federation": "0.0.0-pr-29636-b148ccc",
     "express": "^4.19.2",
     "http-proxy-middleware": "^3.0.3"
   },

package/plugins/jest.js

@@ -16,17 +16,12 @@ module.exports = {
       module.exports = {
         __esModule: true,
         default: ${assetFilename},
-        ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
-          return {
-            $$typeof: Symbol.for('react.element'),
-            type: 'svg',
-            ref: ref,
-            key: null,
-            props: Object.assign({}, props, {
-              children: ${assetFilename}
-            })
-          };
-        }),
+        ReactComponent: function ${componentName}(props) {
+          return React.createElement(
+            'svg',
+            Object.assign({}, props, { children: ${assetFilename} })
+          );
+        },
       };`,
             };
         }

package/src/generators/application/lib/add-e2e.js

@@ -13,7 +13,8 @@ const target_defaults_utils_1 = require("@nx/devkit/src/generators/target-defaul
 async function addE2e(tree, options) {
     const hasNxBuildPlugin = (options.bundler === 'webpack' && (0, has_webpack_plugin_1.hasWebpackPlugin)(tree)) ||
         (options.bundler === 'rspack' && (0, has_rspack_plugin_1.hasRspackPlugin)(tree)) ||
-        (options.bundler === 'rsbuild' && (0, has_rsbuild_plugin_1.hasRsbuildPlugin)(tree)) ||
+        (options.bundler === 'rsbuild' &&
+            (await (0, has_rsbuild_plugin_1.hasRsbuildPlugin)(tree, options.appProjectRoot))) ||
         (options.bundler === 'vite' && (0, has_vite_plugin_1.hasVitePlugin)(tree));
     let e2eWebServerInfo = {
         e2eWebServerAddress: `http://localhost:${options.devServerPort ?? 4200}`,

package/src/generators/host/host.js

@@ -104,9 +104,10 @@ async function hostGenerator(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);
+    (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(host, options.bundler);
     const installTask = (0, devkit_1.addDependenciesToPackageJson)(host, { '@module-federation/enhanced': versions_1.moduleFederationEnhancedVersion }, {
         '@nx/web': versions_1.nxVersion,
+        '@nx/module-federation': versions_1.nxVersion,
     });
     tasks.push(installTask);
     if (!options.skipFormat) {

package/src/generators/library/lib/determine-entry-fields.d.ts

@@ -0,0 +1,3 @@
+import type { PackageJson } from 'nx/src/utils/package-json';
+import type { NormalizedSchema } from '../schema';
+export declare function determineEntryFields(options: NormalizedSchema): Pick<PackageJson, 'main' | 'types' | 'exports'>;

package/src/generators/library/lib/determine-entry-fields.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.determineEntryFields = determineEntryFields;
+function determineEntryFields(options) {
+    if (options.bundler !== 'none') {
+        return {};
+    }
+    return {
+        main: options.js ? './src/index.js' : './src/index.ts',
+        types: options.js ? './src/index.js' : './src/index.ts',
+        exports: {
+            '.': options.js
+                ? './src/index.js'
+                : {
+                    types: './src/index.ts',
+                    import: './src/index.ts',
+                    default: './src/index.ts',
+                },
+            './package.json': './package.json',
+        },
+    };
+}

package/src/generators/library/library.js

@@ -21,7 +21,7 @@ const create_ts_config_1 = require("../../utils/create-ts-config");
 const install_common_dependencies_1 = require("./lib/install-common-dependencies");
 const set_defaults_1 = require("./lib/set-defaults");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
-const plugin_1 = require("@nx/js/src/utils/typescript/plugin");
+const determine_entry_fields_1 = require("./lib/determine-entry-fields");
 async function libraryGenerator(host, schema) {
     return await libraryGeneratorInternal(host, {
         addPlugin: false,
@@ -48,16 +48,10 @@ async function libraryGeneratorInternal(host, schema) {
     });
     tasks.push(initTask);
     if (options.isUsingTsSolutionConfig) {
-        const sourceEntry = options.bundler === 'none'
-            ? options.js
-                ? './src/index.js'
-                : './src/index.ts'
-            : undefined;
         (0, devkit_1.writeJson)(host, `${options.projectRoot}/package.json`, {
             name: options.importPath,
             version: '0.0.1',
-            main: sourceEntry,
-            types: sourceEntry,
+            ...(0, determine_entry_fields_1.determineEntryFields)(options),
             nx: {
                 name: options.importPath === options.name ? undefined : options.name,
                 projectType: 'library',
@@ -117,11 +111,6 @@ async function libraryGeneratorInternal(host, schema) {
         const rollupTask = await (0, add_rollup_build_target_1.addRollupBuildTarget)(host, options);
         tasks.push(rollupTask);
     }
-    else if (options.bundler === 'none' && options.addPlugin) {
-        const nxJson = (0, devkit_1.readNxJson)(host);
-        (0, plugin_1.ensureProjectIsExcludedFromPluginRegistrations)(nxJson, options.projectRoot);
-        (0, devkit_1.updateNxJson)(host, nxJson);
-    }
     // Set up test target
     if (options.unitTestRunner === 'jest') {
         const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/jest', versions_1.nxVersion);

package/src/generators/remote/remote.js

@@ -122,10 +122,11 @@ async function remoteGenerator(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.projectName, options.devServerPort, pathToMFManifest);
     }
-    (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(host);
+    (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(host, options.bundler);
     const installTask = (0, devkit_1.addDependenciesToPackageJson)(host, {}, {
         '@module-federation/enhanced': versions_1.moduleFederationEnhancedVersion,
         '@nx/web': versions_1.nxVersion,
+        '@nx/module-federation': versions_1.nxVersion,
     });
     tasks.push(installTask);
     if (!options.skipFormat) {

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

@@ -4,10 +4,11 @@ exports.default = default_1;
 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)) {
+    const bundler = hasModuleFederationProject(tree);
+    if (!bundler) {
         return;
     }
-    (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(tree);
+    (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(tree, bundler);
     await (0, devkit_1.formatFiles)(tree);
 }
 function hasModuleFederationProject(tree) {
@@ -15,10 +16,14 @@ function hasModuleFederationProject(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;
+            if (tree.exists((0, devkit_1.joinPathFragments)(project.root, 'module-federation.config.ts')) ||
+                tree.exists((0, devkit_1.joinPathFragments)(project.root, 'module-federation.config.js'))) {
+                if (target.executor === '@nx/webpack:webpack') {
+                    return 'webpack';
+                }
+                else if (target.executor === '@nx/rspack:rspack') {
+                    return 'rspack';
+                }
             }
         }
     }

package/src/migrations/update-20-2-0/migrate-with-mf-import-to-new-package.js

@@ -4,6 +4,7 @@ exports.default = migrateWithMfImport;
 const devkit_1 = require("@nx/devkit");
 const executor_options_utils_1 = require("@nx/devkit/src/generators/executor-options-utils");
 const tsquery_1 = require("@phenomnomnominal/tsquery");
+const versions_1 = require("../../utils/versions");
 const NX_RSPACK_MODULE_FEDERATION_IMPORT_SELECTOR = 'ImportDeclaration > StringLiteral[value=@nx/react/module-federation], VariableStatement CallExpression:has(Identifier[name=require]) > StringLiteral[value=@nx/react/module-federation]';
 const NEW_IMPORT_PATH = `'@nx/module-federation/webpack'`;
 async function migrateWithMfImport(tree) {
@@ -31,5 +32,10 @@ async function migrateWithMfImport(tree) {
             tree.write(filePath, contents);
         });
     }
+    if (projects.size !== 0) {
+        (0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
+            '@nx/module-federation': versions_1.nxVersion,
+        });
+    }
     await (0, devkit_1.formatFiles)(tree);
 }

package/src/migrations/update-20-3-0/ensure-nx-module-federation-package.d.ts

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

package/src/migrations/update-20-3-0/ensure-nx-module-federation-package.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ensureMfPackage;
+const devkit_1 = require("@nx/devkit");
+const executor_options_utils_1 = require("@nx/devkit/src/generators/executor-options-utils");
+const versions_1 = require("../../utils/versions");
+async function ensureMfPackage(tree) {
+    const projects = new Set();
+    (0, executor_options_utils_1.forEachExecutorOptions)(tree, '@nx/react:module-federation-dev-server', (options, project, target) => {
+        const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, project);
+        projects.add(projectConfig.root);
+    });
+    if (projects.size !== 0) {
+        (0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
+            '@nx/module-federation': versions_1.nxVersion,
+        });
+    }
+}

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

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

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

@@ -2,27 +2,24 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addMfEnvToTargetDefaultInputs = addMfEnvToTargetDefaultInputs;
 const devkit_1 = require("@nx/devkit");
-function addMfEnvToTargetDefaultInputs(tree) {
+function addMfEnvToTargetDefaultInputs(tree, bundler) {
     const nxJson = (0, devkit_1.readNxJson)(tree);
-    const webpackExecutor = '@nx/webpack:webpack';
+    const executor = bundler === 'rspack' ? '@nx/rspack:rspack' : '@nx/webpack:webpack';
     const mfEnvVar = 'NX_MF_DEV_REMOTES';
     nxJson.targetDefaults ??= {};
-    nxJson.targetDefaults[webpackExecutor] ??= {};
-    nxJson.targetDefaults[webpackExecutor].inputs ??= [
-        'production',
-        '^production',
-    ];
-    nxJson.targetDefaults[webpackExecutor].dependsOn ??= ['^build'];
+    nxJson.targetDefaults[executor] ??= {};
+    nxJson.targetDefaults[executor].inputs ??= ['production', '^production'];
+    nxJson.targetDefaults[executor].dependsOn ??= ['^build'];
     let mfEnvVarExists = false;
-    for (const input of nxJson.targetDefaults[webpackExecutor].inputs) {
+    for (const input of nxJson.targetDefaults[executor].inputs) {
         if (typeof input === 'object' && input['env'] === mfEnvVar) {
             mfEnvVarExists = true;
             break;
         }
     }
     if (!mfEnvVarExists) {
-        nxJson.targetDefaults[webpackExecutor].inputs.push({ env: mfEnvVar });
+        nxJson.targetDefaults[executor].inputs.push({ env: mfEnvVar });
     }
-    nxJson.targetDefaults[webpackExecutor].cache = true;
+    nxJson.targetDefaults[executor].cache = true;
     (0, devkit_1.updateNxJson)(tree, nxJson);
 }

package/src/utils/has-rsbuild-plugin.d.ts

@@ -1,2 +1,2 @@
 import { Tree } from '@nx/devkit';
-export declare function hasRsbuildPlugin(tree: Tree): boolean;
+export declare function hasRsbuildPlugin(tree: Tree, projectPath?: string): Promise<boolean>;

package/src/utils/has-rsbuild-plugin.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.hasRsbuildPlugin = hasRsbuildPlugin;
 const devkit_1 = require("@nx/devkit");
-function hasRsbuildPlugin(tree) {
-    const nxJson = (0, devkit_1.readNxJson)(tree);
-    return !!nxJson.plugins?.some((p) => typeof p === 'string'
-        ? p === '@nx/rsbuild/plugin'
-        : p.plugin === '@nx/rsbuild/plugin');
+const versions_1 = require("./versions");
+async function hasRsbuildPlugin(tree, projectPath) {
+    (0, devkit_1.ensurePackage)('@nx/rsbuild', versions_1.nxVersion);
+    const { hasRsbuildPlugin } = await Promise.resolve().then(() => require('@nx/rsbuild/config-utils'));
+    return hasRsbuildPlugin(tree, projectPath);
 }

package/src/utils/versions.d.ts

@@ -35,8 +35,8 @@ export declare const typesExpressVersion = "4.17.17";
 export declare const isbotVersion = "^3.6.5";
 export declare const corsVersion = "~2.8.5";
 export declare const typesCorsVersion = "~2.8.12";
-export declare const moduleFederationNodeVersion = "~2.6.11";
-export declare const moduleFederationEnhancedVersion = "0.7.6";
+export declare const moduleFederationNodeVersion = "^2.6.21";
+export declare const moduleFederationEnhancedVersion = "^0.8.8";
 export declare const lessVersion = "3.12.2";
 export declare const sassVersion = "^1.55.0";
 export declare const rollupPluginUrlVersion = "^8.0.2";

package/src/utils/versions.js

@@ -40,8 +40,8 @@ exports.typesExpressVersion = '4.17.17';
 exports.isbotVersion = '^3.6.5';
 exports.corsVersion = '~2.8.5';
 exports.typesCorsVersion = '~2.8.12';
-exports.moduleFederationNodeVersion = '~2.6.11';
-exports.moduleFederationEnhancedVersion = '0.7.6';
+exports.moduleFederationNodeVersion = '^2.6.21';
+exports.moduleFederationEnhancedVersion = '^0.8.8';
 // style preprocessors
 exports.lessVersion = '3.12.2';
 exports.sassVersion = '^1.55.0';