feat(core): add an option to seperate the output of show with provide… (

#23172)

Co-authored-by: Craigory Coppola <craigorycoppola@gmail.com>

docs/generated/cli/show.md

@@ -145,6 +145,12 @@ Type: `string`
 
 Show only projects that match a given pattern.
 
+##### sep
+
+Type: `string`
+
+Outputs projects with the specified seperator
+
 ##### type
 
 Type: `string`

docs/generated/packages/nx/documents/show.md

@@ -145,6 +145,12 @@ Type: `string`
 
 Show only projects that match a given pattern.
 
+##### sep
+
+Type: `string`
+
+Outputs projects with the specified seperator
+
 ##### type
 
 Type: `string`

packages/nx/src/command-line/show/command-object.ts

@@ -12,17 +12,18 @@ export interface NxShowArgs {
 }
 
 export type ShowProjectsOptions = NxShowArgs & {
-  exclude: string;
-  files: string;
-  uncommitted: any;
-  untracked: any;
-  base: string;
-  head: string;
-  affected: boolean;
-  type: ProjectGraphProjectNode['type'];
-  projects: string[];
-  withTarget: string[];
-  verbose: boolean;
+  exclude?: string[];
+  files?: string;
+  uncommitted?: any;
+  untracked?: any;
+  base?: string;
+  head?: string;
+  affected?: boolean;
+  type?: ProjectGraphProjectNode['type'];
+  projects?: string[];
+  withTarget?: string[];
+  verbose?: boolean;
+  sep?: string;
 };
 
 export type ShowProjectOptions = NxShowArgs & {
@@ -90,11 +91,17 @@ const showProjectsCommand: CommandModule<NxShowArgs, ShowProjectsOptions> = {
         description: 'Select only projects of the given type',
         choices: ['app', 'lib', 'e2e'],
       })
+      .option('sep', {
+        type: 'string',
+        description: 'Outputs projects with the specified seperator',
+      })
       .implies('untracked', 'affected')
       .implies('uncommitted', 'affected')
       .implies('files', 'affected')
       .implies('base', 'affected')
       .implies('head', 'affected')
+      .conflicts('sep', 'json')
+      .conflicts('json', 'sep')
       .example(
         '$0 show projects --projects "apps/*"',
         'Show all projects in the apps directory'
@@ -119,7 +126,9 @@ const showProjectsCommand: CommandModule<NxShowArgs, ShowProjectsOptions> = {
     return handleErrors(
       args.verbose ?? process.env.NX_VERBOSE_LOGGING === 'true',
       async () => {
-        return (await import('./show')).showProjectsHandler(args);
+        const { showProjectsHandler } = await import('./projects');
+        await showProjectsHandler(args);
+        process.exit(0);
       }
     );
   },
@@ -145,21 +154,23 @@ const showProjectCommand: CommandModule<NxShowArgs, ShowProjectOptions> = {
         description:
           'Prints additional information about the commands (e.g., stack traces)',
       })
-      .check((argv) => {
-        if (argv.web) {
-          argv.json = false;
-        }
-        return true;
-      })
+      .conflicts('json', 'web')
+      .conflicts('web', 'json')
       .example(
         '$0 show project my-app',
         'View project information for my-app in JSON format'
+      )
+      .example(
+        '$0 show project my-app --web',
+        'View project information for my-app in the browser'
       ),
   handler: (args) => {
     return handleErrors(
       args.verbose ?? process.env.NX_VERBOSE_LOGGING === 'true',
       async () => {
-        return (await import('./show')).showProjectHandler(args);
+        const { showProjectHandler } = await import('./project');
+        await showProjectHandler(args);
+        process.exit(0);
       }
     );
   },

packages/nx/src/command-line/show/project.ts

@@ -0,0 +1,67 @@
+import { output } from '../../utils/output';
+import { createProjectGraphAsync } from '../../project-graph/project-graph';
+import { ShowProjectOptions } from './command-object';
+import { generateGraph } from '../graph/graph';
+
+export async function showProjectHandler(
+  args: ShowProjectOptions
+): Promise<void> {
+  const graph = await createProjectGraphAsync();
+  const node = graph.nodes[args.projectName];
+  if (!node) {
+    console.log(`Could not find project ${args.projectName}`);
+    process.exit(1);
+  }
+  if (args.json) {
+    console.log(JSON.stringify(node.data));
+  } else if (args.web) {
+    await generateGraph(
+      {
+        view: 'project-details',
+        focus: node.name,
+        watch: true,
+        open: true,
+      },
+      []
+    );
+  } else {
+    const chalk = require('chalk') as typeof import('chalk');
+    const logIfExists = (label, key: keyof typeof node['data']) => {
+      if (node.data[key]) {
+        console.log(`${chalk.bold(label)}: ${node.data[key]}`);
+      }
+    };
+
+    logIfExists('Name', 'name');
+    logIfExists('Root', 'root');
+    logIfExists('Source Root', 'sourceRoot');
+    logIfExists('Tags', 'tags');
+    logIfExists('Implicit Dependencies', 'implicitDependencies');
+
+    const targets = Object.entries(node.data.targets ?? {});
+    const maxTargetNameLength = Math.max(...targets.map(([t]) => t.length));
+    const maxExecutorNameLength = Math.max(
+      ...targets.map(([, t]) => t?.executor?.length ?? 0)
+    );
+
+    if (targets.length > 0) {
+      console.log(`${chalk.bold('Targets')}: `);
+      for (const [target, targetConfig] of targets) {
+        console.log(
+          `- ${chalk.bold((target + ':').padEnd(maxTargetNameLength + 2))} ${(
+            targetConfig?.executor ?? ''
+          ).padEnd(maxExecutorNameLength + 2)} ${(() => {
+            const configurations = Object.keys(
+              targetConfig.configurations ?? {}
+            );
+            if (configurations.length) {
+              return chalk.dim(configurations.join(', '));
+            }
+            return '';
+          })()}`
+        );
+      }
+    }
+  }
+  await output.drain();
+}