feat(react): use helper to determine project name and root directory in project generators (#18615)

docs/generated/packages/react/generators/application.json

@@ -1,6 +1,6 @@
 {
   "name": "application",
-  "factory": "./src/generators/application/application#applicationGenerator",
+  "factory": "./src/generators/application/application#applicationGeneratorInternal",
   "schema": {
     "$schema": "http://json-schema.org/schema",
     "cli": "nx",
@@ -28,7 +28,7 @@
         "type": "string",
         "$default": { "$source": "argv", "index": 0 },
         "x-prompt": "What name would you like to use for the application?",
-        "pattern": "^[a-zA-Z].*$"
+        "pattern": "^[a-zA-Z][^:]*$"
       },
       "directory": {
         "description": "The directory of the new application.",
@@ -36,6 +36,11 @@
         "alias": "dir",
         "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",
@@ -192,7 +197,7 @@
   "aliases": ["app"],
   "x-type": "application",
   "description": "Create a React application.",
-  "implementation": "/packages/react/src/generators/application/application#applicationGenerator.ts",
+  "implementation": "/packages/react/src/generators/application/application#applicationGeneratorInternal.ts",
   "hidden": false,
   "path": "/packages/react/src/generators/application/schema.json",
   "type": "generator"

docs/generated/packages/react/generators/host.json

@@ -1,6 +1,6 @@
 {
   "name": "host",
-  "factory": "./src/generators/host/host#hostGenerator",
+  "factory": "./src/generators/host/host#hostGeneratorInternal",
   "schema": {
     "$schema": "http://json-schema.org/schema",
     "$id": "GeneratorReactHost",
@@ -14,7 +14,7 @@
         "description": "The name of the host application to generate the Module Federation configuration",
         "$default": { "$source": "argv", "index": 0 },
         "x-prompt": "What name would you like to use as the host application?",
-        "pattern": "^[a-zA-Z].*$",
+        "pattern": "^[a-zA-Z][^:]*$",
         "x-priority": "important"
       },
       "directory": {
@@ -23,6 +23,11 @@
         "alias": "dir",
         "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",
@@ -163,7 +168,7 @@
   },
   "x-type": "application",
   "description": "Generate a host react application",
-  "implementation": "/packages/react/src/generators/host/host#hostGenerator.ts",
+  "implementation": "/packages/react/src/generators/host/host#hostGeneratorInternal.ts",
   "aliases": [],
   "hidden": false,
   "path": "/packages/react/src/generators/host/schema.json",

docs/generated/packages/react/generators/library.json

@@ -1,6 +1,6 @@
 {
   "name": "library",
-  "factory": "./src/generators/library/library#libraryGenerator",
+  "factory": "./src/generators/library/library#libraryGeneratorInternal",
   "schema": {
     "$schema": "http://json-schema.org/schema",
     "cli": "nx",
@@ -24,7 +24,7 @@
         "description": "Library name",
         "$default": { "$source": "argv", "index": 0 },
         "x-prompt": "What name would you like to use for the library?",
-        "pattern": "^[a-zA-Z].*$",
+        "pattern": "(?:^@[a-zA-Z0-9-*~][a-zA-Z0-9-*._~]*\\/[a-zA-Z0-9-~][a-zA-Z0-9-._~]*|^[a-zA-Z][^:]*)$",
         "x-priority": "important"
       },
       "directory": {
@@ -33,6 +33,11 @@
         "alias": "dir",
         "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",
@@ -196,7 +201,7 @@
   "aliases": ["lib"],
   "x-type": "library",
   "description": "Create a React library.",
-  "implementation": "/packages/react/src/generators/library/library#libraryGenerator.ts",
+  "implementation": "/packages/react/src/generators/library/library#libraryGeneratorInternal.ts",
   "hidden": false,
   "path": "/packages/react/src/generators/library/schema.json",
   "type": "generator"

docs/generated/packages/react/generators/remote.json

@@ -1,6 +1,6 @@
 {
   "name": "remote",
-  "factory": "./src/generators/remote/remote#remoteGenerator",
+  "factory": "./src/generators/remote/remote#remoteGeneratorInternal",
   "schema": {
     "$schema": "http://json-schema.org/schema",
     "$id": "GeneratorReactRemote",
@@ -14,7 +14,7 @@
         "description": "The name of the remote application to generate the Module Federation configuration",
         "$default": { "$source": "argv", "index": 0 },
         "x-prompt": "What name would you like to use as the remote application?",
-        "pattern": "^[a-zA-Z].*$",
+        "pattern": "^[a-zA-Z][^:]*$",
         "x-priority": "important"
       },
       "directory": {
@@ -23,6 +23,11 @@
         "alias": "dir",
         "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",
@@ -162,7 +167,7 @@
   },
   "x-type": "application",
   "description": "Generate a remote react application",
-  "implementation": "/packages/react/src/generators/remote/remote#remoteGenerator.ts",
+  "implementation": "/packages/react/src/generators/remote/remote#remoteGeneratorInternal.ts",
   "aliases": [],
   "hidden": false,
   "path": "/packages/react/src/generators/remote/schema.json",

e2e/react-core/src/react-module-federation.test.ts

@@ -2,7 +2,6 @@ import { stripIndents } from '@nx/devkit';
 import {
   checkFilesExist,
   cleanupProject,
-  killPort,
   newProject,
   readProjectConfig,
   runCLI,
@@ -114,12 +113,29 @@ describe('React Module Federation', () => {
     // }
   }, 500_000);
 
+  it('should should support generating host and remote apps with the new name and root format', async () => {
+    const shell = uniq('shell');
+    const remote = uniq('remote');
+
+    runCLI(
+      `generate @nx/react:host ${shell} --project-name-and-root-format=as-provided --no-interactive`
+    );
+    runCLI(
+      `generate @nx/react:remote ${remote} --host=${shell} --project-name-and-root-format=as-provided --no-interactive`
+    );
+
+    // check files are generated without the layout directory ("apps/") and
+    // using the project name as the directory when no directory is provided
+    checkFilesExist(`${shell}/module-federation.config.js`);
+    checkFilesExist(`${remote}/module-federation.config.js`);
+
+    // check default generated host is built successfully
+    const buildOutput = runCLI(`run ${shell}:build:development`);
+    expect(buildOutput).toContain('Successfully ran target build');
+  }, 500_000);
+
   async function readPort(appName: string): Promise<number> {
     const config = await readProjectConfig(appName);
     return config.targets.serve.options.port;
   }
 });
-
-function killPorts(ports: number[]): Promise<boolean[]> {
-  return Promise.all(ports.map((p) => killPort(p)));
-}

e2e/react-core/src/react.test.ts

@@ -227,6 +227,52 @@ describe('React Applications', () => {
     );
   }, 250_000);
 
+  it('should support generating projects with the new name and root format', () => {
+    const appName = uniq('app1');
+    const libName = uniq('@my-org/lib1');
+
+    runCLI(
+      `generate @nx/react:app ${appName} --bundler=webpack --project-name-and-root-format=as-provided --no-interactive`
+    );
+
+    // check files are generated without the layout directory ("apps/") and
+    // using the project name as the directory when no directory is provided
+    checkFilesExist(`${appName}/src/main.tsx`);
+    // check build works
+    expect(runCLI(`build ${appName}`)).toContain(
+      `Successfully ran target build for project ${appName}`
+    );
+    // check tests pass
+    const appTestResult = runCLI(`test ${appName}`);
+    expect(appTestResult).toContain(
+      `Successfully ran target test for project ${appName}`
+    );
+
+    // assert scoped project names are not supported when --project-name-and-root-format=derived
+    expect(() =>
+      runCLI(
+        `generate @nx/react:lib ${libName} --unit-test-runner=jest --buildable --project-name-and-root-format=derived --no-interactive`
+      )
+    ).toThrow();
+
+    runCLI(
+      `generate @nx/react:lib ${libName} --unit-test-runner=jest --buildable --project-name-and-root-format=as-provided --no-interactive`
+    );
+
+    // check files are generated without the layout directory ("libs/") and
+    // using the project name as the directory when no directory is provided
+    checkFilesExist(`${libName}/src/index.ts`);
+    // check build works
+    expect(runCLI(`build ${libName}`)).toContain(
+      `Successfully ran target build for project ${libName}`
+    );
+    // check tests pass
+    const libTestResult = runCLI(`test ${libName}`);
+    expect(libTestResult).toContain(
+      `Successfully ran target test for project ${libName}`
+    );
+  }, 500_000);
+
   describe('React Applications: --style option', () => {
     it.each`
       style

packages/devkit/src/generators/project-name-and-root-utils.spec.ts

@@ -56,6 +56,27 @@ describe('determineProjectNameAndRootOptions', () => {
       });
     });
 
+    it(`should handle window's style paths correctly when format is "as-provided"`, async () => {
+      const result = await determineProjectNameAndRootOptions(tree, {
+        name: 'libName',
+        directory: 'shared\\libName',
+        projectType: 'library',
+        projectNameAndRootFormat: 'as-provided',
+        callingGenerator: '',
+      });
+
+      expect(result).toStrictEqual({
+        projectName: 'lib-name',
+        names: {
+          projectSimpleName: 'lib-name',
+          projectFileName: 'lib-name',
+        },
+        importPath: '@proj/lib-name',
+        projectRoot: 'shared/lib-name',
+        projectNameAndRootFormat: 'as-provided',
+      });
+    });
+
     it('should use a scoped package name as the project name and import path when format is "as-provided"', async () => {
       const result = await determineProjectNameAndRootOptions(tree, {
         name: '@scope/libName',
@@ -253,6 +274,27 @@ describe('determineProjectNameAndRootOptions', () => {
       expect(result.importPath).toBe('@proj/lib-name');
     });
 
+    it(`should handle window's style paths correctly when format is "derived"`, async () => {
+      const result = await determineProjectNameAndRootOptions(tree, {
+        name: 'libName',
+        directory: 'shared\\sub-dir',
+        projectType: 'library',
+        projectNameAndRootFormat: 'derived',
+        callingGenerator: '',
+      });
+
+      expect(result).toStrictEqual({
+        projectName: 'shared-sub-dir-lib-name',
+        names: {
+          projectSimpleName: 'lib-name',
+          projectFileName: 'shared-sub-dir-lib-name',
+        },
+        importPath: '@proj/shared/sub-dir/lib-name',
+        projectRoot: 'shared/sub-dir/lib-name',
+        projectNameAndRootFormat: 'derived',
+      });
+    });
+
     it('should prompt for the project name and root format', async () => {
       // simulate interactive mode
       ensureInteractiveMode();
@@ -370,6 +412,27 @@ describe('determineProjectNameAndRootOptions', () => {
       });
     });
 
+    it(`should handle window's style paths correctly when format is "as-provided"`, async () => {
+      const result = await determineProjectNameAndRootOptions(tree, {
+        name: 'libName',
+        directory: 'shared\\libName',
+        projectType: 'library',
+        projectNameAndRootFormat: 'as-provided',
+        callingGenerator: '',
+      });
+
+      expect(result).toStrictEqual({
+        projectName: 'lib-name',
+        names: {
+          projectSimpleName: 'lib-name',
+          projectFileName: 'lib-name',
+        },
+        importPath: '@proj/lib-name',
+        projectRoot: 'shared/lib-name',
+        projectNameAndRootFormat: 'as-provided',
+      });
+    });
+
     it('should use a scoped package name as the project name and import path when format is "as-provided"', async () => {
       const result = await determineProjectNameAndRootOptions(tree, {
         name: '@scope/libName',
@@ -514,6 +577,27 @@ describe('determineProjectNameAndRootOptions', () => {
       });
     });
 
+    it(`should handle window's style paths correctly when format is "derived"`, async () => {
+      const result = await determineProjectNameAndRootOptions(tree, {
+        name: 'libName',
+        directory: 'shared\\sub-dir',
+        projectType: 'library',
+        projectNameAndRootFormat: 'derived',
+        callingGenerator: '',
+      });
+
+      expect(result).toStrictEqual({
+        projectName: 'shared-sub-dir-lib-name',
+        names: {
+          projectSimpleName: 'lib-name',
+          projectFileName: 'shared-sub-dir-lib-name',
+        },
+        importPath: '@proj/shared/sub-dir/lib-name',
+        projectRoot: 'libs/shared/sub-dir/lib-name',
+        projectNameAndRootFormat: 'derived',
+      });
+    });
+
     it('should throw when using a scoped package name as the project name and format is derived', async () => {
       await expect(
         determineProjectNameAndRootOptions(tree, {

packages/devkit/src/generators/project-name-and-root-utils.ts

@@ -8,7 +8,8 @@ import {
 } from '../utils/get-workspace-layout';
 import { names } from '../utils/names';
 
-const { joinPathFragments, readJson, readNxJson, updateNxJson } = requireNx();
+const { joinPathFragments, normalizePath, readJson, readNxJson, updateNxJson } =
+  requireNx();
 
 export type ProjectNameAndRootFormat = 'as-provided' | 'derived';
 export type ProjectGenerationOptions = {
@@ -169,7 +170,9 @@ function getProjectNameAndRootFormats(
   options: ProjectGenerationOptions
 ): ProjectNameAndRootFormats {
   const name = names(options.name).fileName;
-  const directory = options.directory?.replace(/^\.?\//, '');
+  const directory = options.directory
+    ? normalizePath(options.directory.replace(/^\.?\//, ''))
+    : undefined;
 
   const asProvidedProjectName = name;
   const asProvidedProjectDirectory = directory

packages/react/generators.json

@@ -114,7 +114,7 @@
     },
 
     "application": {
-      "factory": "./src/generators/application/application#applicationGenerator",
+      "factory": "./src/generators/application/application#applicationGeneratorInternal",
       "schema": "./src/generators/application/schema.json",
       "aliases": ["app"],
       "x-type": "application",
@@ -122,7 +122,7 @@
     },
 
     "library": {
-      "factory": "./src/generators/library/library#libraryGenerator",
+      "factory": "./src/generators/library/library#libraryGeneratorInternal",
       "schema": "./src/generators/library/schema.json",
       "aliases": ["lib"],
       "x-type": "library",
@@ -179,14 +179,14 @@
     },
 
     "host": {
-      "factory": "./src/generators/host/host#hostGenerator",
+      "factory": "./src/generators/host/host#hostGeneratorInternal",
       "schema": "./src/generators/host/schema.json",
       "x-type": "application",
       "description": "Generate a host react application"
     },
 
     "remote": {
-      "factory": "./src/generators/remote/remote#remoteGenerator",
+      "factory": "./src/generators/remote/remote#remoteGeneratorInternal",
       "schema": "./src/generators/remote/schema.json",
       "x-type": "application",
       "description": "Generate a remote react application"

packages/react/src/generators/application/application.spec.ts

@@ -284,7 +284,8 @@ describe('app', () => {
         appTree.exists('apps/my-dir/my-app-e2e/src/example.spec.ts')
       ).toBeTruthy();
       expect(
-        readProjectConfiguration(appTree, 'my-app-e2e')?.targets?.e2e?.executor
+        readProjectConfiguration(appTree, 'my-dir-my-app-e2e')?.targets?.e2e
+          ?.executor
       ).toEqual('@nx/playwright:playwright');
     });
   });

packages/react/src/generators/application/application.ts

@@ -85,10 +85,20 @@ async function addLinting(host: Tree, options: NormalizedSchema) {
 export async function applicationGenerator(
   host: Tree,
   schema: Schema
+): Promise<GeneratorCallback> {
+  return await applicationGeneratorInternal(host, {
+    projectNameAndRootFormat: 'derived',
+    ...schema,
+  });
+}
+
+export async function applicationGeneratorInternal(
+  host: Tree,
+  schema: Schema
 ): Promise<GeneratorCallback> {
   const tasks = [];
 
-  const options = normalizeOptions(host, schema);
+  const options = await normalizeOptions(host, schema);
   showPossibleWarnings(host, options);
 
   const initTask = await reactInitGenerator(host, {

packages/react/src/generators/application/lib/add-e2e.ts

@@ -29,7 +29,9 @@ export async function addE2e(
       return await cypressProjectGenerator(tree, {
         ...options,
         name: options.e2eProjectName,
-        directory: options.directory,
+        directory: options.e2eProjectRoot,
+        // the name and root are already normalized, instruct the generator to use them as is
+        projectNameAndRootFormat: 'as-provided',
         project: options.projectName,
         bundler: options.bundler === 'rspack' ? 'webpack' : options.bundler,
         skipFormat: true,

packages/react/src/generators/application/lib/normalize-options.ts

@@ -1,13 +1,7 @@
-import { NormalizedSchema, Schema } from '../schema';
+import { Tree, extractLayoutDirectory, names } from '@nx/devkit';
+import { determineProjectNameAndRootOptions } from '@nx/devkit/src/generators/project-name-and-root-utils';
 import { assertValidStyle } from '../../../utils/assertion';
-import {
+import { NormalizedSchema, Schema } from '../schema';
-  extractLayoutDirectory,
-  getWorkspaceLayout,
-  joinPathFragments,
-  names,
-  normalizePath,
-  Tree,
-} from '@nx/devkit';
 import { findFreePort } from './find-free-port';
 
 export function normalizeDirectory(options: Schema) {
@@ -22,24 +16,40 @@ export function normalizeProjectName(options: Schema) {
   return normalizeDirectory(options).replace(new RegExp('/', 'g'), '-');
 }
 
-export function normalizeOptions<T extends Schema = Schema>(
+export async function normalizeOptions<T extends Schema = Schema>(
   host: Tree,
-  options: Schema
+  options: Schema,
-): NormalizedSchema<T> {
+  callingGenerator = '@nx/react:application'
-  const appDirectory = normalizeDirectory(options);
+): Promise<NormalizedSchema<T>> {
-  const appProjectName = normalizeProjectName(options);
+  const {
-  const e2eProjectName = options.rootProject
+    projectName: appProjectName,
-    ? 'e2e'
+    projectRoot: appProjectRoot,
-    : `${names(options.name).fileName}-e2e`;
+    projectNameAndRootFormat,
+  } = await determineProjectNameAndRootOptions(host, {
+    name: options.name,
+    projectType: 'application',
+    directory: options.directory,
+    projectNameAndRootFormat: options.projectNameAndRootFormat,
+    rootProject: options.rootProject,
+    callingGenerator,
+  });
+  options.rootProject = appProjectRoot === '.';
+  options.projectNameAndRootFormat = projectNameAndRootFormat;
 
-  const { layoutDirectory } = extractLayoutDirectory(options.directory);
+  let e2eProjectName = 'e2e';
-  const appsDir = layoutDirectory ?? getWorkspaceLayout(host).appsDir;
+  let e2eProjectRoot = 'e2e';
-  const appProjectRoot = options.rootProject
+  if (!options.rootProject) {
-    ? '.'
+    const projectNameAndRoot = await determineProjectNameAndRootOptions(host, {
-    : normalizePath(`${appsDir}/${appDirectory}`);
+      name: `${options.name}-e2e`,
-  const e2eProjectRoot = options.rootProject
+      projectType: 'application',
-    ? 'e2e'
+      directory: options.directory,
-    : joinPathFragments(appsDir, `${appDirectory}-e2e`);
+      projectNameAndRootFormat: options.projectNameAndRootFormat,
+      rootProject: options.rootProject,
+      callingGenerator,
+    });
+    e2eProjectName = projectNameAndRoot.projectName;
+    e2eProjectRoot = projectNameAndRoot.projectRoot;
+  }
 
   const parsedTags = options.tags
     ? options.tags.split(',').map((s) => s.trim())

packages/react/src/generators/application/schema.d.ts

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

packages/react/src/generators/application/schema.json

@@ -28,7 +28,7 @@
         "index": 0
       },
       "x-prompt": "What name would you like to use for the application?",
-      "pattern": "^[a-zA-Z].*$"
+      "pattern": "^[a-zA-Z][^:]*$"
     },
     "directory": {
       "description": "The directory of the new application.",
@@ -36,6 +36,11 @@
       "alias": "dir",
       "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",

packages/react/src/generators/host/host.ts

@@ -21,8 +21,19 @@ import setupSsrGenerator from '../setup-ssr/setup-ssr';
 import { setupSsrForHost } from './lib/setup-ssr-for-host';
 
 export async function hostGenerator(host: Tree, schema: Schema) {
+  return hostGeneratorInternal(host, {
+    projectNameAndRootFormat: 'derived',
+    ...schema,
+  });
+}
+
+export async function hostGeneratorInternal(host: Tree, schema: Schema) {
   const tasks: GeneratorCallback[] = [];
-  const options = normalizeOptions<Schema>(host, schema);
+  const options = await normalizeOptions<Schema>(
+    host,
+    schema,
+    '@nx/react:host'
+  );
 
   const initTask = await applicationGenerator(host, {
     ...options,

packages/react/src/generators/host/schema.d.ts

@@ -1,11 +1,13 @@
-import { Linter } from '@nx/linter';
+import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
-import { SupportedStyles } from '../../../typings';
+import type { Linter } from '@nx/linter';
+import type { SupportedStyles } from '../../../typings';
 
 export interface Schema {
   classComponent?: boolean;
   compiler?: 'babel' | 'swc';
   devServerPort?: number;
   directory?: string;
+  projectNameAndRootFormat?: ProjectNameAndRootFormat;
   e2eTestRunner: 'cypress' | 'none';
   globalCss?: boolean;
   js?: boolean;

packages/react/src/generators/host/schema.json

@@ -14,7 +14,7 @@
         "index": 0
       },
       "x-prompt": "What name would you like to use as the host application?",
-      "pattern": "^[a-zA-Z].*$",
+      "pattern": "^[a-zA-Z][^:]*$",
       "x-priority": "important"
     },
     "directory": {
@@ -23,6 +23,11 @@
       "alias": "dir",
       "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",

packages/react/src/generators/library/lib/add-rollup-build-target.ts

@@ -2,7 +2,6 @@ import { Tree } from 'nx/src/generators/tree';
 import {
   addDependenciesToPackageJson,
   ensurePackage,
-  getWorkspaceLayout,
   joinPathFragments,
   readProjectConfiguration,
   updateProjectConfiguration,
@@ -37,7 +36,6 @@ export async function addRollupBuildTarget(
 
   const { targets } = readProjectConfiguration(host, options.name);
 
-  const { libsDir } = getWorkspaceLayout(host);
   const external: string[] = ['react', 'react-dom'];
 
   if (options.style === '@emotion/styled') {
@@ -50,10 +48,7 @@ export async function addRollupBuildTarget(
     executor: '@nx/rollup:rollup',
     outputs: ['{options.outputPath}'],
     options: {
-      outputPath:
+      outputPath: joinPathFragments('dist', options.projectRoot),
-        libsDir !== '.'
-          ? `dist/${libsDir}/${options.projectDirectory}`
-          : `dist/${options.projectDirectory}`,
       tsConfig: `${options.projectRoot}/tsconfig.lib.json`,
       project: `${options.projectRoot}/package.json`,
       entryFile: maybeJs(options, `${options.projectRoot}/src/index.ts`),

packages/react/src/generators/library/lib/normalize-options.spec.ts

@@ -11,7 +11,7 @@ describe('normalizeOptions', () => {
   });
 
   it('should set unitTestRunner=jest and bundler=none by default', async () => {
-    const options = normalizeOptions(tree, {
+    const options = await normalizeOptions(tree, {
       name: 'test',
       style: 'css',
       linter: Linter.None,
@@ -27,7 +27,7 @@ describe('normalizeOptions', () => {
   });
 
   it('should set buildable to true when bundler is not "none"', async () => {
-    let options = normalizeOptions(tree, {
+    let options = await normalizeOptions(tree, {
       name: 'test',
       style: 'css',
       linter: Linter.None,
@@ -39,7 +39,7 @@ describe('normalizeOptions', () => {
       bundler: 'rollup',
     });
 
-    options = normalizeOptions(tree, {
+    options = await normalizeOptions(tree, {
       name: 'test',
       style: 'css',
       linter: Linter.None,
@@ -53,7 +53,7 @@ describe('normalizeOptions', () => {
   });
 
   it('should set unitTestRunner=vitest by default when bundler is vite', async () => {
-    const options = normalizeOptions(tree, {
+    const options = await normalizeOptions(tree, {
       name: 'test',
       style: 'css',
       linter: Linter.None,
@@ -70,7 +70,7 @@ describe('normalizeOptions', () => {
   });
 
   it('should set maintain unitTestRunner when bundler is vite', async () => {
-    const options = normalizeOptions(tree, {
+    const options = await normalizeOptions(tree, {
       name: 'test',
       style: 'css',
       linter: Linter.None,
@@ -86,8 +86,8 @@ describe('normalizeOptions', () => {
     });
   });
 
-  it('should set bundler to rollup if buildable is true not no bundler is passed', () => {
+  it('should set bundler to rollup if buildable is true not no bundler is passed', async () => {
-    const options = normalizeOptions(tree, {
+    const options = await normalizeOptions(tree, {
       name: 'test',
       style: 'css',
       linter: Linter.None,
@@ -102,8 +102,8 @@ describe('normalizeOptions', () => {
     });
   });
 
-  it('should set bundler to rollup if buildable is true and bundler is none ', () => {
+  it('should set bundler to rollup if buildable is true and bundler is none ', async () => {
-    const options = normalizeOptions(tree, {
+    const options = await normalizeOptions(tree, {
       name: 'test',
       style: 'css',
       linter: Linter.None,

packages/react/src/generators/library/lib/normalize-options.ts

@@ -1,43 +1,34 @@
-import {
+import { getProjects, logger, normalizePath, Tree } from '@nx/devkit';
-  extractLayoutDirectory,
+import { determineProjectNameAndRootOptions } from '@nx/devkit/src/generators/project-name-and-root-utils';
-  getProjects,
-  getWorkspaceLayout,
-  joinPathFragments,
-  logger,
-  names,
-  normalizePath,
-  Tree,
-} from '@nx/devkit';
-import { getImportPath } from '@nx/js/src/utils/get-import-path';
-
 import { assertValidStyle } from '../../../utils/assertion';
 import { NormalizedSchema, Schema } from '../schema';
 
-export function normalizeOptions(
+export async function normalizeOptions(
   host: Tree,
   options: Schema
-): NormalizedSchema {
+): Promise<NormalizedSchema> {
-  const name = names(options.name).fileName;
+  const {
-  const { projectDirectory, layoutDirectory } = extractLayoutDirectory(
+    projectName,
-    options.directory
+    names: projectNames,
-  );
+    projectRoot,
-  const fullProjectDirectory = projectDirectory
+    importPath,
-    ? `${names(projectDirectory).fileName}/${name}`
+  } = await determineProjectNameAndRootOptions(host, {
-    : name;
+    name: options.name,
+    projectType: 'library',
+    directory: options.directory,
+    importPath: options.importPath,
+    projectNameAndRootFormat: options.projectNameAndRootFormat,
+    callingGenerator: '@nx/react:library',
+  });
 
-  const projectName = fullProjectDirectory.replace(new RegExp('/', 'g'), '-');
+  const fileName = options.simpleName
-  const fileName = options.simpleName ? name : projectName;
+    ? projectNames.projectSimpleName
-  const { libsDir: defaultLibsDir } = getWorkspaceLayout(host);
+    : projectNames.projectFileName;
-  const libsDir = layoutDirectory ?? defaultLibsDir;
-  const projectRoot = joinPathFragments(libsDir, fullProjectDirectory);
 
   const parsedTags = options.tags
     ? options.tags.split(',').map((s) => s.trim())
     : [];
 
-  const importPath =
-    options.importPath || getImportPath(host, fullProjectDirectory);
-
   let bundler = options.bundler ?? 'none';
 
   if (bundler === 'none') {
@@ -60,13 +51,11 @@ export function normalizeOptions(
     compiler: options.compiler ?? 'babel',
     bundler,
     fileName,
-    routePath: `/${name}`,
+    routePath: `/${projectNames.projectSimpleName}`,
     name: projectName,
     projectRoot,
-    projectDirectory: fullProjectDirectory,
     parsedTags,
     importPath,
-    libsDir,
   } as NormalizedSchema;
 
   // Libraries with a bundler or is publishable must also be buildable.

packages/react/src/generators/library/lib/update-app-routes.ts

@@ -17,7 +17,6 @@ import { addInitialRoutes } from '../../../utils/ast-utils';
 import { maybeJs } from './maybe-js';
 import { reactRouterDomVersion } from '../../../utils/versions';
 import { ensureTypescript } from '@nx/js/src/utils/typescript/ensure-typescript';
-import { getImportPath } from '@nx/js/src/utils/get-import-path';
 
 let tsModule: typeof import('typescript');
 
@@ -82,7 +81,7 @@ export function updateAppRoutes(host: Tree, options: NormalizedSchema) {
       addRoute(appComponentPath, componentSource, {
         routePath: options.routePath,
         componentName: names(options.name).className,
-        moduleName: getImportPath(host, options.projectDirectory),
+        moduleName: options.importPath,
       })
     );
     host.write(appComponentPath, changes);

packages/react/src/generators/library/library.ts

@@ -27,9 +27,16 @@ import { installCommonDependencies } from './lib/install-common-dependencies';
 import { setDefaults } from './lib/set-defaults';
 
 export async function libraryGenerator(host: Tree, schema: Schema) {
+  return await libraryGeneratorInternal(host, {
+    projectNameAndRootFormat: 'derived',
+    ...schema,
+  });
+}
+
+export async function libraryGeneratorInternal(host: Tree, schema: Schema) {
   const tasks: GeneratorCallback[] = [];
 
-  const options = normalizeOptions(host, schema);
+  const options = await normalizeOptions(host, schema);
   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)`

packages/react/src/generators/library/schema.d.ts

@@ -1,5 +1,6 @@
+import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
 import type { Linter } from '@nx/linter';
-import { SupportedStyles } from '../../../typings/style';
+import type { SupportedStyles } from '../../../typings/style';
 
 export interface Schema {
   appProject?: string;
@@ -8,6 +9,7 @@ export interface Schema {
   compiler?: 'babel' | 'swc';
   component?: boolean;
   directory?: string;
+  projectNameAndRootFormat?: ProjectNameAndRootFormat;
   globalCss?: boolean;
   importPath?: string;
   inSourceTests?: boolean;
@@ -35,10 +37,8 @@ export interface NormalizedSchema extends Schema {
   fileName: string;
   projectRoot: string;
   routePath: string;
-  projectDirectory: string;
   parsedTags: string[];
   appMain?: string;
   appSourceRoot?: string;
-  libsDir?: string;
   unitTestRunner: 'jest' | 'vitest' | 'none';
 }

packages/react/src/generators/library/schema.json

@@ -24,7 +24,7 @@
         "index": 0
       },
       "x-prompt": "What name would you like to use for the library?",
-      "pattern": "^[a-zA-Z].*$",
+      "pattern": "(?:^@[a-zA-Z0-9-*~][a-zA-Z0-9-*._~]*\\/[a-zA-Z0-9-~][a-zA-Z0-9-._~]*|^[a-zA-Z][^:]*)$",
       "x-priority": "important"
     },
     "directory": {
@@ -33,6 +33,11 @@
       "alias": "dir",
       "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",

packages/react/src/generators/remote/remote.ts

@@ -39,8 +39,19 @@ export function addModuleFederationFiles(
 }
 
 export async function remoteGenerator(host: Tree, schema: Schema) {
+  return await remoteGeneratorInternal(host, {
+    projectNameAndRootFormat: 'derived',
+    ...schema,
+  });
+}
+
+export async function remoteGeneratorInternal(host: Tree, schema: Schema) {
   const tasks: GeneratorCallback[] = [];
-  const options = normalizeOptions<Schema>(host, schema);
+  const options = await normalizeOptions<Schema>(
+    host,
+    schema,
+    '@nx/react:remote'
+  );
   const initAppTask = await applicationGenerator(host, {
     ...options,
     // Only webpack works with module federation for now.

packages/react/src/generators/remote/schema.d.ts

@@ -1,12 +1,13 @@
-import { Linter } from '@nx/linter';
+import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
-
+import type { Linter } from '@nx/linter';
-import { SupportedStyles } from '../../../typings';
+import type { SupportedStyles } from '../../../typings';
 
 export interface Schema {
   classComponent?: boolean;
   compiler?: 'babel' | 'swc';
   devServerPort?: number;
   directory?: string;
+  projectNameAndRootFormat?: ProjectNameAndRootFormat;
   e2eTestRunner: 'cypress' | 'none';
   globalCss?: boolean;
   host?: string;

packages/react/src/generators/remote/schema.json

@@ -14,7 +14,7 @@
         "index": 0
       },
       "x-prompt": "What name would you like to use as the remote application?",
-      "pattern": "^[a-zA-Z].*$",
+      "pattern": "^[a-zA-Z][^:]*$",
       "x-priority": "important"
     },
     "directory": {
@@ -23,6 +23,11 @@
       "alias": "dir",
       "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",