Added reporters and ink components

Author: kevinwang5658

package.json

@@ -13,7 +13,9 @@
     "ajv-formats": "^3.0.1",
     "tsx": "^4.7.3",
     "ink": "^4.4.1",
-    "react": "^18.3.1"
+    "@inkjs/ui": "^1.0.0",
+    "react": "^18.3.1",
+    "eventemitter2": "^6.4.9"
   },
   "description": "Codify is a set up as code tool for developers",
   "devDependencies": {

src/commands/apply/index.ts

@@ -1,5 +1,6 @@
 import { Args, Command, Flags } from '@oclif/core'
 import path from 'node:path';
+
 import { ApplyOrchestrator } from '../../orchestrators/apply.js';
 
 export default class Apply extends Command {

src/commands/plan/index.tsx src/commands/plan/index.tssrc/commands/plan/index.tsx renamed to src/commands/plan/index.ts

@@ -1,9 +1,8 @@
 import { Args, Command, Flags } from '@oclif/core'
-import { render, Text } from 'ink';
 import * as path from 'node:path';
-import * as React from 'react';
 
 import { PlanOrchestrator } from '../../orchestrators/plan.js';
+import { DefaultReporter } from '../../ui/reporters/default-reporter.js';
 
 export default class Plan extends Command {
   static args = {
@@ -27,8 +26,7 @@ export default class Plan extends Command {
 
   public async run(): Promise<void> {
     const { args, flags } = await this.parse(Plan)
-
-    render(<Text color="blue">Test Text</Text>);
+    const reporter = new DefaultReporter()
 
     const name = flags.name ?? 'world'
     this.log(`hello ${name} from /Users/kevinwang/Projects/codify/codify-core/src/commands/plan.ts`)

src/orchestrators/context.ts

@@ -0,0 +1,81 @@
+import { EventEmitter } from 'node:events';
+
+
+export enum Event {
+  STDOUT = 'stdout',
+  STDERR = 'stderr',
+  PLUGIN_STDOUT = 'plugin_stdout',
+  PLUGIN_STDERR = 'plugin_stderr',
+  DEBUG = 'debug',
+  OUTPUT = 'output',
+  PROCESS_START = 'process_start',
+  PROCESS_FINISH = 'process_finish',
+  SUB_PROCESS_START = 'sub_process_start',
+  SUB_PROCESS_FINISH = 'sub_process_finish',
+}
+
+export const ctx = new class {
+  emitter: EventEmitter;
+
+  constructor() {
+    this.emitter = new EventEmitter();
+    this.attachOutputEmitters();
+  }
+
+  on(eventName: string | symbol, listener: (...args: any[]) => void): EventEmitter {
+    return this.emitter.on(eventName, listener);
+  }
+
+  log(...args: unknown[]) {
+    this.emitter.emit(Event.STDOUT, ...args);
+  }
+
+  pluginStdout(...args: unknown[]) {
+    this.emitter.emit(Event.PLUGIN_STDOUT, ...args);
+  }
+
+  pluginStderr(...args: unknown[]) {
+    this.emitter.emit(Event.PLUGIN_STDERR, ...args);
+  }
+
+  debug(...args: unknown[]) {
+    // Add filtering here to only allow debug events when in debug mode
+    this.emitter.emit(Event.DEBUG, ...args);
+  }
+
+
+  processStarted(name: string) {
+    this.emitter.emit(Event.PROCESS_START, name);
+  }
+
+  processFinished(name: string) {
+    this.emitter.emit(Event.PROCESS_FINISH, name);
+  }
+
+  subprocessStarted(name: string, processName: string) {
+    this.emitter.emit(Event.SUB_PROCESS_START, name, processName);
+  }
+
+  subprocessFinished(name: string, processName: string) {
+    this.emitter.emit(Event.SUB_PROCESS_FINISH, name, processName);
+  }
+
+  async subprocess<T>(name: string, run: () => Promise<T>): Promise<T> {
+    this.emitter.emit(Event.SUB_PROCESS_START, name);
+    const result = await run();
+    this.emitter.emit(Event.SUB_PROCESS_FINISH, name);
+    return result;
+  }
+
+  attachOutputEmitters() {
+    this.emitter.prependListener(Event.STDOUT, (...args) => this.onOutputEvent(...args));
+    this.emitter.prependListener(Event.STDERR, (...args) => this.onOutputEvent(...args));
+    this.emitter.prependListener(Event.PLUGIN_STDOUT, (...args) => this.onOutputEvent(...args));
+    this.emitter.prependListener(Event.PLUGIN_STDERR, (...args) => this.onOutputEvent(...args));
+    this.emitter.prependListener(Event.DEBUG, (...args) => this.onOutputEvent(...args));
+  }
+
+  onOutputEvent(...args: unknown[]) {
+    this.emitter.emit(Event.OUTPUT, ...args);
+  }
+}

src/orchestrators/plan.ts

@@ -3,33 +3,56 @@ import { PlanResponseData } from 'codify-schemas';
 import { Project } from '../entities/project.js';
 import { Parser } from '../parser/index.js';
 import { PluginCollection } from '../plugins/plugin-collection.js';
+import { ctx } from './context.js';
 
 interface PlanOchestratorResponse {
   plan: PlanResponseData[],
   pluginCollection: PluginCollection;
   project: Project;
 }
 
+export enum PlanStatus {
+  PLAN = 'plan',
+  PARSE = 'parse',
+  INITIALIZE_PLUGINS = 'initalize_plugins',
+  VALIDATE = 'validate',
+  GENERATE_PLAN = 'generate_plan',
+}
+
 export const PlanOrchestrator = {
   async run(path: string, destroyPlugins = true): Promise<PlanOchestratorResponse> {
+    ctx.processStarted(PlanStatus.PLAN)
+
+    ctx.subprocessStarted(PlanStatus.PARSE, PlanStatus.PLAN);
     const project = await Parser.parseProject(path);
+    ctx.subprocessFinished(PlanStatus.PARSE, PlanStatus.PLAN);
 
+    ctx.subprocessStarted(PlanStatus.INITIALIZE_PLUGINS, PlanStatus.PLAN)
     const pluginCollection = new PluginCollection();
     const dependencyMap = await pluginCollection.initialize(project);
+    ctx.subprocessFinished(PlanStatus.INITIALIZE_PLUGINS, PlanStatus.PLAN)
+
+    ctx.subprocessStarted(PlanStatus.VALIDATE, PlanStatus.PLAN)
     project.validateWithResourceMap(dependencyMap);
     project.resolveResourceDependencies(dependencyMap);
 
     const validationResults = await pluginCollection.validate(project);
     project.handlePluginResourceValidationResults(validationResults);
     project.calculateEvaluationOrder();
+    ctx.subprocessFinished(PlanStatus.VALIDATE, PlanStatus.PLAN)
 
+
+    ctx.subprocessStarted(PlanStatus.GENERATE_PLAN, PlanStatus.PLAN)
     const plan = await pluginCollection.getPlan(project);
-    console.log(JSON.stringify(plan, null, 2));
+    ctx.subprocessFinished(PlanStatus.GENERATE_PLAN, PlanStatus.PLAN)
+
 
     if (destroyPlugins) {
       await pluginCollection.destroy();
     }
 
+    ctx.processFinished(PlanStatus.PLAN)
+
     return {
       plan,
       pluginCollection,

src/plugins/plugin-process.ts

@@ -1,6 +1,7 @@
 import { IpcMessage, IpcMessageSchema } from 'codify-schemas';
 import { ChildProcess, fork } from 'node:child_process';
 
+import { ctx } from '../orchestrators/context.js';
 import { ajv } from '../utils/ajv.js';
 import { PluginMessage } from './message.js';
 
@@ -23,14 +24,14 @@ export class PluginProcess {
       jsFileDir,
       [],
       {
-        execArgv: ['--import', 'tsx'],
         env: { ...process.env, FORCE_COLOR: '1' },
+        execArgv: ['--import', 'tsx'],
         silent: true
       },
     );
 
-    _process.stdout!.on('data', (message) => console.log(message.toString()));
-    _process.stderr!.on('data', (message) => console.log(message.toString()));
+    _process.stdout!.on('data', (message) => ctx.pluginStdout(message.toString('utf8')));
+    _process.stderr!.on('data', (message) => ctx.pluginStderr(message.toString('utf8')));
 
 
     return new PluginProcess(_process);
@@ -76,7 +77,7 @@ class SendMessageForResultHandler {
   }
 
   messageListener = (incomingMessage: unknown) => {
-    console.log(JSON.stringify(incomingMessage, null, 2));
+    ctx.debug(JSON.stringify(incomingMessage, null, 2));
 
     if (!this.validateIpcMessage(incomingMessage)) {
       return this.reject(new Error(`Bad message from plugin. ${JSON.stringify(incomingMessage, null, 2)}`))

src/ui/components/plan-component.tsx

@@ -0,0 +1,56 @@
+import { Spinner, StatusMessage } from '@inkjs/ui';
+import { Box, Static, Text } from 'ink';
+import { EventEmitter } from 'node:events';
+import React, { useEffect, useState } from 'react';
+
+import { ProcessState, ProcessStatus } from '../reporters/default-reporter.js';
+
+export function PlanComponent({ eventTarget }: { eventTarget: EventEmitter }) {
+  const [staticOutput, setStaticOutput] = useState([] as Array<string>);
+  const [processState, setProcessState] = useState({
+    process: [],
+  } as ProcessState);
+
+  useEffect(() => {
+    eventTarget.on('static_output', (newValue: any) => {
+      setStaticOutput([...newValue]);
+    });
+
+    eventTarget.on('process', (state: ProcessState) => {
+      setProcessState(structuredClone(state));
+    });
+  }, []);
+
+  return <Box flexDirection="column">
+    <Static items={staticOutput}>
+      {
+        (text, idx) => <Text color="cyan" key={idx}>{text}</Text>
+      }
+    </Static>
+    {
+      processState.process?.map((item, i) =>
+        <Box flexDirection="column" key={i}>
+          {
+            item.status === ProcessStatus.IN_PROGRESS
+              ? <Spinner label={item.name}/>
+              : <StatusMessage variant="success">{item.name}</StatusMessage>
+          }
+          <Box flexDirection="column" marginLeft={2}>
+            {
+              item.subprocess?.map((subItem, i) =>
+                subItem.status === ProcessStatus.IN_PROGRESS
+                  ? <Spinner key={i} label={subItem.name}/>
+                  : <StatusMessage key={i} variant="success">{subItem.name}</StatusMessage>
+              ) ?? []
+            }
+          </Box>
+        </Box>
+      ) ?? []
+    }
+    {
+      staticOutput.flatMap((arr) => arr.split('\n')).slice(-5).map((item, i) =>
+        <Text key={i}>{item}</Text>
+      )
+    }
+  </Box>
+}

src/ui/reporters/default-reporter.tsx

@@ -0,0 +1,109 @@
+import { render } from 'ink';
+import { EventEmitter } from 'node:events';
+import React from 'react';
+
+import { ctx, Event } from '../../orchestrators/context.js';
+import { PlanComponent } from '../components/plan-component.js';
+import { Reporter } from './reporter.js';
+
+export enum ProcessStatus {
+  NOT_STARTED,
+  IN_PROGRESS,
+  FINISHED,
+}
+
+export interface ProcessState {
+  process: Array<{
+    name: string;
+    status: ProcessStatus;
+    subprocess: Array<{
+      name: string;
+      status: ProcessStatus;
+    }>
+  }>
+}
+
+export class DefaultReporter implements Reporter {
+
+  private renderEmitter = new EventEmitter();
+  private staticOutput = new Array<any>()
+  private processState = {
+    process: [],
+  } as ProcessState
+
+  constructor() {
+    ctx.on(Event.OUTPUT, (...args) => this.onOutputEvent(...args));
+    ctx.on(Event.PROCESS_START, (name) => this.onProcessStartEvent(name))
+    ctx.on(Event.PROCESS_FINISH, (name) => this.onProcessFinishEvent(name))
+    ctx.on(Event.SUB_PROCESS_START, (name, processName) => this.onSubprocessStartEvent(name, processName));
+    ctx.on(Event.SUB_PROCESS_FINISH, (name, processName) => this.onSubprocessFinishEvent(name, processName))
+
+    render(<PlanComponent eventTarget={this.renderEmitter}/>)
+
+  }
+
+  async promptConfirmation(): Promise<boolean> {
+    return true;
+  }
+
+  private onOutputEvent(...args: unknown[]) {
+    this.staticOutput.push(...args)
+    this.renderEmitter.emit('static_output', this.staticOutput);
+  }
+
+  private onProcessStartEvent(name: string): void {
+    this.processState.process.push({
+      name,
+      status: ProcessStatus.IN_PROGRESS,
+      subprocess: [],
+    })
+
+    this.renderEmitter.emit('process', this.processState);
+  }
+
+  private onProcessFinishEvent(name: string): void {
+    const process = this.processState.process
+      .find((process) => process.name === name);
+    if (!process) {
+      return;
+    }
+
+    process.status = ProcessStatus.FINISHED;
+
+    this.renderEmitter.emit('process', this.processState.process);
+
+  }
+
+  private onSubprocessStartEvent(name: string, processName: string): void {
+    const process = this.processState.process
+      .find((process) => process.name === processName);
+
+    if (!process) return;
+
+    process.subprocess.push({
+      name,
+      status: ProcessStatus.IN_PROGRESS,
+    })
+
+    this.renderEmitter.emit('process', this.processState);
+  }
+
+  private onSubprocessFinishEvent(name: string, processName: string): void {
+    const process = this.processState.process
+      .find((process) => process.name === processName);
+    if (!process) {
+      return;
+    }
+
+    const subprocess = process.subprocess.find((subprocess) => subprocess.name === name)
+    if (!subprocess) {
+      return;
+    }
+
+    subprocess.status = ProcessStatus.FINISHED;
+
+    this.onOutputEvent(`${name} finished processing`)
+    this.renderEmitter.emit('process', this.processState);
+  }
+
+}

src/ui/reporters/plain-reporter.ts

@@ -0,0 +1,18 @@
+import { ctx, Event } from '../../orchestrators/context.js';
+import { Reporter } from './reporter.js';
+
+export class PlainReporter implements Reporter {
+
+  constructor() {
+    ctx.on(Event.OUTPUT, (...args) => console.log(...args))
+    ctx.on(Event.PROCESS_START, (name) => console.log(name))
+    ctx.on(Event.PROCESS_FINISH, (name) => console.log(name))
+    ctx.on(Event.SUB_PROCESS_START, (name) => console.log(name))
+    ctx.on(Event.SUB_PROCESS_FINISH, (name) => console.log(name))
+  }
+
+  async promptConfirmation(): Promise<boolean> {
+    return true;
+  }
+
+}