@nx/react 20.4.0-canary.20250123-7524356 → 20.4.0-canary.20250125-15fc599

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "20.4.0-canary.20250123-7524356",
+  "version": "20.4.0-canary.20250125-15fc599",
   "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.4.0-canary.20250123-7524356",
-    "@nx/js": "20.4.0-canary.20250123-7524356",
-    "@nx/eslint": "20.4.0-canary.20250123-7524356",
-    "@nx/web": "20.4.0-canary.20250123-7524356",
-    "@nx/module-federation": "20.4.0-canary.20250123-7524356",
+    "@nx/devkit": "20.4.0-canary.20250125-15fc599",
+    "@nx/js": "20.4.0-canary.20250125-15fc599",
+    "@nx/eslint": "20.4.0-canary.20250125-15fc599",
+    "@nx/web": "20.4.0-canary.20250125-15fc599",
+    "@nx/module-federation": "20.4.0-canary.20250125-15fc599",
     "express": "^4.19.2",
     "http-proxy-middleware": "^3.0.3",
     "semver": "^7.6.3"

package/src/generators/application/application.js

@@ -44,6 +44,11 @@ async function applicationGeneratorInternal(tree, schema) {
     });
     tasks.push(jsInitTask);
     const options = await (0, normalize_options_1.normalizeOptions)(tree, schema);
+    // 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);
+    }
     (0, show_possible_warnings_1.showPossibleWarnings)(tree, options);
     const initTask = await (0, init_1.default)(tree, {
         ...options,
@@ -127,11 +132,6 @@ async function applicationGeneratorInternal(tree, schema) {
     }, 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);
-    }
     (0, sort_fields_1.sortPackageJsonFields)(tree, options.appProjectRoot);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);

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

@@ -5,7 +5,6 @@ const devkit_1 = require("@nx/devkit");
 const has_webpack_plugin_1 = require("../../../utils/has-webpack-plugin");
 const maybe_js_1 = require("../../../utils/maybe-js");
 const has_rspack_plugin_1 = require("../../../utils/has-rspack-plugin");
-const get_import_path_1 = require("@nx/js/src/utils/get-import-path");
 function addProject(host, options) {
     const project = {
         root: options.appProjectRoot,
@@ -31,15 +30,14 @@ function addProject(host, options) {
     }
     if (options.isUsingTsSolutionConfig) {
         (0, devkit_1.writeJson)(host, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'package.json'), {
-            name: (0, get_import_path_1.getImportPath)(host, options.name),
+            name: options.projectName,
             version: '0.0.1',
             private: true,
-            nx: {
-                name: options.name,
-                projectType: 'application',
-                sourceRoot: `${options.appProjectRoot}/src`,
-                tags: options.parsedTags?.length ? options.parsedTags : undefined,
-            },
+            nx: options.parsedTags?.length
+                ? {
+                    tags: options.parsedTags,
+                }
+                : undefined,
         });
     }
     if (!options.isUsingTsSolutionConfig || options.alwaysGenerateProjectJson) {

package/src/generators/application/lib/get-app-tests.js

@@ -13,7 +13,7 @@ function getAppTests(options) {
     ${options.routing
         ? 'const { getByText } = render(<BrowserRouter><App /></BrowserRouter>);'
         : 'const { getByText } = render(<App />);'}
-    expect(getByText(/Welcome ${options.projectName}/gi)).toBeTruthy();
+    expect(getByText(new RegExp('Welcome ${options.projectName}', 'gi'))).toBeTruthy();
   });
 `;
 }

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

@@ -8,6 +8,7 @@ const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project
 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);
@@ -41,10 +42,13 @@ 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: (0, devkit_1.names)(options.name).fileName,
-        projectName: appProjectName,
+        name: appProjectName,
+        projectName: isUsingTsSolutionConfig
+            ? (0, get_import_path_1.getImportPath)(host, appProjectName)
+            : appProjectName,
         appProjectRoot,
         e2eProjectName,
         e2eProjectRoot,
@@ -52,7 +56,7 @@ async function normalizeOptions(host, options) {
         fileName,
         styledModule,
         hasStyles: options.style !== 'none',
-        isUsingTsSolutionConfig: (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host),
+        isUsingTsSolutionConfig,
     };
     normalized.routing = normalized.routing ?? false;
     normalized.strict = normalized.strict ?? true;

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

@@ -4,6 +4,7 @@ exports.normalizeOptions = normalizeOptions;
 const devkit_1 = require("@nx/devkit");
 const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
 const assertion_1 = require("../../../utils/assertion");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 async function normalizeOptions(tree, options) {
     (0, assertion_1.assertValidStyle)(options.style);
     const { artifactName: name, directory, fileName, filePath, fileExtension, fileExtensionType, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(tree, {
@@ -19,7 +20,8 @@ async function normalizeOptions(tree, options) {
     const styledModule = /^(css|scss|less|none)$/.test(options.style)
         ? null
         : options.style;
-    if (options.export && projectType === 'application') {
+    if (options.export &&
+        (0, ts_solution_setup_1.getProjectType)(tree, projectRoot, projectType) === 'application') {
         devkit_1.logger.warn(`The "--export" option should not be used with applications and will do nothing.`);
     }
     options.classComponent = options.classComponent ?? false;

package/src/generators/hook/hook.js

@@ -7,6 +7,7 @@ const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/a
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
 const path_1 = require("path");
 const ast_utils_1 = require("../../utils/ast-utils");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 async function hookGenerator(host, schema) {
     const options = await normalizeOptions(host, schema);
     createFiles(host, options);
@@ -61,8 +62,9 @@ async function normalizeOptions(host, options) {
             : `use${className}`;
     const hookTypeName = (0, devkit_1.names)(hookName).className;
     const project = (0, devkit_1.getProjects)(host).get(projectName);
-    const { sourceRoot: projectSourceRoot, projectType } = project;
-    if (options.export && projectType === 'application') {
+    const { root, sourceRoot: projectSourceRoot, projectType } = project;
+    if (options.export &&
+        (0, ts_solution_setup_1.getProjectType)(host, root, projectType) === 'application') {
         devkit_1.logger.warn(`The "--export" option should not be used with applications and will do nothing.`);
     }
     return {

package/src/generators/host/host.js

@@ -43,7 +43,7 @@ async function hostGenerator(host, schema) {
     const initTask = await (0, application_1.default)(host, {
         ...options,
         directory: options.appProjectRoot,
-        name: options.projectName,
+        name: options.name,
         // The target use-case is loading remotes as child routes, thus always enable routing.
         routing: true,
         skipFormat: true,

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

@@ -41,7 +41,7 @@ async function normalizeOptions(host, options) {
         bundler,
         fileName,
         routePath: `/${projectNames.projectSimpleName}`,
-        name: projectName,
+        name: isUsingTsSolutionConfig ? importPath : projectName,
         projectRoot,
         parsedTags,
         importPath,

package/src/generators/library/library.js

@@ -37,6 +37,9 @@ async function libraryGeneratorInternal(host, schema) {
     });
     tasks.push(jsInitTask);
     const options = await (0, normalize_options_1.normalizeOptions)(host, schema);
+    if (options.isUsingTsSolutionConfig) {
+        (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)`);
     }
@@ -53,12 +56,11 @@ async function libraryGeneratorInternal(host, schema) {
             name: options.importPath,
             version: '0.0.1',
             ...(0, determine_entry_fields_1.determineEntryFields)(options),
-            nx: {
-                name: options.importPath === options.name ? undefined : options.name,
-                projectType: 'library',
-                sourceRoot: `${options.projectRoot}/src`,
-                tags: options.parsedTags?.length ? options.parsedTags : undefined,
-            },
+            nx: options.parsedTags?.length
+                ? {
+                    tags: options.parsedTags,
+                }
+                : undefined,
             files: options.publishable ? ['dist', '!**/*.tsbuildinfo'] : undefined,
         });
     }
@@ -207,9 +209,6 @@ async function libraryGeneratorInternal(host, schema) {
     }, options.linter === 'eslint'
         ? ['eslint.config.js', 'eslint.config.cjs', 'eslint.config.mjs']
         : undefined);
-    if (options.isUsingTsSolutionConfig) {
-        (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(host, options.projectRoot);
-    }
     (0, sort_fields_1.sortPackageJsonFields)(host, options.projectRoot);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(host);

package/src/generators/redux/redux.js

@@ -8,6 +8,7 @@ const devkit_1 = require("@nx/devkit");
 const js_1 = require("@nx/js");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
 const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 let tsModule;
 async function reduxGenerator(host, schema) {
     const options = await normalizeOptions(host, schema);
@@ -88,12 +89,12 @@ async function normalizeOptions(host, options) {
     const extraNames = (0, devkit_1.names)(name);
     const projects = (0, devkit_1.getProjects)(host);
     const project = projects.get(projectName);
-    const { sourceRoot, projectType } = project;
+    const { root, sourceRoot, projectType } = project;
     const tsConfigJson = (0, devkit_1.readJson)(host, (0, js_1.getRootTsConfigPathInTree)(host));
     const tsPaths = tsConfigJson.compilerOptions
         ? tsConfigJson.compilerOptions.paths || {}
         : {};
-    const modulePath = projectType === 'application'
+    const modulePath = (0, ts_solution_setup_1.getProjectType)(host, root, projectType) === 'application'
         ? options.path
             ? `./app/${options.path}/${extraNames.fileName}.slice`
             : `./app/${extraNames.fileName}.slice`

package/src/generators/remote/remote.js

@@ -62,29 +62,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.projectName);
+        const isValidRemote = (0, js_1.isValidVariable)(options.name);
         if (!isValidRemote.isValid) {
-            throw new Error(`Invalid remote name provided: ${options.projectName}. ${isValidRemote.message}`);
+            throw new Error(`Invalid remote name provided: ${options.name}. ${isValidRemote.message}`);
         }
     }
     await (0, project_name_and_root_utils_1.ensureProjectName)(host, 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.projectName)) {
-        throw new Error((0, devkit_1.stripIndents) `Invalid remote name: ${options.projectName}. Remote project names must:
+    if (!remoteNameRegex.test(options.name)) {
+        throw new Error((0, devkit_1.stripIndents) `Invalid remote name: ${options.name}. 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.projectName,
+        name: options.name,
         skipFormat: true,
         alwaysGenerateProjectJson: true,
     });
     tasks.push(initAppTask);
-    if (schema.host) {
-        (0, update_host_with_remote_1.updateHostWithRemote)(host, schema.host, options.projectName);
+    if (options.host) {
+        (0, update_host_with_remote_1.updateHostWithRemote)(host, options.host, options.name);
     }
     // Module federation requires bootstrap code to be dynamically imported.
     // Renaming original entry file so we can use `import(./bootstrap)` in

package/src/generators/stories/stories.js

@@ -11,10 +11,11 @@ const path_1 = require("path");
 const minimatch_1 = require("minimatch");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
 const versions_1 = require("../../utils/versions");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 let tsModule;
 async function projectRootPath(tree, config) {
     let projectDir;
-    if (config.projectType === 'application') {
+    if ((0, ts_solution_setup_1.getProjectType)(tree, config.root, config.projectType) === 'application') {
         const isNextJs = await isNextJsProject(tree, config);
         if (isNextJs) {
             // Next.js apps