@nx/react 0.0.0-pr-31222-862e973 → 0.0.0-pr-31313-387cdca

package/src/generators/application/files/react-router-ssr/ts-solution/package.json__tmpl__

@@ -0,0 +1,21 @@
+{
+  "name": "<%= projectName %>",
+  "private": true,
+  "type": "module",
+  "scripts": {},
+  "dependencies": {
+    "@react-router/node": "<%= reactRouterVersion %>",
+    "@react-router/serve": "<%= reactRouterVersion %>",
+    "isbot": "<%= reactRouterIsBotVersion %>",
+    "react": "<%= reactVersion %>",
+    "react-dom": "<%= reactVersion %>",
+    "react-router": "<%= reactRouterVersion %>"
+  },
+  "devDependencies": {
+    "@react-router/dev": "<%= reactRouterVersion %>",
+    "@types/node": "<%= typesNodeVersion %>",
+    "@types/react": "<%= reactVersion %>",
+    "@types/react-dom": "<%= reactVersion %>"
+  },
+  "sideEffects": false,
+}

package/src/generators/application/files/react-router-ssr/ts-solution/tsconfig.app.json__tmpl__

@@ -0,0 +1,39 @@
+{
+  "extends": "<%= offsetFromRoot %>tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "lib": ["DOM", "DOM.Iterable", "ES2019"],
+    "types": ["@react-router/node", "vite/client"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": [
+    "app/**/*.ts",
+    "app/**/*.tsx",
+    "app/**/*.js",
+    "app/**/*.jsx",
+    "**/.server/**/*.ts",
+    "**/.server/**/*.tsx",
+    "**/.client/**/*.ts",
+    "**/.client/**/*.tsx"
+  ],
+  "exclude": [
+    "tests/**/*.spec.ts",
+    "tests/**/*.test.ts",
+    "tests/**/*.spec.tsx",
+    "tests/**/*.test.tsx",
+    "tests/**/*.spec.js",
+    "tests/**/*.test.js",
+    "tests/**/*.spec.jsx",
+    "tests/**/*.test.jsx"
+  ]
+}

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) { %>
+<%_ } _%>
+// Uncomment this line to use CSS modules
+// import styles from './<%= fileName %>.module.<%= style %>';
+<%_ 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,34 +1,44 @@
-<% if (classComponent) { %>
+<%_ if (classComponent) { _%>
 import { Component } from 'react';
-<% } if (!minimal) { %>
+<%_ } if (!minimal) { _%>
 import NxWelcome from "./nx-welcome";
-<% } if (bundler === "rspack") { %>
+<%_ } if (bundler === "rspack" || bundler === 'rsbuild') { _%>
 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/add-e2e.d.ts

@@ -1,3 +1,3 @@
-import type { GeneratorCallback, Tree } from '@nx/devkit';
+import { GeneratorCallback, Tree } from '@nx/devkit';
 import { NormalizedSchema } from '../schema';
 export declare function addE2e(tree: Tree, options: NormalizedSchema): Promise<GeneratorCallback>;

package/src/generators/application/lib/add-e2e.js

@@ -6,10 +6,13 @@ const web_1 = require("@nx/web");
 const versions_1 = require("../../../utils/versions");
 const has_webpack_plugin_1 = require("../../../utils/has-webpack-plugin");
 const has_vite_plugin_1 = require("../../../utils/has-vite-plugin");
-const find_plugin_for_config_file_1 = require("@nx/devkit/src/utils/find-plugin-for-config-file");
-const target_defaults_utils_1 = require("@nx/devkit/src/generators/target-defaults-utils");
+const has_rspack_plugin_1 = require("../../../utils/has-rspack-plugin");
+const has_rsbuild_plugin_1 = require("../../../utils/has-rsbuild-plugin");
 async function addE2e(tree, options) {
     const hasNxBuildPlugin = (options.bundler === 'webpack' && (0, has_webpack_plugin_1.hasWebpackPlugin)(tree)) ||
+        (options.bundler === 'rspack' && (0, has_rspack_plugin_1.hasRspackPlugin)(tree)) ||
+        (options.bundler === 'rsbuild' &&
+            (await (0, has_rsbuild_plugin_1.hasRsbuildPlugin)(tree, options.appProjectRoot))) ||
         (options.bundler === 'vite' && (0, has_vite_plugin_1.hasVitePlugin)(tree));
     let e2eWebServerInfo = {
         e2eWebServerAddress: `http://localhost:${options.devServerPort ?? 4200}`,
@@ -22,9 +25,20 @@ async function addE2e(tree, options) {
         const { getWebpackE2EWebServerInfo } = (0, devkit_1.ensurePackage)('@nx/webpack', versions_1.nxVersion);
         e2eWebServerInfo = await getWebpackE2EWebServerInfo(tree, options.projectName, (0, devkit_1.joinPathFragments)(options.appProjectRoot, `webpack.config.${options.js ? 'js' : 'ts'}`), options.addPlugin, options.devServerPort ?? 4200);
     }
+    else if (options.bundler === 'rspack') {
+        const { getRspackE2EWebServerInfo } = (0, devkit_1.ensurePackage)('@nx/rspack', versions_1.nxVersion);
+        e2eWebServerInfo = await getRspackE2EWebServerInfo(tree, options.projectName, (0, devkit_1.joinPathFragments)(options.appProjectRoot, `rspack.config.${options.js ? 'js' : 'ts'}`), options.addPlugin, options.devServerPort ?? 4200);
+    }
     else if (options.bundler === 'vite') {
-        const { getViteE2EWebServerInfo } = (0, devkit_1.ensurePackage)('@nx/vite', versions_1.nxVersion);
-        e2eWebServerInfo = await getViteE2EWebServerInfo(tree, options.projectName, (0, devkit_1.joinPathFragments)(options.appProjectRoot, `vite.config.${options.js ? 'js' : 'ts'}`), options.addPlugin, options.devServerPort ?? 4200);
+        const { getViteE2EWebServerInfo, getReactRouterE2EWebServerInfo } = (0, devkit_1.ensurePackage)('@nx/vite', versions_1.nxVersion);
+        e2eWebServerInfo = options.useReactRouter
+            ? await getReactRouterE2EWebServerInfo(tree, options.projectName, (0, devkit_1.joinPathFragments)(options.appProjectRoot, `vite.config.${options.js ? 'js' : 'ts'}`), options.addPlugin, options.devServerPort ?? 4200)
+            : await getViteE2EWebServerInfo(tree, options.projectName, (0, devkit_1.joinPathFragments)(options.appProjectRoot, `vite.config.${options.js ? 'js' : 'ts'}`), options.addPlugin, options.devServerPort ?? 4200);
+    }
+    else if (options.bundler === 'rsbuild') {
+        (0, devkit_1.ensurePackage)('@nx/rsbuild', versions_1.nxVersion);
+        const { getRsbuildE2EWebServerInfo } = await Promise.resolve().then(() => require('@nx/rsbuild/config-utils'));
+        e2eWebServerInfo = await getRsbuildE2EWebServerInfo(tree, options.projectName, (0, devkit_1.joinPathFragments)(options.appProjectRoot, `rsbuild.config.${options.js ? 'js' : 'ts'}`), options.addPlugin, options.devServerPort ?? 4200);
     }
     if (!hasNxBuildPlugin) {
         await (0, web_1.webStaticServeGenerator)(tree, {
@@ -36,65 +50,78 @@ async function addE2e(tree, options) {
     switch (options.e2eTestRunner) {
         case 'cypress': {
             const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
-            (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {
-                projectType: 'application',
-                root: options.e2eProjectRoot,
-                sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
-                targets: {},
-                implicitDependencies: [options.projectName],
-                tags: [],
-            });
+            const packageJson = {
+                name: options.e2eProjectName,
+                version: '0.0.1',
+                private: true,
+            };
+            if (!options.useProjectJson) {
+                packageJson.nx = {
+                    implicitDependencies: [options.projectName],
+                };
+            }
+            else {
+                (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {
+                    projectType: 'application',
+                    root: options.e2eProjectRoot,
+                    sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
+                    targets: {},
+                    implicitDependencies: [options.projectName],
+                    tags: [],
+                });
+            }
+            if (!options.useProjectJson || options.isUsingTsSolutionConfig) {
+                (0, devkit_1.writeJson)(tree, (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'package.json'), packageJson);
+            }
             const e2eTask = await configurationGenerator(tree, {
                 ...options,
                 project: options.e2eProjectName,
                 directory: 'src',
                 // the name and root are already normalized, instruct the generator to use them as is
-                bundler: options.bundler === 'rspack' ? 'webpack' : options.bundler,
+                bundler: options.bundler === 'rspack'
+                    ? 'webpack'
+                    : options.bundler === 'rsbuild'
+                        ? 'none'
+                        : options.bundler,
                 skipFormat: true,
                 devServerTarget: e2eWebServerInfo.e2eDevServerTarget,
                 baseUrl: e2eWebServerInfo.e2eWebServerAddress,
                 jsx: true,
                 rootProject: options.rootProject,
-                webServerCommands: hasNxBuildPlugin
-                    ? {
-                        default: e2eWebServerInfo.e2eWebServerCommand,
-                        production: e2eWebServerInfo.e2eCiWebServerCommand,
-                    }
-                    : undefined,
-                ciWebServerCommand: hasNxBuildPlugin
-                    ? e2eWebServerInfo.e2eCiWebServerCommand
-                    : undefined,
+                webServerCommands: {
+                    default: e2eWebServerInfo.e2eWebServerCommand,
+                    production: e2eWebServerInfo.e2eCiWebServerCommand,
+                },
+                ciWebServerCommand: e2eWebServerInfo.e2eCiWebServerCommand,
                 ciBaseUrl: e2eWebServerInfo.e2eCiBaseUrl,
             });
-            if (options.addPlugin ||
-                (0, devkit_1.readNxJson)(tree).plugins?.find((p) => typeof p === 'string'
-                    ? p === '@nx/cypress/plugin'
-                    : p.plugin === '@nx/cypress/plugin')) {
-                let buildTarget = '^build';
-                if (hasNxBuildPlugin) {
-                    const configFile = options.bundler === 'webpack'
-                        ? 'webpack.config.js'
-                        : options.bundler === 'vite'
-                            ? `vite.config.${options.js ? 'js' : 'ts'}`
-                            : 'webpack.config.js';
-                    const matchingPlugin = await (0, find_plugin_for_config_file_1.findPluginForConfigFile)(tree, `@nx/${options.bundler}/plugin`, (0, devkit_1.joinPathFragments)(options.appProjectRoot, configFile));
-                    if (matchingPlugin && typeof matchingPlugin !== 'string') {
-                        buildTarget = `^${matchingPlugin.options?.buildTargetName ?? 'build'}`;
-                    }
-                }
-                await (0, target_defaults_utils_1.addE2eCiTargetDefaults)(tree, '@nx/cypress/plugin', buildTarget, (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, `cypress.config.${options.js ? 'js' : 'ts'}`));
-            }
             return e2eTask;
         }
         case 'playwright': {
             const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/playwright', versions_1.nxVersion);
-            (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {
-                projectType: 'application',
-                root: options.e2eProjectRoot,
-                sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
-                targets: {},
-                implicitDependencies: [options.projectName],
-            });
+            const packageJson = {
+                name: options.e2eProjectName,
+                version: '0.0.1',
+                private: true,
+            };
+            if (!options.useProjectJson) {
+                packageJson.nx = {
+                    implicitDependencies: [options.projectName],
+                };
+            }
+            else {
+                (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {
+                    projectType: 'application',
+                    root: options.e2eProjectRoot,
+                    sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
+                    targets: {},
+                    implicitDependencies: [options.projectName],
+                    tags: [],
+                });
+            }
+            if (!options.useProjectJson || options.isUsingTsSolutionConfig) {
+                (0, devkit_1.writeJson)(tree, (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'package.json'), packageJson);
+            }
             const e2eTask = await configurationGenerator(tree, {
                 project: options.e2eProjectName,
                 skipFormat: true,
@@ -108,24 +135,6 @@ async function addE2e(tree, options) {
                 rootProject: options.rootProject,
                 addPlugin: options.addPlugin,
             });
-            if (options.addPlugin ||
-                (0, devkit_1.readNxJson)(tree).plugins?.find((p) => typeof p === 'string'
-                    ? p === '@nx/playwright/plugin'
-                    : p.plugin === '@nx/playwright/plugin')) {
-                let buildTarget = '^build';
-                if (hasNxBuildPlugin) {
-                    const configFile = options.bundler === 'webpack'
-                        ? 'webpack.config.js'
-                        : options.bundler === 'vite'
-                            ? `vite.config.${options.js ? 'js' : 'ts'}`
-                            : 'webpack.config.js';
-                    const matchingPlugin = await (0, find_plugin_for_config_file_1.findPluginForConfigFile)(tree, `@nx/${options.bundler}/plugin`, (0, devkit_1.joinPathFragments)(options.appProjectRoot, configFile));
-                    if (matchingPlugin && typeof matchingPlugin !== 'string') {
-                        buildTarget = `^${matchingPlugin.options?.buildTargetName ?? 'build'}`;
-                    }
-                }
-                await (0, target_defaults_utils_1.addE2eCiTargetDefaults)(tree, '@nx/playwright/plugin', buildTarget, (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, `playwright.config.ts`));
-            }
             return e2eTask;
         }
         case 'none':