fix(angular): federate-module should support as-provided for new remotes

docs/generated/packages/angular/generators/federate-module.json

@@ -9,7 +9,7 @@
     "description": "Create a federated module, which is exposed by a remote and can be subsequently loaded by a host.",
     "examples": [
       {
-        "command": "nx g federate-module MyModule --path=./src/component/my-cmp.ts --remote=my-remote-app",
+        "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."
       }
     ],
@@ -33,6 +33,10 @@
         "description": "The name of the remote.",
         "x-prompt": "What is/should the remote be named?"
       },
+      "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`).",
         "type": "string",

docs/generated/packages/react/generators/federate-module.json

@@ -9,7 +9,7 @@
     "description": "Create a federated module, which can be loaded by a remote host.",
     "examples": [
       {
-        "command": "nx g federate-module MyModule --path=./src/component/my-cmp.ts --remote=my-remote-app",
+        "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."
       }
     ],
@@ -33,6 +33,10 @@
         "description": "The name of the remote.",
         "x-prompt": "What is/should the remote be named?"
       },
+      "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`).",
         "type": "string",
@@ -41,40 +45,8 @@
       "style": {
         "description": "The file extension to be used for style files.",
         "type": "string",
-        "default": "css",
-        "alias": "s",
-        "x-prompt": {
-          "message": "Which stylesheet format would you like to use?",
-          "type": "list",
-          "items": [
-            { "value": "css", "label": "CSS" },
-            {
-              "value": "scss",
-              "label": "SASS(.scss)       [ http://sass-lang.com                     ]"
-            },
-            {
-              "value": "less",
-              "label": "LESS              [ http://lesscss.org                       ]"
-            },
-            {
-              "value": "styled-components",
-              "label": "styled-components [ https://styled-components.com            ]"
-            },
-            {
-              "value": "@emotion/styled",
-              "label": "emotion           [ https://emotion.sh                       ]"
-            },
-            {
-              "value": "styled-jsx",
-              "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
-            },
-            {
-              "value": "styl",
-              "label": "DEPRECATD: Stylus(.styl) [ http://stylus-lang.com            ]"
-            },
-            { "value": "none", "label": "None" }
-          ]
-        }
+        "default": "none",
+        "alias": "s"
       },
       "linter": {
         "description": "The tool to use for running lint checks.",

packages/angular/src/generators/federate-module/lib/add-remote.ts

@@ -11,6 +11,8 @@ export async function addRemote(tree: Tree, schema: Schema) {
   const tasks: GeneratorCallback[] = [];
   const remote = getRemoteIfExists(tree, schema.remote);
 
+  let projectRoot, remoteName;
+
   if (!remote) {
     const installedAngularVersionInfo = getInstalledAngularVersionInfo(tree);
 
@@ -24,6 +26,7 @@ export async function addRemote(tree: Tree, schema: Schema) {
 
     const remoteGeneratorCallback = await remoteGenerator(tree, {
       name: schema.remote,
+      directory: schema.remoteDirectory,
       host: schema.host,
       standalone: schema.standalone,
       projectNameAndRootFormat: schema.projectNameAndRootFormat ?? 'derived',
@@ -33,19 +36,22 @@ export async function addRemote(tree: Tree, schema: Schema) {
     });
 
     tasks.push(remoteGeneratorCallback);
+    const { projectName, projectRoot: remoteRoot } =
+      await determineProjectNameAndRootOptions(tree, {
+        name: schema.remote,
+        directory: schema.remoteDirectory,
+        projectType: 'application',
+        projectNameAndRootFormat: schema.projectNameAndRootFormat ?? 'derived',
+        callingGenerator: '@nx/angular:federate-module',
+      });
+
+    projectRoot = remoteRoot;
+    remoteName = projectName;
+  } else {
+    projectRoot = remote.root;
+    remoteName = remote.name;
   }
 
-  const { projectName, projectRoot: remoteRoot } =
-    await determineProjectNameAndRootOptions(tree, {
-      name: schema.remote,
-      projectType: 'application',
-      projectNameAndRootFormat: schema.projectNameAndRootFormat ?? 'derived',
-      callingGenerator: '@nx/angular:federate-module',
-    });
-
-  const projectRoot = remote ? remote.root : remoteRoot;
-  const remoteName = remote ? remote.name : projectName;
-
   // TODO(Colum): add implicit dependency if the path points to a file in a different project
 
   return {

packages/angular/src/generators/federate-module/schema.d.ts

@@ -5,6 +5,7 @@ export interface Schema {
   name: string;
   path: string;
   remote: string;
+  remoteDirectory?: string;
   host?: string;
   projectNameAndRootFormat?: ProjectNameAndRootFormat;
   unitTestRunner?: UnitTestRunner;

packages/angular/src/generators/federate-module/schema.json

@@ -6,7 +6,7 @@
   "description": "Create a federated module, which is exposed by a remote and can be subsequently loaded by a host.",
   "examples": [
     {
-      "command": "nx g federate-module MyModule --path=./src/component/my-cmp.ts --remote=my-remote-app",
+      "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."
     }
   ],
@@ -33,6 +33,10 @@
       "description": "The name of the remote.",
       "x-prompt": "What is/should the remote be named?"
     },
+    "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`).",
       "type": "string",

packages/react/src/generators/federate-module/federate-module.ts

@@ -24,18 +24,14 @@ export async function federateModuleGenerator(tree: Tree, schema: Schema) {
   const tasks: GeneratorCallback[] = [];
   // Check remote exists
   const remote = checkRemoteExists(tree, schema.remote);
-  const { projectName, projectRoot: remoteRoot } =
-    await determineProjectNameAndRootOptions(tree, {
-      name: schema.remote,
-      projectType: 'application',
-      projectNameAndRootFormat: schema.projectNameAndRootFormat,
-      callingGenerator: '@nx/react:federate-module',
-    });
+
+  let projectRoot, remoteName;
 
   if (!remote) {
     // create remote
     const remoteGenerator = await remoteGeneratorInternal(tree, {
       name: schema.remote,
+      directory: schema.remoteDirectory,
       e2eTestRunner: schema.e2eTestRunner,
       skipFormat: schema.skipFormat,
       linter: schema.linter,
@@ -46,10 +42,22 @@ export async function federateModuleGenerator(tree: Tree, schema: Schema) {
     });
 
     tasks.push(remoteGenerator);
-  }
 
-  const projectRoot = remote ? remote.root : remoteRoot;
-  const remoteName = remote ? remote.name : projectName;
+    const { projectName, projectRoot: remoteRoot } =
+      await 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;
+  }
 
   // add path to exposes property
   addPathToExposes(tree, projectRoot, schema.name, schema.path);

packages/react/src/generators/federate-module/schema.d.ts

@@ -2,6 +2,7 @@ export interface Schema {
   name: string;
   path: string;
   remote: string;
+  remoteDirectory?: string;
   projectNameAndRootFormat?: ProjectNameAndRootFormat;
   e2eTestRunner?: 'cypress' | 'none';
   host?: string;

packages/react/src/generators/federate-module/schema.json

@@ -6,7 +6,7 @@
   "description": "Create a federated module, which can be loaded by a remote host.",
   "examples": [
     {
-      "command": "nx g federate-module MyModule --path=./src/component/my-cmp.ts --remote=my-remote-app",
+      "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."
     }
   ],
@@ -33,6 +33,10 @@
       "description": "The name of the remote.",
       "x-prompt": "What is/should the remote be named?"
     },
+    "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`).",
       "type": "string",
@@ -41,46 +45,8 @@
     "style": {
       "description": "The file extension to be used for style files.",
       "type": "string",
-      "default": "css",
-      "alias": "s",
-      "x-prompt": {
-        "message": "Which stylesheet format would you like to use?",
-        "type": "list",
-        "items": [
-          {
-            "value": "css",
-            "label": "CSS"
-          },
-          {
-            "value": "scss",
-            "label": "SASS(.scss)       [ http://sass-lang.com                     ]"
-          },
-          {
-            "value": "less",
-            "label": "LESS              [ http://lesscss.org                       ]"
-          },
-          {
-            "value": "styled-components",
-            "label": "styled-components [ https://styled-components.com            ]"
-          },
-          {
-            "value": "@emotion/styled",
-            "label": "emotion           [ https://emotion.sh                       ]"
-          },
-          {
-            "value": "styled-jsx",
-            "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
-          },
-          {
-            "value": "styl",
-            "label": "DEPRECATD: Stylus(.styl) [ http://stylus-lang.com            ]"
-          },
-          {
-            "value": "none",
-            "label": "None"
-          }
-        ]
-      }
+      "default": "none",
+      "alias": "s"
     },
     "linter": {
       "description": "The tool to use for running lint checks.",