Replace and remove optional dep on cli-tools logger

Summary:
(Further refactors to logging after D63255296.)

Fully decouples `community-cli-plugin` from the unlisted optional dependency on `react-native-community/cli-tools'`. This is motivated by changes in facebook#46627 which switch to using Metro's `TerminalReporter` API for emitting logs safely.

- Swaps out logs in the dev server for the `unstable_server_log` Metro reporter event.
- Swaps out `logger.debug()` calls for the `debug` package, currently used by Metro and `dev-middleware`.
- Swaps out other logs in the `bundle` command for `console`.
- (Also specify missing `semver` dep.)

Changelog: [Internal]

Reviewed By: hoxyq

Differential Revision: D63328268

Author: huntie

packages/community-cli-plugin/package.json

@@ -25,12 +25,14 @@
     "@react-native/dev-middleware": "0.77.0-main",
     "@react-native/metro-babel-transformer": "0.77.0-main",
     "chalk": "^4.0.0",
+    "debug": "^2.2.0",
     "invariant": "^2.2.4",
     "metro": "^0.81.0-alpha.2",
     "metro-config": "^0.81.0-alpha.2",
     "metro-core": "^0.81.0-alpha.2",
     "node-fetch": "^2.2.0",
-    "readline": "^1.3.0"
+    "readline": "^1.3.0",
+    "semver": "^7.1.3"
   },
   "devDependencies": {
     "metro-resolver": "^0.81.0-alpha.2"

packages/community-cli-plugin/src/commands/bundle/buildBundle.js

@@ -14,7 +14,6 @@ import type {ConfigT} from 'metro-config';
 import type {RequestOptions} from 'metro/src/shared/types.flow';
 
 import loadMetroConfig from '../../utils/loadMetroConfig';
-import {logger} from '../../utils/logger';
 import parseKeyValueParamArray from '../../utils/parseKeyValueParamArray';
 import saveAssets from './saveAssets';
 import chalk from 'chalk';
@@ -72,13 +71,13 @@ async function buildBundleWithConfig(
   );
 
   if (config.resolver.platforms.indexOf(args.platform) === -1) {
-    logger.error(
-      `Invalid platform ${
+    console.error(
+      `${chalk.red('error')}: Invalid platform ${
         args.platform ? `"${chalk.bold(args.platform)}" ` : ''
       }selected.`,
     );
 
-    logger.info(
+    console.info(
       `Available platforms are: ${config.resolver.platforms
         .map(x => `"${chalk.bold(x)}"`)
         .join(
@@ -123,7 +122,7 @@ async function buildBundleWithConfig(
     // $FlowIgnore[incompatible-call]
     // $FlowIgnore[prop-missing]
     // $FlowIgnore[incompatible-exact]
-    await bundleImpl.save(bundle, args, logger.info);
+    await bundleImpl.save(bundle, args, console.info);
 
     // Save the assets of the bundle
     const outputAssets = await server.getAssets({

packages/community-cli-plugin/src/commands/bundle/saveAssets.js

@@ -11,7 +11,6 @@
 
 import type {AssetData} from 'metro/src/Assets';
 
-import {logger} from '../../utils/logger';
 import {
   cleanAssetCatalog,
   getImageSet,
@@ -21,6 +20,7 @@ import {
 import filterPlatformAssetScales from './filterPlatformAssetScales';
 import getAssetDestPathAndroid from './getAssetDestPathAndroid';
 import getAssetDestPathIOS from './getAssetDestPathIOS';
+import chalk from 'chalk';
 import fs from 'fs';
 import path from 'path';
 
@@ -35,7 +35,7 @@ async function saveAssets(
   assetCatalogDest?: string,
 ): Promise<void> {
   if (assetsDest == null) {
-    logger.warn('Assets destination folder is not set, skipping...');
+    console.warn('Warning: Assets destination folder is not set, skipping...');
     return;
   }
 
@@ -64,13 +64,13 @@ async function saveAssets(
     // remove unused scales from the optimized bundle.
     const catalogDir = path.join(assetCatalogDest, 'RNAssets.xcassets');
     if (!fs.existsSync(catalogDir)) {
-      logger.error(
-        `Could not find asset catalog 'RNAssets.xcassets' in ${assetCatalogDest}. Make sure to create it if it does not exist.`,
+      console.error(
+        `${chalk.red('error')}: Could not find asset catalog 'RNAssets.xcassets' in ${assetCatalogDest}. Make sure to create it if it does not exist.`,
       );
       return;
     }
 
-    logger.info('Adding images to asset catalog', catalogDir);
+    console.info('Adding images to asset catalog', catalogDir);
     cleanAssetCatalog(catalogDir);
     for (const asset of assets) {
       if (isCatalogAsset(asset)) {
@@ -84,7 +84,7 @@ async function saveAssets(
         addAssetToCopy(asset);
       }
     }
-    logger.info('Done adding images to asset catalog');
+    console.info('Done adding images to asset catalog');
   } else {
     assets.forEach(addAssetToCopy);
   }
@@ -98,15 +98,15 @@ function copyAll(filesToCopy: CopiedFiles) {
     return Promise.resolve();
   }
 
-  logger.info(`Copying ${queue.length} asset files`);
+  console.info(`Copying ${queue.length} asset files`);
   return new Promise<void>((resolve, reject) => {
     const copyNext = (error?: Error) => {
       if (error) {
         reject(error);
         return;
       }
       if (queue.length === 0) {
-        logger.info('Done copying assets');
+        console.info('Done copying assets');
         resolve();
       } else {
         // queue.length === 0 is checked in previous branch, so this is string

packages/community-cli-plugin/src/commands/start/attachKeyHandlers.js

@@ -12,7 +12,6 @@
 import type {Config} from '@react-native-community/cli-types';
 import type TerminalReporter from 'metro/src/lib/TerminalReporter';
 
-import {logger} from '../../utils/logger';
 import OpenDebuggerKeyboardHandler from './OpenDebuggerKeyboardHandler';
 import chalk from 'chalk';
 import {spawn} from 'child_process';
@@ -62,15 +61,23 @@ export default function attachKeyHandlers({
   reporter: TerminalReporter,
 }) {
   if (process.stdin.isTTY !== true) {
-    logger.debug('Interactive mode is not supported in this environment');
+    reporter.update({
+      type: 'unstable_server_log',
+      level: 'info',
+      data: 'Interactive mode is not supported in this environment',
+    });
     return;
   }
 
   readline.emitKeypressEvents(process.stdin);
   setRawMode(true);
 
   const reload = throttle(() => {
-    logger.info('Reloading connected app(s)...');
+    reporter.update({
+      type: 'unstable_server_log',
+      level: 'info',
+      data: 'Reloading connected app(s)...',
+    });
     messageSocket.broadcast('reload', null);
   }, RELOAD_TIMEOUT);
 
@@ -80,8 +87,6 @@ export default function attachKeyHandlers({
   });
 
   process.stdin.on('keypress', (str: string, key: KeyEvent) => {
-    logger.debug(`Key pressed: ${key.sequence}`);
-
     if (openDebuggerKeyboardHandler.maybeHandleTargetSelection(key.name)) {
       return;
     }
@@ -91,11 +96,19 @@ export default function attachKeyHandlers({
         reload();
         break;
       case 'd':
-        logger.info('Opening Dev Menu...');
+        reporter.update({
+          type: 'unstable_server_log',
+          level: 'info',
+          data: 'Opening Dev Menu...',
+        });
         messageSocket.broadcast('devMenu', null);
         break;
       case 'i':
-        logger.info('Opening app on iOS...');
+        reporter.update({
+          type: 'unstable_server_log',
+          level: 'info',
+          data: 'Opening app on iOS...',
+        });
         spawn(
           'npx',
           [
@@ -107,7 +120,11 @@ export default function attachKeyHandlers({
         ).stdout?.pipe(process.stdout);
         break;
       case 'a':
-        logger.info('Opening app on Android...');
+        reporter.update({
+          type: 'unstable_server_log',
+          level: 'info',
+          data: 'Opening app on Android...',
+        });
         spawn(
           'npx',
           [
@@ -125,25 +142,30 @@ export default function attachKeyHandlers({
       case CTRL_C:
       case CTRL_D:
         openDebuggerKeyboardHandler.dismiss();
-        logger.info('Stopping server');
+        reporter.update({
+          type: 'unstable_server_log',
+          level: 'info',
+          data: 'Stopping server',
+        });
         setRawMode(false);
         process.stdin.pause();
         process.emit('SIGINT');
         process.exit();
     }
   });
 
-  logger.log(
-    [
-      '',
-      `${chalk.bold('i')} - run on iOS`,
-      `${chalk.bold('a')} - run on Android`,
-      `${chalk.bold('r')} - reload app`,
-      `${chalk.bold('d')} - open Dev Menu`,
-      `${chalk.bold('j')} - open DevTools`,
-      '',
-    ].join('\n'),
-  );
+  reporter.update({
+    type: 'unstable_server_log',
+    level: 'info',
+    data: `Key commands available:
+
+  ${chalk.bold('i')} - run on iOS
+  ${chalk.bold('a')} - run on Android
+  ${chalk.bold('r')} - reload app(s)
+  ${chalk.bold('d')} - open Dev Menu
+  ${chalk.bold('j')} - open DevTools
+`,
+  });
 }
 
 function setRawMode(enable: boolean) {

packages/community-cli-plugin/src/commands/start/middleware.js

@@ -12,7 +12,7 @@
 import type {NextHandleFunction, Server} from 'connect';
 import type {TerminalReportableEvent} from 'metro/src/lib/TerminalReporter';
 
-import {logger} from '../../utils/logger';
+const debug = require('debug')('ReactNative:CommunityCliPlugin');
 
 type MiddlewareReturn = {
   middleware: Server,
@@ -71,7 +71,7 @@ try {
   communityMiddlewareFallback.createDevServerMiddleware =
     community.createDevServerMiddleware;
 } catch {
-  logger.debug(`⚠️ Unable to find @react-native-community/cli-server-api
+  debug(`⚠️ Unable to find @react-native-community/cli-server-api
 Starting the server without the community middleware.`);
 }
 

packages/community-cli-plugin/src/commands/start/runServer.js

@@ -14,9 +14,9 @@ import type {Reporter} from 'metro/src/lib/reporting';
 import type {TerminalReportableEvent} from 'metro/src/lib/TerminalReporter';
 import typeof TerminalReporter from 'metro/src/lib/TerminalReporter';
 
+import createDevMiddlewareLogger from '../../utils/createDevMiddlewareLogger';
 import isDevServerRunning from '../../utils/isDevServerRunning';
 import loadMetroConfig from '../../utils/loadMetroConfig';
-import {logger} from '../../utils/logger';
 import * as version from '../../utils/version';
 import attachKeyHandlers from './attachKeyHandlers';
 import {
@@ -72,24 +72,24 @@ async function runServer(
   const protocol = args.https === true ? 'https' : 'http';
   const devServerUrl = url.format({protocol, hostname, port});
 
-  logger.info(`Welcome to React Native v${ctx.reactNativeVersion}`);
+  console.info(`Welcome to React Native v${ctx.reactNativeVersion}`);
 
   const serverStatus = await isDevServerRunning(devServerUrl, projectRoot);
 
   if (serverStatus === 'matched_server_running') {
-    logger.info(
+    console.info(
       `A dev server is already running for this project on port ${port}. Exiting.`,
     );
     return;
   } else if (serverStatus === 'port_taken') {
-    logger.error(
-      `Another process is running on port ${port}. Please terminate this ` +
+    console.error(
+      `${chalk.red('error')}: Another process is running on port ${port}. Please terminate this ` +
         'process and try again, or use another port with "--port".',
     );
     return;
   }
 
-  logger.info(`Starting dev server on port ${chalk.bold(String(port))}...`);
+  console.info(`Starting dev server on port ${chalk.bold(String(port))}...`);
 
   if (args.assetPlugins) {
     // $FlowIgnore[cannot-write] Assigning to readonly property
@@ -98,6 +98,11 @@ async function runServer(
     );
   }
 
+  let reportEvent: (event: TerminalReportableEvent) => void;
+  const terminal = new Terminal(process.stdout);
+  const ReporterImpl = getReporterImpl(args.customLogReporterPath);
+  const terminalReporter = new ReporterImpl(terminal);
+
   const {
     middleware: communityMiddleware,
     websocketEndpoints: communityWebsocketEndpoints,
@@ -111,21 +116,21 @@ async function runServer(
   const {middleware, websocketEndpoints} = createDevMiddleware({
     projectRoot,
     serverBaseUrl: devServerUrl,
-    logger,
+    logger: createDevMiddlewareLogger(terminalReporter),
   });
 
-  let reportEvent: (event: TerminalReportableEvent) => void;
-  const terminal = new Terminal(process.stdout);
-  const ReporterImpl = getReporterImpl(args.customLogReporterPath);
-  const terminalReporter = new ReporterImpl(terminal);
   const reporter: Reporter = {
     update(event: TerminalReportableEvent) {
       terminalReporter.update(event);
       if (reportEvent) {
         reportEvent(event);
       }
       if (args.interactive && event.type === 'initialize_done') {
-        logger.info('Dev server ready');
+        terminalReporter.update({
+          type: 'unstable_server_log',
+          level: 'info',
+          data: 'Dev server ready',
+        });
         attachKeyHandlers({
           cliConfig: ctx,
           devServerUrl,
@@ -168,7 +173,7 @@ async function runServer(
   //
   serverInstance.keepAliveTimeout = 30000;
 
-  await version.logIfUpdateAvailable(ctx.root);
+  await version.logIfUpdateAvailable(ctx.root, terminalReporter);
 }
 
 function getReporterImpl(customLogReporterPath?: string): TerminalReporter {

packages/community-cli-plugin/src/utils/createDevMiddlewareLogger.js

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ * @oncall react_native
+ */
+
+import type TerminalReporter from 'metro/src/lib/TerminalReporter';
+
+type LoggerFn = (...message: $ReadOnlyArray<string>) => void;
+
+/**
+ * Create a dev-middleware logger object that will emit logs via Metro's
+ * terminal reporter.
+ */
+export default function createDevMiddlewareLogger(
+  reporter: TerminalReporter,
+): $ReadOnly<{
+  info: LoggerFn,
+  error: LoggerFn,
+  warn: LoggerFn,
+}> {
+  return {
+    info: makeLogger(reporter, 'info'),
+    warn: makeLogger(reporter, 'warn'),
+    error: makeLogger(reporter, 'error'),
+  };
+}
+
+function makeLogger(
+  reporter: TerminalReporter,
+  level: 'info' | 'warn' | 'error',
+): LoggerFn {
+  return (...data: Array<mixed>) =>
+    reporter.update({
+      type: 'unstable_server_log',
+      level,
+      data,
+    });
+}