style: separate logs from subprocesses

package.json

@@ -40,7 +40,6 @@
   "dependencies": {
     "@clack/core": "^0.3.4",
     "@clack/prompts": "^0.7.0",
-    "ascii-box": "^1.1.2",
     "gluegun": "5.1.6",
     "is-git-dirty": "^2.0.2",
     "look-it-up": "^2.1.0",

src/constants.ts

@@ -1,3 +1,33 @@
+import { print } from 'gluegun'
+
+export const COLORS = {
+  bold: print.colors.bold,
+  cyan: print.colors.cyan,
+  green: print.colors.green,
+  yellow: print.colors.yellow,
+  gray: print.colors.gray,
+  red: print.colors.red,
+  inverse: print.colors.inverse,
+  dim: print.colors.dim,
+  strikethrough: print.colors.strikethrough,
+}
+
+export const S_STEP_WARNING = COLORS.yellow('▲')
+export const S_STEP_ERROR = COLORS.red('■')
+export const S_STEP_SUCCESS = COLORS.green('◇')
+export const S_SELECT = COLORS.cyan('◆')
+export const S_ACTION = COLORS.cyan('▼')
+export const S_ACTION_BULLET = COLORS.cyan('►')
+export const S_BAR = '│'
+export const S_VBAR = '─'
+export const S_UL = '╭'
+export const S_DL = '╰'
+export const S_UR = '╮'
+export const S_DR = '╯'
+export const S_BAR_END = '└'
+export const S_RADIO_ACTIVE = '●'
+export const S_RADIO_INACTIVE = '○'
+
 export const HELP_FLAG = 'help'
 export const PRESET_FLAG = 'preset'
 

src/extensions/diff.ts

@@ -3,6 +3,7 @@ import { createHash } from 'crypto'
 import { createReadStream } from 'fs'
 import { join, sep } from 'path'
 import { expandDirectory } from '../utils/expandDirectory'
+import { S_ACTION } from '../constants'
 
 const prettyTree = require('pretty-file-tree')
 
@@ -119,7 +120,7 @@ module.exports = (toolbox: CycliToolbox) => {
     }
 
     toolbox.interactive.info(
-      'The following files have been added or modified:',
+      `${S_ACTION} The following files have been added or modified:`,
       'cyan'
     )
     toolbox.interactive.vspace()

src/extensions/furtherActions.ts

@@ -1,7 +1,6 @@
+import { S_ACTION_BULLET } from '../constants'
 import { CycliToolbox } from '../types'
 
-const box = require('ascii-box').box
-
 module.exports = (toolbox: CycliToolbox) => {
   const furtherActions: string[] = []
 
@@ -12,17 +11,15 @@ module.exports = (toolbox: CycliToolbox) => {
   const print = () => {
     if (furtherActions.length > 0) {
       toolbox.interactive.vspace()
-
-      toolbox.interactive.info(
-        `${box(
-          `=== What next?\n\n${furtherActions
-            .map((action) => `● ${action}`)
-            .join('\n\n')}`,
-          { border: 'round', maxWidth: 90 }
-        )}
-  `,
-        'cyan'
-      )
+      toolbox.interactive.sectionHeader('What next?', { color: 'cyan' })
+      furtherActions.forEach((action, index) => {
+        if (index > 0) {
+          toolbox.interactive.vspace()
+        }
+        toolbox.interactive.info(`${S_ACTION_BULLET} ${action}`, 'cyan')
+      })
+      toolbox.interactive.sectionFooter({ color: 'cyan' })
+      toolbox.interactive.vspace()
     }
   }
 

src/extensions/interactive.ts

@@ -5,36 +5,34 @@ import {
   isCancel,
   log as clackLog,
 } from '@clack/prompts'
-import { CycliToolbox } from '../types'
+import { CycliToolbox, MessageColor } from '../types'
 import { ConfirmPrompt } from '@clack/core'
+import { spawn } from 'child_process'
+import {
+  COLORS,
+  S_BAR,
+  S_BAR_END,
+  S_DL,
+  S_DR,
+  S_RADIO_ACTIVE,
+  S_RADIO_INACTIVE,
+  S_SELECT,
+  S_STEP_ERROR,
+  S_STEP_SUCCESS,
+  S_STEP_WARNING,
+  S_UL,
+  S_UR,
+  S_VBAR,
+} from '../constants'
 
 interface Spinner {
   stop: () => void
 }
 
-const COLORS = {
-  cyan: print.colors.cyan,
-  green: print.colors.green,
-  yellow: print.colors.yellow,
-  gray: print.colors.gray,
-  red: print.colors.red,
-  inverse: print.colors.inverse,
-  dim: print.colors.dim,
-  strikethrough: print.colors.strikethrough,
-}
-
-type MessageColor = keyof typeof COLORS
+const DEFAULT_HEADER_WIDTH = 80
 
 module.exports = (toolbox: CycliToolbox) => {
-  const { cyan, yellow, gray, red, inverse, dim, strikethrough } = COLORS
-
-  const S_STEP_ERROR = yellow('▲')
-  const S_SUCCESS = cyan('◆')
-  const S_STEP_CANCEL = red('■')
-  const S_BAR = '│'
-  const S_BAR_END = '└'
-  const S_RADIO_ACTIVE = '●'
-  const S_RADIO_INACTIVE = '○'
+  const { bold, cyan, yellow, gray, inverse, dim, strikethrough } = COLORS
 
   const confirm = async (
     message: string,
@@ -46,11 +44,11 @@ module.exports = (toolbox: CycliToolbox) => {
     const title = () => {
       switch (type) {
         case 'normal':
-          return `${gray(S_BAR)}\n${S_SUCCESS}  ${message
+          return `${gray(S_BAR)}\n${S_SELECT}  ${message
             .split('\n')
             .join(`\n${S_BAR}  `)}\n`
         case 'warning':
-          return `${gray(S_BAR)} \n${S_STEP_ERROR}  ${yellow(
+          return `${gray(S_BAR)} \n${S_STEP_WARNING}  ${yellow(
             message.split('\n').join(`\n${S_BAR}  `)
           )}\n`
       }
@@ -59,11 +57,11 @@ module.exports = (toolbox: CycliToolbox) => {
     const titleSubmitted = () => {
       switch (type) {
         case 'normal':
-          return `${gray(S_BAR)} \n${S_SUCCESS}  ${message
+          return `${gray(S_BAR)} \n${S_SELECT}  ${message
             .split('\n')
             .join(`\n${gray(S_BAR)}  `)}\n`
         case 'warning':
-          return `${gray(S_BAR)} \n${S_STEP_ERROR}  ${message
+          return `${gray(S_BAR)} \n${S_STEP_WARNING}  ${message
             .split('\n')
             .map((line) => yellow(line))
             .join(`\n${gray(S_BAR)}  `)}\n`
@@ -73,7 +71,7 @@ module.exports = (toolbox: CycliToolbox) => {
     const titleCancelled = () => {
       switch (type) {
         case 'normal':
-          return `${gray(S_BAR)} \n${S_STEP_CANCEL}  ${message
+          return `${gray(S_BAR)} \n${S_STEP_ERROR}  ${message
             .split('\n')
             .join(`\n${gray(S_BAR)}  `)}\n`
         case 'warning':
@@ -142,19 +140,19 @@ module.exports = (toolbox: CycliToolbox) => {
   const vspace = () => info('')
 
   const step = (message: string) => {
-    print.info(`${COLORS.green('✔')} ${message} `)
+    print.info(`${S_STEP_SUCCESS} ${message} `)
   }
 
   const error = (message: string) => {
-    print.error(`❗ ${message} `)
+    print.error(`${S_STEP_ERROR} ${message} `)
   }
 
   const success = (message: string) => {
     print.success(message)
   }
 
   const warning = (message: string) => {
-    print.warning(`⚠ ${message} `)
+    print.warning(`${S_STEP_WARNING} ${message} `)
   }
 
   const spin = (message: string): Spinner => {
@@ -169,6 +167,84 @@ module.exports = (toolbox: CycliToolbox) => {
     clackOutro(message)
   }
 
+  const sectionHeader = (
+    title: string,
+    {
+      width = DEFAULT_HEADER_WIDTH,
+      color,
+    }: { width?: number; color?: MessageColor } = {}
+  ) => {
+    const headerMessage = `${S_UL}${S_VBAR.repeat(
+      Math.floor((width - title.length - 3) / 2)
+    )} ${bold(title)} ${S_VBAR.repeat(
+      Math.ceil((width - title.length - 3) / 2)
+    )}`
+    info(headerMessage, color)
+    info(`${S_DR}`, color)
+  }
+
+  const sectionFooter = ({
+    width = DEFAULT_HEADER_WIDTH,
+    color,
+  }: { width?: number; color?: MessageColor } = {}) => {
+    info(`${S_UR}\n${S_DL}${S_VBAR.repeat(width - 1)}`, color)
+  }
+
+  const spawnSubprocess = async (
+    processName: string,
+    command: string,
+    { alwaysPrintStderr = false }: { alwaysPrintStderr?: boolean } = {}
+  ): Promise<void> => {
+    return new Promise((resolve, reject) => {
+      vspace()
+      sectionHeader(`Running ${processName}...`)
+
+      const subprocess = spawn(command, {
+        stdio: ['inherit', 'inherit', alwaysPrintStderr ? 'inherit' : 'pipe'],
+        shell: true,
+      })
+
+      step(`Started ${processName}.`)
+
+      let stderr = ''
+
+      if (!alwaysPrintStderr) {
+        subprocess.stderr?.on('data', (data) => {
+          stderr += data.toString()
+        })
+      }
+
+      subprocess.on('close', (code) => {
+        if (code !== 0) {
+          error(`${processName} exited with code ${code}.`)
+
+          if (!alwaysPrintStderr && stderr) {
+            info(`\nstderr: ${stderr}`, 'red')
+          }
+        } else {
+          step(`Finished running ${processName}.`)
+        }
+
+        sectionFooter()
+        vspace()
+
+        if (code !== 0) {
+          reject(
+            new Error(
+              `Failed to execute ${command}. The subprocess exited with code ${code}.`
+            )
+          )
+        } else {
+          resolve()
+        }
+      })
+
+      subprocess.on('error', (err) => {
+        reject(err)
+      })
+    })
+  }
+
   toolbox.interactive = {
     confirm,
     surveyStep,
@@ -182,6 +258,9 @@ module.exports = (toolbox: CycliToolbox) => {
     spin,
     intro,
     outro,
+    sectionHeader,
+    sectionFooter,
+    spawnSubprocess,
   }
 }
 
@@ -199,5 +278,15 @@ export interface InteractiveExtension {
     spin: (message: string) => Spinner
     intro: (message: string) => void
     outro: (message: string) => void
+    sectionHeader: (
+      title: string,
+      options?: { width?: number; color?: MessageColor }
+    ) => void
+    sectionFooter: (options?: { width?: number; color?: MessageColor }) => void
+    spawnSubprocess: (
+      processName: string,
+      command: string,
+      options?: { alwaysPrintStderr?: boolean }
+    ) => Promise<void>
   }
 }

src/recipes/build-release.ts

@@ -75,9 +75,11 @@ export const createReleaseBuildWorkflowsForExpo = async (
   const existsIOsDir = toolbox.filesystem.exists('ios')
 
   toolbox.print.info('⚙️ Running expo prebuild to setup app.json properly.')
-  await toolbox.system.spawn(`npx expo prebuild --${context.packageManager}`, {
-    stdio: 'inherit',
-  })
+  await toolbox.interactive.spawnSubprocess(
+    'Expo prebuild',
+    `npx expo prebuild --${context.packageManager}`,
+    { alwaysPrintStderr: true }
+  )
 
   if (platforms.includes('android')) {
     await createReleaseBuildWorkflowAndroid(toolbox, context)

src/recipes/eas-update.ts

@@ -13,16 +13,18 @@ const execute =
         'Detected eas.json, skipping EAS Build configuration.'
       )
     } else {
-      await toolbox.system.spawn('eas build:configure -p all', {
-        stdio: 'inherit',
-      })
+      await toolbox.interactive.spawnSubprocess(
+        'EAS Build configuration',
+        'eas build:configure -p all'
+      )
 
       toolbox.interactive.step('Created default EAS Build configuration.')
     }
 
-    await toolbox.system.spawn('eas update:configure', {
-      stdio: 'inherit',
-    })
+    await toolbox.interactive.spawnSubprocess(
+      'EAS Update configuration',
+      'eas update:configure'
+    )
 
     await toolbox.workflows.generate(join('eas', 'eas-update.ejf'), context)
 

src/types.ts

@@ -5,11 +5,13 @@ import { ProjectContextExtension } from './extensions/projectContext'
 import { ScriptsExtension } from './extensions/scripts'
 import { WorkflowsExtension } from './extensions/workflows'
 import { ProjectConfigExtension } from './extensions/projectConfig'
-import { LOCK_FILE_TO_MANAGER } from './constants'
+import { COLORS, LOCK_FILE_TO_MANAGER } from './constants'
 import { DiffExtension } from './extensions/diff'
 import { OptionsExtension } from './extensions/options'
 import { FurtherActionsExtension } from './extensions/furtherActions'
 
+export type MessageColor = keyof typeof COLORS
+
 export interface PackageJson {
   name: string
   dependencies?: {