feat: fixed bug with tty outputs not showing

Author: kevinwang5658

src/ui/components/default-component.tsx

@@ -12,6 +12,8 @@ import { ImportParametersForm } from './import/index.js';
 import { PlanComponent } from './plan/plan.js';
 import { ProgressDisplay, ProgressState } from './progress/progress-display.js';
 
+const spinnerEmitter = new EventEmitter();
+
 export function DefaultComponent(props: {
   emitter: EventEmitter
 }) {
@@ -48,7 +50,8 @@ export function DefaultComponent(props: {
     })
 
     emitter.on(RenderEvent.LOG, (log: string) => {
-      console.log(chalk.cyan(log))
+      console.log(chalk.cyan(log));
+      spinnerEmitter.emit('data');
     });
 
     emitter.on(RenderEvent.PROGRESS_UPDATE, (state: ProgressState) => {
@@ -88,7 +91,7 @@ export function DefaultComponent(props: {
   return <Box flexDirection="column">
     {
       ([RenderState.APPLY_COMPLETE, RenderState.APPLYING, RenderState.GENERATING_PLAN].includes(state)) && progressState && !hideProgress && (
-        <ProgressDisplay progress={progressState}/>
+        <ProgressDisplay emitter={spinnerEmitter} eventType="data" progress={progressState}/>
       )
     }
     {

src/ui/components/progress/progress-display.tsx

@@ -1,7 +1,10 @@
-import { Spinner, StatusMessage } from '@inkjs/ui';
+import { StatusMessage } from '@inkjs/ui';
 import { Box } from 'ink';
+import EventEmitter from 'node:events';
 import React from 'react';
 
+import Spinner from './spinner.js';
+
 export enum ProgressStatus {
   IN_PROGRESS,
   FINISHED,
@@ -21,33 +24,37 @@ export interface ProgressState {
 export function ProgressDisplay(
   props: {
     progress: ProgressState,
+    emitter: EventEmitter,
+    eventType: string,
   }
 ) {
   const { label, status, subProgresses } = props.progress;
 
   return <Box flexDirection="column">
     {
       status === ProgressStatus.IN_PROGRESS
-        ? <Spinner label={label}/>
+        ? <Spinner type="circleHalves" eventEmitter={props.emitter} eventType={props.eventType} label={label}/>
         : <StatusMessage variant="success">{label}</StatusMessage>
     }
     <Box flexDirection="column" marginLeft={2}>
-      <SubProgressDisplay subProgresses={subProgresses}/>
+      <SubProgressDisplay emitter={props.emitter} eventType={props.eventType} subProgresses={subProgresses} />
     </Box>
   </Box>
 }
 
 export function SubProgressDisplay(
   props: {
     subProgresses: ProgressState['subProgresses'],
+    emitter: EventEmitter,
+    eventType: string,
   }
 ) {
-  const { subProgresses } = props;
+  const { subProgresses, emitter, eventType } = props;
 
   return <>{
     subProgresses && subProgresses.map((s, idx) =>
       s.status === ProgressStatus.IN_PROGRESS
-        ? <Spinner key={idx} label={s.label}/>
+        ? <Spinner eventEmitter={emitter} eventType={eventType} key={idx} label={s.label} type="circleHalves"/>
         : <StatusMessage key={idx} variant="success">{s.label}</StatusMessage>
     )
   }</>

src/ui/components/progress/spinner.tsx

@@ -0,0 +1,51 @@
+import type { SpinnerName } from 'cli-spinners';
+
+import spinners from 'cli-spinners';
+import { Box, Text } from 'ink';
+import EventEmitter from 'node:events';
+import React, { useEffect, useState } from 'react';
+
+type Props = {
+  /**
+   * Type of a spinner.
+   * See [cli-spinners](https://github.com/sindresorhus/cli-spinners) for available spinners.
+   *
+   * @default dots
+   */
+  type?: SpinnerName;
+
+  eventEmitter: EventEmitter;
+
+  eventType: string;
+
+  label?: string;
+};
+
+/**
+ * Spinner.
+ */
+function Spinner({ eventEmitter, eventType, type = 'dots', label }: Props) {
+  const [frame, setFrame] = useState(0);
+  const spinner = spinners[type];
+
+  useEffect(() => {
+    const listener = () => {
+      setFrame(previousFrame => {
+        const isLastFrame = previousFrame === spinner.frames.length - 1;
+        return isLastFrame ? 0 : previousFrame + 1;
+      });
+    };
+
+    eventEmitter.on(eventType, listener);
+
+    return () => {
+      eventEmitter.removeListener(eventType, listener);
+    };
+  }, [spinner]);
+  return <Box gap={1}>
+    <Text color="blue">{spinner.frames[frame]}</Text>
+    {label && <Text>{label}</Text>}
+  </Box>
+}
+
+export default Spinner;