@oclif/multi-stage-output 0.4.3-dev.2 → 0.5.1

package/README.md

@@ -23,7 +23,7 @@ You can see examples of how to use it in the [examples](./examples/) directory.
 You can run any of these with the following:
 
 ```
-node --loader=ts-node/esm examples/basic.ts
+tsx examples/basic.ts
 ```
 
 # Usage
@@ -63,7 +63,7 @@ const ms = new MultiStageOutput<{message: string; staticValue: string; dynamicVa
   jsonEnabled: false,
   stages: ['stage 1', 'stage 2', 'stage 3'],
   // preStagesBlock will be displayed BEFORE the list of stages
-  postStagesBlock: [
+  preStagesBlock: [
     {
       get: (data) => data?.message,
       type: 'message',

package/lib/components/icon.js

@@ -3,7 +3,7 @@ import React from 'react';
 export function Icon({ children, icon, }) {
     if (!icon)
         return false;
-    return (React.createElement(Box, null,
+    return (React.createElement(Box, { flexWrap: "wrap" },
         React.createElement(Box, { paddingLeft: icon.paddingLeft, paddingRight: icon.paddingRight },
             icon.color && React.createElement(Text, { color: icon.color }, icon.figure),
             !icon.color && React.createElement(Text, null, icon.figure)),

package/lib/components/spinner.js

@@ -46,7 +46,7 @@ export function SpinnerOrError({ design, error, labelPosition = 'right', ...prop
 }
 export function SpinnerOrErrorOrChildren({ children, error, ...props }) {
     if (children) {
-        return (React.createElement(Box, null,
+        return (React.createElement(Box, { flexWrap: "wrap" },
             props.label && props.labelPosition === 'left' && React.createElement(Text, null,
                 props.label,
                 " "),

package/lib/components/stages.js

@@ -31,7 +31,7 @@ function StageInfos({ design, error, keyValuePairs, stage, }) {
                 React.createElement(SimpleMessage, { ...kv })));
         }
         if (kv.type === 'dynamic-key-value') {
-            return (React.createElement(Box, { key: key },
+            return (React.createElement(Box, { key: key, flexWrap: "wrap" },
                 React.createElement(Icon, { icon: design.icons.info }),
                 React.createElement(SpinnerOrErrorOrChildren, { error: error, label: `${kv.label}:`, labelPosition: "left", type: design.spinners.info, design: design }, kv.value && (React.createElement(Text, { bold: kv.isBold, color: kv.color }, kv.value)))));
         }
@@ -50,7 +50,8 @@ function Infos({ design, error, keyValuePairs, }) {
             return React.createElement(SimpleMessage, { key: key, ...kv });
         }
         if (kv.type === 'dynamic-key-value') {
-            return (React.createElement(SpinnerOrErrorOrChildren, { key: key, error: error, label: `${kv.label}:`, labelPosition: "left", type: design.spinners.info, design: design }, kv.value && (React.createElement(Text, { bold: kv.isBold, color: kv.color }, kv.value))));
+            return (React.createElement(Box, { key: key, flexWrap: "wrap" },
+                React.createElement(SpinnerOrErrorOrChildren, { error: error, label: `${kv.label}:`, labelPosition: "left", type: design.spinners.info, design: design }, kv.value && (React.createElement(Text, { bold: kv.isBold, color: kv.color }, kv.value)))));
         }
         if (kv.type === 'static-key-value') {
             return React.createElement(StaticKeyValue, { key: key, ...kv });
@@ -67,7 +68,7 @@ function CompactStage({ design, direction = 'row', error, stage, stageSpecificBl
             React.createElement(StageInfos, { design: design, error: error, keyValuePairs: stageSpecificBlock, stage: stage })))));
 }
 function Stage({ design, error, stage, status, }) {
-    return (React.createElement(Box, null,
+    return (React.createElement(Box, { flexWrap: "wrap" },
         (status === 'current' || status === 'failed') && (React.createElement(SpinnerOrError, { error: error, label: capitalCase(stage), type: design.spinners.stage, design: design })),
         status === 'skipped' && (React.createElement(Icon, { icon: design.icons.skipped },
             React.createElement(Text, { color: "dim" },
@@ -78,7 +79,7 @@ function Stage({ design, error, stage, status, }) {
 }
 function StageEntries({ compactionLevel, design, error, hasStageTime, stageSpecificBlock, stageTracker, timerUnit, }) {
     return (React.createElement(React.Fragment, null, [...stageTracker.entries()].map(([stage, status]) => (React.createElement(Box, { key: stage, flexDirection: "column" },
-        React.createElement(Box, null,
+        React.createElement(Box, { flexWrap: "wrap" },
             compactionLevel === 0 ? (React.createElement(Stage, { stage: stage, status: status, design: design, error: error })) : (
             // Render the stage name, spinner, and stage specific info
             React.createElement(CompactStage, { stage: stage, status: status, design: design, error: error, stageSpecificBlock: stageSpecificBlock, stageTracker: stageTracker, direction: compactionLevel >= 6 ? 'row' : 'column' })),
@@ -116,6 +117,16 @@ function filterInfos(infos, compactionLevel, cutOff) {
  * @returns the compaction level based on the number of lines that will be displayed
  */
 export function determineCompactionLevel({ design = constructDesignParams(), hasElapsedTime, hasStageTime, postStagesBlock, preStagesBlock, stageSpecificBlock, stageTracker, title, }, rows, columns) {
+    // We don't have access to the exact stage time, so we're taking a conservative estimate of
+    // 10 characters + 1 character for the space between the stage and timer,
+    // examples: 999ms (5), 59.99s (6), 59m 59.99s (10), 23h 59m (7)
+    const estimatedTimeLength = 11;
+    const calculateWrappedHeight = (length) => {
+        if (length > columns) {
+            return Math.ceil(length / columns);
+        }
+        return 1;
+    };
     const calculateHeightOfBlock = (block) => {
         if (!block)
             return 0;
@@ -125,7 +136,7 @@ export function determineCompactionLevel({ design = constructDesignParams(), has
                     return acc;
                 if (info.value.length > columns) {
                     // if the message is longer than the terminal width, add the number of lines
-                    return acc + Math.ceil(info.value.length / columns);
+                    return acc + calculateWrappedHeight(info.value.length);
                 }
                 // if the message is multiline, add the number of lines
                 return acc + info.value.split('\n').length;
@@ -134,9 +145,10 @@ export function determineCompactionLevel({ design = constructDesignParams(), has
             // if there's no value we still add 1 for the label
             if (!value)
                 return acc + 1;
-            if (label.length + Number(': '.length) + value.length > columns) {
+            const totalLength = `${label}: ${value}`.length;
+            if (totalLength > columns) {
                 // if the value is longer than the terminal width, add the number of lines
-                return acc + Math.ceil(value.length / columns);
+                return acc + calculateWrappedHeight(totalLength);
             }
             return acc + value.split('\n').length;
         }, 0);
@@ -144,23 +156,14 @@ export function determineCompactionLevel({ design = constructDesignParams(), has
     const calculateHeightOfStage = (stage) => {
         const status = stageTracker.get(stage) ?? 'pending';
         const skipped = status === 'skipped' ? ' - Skipped' : '';
-        // We don't have access to the exact stage time, so we're taking a conservative estimate of
-        // 10 characters + 1 character for the space between the stage and timer,
-        // examples: 999ms (5), 59.99s (6), 59m 59.99s (10), 23h 59m (7)
-        const stageTimeLength = hasStageTime ? 11 : 0;
-        if (
-        // 1 for the left margin
-        1 +
-            design.icons[status].paddingLeft +
+        const stageTimeLength = hasStageTime ? estimatedTimeLength : 0;
+        const totalLength = design.icons[status].paddingLeft +
             design.icons[status].figure.length +
             design.icons[status].paddingRight +
             stage.length +
             skipped.length +
-            stageTimeLength >
-            columns) {
-            return Math.ceil(stage.length / columns);
-        }
-        return 1;
+            stageTimeLength;
+        return calculateWrappedHeight(totalLength);
     };
     const calculateWidthOfCompactStage = (stage) => {
         const status = stageTracker.get(stage) ?? 'current';
@@ -189,12 +192,14 @@ export function determineCompactionLevel({ design = constructDesignParams(), has
     const stageSpecificBlockHeight = calculateHeightOfBlock(stageSpecificBlock);
     // 3 at minimum because: 1 for marginTop on entire component, 1 for marginBottom on entire component, 1 for paddingBottom on StageEntries
     const paddings = 3 + (preStagesBlock ? 1 : 0) + (postStagesBlock ? 1 : 0) + (title ? 1 : 0);
+    const elapsedTimeHeight = hasElapsedTime ? calculateWrappedHeight('Elapsed Time:'.length + estimatedTimeLength) : 0;
+    const titleHeight = title ? calculateWrappedHeight(title.length) : 0;
     const totalHeight = stagesHeight +
         preStagesBlockHeight +
         postStagesBlockHeight +
         stageSpecificBlockHeight +
-        (title ? 1 : 0) +
-        (hasElapsedTime ? 1 : 0) +
+        elapsedTimeHeight +
+        titleHeight +
         paddings +
         // add one for good measure - iTerm2 will flicker on every render if the height is exactly the same as the terminal height so it's better to be safe
         1;
@@ -242,7 +247,7 @@ export function Stages({ compactionLevel, design = constructDesignParams(), erro
         stageSpecificBlock,
         stageTracker,
         title,
-    }, stdout.rows - 1, stdout.columns).compactionLevel);
+    }, stdout.rows - 1, stdout.columns - 1).compactionLevel);
     React.useEffect(() => {
         setLevelOfCompaction(determineCompactionLevel({
             hasElapsedTime,
@@ -252,7 +257,7 @@ export function Stages({ compactionLevel, design = constructDesignParams(), erro
             stageSpecificBlock,
             stageTracker,
             title,
-        }, stdout.rows - 1, stdout.columns).compactionLevel);
+        }, stdout.rows - 1, stdout.columns - 1).compactionLevel);
     }, [
         compactionLevel,
         hasElapsedTime,
@@ -275,7 +280,7 @@ export function Stages({ compactionLevel, design = constructDesignParams(), erro
                 stageSpecificBlock,
                 stageTracker,
                 title,
-            }, stdout.rows - 1, stdout.columns).compactionLevel);
+            }, stdout.rows - 1, stdout.columns - 1).compactionLevel);
         };
         stdout.on('resize', handler);
         return () => {
@@ -289,7 +294,7 @@ export function Stages({ compactionLevel, design = constructDesignParams(), erro
     const postStages = filterInfos(postStagesBlock ?? [], actualLevelOfCompaction, 5);
     const stageSpecific = filterInfos(stageSpecificBlock ?? [], actualLevelOfCompaction, 7);
     // Reduce padding if the compaction level is 8
-    const padding = actualLevelOfCompaction === 8 ? 0 : 1;
+    const padding = actualLevelOfCompaction >= 8 ? 0 : 1;
     return (React.createElement(Box, { flexDirection: "column", marginTop: padding, marginBottom: padding },
         actualLevelOfCompaction < 3 && title && (React.createElement(Box, { paddingBottom: padding },
             React.createElement(Divider, { title: title, ...design.title, terminalWidth: stdout.columns }))),
@@ -299,7 +304,7 @@ export function Stages({ compactionLevel, design = constructDesignParams(), erro
             React.createElement(StageEntries, { compactionLevel: actualLevelOfCompaction, design: design, error: error, hasStageTime: hasStageTime, stageSpecificBlock: stageSpecific, stageTracker: stageTracker, timerUnit: timerUnit })),
         postStages && postStages.length > 0 && (React.createElement(Box, { flexDirection: "column", marginLeft: 1 },
             React.createElement(Infos, { design: design, error: error, keyValuePairs: postStages }))),
-        hasElapsedTime && (React.createElement(Box, { marginLeft: 1, display: actualLevelOfCompaction < 2 ? 'flex' : 'none' },
+        hasElapsedTime && (React.createElement(Box, { marginLeft: 1, display: actualLevelOfCompaction < 2 ? 'flex' : 'none', flexWrap: "wrap" },
             React.createElement(Text, null, "Elapsed Time: "),
             React.createElement(Timer, { unit: timerUnit })))));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oclif/multi-stage-output",
   "description": "Terminal output for oclif commands with multiple stages",
-  "version": "0.4.3-dev.2",
+  "version": "0.5.1",
   "author": "Salesforce",
   "bugs": "https://github.com/oclif/multi-stage-output/issues",
   "dependencies": {