@nx/react 20.0.7 → 20.1.0-beta.0

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.0.7",
+  "version": "20.1.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,11 @@
     "minimatch": "9.0.3",
     "picocolors": "^1.1.0",
     "tslib": "^2.3.0",
-    "@module-federation/enhanced": "0.6.6",
-    "@nx/devkit": "20.0.7",
-    "@nx/js": "20.0.7",
-    "@nx/eslint": "20.0.7",
-    "@nx/web": "20.0.7",
+    "@module-federation/enhanced": "0.6.9",
+    "@nx/devkit": "20.1.0-beta.0",
+    "@nx/js": "20.1.0-beta.0",
+    "@nx/eslint": "20.1.0-beta.0",
+    "@nx/web": "20.1.0-beta.0",
     "express": "^4.19.2",
     "http-proxy-middleware": "^3.0.3"
   },

package/src/generators/application/files/base-rspack/src/app/__fileName__.spec.tsx__tmpl__

@@ -1,10 +1,10 @@
 import { render } from '@testing-library/react';
-<% if (routing) { %>
+<%_ if (routing) { _%>
 import { BrowserRouter } from 'react-router-dom';
-<% } %>
+<%_ } _%>
 
 import App from './<%= fileName %>';
 
 describe('App', () => {
-  <%- appTests %>
+  <%- appTests _%>
 });

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

@@ -1,11 +1,32 @@
-<% if (strict) { %>import { StrictMode } from 'react';<% } %>
+<%_ if (strict) { _%>import { StrictMode } from 'react';<%_ } _%>
 import * as ReactDOM from 'react-dom/client';
-<% if (routing) { %>import { BrowserRouter } from 'react-router-dom';<% } %>
-
+<%_ 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) { _%>
+root.render(
+  <StrictMode>
+    <App/>
+  </StrictMode>
+)
+<%_ } _%>
+<%_ if(!strict && routing) { _%>
+root.render(
+  <BrowserRouter>
+    <App/>
+  </BrowserRouter>
+)
+<%_ } _%>
+<%_ if(strict && routing) { _%>
 root.render(
-<% if (strict) { %><StrictMode><% } %><% if (routing) { %><BrowserRouter><% } %><App /><% if (routing) { %></BrowserRouter><% } %><% if (strict) { %></StrictMode><% } %>
-);
+  <StrictMode>
+    <BrowserRouter>
+      <App/>
+    </BrowserRouter>
+  </StrictMode>
+)
+<%_ } _%>

package/src/generators/application/files/base-rspack/tsconfig.app.json__tmpl__

@@ -4,7 +4,7 @@
     "outDir": "<%= offsetFromRoot %>dist/out-tsc",
     "types": [
       "node",
-      <% if (style === 'styled-jsx') { %>"@nx/react/typings/styled-jsx.d.ts",<% } %>
+      <%_ if (style === 'styled-jsx') { %>"@nx/react/typings/styled-jsx.d.ts",<% } _%>
       "@nx/react/typings/cssmodule.d.ts",
       "@nx/react/typings/image.d.ts"
       ]

package/src/generators/application/files/base-vite/src/app/__fileName__.spec.tsx__tmpl__

@@ -1,10 +1,10 @@
 import { render } from '@testing-library/react';
-<% if (routing) { %>
+<%_ if (routing) { _%>
 import { BrowserRouter } from 'react-router-dom';
-<% } %>
+<%_ } _%>
 
 import App from './<%= fileName %>';
 
 describe('App', () => {
-  <%- appTests %>
+  <%- appTests _%>
 });

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

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

package/src/generators/application/files/base-vite/tsconfig.app.json__tmpl__

@@ -4,7 +4,7 @@
     "outDir": "<%= offsetFromRoot %>dist/out-tsc",
     "types": [
       "node",
-      <% if (style === 'styled-jsx') { %>"@nx/react/typings/styled-jsx.d.ts",<% } %>
+      <%_ if (style === 'styled-jsx') { _%>"@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
       "@nx/react/typings/cssmodule.d.ts",
       "@nx/react/typings/image.d.ts"
       ]

package/src/generators/application/files/base-webpack/src/app/__fileName__.spec.tsx__tmpl__

@@ -1,10 +1,10 @@
 import { render } from '@testing-library/react';
-<% if (routing) { %>
+<%_ if (routing) { _%>
 import { BrowserRouter } from 'react-router-dom';
-<% } %>
+<%_ } _%>
 
 import App from './<%= fileName %>';
 
 describe('App', () => {
-  <%- appTests %>
+  <%- appTests _%>
 });

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

@@ -5,6 +5,26 @@ import * as ReactDOM from 'react-dom/client';
 import App from './app/<%= fileName %>';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+<%_ if(strict && !routing) { _%>
 root.render(
-<% if (strict) { %><StrictMode><% } %><% if (routing) { %><BrowserRouter><% } %><App /><% if (routing) { %></BrowserRouter><% } %><% if (strict) { %></StrictMode><% } %>
-);
+  <StrictMode>
+    <App/>
+  </StrictMode>
+)
+<%_ } _%>
+<%_ if(!strict && routing) { _%>
+root.render(
+  <BrowserRouter>
+    <App/>
+  </BrowserRouter>
+)
+<%_ } _%>
+<%_ if(strict && routing) { _%>
+root.render(
+  <StrictMode>
+    <BrowserRouter>
+      <App/>
+    </BrowserRouter>
+  </StrictMode>
+)
+<%_ } _%>

package/src/generators/application/files/base-webpack/tsconfig.app.json__tmpl__

@@ -4,7 +4,7 @@
     "outDir": "<%= offsetFromRoot %>dist/out-tsc",
     "types": [
       "node",
-      <% if (style === 'styled-jsx') { %>"@nx/react/typings/styled-jsx.d.ts",<% } %>
+      <%_ if (style === 'styled-jsx') { _%>"@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
       "@nx/react/typings/cssmodule.d.ts",
       "@nx/react/typings/image.d.ts"
       ]

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

@@ -1,4 +1,4 @@
-<% if (webpackPluginOptions) { %>
+<%_ if (webpackPluginOptions) { _%>
 const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
 const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
 const { join } = require('path');
@@ -34,7 +34,7 @@ module.exports = {
     }),
   ],
 };
-<% } else { %>
+<%_ } else { _%>
 const { composePlugins, withNx } = require('@nx/webpack');
 const { withReact } = require('@nx/react');
 
@@ -52,4 +52,4 @@ module.exports = composePlugins(
     return config;
   }
 );
-<% } %>
+<%_ } _%>

package/src/generators/application/files/style-css-module/src/app/__fileName__.tsx__tmpl__

@@ -1,35 +1,45 @@
 <% if (classComponent) { %>
 import { Component } from 'react';
-<% } %>
+<%_ } _%>
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import styles from './<%= fileName %>.module.<%= style %>';
-<% if (!minimal) { %>
+<%_ if (!minimal) { _%>
 import NxWelcome from "./nx-welcome";
-<% } %>
+<%_ } _%>
 
-<% if (classComponent) { %>
+<%_ if (classComponent) { _%>
 export class App extends Component {
-  render() {
-<% } else { %>
+  override render() {
+    return (
+      <div>
+        <%_ if (!minimal) { _%>
+        <NxWelcome title="<%= projectName %>"/>
+        <%_ } else { _%>
+        <h1>
+          <span> Hello there, </span>
+          Welcome <%= projectName %> 👋
+        </h1>
+        <%_ } _%>
+      </div>
+    );
+  }
+}
+<%_ } else { _%>
 export function App() {
-<% } %>
   return (
     <div>
-      <% if (!minimal) { %>
+    <%_ if (!minimal) { _%>
       <NxWelcome title="<%= projectName %>"/>
-     <% } else { %>
+    <%_ } else { _%>
       <h1>
         <span> Hello there, </span>
         Welcome <%= projectName %> 👋
       </h1>
-     <% } %>
-    </div>);
-<% if (classComponent) { %>
-  }
-}
-<% } else { %>
+    <%_ } _%>
+    </div>
+  );
 }
-<% } %>
+<%_ } _%>
 
 export default App;
 

package/src/generators/application/files/style-global-css/src/app/__fileName__.tsx__tmpl__

@@ -1,35 +1,44 @@
-<% if (classComponent) { %>
+<%_ if (classComponent) { _%>
 import { Component } from 'react';
-<% } %>
+<%_ } _%>
 import './<%= fileName %>.<%= style %>';
-<% if (!minimal) { %>
+<%_ if (!minimal) { _%>
 import NxWelcome from "./nx-welcome";
-<% } %>
+<%_ } _%>
 
-<% if (classComponent) { %>
+<%_ if (classComponent) { _%>
 export class App extends Component {
-  render() {
-<% } else { %>
+  override render() {
+    return (
+      <div>
+        <%_ if (!minimal) { _%>
+        <NxWelcome title="<%= projectName %>"/>
+        <%_ } else { _%>
+        <h1>
+          <span> Hello there, </span>
+          Welcome <%= projectName %> 👋
+        </h1>
+        <%_ } _%>
+      </div>
+    );
+  }
+}
+<%_ } else { _%>
 export function App() {
-<% } %>
   return (
-  <div>
-    <% if (!minimal) { %>
-    <NxWelcome title="<%= projectName %>"/>
-     <% } else { %>
+    <div>
+    <%_ if (!minimal) { _%>
+      <NxWelcome title="<%= projectName %>"/>
+    <%_ } else { _%>
       <h1>
         <span> Hello there, </span>
         Welcome <%= projectName %> 👋
       </h1>
-     <% } %>
-  </div>);
-<% if (classComponent) { %>
-  }
+    <%_ } _%>
+    </div>
+  );
 }
-<% } else { %>
-}
-<% } %>
-
+<%_ } _%>
 export default App;
 
 <% if (inSourceTests === true) { %> <%- inSourceVitestTests %> <% } %>

package/src/generators/application/files/style-none/src/app/__fileName__.tsx__tmpl__

@@ -1,33 +1,43 @@
-<% if (classComponent) { %>
+<%_ if (classComponent) { _%>
 import  { Component } from 'react';
-<% } %>
-<% if (!minimal) { %>
+<%_ } _%>
+<%_ if (!minimal) { _%>
 import NxWelcome from "./nx-welcome";
-<% } %>
+<%_ } _%>
 
-<% if (classComponent) { %>
+<%_ if (classComponent) { _%>
 export class App extends Component {
   override render() {
-<% } else { %>
+    return (
+      <div>
+        <%_ if (!minimal) { _%>
+        <NxWelcome title="<%= projectName %>"/>
+        <%_ } else { _%>
+        <h1>
+          <span> Hello there, </span>
+          Welcome <%= projectName %> 👋
+        </h1>
+        <%_ } _%>
+      </div>
+    );
+  }
+}
+<%_ } else { _%>
 export function App() {
-<% } %>
   return (
     <div>
-      <% if (!minimal) { %>
+    <%_ if (!minimal) { _%>
       <NxWelcome title="<%= projectName %>"/>
-      <% } else { %>
+    <%_ } else { _%>
       <h1>
         <span> Hello there, </span>
         Welcome <%= projectName %> 👋
       </h1>
-     <% } %>
-    </div>);
-<% if (classComponent) { %>
-  }
-}
-<% } else { %>
+    <%_ } _%>
+    </div>
+  );
 }
-<% } %>
+<%_ } _%>
 
 export default App;
 

package/src/generators/application/files/style-styled-jsx/src/app/__fileName__.tsx__tmpl__

@@ -1,36 +1,45 @@
-<% if (classComponent) { %>
+<%_ if (classComponent) { _%>
 import { Component } from 'react';
-<% } %>
-<% if (!minimal) { %>
+<%_ } _%>
+<%_ if (!minimal) { _%>
 import NxWelcome from "./nx-welcome";
-<% } %>
+<%_ } _%>
 
-<% if (classComponent) { %>
+<%_ if (classComponent) { _%>
 export class App extends Component {
-  render() {
-<% } else { %>
+  override render() {
+    return (
+      <div>
+        <style jsx>{`/** your style here **/`}</style>
+        <%_ if (!minimal) { _%>
+        <NxWelcome title="<%= projectName %>"/>
+        <%_ } else { _%>
+        <h1>
+          <span> Hello there, </span>
+          Welcome <%= projectName %> 👋
+        </h1>
+        <%_ } _%>
+      </div>
+    );
+  }
+}
+<%_ } else { _%>
 export function App() {
-<% } %>
   return (
     <div>
       <style jsx>{`/** your style here **/`}</style>
-        <% if (!minimal) { %>
-        <NxWelcome title="<%= projectName %>"/>
-        <% } else { %>
-          <h1>
-            <span> Hello there, </span>
-            Welcome <%= projectName %> 👋
-          </h1>
-        <% } %>
+    <%_ if (!minimal) { _%>
+      <NxWelcome title="<%= projectName %>"/>
+    <%_ } else { _%>
+      <h1>
+        <span> Hello there, </span>
+        Welcome <%= projectName %> 👋
+      </h1>
+    <%_ } _%>
     </div>
   );
-
-<% if (classComponent) { %>
-  }
-}
-<% } else { %>
 }
-<% } %>
+<%_ } _%>
 
 export default App;