diff --git a/packages/react-native/.eslintrc.json b/packages/react-native/.eslintrc.json index 304a566e30..3223d26f3c 100644 --- a/packages/react-native/.eslintrc.json +++ b/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" } ] } diff --git a/packages/react-native/package.json b/packages/react-native/package.json index c9c430008f..829a027d49 100644 --- a/packages/react-native/package.json +++ b/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", diff --git a/packages/react-native/plugins/metro-resolver.ts b/packages/react-native/plugins/metro-resolver.ts index 1ba2779331..486c67e427 100644 --- a/packages/react-native/plugins/metro-resolver.ts +++ b/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)}`) - ); - console.log( - chalk.cyan( - `[Nx] The following tsconfig paths was used:\n:${chalk.bold( + pc.cyan( + `[Nx] The following tsconfig paths was used:\n:${pc.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( - `[Nx] Found the following paths:\n:${chalk.bold( + pc.cyan( + `[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`); } } diff --git a/packages/react-native/src/executors/storybook/storybook.impl.ts b/packages/react-native/src/executors/storybook/storybook.impl.ts index e30bfb20f6..16ec66c79a 100644 --- a/packages/react-native/src/executors/storybook/storybook.impl.ts +++ b/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( - 'info' + `${pc.bold( + pc.cyan('info') )} To see your Storybook stories on the device, you should start your mobile app for the 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 diff --git a/packages/react-native/src/executors/sync-deps/sync-deps.impl.ts b/packages/react-native/src/executors/sync-deps/sync-deps.impl.ts index dbb7dcde76..e336617d7d 100644 --- a/packages/react-native/src/executors/sync-deps/sync-deps.impl.ts +++ b/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( - 'info' + logger.info(`${pc.bold( + 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( - 'info' + `${pc.bold( + pc.cyan('info') )} Dependencies for '${projectName}' are up to date! No changes made.` ); } diff --git a/packages/react-native/src/utils/pod-install-task.ts b/packages/react-native/src/utils/pod-install-task.ts index 81f61f5436..cdf74814a1 100644 --- a/packages/react-native/src/utils/pod-install-task.ts +++ b/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')} `; /**