feat: add verbose and interactive options, display compact progress

Author: Murat Mehmet

src/__tests__/unit/integrate.spec.ts

@@ -15,6 +15,7 @@ const mockParseConfig = jest.spyOn(
 import path from 'path';
 import { Constants } from '../../constants';
 import { integrate } from '../../integrate';
+import { options } from '../../options';
 import { mockPrompter, writeMockProject } from '../mocks/mockAll';
 
 describe('integrate', () => {
@@ -199,6 +200,7 @@ describe('integrate', () => {
     expect(lockData.packages['mock-package']).toEqual(undefined);
   });
   it('should handle user rejecting to integrate', async () => {
+    options.get().interactive = true;
     mockPrompter.confirm.mockImplementationOnce(() => false);
     mockPrompter.log.step.mockReset();
     const lockPath = writeMockLock({

src/cli.ts

@@ -3,6 +3,7 @@ import 'isomorphic-fetch';
 import { getInfo } from './getInfo';
 import { integrate } from './integrate';
 import { options } from './options';
+import { progress } from './progress';
 import { logError, logIntro, logOutro } from './prompter';
 import { IntegratorOptions } from './types/integrator.types';
 import { upgrade } from './upgrade';
@@ -12,18 +13,33 @@ import { getErrMessage } from './utils/getErrMessage';
 const { version } = require('../package.json');
 
 const program = new Command();
+program.enablePositionalOptions();
 
 program
   .version(version as string)
   .name('integrate')
   .description('Integrate new packages into your project.')
   .argument('[package-name]', 'Specify a package to integrate')
-  .option('-d, --debug', 'enables verbose logging', false)
+  .option('-v, --verbose', 'enables verbose logging', false)
   .action(async (packageName: string, args: IntegratorOptions) => {
     options.set(args);
     logIntro();
-    await integrate(packageName);
-    logOutro();
+    try {
+      progress.setOptions({
+        title: 'integrating',
+        total: 8,
+        step: 0,
+      });
+      if (!args.verbose) progress.display();
+      await integrate(packageName);
+      progress.hide();
+      logOutro();
+    } catch (e) {
+      progress.hide();
+      const errMessage = getErrMessage(e);
+      logError(errMessage);
+      logOutro('integration failed', true);
+    }
   })
   .showHelpAfterError();
 
@@ -47,13 +63,23 @@ program
     'enables manual upgrade, you must run this command in the folder of the new created project',
     false
   )
+  .option('-v, --verbose', 'enables verbose logging', false)
+  .option('-i, --interactive', 'allow', false)
   .action(async (args: IntegratorOptions) => {
     options.set(args);
     logIntro('react-native-integrate - upgrade project');
     try {
+      progress.setOptions({
+        title: 'upgrading project',
+        total: 8,
+        step: 0,
+      });
+      if (!args.verbose) progress.display();
       await upgrade();
+      progress.hide();
       logOutro('completed project upgrade');
     } catch (e) {
+      progress.hide();
       const errMessage = getErrMessage(e);
       logError(errMessage);
       logOutro('project upgrade failed', true);

src/integrate.ts

@@ -1,5 +1,7 @@
 import color from 'picocolors';
 import semver from 'semver/preload';
+import { options } from './options';
+import { progress } from './progress';
 import {
   confirm,
   log,
@@ -31,7 +33,16 @@ import { updateIntegrationStatus } from './utils/updateIntegrationStatus';
 import { getText, transformTextInObject, variables } from './variables';
 
 export async function integrate(packageName?: string): Promise<void> {
+  progress.setOptions({
+    stage: 'checking for updates',
+  });
   await checkForUpdate();
+  let stage = 1;
+
+  progress.setOptions({
+    step: stage++,
+    stage: 'analyzing packages',
+  });
   startSpinner('analyzing packages');
   const analyzedPackages = analyzePackages(packageName);
   const { deletedPackages, installedPackages, integratedPackages } =
@@ -82,6 +93,11 @@ export async function integrate(packageName?: string): Promise<void> {
   let packagesToIntegrate: PackageWithConfig[] = [];
   if (newPackages.length) {
     const globalInfo = [];
+
+    progress.setOptions({
+      step: stage++,
+      stage: 'checking package configuration',
+    });
     startSpinner('checking package configuration');
     for (let i = 0; i < newPackages.length; i++) {
       const [packageName, version] = newPackages[i];
@@ -250,11 +266,18 @@ export async function integrate(packageName?: string): Promise<void> {
       const { packageName, version, configPath, config } =
         packagesToIntegrate[i];
 
+      progress.setOptions({
+        step: stage++,
+        stage: `integrating ${color.blue(packageName)}`,
+      });
       logInfo(
         color.bold(color.bgBlue(' new package ')) +
           color.bold(color.blue(` ${packageName} `))
       );
-      if (await confirm('would you like to integrate this package?')) {
+      if (
+        !options.get().interactive ||
+        (await confirm('would you like to integrate this package?'))
+      ) {
         variables.clear(); // reset variables
         if (config.env) {
           Object.entries(config.env).forEach(([name, value]) =>
@@ -370,6 +393,10 @@ export async function integrate(packageName?: string): Promise<void> {
     });
   }
   updateIntegrationStatus(packageLockUpdates);
+
+  if (!options.get().verbose) {
+    progress.hide();
+  }
 }
 
 function checkIfJustCreatedLockFile(analyzedPackages: AnalyzedPackages) {

src/options.ts

@@ -1,7 +1,8 @@
 import { IntegratorOptions } from './types/integrator.types';
 
 let _opts: IntegratorOptions = {
-  debug: false,
+  interactive: false,
+  verbose: false,
   manual: false,
 };
 export const options = {

src/progress.ts

@@ -0,0 +1,62 @@
+import { spinner } from '@clack/prompts';
+import color from 'picocolors';
+
+class Progress {
+  spinner?: {
+    start: (msg?: string) => void;
+    stop: (msg?: string, code?: number) => void;
+    message: (msg?: string) => void;
+  };
+  options: ProgressOptions = {
+    title: '',
+    step: 0,
+    total: 1,
+    stage: '',
+  };
+  isActive = false;
+
+  setOptions(opts: Partial<ProgressOptions>) {
+    Object.assign(this.options, opts);
+    if (this.isActive) this.spinner?.message(this.drawMessage());
+  }
+
+  drawMessage() {
+    const stepRate = this.options.step / this.options.total;
+    const barSize = 20;
+    const scaledStep = Math.floor(stepRate * barSize);
+    const completeBars = new Array(scaledStep).fill('\u2588').join('');
+    const uncompleteBars = new Array(barSize - scaledStep)
+      .fill('\u2588')
+      .join('');
+    const bar = `${color.cyan(completeBars)}${color.dim(color.gray(uncompleteBars))}`;
+
+    return `${this.options.title} [${bar}] ${color.cyan(this.options.stage)}`;
+  }
+
+  display() {
+    if (!this.isActive) {
+      this.isActive = true;
+      this.spinner = spinner();
+      this.spinner.start(this.drawMessage());
+    }
+  }
+
+  hide() {
+    if (this.isActive) {
+      this.isActive = false;
+      this.spinner?.stop();
+      process.stdout.cursorTo(0); // up one line
+      process.stdout.moveCursor(0, -2); // up one line
+      process.stdout.clearLine(1); // from cursor to end
+    }
+  }
+}
+
+export const progress = new Progress();
+
+export type ProgressOptions = {
+  title: string;
+  step: number;
+  total: number;
+  stage: string;
+};

src/prompter.ts

@@ -12,6 +12,7 @@ import {
   text as promptText,
 } from '@clack/prompts';
 import color from 'picocolors';
+import { progress } from './progress';
 import {
   ConfirmPromptArgs,
   MultiselectPromptArgs,
@@ -22,31 +23,44 @@ import {
 import { listenForKeys } from './utils/waitInputToContinue';
 
 export function log(msg: string): void {
+  if (progress.isActive) return;
   promptLog.step(msg);
 }
 
 export function logSuccess(msg: string): void {
+  const isProgressActive = progress.isActive;
+  if (isProgressActive) progress.hide();
   promptLog.success(msg);
+  if (isProgressActive) progress.display();
 }
 
 export function logMessage(msg: string): void {
+  if (progress.isActive) return;
   promptLog.message('⦿ ' + msg);
 }
 
 export function logMessageGray(msg: string): void {
+  if (progress.isActive) return;
   promptLog.message(color.gray('⦿ ' + msg));
 }
 
 export function logWarning(msg: string, noColor?: boolean): void {
+  const isProgressActive = progress.isActive;
+  if (isProgressActive) progress.hide();
   promptLog.warning(noColor ? msg : color.yellow(msg));
+  if (isProgressActive) progress.display();
 }
 
 export function logInfo(msg: string): void {
+  if (progress.isActive) return;
   promptLog.info(msg);
 }
 
 export function logError(msg: string, noColor?: boolean): void {
+  const isProgressActive = progress.isActive;
+  if (isProgressActive) progress.hide();
   promptLog.error(noColor ? msg : color.red(msg));
+  if (isProgressActive) progress.display();
 }
 
 export function logNote(msg: string, title?: string): void {
@@ -68,15 +82,18 @@ export function startSpinner(
   msg: string,
   onCancel?: (key: string) => void
 ): void {
+  if (progress.isActive) return;
   s.start(msg);
   if (onCancel) releaseListener = listenForKeys('s', onCancel);
 }
 
 export function updateSpinner(msg: string): void {
+  if (progress.isActive) return;
   s.message(msg);
 }
 
 export function stopSpinner(msg: string): void {
+  if (progress.isActive) return;
   s.stop(msg);
   if (releaseListener) {
     releaseListener();
@@ -88,6 +105,8 @@ export async function multiselect(
   msg: string,
   args: MultiselectPromptArgs
 ): Promise<OptionValue[]> {
+  const isProgressActive = progress.isActive;
+  if (isProgressActive) progress.hide();
   const response = await promptMultiselect({
     message: msg,
     required: args.required,
@@ -102,6 +121,7 @@ export async function multiselect(
     cancel('operation cancelled');
     process.abort();
   }
+  if (isProgressActive) progress.display();
   // @ts-ignore
   return response;
 }
@@ -110,6 +130,8 @@ export async function select(
   msg: string,
   args: SelectPromptArgs
 ): Promise<OptionValue> {
+  const isProgressActive = progress.isActive;
+  if (isProgressActive) progress.hide();
   const response = await promptSelect({
     message: msg,
     options: args.options.map(x => ({
@@ -124,6 +146,7 @@ export async function select(
     cancel('operation cancelled');
     process.abort();
   }
+  if (isProgressActive) progress.display();
   // @ts-ignore
   return response;
 }
@@ -132,6 +155,8 @@ export async function confirm(
   msg: string,
   args: ConfirmPromptArgs = {}
 ): Promise<boolean> {
+  const isProgressActive = progress.isActive;
+  if (isProgressActive) progress.hide();
   const response = await promptConfirm({
     message: msg,
     active: args.positive || 'yes',
@@ -142,13 +167,16 @@ export async function confirm(
     cancel('operation cancelled');
     process.abort();
   }
+  if (isProgressActive) progress.display();
   return response;
 }
 
 export async function text(
   msg: string,
   args: TextPromptArgs = {}
 ): Promise<string> {
+  const isProgressActive = progress.isActive;
+  if (isProgressActive) progress.hide();
   const response = await promptText({
     message: msg,
     defaultValue: args.defaultValue,
@@ -160,6 +188,7 @@ export async function text(
     cancel('operation cancelled');
     process.abort();
   }
+  if (isProgressActive) progress.display();
   return response;
 }
 

src/types/integrator.types.ts

@@ -1,5 +1,6 @@
 export interface IntegratorOptions {
-  debug: boolean;
+  verbose: boolean;
+  interactive: boolean;
   manual: boolean;
 }