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

package/src/plugins/router-plugin.js

@@ -0,0 +1,219 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createNodesV2 = void 0;
+const devkit_1 = require("@nx/devkit");
+const path_1 = require("path");
+const fs_1 = require("fs");
+const get_named_inputs_1 = require("@nx/devkit/src/utils/get-named-inputs");
+const cache_directory_1 = require("nx/src/utils/cache-directory");
+const calculate_hash_for_create_nodes_1 = require("@nx/devkit/src/utils/calculate-hash-for-create-nodes");
+const js_1 = require("@nx/js");
+const devkit_internals_1 = require("nx/src/devkit-internals");
+const util_1 = require("@nx/js/src/plugins/typescript/util");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
+const config_utils_1 = require("@nx/devkit/src/utils/config-utils");
+const pmCommand = (0, devkit_1.getPackageManagerCommand)();
+const reactRouterConfigBlob = '**/react-router.config.{ts,js,cjs,cts,mjs,mts}';
+function readTargetsCache(cachePath) {
+    return process.env.NX_CACHE_PROJECT_GRAPH !== 'false' && (0, fs_1.existsSync)(cachePath)
+        ? (0, devkit_1.readJsonFile)(cachePath)
+        : {};
+}
+function writeTargetsToCache(cachePath, results) {
+    (0, devkit_1.writeJsonFile)(cachePath, results);
+}
+exports.createNodesV2 = [
+    reactRouterConfigBlob,
+    async (configFiles, options, context) => {
+        const optionsHash = (0, devkit_internals_1.hashObject)(options);
+        const normalizedOptions = normalizeOptions(options);
+        const cachePath = (0, path_1.join)(cache_directory_1.workspaceDataDirectory, `react-router-${optionsHash}.hash`);
+        const targetsCache = readTargetsCache(cachePath);
+        const isUsingTsSolutionSetup = (0, ts_solution_setup_1.isUsingTsSolutionSetup)();
+        const { roots: projectRoots, configFiles: validConfigFiles } = configFiles.reduce((acc, configFile) => {
+            const potentialRoot = (0, path_1.dirname)(configFile);
+            if (checkIfConfigFileShouldBeProject(potentialRoot, context)) {
+                acc.roots.push(potentialRoot);
+                acc.configFiles.push(configFile);
+            }
+            return acc;
+        }, {
+            roots: [],
+            configFiles: [],
+        });
+        const lockfile = (0, js_1.getLockFileName)((0, devkit_1.detectPackageManager)(context.workspaceRoot));
+        const hashes = await (0, calculate_hash_for_create_nodes_1.calculateHashesForCreateNodes)(projectRoots, { ...normalizedOptions, isUsingTsSolutionSetup }, context, projectRoots.map((_) => [lockfile]));
+        try {
+            return await (0, devkit_1.createNodesFromFiles)(async (configFile, _, context, idx) => {
+                const projectRoot = (0, path_1.dirname)(configFile);
+                const siblingFiles = (0, fs_1.readdirSync)((0, devkit_1.joinPathFragments)(context.workspaceRoot, projectRoot));
+                const hash = hashes[idx] + configFile;
+                const { projectType, metadata, targets } = (targetsCache[hash] ??=
+                    await buildReactRouterTargets(configFile, projectRoot, normalizedOptions, context, siblingFiles, isUsingTsSolutionSetup));
+                const project = {
+                    root: projectRoot,
+                    targets,
+                    metadata,
+                };
+                if (project.targets[normalizedOptions.buildTargetName]) {
+                    project.projectType = projectType;
+                }
+                return {
+                    projects: {
+                        [projectRoot]: project,
+                    },
+                };
+            }, validConfigFiles, options, context);
+        }
+        finally {
+            writeTargetsToCache(cachePath, targetsCache);
+        }
+    },
+];
+async function buildReactRouterTargets(configFilePath, projectRoot, options, context, siblingFiles, isUsingTsSolutionSetup) {
+    const namedInputs = (0, get_named_inputs_1.getNamedInputs)(projectRoot, context);
+    const configPath = (0, path_1.join)(context.workspaceRoot, configFilePath);
+    if (require.cache[configPath])
+        (0, config_utils_1.clearRequireCache)();
+    const reactRouterConfig = await (0, config_utils_1.loadConfigFile)(configPath);
+    const isLibMode = reactRouterConfig?.ssr !== undefined && reactRouterConfig.ssr === false;
+    const { buildDirectory, serverBuildPath } = await getBuildPaths(reactRouterConfig, isLibMode);
+    const targets = {};
+    targets[options.buildTargetName] = await getBuildTargetConfig(options.buildTargetName, projectRoot, buildDirectory, serverBuildPath, namedInputs, isUsingTsSolutionSetup);
+    targets[options.devTargetName] = await devTarget(projectRoot, isUsingTsSolutionSetup);
+    if (serverBuildPath) {
+        targets[options.startTargetName] = await startTarget(projectRoot, serverBuildPath, options.buildTargetName, isUsingTsSolutionSetup);
+    }
+    targets[options.typecheckTargetName] = await typecheckTarget(projectRoot, options.typecheckTargetName, namedInputs, siblingFiles, isUsingTsSolutionSetup);
+    (0, util_1.addBuildAndWatchDepsTargets)(context.workspaceRoot, projectRoot, targets, options, pmCommand);
+    const metadata = {};
+    return {
+        targets,
+        metadata,
+        projectType: isLibMode ? 'library' : 'application',
+    };
+}
+async function getBuildTargetConfig(buildTargetName, projectRoot, buildDirectory, serverBuildDirectory, namedInputs, isUsingTsSolutionSetup) {
+    const basePath = projectRoot === '.'
+        ? `{workspaceRoot}`
+        : (0, devkit_1.joinPathFragments)(`{workspaceRoot}`, projectRoot);
+    const outputs = [
+        (0, devkit_1.joinPathFragments)(basePath, buildDirectory),
+        ...(serverBuildDirectory
+            ? [(0, devkit_1.joinPathFragments)(basePath, serverBuildDirectory)]
+            : []),
+    ];
+    const buildTarget = {
+        cache: true,
+        dependsOn: [`^${buildTargetName}`],
+        inputs: [
+            ...('production' in namedInputs
+                ? ['production', '^production']
+                : ['default', '^default']),
+            { externalDependencies: ['@react-router/dev'] },
+        ],
+        outputs,
+        command: 'react-router build',
+        options: { cwd: projectRoot },
+    };
+    if (isUsingTsSolutionSetup) {
+        buildTarget.syncGenerators = ['@nx/js:typescript-sync'];
+    }
+    return buildTarget;
+}
+async function getBuildPaths(reactRouterConfig, isLibMode) {
+    return {
+        buildDirectory: reactRouterConfig?.buildDirectory ?? 'build/client',
+        ...(isLibMode
+            ? undefined
+            : {
+                serverBuildPath: reactRouterConfig?.buildDirectory
+                    ? (0, path_1.join)((0, path_1.dirname)(reactRouterConfig.buildDirectory), `server`)
+                    : 'build/server',
+            }),
+    };
+}
+async function devTarget(projectRoot, isUsingTsSolutionSetup) {
+    const devTarget = {
+        command: 'react-router dev',
+        options: { cwd: projectRoot },
+    };
+    if (isUsingTsSolutionSetup) {
+        devTarget.syncGenerators = ['@nx/js:typescript-sync'];
+    }
+    return devTarget;
+}
+async function startTarget(projectRoot, serverBuildPath, buildTargetName, isUsingTsSolutionSetup) {
+    const serverPath = serverBuildPath === 'build/server'
+        ? `${serverBuildPath}/index.js`
+        : serverBuildPath;
+    const startTarget = {
+        dependsOn: [buildTargetName],
+        command: `react-router-serve ${serverPath}`,
+        options: { cwd: projectRoot },
+    };
+    if (isUsingTsSolutionSetup) {
+        startTarget.syncGenerators = ['@nx/js:typescript-sync'];
+    }
+    return startTarget;
+}
+async function typecheckTarget(projectRoot, typecheckTargetName, namedInputs, siblingFiles, isUsingTsSolutionSetup) {
+    const hasTsConfigAppJson = siblingFiles.includes('tsconfig.app.json');
+    const typecheckTarget = {
+        cache: true,
+        inputs: [
+            ...('production' in namedInputs
+                ? ['production', '^production']
+                : ['default', '^default']),
+            { externalDependencies: ['typescript'] },
+        ],
+        command: isUsingTsSolutionSetup
+            ? `tsc --build --emitDeclarationOnly`
+            : `tsc${hasTsConfigAppJson ? ` -p tsconfig.app.json` : ``} --noEmit`,
+        options: {
+            cwd: projectRoot,
+        },
+        metadata: {
+            description: `Runs type-checking for the project.`,
+            technologies: ['typescript'],
+            help: {
+                command: isUsingTsSolutionSetup
+                    ? `${pmCommand.exec} tsc --build --help`
+                    : `${pmCommand.exec} tsc${hasTsConfigAppJson ? ` -p tsconfig.app.json` : ``} --help`,
+                example: isUsingTsSolutionSetup
+                    ? { args: ['--force'] }
+                    : { options: { noEmit: true } },
+            },
+        },
+    };
+    if (isUsingTsSolutionSetup) {
+        typecheckTarget.dependsOn = [`^${typecheckTargetName}`];
+        typecheckTarget.syncGenerators = ['@nx/js:typescript-sync'];
+    }
+    return typecheckTarget;
+}
+function normalizeOptions(options) {
+    options ??= {};
+    options.buildTargetName ??= 'build';
+    options.devTargetName ??= 'dev';
+    options.startTargetName ??= 'start';
+    options.typecheckTargetName ??= 'typecheck';
+    return options;
+}
+function checkIfConfigFileShouldBeProject(projectRoot, context) {
+    // Do not create a project if package.json and project.json isn't there.
+    const siblingFiles = (0, fs_1.readdirSync)((0, path_1.join)(context.workspaceRoot, projectRoot));
+    return hasRequiredConfigs(siblingFiles);
+}
+function hasRequiredConfigs(files) {
+    const lowerFiles = files.map((file) => file.toLowerCase());
+    // Check if vite.config.{ext} is present
+    const hasViteConfig = lowerFiles.some((file) => {
+        const parts = file.split('.');
+        return parts[0] === 'vite' && parts[1] === 'config' && parts.length > 2;
+    });
+    if (!hasViteConfig)
+        return false;
+    const hasProjectOrPackageJson = lowerFiles.includes('project.json') || lowerFiles.includes('package.json');
+    return hasProjectOrPackageJson;
+}

package/src/utils/ast-utils.d.ts

@@ -11,7 +11,7 @@ export declare function findComponentImportPath(componentName: string, source: t
 export declare function findElements(source: ts.SourceFile, tagName: string): ts.Node[];
 export declare function findClosestOpening(tagName: string, node: ts.Node): ts.Node;
 export declare function isTag(tagName: string, node: ts.Node): boolean;
-export declare function addInitialRoutes(sourcePath: string, source: ts.SourceFile): StringChange[];
+export declare function addInitialRoutes(sourcePath: string, source: ts.SourceFile, addBrowserRouter?: boolean): StringChange[];
 export declare function addRoute(sourcePath: string, source: ts.SourceFile, options: {
     routePath: string;
     componentName: string;

package/src/utils/ast-utils.js

@@ -234,7 +234,7 @@ function isTag(tagName, node) {
     }
     return false;
 }
-function addInitialRoutes(sourcePath, source) {
+function addInitialRoutes(sourcePath, source, addBrowserRouter) {
     if (!tsModule) {
         tsModule = (0, ensure_typescript_1.ensureTypescript)();
     }
@@ -281,7 +281,7 @@ function addInitialRoutes(sourcePath, source) {
     `,
     };
     return [
-        ...addImport(source, `import { Route, Routes, Link } from 'react-router-dom';`),
+        ...addImport(source, `import { Route, Routes, Link ${addBrowserRouter ? ', BrowserRouter ' : ''}} from 'react-router-dom';`),
         insertRoutes,
     ];
 }

package/src/utils/versions.d.ts

@@ -14,7 +14,7 @@ export declare const typesReactDomVersion = "19.0.0";
 export declare const typesReactIsV18Version = "18.3.0";
 export declare const typesReactIsVersion = "19.0.0";
 export declare const reactViteVersion = "^4.2.0";
-export declare const typesNodeVersion = "18.16.9";
+export declare const typesNodeVersion = "^20.0.0";
 export declare const babelPresetReactVersion = "^7.14.5";
 export declare const babelCoreVersion = "^7.14.5";
 export declare const styledComponentsVersion = "5.3.6";
@@ -24,6 +24,8 @@ export declare const emotionReactVersion = "11.11.1";
 export declare const emotionBabelPlugin = "11.11.0";
 export declare const styledJsxVersion = "5.1.2";
 export declare const reactRouterDomVersion = "6.29.0";
+export declare const reactRouterVersion = "^7.2.0";
+export declare const reactRouterIsBotVersion = "^4.4.0";
 export declare const testingLibraryReactVersion = "16.1.0";
 export declare const testingLibraryDomVersion = "10.4.0";
 export declare const reduxjsToolkitVersion = "1.9.3";

package/src/utils/versions.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.svgrRollupVersion = exports.rollupPluginUrlVersion = exports.sassVersion = exports.lessVersion = exports.moduleFederationEnhancedVersion = exports.moduleFederationNodeVersion = exports.typesCorsVersion = exports.corsVersion = exports.isbotVersion = exports.typesExpressVersion = exports.expressVersion = exports.autoprefixerVersion = exports.tailwindcssVersion = exports.postcssVersion = exports.tsLibVersion = exports.babelPluginStyledComponentsVersion = exports.eslintPluginReactHooksVersion = exports.eslintPluginReactVersion = exports.eslintPluginJsxA11yVersion = exports.eslintPluginImportVersion = exports.reactReduxVersion = exports.reduxjsToolkitVersion = exports.testingLibraryDomVersion = exports.testingLibraryReactVersion = exports.reactRouterDomVersion = exports.styledJsxVersion = exports.emotionBabelPlugin = exports.emotionReactVersion = exports.emotionStyledVersion = exports.typesStyledComponentsVersion = exports.styledComponentsVersion = exports.babelCoreVersion = exports.babelPresetReactVersion = exports.typesNodeVersion = exports.reactViteVersion = exports.typesReactIsVersion = exports.typesReactIsV18Version = exports.typesReactDomVersion = exports.typesReactDomV18Version = exports.typesReactVersion = exports.typesReactV18Version = exports.babelLoaderVersion = exports.swcLoaderVersion = exports.reactIsV18Version = exports.reactIsVersion = exports.reactDomV18Version = exports.reactDomVersion = exports.reactV18Version = exports.reactVersion = exports.nxVersion = void 0;
-exports.swcPluginStyledComponentsVersion = exports.swcPluginEmotionVersion = exports.swcPluginStyledJsxVersion = void 0;
+exports.sassVersion = exports.lessVersion = exports.moduleFederationEnhancedVersion = exports.moduleFederationNodeVersion = exports.typesCorsVersion = exports.corsVersion = exports.isbotVersion = exports.typesExpressVersion = exports.expressVersion = exports.autoprefixerVersion = exports.tailwindcssVersion = exports.postcssVersion = exports.tsLibVersion = exports.babelPluginStyledComponentsVersion = exports.eslintPluginReactHooksVersion = exports.eslintPluginReactVersion = exports.eslintPluginJsxA11yVersion = exports.eslintPluginImportVersion = exports.reactReduxVersion = exports.reduxjsToolkitVersion = exports.testingLibraryDomVersion = exports.testingLibraryReactVersion = exports.reactRouterIsBotVersion = exports.reactRouterVersion = exports.reactRouterDomVersion = exports.styledJsxVersion = exports.emotionBabelPlugin = exports.emotionReactVersion = exports.emotionStyledVersion = exports.typesStyledComponentsVersion = exports.styledComponentsVersion = exports.babelCoreVersion = exports.babelPresetReactVersion = exports.typesNodeVersion = exports.reactViteVersion = exports.typesReactIsVersion = exports.typesReactIsV18Version = exports.typesReactDomVersion = exports.typesReactDomV18Version = exports.typesReactVersion = exports.typesReactV18Version = exports.babelLoaderVersion = exports.swcLoaderVersion = exports.reactIsV18Version = exports.reactIsVersion = exports.reactDomV18Version = exports.reactDomVersion = exports.reactV18Version = exports.reactVersion = exports.nxVersion = void 0;
+exports.swcPluginStyledComponentsVersion = exports.swcPluginEmotionVersion = exports.swcPluginStyledJsxVersion = exports.svgrRollupVersion = exports.rollupPluginUrlVersion = void 0;
 exports.nxVersion = require('../../package.json').version;
 exports.reactVersion = '19.0.0';
 exports.reactV18Version = '18.3.1';
@@ -18,7 +18,8 @@ exports.typesReactDomVersion = '19.0.0';
 exports.typesReactIsV18Version = '18.3.0';
 exports.typesReactIsVersion = '19.0.0';
 exports.reactViteVersion = '^4.2.0';
-exports.typesNodeVersion = '18.16.9';
+// Needed for React-Router
+exports.typesNodeVersion = '^20.0.0';
 exports.babelPresetReactVersion = '^7.14.5';
 exports.babelCoreVersion = '^7.14.5';
 exports.styledComponentsVersion = '5.3.6';
@@ -29,6 +30,8 @@ exports.emotionBabelPlugin = '11.11.0';
 // WARNING: This needs to be in sync with Next.js' dependency or else there might be issues.
 exports.styledJsxVersion = '5.1.2';
 exports.reactRouterDomVersion = '6.29.0';
+exports.reactRouterVersion = '^7.2.0';
+exports.reactRouterIsBotVersion = '^4.4.0';
 exports.testingLibraryReactVersion = '16.1.0';
 exports.testingLibraryDomVersion = '10.4.0';
 exports.reduxjsToolkitVersion = '1.9.3';