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

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,85 +17,63 @@ 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");
-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");
+const sort_fields_1 = require("@nx/js/src/utils/package-json/sort-fields");
+const prompt_1 = require("@nx/devkit/src/generators/prompt");
+async function applicationGenerator(tree, schema) {
+    return await applicationGeneratorInternal(tree, {
         addPlugin: false,
-        projectNameAndRootFormat: 'derived',
+        useProjectJson: true,
         ...schema,
     });
 }
-async function applicationGeneratorInternal(host, schema) {
+async function applicationGeneratorInternal(tree, schema) {
     const tasks = [];
-    const options = await (0, normalize_options_1.normalizeOptions)(host, schema);
-    (0, show_possible_warnings_1.showPossibleWarnings)(host, options);
-    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,
+        addTsPlugin: schema.useTsSolution,
+        formatter: schema.formatter,
+        platform: 'web',
     });
     tasks.push(jsInitTask);
-    const initTask = await (0, init_1.default)(host, {
+    const options = await (0, normalize_options_1.normalizeOptions)(tree, schema);
+    options.useReactRouter =
+        options.routing && options.bundler === 'vite'
+            ? options.useReactRouter ??
+                (await (0, prompt_1.promptWhenInteractive)({
+                    name: 'response',
+                    message: 'Would you like to use react-router for server-side rendering?',
+                    type: 'autocomplete',
+                    choices: [
+                        {
+                            name: 'Yes',
+                            message: 'I want to use react-router   [ https://reactrouter.com/start/framework/routing   ]',
+                        },
+                        {
+                            name: 'No',
+                            message: 'I do not want to use react-router for server-side rendering',
+                        },
+                    ],
+                    initial: 0,
+                }, { response: 'No' }).then((r) => r.response === 'Yes'))
+            : false;
+    (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 = {
@@ -99,157 +84,94 @@ 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') {
+        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)(tree, options);
+    (0, add_project_1.addProject)(tree, options);
+    // 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) {
+        await (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(tree, options.appProjectRoot);
     }
-    await (0, create_application_files_1.createApplicationFiles)(host, options);
-    (0, add_project_1.addProject)(host, 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);
     }
+    const lintTask = await (0, add_linting_1.addLinting)(tree, options);
+    tasks.push(lintTask);
     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,
-        });
-        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.nxRspackVersion);
-        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);
+    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);
-    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);
-    tasks.push(stylePreprocessorTask);
-    const styledTask = (0, add_styled_dependencies_1.addStyledModuleDependencies)(host, options);
+    (0, update_jest_config_1.updateSpecConfig)(tree, options);
+    const commonDependencyTask = await (0, install_common_dependencies_1.installCommonDependencies)(tree, options);
+    tasks.push(commonDependencyTask);
+    const styledTask = (0, add_styled_dependencies_1.addStyledModuleDependencies)(tree, options);
     tasks.push(styledTask);
-    const routingTask = (0, add_routing_1.addRouting)(host, options);
-    tasks.push(routingTask);
-    (0, set_defaults_1.setDefaults)(host, options);
+    if (!options.useReactRouter) {
+        const routingTask = (0, add_routing_1.addRouting)(tree, options);
+        tasks.push(routingTask);
+    }
+    (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'],
+        (0, add_rspack_1.handleStyledJsxForRspack)(tasks, tree, options);
+    }
+    if (options.useReactRouter) {
+        (0, devkit_1.updateJson)(tree, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.json'), (json) => {
+            const types = new Set(json.compilerOptions?.types || []);
+            types.add('@react-router/node');
+            return {
+                ...json,
+                compilerOptions: {
+                    ...json.compilerOptions,
+                    jsx: 'react-jsx',
+                    moduleResolution: 'bundler',
+                    types: Array.from(types),
                 },
-              },
-            ],
-          });
-          return config;
+            };
         });
-        `);
     }
+    // Only for the new TS solution
+    (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, options.useReactRouter ? 'app' : 'src');
+    (0, sort_fields_1.sortPackageJsonFields)(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/base-rspack/rspack.config.js__tmpl__

@@ -0,0 +1,53 @@
+<%_ if (rspackPluginOptions) { _%>
+const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin');
+const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin');
+const { join } = require('path');
+
+module.exports = {
+  output: {
+    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>'),
+  },
+  devServer: {
+    port: 4200,
+    historyApiFallback: {
+      index: '/index.html',
+      disableDotRule: true,
+      htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
+    },
+  },
+  plugins: [
+    new NxAppRspackPlugin({
+      tsConfig: '<%= rspackPluginOptions.tsConfig %>',
+      main: '<%= rspackPluginOptions.main %>',
+      index: '<%= rspackPluginOptions.index %>',
+      baseHref: '<%= rspackPluginOptions.baseHref %>',
+      assets: <%- JSON.stringify(rspackPluginOptions.assets) %>,
+      styles: <%- JSON.stringify(rspackPluginOptions.styles) %>,
+      outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',
+      optimization: process.env['NODE_ENV'] === 'production',
+    }),
+    new NxReactRspackPlugin({
+      // Uncomment this line if you don't want to use SVGR
+      // See: https://react-svgr.com/
+      // svgr: false
+    }),
+  ],
+};
+<%_ } else { _%>
+const { composePlugins, withNx, withReact } = require('@nx/rspack');
+
+// Nx plugins for rspack.
+module.exports = composePlugins(
+  withNx(),
+  withReact({
+    // Uncomment this line if you don't want to use SVGR
+    // See: https://react-svgr.com/
+    // svgr: false
+  }),
+  (config) => {
+    // Update the rspack config as needed here.
+    // e.g. `config.plugins.push(new MyPlugin())`
+    return config;
+  }
+);
+<%_ } _%>

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,10 +1,32 @@
-<% 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 %>';
+<%_ 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(
-<% if (strict) { %><StrictMode><% } %><% if (routing) { %><BrowserRouter><% } %><App /><% if (routing) { %></BrowserRouter><% } %><% if (strict) { %></StrictMode><% } %>
-);
+  <StrictMode>
+    <BrowserRouter>
+      <App/>
+    </BrowserRouter>
+  </StrictMode>
+)
+<%_ } _%>

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

@@ -1,14 +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",<% } %>
+      <%_ if (style === 'styled-jsx') { _%>"@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
       "@nx/react/typings/cssmodule.d.ts",
       "@nx/react/typings/image.d.ts"
-      ]
+    ]
   },
-  "exclude": ["jest.config.ts","src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.tsx", "src/**/*.test.tsx", "src/**/*.spec.js", "src/**/*.test.js", "src/**/*.spec.jsx", "src/**/*.test.jsx"],
+  "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/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 _%>
 });