@nx/react 0.0.0-pr-31222-862e973 → 0.0.0-pr-31313-387cdca

package/src/generators/component/component.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentGenerator = componentGenerator;
-exports.componentGeneratorInternal = componentGeneratorInternal;
 const devkit_1 = require("@nx/devkit");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
 const path_1 = require("path");
@@ -12,12 +11,6 @@ const versions_1 = require("../../utils/versions");
 const get_component_tests_1 = require("./lib/get-component-tests");
 const normalize_options_1 = require("./lib/normalize-options");
 async function componentGenerator(host, schema) {
-    return componentGeneratorInternal(host, {
-        nameAndDirectoryFormat: 'derived',
-        ...schema,
-    });
-}
-async function componentGeneratorInternal(host, schema) {
     const options = await (0, normalize_options_1.normalizeOptions)(host, schema);
     createComponentFiles(host, options);
     const tasks = [];
@@ -39,31 +32,17 @@ function createComponentFiles(host, options) {
         ...options,
         componentTests,
         inSourceVitestTests: (0, get_in_source_vitest_tests_template_1.getInSourceVitestTestsTemplate)(componentTests),
-        tmpl: '',
+        isTs: options.fileExtensionType === 'ts',
+        ext: options.fileExtension,
     });
-    for (const c of host.listChanges()) {
-        let deleteFile = false;
-        if ((options.skipTests || options.inSourceTests) &&
-            /.*spec.tsx/.test(c.path)) {
-            deleteFile = true;
-        }
-        if ((options.styledModule || !options.hasStyles) &&
-            c.path.endsWith(`.${options.style}`)) {
-            deleteFile = true;
-        }
-        if (options.globalCss && c.path.endsWith(`.module.${options.style}`)) {
-            deleteFile = true;
-        }
-        if (!options.globalCss &&
-            c.path.endsWith(`${options.fileName}.${options.style}`)) {
-            deleteFile = true;
-        }
-        if (deleteFile) {
-            host.delete(c.path);
-        }
+    if (options.skipTests || options.inSourceTests) {
+        host.delete((0, devkit_1.joinPathFragments)(options.directory, `${options.fileName}.spec.${options.fileExtension}`));
+    }
+    if (options.styledModule || !options.hasStyles || !options.globalCss) {
+        host.delete((0, path_1.join)(options.directory, `${options.fileName}.${options.style}`));
     }
-    if (options.js) {
-        (0, devkit_1.toJS)(host);
+    if (options.styledModule || !options.hasStyles || options.globalCss) {
+        host.delete((0, path_1.join)(options.directory, `${options.fileName}.module.${options.style}`));
     }
 }
 let tsModule;
@@ -74,14 +53,17 @@ function addExportsToBarrel(host, options) {
     const workspace = (0, devkit_1.getProjects)(host);
     const isApp = workspace.get(options.projectName).projectType === 'application';
     if (options.export && !isApp) {
-        const indexFilePath = (0, devkit_1.joinPathFragments)(options.projectSourceRoot, options.js ? 'index.js' : 'index.ts');
-        const indexSource = host.read(indexFilePath, 'utf-8');
-        if (indexSource !== null) {
-            const indexSourceFile = tsModule.createSourceFile(indexFilePath, indexSource, tsModule.ScriptTarget.Latest, true);
-            const relativePathFromIndex = getRelativeImportToFile(indexFilePath, options.filePath);
-            const changes = (0, devkit_1.applyChangesToString)(indexSource, (0, ast_utils_1.addImport)(indexSourceFile, `export * from '${relativePathFromIndex}';`));
-            host.write(indexFilePath, changes);
+        const indexFilePath = (0, devkit_1.joinPathFragments)(...(options.projectSourceRoot
+            ? [options.projectSourceRoot]
+            : [options.projectRoot, 'src']), options.fileExtensionType === 'js' ? 'index.js' : 'index.ts');
+        if (!host.exists(indexFilePath)) {
+            return;
         }
+        const indexSource = host.read(indexFilePath, 'utf-8');
+        const indexSourceFile = tsModule.createSourceFile(indexFilePath, indexSource, tsModule.ScriptTarget.Latest, true);
+        const relativePathFromIndex = getRelativeImportToFile(indexFilePath, options.filePath);
+        const changes = (0, devkit_1.applyChangesToString)(indexSource, (0, ast_utils_1.addImport)(indexSourceFile, `export * from '${relativePathFromIndex}';`));
+        host.write(indexFilePath, changes);
     }
 }
 function getRelativeImportToFile(indexPath, filePath) {

package/src/generators/component/files/__fileName__.__ext__

@@ -0,0 +1,83 @@
+<%_ if (classComponent) { _%>
+import { Component } from 'react';
+<%_ } _%>
+<%_ if (routing) { _%>
+import { Route, Link } from 'react-router-dom';
+<%_ } _%>
+
+<%_ if (hasStyles) {
+   if (styledModule && styledModule !== 'styled-jsx' && styledModule !== 'tailwind') {
+    var wrapper = 'Styled' + className;
+    var extras = '';
+  _%>
+import styled from '<%= styledModule %>';
+  <%_ } else {
+    var wrapper = 'div';
+    var extras = globalCss || styledModule === 'styled-jsx' ? '' : " className={styles['container']}";
+  _%>
+<%- style !== 'styled-jsx' && style!== 'tailwind' ? globalCss ? `import './${fileName}.${style}';` : `import styles from './${fileName}.module.${style}';`: '' %>
+  <%_ }
+} else {
+    var wrapper = 'div';
+    var extras = '';
+} _%>
+
+<%_ if (styledModule && styledModule !== 'styled-jsx' && styledModule !== 'tailwind') { _%>
+const Styled<%= className %> = styled.div`
+  color: pink;
+`;
+<%_ } _%>
+<%_ if(!isNextPage) { _%>
+  <%_ if (classComponent) { _%>
+export class <%= className %> extends Component<% if (isTs) { %><{}><% } %> {
+  <% if (isTs) { %>override<% } %> render() {
+    return (
+      <<%= wrapper %><%- extras %>>
+        <%= styledModule === 'styled-jsx' ? `<style jsx>{\`div { color: pink; }\`}</style>` : `` %>
+        <p>Welcome to <%= className %>!</p>
+        <%_ if (routing) { _%>
+          <ul>
+            <li><Link to="/"><%= name %> root</Link></li>
+          </ul>
+          <Route path="/" element={<div>This is the <%= name %> root route.</div>} />
+        <%_ } _%>
+      </<%= wrapper %>>
+    );
+  }
+}
+  <%_ } else { _%>
+export function <%= className %>() {
+  return (
+    <<%= wrapper %><%- extras %>>
+      <%_ if (styledModule === 'styled-jsx') { _%><style jsx>{`div { color: pink; }`}</style><%_ } _%>
+      <h1>Welcome to <%= className %>!</h1>
+      <%_ if (routing) { _%>
+        <ul>
+          <li><Link to="/"><%= name %> root</Link></li>
+        </ul>
+        <Route path="/" element={<div>This is the <%= name %> root route.</div>} />
+      <%_ } _%>
+    </<%= wrapper %>>
+  );
+}
+  <%_ } _%>
+
+export default <%= className %>;
+<%_ } else { _%>
+export default function <%= className %>() {
+  return (
+    <<%= wrapper %><%- extras %>>
+      <%_ if (styledModule === 'styled-jsx') { _%><style jsx>{`div { color: pink; }`}</style><%_ } _%>
+      <h1>Welcome to <%= className %>!</h1>
+      <% if (routing) { %>
+        <ul>
+          <li><Link to="/"><%= name %> root</Link></li>
+        </ul>
+        <Route path="/" element={<div>This is the <%= name %> root route.</div>} />
+      <% } %>
+    </<%= wrapper %>>
+  );
+};
+<% } %>
+
+<% if (inSourceTests === true) { %> <%- inSourceVitestTests %> <% } %>

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

@@ -4,21 +4,15 @@ exports.normalizeOptions = normalizeOptions;
 const devkit_1 = require("@nx/devkit");
 const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
 const assertion_1 = require("../../../utils/assertion");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 async function normalizeOptions(tree, options) {
     (0, assertion_1.assertValidStyle)(options.style);
-    const { artifactName: name, directory, fileName, filePath, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(tree, {
-        artifactType: 'component',
-        callingGenerator: '@nx/react:component',
+    const { artifactName: name, directory, fileName, filePath, fileExtension, fileExtensionType, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(tree, {
+        path: options.path,
         name: options.name,
-        directory: options.directory,
-        derivedDirectory: options.derivedDirectory ?? options.directory,
-        flat: options.flat,
-        nameAndDirectoryFormat: options.nameAndDirectoryFormat,
-        project: options.project,
-        fileExtension: 'tsx',
-        fileName: options.fileName,
-        pascalCaseFile: options.pascalCaseFiles,
-        pascalCaseDirectory: options.pascalCaseDirectory,
+        allowedFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
+        fileExtension: options.js ? 'js' : 'tsx',
+        js: options.js,
     });
     const project = (0, devkit_1.readProjectConfiguration)(tree, projectName);
     const { className } = (0, devkit_1.names)(name);
@@ -26,7 +20,8 @@ async function normalizeOptions(tree, options) {
     const styledModule = /^(css|scss|less|none)$/.test(options.style)
         ? null
         : options.style;
-    if (options.export && projectType === 'application') {
+    if (options.export &&
+        (0, ts_solution_setup_1.getProjectType)(tree, projectRoot, projectType) === 'application') {
         devkit_1.logger.warn(`The "--export" option should not be used with applications and will do nothing.`);
     }
     options.classComponent = options.classComponent ?? false;
@@ -37,13 +32,16 @@ async function normalizeOptions(tree, options) {
     options.isNextPage = options.isNextPage ?? false;
     return {
         ...options,
-        projectName,
         directory,
+        projectName,
         styledModule,
         hasStyles: options.style !== 'none',
         className,
         fileName,
         filePath,
-        projectSourceRoot: projectSourceRoot ?? projectRoot,
+        projectRoot,
+        projectSourceRoot,
+        fileExtension,
+        fileExtensionType,
     };
 }

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

@@ -1,47 +1,35 @@
+import type { FileExtensionType } from '@nx/devkit/src/generators/artifact-name-and-directory-utils';
 import { SupportedStyles } from '../../../typings/style';
 
 export interface Schema {
-  name: string;
-  /**
-   * @deprecated Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v20.
-   */
-  project?: string;
+  path: string;
+  name?: string;
   style: SupportedStyles;
   skipTests?: boolean;
-  directory?: string;
   export?: boolean;
-  /**
-   * @deprecated Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v19.
-   */
-  pascalCaseFiles?: boolean;
-  /**
-   * @deprecated Provide the `directory` in pascal-case and use the `as-provided` format. This option will be removed in Nx v19.
-   */
-  pascalCaseDirectory?: boolean;
   classComponent?: boolean;
   routing?: boolean;
-  js?: boolean;
-  /**
-   * @deprecated Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v19.
-   */
-  flat?: boolean;
   globalCss?: boolean;
-  fileName?: string;
   inSourceTests?: boolean;
   skipFormat?: boolean;
-  nameAndDirectoryFormat?: 'as-provided' | 'derived';
-  // Used by other wrapping generators to preserve previous behavior
-  // e.g. @nx/next:component
-  derivedDirectory?: string;
   // Used by Next.js to determine how React should generate the page
   isNextPage?: boolean;
+
+  /**
+   * @deprecated Provide the full file path including the file extension in the `path` option. This option will be removed in Nx v21.
+   */
+  js?: boolean;
 }
 
-export interface NormalizedSchema extends Schema {
+export interface NormalizedSchema extends Omit<Schema, 'js'> {
+  directory: string;
+  projectRoot: string;
   projectSourceRoot: string;
   projectName: string;
   fileName: string;
   filePath: string;
+  fileExtension: string;
+  fileExtensionType: FileExtensionType;
   className: string;
   styledModule: null | string;
   hasStyles: boolean;

package/src/generators/component/schema.json

@@ -6,25 +6,20 @@
   "description": "Create a React Component for Nx.",
   "type": "object",
   "properties": {
-    "project": {
+    "path": {
       "type": "string",
-      "description": "The name of the project.",
-      "alias": "p",
-      "$default": {
-        "$source": "projectName"
-      },
-      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v20."
-    },
-    "name": {
-      "type": "string",
-      "description": "The name of the component.",
+      "description": "The file path to the component. Relative to the current working directory.",
       "$default": {
         "$source": "argv",
         "index": 0
       },
-      "x-prompt": "What name would you like to use for the component?",
+      "x-prompt": "What is the component file path?",
       "x-priority": "important"
     },
+    "name": {
+      "type": "string",
+      "description": "The component symbol name. Defaults to the last segment of the file path."
+    },
     "style": {
       "description": "The file extension to be used for style files.",
       "type": "string",
@@ -46,6 +41,10 @@
             "value": "less",
             "label": "LESS              [ https://lesscss.org            ]"
           },
+          {
+            "value": "tailwind",
+            "label": "tailwind          [ https://tailwindcss.com/       ]"
+          },
           {
             "value": "styled-components",
             "label": "styled-components [ https://styled-components.com ]"
@@ -68,7 +67,7 @@
     "js": {
       "type": "boolean",
       "description": "Generate JavaScript files rather than TypeScript files.",
-      "default": false
+      "x-deprecated": "Provide the full file path including the file extension in the `path` option. This option will be removed in Nx v21."
     },
     "skipTests": {
       "type": "boolean",
@@ -76,23 +75,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"]
-    },
-    "flat": {
-      "type": "boolean",
-      "description": "Create component at the source root rather than its own directory.",
-      "default": false,
-      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v19."
-    },
     "export": {
       "type": "boolean",
       "description": "When true, the component is exported from the project `index.ts` (if it exists).",
@@ -100,20 +82,6 @@
       "default": false,
       "x-prompt": "Should this component be exported in the project?"
     },
-    "pascalCaseFiles": {
-      "type": "boolean",
-      "description": "Use pascal case component file name (e.g. `App.tsx`).",
-      "alias": "P",
-      "default": false,
-      "x-deprecated": "Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v19."
-    },
-    "pascalCaseDirectory": {
-      "type": "boolean",
-      "description": "Use pascal case directory name (e.g. `App/App.tsx`).",
-      "alias": "R",
-      "default": false,
-      "x-deprecated": "Provide the `directory` in pascal-case and use the `as-provided` format. This option will be removed in Nx v19."
-    },
     "classComponent": {
       "type": "boolean",
       "alias": "C",
@@ -129,10 +97,6 @@
       "description": "Default is `false`. When `true`, the component is generated with `*.css`/`*.scss` instead of `*.module.css`/`*.module.scss`.",
       "default": false
     },
-    "fileName": {
-      "type": "string",
-      "description": "Create a component with this file name."
-    },
     "inSourceTests": {
       "type": "boolean",
       "default": false,
@@ -145,6 +109,6 @@
       "x-priority": "internal"
     }
   },
-  "required": ["name"],
+  "required": ["path"],
   "examplesFile": "../../../docs/component-examples.md"
 }

package/src/generators/component-story/component-story.js

@@ -13,8 +13,7 @@ function createComponentStoriesFile(host, { project, componentPath, interactionT
         tsModule = (0, ensure_typescript_1.ensureTypescript)();
     }
     const proj = (0, devkit_1.getProjects)(host).get(project);
-    const sourceRoot = proj.sourceRoot;
-    const componentFilePath = (0, devkit_1.joinPathFragments)(sourceRoot, componentPath);
+    const componentFilePath = (0, devkit_1.joinPathFragments)(proj.sourceRoot ?? proj.root, componentPath);
     const componentDirectory = componentFilePath.replace(componentFilePath.slice(componentFilePath.lastIndexOf('/')), '');
     const isPlainJs = componentFilePath.endsWith('.jsx') || componentFilePath.endsWith('.js');
     const componentFileName = componentFilePath

package/src/generators/component-story/files/jsx/__componentFileName__.stories.jsx__tmpl__

@@ -1,8 +1,8 @@
 import componentName from './<%= componentImportFileName %>';
-<% if ( interactionTests ) { %>
+<%_ if ( interactionTests ) { _%>
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
-<% } %>
+<%_ } _%>
 
 export default {
   component: <%= componentName %>,
@@ -10,7 +10,7 @@ export default {
   argTypes: {<% for (let argType of argTypes) { %>
     <%= argType.name %>: { <%- argType.type %> : "<%- argType.actionText %>" },<% } %>
 }
-   <% } %> 
+   <%_ } _%> 
 };
 
 export const Primary = {
@@ -19,11 +19,11 @@ export const Primary = {
   },
 };
 
-<% if ( interactionTests ) { %>
+<%_ if ( interactionTests ) { _%>
 export const Heading: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     expect(canvas.getByText(/Welcome to <%=componentName%>!/gi)).toBeTruthy();
   },
 };
-<% } %>
+<%_ } _%>

package/src/generators/component-story/files/tsx/__componentFileName__.stories.tsx__tmpl__

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { <%= componentName %>  } from './<%= componentImportFileName %>';
-<% if ( interactionTests ) { %>
+<%_ if ( interactionTests ) { _%>
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
-<% } %>
+<%_ } _%>
 
 const meta: Meta<typeof <%= componentName %>> = {
   component: <%= componentName %>,
@@ -16,14 +16,13 @@ const meta: Meta<typeof <%= componentName %>> = {
 export default meta;
 type Story = StoryObj<typeof <%= componentName %>>;
 
-
 export const Primary = {
   args: {<% for (let prop of props) { %>
     <%= prop.name %>:  <%- prop.defaultValue %>,<% } %>
   },
 };
 
-<% if ( interactionTests ) { %>
+<%_ if ( interactionTests ) { _%>
 export const Heading: Story = {
   args: {<% for (let prop of props) { %>
     <%= prop.name %>:  <%- prop.defaultValue %>,<% } %>

package/src/generators/component-test/component-test.js

@@ -10,7 +10,7 @@ const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescri
 let tsModule;
 async function componentTestGenerator(tree, options) {
     (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
-    const { assertMinimumCypressVersion } = await Promise.resolve().then(() => require('@nx/cypress/src/utils/cypress-version'));
+    const { assertMinimumCypressVersion } = await Promise.resolve().then(() => require('@nx/cypress/src/utils/versions'));
     assertMinimumCypressVersion(10);
     // normalize any windows paths
     options.componentPath = options.componentPath.replace(/\\/g, '/');

package/src/generators/cypress-component-configuration/cypress-component-configuration.js

@@ -37,8 +37,6 @@ async function cypressComponentConfigGeneratorInternal(tree, options) {
         validExecutorNames: new Set([
             '@nx/webpack:webpack',
             '@nx/vite:build',
-            '@nrwl/webpack:webpack',
-            '@nrwl/vite:build',
         ]),
     });
     await (0, add_files_1.addFiles)(tree, projectConfig, options, found);

package/src/generators/cypress-component-configuration/lib/add-files.d.ts

@@ -1,4 +1,4 @@
+import type { FoundTarget } from '@nx/cypress/src/utils/find-target-options';
 import { ProjectConfiguration, Tree } from '@nx/devkit';
 import type { CypressComponentConfigurationSchema } from '../schema';
-import { FoundTarget } from '@nx/cypress/src/utils/find-target-options';
 export declare function addFiles(tree: Tree, projectConfig: ProjectConfiguration, options: CypressComponentConfigurationSchema, found: FoundTarget): Promise<void>;

package/src/generators/cypress-component-configuration/lib/add-files.js

@@ -3,12 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.addFiles = addFiles;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("nx/src/utils/versions");
-const component_test_1 = require("../../component-test/component-test");
 const ct_utils_1 = require("../../../utils/ct-utils");
+const component_test_1 = require("../../component-test/component-test");
 async function addFiles(tree, projectConfig, options, found) {
-    // must dyanmicaly import to prevent packages not using cypress from erroring out
+    // must dynamicaly import to prevent packages not using cypress from erroring out
     // when importing react
-    const { addMountDefinition, addDefaultCTConfig } = await Promise.resolve().then(() => require('@nx/cypress/src/utils/config'));
+    const { addMountDefinition } = await Promise.resolve().then(() => require('@nx/cypress/src/utils/config'));
+    const { getInstalledCypressMajorVersion } = await Promise.resolve().then(() => require('@nx/cypress/src/utils/versions'));
+    const installedCypressMajorVersion = getInstalledCypressMajorVersion(tree);
     // Specifically undefined to allow Remix workaround of passing an empty string
     const actualBundler = await (0, ct_utils_1.getActualBundler)(tree, options, found);
     if (options.bundler && options.bundler !== actualBundler) {
@@ -18,7 +20,8 @@ async function addFiles(tree, projectConfig, options, found) {
     const bundlerToUse = options.bundler ?? actualBundler;
     const commandFile = (0, devkit_1.joinPathFragments)(projectConfig.root, 'cypress', 'support', 'component.ts');
     const updatedCommandFile = await addMountDefinition(tree.read(commandFile, 'utf-8'));
-    tree.write(commandFile, `import { mount } from 'cypress/react18';\n${updatedCommandFile}`);
+    const moduleSpecifier = installedCypressMajorVersion >= 14 ? 'cypress/react' : 'cypress/react18';
+    tree.write(commandFile, `import { mount } from '${moduleSpecifier}';\n${updatedCommandFile}`);
     if (options.bundler === 'webpack' ||
         (!options.bundler && actualBundler === 'webpack')) {
         (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { '@nx/webpack': versions_1.nxVersion });

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

@@ -14,43 +14,33 @@ 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 remoteGenerator = await (0, remote_1.remoteGeneratorInternal)(tree, {
-            name: schema.remote,
-            directory: schema.remoteDirectory,
+        const remoteGeneratorTask = await (0, remote_1.remoteGenerator)(tree, {
+            name: remoteName,
+            directory: remoteRoot,
             e2eTestRunner: schema.e2eTestRunner,
             skipFormat: schema.skipFormat,
             linter: schema.linter,
             style: schema.style,
             unitTestRunner: schema.unitTestRunner,
             host: schema.host,
-            projectNameAndRootFormat: schema.projectNameAndRootFormat ?? 'derived',
             bundler: schema.bundler ?? 'rspack',
         });
-        tasks.push(remoteGenerator);
-        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 ?? 'derived',
-            callingGenerator: '@nx/react:federate-module',
-        });
-        projectRoot = remoteRoot;
-        remoteName = projectName;
-    }
-    else {
-        projectRoot = remote.root;
-        remoteName = remote.name;
+        tasks.push(remoteGeneratorTask);
     }
     // 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

@@ -3,11 +3,15 @@
   "cli": "nx",
   "$id": "NxReactFederateModule",
   "title": "Federate Module",
-  "description": "Create a federated module, which can be loaded by a remote host.",
+  "description": "Create a federated module, which can be loaded by a Consumer (host) via a Producer (remote).",
   "examples": [
     {
-      "command": "nx g federate-module MyModule --path=./src/component/my-cmp.ts --remote=my-remote-app --remoteDirectory=apps/my-remote-app",
-      "description": "Create a federated module from my-remote-app, that exposes my-cmp from ./src/component/my-cmp.ts as MyModule."
+      "command": "nx g federate-module MyModule --path=./src/component/my-cmp.ts --remote=myRemote --remoteDirectory=apps/myRemote",
+      "description": "Create a federated module from myRemote, that exposes my-cmp from ./src/component/my-cmp.ts as MyModule."
+    },
+    {
+      "command": "nx g federate-module MyModule --path=./src/component/my-cmp.ts --producer=myProducer --producerDirectory=apps/myProducer",
+      "description": "Create a federated module from myProducer, that exposes my-cmp from ./src/component/my-cmp.ts as MyModule."
     }
   ],
   "type": "object",
@@ -30,17 +34,14 @@
     },
     "remote": {
       "type": "string",
-      "description": "The name of the remote.",
-      "x-prompt": "What is/should the remote be named?"
+      "description": "The name of the Producer (remote).",
+      "x-prompt": "What is/should the Producer (remote) be named?",
+      "alias": "producer"
     },
     "remoteDirectory": {
-      "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`).",
+      "description": "The directory of the new Producer (remote) application if one needs to be created.",
       "type": "string",
-      "enum": ["as-provided", "derived"]
+      "alias": "producerDirectory"
     },
     "style": {
       "description": "The file extension to be used for style files.",
@@ -75,7 +76,7 @@
     },
     "host": {
       "type": "string",
-      "description": "The host / shell application for this remote."
+      "description": "The Consumer (host) application for this Producer (remote)."
     },
     "bundler": {
       "description": "The bundler to use.",