feat: new looks that makes important information easier to parse (#435)

* chore: more colorful UI; reinstall when incompatible update

* more changes

* update links; use relativeToCwd

* remove getInfo spinner

* include app id in build settings for android

* fix lint

* changeset

* fix lint

* simplify loader to logger

* fix test

Author: thymikee

.changeset/chatty-experts-shout.md

@@ -0,0 +1,14 @@
+---
+'@rnef/platform-apple-helpers': patch
+'@rnef/plugin-brownfield-ios': patch
+'@rnef/platform-android': patch
+'@rnef/provider-github': patch
+'@rnef/plugin-repack': patch
+'@rnef/plugin-metro': patch
+'@rnef/create-app': patch
+'@rnef/config': patch
+'@rnef/tools': patch
+'@rnef/cli': patch
+---
+
+feat: new looks that makes important information easier to parse

packages/cli/src/lib/cli.ts

@@ -2,7 +2,7 @@ import { createRequire } from 'node:module';
 import { dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { type CommandType, getConfig } from '@rnef/config';
-import { color, logger, resolveFilenameUp, RnefError } from '@rnef/tools';
+import { colorLink, logger, resolveFilenameUp, RnefError } from '@rnef/tools';
 import { Command } from 'commander';
 import { checkDeprecatedOptions } from './checkDeprecatedOptions.js';
 import { cleanPlugin } from './plugins/clean.js';
@@ -104,12 +104,12 @@ function ensureUniqueCommands(commands: CommandType[] | undefined) {
           command.name
         }" registered twice by the same "${
           command.__origin
-        }" plugin in ${color.cyan('rnef.config.mjs')} file.
+        }" plugin in ${colorLink('rnef.config.mjs')} file.
 Please declare the plugin only once.`);
       } else {
         logger.error(`Found duplicated command "${
           command.name
-        }" registered by 2 plugins in ${color.cyan('rnef.config.mjs')} file:
+        }" registered by 2 plugins in ${colorLink('rnef.config.mjs')} file:
 1. Added by "${command.__origin}" plugin
 2. Added by "${duplicate.__origin}" plugin
 Command names must be unique. Please check if you import a plugin multiple times or use incompatible plugins.`);

packages/config/src/lib/config.ts

@@ -3,7 +3,7 @@ import { createRequire } from 'node:module';
 import * as path from 'node:path';
 import { pathToFileURL } from 'node:url';
 import type { FingerprintSources, RemoteBuildCache } from '@rnef/tools';
-import { color, logger } from '@rnef/tools';
+import { colorLink, logger } from '@rnef/tools';
 import type { ValidationError } from 'joi';
 import { ConfigTypeSchema } from './schema.js';
 import { formatValidationError } from './utils.js';
@@ -67,7 +67,7 @@ export type ConfigType = {
   plugins?: PluginType[];
   platforms?: Record<string, PlatformType>;
   commands?: Array<CommandType>;
-  remoteCacheProvider?: null | 'github-actions' |(() => RemoteBuildCache);
+  remoteCacheProvider?: null | 'github-actions' | (() => RemoteBuildCache);
   fingerprint?: {
     extraSources?: string[];
     ignorePaths?: string[];
@@ -98,7 +98,9 @@ const importUp = async (
       let config: ConfigType;
 
       if (ext === '.mjs') {
-        config = await import(pathToFileURL(filePathWithExt).href).then((module) => module.default);
+        config = await import(pathToFileURL(filePathWithExt).href).then(
+          (module) => module.default
+        );
       } else {
         const require = createRequire(import.meta.url);
         config = require(filePathWithExt);
@@ -139,7 +141,7 @@ export async function getConfig(
 
   if (error) {
     logger.error(
-      `Invalid ${color.cyan(
+      `Invalid ${colorLink(
         path.relative(configDir, filePathWithExt)
       )} file:\n` + formatValidationError(config, error)
     );

packages/create-app/src/lib/utils/prompts.ts

@@ -8,11 +8,11 @@ import {
   promptMultiselect,
   promptSelect,
   promptText,
+  relativeToCwd,
   RnefError,
   type SupportedRemoteCacheProviders,
 } from '@rnef/tools';
 import { vice } from 'gradient-string';
-import path from 'path';
 import type { TemplateInfo } from '../templates.js';
 import { validateProjectName } from './project-name.js';
 import { getRnefVersion } from './version.js';
@@ -59,7 +59,7 @@ export function printByeMessage(
   pkgManager: string,
   installDeps: boolean
 ) {
-  const relativeDir = path.relative(process.cwd(), targetDir);
+  const relativeDir = relativeToCwd(targetDir);
 
   const nextSteps = [
     `cd ${relativeDir}`,

packages/platform-android/src/lib/commands/buildAndroid/__tests__/buildAndroid.test.ts

@@ -79,11 +79,7 @@ test('buildAndroid runs gradle build with correct configuration for debug and ou
   expect(spawn).toBeCalledWith('./gradlew', ['app:bundleDebug', '-x', 'lint'], {
     cwd: '/android',
   });
-  expect(spinnerMock.stop).toBeCalledWith(
-    expect.stringContaining(
-      'android/app/build/outputs/bundle/debug/app-debug.aab'
-    )
-  );
+  expect(spinnerMock.stop).toBeCalledWith('Built the app');
 });
 
 test('buildAndroid fails gracefully when gradle errors', async () => {

packages/platform-android/src/lib/commands/buildAndroid/buildAndroid.ts

@@ -1,13 +1,12 @@
-import path from 'node:path';
 import type { AndroidProjectConfig } from '@react-native-community/cli-types';
-import type { FingerprintSources } from '@rnef/tools';
 import {
-  color,
+  colorLink,
+  type FingerprintSources,
   formatArtifactName,
   logger,
   outro,
   parseArgs,
-  spinner,
+  relativeToCwd,
 } from '@rnef/tools';
 import { findOutputFile } from '../runAndroid/findOutputFile.js';
 import { runGradle } from '../runGradle.js';
@@ -42,12 +41,8 @@ export async function buildAndroid(
   const outputFilePath = await findOutputFile(androidProject, tasks);
 
   if (outputFilePath) {
-    const loader = spinner();
-    loader.start('');
-    loader.stop(
-      `Build available at: ${color.cyan(
-        path.relative(process.cwd(), outputFilePath)
-      )}`
+    logger.log(
+      `Build available at: ${colorLink(relativeToCwd(outputFilePath))}`
     );
   }
   outro('Success 🎉.');

packages/platform-android/src/lib/commands/generateKeystore.ts

@@ -4,6 +4,7 @@ import type { PluginApi } from '@rnef/config';
 import type { SubprocessError } from '@rnef/tools';
 import {
   color,
+  colorLink,
   intro,
   logger,
   outro,
@@ -78,9 +79,9 @@ async function runKeytool(androidProject: AndroidProjectConfig, args: Flags) {
       { stdio: 'inherit' }
     );
 
-    logger.success(`Keystore generated at: ${color.cyan(keystoreOutputPath)}`);
+    logger.success(`Keystore generated at: ${colorLink(keystoreOutputPath)}`);
     logger.warn(
-      `Edit the ${color.bold('~/.gradle/gradle.properties')} or ${color.bold(
+      `Edit the ${colorLink('~/.gradle/gradle.properties')} or ${colorLink(
         './android/gradle.properties'
       )} file, and add the following (replace ***** with the correct keystore password):`
     );
@@ -94,7 +95,7 @@ async function runKeytool(androidProject: AndroidProjectConfig, args: Flags) {
     );
   } catch (error) {
     throw new RnefError(
-      `Failed to generate keystore. Please try manually by following instructions at: ${color.cyan(
+      `Failed to generate keystore. Please try manually by following instructions at: ${colorLink(
         'https://reactnative.dev/docs/signed-apk-android'
       )}`,
       { cause: (error as SubprocessError).stderr }

packages/platform-android/src/lib/commands/runAndroid/listAndroidUsers.ts

@@ -1,4 +1,4 @@
-import { promptSelect, spawn, spinner } from '@rnef/tools';
+import { logger, promptSelect, spawn } from '@rnef/tools';
 import { getAdbPath } from './adb.js';
 
 type User = {
@@ -13,14 +13,12 @@ const regex = new RegExp(
 export async function checkUsers(device: string): Promise<User[]> {
   const adbPath = getAdbPath();
   const adbArgs = ['-s', device, 'shell', 'pm', 'list', 'users'];
-  const loader = spinner();
-  loader.start(`Checking users on "${device}"`);
 
   try {
     const { stdout, stderr } = await spawn(adbPath, adbArgs, { stdio: 'pipe' });
 
     if (stderr) {
-      loader.stop(`Failed to check users of "${device}". ${stderr}`, 1);
+      logger.debug(`Failed to check users on the device. ${stderr}`, 1);
       return [];
     }
 
@@ -34,11 +32,10 @@ export async function checkUsers(device: string): Promise<User[]> {
       }
     }
 
-    loader.stop(`Found ${users.length} users on "${device}".`);
     return users;
   } catch (error) {
-    loader.stop(
-      `Unexpected error while checking users of "${device}". Continuing without user selection. Error details: ${
+    logger.debug(
+      `Unexpected error while checking users on the device. Continuing without user selection. Error details: ${
         (error as { message: string }).message
       }.`,
       1

packages/platform-android/src/lib/commands/runAndroid/runAndroid.ts

@@ -6,6 +6,7 @@ import type {
 } from '@react-native-community/cli-types';
 import type { FingerprintSources, RemoteBuildCache } from '@rnef/tools';
 import {
+  color,
   fetchCachedBuild,
   formatArtifactName,
   getLocalBuildCacheBinaryPath,
@@ -15,6 +16,7 @@ import {
   outro,
   promptSelect,
   RnefError,
+  spinner,
 } from '@rnef/tools';
 import type { BuildFlags } from '../buildAndroid/buildAndroid.js';
 import { options } from '../buildAndroid/buildAndroid.js';
@@ -105,14 +107,7 @@ export async function runAndroid(
       if (!binaryPath) {
         await runGradle({ tasks, androidProject, args, artifactName });
       }
-      await tryInstallAppOnDevice(
-        device,
-        androidProject,
-        args,
-        tasks,
-        binaryPath
-      );
-      await tryLaunchAppOnDevice(device, androidProject, args);
+      await runOnDevice({ device, androidProject, args, tasks, binaryPath });
     }
   } else {
     if ((await getDevices()).length === 0) {
@@ -131,14 +126,7 @@ export async function runAndroid(
     }
 
     for (const device of await listAndroidDevices()) {
-      await tryInstallAppOnDevice(
-        device,
-        androidProject,
-        args,
-        tasks,
-        binaryPath
-      );
-      await tryLaunchAppOnDevice(device, androidProject, args);
+      await runOnDevice({ device, androidProject, args, tasks, binaryPath });
     }
   }
 
@@ -239,6 +227,41 @@ async function promptForDeviceSelection(
   return selected;
 }
 
+async function runOnDevice({
+  device,
+  androidProject,
+  args,
+  tasks,
+  binaryPath,
+}: {
+  device: DeviceData;
+  androidProject: AndroidProject;
+  args: Flags;
+  tasks: string[];
+  binaryPath: string | undefined;
+}) {
+  const loader = spinner();
+  loader.start('Installing the app');
+  await tryInstallAppOnDevice(device, androidProject, args, tasks, binaryPath);
+  loader.message('Launching the app');
+  const { applicationIdWithSuffix } = await tryLaunchAppOnDevice(
+    device,
+    androidProject,
+    args
+  );
+  if (applicationIdWithSuffix) {
+    loader.stop(
+      `Installed and launched the app on ${color.bold(device.readableName)}`
+    );
+  } else {
+    loader.stop(
+      `Failed: installing and launching the app on ${color.bold(
+        device.readableName
+      )}`
+    );
+  }
+}
+
 export const runOptions = [
   ...options,
   {

packages/platform-android/src/lib/commands/runAndroid/tryInstallAppOnDevice.ts

@@ -1,8 +1,8 @@
 import {
+  color,
   logger,
   RnefError,
   spawn,
-  spinner,
   type SubprocessError,
 } from '@rnef/tools';
 import { getAdbPath } from './adb.js';
@@ -18,7 +18,7 @@ export async function tryInstallAppOnDevice(
   tasks: string[],
   binaryPath: string | undefined
 ) {
-  let deviceId;
+  let deviceId: string;
   if (!device.deviceId) {
     logger.debug(
       `No device with id "${device.deviceId}", skipping launching the app.`
@@ -27,6 +27,7 @@ export async function tryInstallAppOnDevice(
   } else {
     deviceId = device.deviceId;
   }
+  logger.debug(`Connected to device ${color.bold(device.readableName)}`);
   let pathToApk: string;
   if (!binaryPath) {
     const outputFilePath = await findOutputFile(
@@ -55,45 +56,37 @@ export async function tryInstallAppOnDevice(
   adbArgs.push(pathToApk);
 
   const adbPath = getAdbPath();
-  const loader = spinner();
-  loader.start(
-    `Installing the app on ${device.readableName} (id: ${deviceId})`
-  );
   try {
-    await spawn(adbPath, adbArgs);
-    loader.stop(
-      `Installed the app on ${device.readableName} (id: ${deviceId}).`
-    );
+    await spawn(adbPath, adbArgs, { stdio: 'pipe' });
   } catch (error) {
+    logger.debug(`Failed: Installing the app`, error);
     const errorMessage =
       (error as SubprocessError).stderr || (error as SubprocessError).stdout;
-    if (errorMessage.includes('INSTALL_FAILED_INSUFFICIENT_STORAGE')) {
+    const isInsufficientStorage = errorMessage.includes(
+      'INSTALL_FAILED_INSUFFICIENT_STORAGE'
+    );
+    const isUpdateIncompatible = errorMessage.includes(
+      'INSTALL_FAILED_UPDATE_INCOMPATIBLE'
+    );
+    if (isInsufficientStorage || isUpdateIncompatible) {
       try {
-        loader.message('Trying to install again due to insufficient storage');
-        const appId = args.appId ?? androidProject.applicationId;
+        const message = isInsufficientStorage
+          ? 'Recovery: Trying to re-install the app due to insufficient storage'
+          : 'Recovery: Trying to re-install the app due to binary incompatibility';
+        logger.debug(message);
+        const appId = args.appId || androidProject.applicationId;
         await spawn(adbPath, ['-s', deviceId, 'uninstall', appId]);
         await spawn(adbPath, adbArgs);
-        loader.stop(
-          `Installed the app on ${device.readableName} (id: ${deviceId}).`
-        );
+        logger.debug(`Recovery: Re-installed the app`);
         return;
       } catch (error) {
-        loader.stop(
-          `Failed: Uninstalling and installing the app on ${device.readableName} (id: ${deviceId})`,
-          1
-        );
         const errorMessage =
           (error as SubprocessError).stderr ||
           (error as SubprocessError).stdout;
-        throw new RnefError(
-          `The "adb" command failed with: ${errorMessage}. \nPlease uninstall the app manually and try again.`
-        );
+        throw new RnefError(`The "adb" command failed with: ${errorMessage}.`);
       }
     }
-    loader.stop(
-      `Failed: Installing the app on ${device.readableName} (id: ${deviceId})`,
-      1
-    );
+
     throw new RnefError(`The "adb" command failed with: ${errorMessage}.`);
   }
 }