@nx/react 20.2.0-canary.20241122-a1efb63 → 20.2.0-canary.20241123-128778e

package/migrations.json

@@ -35,6 +35,12 @@
       "version": "20.2.0-beta.2",
       "description": "Update the ModuleFederationConfig import use @nx/module-federation.",
       "factory": "./src/migrations/update-20-2-0/migrate-mf-imports-to-new-package"
+    },
+    "update-20-2-0-update-with-module-federation-import": {
+      "cli": "nx",
+      "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"
     }
   },
   "packageJsonUpdates": {

package/module-federation.d.ts

@@ -1,4 +1,6 @@
-import { withModuleFederation } from './src/module-federation/with-module-federation';
-import { withModuleFederationForSSR } from './src/module-federation/with-module-federation-ssr';
-export { withModuleFederation };
-export { withModuleFederationForSSR };
+import { withModuleFederation } from '@nx/module-federation/webpack';
+import { withModuleFederationForSSR } from '@nx/module-federation/webpack';
+/**
+ * @deprecated Use `@nx/module-federation/webpack` instead. This will be removed in Nx v22.
+ */
+export { withModuleFederation, withModuleFederationForSSR };

package/module-federation.js

@@ -1,12 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withModuleFederationForSSR = exports.withModuleFederation = void 0;
-const with_module_federation_1 = require("./src/module-federation/with-module-federation");
-Object.defineProperty(exports, "withModuleFederation", { enumerable: true, get: function () { return with_module_federation_1.withModuleFederation; } });
-const with_module_federation_ssr_1 = require("./src/module-federation/with-module-federation-ssr");
-Object.defineProperty(exports, "withModuleFederationForSSR", { enumerable: true, get: function () { return with_module_federation_ssr_1.withModuleFederationForSSR; } });
+const webpack_1 = require("@nx/module-federation/webpack");
+Object.defineProperty(exports, "withModuleFederation", { enumerable: true, get: function () { return webpack_1.withModuleFederation; } });
+const webpack_2 = require("@nx/module-federation/webpack");
+Object.defineProperty(exports, "withModuleFederationForSSR", { enumerable: true, get: function () { return webpack_2.withModuleFederationForSSR; } });
 // Support for older generated code: `const withModuleFederation = require('@nx/react/module-federation')`
-module.exports = with_module_federation_1.withModuleFederation;
+/**
+ * @deprecated Use `@nx/module-federation/webpack` instead. This will be removed in Nx v22.
+ */
+module.exports = webpack_1.withModuleFederation;
 // Allow newer generated code to work: `const { withModuleFederation } = require(...)`;
-module.exports.withModuleFederation = with_module_federation_1.withModuleFederation;
-module.exports.withModuleFederationForSSR = with_module_federation_ssr_1.withModuleFederationForSSR;
+/**
+ * @deprecated Use `@nx/module-federation/webpack` instead. This will be removed in Nx v22.
+ */
+module.exports.withModuleFederation = webpack_1.withModuleFederation;
+/**
+ * @deprecated Use `@nx/module-federation/webpack` instead. This will be removed in Nx v22.
+ */
+module.exports.withModuleFederationForSSR = webpack_2.withModuleFederationForSSR;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "20.2.0-canary.20241122-a1efb63",
+  "version": "20.2.0-canary.20241123-128778e",
   "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,12 +38,11 @@
     "minimatch": "9.0.3",
     "picocolors": "^1.1.0",
     "tslib": "^2.3.0",
-    "@module-federation/enhanced": "0.7.6",
-    "@nx/devkit": "20.2.0-canary.20241122-a1efb63",
-    "@nx/js": "20.2.0-canary.20241122-a1efb63",
-    "@nx/eslint": "20.2.0-canary.20241122-a1efb63",
-    "@nx/web": "20.2.0-canary.20241122-a1efb63",
-    "@nx/module-federation": "20.2.0-canary.20241122-a1efb63",
+    "@nx/devkit": "20.2.0-canary.20241123-128778e",
+    "@nx/js": "20.2.0-canary.20241123-128778e",
+    "@nx/eslint": "20.2.0-canary.20241123-128778e",
+    "@nx/web": "20.2.0-canary.20241123-128778e",
+    "@nx/module-federation": "20.2.0-canary.20241123-128778e",
     "express": "^4.19.2",
     "http-proxy-middleware": "^3.0.3"
   },

package/src/generators/application/application.js

@@ -15,7 +15,6 @@ const devkit_1 = require("@nx/devkit");
 const init_1 = require("../init/init");
 const eslint_1 = require("@nx/eslint");
 const versions_1 = require("../../utils/versions");
-const maybe_js_1 = require("../../utils/maybe-js");
 const install_common_dependencies_1 = require("./lib/install-common-dependencies");
 const create_ts_config_1 = require("../../utils/create-ts-config");
 const add_swc_dependencies_1 = require("@nx/js/src/utils/swc/add-swc-dependencies");
@@ -28,7 +27,6 @@ const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-projec
 const setup_tailwind_1 = require("../setup-tailwind/setup-tailwind");
 const flat_config_1 = require("@nx/eslint/src/utils/flat-config");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
-const add_project_root_to_rspack_plugin_excludes_1 = require("./lib/add-project-root-to-rspack-plugin-excludes");
 async function addLinting(host, options) {
     const tasks = [];
     if (options.linter === eslint_1.Linter.EsLint) {
@@ -116,6 +114,15 @@ async function applicationGeneratorInternal(host, schema) {
             tasks.push(ensureDependencies(host, { uiFramework: 'react' }));
         }
     }
+    else if (options.bundler === 'rspack') {
+        const { rspackInitGenerator } = (0, devkit_1.ensurePackage)('@nx/rspack', versions_1.nxRspackVersion);
+        const rspackInitTask = await rspackInitGenerator(host, {
+            ...options,
+            addPlugin: false,
+            skipFormat: true,
+        });
+        tasks.push(rspackInitTask);
+    }
     if (!options.rootProject) {
         (0, create_ts_config_1.extractTsConfigBase)(host);
     }
@@ -163,22 +170,6 @@ async function applicationGeneratorInternal(host, schema) {
             plugins: ['react()'],
         }, false);
     }
-    else if (options.bundler === 'rspack') {
-        const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/rspack', versions_1.nxRspackVersion);
-        const rspackTask = await configurationGenerator(host, {
-            project: options.projectName,
-            main: (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)({
-                js: options.js,
-                useJsx: true,
-            }, `src/main.tsx`)),
-            tsConfig: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
-            target: 'web',
-            newProject: true,
-            framework: 'react',
-        });
-        tasks.push(rspackTask);
-        (0, add_project_root_to_rspack_plugin_excludes_1.addProjectRootToRspackPluginExcludesIfExists)(host, options.appProjectRoot);
-    }
     if (options.bundler !== 'vite' && options.unitTestRunner === 'vitest') {
         const { createOrEditViteConfig, vitestGenerator } = (0, devkit_1.ensurePackage)('@nx/vite', versions_1.nxVersion);
         const vitestTask = await vitestGenerator(host, {

package/src/generators/application/files/base-rspack/rspack.config.js__tmpl__

@@ -0,0 +1,53 @@
+<%_ if (rspackPluginOptions) { _%>
+const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin');
+const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin');
+const { join } = require('path');
+
+module.exports = {
+  output: {
+    path: join(__dirname, '<%= offsetFromRoot %><%= rspackPluginOptions.outputPath %>'),
+  },
+  devServer: {
+    port: 4200,
+    historyApiFallback: {
+      index: '/index.html',
+      disableDotRule: true,
+      htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
+    },
+  },
+  plugins: [
+    new NxAppRspackPlugin({
+      tsConfig: '<%= rspackPluginOptions.tsConfig %>',
+      main: '<%= rspackPluginOptions.main %>',
+      index: '<%= rspackPluginOptions.index %>',
+      baseHref: '<%= rspackPluginOptions.baseHref %>',
+      assets: <%- JSON.stringify(rspackPluginOptions.assets) %>,
+      styles: <%- JSON.stringify(rspackPluginOptions.styles) %>,
+      outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',
+      optimization: process.env['NODE_ENV'] === 'production',
+    }),
+    new NxReactRspackPlugin({
+      // Uncomment this line if you don't want to use SVGR
+      // See: https://react-svgr.com/
+      // svgr: false
+    }),
+  ],
+};
+<%_ } else { _%>
+const { composePlugins, withNx, withReact } = require('@nx/rspack');
+
+// Nx plugins for rspack.
+module.exports = composePlugins(
+  withNx(),
+  withReact({
+    // Uncomment this line if you don't want to use SVGR
+    // See: https://react-svgr.com/
+    // svgr: false
+  }),
+  (config) => {
+    // Update the rspack config as needed here.
+    // e.g. `config.plugins.push(new MyPlugin())`
+    return config;
+  }
+);
+<%_ } _%>

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

@@ -6,10 +6,12 @@ const web_1 = require("@nx/web");
 const versions_1 = require("../../../utils/versions");
 const has_webpack_plugin_1 = require("../../../utils/has-webpack-plugin");
 const has_vite_plugin_1 = require("../../../utils/has-vite-plugin");
+const has_rspack_plugin_1 = require("../../../utils/has-rspack-plugin");
 const find_plugin_for_config_file_1 = require("@nx/devkit/src/utils/find-plugin-for-config-file");
 const target_defaults_utils_1 = require("@nx/devkit/src/generators/target-defaults-utils");
 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 === 'vite' && (0, has_vite_plugin_1.hasVitePlugin)(tree));
     let e2eWebServerInfo = {
         e2eWebServerAddress: `http://localhost:${options.devServerPort ?? 4200}`,

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

@@ -4,6 +4,7 @@ exports.addProject = addProject;
 const devkit_1 = require("@nx/devkit");
 const has_webpack_plugin_1 = require("../../../utils/has-webpack-plugin");
 const maybe_js_1 = require("../../../utils/maybe-js");
+const has_rspack_plugin_1 = require("../../../utils/has-rspack-plugin");
 function addProject(host, options) {
     const project = {
         root: options.appProjectRoot,
@@ -20,10 +21,75 @@ function addProject(host, options) {
             };
         }
     }
+    else if (options.bundler === 'rspack' &&
+        (!(0, has_rspack_plugin_1.hasRspackPlugin)(host) || !options.addPlugin)) {
+        project.targets = {
+            build: createRspackBuildTarget(options),
+            serve: createRspackServeTarget(options),
+        };
+    }
     (0, devkit_1.addProjectConfiguration)(host, options.projectName, {
         ...project,
     });
 }
+function createRspackBuildTarget(options) {
+    return {
+        executor: '@nx/rspack:rspack',
+        outputs: ['{options.outputPath}'],
+        defaultConfiguration: 'production',
+        options: {
+            outputPath: (0, devkit_1.joinPathFragments)('dist', options.appProjectRoot),
+            index: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/index.html'),
+            baseHref: '/',
+            main: (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, `src/main.tsx`)),
+            tsConfig: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
+            assets: [
+                (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/favicon.ico'),
+                (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/assets'),
+            ],
+            rspackConfig: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'rspack.config.js'),
+            styles: options.styledModule || !options.hasStyles
+                ? []
+                : [
+                    (0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/styles.${options.style}`),
+                ],
+            scripts: [],
+            configurations: {
+                development: {
+                    mode: 'development',
+                },
+                production: {
+                    mode: 'production',
+                    optimization: true,
+                    sourceMap: false,
+                    outputHashing: 'all',
+                    namedChunks: false,
+                    extractLicenses: true,
+                    vendorChunk: false,
+                },
+            },
+        },
+    };
+}
+function createRspackServeTarget(options) {
+    return {
+        executor: '@nx/rspack:dev-server',
+        defaultConfiguration: 'development',
+        options: {
+            buildTarget: `${options.projectName}:build`,
+            hmr: true,
+        },
+        configurations: {
+            development: {
+                buildTarget: `${options.projectName}:build:development`,
+            },
+            production: {
+                buildTarget: `${options.projectName}:build:production`,
+                hmr: false,
+            },
+        },
+    };
+}
 function createBuildTarget(options) {
     return {
         executor: '@nx/webpack:webpack',

package/src/generators/application/lib/create-application-files.js

@@ -10,6 +10,7 @@ const maybe_js_1 = require("../../../utils/maybe-js");
 const has_webpack_plugin_1 = require("../../../utils/has-webpack-plugin");
 const get_app_tests_1 = require("./get-app-tests");
 const onboarding_1 = require("nx/src/nx-cloud/utilities/onboarding");
+const has_rspack_plugin_1 = require("../../../utils/has-rspack-plugin");
 async function createApplicationFiles(host, options) {
     let styleSolutionSpecificAppFiles;
     if (options.styledModule && options.style !== 'styled-jsx') {
@@ -114,7 +115,12 @@ async function createApplicationFiles(host, options) {
         }
     }
     else if (options.bundler === 'rspack') {
-        (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/base-rspack'), options.appProjectRoot, templateVariables);
+        (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/base-rspack'), options.appProjectRoot, {
+            ...templateVariables,
+            rspackPluginOptions: (0, has_rspack_plugin_1.hasRspackPlugin)(host)
+                ? createNxRspackPluginOptions(options)
+                : null,
+        });
     }
     if (options.unitTestRunner === 'none' ||
         (options.unitTestRunner === 'vitest' && options.inSourceTests == true)) {
@@ -156,3 +162,24 @@ function createNxWebpackPluginOptions(options) {
             ],
     };
 }
+function createNxRspackPluginOptions(options) {
+    return {
+        target: 'web',
+        outputPath: (0, devkit_1.joinPathFragments)('dist', options.appProjectRoot != '.'
+            ? options.appProjectRoot
+            : options.projectName),
+        index: './src/index.html',
+        baseHref: '/',
+        main: (0, maybe_js_1.maybeJs)({
+            js: options.js,
+            useJsx: true,
+        }, `./src/main.tsx`),
+        tsConfig: './tsconfig.app.json',
+        assets: ['./src/favicon.ico', './src/assets'],
+        styles: options.styledModule || !options.hasStyles
+            ? []
+            : [
+                `./src/styles.${options.style !== 'tailwind' ? options.style : 'css'}`,
+            ],
+    };
+}

package/src/generators/host/files/rspack-module-federation/rspack.config.js__tmpl__

@@ -1,5 +1,5 @@
 const { composePlugins, withNx, withReact } = require('@nx/rspack');
-const { withModuleFederation } = require('@nx/rspack/module-federation');
+const { withModuleFederation } = require('@nx/module-federation/rspack');
 
 const baseConfig = require('./module-federation.config');
 

package/src/generators/host/files/rspack-module-federation/rspack.config.prod.js__tmpl__

@@ -1,5 +1,5 @@
 const { composePlugins, withNx, withReact } = require('@nx/rspack');
-const { withModuleFederation } = require('@nx/rspack/module-federation');
+const { withModuleFederation } = require('@nx/module-federation/rspack');
 
 const baseConfig = require('./module-federation.config');
 

package/src/generators/host/files/rspack-module-federation-ssr/rspack.server.config.js__tmpl__

@@ -1,5 +1,5 @@
 const {composePlugins, withNx, withReact} = require('@nx/rspack');
-const {withModuleFederationForSSR} = require('@nx/rspack/module-federation');
+const {withModuleFederationForSSR} = require('@nx/module-federation/rspack');
 
 const baseConfig = require('./module-federation.config');
 

package/src/generators/host/files/rspack-module-federation-ssr-ts/rspack.server.config.ts__tmpl__

@@ -1,5 +1,5 @@
 import {composePlugins, withNx, withReact} from '@nx/rspack';
-import {withModuleFederationForSSR} from '@nx/rspack/module-federation';
+import {withModuleFederationForSSR} from '@nx/module-federation/rspack';
 
 import baseConfig from './module-federation.config';
 

package/src/generators/host/files/rspack-module-federation-ts/rspack.config.prod.ts__tmpl__

@@ -1,5 +1,5 @@
 import { composePlugins, withNx, withReact } from '@nx/rspack';
-import { withModuleFederation } from '@nx/rspack/module-federation';
+import { withModuleFederation } from '@nx/module-federation/rspack';
 import { ModuleFederationConfig } from '@nx/module-federation';
 
 import baseConfig from './module-federation.config';

package/src/generators/host/files/rspack-module-federation-ts/rspack.config.ts__tmpl__

@@ -1,5 +1,5 @@
 import {composePlugins, withNx, withReact} from '@nx/rspack';
-import { withModuleFederation } from '@nx/rspack/module-federation';
+import { withModuleFederation } from '@nx/module-federation/rspack';
 import { ModuleFederationConfig } from '@nx/module-federation';
 
 import baseConfig from './module-federation.config';

package/src/generators/host/files/webpack-module-federation/webpack.config.js__tmpl__

@@ -1,6 +1,6 @@
 const { composePlugins, withNx } = require('@nx/webpack');
 const { withReact } = require('@nx/react');
-const { withModuleFederation } = require('@nx/react/module-federation');
+const { withModuleFederation } = require('@nx/module-federation/webpack');
 
 const baseConfig = require('./module-federation.config');
 

package/src/generators/host/files/webpack-module-federation/webpack.config.prod.js__tmpl__

@@ -1,6 +1,6 @@
 const { composePlugins, withNx } = require('@nx/webpack');
 const { withReact } = require('@nx/react');
-const { withModuleFederation } = require('@nx/react/module-federation');
+const { withModuleFederation } = require('@nx/module-federation/webpack');
 
 const baseConfig = require('./module-federation.config');
 

package/src/generators/host/files/webpack-module-federation-ssr/webpack.server.config.js__tmpl__

@@ -1,6 +1,6 @@
 const {composePlugins, withNx} = require('@nx/webpack');
 const {withReact} = require('@nx/react');
-const {withModuleFederationForSSR} = require('@nx/react/module-federation');
+const {withModuleFederationForSSR} = require('@nx/module-federation/webpack');
 
 const baseConfig = require('./module-federation.config');
 

package/src/generators/host/files/webpack-module-federation-ssr-ts/webpack.server.config.ts__tmpl__

@@ -1,6 +1,6 @@
 import {composePlugins, withNx} from '@nx/webpack';
 import {withReact} from '@nx/react';
-import {withModuleFederationForSSR} from '@nx/react/module-federation';
+import {withModuleFederationForSSR} from '@nx/module-federation/webpack';
 
 import baseConfig from './module-federation.config';
 

package/src/generators/host/files/webpack-module-federation-ts/webpack.config.prod.ts__tmpl__

@@ -1,6 +1,6 @@
 import { composePlugins, withNx } from '@nx/webpack';
 import { withReact } from '@nx/react';
-import { withModuleFederation } from '@nx/react/module-federation';
+import { withModuleFederation } from '@nx/module-federation/webpack';
 import { ModuleFederationConfig } from '@nx/module-federation';
 
 import baseConfig from './module-federation.config';

package/src/generators/host/files/webpack-module-federation-ts/webpack.config.ts__tmpl__

@@ -1,6 +1,6 @@
 import {composePlugins, withNx} from '@nx/webpack';
 import {withReact} from '@nx/react';
-import {withModuleFederation} from '@nx/react/module-federation';
+import {withModuleFederation} from '@nx/module-federation/webpack';
 import { ModuleFederationConfig } from '@nx/module-federation';
 
 import baseConfig from './module-federation.config';

package/src/generators/remote/files/rspack-module-federation/rspack.config.js__tmpl__

@@ -1,5 +1,5 @@
 const { composePlugins, withNx, withReact } = require('@nx/rspack');
-const { withModuleFederation } = require('@nx/rspack/module-federation');
+const { withModuleFederation } = require('@nx/module-federation/rspack');
 
 const baseConfig = require('./module-federation.config');
 

package/src/generators/remote/files/rspack-module-federation-ssr/rspack.server.config.js__tmpl__

@@ -1,5 +1,5 @@
 const {composePlugins, withNx, withReact} = require('@nx/rspack');
-const {withModuleFederationForSSR} = require('@nx/rspack/module-federation');
+const {withModuleFederationForSSR} = require('@nx/module-federation/rspack');
 
 const baseConfig = require("./module-federation.server.config");
 

package/src/generators/remote/files/rspack-module-federation-ssr-ts/rspack.server.config.ts__tmpl__

@@ -1,5 +1,5 @@
 import {composePlugins, withNx, withReact} from '@nx/rspack';
-import {withModuleFederationForSSR} from '@nx/rspack/module-federation';
+import {withModuleFederationForSSR} from '@nx/module-federation/rspack';
 
 import baseConfig from "./module-federation.server.config";
 

package/src/generators/remote/files/rspack-module-federation-ts/rspack.config.ts__tmpl__

@@ -1,5 +1,5 @@
 import {composePlugins, withNx, withReact} from '@nx/rspack';
-import {withModuleFederation} from '@nx/rspack/module-federation';
+import {withModuleFederation} from '@nx/module-federation/rspack';
 
 import baseConfig from './module-federation.config';
 

package/src/generators/remote/files/webpack-module-federation/webpack.config.js__tmpl__

@@ -1,6 +1,6 @@
 const { composePlugins, withNx } = require('@nx/webpack');
 const { withReact } = require('@nx/react');
-const { withModuleFederation } = require('@nx/react/module-federation');
+const { withModuleFederation } = require('@nx/module-federation/webpack');
 
 const baseConfig = require('./module-federation.config');
 

package/src/generators/remote/files/webpack-module-federation-ssr/webpack.server.config.js__tmpl__

@@ -1,6 +1,6 @@
 const {composePlugins, withNx} = require('@nx/webpack');
 const {withReact} = require('@nx/react');
-const {withModuleFederationForSSR} = require('@nx/react/module-federation');
+const {withModuleFederationForSSR} = require('@nx/module-federation/webpack');
 
 const baseConfig = require("./module-federation.server.config");
 

package/src/generators/remote/files/webpack-module-federation-ssr-ts/webpack.server.config.ts__tmpl__

@@ -1,6 +1,6 @@
 import {composePlugins, withNx} from '@nx/webpack';
 import {withReact} from '@nx/react';
-import {withModuleFederationForSSR} from '@nx/react/module-federation';
+import {withModuleFederationForSSR} from '@nx/module-federation/webpack';
 
 import baseConfig from "./module-federation.server.config";
 

package/src/generators/remote/files/webpack-module-federation-ts/webpack.config.ts__tmpl__

@@ -1,6 +1,6 @@
 import {composePlugins, withNx} from '@nx/webpack';
 import {withReact} from '@nx/react';
-import {withModuleFederation} from '@nx/react/module-federation';
+import {withModuleFederation} from '@nx/module-federation/webpack';
 
 import baseConfig from './module-federation.config';
 

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

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

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 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) {
+    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);
+    });
+    for (const projectRoot of projects) {
+        (0, devkit_1.visitNotIgnoredFiles)(tree, projectRoot, (filePath) => {
+            if (!filePath.endsWith('.ts') && !filePath.endsWith('.js')) {
+                return;
+            }
+            let contents = tree.read(filePath, 'utf-8');
+            if (!contents.includes('@nx/react/module-federation')) {
+                return;
+            }
+            const ast = tsquery_1.tsquery.ast(contents);
+            const importNodes = (0, tsquery_1.tsquery)(ast, NX_RSPACK_MODULE_FEDERATION_IMPORT_SELECTOR);
+            if (importNodes.length === 0) {
+                return;
+            }
+            const importPathNode = importNodes[0];
+            contents = `${contents.slice(0, importPathNode.getStart())}${NEW_IMPORT_PATH}${contents.slice(importPathNode.getEnd())}`;
+            tree.write(filePath, contents);
+        });
+    }
+    await (0, devkit_1.formatFiles)(tree);
+}

package/src/rules/update-module-federation-project.js

@@ -8,24 +8,26 @@ function updateModuleFederationProject(host, options) {
     if (options.bundler === 'rspack') {
         projectConfig.targets.build.executor = '@nx/rspack:rspack';
         projectConfig.targets.build.options = {
-            ...projectConfig.targets.build.options,
+            ...(projectConfig.targets.build.options ?? {}),
             main: (0, maybe_js_1.maybeJs)({ js: options.js, useJsx: true }, `${options.appProjectRoot}/src/main.ts`),
             rspackConfig: `${options.appProjectRoot}/rspack.config.${options.typescriptConfiguration && !options.js ? 'ts' : 'js'}`,
             target: 'web',
         };
+        projectConfig.targets.build.configurations ??= {};
         projectConfig.targets.build.configurations.production = {
-            ...projectConfig.targets.build.configurations.production,
+            ...(projectConfig.targets.build.configurations?.production ?? {}),
             rspackConfig: `${options.appProjectRoot}/rspack.config.prod.${options.typescriptConfiguration && !options.js ? 'ts' : 'js'}`,
         };
     }
     else {
         projectConfig.targets.build.options = {
-            ...projectConfig.targets.build.options,
+            ...(projectConfig.targets.build.options ?? {}),
             main: (0, maybe_js_1.maybeJs)(options, `${options.appProjectRoot}/src/main.ts`),
             webpackConfig: `${options.appProjectRoot}/webpack.config.${options.typescriptConfiguration && !options.js ? 'ts' : 'js'}`,
         };
+        projectConfig.targets.build.configurations ??= {};
         projectConfig.targets.build.configurations.production = {
-            ...projectConfig.targets.build.configurations.production,
+            ...(projectConfig.targets.build.configurations?.production ?? {}),
             webpackConfig: `${options.appProjectRoot}/webpack.config.prod.${options.typescriptConfiguration && !options.js ? 'ts' : 'js'}`,
         };
     }

package/src/utils/build-static.remotes.d.ts

@@ -1,4 +1,4 @@
-import type { StaticRemotesConfig } from '@nx/webpack/src/utils/module-federation/parse-static-remotes-config';
+import { StaticRemotesConfig } from '@nx/module-federation/src/utils';
 import { ExecutorContext } from '@nx/devkit';
 import { ModuleFederationDevServerOptions } from '../executors/module-federation-dev-server/schema';
 export declare function buildStaticRemotes(staticRemotesConfig: StaticRemotesConfig, nxBin: any, context: ExecutorContext, options: ModuleFederationDevServerOptions): Promise<Record<string, string>>;

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

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

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasRspackPlugin = hasRspackPlugin;
+const devkit_1 = require("@nx/devkit");
+function hasRspackPlugin(tree) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    return !!nxJson.plugins?.some((p) => typeof p === 'string'
+        ? p === '@nx/rspack/plugin'
+        : p.plugin === '@nx/rspack/plugin');
+}

package/src/generators/application/lib/add-project-root-to-rspack-plugin-excludes.d.ts

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

package/src/generators/application/lib/add-project-root-to-rspack-plugin-excludes.js

@@ -1,31 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.addProjectRootToRspackPluginExcludesIfExists = addProjectRootToRspackPluginExcludesIfExists;
-const devkit_1 = require("@nx/devkit");
-const devkit_2 = require("@nx/devkit");
-function addProjectRootToRspackPluginExcludesIfExists(tree, projectRoot) {
-    const excludeProjectGlob = (0, devkit_1.joinPathFragments)(projectRoot, '/**');
-    const nxJson = (0, devkit_2.readNxJson)(tree);
-    if (!nxJson.plugins?.length) {
-        return;
-    }
-    for (let i = 0; i < nxJson.plugins.length; i++) {
-        let plugin = nxJson.plugins[i];
-        const isRspackPlugin = typeof plugin === 'string'
-            ? plugin === '@nx/rspack/plugin'
-            : plugin.plugin === '@nx/rspack/plugin';
-        if (isRspackPlugin) {
-            if (typeof plugin === 'string') {
-                plugin = {
-                    plugin: plugin,
-                    exclude: [excludeProjectGlob],
-                };
-            }
-            else {
-                plugin.exclude = [...(plugin.exclude ?? []), excludeProjectGlob];
-            }
-            nxJson.plugins[i] = plugin;
-        }
-    }
-    (0, devkit_1.updateNxJson)(tree, nxJson);
-}

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

@@ -1,12 +0,0 @@
-import { ModuleFederationConfig } from '@nx/module-federation';
-export declare function getFunctionDeterminateRemoteUrl(isServer?: boolean): (remote: string) => string;
-export declare function getModuleFederationConfig(mfConfig: ModuleFederationConfig, options?: {
-    isServer: boolean;
-    determineRemoteUrl?: (remote: string) => string;
-}): Promise<{
-    sharedLibraries: import("@nx/module-federation").SharedWorkspaceLibraryConfig;
-    sharedDependencies: {
-        [x: string]: import("@nx/module-federation").SharedLibraryConfig;
-    };
-    mappedRemotes: {};
-}>;

package/src/module-federation/utils.js

@@ -1,75 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFunctionDeterminateRemoteUrl = getFunctionDeterminateRemoteUrl;
-exports.getModuleFederationConfig = getModuleFederationConfig;
-const module_federation_1 = require("@nx/module-federation");
-const devkit_1 = require("@nx/devkit");
-const project_graph_1 = require("nx/src/project-graph/project-graph");
-function getFunctionDeterminateRemoteUrl(isServer = false) {
-    const target = 'serve';
-    const remoteEntry = isServer ? 'server/remoteEntry.js' : 'remoteEntry.js';
-    return function (remote) {
-        const mappedStaticRemotesFromEnv = process.env
-            .NX_MF_DEV_SERVER_STATIC_REMOTES
-            ? JSON.parse(process.env.NX_MF_DEV_SERVER_STATIC_REMOTES)
-            : undefined;
-        if (mappedStaticRemotesFromEnv && mappedStaticRemotesFromEnv[remote]) {
-            return `${mappedStaticRemotesFromEnv[remote]}/${remoteEntry}`;
-        }
-        let remoteConfiguration = null;
-        try {
-            remoteConfiguration = (0, project_graph_1.readCachedProjectConfiguration)(remote);
-        }
-        catch (e) {
-            throw new Error(`Cannot find remote: "${remote}". Check that the remote name is correct in your module federation config file.\n`);
-        }
-        const serveTarget = remoteConfiguration?.targets?.[target];
-        if (!serveTarget) {
-            throw new Error(`Cannot automatically determine URL of remote (${remote}). Looked for property "host" in the project's "${serveTarget}" target.\n
-      You can also use the tuple syntax in your webpack config to configure your remotes. e.g. \`remotes: [['remote1', 'http://localhost:4201']]\``);
-        }
-        const host = serveTarget.options?.host ??
-            `http${serveTarget.options.ssl ? 's' : ''}://localhost`;
-        const port = serveTarget.options?.port ?? 4201;
-        return `${host.endsWith('/') ? host.slice(0, -1) : host}:${port}/${remoteEntry}`;
-    };
-}
-async function getModuleFederationConfig(mfConfig, options = { isServer: false }) {
-    let projectGraph;
-    try {
-        projectGraph = (0, devkit_1.readCachedProjectGraph)();
-    }
-    catch (e) {
-        projectGraph = await (0, devkit_1.createProjectGraphAsync)();
-    }
-    const project = projectGraph.nodes[mfConfig.name]?.data;
-    if (!project) {
-        throw Error(`Cannot find project "${mfConfig.name}". Check that the name is correct in module-federation.config.js`);
-    }
-    const dependencies = (0, module_federation_1.getDependentPackagesForProject)(projectGraph, mfConfig.name);
-    if (mfConfig.shared) {
-        dependencies.workspaceLibraries = dependencies.workspaceLibraries.filter((lib) => mfConfig.shared(lib.importKey, {}) !== false);
-        dependencies.npmPackages = dependencies.npmPackages.filter((pkg) => mfConfig.shared(pkg, {}) !== false);
-    }
-    const sharedLibraries = (0, module_federation_1.shareWorkspaceLibraries)(dependencies.workspaceLibraries);
-    const npmPackages = (0, module_federation_1.sharePackages)(dependencies.npmPackages);
-    const sharedDependencies = {
-        ...sharedLibraries.getLibraries(project.root),
-        ...npmPackages,
-    };
-    (0, module_federation_1.applySharedFunction)(sharedDependencies, mfConfig.shared);
-    (0, module_federation_1.applyAdditionalShared)(sharedDependencies, mfConfig.additionalShared, projectGraph);
-    // Choose the correct mapRemotes function based on the server state.
-    const mapRemotesFunction = options.isServer ? module_federation_1.mapRemotesForSSR : module_federation_1.mapRemotes;
-    // Determine the URL function, either from provided options or by using a default.
-    const determineRemoteUrlFunction = options.determineRemoteUrl
-        ? options.determineRemoteUrl
-        : getFunctionDeterminateRemoteUrl(options.isServer);
-    // Map the remotes if they exist, otherwise default to an empty object.
-    let mappedRemotes = {};
-    if (mfConfig.remotes && mfConfig.remotes.length > 0) {
-        const isLibraryTypeVar = mfConfig.library?.type === 'var';
-        mappedRemotes = mapRemotesFunction(mfConfig.remotes, 'js', determineRemoteUrlFunction, true);
-    }
-    return { sharedLibraries, sharedDependencies, mappedRemotes };
-}

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

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

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

@@ -1,50 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.withModuleFederationForSSR = withModuleFederationForSSR;
-const utils_1 = require("./utils");
-async function withModuleFederationForSSR(options, configOverride) {
-    if (global.NX_GRAPH_CREATION) {
-        return (config) => config;
-    }
-    const { sharedLibraries, sharedDependencies, mappedRemotes } = await (0, utils_1.getModuleFederationConfig)(options, {
-        isServer: true,
-    });
-    return (config) => {
-        config.target = 'async-node';
-        config.output.uniqueName = options.name;
-        config.optimization = {
-            ...(config.optimization ?? {}),
-            runtimeChunk: false,
-        };
-        config.plugins.push(new (require('@module-federation/enhanced').ModuleFederationPlugin)({
-            name: options.name.replace(/-/g, '_'),
-            filename: 'remoteEntry.js',
-            exposes: options.exposes,
-            remotes: mappedRemotes,
-            shared: {
-                ...sharedDependencies,
-            },
-            /**
-             * Apply user-defined config overrides
-             */
-            ...(configOverride ? configOverride : {}),
-            runtimePlugins: process.env.NX_MF_DEV_REMOTES &&
-                !options.disableNxRuntimeLibraryControlPlugin
-                ? [
-                    ...(configOverride?.runtimePlugins ?? []),
-                    require.resolve('@nx/module-federation/src/utils/plugins/runtime-library-control.plugin.js'),
-                ]
-                : [
-                    ...(configOverride?.runtimePlugins ?? []),
-                    require.resolve('@module-federation/node/runtimePlugin'),
-                ],
-            virtualRuntimeEntry: true,
-        }, {}), sharedLibraries.getReplacementPlugin());
-        // The env var is only set from the module-federation-dev-server
-        // Attach the runtime plugin
-        config.plugins.push(new (require('webpack').DefinePlugin)({
-            'process.env.NX_MF_DEV_REMOTES': process.env.NX_MF_DEV_REMOTES,
-        }));
-        return config;
-    };
-}

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

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

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

@@ -1,63 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.withModuleFederation = withModuleFederation;
-const utils_1 = require("./utils");
-const webpack_1 = require("@module-federation/enhanced/webpack");
-/**
- * @param {ModuleFederationConfig} options
- * @return {Promise<AsyncNxComposableWebpackPlugin>}
- */
-async function withModuleFederation(options, configOverride) {
-    if (global.NX_GRAPH_CREATION) {
-        return (config) => config;
-    }
-    const { sharedDependencies, sharedLibraries, mappedRemotes } = await (0, utils_1.getModuleFederationConfig)(options);
-    return (config, ctx) => {
-        config.output.uniqueName = options.name;
-        config.output.publicPath = 'auto';
-        config.output.scriptType = 'text/javascript';
-        config.optimization = {
-            ...(config.optimization ?? {}),
-            runtimeChunk: false,
-        };
-        if (config.mode === 'development' &&
-            Object.keys(mappedRemotes).length > 1 &&
-            !options.exposes) {
-            config.optimization.runtimeChunk = 'single';
-        }
-        config.plugins.push(new webpack_1.ModuleFederationPlugin({
-            name: options.name.replace(/-/g, '_'),
-            filename: 'remoteEntry.js',
-            exposes: options.exposes,
-            remotes: mappedRemotes,
-            shared: {
-                ...sharedDependencies,
-            },
-            /**
-             * remoteType: 'script' is required for the remote to be loaded as a script tag.
-             * remotes will need to be defined as:
-             *  { appX: 'appX@http://localhost:3001/remoteEntry.js' }
-             *  { appY: 'appY@http://localhost:3002/remoteEntry.js' }
-             */
-            remoteType: 'script',
-            /**
-             * Apply user-defined config overrides
-             */
-            ...(configOverride ? configOverride : {}),
-            runtimePlugins: process.env.NX_MF_DEV_REMOTES &&
-                !options.disableNxRuntimeLibraryControlPlugin
-                ? [
-                    ...(configOverride?.runtimePlugins ?? []),
-                    require.resolve('@nx/module-federation/src/utils/plugins/runtime-library-control.plugin.js'),
-                ]
-                : configOverride?.runtimePlugins,
-            virtualRuntimeEntry: true,
-        }), sharedLibraries.getReplacementPlugin());
-        // The env var is only set from the module-federation-dev-server
-        // Attach the runtime plugin
-        config.plugins.push(new (require('webpack').DefinePlugin)({
-            'process.env.NX_MF_DEV_REMOTES': process.env.NX_MF_DEV_REMOTES,
-        }));
-        return config;
-    };
-}