Merge pull request #36 from oclif/mdonnalley/parallel-mso

feat: support parallel multi-stage-output

examples/error.ts

@@ -20,4 +20,4 @@ await sleep(SLEEP_TIME)
 ms.goto('two')
 await sleep(SLEEP_TIME)
 
-ms.stop(new Error('An error occurred'))
+ms.stop('failed')

examples/parallel.ts

@@ -0,0 +1,59 @@
+import {ParallelMultiStageOutput} from '../src/multi-stage-output.js'
+
+const SLEEP_TIME = Number.parseInt(process.env.SLEEP ?? '1000', 10) ?? 100
+
+async function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms)
+  })
+}
+
+const ms = new ParallelMultiStageOutput<{message: string; staticValue: string; dynamicValue: string}>({
+  jsonEnabled: false,
+  stageSpecificBlock: [
+    {
+      get: (data) => data?.message,
+      stage: 'one',
+      type: 'message',
+    },
+    {
+      get: (data) => data?.staticValue,
+      label: 'Static',
+      stage: 'two',
+      type: 'static-key-value',
+    },
+    {
+      get: (data) => data?.dynamicValue,
+      label: 'Dynamic',
+      stage: 'one',
+      type: 'dynamic-key-value',
+    },
+  ],
+  stages: ['one', 'two', 'three'],
+  title: 'Example',
+})
+
+ms.startStage('one', {message: 'This is a message', staticValue: 'This is a static key:value pair'})
+await sleep(SLEEP_TIME)
+
+ms.startStage('two', {dynamicValue: 'This is a dynamic key:value pair'})
+await sleep(SLEEP_TIME)
+
+ms.stopStage('one')
+await sleep(SLEEP_TIME)
+
+ms.pauseStage('two')
+await sleep(SLEEP_TIME)
+
+ms.resumeStage('two')
+await sleep(SLEEP_TIME)
+
+ms.startStage('three')
+await sleep(SLEEP_TIME)
+
+ms.stopStage('two')
+await sleep(SLEEP_TIME)
+
+ms.stopStage('three')
+
+ms.stop()

src/components/stages.tsx

@@ -333,7 +333,7 @@ function StageEntries({
             {status !== 'pending' && status !== 'skipped' && hasStageTime && (
               <Box display={compactionLevel === 0 ? 'flex' : status === 'current' ? 'flex' : 'none'}>
                 <Text> </Text>
-                <Timer color="dim" isStopped={status === 'completed'} unit={timerUnit} />
+                <Timer color="dim" isStopped={status === 'completed' || status === 'paused'} unit={timerUnit} />
               </Box>
             )}
           </Box>
@@ -496,8 +496,8 @@ export function determineCompactionLevel(
   let cLevel = 0
 
   const levels = [
-    // 1: only show one stage at a time, with stage specific info nested under the stage
-    (remainingHeight: number) => remainingHeight - stagesHeight + 1,
+    // 1: only current stages, with stage specific info nested under the stage
+    (remainingHeight: number) => remainingHeight - stagesHeight + Math.max(stageTracker.current.length, 1),
     // 2: hide the elapsed time
     (remainingHeight: number) => remainingHeight - 1,
     // 3: hide the title (subtract 1 for title and 1 for paddingBottom)
@@ -522,7 +522,10 @@ export function determineCompactionLevel(
 
   // It's possible that the collapsed stage might extend beyond the terminal width.
   // If so, we need to bump the compaction level up to 7 so that the stage specific info is hidden
-  if (cLevel === 6 && stageTracker.current && calculateWidthOfCompactStage(stageTracker.current) >= columns) {
+  if (
+    cLevel === 6 &&
+    stageTracker.current.map((c) => calculateWidthOfCompactStage(c)).reduce((acc, width) => acc + width, 0) >= columns
+  ) {
     cLevel = 7
   }
 
@@ -678,7 +681,7 @@ export function Stages({
       )}
 
       <Box flexDirection="column" marginLeft={1} paddingBottom={padding}>
-        <ErrorBoundary getFallbackText={() => stageTracker.current ?? 'unknown'}>
+        <ErrorBoundary getFallbackText={() => stageTracker.current[0] ?? 'unknown'}>
           <StageEntries
             compactionLevel={actualLevelOfCompaction}
             design={design}