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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "20.1.0-canary.20241030-62f58eb",
+  "version": "20.1.0-canary.20241101-d4f4dac",
   "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.20241030-62f58eb",
-    "@nx/js": "20.1.0-canary.20241030-62f58eb",
-    "@nx/eslint": "20.1.0-canary.20241030-62f58eb",
-    "@nx/web": "20.1.0-canary.20241030-62f58eb",
+    "@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",
     "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,31 @@
-<% 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 %>'
 
 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-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;
 

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/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();
+  });
 `;
 }