cleanup(react-native): migrate react-native to picocolors (#29566)

packages/react-native/.eslintrc.json

@@ -52,6 +52,10 @@
           {
             "name": "fs-extra",
             "message": "Please use equivalent utilities from `node:fs` instead."
+          },
+          {
+            "name": "chalk",
+            "message": "Please use `picocolors` in place of `chalk` for rendering terminal colors"
           }
         ]
       }

packages/react-native/package.json

@@ -27,13 +27,13 @@
   "types": "index.d.ts",
   "dependencies": {
     "ajv": "^8.12.0",
-    "chalk": "^4.1.0",
     "enhanced-resolve": "^5.8.3",
     "glob": "7.1.4",
     "ignore": "^5.0.4",
     "metro-config": "~0.80.4",
     "metro-resolver": "~0.80.4",
     "node-fetch": "^2.6.7",
+    "picocolors": "^1.1.0",
     "tsconfig-paths": "^4.1.2",
     "tslib": "^2.3.0",
     "@nx/devkit": "file:../devkit",

packages/react-native/plugins/metro-resolver.ts

@@ -1,7 +1,7 @@
 import * as metroResolver from 'metro-resolver';
 import type { MatchPath } from 'tsconfig-paths';
 import { createMatchPath, loadConfig } from 'tsconfig-paths';
-import * as chalk from 'chalk';
+import * as pc from 'picocolors';
 import { CachedInputFileSystem, ResolverFactory } from 'enhanced-resolve';
 import { dirname, join } from 'path';
 import * as fs from 'fs';
@@ -56,10 +56,10 @@ export function getResolveRequest(
     }
     if (debug) {
       console.log(
-        chalk.red(`[Nx] Unable to resolve with any resolver: ${realModuleName}`)
+        pc.red(`[Nx] Unable to resolve with any resolver: ${realModuleName}`)
       );
     }
-    throw new Error(`Cannot resolve ${chalk.bold(realModuleName)}`);
+    throw new Error(`Cannot resolve ${pc.bold(realModuleName)}`);
   };
 }
 
@@ -75,7 +75,7 @@ function resolveRequestFromContext(
   } catch {
     if (debug)
       console.log(
-        chalk.cyan(
+        pc.cyan(
           `[Nx] Unable to resolve with default resolveRequest: ${realModuleName}`
         )
       );
@@ -97,7 +97,7 @@ function defaultMetroResolver(
   } catch {
     if (debug)
       console.log(
-        chalk.cyan(
+        pc.cyan(
           `[Nx] Unable to resolve with default Metro resolver: ${realModuleName}`
         )
       );
@@ -131,7 +131,7 @@ function pnpmResolver(
   } catch {
     if (debug)
       console.log(
-        chalk.cyan(
+        pc.cyan(
           `[Nx] Unable to resolve with default PNPM resolver: ${realModuleName}`
         )
       );
@@ -160,12 +160,10 @@ function tsconfigPathsResolver(
     return metroResolver.resolve(context, match, platform);
   } catch {
     if (debug) {
+      console.log(pc.cyan(`[Nx] Failed to resolve ${pc.bold(realModuleName)}`));
       console.log(
-        chalk.cyan(`[Nx] Failed to resolve ${chalk.bold(realModuleName)}`)
+        pc.cyan(
-      );
+          `[Nx] The following tsconfig paths was used:\n:${pc.bold(
-      console.log(
-        chalk.cyan(
-          `[Nx] The following tsconfig paths was used:\n:${chalk.bold(
             JSON.stringify(paths, null, 2)
           )}`
         )
@@ -186,11 +184,11 @@ function getMatcher(debug: boolean) {
       paths = result.paths;
       if (debug) {
         console.log(
-          chalk.cyan(`[Nx] Located tsconfig at ${chalk.bold(absoluteBaseUrl)}`)
+          pc.cyan(`[Nx] Located tsconfig at ${pc.bold(absoluteBaseUrl)}`)
         );
         console.log(
-          chalk.cyan(
+          pc.cyan(
-            `[Nx] Found the following paths:\n:${chalk.bold(
+            `[Nx] Found the following paths:\n:${pc.bold(
               JSON.stringify(paths, null, 2)
             )}`
           )
@@ -198,7 +196,7 @@ function getMatcher(debug: boolean) {
       }
       matcher = createMatchPath(absoluteBaseUrl, paths);
     } else {
-      console.log(chalk.cyan(`[Nx] Failed to locate tsconfig}`));
+      console.log(pc.cyan(`[Nx] Failed to locate tsconfig}`));
       throw new Error(`Could not load tsconfig for project`);
     }
   }

packages/react-native/src/executors/storybook/storybook.impl.ts

@@ -2,7 +2,7 @@ import { writeFileSync } from 'node:fs';
 import { join, relative, resolve, dirname } from 'path';
 import { ExecutorContext, logger, readJsonFile } from '@nx/devkit';
 import { fileExists } from '@nx/workspace/src/utilities/fileutils';
-import * as chalk from 'chalk';
+import * as pc from 'picocolors';
 import { sync as globSync } from 'glob';
 
 import { ReactNativeStorybookOptions } from './schema';
@@ -25,8 +25,8 @@ export default async function* reactNativeStorybookExecutor(
   const projectRoot =
     context.projectsConfigurations.projects[context.projectName].root;
   logger.info(
-    `${chalk.bold.cyan(
+    `${pc.bold(
-      'info'
+      pc.cyan('info')
     )} To see your Storybook stories on the device, you should start your mobile app for the <platform> of your choice (typically ios or android).`
   );
 
@@ -78,7 +78,7 @@ export function runCliStorybook(
   });
 
   if (storiesFiles.length === 0) {
-    logger.warn(`${chalk.bold.yellow('warn')} No stories found.`);
+    logger.warn(`${pc.bold(pc.yellow('warn'))} No stories found.`);
   }
 
   const newContents = `// Auto-generated file created by nx

packages/react-native/src/executors/sync-deps/sync-deps.impl.ts

@@ -1,5 +1,5 @@
 import { join } from 'path';
-import * as chalk from 'chalk';
+import * as pc from 'picocolors';
 import {
   ExecutorContext,
   ProjectGraph,
@@ -126,14 +126,14 @@ export function displayNewlyAddedDepsMessage(
   deps: string[]
 ) {
   if (deps.length > 0) {
-    logger.info(`${chalk.bold.cyan(
+    logger.info(`${pc.bold(
-      'info'
+      pc.cyan('info')
     )} Added entries to 'package.json' for '${projectName}' (for autolink):
-  ${deps.map((d) => chalk.bold.cyan(`"${d}": "*"`)).join('\n  ')}`);
+  ${deps.map((d) => pc.bold(pc.cyan(`"${d}": "*"`))).join('\n  ')}`);
   } else {
     logger.info(
-      `${chalk.bold.cyan(
+      `${pc.bold(
-        'info'
+        pc.cyan('info')
       )} Dependencies for '${projectName}' are up to date! No changes made.`
     );
   }

packages/react-native/src/utils/pod-install-task.ts

@@ -2,18 +2,18 @@ import { execSync } from 'child_process';
 import { existsSync } from 'node:fs';
 import { platform } from 'os';
 import { join } from 'path';
-import * as chalk from 'chalk';
+import * as pc from 'picocolors';
 import { GeneratorCallback, logger } from '@nx/devkit';
 
 const podInstallErrorMessage = `
-Running ${chalk.bold('pod install')} failed, see above.
+Running ${pc.bold('pod install')} failed, see above.
 Do you have CocoaPods (https://cocoapods.org/) installed?
 
 Check that your XCode path is correct:
-${chalk.bold('sudo xcode-select --print-path')}
+${pc.bold('sudo xcode-select --print-path')}
 
 If the path is wrong, switch the path: (your path may be different)
-${chalk.bold('sudo xcode-select --switch /Applications/Xcode.app')}
+${pc.bold('sudo xcode-select --switch /Applications/Xcode.app')}
 `;
 
 /**