@nx/react 20.0.0-canary.20241001-8fa7065 → 20.0.0-canary.20241002-1d10a19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "20.0.0-canary.20241001-8fa7065",
+  "version": "20.0.0-canary.20241002-1d10a19",
   "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": {
@@ -34,15 +34,15 @@
   "dependencies": {
     "@phenomnomnominal/tsquery": "~5.0.1",
     "@svgr/webpack": "^8.0.1",
-    "chalk": "^4.1.0",
     "file-loader": "^6.2.0",
     "minimatch": "9.0.3",
+    "picocolors": "^1.1.0",
     "tslib": "^2.3.0",
     "@module-federation/enhanced": "0.6.6",
-    "@nx/devkit": "20.0.0-canary.20241001-8fa7065",
-    "@nx/js": "20.0.0-canary.20241001-8fa7065",
-    "@nx/eslint": "20.0.0-canary.20241001-8fa7065",
-    "@nx/web": "20.0.0-canary.20241001-8fa7065",
+    "@nx/devkit": "20.0.0-canary.20241002-1d10a19",
+    "@nx/js": "20.0.0-canary.20241002-1d10a19",
+    "@nx/eslint": "20.0.0-canary.20241002-1d10a19",
+    "@nx/web": "20.0.0-canary.20241002-1d10a19",
     "express": "^4.19.2",
     "http-proxy-middleware": "^3.0.0"
   },

package/src/generators/application/application.js

@@ -19,7 +19,7 @@ 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 chalk = require("chalk");
+const pc = require("picocolors");
 const show_possible_warnings_1 = require("./lib/show-possible-warnings");
 const add_e2e_1 = require("./lib/add-e2e");
 const eslint_file_1 = require("@nx/eslint/src/generators/utils/eslint-file");
@@ -226,7 +226,7 @@ async function applicationGeneratorInternal(host, schema) {
     tasks.push(routingTask);
     (0, set_defaults_1.setDefaults)(host, options);
     if (options.bundler === 'rspack' && options.style === 'styled-jsx') {
-        devkit_1.logger.warn(`${chalk.bold('styled-jsx')} is not supported by ${chalk.bold('Rspack')}. We've added ${chalk.bold('babel-loader')} to your project, but using babel will slow down your build.`);
+        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');

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

@@ -18,11 +18,11 @@ function normalizeProjectName(options) {
     return normalizeDirectory(options).replace(new RegExp('/', 'g'), '-');
 }
 async function normalizeOptions(host, options) {
-    const { projectName: appProjectName, projectRoot: appProjectRoot, projectNameAndRootFormat, } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
+    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, {
         name: options.name,
         projectType: 'application',
         directory: options.directory,
-        projectNameAndRootFormat: options.projectNameAndRootFormat,
         rootProject: options.rootProject,
     });
     const nxJson = (0, devkit_1.readNxJson)(host);
@@ -30,7 +30,6 @@ async function normalizeOptions(host, options) {
         nxJson.useInferencePlugins !== false;
     options.addPlugin ??= addPlugin;
     options.rootProject = appProjectRoot === '.';
-    options.projectNameAndRootFormat = projectNameAndRootFormat;
     const e2eProjectName = options.rootProject ? 'e2e' : `${appProjectName}-e2e`;
     const e2eProjectRoot = options.rootProject ? 'e2e' : `${appProjectRoot}-e2e`;
     const parsedTags = options.tags

package/src/generators/application/lib/show-possible-warnings.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.showPossibleWarnings = showPossibleWarnings;
-const chalk = require("chalk");
+const pc = require("picocolors");
 const devkit_1 = require("@nx/devkit");
 function showPossibleWarnings(tree, options) {
     if (options.style === 'styled-jsx' && options.compiler === 'swc') {
-        devkit_1.logger.warn(`styled-jsx may not work with SWC. Try using ${chalk.bold('nx g @nx/react:app --compiler=babel')} instead.`);
+        devkit_1.logger.warn(`styled-jsx may not work with SWC. Try using ${pc.bold('nx g @nx/react:app --compiler=babel')} instead.`);
     }
 }

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

@@ -1,13 +1,11 @@
-import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
 import type { Linter, LinterType } from '@nx/eslint';
 import type { SupportedStyles } from '../../../typings/style';
 
 export interface Schema {
-  name: string;
+  directory: string;
+  name?: string;
   style: SupportedStyles;
   skipFormat?: boolean;
-  directory?: string;
-  projectNameAndRootFormat?: ProjectNameAndRootFormat;
   tags?: string;
   unitTestRunner?: 'jest' | 'vitest' | 'none';
   inSourceTests?: boolean;

package/src/generators/application/schema.json

@@ -6,41 +6,36 @@
   "description": "Create a React application for Nx.",
   "examples": [
     {
-      "command": "nx g app myapp --directory=myorg",
+      "command": "nx g app apps/myorg/myapp",
       "description": "Generate `apps/myorg/myapp` and `apps/myorg/myapp-e2e`"
     },
     {
-      "command": "nx g app myapp --classComponent",
+      "command": "nx g app apps/myapp --classComponent",
       "description": "Use class components instead of functional components"
     },
     {
-      "command": "nx g app myapp --routing",
+      "command": "nx g app apps/myapp --routing",
       "description": "Set up React Router"
     }
   ],
   "type": "object",
   "properties": {
-    "name": {
-      "description": "The name of the application.",
+    "directory": {
+      "description": "The directory of the new application.",
       "type": "string",
+      "alias": "dir",
       "$default": {
         "$source": "argv",
         "index": 0
       },
-      "x-prompt": "What name would you like to use for the application?",
-      "pattern": "^[a-zA-Z][^:]*$"
+      "x-prompt": "Which directory do you want to create the application in?"
     },
-    "directory": {
-      "description": "The directory of the new application.",
+    "name": {
+      "description": "The name of the application.",
       "type": "string",
-      "alias": "dir",
+      "pattern": "^[a-zA-Z][^:]*$",
       "x-priority": "important"
     },
-    "projectNameAndRootFormat": {
-      "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).",
-      "type": "string",
-      "enum": ["as-provided", "derived"]
-    },
     "style": {
       "description": "The file extension to be used for style files.",
       "type": "string",
@@ -190,6 +185,6 @@
       "default": false
     }
   },
-  "required": ["name"],
+  "required": ["directory"],
   "examplesFile": "../../../docs/application-examples.md"
 }

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

@@ -7,9 +7,8 @@ const assertion_1 = require("../../../utils/assertion");
 async function normalizeOptions(tree, options) {
     (0, assertion_1.assertValidStyle)(options.style);
     const { artifactName: name, directory, fileName, filePath, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(tree, {
+        path: options.path,
         name: options.name,
-        directory: options.directory,
-        nameAndDirectoryFormat: options.nameAndDirectoryFormat,
         fileExtension: 'tsx',
         fileName: options.fileName,
     });
@@ -30,8 +29,8 @@ async function normalizeOptions(tree, options) {
     options.isNextPage = options.isNextPage ?? false;
     return {
         ...options,
-        projectName,
         directory,
+        projectName,
         styledModule,
         hasStyles: options.style !== 'none',
         className,

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

@@ -2,10 +2,10 @@ import type { NameAndDirectoryFormat } from '@nx/devkit/src/generators/artifact-
 import { SupportedStyles } from '../../../typings/style';
 
 export interface Schema {
-  name: string;
+  path: string;
+  name?: string;
   style: SupportedStyles;
   skipTests?: boolean;
-  directory?: string;
   export?: boolean;
   classComponent?: boolean;
   routing?: boolean;
@@ -14,12 +14,12 @@ export interface Schema {
   fileName?: string;
   inSourceTests?: boolean;
   skipFormat?: boolean;
-  nameAndDirectoryFormat?: NameAndDirectoryFormat;
   // Used by Next.js to determine how React should generate the page
   isNextPage?: boolean;
 }
 
 export interface NormalizedSchema extends Schema {
+  directory: string;
   projectSourceRoot: string;
   projectName: string;
   fileName: string;

package/src/generators/component/schema.json

@@ -6,13 +6,19 @@
   "description": "Create a React Component for Nx.",
   "type": "object",
   "properties": {
-    "name": {
+    "path": {
       "type": "string",
-      "description": "The name of the component.",
+      "description": "Path where the component will be generated.",
       "$default": {
         "$source": "argv",
         "index": 0
       },
+      "x-prompt": "Where should the component be generated?",
+      "x-priority": "important"
+    },
+    "name": {
+      "type": "string",
+      "description": "The name of the component.",
       "x-prompt": "What name would you like to use for the component?",
       "x-priority": "important"
     },
@@ -67,17 +73,6 @@
       "default": false,
       "x-priority": "internal"
     },
-    "directory": {
-      "type": "string",
-      "description": "The directory at which to create the component file. When `--nameAndDirectoryFormat=as-provided`, it will be relative to the current working directory. Otherwise, it will be relative to the project root.",
-      "alias": "dir",
-      "x-priority": "important"
-    },
-    "nameAndDirectoryFormat": {
-      "description": "Whether to generate the component in the directory as provided, relative to the current working directory and ignoring the project (`as-provided`) or generate it using the project and directory relative to the workspace root (`derived`).",
-      "type": "string",
-      "enum": ["as-provided", "derived"]
-    },
     "export": {
       "type": "boolean",
       "description": "When true, the component is exported from the project `index.ts` (if it exists).",
@@ -116,6 +111,6 @@
       "x-priority": "internal"
     }
   },
-  "required": ["name"],
+  "required": ["path"],
   "examplesFile": "../../../docs/component-examples.md"
 }

package/src/generators/federate-module/federate-module.js

@@ -14,14 +14,18 @@ async function federateModuleGenerator(tree, schema) {
     Path: ${schema.path}`);
     }
     const tasks = [];
+    const { projectName: remoteName, projectRoot: remoteRoot } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(tree, {
+        name: schema.remote,
+        directory: schema.remoteDirectory,
+        projectType: 'application',
+    });
     // Check remote exists
-    const remote = (0, utils_1.checkRemoteExists)(tree, schema.remote);
-    let projectRoot, remoteName;
+    const remote = (0, utils_1.checkRemoteExists)(tree, remoteName);
     if (!remote) {
         // create remote
         const remoteGeneratorTask = await (0, remote_1.remoteGenerator)(tree, {
-            name: schema.remote,
-            directory: schema.remoteDirectory,
+            name: remoteName,
+            directory: remoteRoot,
             e2eTestRunner: schema.e2eTestRunner,
             skipFormat: schema.skipFormat,
             linter: schema.linter,
@@ -29,27 +33,14 @@ async function federateModuleGenerator(tree, schema) {
             unitTestRunner: schema.unitTestRunner,
             host: schema.host,
             bundler: schema.bundler ?? 'rspack',
-            projectNameAndRootFormat: schema.projectNameAndRootFormat,
         });
         tasks.push(remoteGeneratorTask);
-        const { projectName, projectRoot: remoteRoot } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(tree, {
-            name: schema.remote,
-            directory: schema.remoteDirectory,
-            projectType: 'application',
-            projectNameAndRootFormat: schema.projectNameAndRootFormat,
-        });
-        projectRoot = remoteRoot;
-        remoteName = projectName;
-    }
-    else {
-        projectRoot = remote.root;
-        remoteName = remote.name;
     }
     // add path to exposes property
     const normalizedModulePath = schema.bundler === 'rspack'
-        ? (0, devkit_1.joinPathFragments)((0, devkit_1.offsetFromRoot)(projectRoot), schema.path)
+        ? (0, devkit_1.joinPathFragments)((0, devkit_1.offsetFromRoot)(remoteRoot), schema.path)
         : schema.path;
-    (0, utils_1.addPathToExposes)(tree, projectRoot, schema.name, normalizedModulePath);
+    (0, utils_1.addPathToExposes)(tree, remoteRoot, schema.name, normalizedModulePath);
     // Add new path to tsconfig
     const rootJSON = (0, devkit_1.readJson)(tree, (0, js_1.getRootTsConfigPathInTree)(tree));
     if (!rootJSON?.compilerOptions?.paths[`${remoteName}/${schema.name}`]) {

package/src/generators/federate-module/schema.d.ts

@@ -5,7 +5,6 @@ export interface Schema {
   path: string;
   remote: string;
   remoteDirectory?: string;
-  projectNameAndRootFormat?: ProjectNameAndRootFormat;
   e2eTestRunner?: 'cypress' | 'playwright' | 'none';
   host?: string;
   linter?: Linter | LinterType;

package/src/generators/federate-module/schema.json

@@ -37,11 +37,6 @@
       "description": "The directory of the new remote application if one needs to be created.",
       "type": "string"
     },
-    "projectNameAndRootFormat": {
-      "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).",
-      "type": "string",
-      "enum": ["as-provided", "derived"]
-    },
     "style": {
       "description": "The file extension to be used for style files.",
       "type": "string",

package/src/generators/hook/hook.js

@@ -51,9 +51,8 @@ function addExportsToBarrel(host, options) {
 async function normalizeOptions(host, options) {
     assertValidOptions(options);
     const { directory, fileName: _fileName, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(host, {
+        path: options.path,
         name: options.name,
-        directory: options.directory,
-        nameAndDirectoryFormat: options.nameAndDirectoryFormat,
         fileExtension: 'tsx',
     });
     const { className, fileName } = (0, devkit_1.names)(_fileName);

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

@@ -1,7 +1,6 @@
-import type { NameAndDirectoryFormat } from '@nx/devkit/src/generators/artifact-name-and-directory-utils';
-
 export interface Schema {
-  name: string;
+  path: string;
+  name?: string;
   skipTests?: boolean;
   directory?: string;
   export?: boolean;

package/src/generators/hook/schema.json

@@ -7,18 +7,24 @@
   "type": "object",
   "examples": [
     {
-      "command": "nx g hook my-hook --project=mylib",
-      "description": "Generate a hook in the `mylib` library"
+      "command": "nx g hook mylib/my-hook",
+      "description": "Generate a hook `my-hook` in the `mylib` library"
     }
   ],
   "properties": {
-    "name": {
+    "path": {
       "type": "string",
-      "description": "The name of the hook.",
+      "description": "Path where the hook will be generated.",
       "$default": {
         "$source": "argv",
         "index": 0
       },
+      "x-prompt": "Where should the hook be generated?",
+      "x-priority": "important"
+    },
+    "name": {
+      "type": "string",
+      "description": "The name of the hook.",
       "x-prompt": "What name would you like to use for the hook?",
       "x-priority": "important"
     },

package/src/generators/host/host.js

@@ -14,6 +14,7 @@ const update_module_federation_e2e_project_1 = require("./lib/update-module-fede
 const add_mf_env_to_inputs_1 = require("../../utils/add-mf-env-to-inputs");
 const js_1 = require("@nx/js");
 const versions_1 = require("../../utils/versions");
+const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
 async function hostGenerator(host, schema) {
     const tasks = [];
     const options = {
@@ -37,6 +38,7 @@ async function hostGenerator(host, schema) {
             }
         });
     }
+    await (0, project_name_and_root_utils_1.ensureProjectName)(host, options, 'application');
     const initTask = await (0, application_1.default)(host, {
         ...options,
         name: options.projectName,
@@ -61,7 +63,6 @@ async function hostGenerator(host, schema) {
                 devServerPort: remotePort,
                 ssr: options.ssr,
                 skipFormat: true,
-                projectNameAndRootFormat: options.projectNameAndRootFormat,
                 typescriptConfiguration: options.typescriptConfiguration,
                 js: options.js,
                 dynamic: options.dynamic,

package/src/generators/host/lib/normalize-remote.js

@@ -9,7 +9,6 @@ async function normalizeRemoteName(tree, remote, options) {
         name: remote,
         projectType: 'application',
         directory: options.directory,
-        projectNameAndRootFormat: options.projectNameAndRootFormat,
     });
     return remoteName;
 }

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

@@ -1,4 +1,3 @@
-import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
 import type { Linter, LinterType } from '@nx/eslint';
 import type { SupportedStyles } from '../../../typings/style';
 
@@ -6,13 +5,12 @@ export interface Schema {
   classComponent?: boolean;
   compiler?: 'babel' | 'swc';
   devServerPort?: number;
-  directory?: string;
-  projectNameAndRootFormat?: ProjectNameAndRootFormat;
+  directory: string;
   e2eTestRunner: 'cypress' | 'playwright' | 'none';
   globalCss?: boolean;
   js?: boolean;
   linter: Linter | LinterType;
-  name: string;
+  name?: string;
   remotes?: string[];
   setParserOptionsProject?: boolean;
   skipFormat?: boolean;

package/src/generators/host/schema.json

@@ -6,28 +6,22 @@
   "description": "Create Module Federation configuration files for given React Host Application.",
   "type": "object",
   "properties": {
-    "name": {
+    "directory": {
+      "description": "The directory of the new application.",
       "type": "string",
-      "description": "The name of the host application to generate the Module Federation configuration",
+      "alias": "dir",
       "$default": {
         "$source": "argv",
         "index": 0
       },
-      "x-prompt": "What name would you like to use as the host application?",
-      "pattern": "^[a-zA-Z][^:]*$",
-      "x-priority": "important"
+      "x-prompt": "Which directory do you want to create the application in?"
     },
-    "directory": {
-      "description": "The directory of the new application.",
+    "name": {
       "type": "string",
-      "alias": "dir",
+      "description": "The name of the host application to generate the Module Federation configuration",
+      "pattern": "^[a-zA-Z][^:]*$",
       "x-priority": "important"
     },
-    "projectNameAndRootFormat": {
-      "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).",
-      "type": "string",
-      "enum": ["as-provided", "derived"]
-    },
     "style": {
       "description": "The file extension to be used for style files.",
       "type": "string",
@@ -187,6 +181,6 @@
       "x-priority": "important"
     }
   },
-  "required": ["name"],
+  "required": ["directory"],
   "additionalProperties": false
 }

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

@@ -5,12 +5,12 @@ 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");
 async function normalizeOptions(host, options) {
+    await (0, project_name_and_root_utils_1.ensureProjectName)(host, options, 'library');
     const { projectName, names: projectNames, projectRoot, importPath, } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
         name: options.name,
         projectType: 'library',
         directory: options.directory,
         importPath: options.importPath,
-        projectNameAndRootFormat: options.projectNameAndRootFormat,
     });
     const nxJson = (0, devkit_1.readNxJson)(host);
     const addPlugin = process.env.NX_ADD_PLUGINS !== 'false' &&

package/src/generators/library/library.js

@@ -147,10 +147,9 @@ async function libraryGeneratorInternal(host, schema) {
     }
     if (options.component) {
         const relativeCwd = (0, artifact_name_and_directory_utils_1.getRelativeCwd)();
-        const name = (0, devkit_1.joinPathFragments)(options.projectRoot, 'src/lib', options.fileName);
+        const path = (0, devkit_1.joinPathFragments)(options.projectRoot, 'src/lib', options.fileName);
         const componentTask = await (0, component_1.default)(host, {
-            nameAndDirectoryFormat: 'as-provided',
-            name: relativeCwd ? (0, path_1.relative)(relativeCwd, name) : name,
+            path: relativeCwd ? (0, path_1.relative)(relativeCwd, path) : path,
             style: options.style,
             skipTests: options.unitTestRunner === 'none' ||
                 (options.unitTestRunner === 'vitest' && options.inSourceTests == true),

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

@@ -1,4 +1,3 @@
-import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
 import type { Linter, LinterType } from '@nx/eslint';
 import type { SupportedStyles } from '../../../typings/style';
 
@@ -8,14 +7,13 @@ export interface Schema {
   bundler?: 'none' | 'rollup' | 'vite';
   compiler?: 'babel' | 'swc';
   component?: boolean;
-  directory?: string;
-  projectNameAndRootFormat?: ProjectNameAndRootFormat;
+  directory: string;
   globalCss?: boolean;
   importPath?: string;
   inSourceTests?: boolean;
   js?: boolean;
   linter: Linter | LinterType;
-  name: string;
+  name?: string;
   publishable?: boolean;
   routing?: boolean;
   setParserOptionsProject?: boolean;

package/src/generators/library/schema.json

@@ -16,28 +16,21 @@
     }
   ],
   "properties": {
-    "name": {
+    "directory": {
       "type": "string",
-      "description": "Library name",
+      "description": "A directory where the lib is placed.",
+      "alias": "dir",
       "$default": {
         "$source": "argv",
         "index": 0
       },
-      "x-prompt": "What name would you like to use for the library?",
-      "pattern": "(?:^@[a-zA-Z0-9-*~][a-zA-Z0-9-*._~]*\\/[a-zA-Z0-9-~][a-zA-Z0-9-._~]*|^[a-zA-Z][^:]*)$",
-      "x-priority": "important"
+      "x-prompt": "Which directory do you want to create the library in?"
     },
-    "directory": {
+    "name": {
       "type": "string",
-      "description": "A directory where the lib is placed.",
-      "alias": "dir",
+      "description": "Library name",
       "x-priority": "important"
     },
-    "projectNameAndRootFormat": {
-      "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).",
-      "type": "string",
-      "enum": ["as-provided", "derived"]
-    },
     "style": {
       "description": "The file extension to be used for style files.",
       "type": "string",
@@ -47,7 +40,10 @@
         "message": "Which stylesheet format would you like to use?",
         "type": "list",
         "items": [
-          { "value": "css", "label": "CSS" },
+          {
+            "value": "css",
+            "label": "CSS"
+          },
           {
             "value": "scss",
             "label": "SASS(.scss)       [ https://sass-lang.com          ]"
@@ -189,5 +185,5 @@
       "default": false
     }
   },
-  "required": ["name"]
+  "required": ["directory"]
 }

package/src/generators/redux/redux.js

@@ -20,7 +20,7 @@ async function reduxGenerator(host, schema) {
     return installTask;
 }
 function generateReduxFiles(host, options) {
-    (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, './files'), options.directory, {
+    (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, './files'), options.projectDirectory, {
         ...options,
         tmpl: '',
     });
@@ -42,8 +42,8 @@ function addExportsToBarrel(host, options) {
     const indexSource = host.read(indexFilePath, 'utf-8');
     if (indexSource !== null) {
         const indexSourceFile = tsModule.createSourceFile(indexFilePath, indexSource, tsModule.ScriptTarget.Latest, true);
-        const statePath = options.directory
-            ? `./lib/${options.directory}/${options.fileName}`
+        const statePath = options.path
+            ? `./lib/${options.path}/${options.fileName}`
             : `./lib/${options.fileName}`;
         const changes = (0, devkit_1.applyChangesToString)(indexSource, (0, ast_utils_1.addImport)(indexSourceFile, `export * from '${statePath}.slice';`));
         host.write(indexFilePath, changes);
@@ -78,9 +78,8 @@ function updateReducerConfiguration(host, options) {
 }
 async function normalizeOptions(host, options) {
     const { artifactName: name, directory, fileName, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(host, {
+        path: options.path,
         name: options.name,
-        directory: options.directory,
-        nameAndDirectoryFormat: options.nameAndDirectoryFormat,
         fileExtension: 'tsx',
     });
     let appProjectSourcePath;
@@ -94,8 +93,8 @@ async function normalizeOptions(host, options) {
         ? tsConfigJson.compilerOptions.paths || {}
         : {};
     const modulePath = projectType === 'application'
-        ? options.directory
-            ? `./app/${options.directory}/${extraNames.fileName}.slice`
+        ? options.path
+            ? `./app/${options.path}/${extraNames.fileName}.slice`
             : `./app/${extraNames.fileName}.slice`
         : Object.keys(tsPaths).find((k) => tsPaths[k].some((s) => s.includes(sourceRoot)));
     // If --project is set to an app, automatically configure store
@@ -118,8 +117,8 @@ async function normalizeOptions(host, options) {
         ...options,
         ...extraNames,
         fileName,
-        constantName: (0, devkit_1.names)(options.name).constantName.toUpperCase(),
-        directory,
+        constantName: (0, devkit_1.names)(name).constantName.toUpperCase(),
+        projectDirectory: directory,
         projectType,
         projectSourcePath: sourceRoot,
         projectModulePath: modulePath,

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

@@ -1,15 +1,13 @@
-import type { NameAndDirectoryFormat } from '@nx/devkit/src/generators/artifact-name-and-directory-utils';
-
 export interface Schema {
-  name: string;
-  directory?: string;
+  path: string;
+  name?: string;
   appProject?: string;
   js?: string;
-  nameAndDirectoryFormat?: NameAndDirectoryFormat;
 }
 
 interface NormalizedSchema extends Schema {
   projectType: string;
+  projectDirectory: string;
   projectSourcePath: string;
   projectModulePath: string;
   appProjectSourcePath: string;

package/src/generators/redux/schema.json

@@ -6,27 +6,21 @@
   "description": "Create a Redux state slice for a React project.",
   "type": "object",
   "properties": {
-    "name": {
+    "path": {
       "type": "string",
-      "description": "Redux slice name.",
+      "description": "Path where the Redux slice will be generated.",
       "$default": {
         "$source": "argv",
         "index": 0
       },
+      "x-prompt": "Where should the Redux slice be generated?",
       "x-priority": "important"
     },
-    "directory": {
+    "name": {
       "type": "string",
-      "alias": "dir",
-      "default": "",
-      "description": "The directory at which to create the Redux files. When `--nameAndDirectoryFormat=as-provided`, it will be relative to the current working directory. Otherwise, it will be relative to the project root.",
+      "description": "Redux slice name.",
       "x-priority": "important"
     },
-    "nameAndDirectoryFormat": {
-      "description": "Whether to generate the component in the directory as provided, relative to the current working directory and ignoring the project (`as-provided`) or generate it using the project and directory relative to the workspace root (`derived`).",
-      "type": "string",
-      "enum": ["as-provided", "derived"]
-    },
     "appProject": {
       "type": "string",
       "description": "The application project to add the slice to.",
@@ -38,5 +32,5 @@
       "default": false
     }
   },
-  "required": ["name"]
+  "required": ["path"]
 }

package/src/generators/remote/remote.js

@@ -16,6 +16,7 @@ const add_mf_env_to_inputs_1 = require("../../utils/add-mf-env-to-inputs");
 const maybe_js_1 = require("../../utils/maybe-js");
 const js_1 = require("@nx/js");
 const versions_1 = require("../../utils/versions");
+const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
 function addModuleFederationFiles(host, options) {
     const templateVariables = {
         ...(0, devkit_1.names)(options.projectName),
@@ -66,6 +67,7 @@ async function remoteGenerator(host, schema) {
             throw new Error(`Invalid remote name provided: ${options.projectName}. ${isValidRemote.message}`);
         }
     }
+    await (0, project_name_and_root_utils_1.ensureProjectName)(host, options, 'application');
     const initAppTask = await (0, application_1.default)(host, {
         ...options,
         name: options.projectName,

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

@@ -1,4 +1,3 @@
-import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
 import type { Linter, LinterType } from '@nx/eslint';
 import type { SupportedStyles } from '../../../typings/style';
 import type { NormalizedSchema as ApplicationNormalizedSchema } from '../application/schema';
@@ -7,14 +6,13 @@ export interface Schema {
   classComponent?: boolean;
   compiler?: 'babel' | 'swc';
   devServerPort?: number;
-  directory?: string;
-  projectNameAndRootFormat?: ProjectNameAndRootFormat;
+  directory: string;
   e2eTestRunner: 'cypress' | 'playwright' | 'none';
   globalCss?: boolean;
   host?: string;
   js?: boolean;
   linter: Linter | LinterType;
-  name: string;
+  name?: string;
   routing?: boolean;
   setParserOptionsProject?: boolean;
   skipFormat: boolean;

package/src/generators/remote/schema.json

@@ -6,28 +6,22 @@
   "description": "Create Module Federation configuration files for given React Remote Application.",
   "type": "object",
   "properties": {
-    "name": {
+    "directory": {
+      "description": "The directory of the new application.",
       "type": "string",
-      "description": "The name of the remote application to generate the Module Federation configuration",
+      "alias": "dir",
       "$default": {
         "$source": "argv",
         "index": 0
       },
-      "x-prompt": "What name would you like to use as the remote application?",
-      "pattern": "^[a-zA-Z][^:]*$",
-      "x-priority": "important"
+      "x-prompt": "Which directory do you want to create the application in?"
     },
-    "directory": {
-      "description": "The directory of the new application.",
+    "name": {
       "type": "string",
-      "alias": "dir",
+      "description": "The name of the remote application to generate the Module Federation configuration",
+      "pattern": "^[a-zA-Z][^:]*$",
       "x-priority": "important"
     },
-    "projectNameAndRootFormat": {
-      "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).",
-      "type": "string",
-      "enum": ["as-provided", "derived"]
-    },
     "dynamic": {
       "type": "boolean",
       "description": "Should the host application use dynamic federation?",
@@ -186,6 +180,6 @@
       "x-priority": "important"
     }
   },
-  "required": ["name"],
+  "required": ["directory"],
   "additionalProperties": false
 }

package/src/generators/setup-ssr/setup-ssr.js

@@ -65,6 +65,12 @@ async function setupSsrGenerator(tree, options) {
     if (projectConfig.targets.build.options?.outputPath) {
         projectConfig.targets.build.options.outputPath = (0, devkit_1.joinPathFragments)(originalOutputPath, 'browser');
     }
+    if (projectConfig.targets.build.executor === '@nx/rspack:rspack') {
+        options.bundler = 'rspack';
+    }
+    else if (projectConfig.targets.build.executor === '@nx/webpack:webpack') {
+        options.bundler = 'webpack';
+    }
     projectConfig.targets = {
         ...projectConfig.targets,
         server: {

package/src/utils/testing-generators.js

@@ -12,8 +12,7 @@ async function createApp(tree, appName) {
         skipFormat: true,
         style: 'css',
         unitTestRunner: 'none',
-        name: appName,
-        projectNameAndRootFormat: 'as-provided',
+        directory: appName,
     });
 }
 async function createLib(tree, libName) {