@nx/react 20.5.0-canary.20250304-8e6c007 → 20.5.0-canary.20250306-ada8be4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "20.5.0-canary.20250304-8e6c007",
+  "version": "20.5.0-canary.20250306-ada8be4",
   "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": "20.5.0-canary.20250304-8e6c007",
-    "@nx/js": "20.5.0-canary.20250304-8e6c007",
-    "@nx/eslint": "20.5.0-canary.20250304-8e6c007",
-    "@nx/web": "20.5.0-canary.20250304-8e6c007",
-    "@nx/module-federation": "20.5.0-canary.20250304-8e6c007",
+    "@nx/devkit": "20.5.0-canary.20250306-ada8be4",
+    "@nx/js": "20.5.0-canary.20250306-ada8be4",
+    "@nx/eslint": "20.5.0-canary.20250306-ada8be4",
+    "@nx/web": "20.5.0-canary.20250306-ada8be4",
+    "@nx/module-federation": "20.5.0-canary.20250306-ada8be4",
     "express": "^4.21.2",
     "http-proxy-middleware": "^3.0.3",
     "semver": "^7.6.3"

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

@@ -52,8 +52,6 @@ async function addE2e(tree, options) {
                     version: '0.0.1',
                     private: true,
                     nx: {
-                        projectType: 'application',
-                        sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
                         implicitDependencies: [options.projectName],
                     },
                 });
@@ -122,8 +120,6 @@ async function addE2e(tree, options) {
                     version: '0.0.1',
                     private: true,
                     nx: {
-                        projectType: 'application',
-                        sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
                         implicitDependencies: [options.projectName],
                     },
                 });

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

@@ -29,11 +29,23 @@ function addProject(host, options) {
         };
     }
     if (options.isUsingTsSolutionConfig) {
-        (0, devkit_1.writeJson)(host, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'package.json'), {
-            name: options.projectName,
+        const packageJson = {
+            name: options.importPath,
             version: '0.0.1',
             private: true,
-        });
+        };
+        if (options.projectName !== options.importPath) {
+            packageJson.nx = { name: options.projectName };
+        }
+        if (Object.keys(project.targets).length) {
+            packageJson.nx ??= {};
+            packageJson.nx.targets = project.targets;
+        }
+        if (options.parsedTags?.length) {
+            packageJson.nx ??= {};
+            packageJson.nx.tags = options.parsedTags;
+        }
+        (0, devkit_1.writeJson)(host, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'package.json'), packageJson);
     }
     if (!options.isUsingTsSolutionConfig || options.alwaysGenerateProjectJson) {
         (0, devkit_1.addProjectConfiguration)(host, options.projectName, {

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

@@ -39,7 +39,7 @@ async function createApplicationFiles(host, options) {
     const relativePathToRootTsConfig = (0, js_1.getRelativePathToRootTsConfig)(host, options.appProjectRoot);
     const appTests = (0, get_app_tests_1.getAppTests)(options);
     const templateVariables = {
-        ...(0, devkit_1.names)(options.name),
+        ...options.names,
         ...options,
         js: !!options.js, // Ensure this is defined in template
         tmpl: '',

package/src/generators/application/lib/normalize-options.d.ts

@@ -1,5 +1,3 @@
 import { Tree } from '@nx/devkit';
 import { NormalizedSchema, Schema } from '../schema';
-export declare function normalizeDirectory(options: Schema): string;
-export declare function normalizeProjectName(options: Schema): string;
 export declare function normalizeOptions<T extends Schema = Schema>(host: Tree, options: Schema): Promise<NormalizedSchema<T>>;

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

@@ -1,27 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.normalizeDirectory = normalizeDirectory;
-exports.normalizeProjectName = normalizeProjectName;
 exports.normalizeOptions = normalizeOptions;
 const devkit_1 = require("@nx/devkit");
 const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
 const assertion_1 = require("../../../utils/assertion");
 const find_free_port_1 = require("./find-free-port");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
-const get_import_path_1 = require("@nx/js/src/utils/get-import-path");
-function normalizeDirectory(options) {
-    options.directory = options.directory?.replace(/\\{1,2}/g, '/');
-    const { projectDirectory } = (0, devkit_1.extractLayoutDirectory)(options.directory);
-    return projectDirectory
-        ? `${(0, devkit_1.names)(projectDirectory).fileName}/${(0, devkit_1.names)(options.name).fileName}`
-        : (0, devkit_1.names)(options.name).fileName;
-}
-function normalizeProjectName(options) {
-    return normalizeDirectory(options).replace(new RegExp('/', 'g'), '-');
-}
 async function normalizeOptions(host, options) {
-    await (0, project_name_and_root_utils_1.ensureProjectName)(host, options, 'application');
-    const { projectName: appProjectName, projectRoot: appProjectRoot } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
+    await (0, project_name_and_root_utils_1.ensureRootProjectName)(options, 'application');
+    const { projectName, names: projectNames, projectRoot: appProjectRoot, importPath, } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
         name: options.name,
         projectType: 'application',
         directory: options.directory,
@@ -32,6 +19,8 @@ async function normalizeOptions(host, options) {
         nxJson.useInferencePlugins !== false;
     options.addPlugin ??= addPlugin;
     options.rootProject = appProjectRoot === '.';
+    const isUsingTsSolutionConfig = (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host);
+    const appProjectName = !isUsingTsSolutionConfig || options.name ? projectName : importPath;
     const e2eProjectName = options.rootProject ? 'e2e' : `${appProjectName}-e2e`;
     const e2eProjectRoot = options.rootProject ? 'e2e' : `${appProjectRoot}-e2e`;
     const parsedTags = options.tags
@@ -42,20 +31,18 @@ async function normalizeOptions(host, options) {
         ? null
         : options.style;
     (0, assertion_1.assertValidStyle)(options.style);
-    const isUsingTsSolutionConfig = (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host);
     const normalized = {
         ...options,
-        name: appProjectName,
-        projectName: isUsingTsSolutionConfig
-            ? (0, get_import_path_1.getImportPath)(host, appProjectName)
-            : appProjectName,
+        projectName: appProjectName,
         appProjectRoot,
+        importPath,
         e2eProjectName,
         e2eProjectRoot,
         parsedTags,
         fileName,
         styledModule,
         hasStyles: options.style !== 'none',
+        names: (0, devkit_1.names)(projectNames.projectSimpleName),
         isUsingTsSolutionConfig,
     };
     normalized.routing = normalized.routing ?? false;

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

@@ -1,3 +1,4 @@
+import type { names } from '@nx/devkit';
 import type { Linter, LinterType } from '@nx/eslint';
 import type { SupportedStyles } from '../../../typings/style';
 
@@ -38,11 +39,13 @@ export interface NormalizedSchema<T extends Schema = Schema> extends T {
   appProjectRoot: string;
   e2eProjectName: string;
   e2eProjectRoot: string;
+  importPath: string;
   parsedTags: string[];
   fileName: string;
   styledModule: null | SupportedStyles;
   hasStyles: boolean;
   unitTestRunner: 'jest' | 'vitest' | 'none';
   addPlugin?: boolean;
+  names: ReturnType<typeof names>;
   isUsingTsSolutionConfig?: boolean;
 }

package/src/generators/host/host.js

@@ -19,7 +19,10 @@ const update_module_federation_tsconfig_1 = require("./lib/update-module-federat
 async function hostGenerator(host, schema) {
     const tasks = [];
     const options = {
-        ...(await (0, normalize_options_1.normalizeOptions)(host, schema)),
+        ...(await (0, normalize_options_1.normalizeOptions)(host, {
+            ...schema,
+            alwaysGenerateProjectJson: true,
+        })),
         js: schema.js ?? false,
         typescriptConfiguration: schema.js
             ? false
@@ -39,7 +42,7 @@ async function hostGenerator(host, schema) {
             }
         });
     }
-    await (0, project_name_and_root_utils_1.ensureProjectName)(host, options, 'application');
+    await (0, project_name_and_root_utils_1.ensureRootProjectName)(options, 'application');
     const initTask = await (0, application_1.default)(host, {
         ...options,
         directory: options.appProjectRoot,

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

@@ -7,7 +7,7 @@ const assertion_1 = require("../../../utils/assertion");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 async function normalizeOptions(host, options) {
     const isUsingTsSolutionConfig = (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host);
-    await (0, project_name_and_root_utils_1.ensureProjectName)(host, options, 'library');
+    await (0, project_name_and_root_utils_1.ensureRootProjectName)(options, 'library');
     const { projectName, names: projectNames, projectRoot, importPath, } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
         name: options.name,
         projectType: 'library',
@@ -41,7 +41,7 @@ async function normalizeOptions(host, options) {
         bundler,
         fileName,
         routePath: `/${projectNames.projectSimpleName}`,
-        name: isUsingTsSolutionConfig ? importPath : projectName,
+        name: isUsingTsSolutionConfig && !options.name ? importPath : projectName,
         projectRoot,
         parsedTags,
         importPath,
@@ -51,13 +51,15 @@ async function normalizeOptions(host, options) {
     normalized.inSourceTests === normalized.minimal || normalized.inSourceTests;
     if (options.appProject) {
         const appProjectConfig = (0, devkit_1.getProjects)(host).get(options.appProject);
-        if (appProjectConfig.projectType !== 'application') {
-            throw new Error(`appProject expected type of "application" but got "${appProjectConfig.projectType}"`);
+        const appProjectType = (0, ts_solution_setup_1.getProjectType)(host, appProjectConfig.root, appProjectConfig.projectType);
+        if (appProjectType !== 'application') {
+            throw new Error(`appProject expected type of "application" but got "${appProjectType}"`);
         }
+        const appSourceRoot = (0, ts_solution_setup_1.getProjectSourceRoot)(host, appProjectConfig.sourceRoot, appProjectConfig.root);
         normalized.appMain =
             appProjectConfig.targets.build?.options?.main ??
                 findMainEntry(host, appProjectConfig.root);
-        normalized.appSourceRoot = (0, devkit_1.normalizePath)(appProjectConfig.sourceRoot);
+        normalized.appSourceRoot = (0, devkit_1.normalizePath)(appSourceRoot);
         // TODO(jack): We should use appEntryFile instead of appProject so users can directly set it rather than us inferring it.
         if (!normalized.appMain) {
             throw new Error(`Could not locate project main for ${options.appProject}`);

package/src/generators/library/library.js

@@ -53,17 +53,20 @@ async function libraryGeneratorInternal(host, schema) {
     });
     tasks.push(initTask);
     if (options.isUsingTsSolutionConfig) {
-        (0, devkit_1.writeJson)(host, `${options.projectRoot}/package.json`, {
-            name: options.importPath ?? options.name,
+        const packageJson = {
+            name: options.importPath,
             version: '0.0.1',
             ...(0, determine_entry_fields_1.determineEntryFields)(options),
-            nx: options.parsedTags?.length
-                ? {
-                    tags: options.parsedTags,
-                }
-                : undefined,
             files: options.publishable ? ['dist', '!**/*.tsbuildinfo'] : undefined,
-        });
+        };
+        if (options.name !== options.importPath) {
+            packageJson.nx = { name: options.name };
+        }
+        if (options.parsedTags?.length) {
+            packageJson.nx ??= {};
+            packageJson.nx.tags = options.parsedTags;
+        }
+        (0, devkit_1.writeJson)(host, `${options.projectRoot}/package.json`, packageJson);
     }
     else {
         (0, devkit_1.addProjectConfiguration)(host, options.name, {

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

@@ -36,6 +36,7 @@ export interface NormalizedSchema extends Schema {
   projectRoot: string;
   routePath: string;
   parsedTags: string[];
+  importPath: string;
   appMain?: string;
   appSourceRoot?: string;
   unitTestRunner: 'jest' | 'vitest' | 'none';

package/src/generators/remote/remote.js

@@ -48,7 +48,10 @@ function addModuleFederationFiles(host, options) {
 async function remoteGenerator(host, schema) {
     const tasks = [];
     const options = {
-        ...(await (0, normalize_options_1.normalizeOptions)(host, schema)),
+        ...(await (0, normalize_options_1.normalizeOptions)(host, {
+            ...schema,
+            alwaysGenerateProjectJson: true,
+        })),
         // when js is set to true, we want to use the js configuration
         js: schema.js ?? false,
         typescriptConfiguration: schema.js
@@ -62,29 +65,29 @@ async function remoteGenerator(host, schema) {
     if (options.dynamic) {
         // Dynamic remotes generate with library { type: 'var' } by default.
         // We need to ensure that the remote name is a valid variable name.
-        const isValidRemote = (0, js_1.isValidVariable)(options.name);
+        const isValidRemote = (0, js_1.isValidVariable)(options.projectName);
         if (!isValidRemote.isValid) {
-            throw new Error(`Invalid remote name provided: ${options.name}. ${isValidRemote.message}`);
+            throw new Error(`Invalid remote name provided: ${options.projectName}. ${isValidRemote.message}`);
         }
     }
-    await (0, project_name_and_root_utils_1.ensureProjectName)(host, options, 'application');
+    await (0, project_name_and_root_utils_1.ensureRootProjectName)(options, 'application');
     const REMOTE_NAME_REGEX = '^[a-zA-Z_$][a-zA-Z_$0-9]*$';
     const remoteNameRegex = new RegExp(REMOTE_NAME_REGEX);
-    if (!remoteNameRegex.test(options.name)) {
-        throw new Error((0, devkit_1.stripIndents) `Invalid remote name: ${options.name}. Remote project names must:
+    if (!remoteNameRegex.test(options.projectName)) {
+        throw new Error((0, devkit_1.stripIndents) `Invalid remote name: ${options.projectName}. Remote project names must:
       - Start with a letter, dollar sign ($) or underscore (_)
       - Followed by any valid character (letters, digits, underscores, or dollar signs)
       The regular expression used is ${REMOTE_NAME_REGEX}.`);
     }
     const initAppTask = await (0, application_1.default)(host, {
         ...options,
-        name: options.name,
+        name: options.projectName,
         skipFormat: true,
         alwaysGenerateProjectJson: true,
     });
     tasks.push(initAppTask);
     if (options.host) {
-        (0, update_host_with_remote_1.updateHostWithRemote)(host, options.host, options.name);
+        (0, update_host_with_remote_1.updateHostWithRemote)(host, options.host, options.projectName);
     }
     // Module federation requires bootstrap code to be dynamically imported.
     // Renaming original entry file so we can use `import(./bootstrap)` in