@nx/react 0.0.0-pr-29176-d3c6c29 → 0.0.0-pr-29314-bfd9d0c

package/generators.json

@@ -64,13 +64,15 @@
       "factory": "./src/generators/host/host",
       "schema": "./src/generators/host/schema.json",
       "x-type": "application",
-      "description": "Generate a host react application"
+      "description": "Generate a host react application",
+      "aliases": ["consumer"]
     },
     "remote": {
       "factory": "./src/generators/remote/remote",
       "schema": "./src/generators/remote/schema.json",
       "x-type": "application",
-      "description": "Generate a remote react application"
+      "description": "Generate a remote react application",
+      "aliases": ["producer"]
     },
     "cypress-component-configuration": {
       "factory": "./src/generators/cypress-component-configuration/cypress-component-configuration#cypressComponentConfigGenerator",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "0.0.0-pr-29176-d3c6c29",
+  "version": "0.0.0-pr-29314-bfd9d0c",
   "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,11 +38,11 @@
     "minimatch": "9.0.3",
     "picocolors": "^1.1.0",
     "tslib": "^2.3.0",
-    "@nx/devkit": "0.0.0-pr-29176-d3c6c29",
-    "@nx/js": "0.0.0-pr-29176-d3c6c29",
-    "@nx/eslint": "0.0.0-pr-29176-d3c6c29",
-    "@nx/web": "0.0.0-pr-29176-d3c6c29",
-    "@nx/module-federation": "0.0.0-pr-29176-d3c6c29",
+    "@nx/devkit": "0.0.0-pr-29314-bfd9d0c",
+    "@nx/js": "0.0.0-pr-29314-bfd9d0c",
+    "@nx/eslint": "0.0.0-pr-29314-bfd9d0c",
+    "@nx/web": "0.0.0-pr-29314-bfd9d0c",
+    "@nx/module-federation": "0.0.0-pr-29314-bfd9d0c",
     "express": "^4.19.2",
     "http-proxy-middleware": "^3.0.3"
   },

package/plugins/bundle-rollup.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-// TODO(v22): Remove this in Nx 22 and migrate to explicit rollup.config.js files.
+// TODO(v22): Remove this in Nx 22 and migrate to explicit rollup.config.cjs files.
 /**
- * @deprecated Use `withNx` function from `@nx/rollup/with-nx` in your rollup.config.js file instead. Use `nx g @nx/rollup:convert-to-inferred` to generate the rollup.config.js file if it does not exist.
+ * @deprecated Use `withNx` function from `@nx/rollup/with-nx` in your rollup.config.cjs file instead. Use `nx g @nx/rollup:convert-to-inferred` to generate the rollup.config.cjs file if it does not exist.
  */
 function getRollupOptions(options) {
     const extraGlobals = {

package/plugins/nx-react-webpack-plugin/lib/apply-react-config.js

@@ -80,7 +80,9 @@ function addHotReload(config) {
 // We remove potentially conflicting rules that target SVGs because we use @svgr/webpack loader
 // See https://github.com/nrwl/nx/issues/14383
 function removeSvgLoaderIfPresent(config) {
-    const svgLoaderIdx = config.module.rules.findIndex((rule) => typeof rule === 'object' && rule.test.toString().includes('svg'));
+    const svgLoaderIdx = config.module.rules.findIndex((rule) => typeof rule === 'object' &&
+        typeof rule.test !== 'undefined' &&
+        rule.test.toString().includes('svg'));
     if (svgLoaderIdx === -1)
         return;
     config.module.rules.splice(svgLoaderIdx, 1);

package/src/executors/module-federation-dev-server/schema.json

@@ -28,16 +28,18 @@
           }
         ]
       },
-      "description": "List of remote applications to run in development mode (i.e. using serve target).",
-      "x-priority": "important"
+      "description": "List of Producer (remote) applications to run in development mode (i.e. using serve target).",
+      "x-priority": "important",
+      "alias": "devProducers"
     },
     "skipRemotes": {
       "type": "array",
       "items": {
         "type": "string"
       },
-      "description": "List of remote applications to not automatically serve, either statically or in development mode. This will not remove the remotes from the `module-federation.config` file, and therefore the application may still try to fetch these remotes.\nThis option is useful if you have other means for serving the `remote` application(s).\n**NOTE:** Remotes that are not in the workspace will be skipped automatically.",
-      "x-priority": "important"
+      "description": "List of Producer (remote) applications to not automatically serve, either statically or in development mode. This will not remove the Producers (remotes) from the `module-federation.config` file, and therefore the application may still try to fetch these Producers (remotes).\nThis option is useful if you have other means for serving the Producer (remote) application(s).\n**NOTE:** Producers (remotes) that are not in the workspace will be skipped automatically.",
+      "x-priority": "important",
+      "alias": "skipProducers"
     },
     "buildTarget": {
       "type": "string",
@@ -111,25 +113,27 @@
     },
     "static": {
       "type": "boolean",
-      "description": "Whether to use a static file server instead of the webpack-dev-server. This should be used for remote applications that are also host applications."
+      "description": "Whether to use a static file server instead of the webpack-dev-server. This should be used for Producer (remote) applications that are also Consumer (host) applications."
     },
     "isInitialHost": {
       "type": "boolean",
-      "description": "Whether the host that is running this executor is the first in the project tree to do so.",
+      "description": "Whether the Consumer (host) that is running this executor is the first in the project tree to do so.",
       "default": true,
-      "x-priority": "internal"
+      "x-priority": "internal",
+      "alias": "isInitialConsumer"
     },
     "parallel": {
       "type": "number",
-      "description": "Max number of parallel processes for building static remotes"
+      "description": "Max number of parallel processes for building static Producers (remotes)"
     },
     "staticRemotesPort": {
       "type": "number",
-      "description": "The port at which to serve the file-server for the static remotes."
+      "description": "The port at which to serve the file-server for the static Producers (remotes).",
+      "alias": "staticProducersPort"
     },
     "pathToManifestFile": {
       "type": "string",
-      "description": "Path to a Module Federation manifest file (e.g. `my/path/to/module-federation.manifest.json`) containing the dynamic remote applications relative to the workspace root."
+      "description": "Path to a Module Federation manifest file (e.g. `my/path/to/module-federation.manifest.json`) containing the dynamic Producer (remote) applications relative to the workspace root."
     }
   },
   "examplesFile": "../../../docs/module-federation-dev-server-examples.md"

package/src/executors/module-federation-ssr-dev-server/schema.json

@@ -2,7 +2,7 @@
   "version": 2,
   "outputCapture": "direct-nodejs",
   "title": "Module Federation SSR Dev Server",
-  "description": "Serve a SSR host application along with its known remotes.",
+  "description": "Serve a SSR Consumer (host) application along with its known Producers (remotes).",
   "cli": "nx",
   "type": "object",
   "properties": {
@@ -27,16 +27,18 @@
       "items": {
         "type": "string"
       },
-      "description": "List of remote applications to run in development mode (i.e. using serve target).",
-      "x-priority": "important"
+      "description": "List of Producer (remote) applications to run in development mode (i.e. using serve target).",
+      "x-priority": "important",
+      "alias": "devProducers"
     },
     "skipRemotes": {
       "type": "array",
       "items": {
         "type": "string"
       },
-      "description": "List of remote applications to not automatically serve, either statically or in development mode.",
-      "x-priority": "important"
+      "description": "List of Producer (remote) applications to not automatically serve, either statically or in development mode.",
+      "x-priority": "important",
+      "alias": "skipProducers"
     },
     "host": {
       "type": "string",
@@ -45,11 +47,12 @@
     },
     "staticRemotesPort": {
       "type": "number",
-      "description": "The port at which to serve the file-server for the static remotes."
+      "description": "The port at which to serve the file-server for the static Producers (remotes).",
+      "alias": "staticProducersPort"
     },
     "pathToManifestFile": {
       "type": "string",
-      "description": "Path to a Module Federation manifest file (e.g. `my/path/to/module-federation.manifest.json`) containing the dynamic remote applications relative to the workspace root."
+      "description": "Path to a Module Federation manifest file (e.g. `my/path/to/module-federation.manifest.json`) containing the dynamic Producer (remote) applications relative to the workspace root."
     },
     "ssl": {
       "type": "boolean",
@@ -66,9 +69,10 @@
     },
     "isInitialHost": {
       "type": "boolean",
-      "description": "Whether the host that is running this executor is the first in the project tree to do so.",
+      "description": "Whether the Consumer (host) that is running this executor is the first in the project tree to do so.",
       "default": true,
-      "x-priority": "internal"
+      "x-priority": "internal",
+      "alias": "isInitialConsumer"
     }
   },
   "required": ["browserTarget", "serverTarget"]

package/src/executors/module-federation-static-server/module-federation-static-server.impl.js

@@ -58,7 +58,7 @@ async function buildHost(nxBin, buildTarget, context) {
             }
             if (stdoutString.includes('Successfully ran target build')) {
                 staticProcess.stdout.removeAllListeners('data');
-                devkit_1.logger.info(`NX Built host`);
+                devkit_1.logger.info(`NX Built Consumer (host)`);
                 res();
             }
         });
@@ -67,7 +67,7 @@ async function buildHost(nxBin, buildTarget, context) {
             staticProcess.stdout.removeAllListeners('data');
             staticProcess.stderr.removeAllListeners('data');
             if (code !== 0) {
-                rej(`Host failed to build. See above for details.`);
+                rej(`Consumer (host) failed to build. See above for details.`);
             }
             else {
                 res();
@@ -132,8 +132,8 @@ function startProxies(staticRemotesConfig, hostServeOptions, mappedLocationOfHos
         process.on('SIGTERM', () => proxyServer.close());
         process.on('exit', () => proxyServer.close());
     }
-    devkit_1.logger.info(`NX Static remotes proxies started successfully`);
-    devkit_1.logger.info(`NX Starting static host proxy...`);
+    devkit_1.logger.info(`NX Static Producers (remotes) proxies started successfully`);
+    devkit_1.logger.info(`NX Starting static Consumer (host) proxy...`);
     const expressProxy = express();
     expressProxy.use(createProxyMiddleware({
         target: mappedLocationOfHost,
@@ -155,7 +155,7 @@ function startProxies(staticRemotesConfig, hostServeOptions, mappedLocationOfHos
         .listen(hostServeOptions.port);
     process.on('SIGTERM', () => proxyServer.close());
     process.on('exit', () => proxyServer.close());
-    devkit_1.logger.info('NX Static host proxy started successfully');
+    devkit_1.logger.info('NX Static Consumer (host) proxy started successfully');
 }
 async function* moduleFederationStaticServer(schema, context) {
     // Force Node to resolve to look for the nx binary that is inside node_modules

package/src/executors/module-federation-static-server/schema.json

@@ -2,7 +2,7 @@
   "version": 2,
   "outputCapture": "direct-nodejs",
   "title": "Module Federation Static Dev Server",
-  "description": "Serve a host application statically along with it's remotes.",
+  "description": "Serve a Consumer (host) application statically along with its Producers (remotes).",
   "cli": "nx",
   "type": "object",
   "properties": {

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 = (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>
+)
+<%_ } _%>