@nx/react 0.0.0-pr-29314-e664f92 → 0.0.0-pr-29286-735af1e

package/LICENSE

@@ -1,6 +1,6 @@
 (The MIT License)
 
-Copyright (c) 2017-2024 Narwhal Technologies Inc.
+Copyright (c) 2017-2025 Narwhal Technologies Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

package/migrations.json

@@ -41,6 +41,12 @@
       "version": "20.2.0-beta.2",
       "description": "Update the withModuleFederation import use @nx/module-federation/webpack.",
       "factory": "./src/migrations/update-20-2-0/migrate-with-mf-import-to-new-package"
+    },
+    "ensure-nx-module-federation-package": {
+      "cli": "nx",
+      "version": "20.3.0-beta.2",
+      "description": "If workspace includes Module Federation projects, ensure the new @nx/module-federation package is installed.",
+      "factory": "./src/migrations/update-20-3-0/ensure-nx-module-federation-package"
     }
   },
   "packageJsonUpdates": {
@@ -185,6 +191,15 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "20.3.0": {
+      "version": "20.3.0-beta.0",
+      "packages": {
+        "@testing-library/react": {
+          "version": "16.1.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "0.0.0-pr-29314-e664f92",
+  "version": "0.0.0-pr-29286-735af1e",
   "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,13 +38,14 @@
     "minimatch": "9.0.3",
     "picocolors": "^1.1.0",
     "tslib": "^2.3.0",
-    "@nx/devkit": "0.0.0-pr-29314-e664f92",
-    "@nx/js": "0.0.0-pr-29314-e664f92",
-    "@nx/eslint": "0.0.0-pr-29314-e664f92",
-    "@nx/web": "0.0.0-pr-29314-e664f92",
-    "@nx/module-federation": "0.0.0-pr-29314-e664f92",
+    "@nx/devkit": "0.0.0-pr-29286-735af1e",
+    "@nx/js": "0.0.0-pr-29286-735af1e",
+    "@nx/eslint": "0.0.0-pr-29286-735af1e",
+    "@nx/web": "0.0.0-pr-29286-735af1e",
+    "@nx/module-federation": "0.0.0-pr-29286-735af1e",
     "express": "^4.19.2",
-    "http-proxy-middleware": "^3.0.3"
+    "http-proxy-middleware": "^3.0.3",
+    "semver": "^7.6.3"
   },
   "publishConfig": {
     "access": "public"

package/plugins/jest.js

@@ -16,17 +16,12 @@ module.exports = {
       module.exports = {
         __esModule: true,
         default: ${assetFilename},
-        ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
-          return {
-            $$typeof: Symbol.for('react.element'),
-            type: 'svg',
-            ref: ref,
-            key: null,
-            props: Object.assign({}, props, {
-              children: ${assetFilename}
-            })
-          };
-        }),
+        ReactComponent: function ${componentName}(props) {
+          return React.createElement(
+            'svg',
+            Object.assign({}, props, { children: ${assetFilename} })
+          );
+        },
       };`,
             };
         }

package/src/generators/application/application.d.ts

@@ -1,5 +1,5 @@
-import { Schema } from './schema';
 import { GeneratorCallback, Tree } from '@nx/devkit';
-export declare function applicationGenerator(host: Tree, schema: Schema): Promise<GeneratorCallback>;
-export declare function applicationGeneratorInternal(host: Tree, schema: Schema): Promise<GeneratorCallback>;
+import { Schema } from './schema';
+export declare function applicationGenerator(tree: Tree, schema: Schema): Promise<GeneratorCallback>;
+export declare function applicationGeneratorInternal(tree: Tree, schema: Schema): Promise<GeneratorCallback>;
 export default applicationGenerator;

package/src/generators/application/application.js

@@ -2,7 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.applicationGenerator = applicationGenerator;
 exports.applicationGeneratorInternal = applicationGeneratorInternal;
-const lint_1 = require("../../utils/lint");
+const devkit_1 = require("@nx/devkit");
+const js_1 = require("@nx/js");
+const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-project-command");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
+const create_ts_config_1 = require("../../utils/create-ts-config");
+const add_styled_dependencies_1 = require("../../rules/add-styled-dependencies");
+const setup_tailwind_1 = require("../setup-tailwind/setup-tailwind");
+const init_1 = require("../init/init");
 const create_application_files_1 = require("./lib/create-application-files");
 const update_jest_config_1 = require("./lib/update-jest-config");
 const normalize_options_1 = require("./lib/normalize-options");
@@ -10,71 +17,23 @@ const add_project_1 = require("./lib/add-project");
 const add_jest_1 = require("./lib/add-jest");
 const add_routing_1 = require("./lib/add-routing");
 const set_defaults_1 = require("./lib/set-defaults");
-const add_styled_dependencies_1 = require("../../rules/add-styled-dependencies");
-const devkit_1 = require("@nx/devkit");
-const init_1 = require("../init/init");
-const eslint_1 = require("@nx/eslint");
-const versions_1 = require("../../utils/versions");
-const maybe_js_1 = require("../../utils/maybe-js");
-const install_common_dependencies_1 = require("./lib/install-common-dependencies");
-const create_ts_config_1 = require("../../utils/create-ts-config");
-const add_swc_dependencies_1 = require("@nx/js/src/utils/swc/add-swc-dependencies");
-const pc = require("picocolors");
-const show_possible_warnings_1 = require("./lib/show-possible-warnings");
+const add_linting_1 = require("./lib/add-linting");
 const add_e2e_1 = require("./lib/add-e2e");
-const eslint_file_1 = require("@nx/eslint/src/generators/utils/eslint-file");
-const js_1 = require("@nx/js");
-const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-project-command");
-const setup_tailwind_1 = require("../setup-tailwind/setup-tailwind");
-const flat_config_1 = require("@nx/eslint/src/utils/flat-config");
-const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
-async function addLinting(host, options) {
-    const tasks = [];
-    if (options.linter === eslint_1.Linter.EsLint) {
-        const lintTask = await (0, eslint_1.lintProjectGenerator)(host, {
-            linter: options.linter,
-            project: options.projectName,
-            tsConfigPaths: [
-                (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
-            ],
-            unitTestRunner: options.unitTestRunner,
-            skipFormat: true,
-            rootProject: options.rootProject,
-            skipPackageJson: options.skipPackageJson,
-            addPlugin: options.addPlugin,
-        });
-        tasks.push(lintTask);
-        if ((0, eslint_file_1.isEslintConfigSupported)(host)) {
-            if ((0, flat_config_1.useFlatConfig)(host)) {
-                (0, eslint_file_1.addPredefinedConfigToFlatLintConfig)(host, options.appProjectRoot, 'flat/react');
-                // Add an empty rules object to users know how to add/override rules
-                (0, eslint_file_1.addOverrideToLintConfig)(host, options.appProjectRoot, {
-                    files: ['*.ts', '*.tsx', '*.js', '*.jsx'],
-                    rules: {},
-                });
-            }
-            else {
-                const addExtendsTask = (0, eslint_file_1.addExtendsToLintConfig)(host, options.appProjectRoot, { name: 'plugin:@nx/react', needCompatFixup: true });
-                tasks.push(addExtendsTask);
-            }
-        }
-        if (!options.skipPackageJson) {
-            const installTask = (0, devkit_1.addDependenciesToPackageJson)(host, lint_1.extraEslintDependencies.dependencies, lint_1.extraEslintDependencies.devDependencies);
-            const addSwcTask = (0, add_swc_dependencies_1.addSwcDependencies)(host);
-            tasks.push(installTask, addSwcTask);
-        }
-    }
-    return (0, devkit_1.runTasksInSerial)(...tasks);
-}
-async function applicationGenerator(host, schema) {
-    return await applicationGeneratorInternal(host, {
+const show_possible_warnings_1 = require("./lib/show-possible-warnings");
+const install_common_dependencies_1 = require("./lib/install-common-dependencies");
+const add_webpack_1 = require("./lib/bundlers/add-webpack");
+const add_rspack_1 = require("./lib/bundlers/add-rspack");
+const add_rsbuild_1 = require("./lib/bundlers/add-rsbuild");
+const add_vite_1 = require("./lib/bundlers/add-vite");
+async function applicationGenerator(tree, schema) {
+    return await applicationGeneratorInternal(tree, {
         addPlugin: false,
         ...schema,
     });
 }
-async function applicationGeneratorInternal(host, schema) {
+async function applicationGeneratorInternal(tree, schema) {
     const tasks = [];
-    const jsInitTask = await (0, js_1.initGenerator)(host, {
+    const jsInitTask = await (0, js_1.initGenerator)(tree, {
         ...schema,
         tsConfigName: schema.rootProject ? 'tsconfig.json' : 'tsconfig.base.json',
         skipFormat: true,
@@ -82,15 +41,15 @@ async function applicationGeneratorInternal(host, schema) {
         formatter: schema.formatter,
     });
     tasks.push(jsInitTask);
-    const options = await (0, normalize_options_1.normalizeOptions)(host, schema);
-    (0, show_possible_warnings_1.showPossibleWarnings)(host, options);
-    const initTask = await (0, init_1.default)(host, {
+    const options = await (0, normalize_options_1.normalizeOptions)(tree, schema);
+    (0, show_possible_warnings_1.showPossibleWarnings)(tree, options);
+    const initTask = await (0, init_1.default)(tree, {
         ...options,
         skipFormat: true,
     });
     tasks.push(initTask);
     if (!options.addPlugin) {
-        const nxJson = (0, devkit_1.readNxJson)(host);
+        const nxJson = (0, devkit_1.readNxJson)(tree);
         nxJson.targetDefaults ??= {};
         if (!Object.keys(nxJson.targetDefaults).includes('build')) {
             nxJson.targetDefaults.build = {
@@ -101,172 +60,78 @@ async function applicationGeneratorInternal(host, schema) {
         else if (!nxJson.targetDefaults.build.dependsOn) {
             nxJson.targetDefaults.build.dependsOn = ['^build'];
         }
-        (0, devkit_1.updateNxJson)(host, nxJson);
+        (0, devkit_1.updateNxJson)(tree, nxJson);
     }
     if (options.bundler === 'webpack') {
-        const { webpackInitGenerator } = (0, devkit_1.ensurePackage)('@nx/webpack', versions_1.nxVersion);
-        const webpackInitTask = await webpackInitGenerator(host, {
-            skipPackageJson: options.skipPackageJson,
-            skipFormat: true,
-            addPlugin: options.addPlugin,
-        });
-        tasks.push(webpackInitTask);
-        if (!options.skipPackageJson) {
-            const { ensureDependencies } = await Promise.resolve().then(() => require('@nx/webpack/src/utils/ensure-dependencies'));
-            tasks.push(ensureDependencies(host, { uiFramework: 'react' }));
-        }
+        await (0, add_webpack_1.initWebpack)(tree, options, tasks);
     }
     else if (options.bundler === 'rspack') {
-        const { rspackInitGenerator } = (0, devkit_1.ensurePackage)('@nx/rspack', versions_1.nxVersion);
-        const rspackInitTask = await rspackInitGenerator(host, {
-            ...options,
-            addPlugin: false,
-            skipFormat: true,
-        });
-        tasks.push(rspackInitTask);
+        await (0, add_rspack_1.initRspack)(tree, options, tasks);
+    }
+    else if (options.bundler === 'rsbuild') {
+        await (0, add_rsbuild_1.initRsbuild)(tree, options, tasks);
     }
     if (!options.rootProject) {
-        (0, create_ts_config_1.extractTsConfigBase)(host);
+        (0, create_ts_config_1.extractTsConfigBase)(tree);
     }
-    await (0, create_application_files_1.createApplicationFiles)(host, options);
-    (0, add_project_1.addProject)(host, options);
+    await (0, create_application_files_1.createApplicationFiles)(tree, options);
+    (0, add_project_1.addProject)(tree, options);
     if (options.style === 'tailwind') {
-        const twTask = await (0, setup_tailwind_1.setupTailwindGenerator)(host, {
+        const twTask = await (0, setup_tailwind_1.setupTailwindGenerator)(tree, {
             project: options.projectName,
         });
         tasks.push(twTask);
     }
     if (options.bundler === 'vite') {
-        const { createOrEditViteConfig, viteConfigurationGenerator } = (0, devkit_1.ensurePackage)('@nx/vite', versions_1.nxVersion);
-        // We recommend users use `import.meta.env.MODE` and other variables in their code to differentiate between production and development.
-        // See: https://vitejs.dev/guide/env-and-mode.html
-        if (host.exists((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/environments'))) {
-            host.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/environments'));
-        }
-        const viteTask = await viteConfigurationGenerator(host, {
-            uiFramework: 'react',
-            project: options.projectName,
-            newProject: true,
-            includeVitest: options.unitTestRunner === 'vitest',
-            inSourceTests: options.inSourceTests,
-            compiler: options.compiler,
-            skipFormat: true,
-            addPlugin: options.addPlugin,
-            projectType: 'application',
-        });
-        tasks.push(viteTask);
-        createOrEditViteConfig(host, {
-            project: options.projectName,
-            includeLib: false,
-            includeVitest: options.unitTestRunner === 'vitest',
-            inSourceTests: options.inSourceTests,
-            rollupOptionsExternal: [
-                "'react'",
-                "'react-dom'",
-                "'react/jsx-runtime'",
-            ],
-            imports: [
-                options.compiler === 'swc'
-                    ? `import react from '@vitejs/plugin-react-swc'`
-                    : `import react from '@vitejs/plugin-react'`,
-            ],
-            plugins: ['react()'],
-        }, false);
+        await (0, add_vite_1.setupViteConfiguration)(tree, options, tasks);
     }
     else if (options.bundler === 'rspack') {
-        const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/rspack', versions_1.nxVersion);
-        const rspackTask = await configurationGenerator(host, {
-            project: options.projectName,
-            main: (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)({
-                js: options.js,
-                useJsx: true,
-            }, `src/main.tsx`)),
-            tsConfig: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
-            target: 'web',
-            newProject: true,
-            framework: 'react',
-        });
-        tasks.push(rspackTask);
+        await (0, add_rspack_1.setupRspackConfiguration)(tree, options, tasks);
+    }
+    else if (options.bundler === 'rsbuild') {
+        await (0, add_rsbuild_1.setupRsbuildConfiguration)(tree, options, tasks);
     }
     if (options.bundler !== 'vite' && options.unitTestRunner === 'vitest') {
-        const { createOrEditViteConfig, vitestGenerator } = (0, devkit_1.ensurePackage)('@nx/vite', versions_1.nxVersion);
-        const vitestTask = await vitestGenerator(host, {
-            uiFramework: 'react',
-            coverageProvider: 'v8',
-            project: options.projectName,
-            inSourceTests: options.inSourceTests,
-            skipFormat: true,
-            addPlugin: options.addPlugin,
-        });
-        tasks.push(vitestTask);
-        createOrEditViteConfig(host, {
-            project: options.projectName,
-            includeLib: false,
-            includeVitest: true,
-            inSourceTests: options.inSourceTests,
-            rollupOptionsExternal: [
-                "'react'",
-                "'react-dom'",
-                "'react/jsx-runtime'",
-            ],
-            imports: [
-                options.compiler === 'swc'
-                    ? `import react from '@vitejs/plugin-react-swc'`
-                    : `import react from '@vitejs/plugin-react'`,
-            ],
-            plugins: ['react()'],
-        }, true);
+        await (0, add_vite_1.setupVitestConfiguration)(tree, options, tasks);
     }
     if ((options.bundler === 'vite' || options.unitTestRunner === 'vitest') &&
         options.inSourceTests) {
-        host.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/app/${options.fileName}.spec.tsx`));
+        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/app/${options.fileName}.spec.tsx`));
     }
-    const lintTask = await addLinting(host, options);
+    const lintTask = await (0, add_linting_1.addLinting)(tree, options);
     tasks.push(lintTask);
-    const e2eTask = await (0, add_e2e_1.addE2e)(host, options);
+    const e2eTask = await (0, add_e2e_1.addE2e)(tree, options);
     tasks.push(e2eTask);
     if (options.unitTestRunner === 'jest') {
-        const jestTask = await (0, add_jest_1.addJest)(host, options);
+        const jestTask = await (0, add_jest_1.addJest)(tree, options);
         tasks.push(jestTask);
     }
     // Handle tsconfig.spec.json for jest or vitest
-    (0, update_jest_config_1.updateSpecConfig)(host, options);
-    const stylePreprocessorTask = (0, install_common_dependencies_1.installCommonDependencies)(host, options);
+    (0, update_jest_config_1.updateSpecConfig)(tree, options);
+    const stylePreprocessorTask = await (0, install_common_dependencies_1.installCommonDependencies)(tree, options);
     tasks.push(stylePreprocessorTask);
-    const styledTask = (0, add_styled_dependencies_1.addStyledModuleDependencies)(host, options);
+    const styledTask = (0, add_styled_dependencies_1.addStyledModuleDependencies)(tree, options);
     tasks.push(styledTask);
-    const routingTask = (0, add_routing_1.addRouting)(host, options);
+    const routingTask = (0, add_routing_1.addRouting)(tree, options);
     tasks.push(routingTask);
-    (0, set_defaults_1.setDefaults)(host, options);
+    (0, set_defaults_1.setDefaults)(tree, options);
     if (options.bundler === 'rspack' && options.style === 'styled-jsx') {
-        devkit_1.logger.warn(`${pc.bold('styled-jsx')} is not supported by ${pc.bold('Rspack')}. We've added ${pc.bold('babel-loader')} to your project, but using babel will slow down your build.`);
-        tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, {}, { 'babel-loader': versions_1.babelLoaderVersion }));
-        host.write((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'rspack.config.js'), (0, devkit_1.stripIndents) `
-        const { composePlugins, withNx, withReact } = require('@nx/rspack');
-        module.exports = composePlugins(withNx(), withReact(), (config) => {
-          config.module.rules.push({
-            test: /\\.[jt]sx$/i,
-            use: [
-              {
-                loader: 'babel-loader',
-                options: {
-                  presets: ['@babel/preset-typescript'],
-                  plugins: ['styled-jsx/babel'],
-                },
-              },
-            ],
-          });
-          return config;
-        });
-        `);
+        (0, add_rspack_1.handleStyledJsxForRspack)(tasks, tree, options);
     }
-    (0, ts_solution_setup_1.updateTsconfigFiles)(host, options.appProjectRoot, 'tsconfig.app.json', {
+    (0, ts_solution_setup_1.updateTsconfigFiles)(tree, options.appProjectRoot, 'tsconfig.app.json', {
         jsx: 'react-jsx',
         module: 'esnext',
         moduleResolution: 'bundler',
-    });
+    }, options.linter === 'eslint'
+        ? ['eslint.config.js', 'eslint.config.cjs', 'eslint.config.mjs']
+        : undefined);
+    // If we are using the new TS solution
+    // We need to update the workspace file (package.json or pnpm-workspaces.yaml) to include the new project
+    if (options.isUsingTsSolutionConfig) {
+        (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(tree, options.appProjectRoot);
+    }
     if (!options.skipFormat) {
-        await (0, devkit_1.formatFiles)(host);
+        await (0, devkit_1.formatFiles)(tree);
     }
     tasks.push(() => {
         (0, log_show_project_command_1.logShowProjectCommand)(options.projectName);

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

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

package/src/generators/application/files/base-rsbuild/src/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title><%= className %></title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

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

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

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

@@ -0,0 +1,31 @@
+<%_ if (isUsingTsSolutionSetup) { _%>{
+  "extends": "<%= offsetFromRoot%>tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo",
+    "jsx": "react-jsx",
+    "lib": ["dom"],
+    "types": [
+      "node",
+      <%_ if (style === 'styled-jsx') { _%>"@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.tsx", "src/**/*.test.tsx", "src/**/*.spec.js", "src/**/*.test.js", "src/**/*.spec.jsx", "src/**/*.test.jsx"],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}<% } else { %>{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "<%= offsetFromRoot %>dist/out-tsc",
+    "types": [
+      "node",
+      <%_ if (style === 'styled-jsx') { _%>"@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.tsx", "src/**/*.test.tsx", "src/**/*.spec.js", "src/**/*.test.js", "src/**/*.spec.jsx", "src/**/*.test.jsx"],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}
+<% } %>

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

@@ -2,7 +2,7 @@
 import { Component } from 'react';
 <%_ } if (!minimal) { _%>
 import NxWelcome from "./nx-welcome";
-<%_ } if (bundler === "rspack") { _%>
+<%_ } if (bundler === "rspack" || bundler === 'rsbuild') { _%>
 import '../styles.css';
 <%_ } _%>
 

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

@@ -7,11 +7,14 @@ 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 has_rspack_plugin_1 = require("../../../utils/has-rspack-plugin");
+const has_rsbuild_plugin_1 = require("../../../utils/has-rsbuild-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");
 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}`,
@@ -28,6 +31,11 @@ async function addE2e(tree, options) {
         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);
     }
+    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, {
             buildTarget: `${options.projectName}:build`,
@@ -65,7 +73,11 @@ async function addE2e(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,

package/src/generators/application/lib/add-linting.d.ts

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

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

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addLinting = addLinting;
+const devkit_1 = require("@nx/devkit");
+const eslint_1 = require("@nx/eslint");
+const eslint_file_1 = require("@nx/eslint/src/generators/utils/eslint-file");
+const flat_config_1 = require("@nx/eslint/src/utils/flat-config");
+const devkit_2 = require("@nx/devkit");
+const add_swc_dependencies_1 = require("@nx/js/src/utils/swc/add-swc-dependencies");
+const lint_1 = require("../../../utils/lint");
+async function addLinting(host, options) {
+    const tasks = [];
+    if (options.linter === eslint_1.Linter.EsLint) {
+        const lintTask = await (0, eslint_1.lintProjectGenerator)(host, {
+            linter: options.linter,
+            project: options.projectName,
+            tsConfigPaths: [
+                (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
+            ],
+            unitTestRunner: options.unitTestRunner,
+            skipFormat: true,
+            rootProject: options.rootProject,
+            skipPackageJson: options.skipPackageJson,
+            addPlugin: options.addPlugin,
+        });
+        tasks.push(lintTask);
+        if ((0, eslint_file_1.isEslintConfigSupported)(host)) {
+            if ((0, flat_config_1.useFlatConfig)(host)) {
+                (0, eslint_file_1.addPredefinedConfigToFlatLintConfig)(host, options.appProjectRoot, 'flat/react');
+                // Add an empty rules object to users know how to add/override rules
+                (0, eslint_file_1.addOverrideToLintConfig)(host, options.appProjectRoot, {
+                    files: ['*.ts', '*.tsx', '*.js', '*.jsx'],
+                    rules: {},
+                });
+            }
+            else {
+                const addExtendsTask = (0, eslint_file_1.addExtendsToLintConfig)(host, options.appProjectRoot, { name: 'plugin:@nx/react', needCompatFixup: true });
+                tasks.push(addExtendsTask);
+            }
+        }
+        if (!options.skipPackageJson) {
+            const installTask = (0, devkit_2.addDependenciesToPackageJson)(host, lint_1.extraEslintDependencies.dependencies, lint_1.extraEslintDependencies.devDependencies);
+            const addSwcTask = (0, add_swc_dependencies_1.addSwcDependencies)(host);
+            tasks.push(installTask, addSwcTask);
+        }
+    }
+    return (0, devkit_2.runTasksInSerial)(...tasks);
+}

package/src/generators/application/lib/bundlers/add-rsbuild.d.ts

@@ -0,0 +1,4 @@
+import { type Tree } from '@nx/devkit';
+import { NormalizedSchema, Schema } from '../../schema';
+export declare function initRsbuild(tree: Tree, options: NormalizedSchema<Schema>, tasks: any[]): Promise<void>;
+export declare function setupRsbuildConfiguration(tree: Tree, options: NormalizedSchema<Schema>, tasks: any[]): Promise<void>;