@nx/react 20.1.0-canary.20241030-62f58eb → 20.1.0-canary.20241101-d4f4dac

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,31 @@
 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 (remotes.length > 0) {
+  remotes.forEach(function(r) { _%>
+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,10 @@
-<% if (dynamic) { %>
-    import { setRemoteDefinitions } from '@nx/react/mf';
+<%_ if (dynamic) { _%>
+import { setRemoteDefinitions } from '@nx/react/mf';
 
-    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(definitions => setRemoteDefinitions(definitions))
+.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) { %>
+<%_ if (dynamic) { _%>
 import { loadRemoteModule } from '@nx/react/mf';
-<% } %>
+<%_ } _%>
 
-<% 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(() => loadRemoteModule('<%= r.fileName %>', './Module'))
+      <%_ } 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,10 @@
-<% if (dynamic) { %>
-    import { setRemoteDefinitions } from '@nx/react/mf';
+<%_ if (dynamic) { _%>
+import { setRemoteDefinitions } from '@nx/react/mf';
 
-    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(definitions => setRemoteDefinitions(definitions))
+.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,30 @@
 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 (remotes.length > 0) {
+  remotes.forEach(function(r) { %>
+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,10 @@
-<% if (dynamic) { %>
-    import { setRemoteDefinitions } from '@nx/react/mf';
+<%_ if (dynamic) { _%>
+import { setRemoteDefinitions } from '@nx/react/mf';
 
-    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(definitions => setRemoteDefinitions(definitions))
+.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 %>", 
+      <%_ }); } _%>
   ],
 };

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

@@ -23,7 +23,9 @@ const prodConfig = {
      * ]
      */
     remotes: [
-      <% remotes.forEach(function(r) {%>['<%= r.fileName %>', 'http://localhost:<%= r.port %>/'],<% }); %>
+    <%_ remotes.forEach(function(r) { _%>
+    ['<%= r.fileName %>', 'http://localhost:<%= r.port %>/'],
+    <%_ }); _%>
     ],
 };
 

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

@@ -6,10 +6,12 @@
 const moduleFederationConfig = {
     name: '<%= projectName %>',
     remotes: [
-       <% if (static) { 
-         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
-       }
-    %>
+      <%_ if (static) { 
+        remotes.forEach(function(r) { _%> 
+      "<%= r.fileName %>",
+        <%_ }); 
+      }
+    _%>
   ],
 };
 

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

@@ -4,7 +4,7 @@ const {withModuleFederationForSSR} = require('@nx/rspack/module-federation');
 const baseConfig = require('./module-federation.config');
 
 const defaultConfig = {
-    ...baseConfig
+	...baseConfig
 };
 
 // Nx plugins for rspack to build config object from Nx options and context.

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

@@ -1,12 +1,12 @@
 import { ModuleFederationConfig } from '@nx/rspack/module-federation';
 
 const config: ModuleFederationConfig = {
-    name: '<%= projectName %>',
-    remotes: [
-      <% if (static) { 
-         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
-       }
-    %>
+  name: '<%= projectName %>',
+  remotes: [
+    <%_ if (static) { 
+      remotes.forEach(function(r) { _%>
+    "<%= r.fileName %>", 
+      <%_ }); } _%>
   ],
 };
 

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

@@ -4,7 +4,7 @@ import {withModuleFederationForSSR} from '@nx/rspack/module-federation';
 import baseConfig from './module-federation.config';
 
 const defaultConfig = {
-    ...baseConfig
+  ...baseConfig
 };
 
 // Nx plugins for rspack to build config object from Nx options and context.

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

@@ -1,24 +1,24 @@
 import { ModuleFederationConfig } from '@nx/rspack/module-federation';
 
 const config: ModuleFederationConfig = {
-    name: '<%= projectName %>',
-    /**
-     * To use a remote that does not exist in your current Nx Workspace
-     * You can use the tuple-syntax to define your remote
-     *
-     * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
-     *
-     * You _may_ need to add a `remotes.d.ts` file to your `src/` folder declaring the external remote for tsc, with the
-     * following content:
-     *
-     * declare module 'my-external-remote';
-     *
-     */
-    remotes: [
-            <% if (static) { 
-         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
-       }
-    %>
+  name: '<%= projectName %>',
+  /**
+    * To use a remote that does not exist in your current Nx Workspace
+    * You can use the tuple-syntax to define your remote
+    *
+    * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
+    *
+    * You _may_ need to add a `remotes.d.ts` file to your `src/` folder declaring the external remote for tsc, with the
+    * following content:
+    *
+    * declare module 'my-external-remote';
+    *
+    */
+  remotes: [
+    <%_ if (static) { 
+        remotes.forEach(function(r) { _%> 
+    "<%= r.fileName %>", 
+    <%_ }); } _%>
   ],
 };
 

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

@@ -4,27 +4,29 @@ import { withModuleFederation, ModuleFederationConfig } from '@nx/rspack/module-
 import baseConfig from './module-federation.config';
 
 const prodConfig: ModuleFederationConfig = {
-    ...baseConfig,
-    /*
-     * Remote overrides for production.
-     * Each entry is a pair of a unique name and the URL where it is deployed.
-     *
-     * e.g.
-     * remotes: [
-     *   ['app1', 'http://app1.example.com'],
-     *   ['app2', 'http://app2.example.com'],
-     * ]
-     *
-     * You can also use a full path to the remoteEntry.js file if desired.
-     *
-     * remotes: [
-     *   ['app1', 'http://example.com/path/to/app1/remoteEntry.js'],
-     *   ['app2', 'http://example.com/path/to/app2/remoteEntry.js'],
-     * ]
-     */
-    remotes: [
-        <% remotes.forEach(function(r) {%>['<%= r.fileName %>', 'http://localhost:<%= r.port %>/'],<% }); %>
-],
+	...baseConfig,
+	/*
+		* Remote overrides for production.
+		* Each entry is a pair of a unique name and the URL where it is deployed.
+		*
+		* e.g.
+		* remotes: [
+		*   ['app1', 'http://app1.example.com'],
+		*   ['app2', 'http://app2.example.com'],
+		* ]
+		*
+		* You can also use a full path to the remoteEntry.js file if desired.
+		*
+		* remotes: [
+		*   ['app1', 'http://example.com/path/to/app1/remoteEntry.js'],
+		*   ['app2', 'http://example.com/path/to/app2/remoteEntry.js'],
+		* ]
+		*/
+	remotes: [
+		<%_ remotes.forEach(function(r) { _%>
+		['<%= r.fileName %>', 'http://localhost:<%= r.port %>/'],
+		<%_ }); _%>
+	],
 };
 
 // Nx plugins for rspack to build config object from Nx options and context.

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

@@ -4,7 +4,7 @@ import {withModuleFederation, ModuleFederationConfig} from '@nx/rspack/module-fe
 import baseConfig from './module-federation.config';
 
 const config: ModuleFederationConfig = {
-    ...baseConfig,
+  ...baseConfig,
 };
 
 // Nx plugins for rspack to build config object from Nx options and context.

package/src/generators/host/files/webpack-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 %>", 
+      <%_ }); } _%>
   ],
 };