@nx/react 19.4.1 → 19.5.0-beta.0

package/babel.d.ts

@@ -1,13 +1,17 @@
 interface NxReactBabelOptions {
-    development?: boolean;
-    runtime?: string;
-    importSource?: string;
-    useBuiltIns?: boolean | string;
     decorators?: {
         decoratorsBeforeExport?: boolean;
         legacy?: boolean;
     };
+    development?: boolean;
+    importSource?: string;
     loose?: boolean;
+    reactCompiler?: boolean | {
+        compilationMode?: string;
+        sources?: (filename: string) => boolean;
+    };
+    runtime?: string;
+    useBuiltIns?: boolean | string;
     /** @deprecated Use `loose` option instead of `classProperties.loose`
      */
     classProperties?: {

package/babel.js

@@ -8,7 +8,10 @@ module.exports = function (api, options) {
      * pagesDir is set when being transpiled by Next.js
      */
     const isNextJs = api.caller((caller) => caller?.pagesDir);
-    const presets = [[require.resolve('@nx/js/babel'), options]];
+    const presets = [
+        [require.resolve('@nx/js/babel'), options],
+    ];
+    const plugins = [];
     /**
      * Next.js already includes the preset-react, and including it
      * the second time here results in having two instances of this preset.
@@ -29,8 +32,21 @@ module.exports = function (api, options) {
             }),
         ]);
     }
+    if (options.reactCompiler) {
+        try {
+            const reactCompilerPlugin = require.resolve('babel-plugin-react-compiler');
+            plugins.push([
+                reactCompilerPlugin,
+                typeof options.reactCompiler !== 'boolean' ? options.reactCompiler : {},
+            ]);
+        }
+        catch {
+            throw new Error(`Could not find "babel-plugin-react-compiler". Did you install it?`);
+        }
+    }
     return {
         presets,
+        plugins,
     };
 };
 function getReactPresetOptions({ presetOptions, env, }) {

package/migrations.json

@@ -202,6 +202,15 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "19.5.0-module-federation": {
+      "version": "19.5.0-beta.0",
+      "packages": {
+        "@module-federation/node": {
+          "version": "^2.3.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "19.4.1",
+  "version": "19.5.0-beta.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,12 @@
     "file-loader": "^6.2.0",
     "minimatch": "9.0.3",
     "tslib": "^2.3.0",
-    "@nx/devkit": "19.4.1",
-    "@nx/js": "19.4.1",
-    "@nx/eslint": "19.4.1",
-    "@nx/web": "19.4.1",
-    "@nrwl/react": "19.4.1"
+    "@module-federation/enhanced": "~0.2.3",
+    "@nx/devkit": "19.5.0-beta.0",
+    "@nx/js": "19.5.0-beta.0",
+    "@nx/eslint": "19.5.0-beta.0",
+    "@nx/web": "19.5.0-beta.0",
+    "@nrwl/react": "19.5.0-beta.0"
   },
   "publishConfig": {
     "access": "public"

package/src/generators/host/host.js

@@ -13,6 +13,7 @@ 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");
 const js_1 = require("@nx/js");
+const versions_1 = require("../../utils/versions");
 async function hostGenerator(host, schema) {
     return hostGeneratorInternal(host, {
         projectNameAndRootFormat: 'derived',
@@ -97,6 +98,8 @@ async function hostGeneratorInternal(host, schema) {
         host.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.lint.json'));
     }
     (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(host);
+    const installTask = (0, devkit_1.addDependenciesToPackageJson)(host, {}, { '@module-federation/enhanced': versions_1.moduleFederationEnhancedVersion });
+    tasks.push(installTask);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(host);
     }

package/src/generators/remote/remote.js

@@ -14,6 +14,7 @@ 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");
 const maybe_js_1 = require("../../utils/maybe-js");
 const js_1 = require("@nx/js");
+const versions_1 = require("../../utils/versions");
 function addModuleFederationFiles(host, options) {
     const templateVariables = {
         ...(0, devkit_1.names)(options.name),
@@ -104,6 +105,8 @@ async function remoteGeneratorInternal(host, schema) {
         (0, add_remote_to_dynamic_host_1.addRemoteToDynamicHost)(host, options.name, options.devServerPort, pathToMFManifest);
     }
     (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(host);
+    const installTask = (0, devkit_1.addDependenciesToPackageJson)(host, {}, { '@module-federation/enhanced': versions_1.moduleFederationEnhancedVersion });
+    tasks.push(installTask);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(host);
     }

package/src/module-federation/with-module-federation-ssr.d.ts

@@ -1,2 +1,2 @@
-import { ModuleFederationConfig } from '@nx/webpack/src/utils/module-federation';
-export declare function withModuleFederationForSSR(options: ModuleFederationConfig): Promise<(config: any) => any>;
+import { ModuleFederationConfig, NxModuleFederationConfigOverride } from '@nx/webpack/src/utils/module-federation';
+export declare function withModuleFederationForSSR(options: ModuleFederationConfig, configOverride?: NxModuleFederationConfigOverride): Promise<(config: any) => any>;

package/src/module-federation/with-module-federation-ssr.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withModuleFederationForSSR = void 0;
 const utils_1 = require("./utils");
-async function withModuleFederationForSSR(options) {
+async function withModuleFederationForSSR(options, configOverride) {
     if (global.NX_GRAPH_CREATION) {
         return (config) => config;
     }
@@ -27,6 +27,10 @@ async function withModuleFederationForSSR(options) {
                 type: 'commonjs-module',
             },
             isServer: true,
+            /**
+             * Apply user-defined config overrides
+             */
+            ...(configOverride ? configOverride : {}),
         }, {}), sharedLibraries.getReplacementPlugin());
         return config;
     };

package/src/module-federation/with-module-federation.d.ts

@@ -1,7 +1,7 @@
-import { ModuleFederationConfig } from '@nx/webpack/src/utils/module-federation';
+import { ModuleFederationConfig, NxModuleFederationConfigOverride } from '@nx/webpack/src/utils/module-federation';
 import type { AsyncNxComposableWebpackPlugin } from '@nx/webpack';
 /**
  * @param {ModuleFederationConfig} options
  * @return {Promise<AsyncNxComposableWebpackPlugin>}
  */
-export declare function withModuleFederation(options: ModuleFederationConfig): Promise<AsyncNxComposableWebpackPlugin>;
+export declare function withModuleFederation(options: ModuleFederationConfig, configOverride?: NxModuleFederationConfigOverride): Promise<AsyncNxComposableWebpackPlugin>;

package/src/module-federation/with-module-federation.js

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withModuleFederation = void 0;
 const utils_1 = require("./utils");
-const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
+const webpack_1 = require("@module-federation/enhanced/webpack");
 const isVarOrWindow = (libType) => libType === 'var' || libType === 'window';
 /**
  * @param {ModuleFederationConfig} options
  * @return {Promise<AsyncNxComposableWebpackPlugin>}
  */
-async function withModuleFederation(options) {
+async function withModuleFederation(options, configOverride) {
     if (global.NX_GRAPH_CREATION) {
         return (config) => config;
     }
@@ -32,7 +32,7 @@ async function withModuleFederation(options) {
             ...config.experiments,
             outputModule: !isGlobal,
         };
-        config.plugins.push(new ModuleFederationPlugin({
+        config.plugins.push(new webpack_1.ModuleFederationPlugin({
             name: options.name,
             library: options.library ?? { type: 'module' },
             filename: 'remoteEntry.js',
@@ -48,6 +48,10 @@ async function withModuleFederation(options) {
              *  { appY: 'appY@http://localhost:3002/remoteEntry.js' }
              */
             ...(isGlobal ? { remoteType: 'script' } : {}),
+            /**
+             * Apply user-defined config overrides
+             */
+            ...(configOverride ? configOverride : {}),
         }), sharedLibraries.getReplacementPlugin());
         return config;
     };

package/src/utils/versions.d.ts

@@ -36,7 +36,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 = "~0.9.9";
+export declare const moduleFederationNodeVersion = "^2.3.0";
+export declare const moduleFederationEnhancedVersion = "~0.2.3";
 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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.swcPluginStyledComponentsVersion = exports.swcPluginEmotionVersion = exports.swcPluginStyledJsxVersion = exports.svgrRollupVersion = exports.rollupPluginUrlVersion = exports.sassVersion = exports.lessVersion = exports.moduleFederationNodeVersion = exports.typesCorsVersion = exports.corsVersion = exports.isbotVersion = exports.typesExpressVersion = exports.expressVersion = exports.autoprefixerVersion = exports.tailwindcssVersion = exports.postcssVersion = exports.tsLibVersion = exports.babelPluginStyledComponentsVersion = exports.eslintPluginReactHooksVersion = exports.eslintPluginReactVersion = exports.eslintPluginJsxA11yVersion = exports.eslintPluginImportVersion = exports.reactTestRendererVersion = exports.reactReduxVersion = exports.reduxjsToolkitVersion = exports.testingLibraryReactVersion = exports.reactRouterDomVersion = exports.styledJsxVersion = exports.emotionBabelPlugin = exports.emotionReactVersion = exports.emotionStyledVersion = exports.typesStyledComponentsVersion = exports.styledComponentsVersion = exports.babelCoreVersion = exports.babelPresetReactVersion = exports.typesNodeVersion = exports.typesReactIsVersion = exports.typesReactDomVersion = exports.typesReactVersion = exports.babelLoaderVersion = exports.swcLoaderVersion = exports.reactIsVersion = exports.reactDomVersion = exports.reactVersion = exports.nxRspackVersion = exports.nxVersion = void 0;
+exports.swcPluginStyledComponentsVersion = exports.swcPluginEmotionVersion = exports.swcPluginStyledJsxVersion = exports.svgrRollupVersion = exports.rollupPluginUrlVersion = exports.sassVersion = exports.lessVersion = exports.moduleFederationEnhancedVersion = exports.moduleFederationNodeVersion = exports.typesCorsVersion = exports.corsVersion = exports.isbotVersion = exports.typesExpressVersion = exports.expressVersion = exports.autoprefixerVersion = exports.tailwindcssVersion = exports.postcssVersion = exports.tsLibVersion = exports.babelPluginStyledComponentsVersion = exports.eslintPluginReactHooksVersion = exports.eslintPluginReactVersion = exports.eslintPluginJsxA11yVersion = exports.eslintPluginImportVersion = exports.reactTestRendererVersion = exports.reactReduxVersion = exports.reduxjsToolkitVersion = exports.testingLibraryReactVersion = exports.reactRouterDomVersion = exports.styledJsxVersion = exports.emotionBabelPlugin = exports.emotionReactVersion = exports.emotionStyledVersion = exports.typesStyledComponentsVersion = exports.styledComponentsVersion = exports.babelCoreVersion = exports.babelPresetReactVersion = exports.typesNodeVersion = exports.typesReactIsVersion = exports.typesReactDomVersion = exports.typesReactVersion = exports.babelLoaderVersion = exports.swcLoaderVersion = exports.reactIsVersion = exports.reactDomVersion = exports.reactVersion = exports.nxRspackVersion = exports.nxVersion = void 0;
 exports.nxVersion = require('../../package.json').version;
 // Always pull the latest version until we merge rspack plugin into the repo.
 exports.nxRspackVersion = '*';
@@ -42,7 +42,8 @@ exports.typesExpressVersion = '4.17.17';
 exports.isbotVersion = '^3.6.5';
 exports.corsVersion = '~2.8.5';
 exports.typesCorsVersion = '~2.8.12';
-exports.moduleFederationNodeVersion = '~0.9.9';
+exports.moduleFederationNodeVersion = '^2.3.0';
+exports.moduleFederationEnhancedVersion = '~0.2.3';
 // style preprocessors
 exports.lessVersion = '3.12.2';
 exports.sassVersion = '^1.55.0';