@nx/react 20.6.0-beta.0 → 20.6.0-beta.1

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

@@ -0,0 +1,24 @@
+{
+  "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 %>"
+  },
+  "engines": {
+  "node": ">=20"
+  },
+  "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/lib/add-e2e.js

@@ -28,8 +28,10 @@ async function addE2e(tree, options) {
         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 === '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);

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

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

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addLinting = addLinting;
+exports.isEslintInstalled = isEslintInstalled;
 const devkit_1 = require("@nx/devkit");
 const eslint_1 = require("@nx/eslint");
 const eslint_file_1 = require("@nx/eslint/src/generators/utils/eslint-file");
@@ -8,6 +9,7 @@ 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");
+const versions_1 = require("../../../utils/versions");
 async function addLinting(host, options) {
     const tasks = [];
     if (options.linter === eslint_1.Linter.EsLint) {
@@ -43,6 +45,42 @@ async function addLinting(host, options) {
             const addSwcTask = (0, add_swc_dependencies_1.addSwcDependencies)(host);
             tasks.push(installTask, addSwcTask);
         }
+        if (options.useReactRouter) {
+            await ignoreReactRouterFilesInEslintConfig(host, options.appProjectRoot);
+        }
     }
     return (0, devkit_2.runTasksInSerial)(...tasks);
 }
+async function ignoreReactRouterFilesInEslintConfig(tree, projectRoot) {
+    if (!isEslintInstalled(tree)) {
+        return;
+    }
+    (0, devkit_1.ensurePackage)('@nx/eslint', versions_1.nxVersion);
+    const { addIgnoresToLintConfig, isEslintConfigSupported } = await Promise.resolve().then(() => require('@nx/eslint/src/generators/utils/eslint-file'));
+    if (!isEslintConfigSupported(tree)) {
+        return;
+    }
+    const { useFlatConfig } = await Promise.resolve().then(() => require('@nx/eslint/src/utils/flat-config'));
+    const isUsingFlatConfig = useFlatConfig(tree);
+    if (!projectRoot && !isUsingFlatConfig) {
+        // root eslintrc files ignore all files and the root eslintrc files add
+        // back all the project files, so we only add the ignores to the project
+        // eslintrc files
+        return;
+    }
+    // for flat config, we update the root config file
+    const directory = isUsingFlatConfig ? '' : projectRoot ?? '';
+    addIgnoresToLintConfig(tree, directory, ['**/build', '**/.react-router']);
+}
+function isEslintInstalled(tree) {
+    try {
+        require('eslint');
+        return true;
+    }
+    catch { }
+    // it might not be installed yet, but it might be in the tree pending install
+    const { devDependencies, dependencies } = tree.exists('package.json')
+        ? (0, devkit_1.readJson)(tree, 'package.json')
+        : {};
+    return !!devDependencies?.['eslint'] || !!dependencies?.['eslint'];
+}

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

@@ -52,7 +52,18 @@ function addProject(host, options) {
         });
     }
     if (!options.useProjectJson || options.isUsingTsSolutionConfig) {
-        (0, devkit_1.writeJson)(host, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'package.json'), packageJson);
+        // React Router already adds a package.json to the project root
+        if (options.useReactRouter) {
+            (0, devkit_1.updateJson)(host, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'package.json'), (json) => {
+                return {
+                    name: packageJson.name,
+                    ...json,
+                };
+            });
+        }
+        else {
+            (0, devkit_1.writeJson)(host, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'package.json'), packageJson);
+        }
     }
 }
 function createRspackBuildTarget(options) {

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

@@ -20,7 +20,7 @@ function addRouting(host, options) {
     }, `src/app/${options.fileName}.tsx`));
     const appFileContent = host.read(appPath, 'utf-8');
     const appSource = tsModule.createSourceFile(appPath, appFileContent, tsModule.ScriptTarget.Latest, true);
-    const changes = (0, devkit_1.applyChangesToString)(appFileContent, (0, ast_utils_1.addInitialRoutes)(appPath, appSource));
+    const changes = (0, devkit_1.applyChangesToString)(appFileContent, (0, ast_utils_1.addInitialRoutes)(appPath, appSource, options.inSourceTests));
     host.write(appPath, changes);
     if (!options.skipPackageJson) {
         return (0, devkit_1.addDependenciesToPackageJson)(host, { 'react-router-dom': versions_1.reactRouterDomVersion }, {});

package/src/generators/application/lib/bundlers/add-vite.js

@@ -11,6 +11,18 @@ async function setupViteConfiguration(tree, options, tasks) {
     if (tree.exists((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/environments'))) {
         tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/environments'));
     }
+    const reactRouterFrameworkConfig = {
+        imports: [`import { reactRouter } from '@react-router/dev/vite'`],
+        plugins: ['!process.env.VITEST && reactRouter()'],
+    };
+    const baseReactConfig = {
+        imports: [
+            options.compiler === 'swc'
+                ? `import react from '@vitejs/plugin-react-swc'`
+                : `import react from '@vitejs/plugin-react'`,
+        ],
+        plugins: ['react()'],
+    };
     const viteTask = await viteConfigurationGenerator(tree, {
         uiFramework: 'react',
         project: options.projectName,
@@ -29,12 +41,9 @@ async function setupViteConfiguration(tree, options, tasks) {
         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()'],
+        ...(options.useReactRouter
+            ? reactRouterFrameworkConfig
+            : baseReactConfig),
     }, false);
 }
 async function setupVitestConfiguration(tree, options, tasks) {

package/src/generators/application/lib/create-application-files.js

@@ -12,6 +12,7 @@ const get_app_tests_1 = require("./get-app-tests");
 const onboarding_1 = require("nx/src/nx-cloud/utilities/onboarding");
 const has_rspack_plugin_1 = require("../../../utils/has-rspack-plugin");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
+const versions_1 = require("../../../utils/versions");
 async function createApplicationFiles(host, options) {
     let styleSolutionSpecificAppFiles;
     if (options.styledModule && options.style !== 'styled-jsx') {
@@ -41,6 +42,13 @@ async function createApplicationFiles(host, options) {
     const templateVariables = {
         ...options.names,
         ...options,
+        typesNodeVersion: versions_1.typesNodeVersion,
+        typesReactDomVersion: versions_1.typesReactDomVersion,
+        reactRouterVersion: versions_1.reactRouterVersion,
+        typesReactVersion: versions_1.typesReactVersion,
+        reactDomVersion: versions_1.reactDomVersion,
+        reactVersion: versions_1.reactVersion,
+        reactRouterIsBotVersion: versions_1.reactRouterIsBotVersion,
         js: !!options.js, // Ensure this is defined in template
         tmpl: '',
         offsetFromRoot: (0, devkit_1.offsetFromRoot)(options.appProjectRoot),
@@ -50,9 +58,12 @@ async function createApplicationFiles(host, options) {
         hasStyleFile,
         isUsingTsSolutionSetup: (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host),
     };
-    if (options.bundler === 'vite') {
+    if (options.bundler === 'vite' && !options.useReactRouter) {
         (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/base-vite'), options.appProjectRoot, templateVariables);
     }
+    else if (options.bundler === 'vite' && options.useReactRouter) {
+        generateReactRouterFiles(host, options, templateVariables);
+    }
     else if (options.bundler === 'webpack') {
         (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/base-webpack'), options.appProjectRoot, {
             ...templateVariables,
@@ -137,9 +148,12 @@ async function createApplicationFiles(host, options) {
         const tutorialUrl = options.rootProject
             ? 'https://nx.dev/getting-started/tutorials/react-standalone-tutorial'
             : 'https://nx.dev/react-tutorial/1-code-generation?utm_source=nx-project';
-        (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/nx-welcome', onBoardingStatus), options.appProjectRoot, { ...templateVariables, connectCloudUrl, tutorialUrl });
+        const path = options.useReactRouter
+            ? '../files/react-router-ssr/nx-welcome'
+            : '../files/nx-welcome';
+        (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, path, onBoardingStatus), options.appProjectRoot, { ...templateVariables, connectCloudUrl, tutorialUrl });
     }
-    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, styleSolutionSpecificAppFiles), options.appProjectRoot, templateVariables);
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, styleSolutionSpecificAppFiles, options.useReactRouter ? 'src' : ''), options.appProjectRoot, templateVariables);
     if (options.js) {
         (0, devkit_1.toJS)(host, {
             useJsx: options.bundler === 'vite' || options.bundler === 'rspack',
@@ -194,3 +208,26 @@ function createNxRspackPluginOptions(options, rootOffset) {
             ],
     };
 }
+function generateReactRouterFiles(tree, options, templateVariables) {
+    (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, '../files/react-router-ssr/common'), options.appProjectRoot, templateVariables);
+    if (options.rootProject) {
+        const gitignore = tree.read('.gitignore', 'utf-8');
+        tree.write('.gitignore', `${gitignore}\n.cache\nbuild\npublic/build\n.env\n\.react-router\n`);
+    }
+    else {
+        (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/react-router-ssr/non-root'), options.appProjectRoot, templateVariables);
+    }
+    if (options.isUsingTsSolutionConfig) {
+        (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/react-router-ssr/ts-solution'), options.appProjectRoot, templateVariables);
+        (0, devkit_1.updateJson)(tree, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'package.json'), (json) => {
+            if (options.projectName !== options.importPath) {
+                json.nx = { name: options.projectName };
+            }
+            if (options.parsedTags?.length) {
+                json.nx ??= {};
+                json.nx.tags = options.parsedTags;
+            }
+            return json;
+        });
+    }
+}

package/src/generators/application/lib/install-common-dependencies.js

@@ -11,13 +11,24 @@ async function installCommonDependencies(host, options) {
     const reactDeps = await (0, version_utils_1.getReactDependenciesVersionsToInstall)(host);
     const dependencies = {};
     const devDependencies = {
-        '@types/node': versions_1.typesNodeVersion,
         '@types/react': reactDeps['@types/react'],
         '@types/react-dom': reactDeps['@types/react-dom'],
+        '@types/node': versions_1.typesNodeVersion,
+        ...(options.useReactRouter
+            ? {
+                '@react-router/dev': versions_1.reactRouterVersion,
+            }
+            : {}),
     };
     if (options.bundler !== 'vite') {
         dependencies['tslib'] = versions_1.tsLibVersion;
     }
+    if (options.useReactRouter) {
+        dependencies['react-router'] = versions_1.reactRouterVersion;
+        dependencies['@react-router/node'] = versions_1.reactRouterVersion;
+        dependencies['@react-router/serve'] = versions_1.reactRouterVersion;
+        dependencies['isbot'] = versions_1.reactRouterIsBotVersion;
+    }
     // Vite requires style preprocessors to be installed manually.
     // `@nx/webpack` installs them automatically for now.
     if (options.bundler === 'vite' || options.unitTestRunner === 'vitest') {
@@ -45,5 +56,5 @@ async function installCommonDependencies(host, options) {
         devDependencies['@testing-library/react'] = versions_1.testingLibraryReactVersion;
         devDependencies['@testing-library/dom'] = versions_1.testingLibraryDomVersion;
     }
-    return (0, devkit_1.addDependenciesToPackageJson)(host, {}, devDependencies);
+    return (0, devkit_1.addDependenciesToPackageJson)(host, dependencies, devDependencies);
 }

package/src/generators/application/lib/normalize-options.js

@@ -31,6 +31,8 @@ async function normalizeOptions(host, options) {
         ? null
         : options.style;
     (0, assertion_1.assertValidStyle)(options.style);
+    options.bundler = options.useReactRouter ? 'vite' : options.bundler;
+    options.useReactRouter = options.routing ? options.useReactRouter : false;
     const normalized = {
         ...options,
         projectName: appProjectName,
@@ -47,6 +49,7 @@ async function normalizeOptions(host, options) {
         useProjectJson: options.useProjectJson ?? !isUsingTsSolutionConfig,
     };
     normalized.routing = normalized.routing ?? false;
+    normalized.useReactRouter = normalized.useReactRouter ?? false;
     normalized.strict = normalized.strict ?? true;
     normalized.classComponent = normalized.classComponent ?? false;
     normalized.compiler = normalized.compiler ?? 'babel';

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

@@ -14,6 +14,7 @@ export interface Schema {
   linter: Linter | LinterType;
   classComponent?: boolean;
   routing?: boolean;
+  useReactRouter?: boolean;
   skipNxJson?: boolean;
   js?: boolean;
   globalCss?: boolean;

package/src/generators/application/schema.json

@@ -83,7 +83,12 @@
     "routing": {
       "type": "boolean",
       "description": "Generate application with routes.",
-      "x-prompt": "Would you like to add React Router to this application?",
+      "x-prompt": "Would you like to add routing to this application?",
+      "default": false
+    },
+    "useReactRouter": {
+      "description": "Use React Router for routing.",
+      "type": "boolean",
       "default": false
     },
     "skipFormat": {

package/src/generators/init/init.js

@@ -4,6 +4,8 @@ exports.reactInitGenerator = reactInitGenerator;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../utils/versions");
 const version_utils_1 = require("../../utils/version-utils");
+const add_plugin_1 = require("@nx/devkit/src/utils/add-plugin");
+const router_plugin_1 = require("../../plugins/router-plugin");
 async function reactInitGenerator(tree, schema) {
     const tasks = [];
     if (!schema.skipPackageJson) {
@@ -16,6 +18,27 @@ async function reactInitGenerator(tree, schema) {
             '@nx/react': versions_1.nxVersion,
         }, undefined, schema.keepExistingVersions));
     }
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    schema.addPlugin ??=
+        process.env.NX_ADD_PLUGINS !== 'false' &&
+            nxJson.useInferencePlugins !== false;
+    if (schema.addPlugin) {
+        await (0, add_plugin_1.addPlugin)(tree, await (0, devkit_1.createProjectGraphAsync)(), '@nx/react/router-plugin', router_plugin_1.createNodesV2, {
+            buildTargetName: ['build', 'react-router:build', 'react-router-build'],
+            devTargetName: ['dev', 'react-router:dev', 'react-router-dev'],
+            startTargetName: ['start', 'react-router-serve', 'react-router-start'],
+            watchDepsTargetName: [
+                'watch-deps',
+                'react-router:watch-deps',
+                'react-router-watch-deps',
+            ],
+            buildDepsTargetName: [
+                'build-deps',
+                'react-router:build-deps',
+                'react-router-build-deps',
+            ],
+        }, schema.updatePackageScripts);
+    }
     if (!schema.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }

package/src/generators/init/schema.d.ts

@@ -2,4 +2,6 @@ export interface InitSchema {
   skipFormat?: boolean;
   skipPackageJson?: boolean;
   keepExistingVersions?: boolean;
+  updatePackageScripts?: boolean;
+  addPlugin?: boolean;
 }

package/src/generators/library/library.js

@@ -39,9 +39,6 @@ async function libraryGeneratorInternal(host, schema) {
     });
     tasks.push(jsInitTask);
     const options = await (0, normalize_options_1.normalizeOptions)(host, schema);
-    if (options.isUsingTsSolutionConfig) {
-        await (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(host, options.projectRoot);
-    }
     if (options.publishable === true && !schema.importPath) {
         throw new Error(`For publishable libs you have to provide a proper "--importPath" which needs to be a valid npm package name (e.g. my-awesome-lib or @myorg/my-lib)`);
     }
@@ -81,6 +78,9 @@ async function libraryGeneratorInternal(host, schema) {
         (0, devkit_1.writeJson)(host, `${options.projectRoot}/package.json`, packageJson);
     }
     (0, create_files_1.createFiles)(host, options);
+    if (options.isUsingTsSolutionConfig) {
+        await (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(host, options.projectRoot);
+    }
     const lintTask = await (0, add_linting_1.addLinting)(host, options);
     tasks.push(lintTask);
     // Set up build target

package/src/plugins/router-plugin.d.ts

@@ -0,0 +1,10 @@
+import { type CreateNodesV2 } from '@nx/devkit';
+export interface ReactRouterPluginOptions {
+    buildTargetName?: string;
+    devTargetName?: string;
+    startTargetName?: string;
+    typecheckTargetName?: string;
+    buildDepsTargetName?: string;
+    watchDepsTargetName?: string;
+}
+export declare const createNodesV2: CreateNodesV2<ReactRouterPluginOptions>;