@nx/react 16.7.2 → 16.8.0-beta.1

package/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"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "16.7.2",
+  "version": "16.8.0-beta.1",
   "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, 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": {
@@ -31,11 +31,11 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@nrwl/react": "16.7.2",
-    "@nx/devkit": "16.7.2",
-    "@nx/js": "16.7.2",
-    "@nx/linter": "16.7.2",
-    "@nx/web": "16.7.2",
+    "@nrwl/react": "16.8.0-beta.1",
+    "@nx/devkit": "16.8.0-beta.1",
+    "@nx/js": "16.8.0-beta.1",
+    "@nx/linter": "16.8.0-beta.1",
+    "@nx/web": "16.8.0-beta.1",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "@svgr/webpack": "^8.0.1",
     "chalk": "^4.1.0",
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "type": "commonjs",
-  "gitHead": "b024f44a1ad4e1773e80f6dc72f9d22766b950f9"
+  "gitHead": "231a998e004c13e559c171ba6c164a9127886153"
 }

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

@@ -1,5 +1,6 @@
 import { Schema } from './schema';
 import { GeneratorCallback, Tree } from '@nx/devkit';
 export declare function applicationGenerator(host: Tree, schema: Schema): Promise<GeneratorCallback>;
+export declare function applicationGeneratorInternal(host: Tree, schema: Schema): Promise<GeneratorCallback>;
 export default applicationGenerator;
 export declare const applicationSchematic: (generatorOptions: Schema) => (tree: any, context: any) => Promise<any>;

package/src/generators/application/application.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.applicationSchematic = exports.applicationGenerator = void 0;
+exports.applicationSchematic = exports.applicationGeneratorInternal = exports.applicationGenerator = void 0;
 const tslib_1 = require("tslib");
 const lint_1 = require("../../utils/lint");
 const create_application_files_1 = require("./lib/create-application-files");
@@ -52,9 +52,15 @@ function addLinting(host, options) {
     });
 }
 function applicationGenerator(host, schema) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        return yield applicationGeneratorInternal(host, Object.assign({ projectNameAndRootFormat: 'derived' }, schema));
+    });
+}
+exports.applicationGenerator = applicationGenerator;
+function applicationGeneratorInternal(host, schema) {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
         const tasks = [];
-        const options = (0, normalize_options_1.normalizeOptions)(host, schema);
+        const options = yield (0, normalize_options_1.normalizeOptions)(host, schema);
         (0, show_possible_warnings_1.showPossibleWarnings)(host, options);
         const initTask = yield (0, init_1.default)(host, Object.assign(Object.assign({}, options), { skipFormat: true, skipHelperLibs: options.bundler === 'vite' }));
         tasks.push(initTask);
@@ -161,6 +167,6 @@ function applicationGenerator(host, schema) {
         return (0, devkit_1.runTasksInSerial)(...tasks);
     });
 }
-exports.applicationGenerator = applicationGenerator;
+exports.applicationGeneratorInternal = applicationGeneratorInternal;
 exports.default = applicationGenerator;
 exports.applicationSchematic = (0, devkit_1.convertNxGenerator)(applicationGenerator);

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

@@ -14,7 +14,9 @@ function addE2e(tree, options) {
                     targetName: 'serve-static',
                 });
                 const { cypressProjectGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
-                return yield cypressProjectGenerator(tree, Object.assign(Object.assign({}, options), { name: options.e2eProjectName, directory: options.directory, project: options.projectName, bundler: options.bundler === 'rspack' ? 'webpack' : options.bundler, skipFormat: true }));
+                return yield cypressProjectGenerator(tree, Object.assign(Object.assign({}, options), { name: options.e2eProjectName, 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 }));
             case 'playwright':
                 const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/playwright', versions_1.nxVersion);
                 (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {

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

@@ -1,5 +1,5 @@
-import { NormalizedSchema, Schema } from '../schema';
 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): NormalizedSchema<T>;
+export declare function normalizeOptions<T extends Schema = Schema>(host: Tree, options: Schema, callingGenerator?: string): Promise<NormalizedSchema<T>>;

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

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeOptions = exports.normalizeProjectName = exports.normalizeDirectory = void 0;
-const assertion_1 = require("../../../utils/assertion");
+const tslib_1 = require("tslib");
 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");
 function normalizeDirectory(options) {
     var _a;
@@ -17,49 +19,62 @@ function normalizeProjectName(options) {
     return normalizeDirectory(options).replace(new RegExp('/', 'g'), '-');
 }
 exports.normalizeProjectName = normalizeProjectName;
-function normalizeOptions(host, options) {
+function normalizeOptions(host, options, callingGenerator = '@nx/react:application') {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const appDirectory = normalizeDirectory(options);
-    const appProjectName = normalizeProjectName(options);
-    const e2eProjectName = options.rootProject
-        ? 'e2e'
-        : `${(0, devkit_1.names)(options.name).fileName}-e2e`;
-    const { layoutDirectory } = (0, devkit_1.extractLayoutDirectory)(options.directory);
-    const appsDir = layoutDirectory !== null && layoutDirectory !== void 0 ? layoutDirectory : (0, devkit_1.getWorkspaceLayout)(host).appsDir;
-    const appProjectRoot = options.rootProject
-        ? '.'
-        : (0, devkit_1.normalizePath)(`${appsDir}/${appDirectory}`);
-    const e2eProjectRoot = options.rootProject
-        ? 'e2e'
-        : (0, devkit_1.joinPathFragments)(appsDir, `${appDirectory}-e2e`);
-    const parsedTags = options.tags
-        ? options.tags.split(',').map((s) => s.trim())
-        : [];
-    const fileName = options.pascalCaseFiles ? 'App' : 'app';
-    const styledModule = /^(css|scss|less|styl|none)$/.test(options.style)
-        ? null
-        : options.style;
-    (0, assertion_1.assertValidStyle)(options.style);
-    if (options.bundler === 'vite') {
-        options.unitTestRunner = 'vitest';
-    }
-    const normalized = Object.assign(Object.assign({}, options), { name: (0, devkit_1.names)(options.name).fileName, projectName: appProjectName, appProjectRoot,
-        e2eProjectName,
-        e2eProjectRoot,
-        parsedTags,
-        fileName,
-        styledModule, hasStyles: options.style !== 'none' });
-    normalized.routing = (_a = normalized.routing) !== null && _a !== void 0 ? _a : false;
-    normalized.strict = (_b = normalized.strict) !== null && _b !== void 0 ? _b : true;
-    normalized.classComponent = (_c = normalized.classComponent) !== null && _c !== void 0 ? _c : false;
-    normalized.compiler = (_d = normalized.compiler) !== null && _d !== void 0 ? _d : 'babel';
-    normalized.bundler = (_e = normalized.bundler) !== null && _e !== void 0 ? _e : 'webpack';
-    normalized.unitTestRunner =
-        (_f = normalized.unitTestRunner) !== null && _f !== void 0 ? _f : (normalized.bundler === 'vite' ? 'vitest' : 'jest');
-    normalized.e2eTestRunner = (_g = normalized.e2eTestRunner) !== null && _g !== void 0 ? _g : 'cypress';
-    normalized.inSourceTests = normalized.minimal || normalized.inSourceTests;
-    (_h = normalized.devServerPort) !== null && _h !== void 0 ? _h : (normalized.devServerPort = (0, find_free_port_1.findFreePort)(host));
-    normalized.minimal = (_j = normalized.minimal) !== null && _j !== void 0 ? _j : false;
-    return normalized;
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const { projectName: appProjectName, projectRoot: appProjectRoot, projectNameAndRootFormat, } = yield (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
+            name: options.name,
+            projectType: 'application',
+            directory: options.directory,
+            projectNameAndRootFormat: options.projectNameAndRootFormat,
+            rootProject: options.rootProject,
+            callingGenerator,
+        });
+        options.rootProject = appProjectRoot === '.';
+        options.projectNameAndRootFormat = projectNameAndRootFormat;
+        let e2eProjectName = 'e2e';
+        let e2eProjectRoot = 'e2e';
+        if (!options.rootProject) {
+            const projectNameAndRoot = yield (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
+                name: `${options.name}-e2e`,
+                projectType: 'application',
+                directory: options.directory,
+                projectNameAndRootFormat: options.projectNameAndRootFormat,
+                rootProject: options.rootProject,
+                callingGenerator,
+            });
+            e2eProjectName = projectNameAndRoot.projectName;
+            e2eProjectRoot = projectNameAndRoot.projectRoot;
+        }
+        const parsedTags = options.tags
+            ? options.tags.split(',').map((s) => s.trim())
+            : [];
+        const fileName = options.pascalCaseFiles ? 'App' : 'app';
+        const styledModule = /^(css|scss|less|styl|none)$/.test(options.style)
+            ? null
+            : options.style;
+        (0, assertion_1.assertValidStyle)(options.style);
+        if (options.bundler === 'vite') {
+            options.unitTestRunner = 'vitest';
+        }
+        const normalized = Object.assign(Object.assign({}, options), { name: (0, devkit_1.names)(options.name).fileName, projectName: appProjectName, appProjectRoot,
+            e2eProjectName,
+            e2eProjectRoot,
+            parsedTags,
+            fileName,
+            styledModule, hasStyles: options.style !== 'none' });
+        normalized.routing = (_a = normalized.routing) !== null && _a !== void 0 ? _a : false;
+        normalized.strict = (_b = normalized.strict) !== null && _b !== void 0 ? _b : true;
+        normalized.classComponent = (_c = normalized.classComponent) !== null && _c !== void 0 ? _c : false;
+        normalized.compiler = (_d = normalized.compiler) !== null && _d !== void 0 ? _d : 'babel';
+        normalized.bundler = (_e = normalized.bundler) !== null && _e !== void 0 ? _e : 'webpack';
+        normalized.unitTestRunner =
+            (_f = normalized.unitTestRunner) !== null && _f !== void 0 ? _f : (normalized.bundler === 'vite' ? 'vitest' : 'jest');
+        normalized.e2eTestRunner = (_g = normalized.e2eTestRunner) !== null && _g !== void 0 ? _g : 'cypress';
+        normalized.inSourceTests = normalized.minimal || normalized.inSourceTests;
+        (_h = normalized.devServerPort) !== null && _h !== void 0 ? _h : (normalized.devServerPort = (0, find_free_port_1.findFreePort)(host));
+        normalized.minimal = (_j = normalized.minimal) !== null && _j !== void 0 ? _j : false;
+        return normalized;
+    });
 }
 exports.normalizeOptions = normalizeOptions;

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

@@ -1,11 +1,13 @@
-import { Linter } from '@nx/linter';
-import { SupportedStyles } from '../../../typings/style';
+import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
+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;

package/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",

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

@@ -1,4 +1,5 @@
 import { GeneratorCallback, Tree } from '@nx/devkit';
 import { Schema } from './schema';
 export declare function hostGenerator(host: Tree, schema: Schema): Promise<GeneratorCallback>;
+export declare function hostGeneratorInternal(host: Tree, schema: Schema): Promise<GeneratorCallback>;
 export default hostGenerator;

package/src/generators/host/host.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hostGenerator = void 0;
+exports.hostGeneratorInternal = exports.hostGenerator = void 0;
 const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const application_1 = require("../application/application");
@@ -12,9 +12,15 @@ const remote_1 = require("../remote/remote");
 const setup_ssr_1 = require("../setup-ssr/setup-ssr");
 const setup_ssr_for_host_1 = require("./lib/setup-ssr-for-host");
 function hostGenerator(host, schema) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        return hostGeneratorInternal(host, Object.assign({ projectNameAndRootFormat: 'derived' }, schema));
+    });
+}
+exports.hostGenerator = hostGenerator;
+function hostGeneratorInternal(host, schema) {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
         const tasks = [];
-        const options = (0, normalize_options_1.normalizeOptions)(host, schema);
+        const options = yield (0, normalize_options_1.normalizeOptions)(host, schema, '@nx/react:host');
         const initTask = yield (0, application_1.default)(host, Object.assign(Object.assign({}, options), { 
             // The target use-case is loading remotes as child routes, thus always enable routing.
             routing: true, 
@@ -62,5 +68,5 @@ function hostGenerator(host, schema) {
         return (0, devkit_1.runTasksInSerial)(...tasks);
     });
 }
-exports.hostGenerator = hostGenerator;
+exports.hostGeneratorInternal = hostGeneratorInternal;
 exports.default = hostGenerator;

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

@@ -1,11 +1,13 @@
-import { Linter } from '@nx/linter';
-import { SupportedStyles } from '../../../typings';
+import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
+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;

package/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",

package/src/generators/library/lib/add-rollup-build-target.js

@@ -15,7 +15,6 @@ function addRollupBuildTarget(host, options) {
             '@svgr/rollup': versions_1.svgrRollupVersion,
         });
         const { targets } = (0, devkit_1.readProjectConfiguration)(host, options.name);
-        const { libsDir } = (0, devkit_1.getWorkspaceLayout)(host);
         const external = ['react', 'react-dom'];
         if (options.style === '@emotion/styled') {
             external.push('@emotion/react/jsx-runtime');
@@ -27,9 +26,7 @@ function addRollupBuildTarget(host, options) {
             executor: '@nx/rollup:rollup',
             outputs: ['{options.outputPath}'],
             options: {
-                outputPath: libsDir !== '.'
-                    ? `dist/${libsDir}/${options.projectDirectory}`
-                    : `dist/${options.projectDirectory}`,
+                outputPath: (0, devkit_1.joinPathFragments)('dist', options.projectRoot),
                 tsConfig: `${options.projectRoot}/tsconfig.lib.json`,
                 project: `${options.projectRoot}/package.json`,
                 entryFile: (0, maybe_js_1.maybeJs)(options, `${options.projectRoot}/src/index.ts`),

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

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

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

@@ -1,57 +1,60 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeOptions = void 0;
+const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
-const get_import_path_1 = require("@nx/js/src/utils/get-import-path");
+const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
 const assertion_1 = require("../../../utils/assertion");
 function normalizeOptions(host, options) {
     var _a, _b;
-    const name = (0, devkit_1.names)(options.name).fileName;
-    const { projectDirectory, layoutDirectory } = (0, devkit_1.extractLayoutDirectory)(options.directory);
-    const fullProjectDirectory = projectDirectory
-        ? `${(0, devkit_1.names)(projectDirectory).fileName}/${name}`
-        : name;
-    const projectName = fullProjectDirectory.replace(new RegExp('/', 'g'), '-');
-    const fileName = options.simpleName ? name : projectName;
-    const { libsDir: defaultLibsDir } = (0, devkit_1.getWorkspaceLayout)(host);
-    const libsDir = layoutDirectory !== null && layoutDirectory !== void 0 ? layoutDirectory : defaultLibsDir;
-    const projectRoot = (0, devkit_1.joinPathFragments)(libsDir, fullProjectDirectory);
-    const parsedTags = options.tags
-        ? options.tags.split(',').map((s) => s.trim())
-        : [];
-    const importPath = options.importPath || (0, get_import_path_1.getImportPath)(host, fullProjectDirectory);
-    let bundler = (_a = options.bundler) !== null && _a !== void 0 ? _a : 'none';
-    if (bundler === 'none') {
-        if (options.publishable) {
-            devkit_1.logger.warn(`Publishable libraries cannot be used with bundler: 'none'. Defaulting to 'rollup'.`);
-            bundler = 'rollup';
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const { projectName, names: projectNames, projectRoot, importPath, } = yield (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
+            name: options.name,
+            projectType: 'library',
+            directory: options.directory,
+            importPath: options.importPath,
+            projectNameAndRootFormat: options.projectNameAndRootFormat,
+            callingGenerator: '@nx/react:library',
+        });
+        const fileName = options.simpleName
+            ? projectNames.projectSimpleName
+            : projectNames.projectFileName;
+        const parsedTags = options.tags
+            ? options.tags.split(',').map((s) => s.trim())
+            : [];
+        let bundler = (_a = options.bundler) !== null && _a !== void 0 ? _a : 'none';
+        if (bundler === 'none') {
+            if (options.publishable) {
+                devkit_1.logger.warn(`Publishable libraries cannot be used with bundler: 'none'. Defaulting to 'rollup'.`);
+                bundler = 'rollup';
+            }
+            if (options.buildable) {
+                devkit_1.logger.warn(`Buildable libraries cannot be used with bundler: 'none'. Defaulting to 'rollup'.`);
+                bundler = 'rollup';
+            }
         }
-        if (options.buildable) {
-            devkit_1.logger.warn(`Buildable libraries cannot be used with bundler: 'none'. Defaulting to 'rollup'.`);
-            bundler = 'rollup';
+        const normalized = Object.assign(Object.assign({}, options), { compiler: (_b = options.compiler) !== null && _b !== void 0 ? _b : 'babel', bundler,
+            fileName, routePath: `/${projectNames.projectSimpleName}`, name: projectName, projectRoot,
+            parsedTags,
+            importPath });
+        // Libraries with a bundler or is publishable must also be buildable.
+        normalized.buildable = Boolean(normalized.bundler !== 'none' || options.buildable || options.publishable);
+        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}"`);
+            }
+            try {
+                normalized.appMain = appProjectConfig.targets.build.options.main;
+                normalized.appSourceRoot = (0, devkit_1.normalizePath)(appProjectConfig.sourceRoot);
+            }
+            catch (e) {
+                throw new Error(`Could not locate project main for ${options.appProject}`);
+            }
         }
-    }
-    const normalized = Object.assign(Object.assign({}, options), { compiler: (_b = options.compiler) !== null && _b !== void 0 ? _b : 'babel', bundler,
-        fileName, routePath: `/${name}`, name: projectName, projectRoot, projectDirectory: fullProjectDirectory, parsedTags,
-        importPath,
-        libsDir });
-    // Libraries with a bundler or is publishable must also be buildable.
-    normalized.buildable = Boolean(normalized.bundler !== 'none' || options.buildable || options.publishable);
-    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}"`);
-        }
-        try {
-            normalized.appMain = appProjectConfig.targets.build.options.main;
-            normalized.appSourceRoot = (0, devkit_1.normalizePath)(appProjectConfig.sourceRoot);
-        }
-        catch (e) {
-            throw new Error(`Could not locate project main for ${options.appProject}`);
-        }
-    }
-    (0, assertion_1.assertValidStyle)(normalized.style);
-    return normalized;
+        (0, assertion_1.assertValidStyle)(normalized.style);
+        return normalized;
+    });
 }
 exports.normalizeOptions = normalizeOptions;

package/src/generators/library/lib/update-app-routes.js

@@ -7,7 +7,6 @@ const ast_utils_2 = require("../../../utils/ast-utils");
 const maybe_js_1 = require("./maybe-js");
 const versions_1 = require("../../../utils/versions");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
-const get_import_path_1 = require("@nx/js/src/utils/get-import-path");
 let tsModule;
 function updateAppRoutes(host, options) {
     if (!options.appMain || !options.appSourceRoot) {
@@ -43,7 +42,7 @@ function updateAppRoutes(host, options) {
         const changes = (0, devkit_1.applyChangesToString)(componentContent, (0, ast_utils_1.addRoute)(appComponentPath, componentSource, {
             routePath: options.routePath,
             componentName: (0, devkit_1.names)(options.name).className,
-            moduleName: (0, get_import_path_1.getImportPath)(host, options.projectDirectory),
+            moduleName: options.importPath,
         }));
         host.write(appComponentPath, changes);
     }

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

@@ -1,5 +1,6 @@
 import { GeneratorCallback, Tree } from '@nx/devkit';
 import { Schema } from './schema';
 export declare function libraryGenerator(host: Tree, schema: Schema): Promise<GeneratorCallback>;
+export declare function libraryGeneratorInternal(host: Tree, schema: Schema): Promise<GeneratorCallback>;
 export default libraryGenerator;
 export declare const librarySchematic: (generatorOptions: Schema) => (tree: any, context: any) => Promise<any>;

package/src/generators/library/library.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.librarySchematic = exports.libraryGenerator = void 0;
+exports.librarySchematic = exports.libraryGeneratorInternal = exports.libraryGenerator = void 0;
 const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const js_1 = require("@nx/js");
@@ -17,9 +17,15 @@ const create_ts_config_1 = require("../../utils/create-ts-config");
 const install_common_dependencies_1 = require("./lib/install-common-dependencies");
 const set_defaults_1 = require("./lib/set-defaults");
 function libraryGenerator(host, schema) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        return yield libraryGeneratorInternal(host, Object.assign({ projectNameAndRootFormat: 'derived' }, schema));
+    });
+}
+exports.libraryGenerator = libraryGenerator;
+function libraryGeneratorInternal(host, schema) {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
         const tasks = [];
-        const options = (0, normalize_options_1.normalizeOptions)(host, schema);
+        const options = yield (0, normalize_options_1.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)`);
         }
@@ -126,6 +132,6 @@ function libraryGenerator(host, schema) {
         return (0, devkit_1.runTasksInSerial)(...tasks);
     });
 }
-exports.libraryGenerator = libraryGenerator;
+exports.libraryGeneratorInternal = libraryGeneratorInternal;
 exports.default = libraryGenerator;
 exports.librarySchematic = (0, devkit_1.convertNxGenerator)(libraryGenerator);

package/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';
 }

package/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",

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

@@ -3,4 +3,5 @@ import { NormalizedSchema } from '../application/schema';
 import { Schema } from './schema';
 export declare function addModuleFederationFiles(host: Tree, options: NormalizedSchema): void;
 export declare function remoteGenerator(host: Tree, schema: Schema): Promise<GeneratorCallback>;
+export declare function remoteGeneratorInternal(host: Tree, schema: Schema): Promise<GeneratorCallback>;
 export default remoteGenerator;

package/src/generators/remote/remote.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.remoteGenerator = exports.addModuleFederationFiles = void 0;
+exports.remoteGeneratorInternal = exports.remoteGenerator = exports.addModuleFederationFiles = void 0;
 const tslib_1 = require("tslib");
 const path_1 = require("path");
 const devkit_1 = require("@nx/devkit");
@@ -16,9 +16,15 @@ function addModuleFederationFiles(host, options) {
 }
 exports.addModuleFederationFiles = addModuleFederationFiles;
 function remoteGenerator(host, schema) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        return yield remoteGeneratorInternal(host, Object.assign({ projectNameAndRootFormat: 'derived' }, schema));
+    });
+}
+exports.remoteGenerator = remoteGenerator;
+function remoteGeneratorInternal(host, schema) {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
         const tasks = [];
-        const options = (0, normalize_options_1.normalizeOptions)(host, schema);
+        const options = yield (0, normalize_options_1.normalizeOptions)(host, schema, '@nx/react:remote');
         const initAppTask = yield (0, application_1.default)(host, Object.assign(Object.assign({}, options), { 
             // Only webpack works with module federation for now.
             bundler: 'webpack', skipFormat: true }));
@@ -51,5 +57,5 @@ function remoteGenerator(host, schema) {
         return (0, devkit_1.runTasksInSerial)(...tasks);
     });
 }
-exports.remoteGenerator = remoteGenerator;
+exports.remoteGeneratorInternal = remoteGeneratorInternal;
 exports.default = remoteGenerator;

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

@@ -1,12 +1,13 @@
-import { Linter } from '@nx/linter';
-
-import { SupportedStyles } from '../../../typings';
+import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
+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;
   host?: string;

package/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",
@@ -153,7 +158,6 @@
     "devServerPort": {
       "type": "number",
       "description": "The port for the dev server of the remote app.",
-      "default": 4200,
       "x-priority": "important"
     },
     "ssr": {