@nx/react 20.0.8 → 20.1.0-beta.0

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

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

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

@@ -1,32 +1,44 @@
-<% if (classComponent) { %>
+<%_ if (classComponent) { _%>
 import { Component } from 'react';
-<% } if (!minimal) { %>
+<%_ } if (!minimal) { _%>
 import NxWelcome from "./nx-welcome";
-<% } %>
+<%_ } if (bundler === "rspack") { _%>
+import '../styles.css';
+<%_ } _%>
 
-<% 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) { %>
-  }
-}
-<% } else { %>
+      <%_ } _%>
+    </div>
+  );
 }
-<% } %>
+<%_ } _%>
 
 export default App;
 

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/application/lib/get-app-tests.js

@@ -2,19 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAppTests = getAppTests;
 function getAppTests(options) {
-    return `
-it('should render successfully', () => {
-  ${options.routing
+    return `it('should render successfully', () => {
+    ${options.routing
         ? 'const { baseElement } = render(<BrowserRouter><App /></BrowserRouter>);'
         : 'const { baseElement } = render(<App />);'}
-  expect(baseElement).toBeTruthy();
-});
+    expect(baseElement).toBeTruthy();
+  });
 
-it('should have a greeting as the title', () => {
-  ${options.routing
+  it('should have a greeting as the title', () => {
+    ${options.routing
         ? 'const { getByText } = render(<BrowserRouter><App /></BrowserRouter>);'
         : 'const { getByText } = render(<App />);'}
-  expect(getByText(/Welcome ${options.projectName}/gi)).toBeTruthy();
-});
+    expect(getByText(/Welcome ${options.projectName}/gi)).toBeTruthy();
+  });
 `;
 }

package/src/generators/component/files/__fileName__.tsx__tmpl__

@@ -1,84 +1,83 @@
-<% if (classComponent) { %>
+<%_ if (classComponent) { _%>
 import { Component } from 'react';
-<% } %>
-
-<% if (routing) { %>
+<%_ } _%>
+<%_ if (routing) { _%>
 import { Route, Link } from 'react-router-dom';
-<% } %>
+<%_ } _%>
 
-<% if (hasStyles) {
+<%_ if (hasStyles) {
    if (styledModule && styledModule !== 'styled-jsx') {
     var wrapper = 'Styled' + className;
     var extras = '';
-  %>
-  import styled from '<%= styledModule %>';
-  <% } else {
+  _%>
+import styled from '<%= styledModule %>';
+  <%_ } else {
     var wrapper = 'div';
     var extras = globalCss || styledModule === 'styled-jsx' ? '' : " className={styles['container']}";
-  %>
-  <%- style !== 'styled-jsx' ? globalCss ? `import './${fileName}.${style}';` : `import styles from './${fileName}.module.${style}';`: '' %>
-  <% }
+  _%>
+<%- style !== 'styled-jsx' ? globalCss ? `import './${fileName}.${style}';` : `import styles from './${fileName}.module.${style}';`: '' %>
+  <%_ }
 } else {
     var wrapper = 'div';
     var extras = '';
-} %>
+} _%>
 
-<% if (styledModule && styledModule !== 'styled-jsx') { %>
+<%_ if (styledModule && styledModule !== 'styled-jsx') { _%>
 const Styled<%= className %> = styled.div`
   color: pink;
 `;
-<% }%>
-<% if(!isNextPage) { %>
-  <% if (classComponent) { %>
-  export class <%= className %> extends Component<{}> {
-    override render() {
-      return (
-        <<%= wrapper %><%- extras %>>
-          <%= styledModule === 'styled-jsx' ? `<style jsx>{\`div { color: pink; }\`}</style>` : `` %>
-          <p>Welcome to <%= className %>!</p>
-          <% if (routing) { %>
-            <ul>
-              <li><Link to="/"><%= name %> root</Link></li>
-            </ul>
-            <Route path="/" element={<div>This is the <%= name %> root route.</div>} />
-          <% } %>
-        </<%= wrapper %>>
-      );
-    }
-  }
-  <% } else { %>
-  export function <%= className %>() {
+<%_ } _%>
+<%_ if(!isNextPage) { _%>
+  <%_ if (classComponent) { _%>
+export class <%= className %> extends Component<{}> {
+  override render() {
     return (
       <<%= wrapper %><%- extras %>>
-        <% if (styledModule === 'styled-jsx') { %><style jsx>{`div { color: pink; }`}</style><% } %>
-        <h1>Welcome to <%= className %>!</h1>
-        <% if (routing) { %>
+        <%= styledModule === 'styled-jsx' ? `<style jsx>{\`div { color: pink; }\`}</style>` : `` %>
+        <p>Welcome to <%= className %>!</p>
+        <%_ if (routing) { _%>
           <ul>
             <li><Link to="/"><%= name %> root</Link></li>
           </ul>
           <Route path="/" element={<div>This is the <%= name %> root route.</div>} />
-        <% } %>
+        <%_ } _%>
       </<%= wrapper %>>
     );
   }
-  <% } %>
+}
+  <%_ } else { _%>
+export function <%= className %>() {
+  return (
+    <<%= wrapper %><%- extras %>>
+      <%_ if (styledModule === 'styled-jsx') { _%><style jsx>{`div { color: pink; }`}</style><%_ } _%>
+      <h1>Welcome to <%= className %>!</h1>
+      <%_ if (routing) { _%>
+        <ul>
+          <li><Link to="/"><%= name %> root</Link></li>
+        </ul>
+        <Route path="/" element={<div>This is the <%= name %> root route.</div>} />
+      <%_ } _%>
+    </<%= wrapper %>>
+  );
+}
+  <%_ } _%>
 
-  export default <%= className %>;
-<% } else { %>
-  export default function <%= className %>() {
-    return (
-      <<%= wrapper %><%- extras %>>
-        <% if (styledModule === 'styled-jsx') { %><style jsx>{`div { color: pink; }`}</style><% } %>
-        <h1>Welcome to <%= className %>!</h1>
-        <% if (routing) { %>
-          <ul>
-            <li><Link to="/"><%= name %> root</Link></li>
-          </ul>
-          <Route path="/" element={<div>This is the <%= name %> root route.</div>} />
-        <% } %>
-      </<%= wrapper %>>
-    );
-  };
+export default <%= className %>;
+<%_ } else { _%>
+export default function <%= className %>() {
+  return (
+    <<%= wrapper %><%- extras %>>
+      <%_ if (styledModule === 'styled-jsx') { _%><style jsx>{`div { color: pink; }`}</style><%_ } _%>
+      <h1>Welcome to <%= className %>!</h1>
+      <% if (routing) { %>
+        <ul>
+          <li><Link to="/"><%= name %> root</Link></li>
+        </ul>
+        <Route path="/" element={<div>This is the <%= name %> root route.</div>} />
+      <% } %>
+    </<%= wrapper %>>
+  );
+};
 <% } %>
 
 <% if (inSourceTests === true) { %> <%- inSourceVitestTests %> <% } %>

package/src/generators/component-story/files/jsx/__componentFileName__.stories.jsx__tmpl__

@@ -1,8 +1,8 @@
 import componentName from './<%= componentImportFileName %>';
-<% if ( interactionTests ) { %>
+<%_ if ( interactionTests ) { _%>
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
-<% } %>
+<%_ } _%>
 
 export default {
   component: <%= componentName %>,
@@ -10,7 +10,7 @@ export default {
   argTypes: {<% for (let argType of argTypes) { %>
     <%= argType.name %>: { <%- argType.type %> : "<%- argType.actionText %>" },<% } %>
 }
-   <% } %> 
+   <%_ } _%> 
 };
 
 export const Primary = {
@@ -19,11 +19,11 @@ export const Primary = {
   },
 };
 
-<% if ( interactionTests ) { %>
+<%_ if ( interactionTests ) { _%>
 export const Heading: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     expect(canvas.getByText(/Welcome to <%=componentName%>!/gi)).toBeTruthy();
   },
 };
-<% } %>
+<%_ } _%>

package/src/generators/component-story/files/tsx/__componentFileName__.stories.tsx__tmpl__

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { <%= componentName %>  } from './<%= componentImportFileName %>';
-<% if ( interactionTests ) { %>
+<%_ if ( interactionTests ) { _%>
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
-<% } %>
+<%_ } _%>
 
 const meta: Meta<typeof <%= componentName %>> = {
   component: <%= componentName %>,
@@ -16,14 +16,13 @@ const meta: Meta<typeof <%= componentName %>> = {
 export default meta;
 type Story = StoryObj<typeof <%= componentName %>>;
 
-
 export const Primary = {
   args: {<% for (let prop of props) { %>
     <%= prop.name %>:  <%- prop.defaultValue %>,<% } %>
   },
 };
 
-<% if ( interactionTests ) { %>
+<%_ if ( interactionTests ) { _%>
 export const Heading: Story = {
   args: {<% for (let prop of props) { %>
     <%= prop.name %>:  <%- prop.defaultValue %>,<% } %>

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

@@ -1,31 +1,38 @@
 import * as React from 'react';
-<% if (!minimal) { %>
+<%_ if (!minimal) { _%>
 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) { %>
- const <%= r.className %> = React.lazy(() => import('<%= r.fileName %>/Module'));
- <% }); %>
-<% } %>
+<%_ 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}>
-     <ul>
-       <li><Link to="/">Home</Link></li>
-       <% remotes.forEach(function(r) { %>
-         <li><Link to="/<%=r.fileName%>"><%=r.className%></Link></li>
-       <% }); %>
-     </ul>
-     <Routes>
-       <% if (!minimal) { %>
-       <Route path="/" element={<NxWelcome title="<%= projectName %>"/>} />
-       <% } %>
-       <% remotes.forEach(function(r) { %>
-         <Route path="/<%=r.fileName%>" element={<<%= r.className %>/>} />
-       <% }); %>
-     </Routes>
+      <ul>
+        <li><Link to="/">Home</Link></li>
+       <%_ remotes.forEach(function(r) { _%>
+        <li><Link to="/<%=r.fileName%>"><%=r.className%></Link></li>
+       <%_ }); _%>
+      </ul>
+      <Routes>
+       <%_ if (!minimal) { _%>
+        <Route path="/" element={<NxWelcome title="<%= projectName %>"/>} />
+       <%_ } _%>
+       <%_ remotes.forEach(function(r) { _%>
+        <Route path="/<%=r.fileName%>" element={<<%= r.className %>/>} />
+       <%_ }); _%>
+      </Routes>
     </React.Suspense>
   );
 }

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

@@ -1,10 +1,13 @@
-<% if (dynamic) { %>
-    import { setRemoteDefinitions } from '@nx/react/mf';
+<%_ if (dynamic) { _%>
+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)));
-<% } else { %>
-    import('./bootstrap').catch(err => console.error(err));
-<% } %>
+fetch('/assets/module-federation.manifest.json')
+.then((res) => res.json())
+.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__

@@ -1,39 +1,39 @@
 import * as React from 'react';
-<% if (!minimal) { %>
+<%_ if (!minimal) { _%>
 import NxWelcome from "./nx-welcome";
-<% } %>
+<%_ } _%>
 import { Link, Route, Routes } from 'react-router-dom';
-<% if (dynamic) { %>
-import { loadRemoteModule } from '@nx/react/mf';
-<% } %>
+<%_ if (dynamic) { _%>
+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  { %>
- const <%= r.className %> = React.lazy(() => import('<%= r.fileName %>/Module'));
-<% } %>
- <% }); %>
-<% } %>
+<%_ 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}>
-     <ul>
-       <li><Link to="/">Home</Link></li>
-       <% remotes.forEach(function(r) { %>
-         <li><Link to="/<%=r.fileName%>"><%=r.className%></Link></li>
-       <% }); %>
-     </ul>
-     <Routes>
-       <% if (!minimal) { %>
-       <Route path="/" element={<NxWelcome title="<%= projectName %>"/>} />
-       <% } %>
-       <% remotes.forEach(function(r) { %>
-         <Route path="/<%=r.fileName%>" element={<<%= r.className %>/>} />
-       <% }); %>
-     </Routes>
+      <ul>
+        <li><Link to="/">Home</Link></li>
+       <%_ remotes.forEach(function(r) { _%>
+        <li><Link to="/<%=r.fileName%>"><%=r.className%></Link></li>
+       <%_ }); _%>
+      </ul>
+      <Routes>
+       <%_ if (!minimal) { _%>
+        <Route path="/" element={<NxWelcome title="<%= projectName %>"/>} />
+       <%_ } _%>
+       <%_ remotes.forEach(function(r) { _%>
+        <Route path="/<%=r.fileName%>" element={<<%= r.className %>/>} />
+       <%_ }); _%>
+      </Routes>
     </React.Suspense>
   );
 }

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

@@ -1,10 +1,13 @@
-<% if (dynamic) { %>
-    import { setRemoteDefinitions } from '@nx/react/mf';
+<%_ if (dynamic) { _%>
+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)));
-<% } else { %>
-    import('./bootstrap').catch(err => console.error(err));
-<% } %>
+fetch('/assets/module-federation.manifest.json')
+.then((res) => res.json())
+.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__

@@ -1,30 +1,39 @@
 import * as React from 'react';
-<% if (!minimal) { %>
+<%_ if (!minimal) { _%>
 import NxWelcome from "./nx-welcome";
-<% } %>
+<%_ } _%>
 import { Link, Route, Routes } from 'react-router-dom';
 
-<% if (remotes.length > 0) { %>
-<% remotes.forEach(function(r) { %>
- const <%= r.className %> = React.lazy(() => import('<%= r.fileName %>/Module'));
- <% }); %>
-<% } %>
+<%_ 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}>
      <ul>
        <li><Link to="/">Home</Link></li>
-       <% remotes.forEach(function(r) { %>
+       <%_ remotes.forEach(function(r) { _%>
          <li><Link to="/<%=r.fileName%>"><%=r.className%></Link></li>
-       <% }); %>
+       <%_ }); _%>
      </ul>
      <Routes>
-       <% if (!minimal) { %>
+       <%_ if (!minimal) { _%>
        <Route path="/" element={<NxWelcome title="<%= projectName %>"/>} />
-       <% } %>
-       <% remotes.forEach(function(r) { %>
+       <%_ } _%>
+       <%_ remotes.forEach(function(r) { _%>
          <Route path="/<%=r.fileName%>" element={<<%= r.className %>/>} />
-       <% }); %>
+       <%_ }); _%>
      </Routes>
     </React.Suspense>
   );

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

@@ -1,10 +1,13 @@
-<% if (dynamic) { %>
-    import { setRemoteDefinitions } from '@nx/react/mf';
+<%_ if (dynamic) { _%>
+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)));
-<% } else { %>
-    import('./bootstrap').catch(err => console.error(err));
-<% } %>
+fetch('/assets/module-federation.manifest.json')
+.then((res) => res.json())
+.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-module-federation/module-federation.config.js__tmpl__

@@ -16,9 +16,9 @@ module.exports = {
    *
    */
   remotes: [
-    <% if (static) { 
-         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
-       }
-    %>
+    <%_ if (static) { 
+      remotes.forEach(function(r) { %> 
+    "<%= r.fileName %>", 
+      <%_ }); } _%>
   ],
 };