@nx/react 20.1.0-canary.20241101-d4f4dac → 20.1.0-canary.20241102-c290b37

package/mf/dynamic-federation.d.ts

@@ -1,5 +1,69 @@
 export type ResolveRemoteUrlFunction = (remoteName: string) => string | Promise<string>;
+/**
+ * @deprecated Use Runtime Helpers from '@module-federation/enhanced/runtime' instead. This will be removed in Nx 22.
+ */
 export declare function setRemoteUrlResolver(_resolveRemoteUrl: ResolveRemoteUrlFunction): void;
+/**
+ * @deprecated Use init() from '@module-federation/enhanced/runtime' instead. This will be removed in Nx 22.
+ * If you have a remote app called `my-remote-app` and you want to use the `http://localhost:4201/mf-manifest.json` as the remote url, you should change it from:
+ * ```ts
+ * import { setRemoteDefinitions } from '@nx/react/mf';
+ *
+ * setRemoteDefinitions({
+ *   'my-remote-app': 'http://localhost:4201/mf-manifest.json'
+ * });
+ * ```
+ * to use init():
+ * ```ts
+ * import { init } from '@module-federation/enhanced/runtime';
+ *
+ * init({
+ *   name: 'host',
+ *   remotes: [{
+ *     name: 'my-remote-app',
+ *     entry: 'http://localhost:4201/mf-manifest.json'
+ *   }]
+ * });
+ * ```
+ */
 export declare function setRemoteDefinitions(definitions: Record<string, string>): void;
+/**
+ * @deprecated Use registerRemotes() from '@module-federation/enhanced/runtime' instead. This will be removed in Nx 22.
+ * If you set a remote app with `setRemoteDefinition` such as:
+ * ```ts
+ * import { setRemoteDefinition } from '@nx/react/mf';
+ *
+ * setRemoteDefinition(
+ *   'my-remote-app',
+ *   'http://localhost:4201/mf-manifest.json'
+ * );
+ * ```
+ * change it to use registerRemotes():
+ * ```ts
+ * import { registerRemotes } from '@module-federation/enhanced/runtime';
+ *
+ * registerRemotes([
+ *  {
+ *     name: 'my-remote-app',
+ *     entry: 'http://localhost:4201/mf-manifest.json'
+ *   }
+ * ]);
+ * ```
+ */
 export declare function setRemoteDefinition(remoteName: string, remoteUrl: string): void;
+/**
+ * @deprecated Use loadRemote() from '@module-federation/enhanced/runtime' instead. This will be removed in Nx 22.
+ * If you set a load a remote with `loadRemoteModule` such as:
+ * ```ts
+ * import { loadRemoteModule } from '@nx/react/mf';
+ *
+ * loadRemoteModule('my-remote-app', './Module').then(m => m.RemoteEntryModule);
+ * ```
+ * change it to use loadRemote():
+ * ```ts
+ * import { loadRemote } from '@module-federation/enhanced/runtime';
+ *
+ * loadRemote<typeof import('my-remote-app/Module')>('my-remote-app/Module').then(m => m.RemoteEntryModule);
+ * ```
+ */
 export declare function loadRemoteModule(remoteName: string, moduleName: string): Promise<any>;

package/mf/dynamic-federation.js

@@ -9,15 +9,79 @@ let resolveRemoteUrl;
 const remoteModuleMap = new Map();
 const remoteContainerMap = new Map();
 let initialSharingScopeCreated = false;
+/**
+ * @deprecated Use Runtime Helpers from '@module-federation/enhanced/runtime' instead. This will be removed in Nx 22.
+ */
 function setRemoteUrlResolver(_resolveRemoteUrl) {
     resolveRemoteUrl = _resolveRemoteUrl;
 }
+/**
+ * @deprecated Use init() from '@module-federation/enhanced/runtime' instead. This will be removed in Nx 22.
+ * If you have a remote app called `my-remote-app` and you want to use the `http://localhost:4201/mf-manifest.json` as the remote url, you should change it from:
+ * ```ts
+ * import { setRemoteDefinitions } from '@nx/react/mf';
+ *
+ * setRemoteDefinitions({
+ *   'my-remote-app': 'http://localhost:4201/mf-manifest.json'
+ * });
+ * ```
+ * to use init():
+ * ```ts
+ * import { init } from '@module-federation/enhanced/runtime';
+ *
+ * init({
+ *   name: 'host',
+ *   remotes: [{
+ *     name: 'my-remote-app',
+ *     entry: 'http://localhost:4201/mf-manifest.json'
+ *   }]
+ * });
+ * ```
+ */
 function setRemoteDefinitions(definitions) {
     remoteUrlDefinitions = definitions;
 }
+/**
+ * @deprecated Use registerRemotes() from '@module-federation/enhanced/runtime' instead. This will be removed in Nx 22.
+ * If you set a remote app with `setRemoteDefinition` such as:
+ * ```ts
+ * import { setRemoteDefinition } from '@nx/react/mf';
+ *
+ * setRemoteDefinition(
+ *   'my-remote-app',
+ *   'http://localhost:4201/mf-manifest.json'
+ * );
+ * ```
+ * change it to use registerRemotes():
+ * ```ts
+ * import { registerRemotes } from '@module-federation/enhanced/runtime';
+ *
+ * registerRemotes([
+ *  {
+ *     name: 'my-remote-app',
+ *     entry: 'http://localhost:4201/mf-manifest.json'
+ *   }
+ * ]);
+ * ```
+ */
 function setRemoteDefinition(remoteName, remoteUrl) {
     remoteUrlDefinitions[remoteName] = remoteUrl;
 }
+/**
+ * @deprecated Use loadRemote() from '@module-federation/enhanced/runtime' instead. This will be removed in Nx 22.
+ * If you set a load a remote with `loadRemoteModule` such as:
+ * ```ts
+ * import { loadRemoteModule } from '@nx/react/mf';
+ *
+ * loadRemoteModule('my-remote-app', './Module').then(m => m.RemoteEntryModule);
+ * ```
+ * change it to use loadRemote():
+ * ```ts
+ * import { loadRemote } from '@module-federation/enhanced/runtime';
+ *
+ * loadRemote<typeof import('my-remote-app/Module')>('my-remote-app/Module').then(m => m.RemoteEntryModule);
+ * ```
+ */
 async function loadRemoteModule(remoteName, moduleName) {
     const remoteModuleKey = `${remoteName}:${moduleName}`;
     if (remoteModuleMap.has(remoteModuleKey)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "20.1.0-canary.20241101-d4f4dac",
+  "version": "20.1.0-canary.20241102-c290b37",
   "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": {
@@ -39,10 +39,10 @@
     "picocolors": "^1.1.0",
     "tslib": "^2.3.0",
     "@module-federation/enhanced": "0.6.9",
-    "@nx/devkit": "20.1.0-canary.20241101-d4f4dac",
-    "@nx/js": "20.1.0-canary.20241101-d4f4dac",
-    "@nx/eslint": "20.1.0-canary.20241101-d4f4dac",
-    "@nx/web": "20.1.0-canary.20241101-d4f4dac",
+    "@nx/devkit": "20.1.0-canary.20241102-c290b37",
+    "@nx/js": "20.1.0-canary.20241102-c290b37",
+    "@nx/eslint": "20.1.0-canary.20241102-c290b37",
+    "@nx/web": "20.1.0-canary.20241102-c290b37",
     "express": "^4.19.2",
     "http-proxy-middleware": "^3.0.3"
   },

package/src/generators/application/files/base-rspack/src/main.tsx__tmpl__

@@ -1,9 +1,10 @@
 <%_ if (strict) { _%>import { StrictMode } from 'react';<%_ } _%>
 import * as ReactDOM from 'react-dom/client';
 <%_ if (routing) { _%>import { BrowserRouter } from 'react-router-dom';<%_ } _%>
-
 import App from './app/<%= fileName %>';
-import './styles.<%= style %>'
+<%_ if(hasStyleFile) { _%>
+import './styles.<%= style %>' 
+<%_ } _%>
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 <%_ if(strict && !routing) { _%>

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

@@ -30,6 +30,7 @@ async function createApplicationFiles(host, options) {
     else {
         styleSolutionSpecificAppFiles = '../files/style-css-module';
     }
+    const hasStyleFile = ['scss', 'css', 'less'].includes(options.style);
     const onBoardingStatus = await (0, onboarding_1.createNxCloudOnboardingURLForWelcomeApp)(host, options.nxCloudToken);
     const connectCloudUrl = onBoardingStatus === 'unclaimed' &&
         (await (0, onboarding_1.getNxCloudAppOnBoardingUrl)(options.nxCloudToken));
@@ -44,6 +45,7 @@ async function createApplicationFiles(host, options) {
         appTests,
         inSourceVitestTests: (0, get_in_source_vitest_tests_template_1.getInSourceVitestTestsTemplate)(appTests),
         style: options.style === 'tailwind' ? 'css' : options.style,
+        hasStyleFile,
     };
     if (options.bundler === 'vite') {
         (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/base-vite'), options.appProjectRoot, templateVariables);

package/src/generators/host/files/common/src/app/__fileName__.js__tmpl__

@@ -3,12 +3,19 @@ import * as React from 'react';
 import NxWelcome from "./nx-welcome";
 <%_ } _%>
 import { Link, Route, Routes } from 'react-router-dom';
+<%_ if (dynamic) { _%>
+import { loadRemote } from '@module-federation/enhanced/runtime';
+<%_ } _%>
 
 <%_ if (remotes.length > 0) {
-  remotes.forEach(function(r) { _%>
+ remotes.forEach(function(r) { _%>
+<%_ if (dynamic) { _%>
+const <%= r.className %> = React.lazy(() => loadRemote('<%= r.fileName %>/Module') as any)
+<%_ } else  { _%>
 const <%= r.className %> = React.lazy(() => import('<%= r.fileName %>/Module'));
-<%_ }); _%>
-<% } %>
+<%_ } _%>
+ <%_ }); _%>
+<%_ } _%>
 export function App() {
   return (
     <React.Suspense fallback={null}>

package/src/generators/host/files/common/src/main.js__tmpl__

@@ -1,10 +1,13 @@
 <%_ if (dynamic) { _%>
-import { setRemoteDefinitions } from '@nx/react/mf';
+import { init } from '@module-federation/enhanced/runtime';
 
 fetch('/assets/module-federation.manifest.json')
 .then((res) => res.json())
-.then(definitions => setRemoteDefinitions(definitions))
+.then((remotes: Record<string, string>) =>
+    Object.entries(remotes).map(([name, entry]) => ({ name, entry }))
+)
+.then((remotes) => init({ name: '<%= projectName %>', remotes }))
 .then(() =>  import('./bootstrap').catch(err => console.error(err)));
 <%_ } else { _%>
 import('./bootstrap').catch(err => console.error(err));
-<%_ } _%>
+<%_ } _%>

package/src/generators/host/files/common-ts/src/app/__fileName__.tsx__tmpl__

@@ -4,17 +4,17 @@ import NxWelcome from "./nx-welcome";
 <%_ } _%>
 import { Link, Route, Routes } from 'react-router-dom';
 <%_ if (dynamic) { _%>
-import { loadRemoteModule } from '@nx/react/mf';
+import { loadRemote } from '@module-federation/enhanced/runtime';
 <%_ } _%>
 
 <%_ if (remotes.length > 0) {
-  remotes.forEach(function(r) {
-    if (dynamic) { _%>
-const <%= r.className %> = React.lazy(() => loadRemoteModule('<%= r.fileName %>', './Module'))
-      <%_ } else { _%>
+ remotes.forEach(function(r) { _%>
+<%_ if (dynamic) { _%>
+const <%= r.className %> = React.lazy(() => loadRemote('<%= r.fileName %>/Module') as any)
+<%_ } else  { _%>
 const <%= r.className %> = React.lazy(() => import('<%= r.fileName %>/Module'));
-    <%_ } _%>
-  <%_ }); _%>
+<%_ } _%>
+ <%_ }); _%>
 <%_ } _%>
 
 export function App() {

package/src/generators/host/files/common-ts/src/main.ts__tmpl__

@@ -1,10 +1,13 @@
 <%_ if (dynamic) { _%>
-import { setRemoteDefinitions } from '@nx/react/mf';
+import { init } from '@module-federation/enhanced/runtime';
 
 fetch('/assets/module-federation.manifest.json')
 .then((res) => res.json())
-.then(definitions => setRemoteDefinitions(definitions))
-.then(() => import('./bootstrap').catch(err => console.error(err)));
+.then((remotes: Record<string, string>) =>
+    Object.entries(remotes).map(([name, entry]) => ({ name, entry }))
+)
+.then((remotes) => init({ name: '<%= projectName %>', remotes }))
+.then(() =>  import('./bootstrap').catch(err => console.error(err)));
 <%_ } else { _%>
 import('./bootstrap').catch(err => console.error(err));
-<%_ } _%>
+<%_ } _%>

package/src/generators/host/files/rspack-common/src/app/__fileName__.jsx__tmpl__

@@ -4,11 +4,20 @@ import NxWelcome from "./nx-welcome";
 <%_ } _%>
 import { Link, Route, Routes } from 'react-router-dom';
 
-<% if (remotes.length > 0) {
-  remotes.forEach(function(r) { %>
+<%_ if (dynamic) { _%>
+import { loadRemote } from '@module-federation/enhanced/runtime';
+<%_ } _%>
+
+<%_ if (remotes.length > 0) {
+ remotes.forEach(function(r) { _%>
+<%_ if (dynamic) { _%>
+const <%= r.className %> = React.lazy(() => loadRemote('<%= r.fileName %>/Module') as any)
+<%_ } else  { _%>
 const <%= r.className %> = React.lazy(() => import('<%= r.fileName %>/Module'));
-  <%_ }); _%>
 <%_ } _%>
+ <%_ }); _%>
+<%_ } _%>
+
 export function App() {
   return (
     <React.Suspense fallback={null}>

package/src/generators/host/files/rspack-common/src/main.jsx__tmpl__

@@ -1,10 +1,13 @@
 <%_ if (dynamic) { _%>
-import { setRemoteDefinitions } from '@nx/react/mf';
+import { init } from '@module-federation/enhanced/runtime';
 
 fetch('/assets/module-federation.manifest.json')
 .then((res) => res.json())
-.then(definitions => setRemoteDefinitions(definitions))
+.then((remotes: Record<string, string>) =>
+    Object.entries(remotes).map(([name, entry]) => ({ name, entry }))
+)
+.then((remotes) => init({ name: '<%= projectName %>', remotes }))
 .then(() =>  import('./bootstrap').catch(err => console.error(err)));
 <%_ } else { _%>
 import('./bootstrap').catch(err => console.error(err));
-<%_ } _%>
+<%_ } _%>

package/src/generators/host/host.js

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

package/src/generators/host/lib/add-module-federation-files.js

@@ -59,7 +59,7 @@ function addModuleFederationFiles(host, options, defaultRemoteManifest) {
         if (!host.exists(pathToMFManifest)) {
             host.write(pathToMFManifest, `{
         ${defaultRemoteManifest
-                .map(({ name, port }) => `"${name}": "http://localhost:${port}"`)
+                .map(({ name, port }) => `"${name}": "http://localhost:${port}/mf-manifest.json"`)
                 .join(',\n')}
           }`);
         }