Async State Machine Orchestration using Generator Functions

import { ref, readonly } from 'vue';
 
export function useAsyncWorkflow(stepGeneratorFn) {
  const currentState = ref('idle');
  const isProcessing = ref(false);
  let iterator = null;
 
  const start = async (...args) => {
    iterator = stepGeneratorFn(...args);
    return next();
  };
 
  const next = async (payload) => {
    isProcessing.value = true;
    try {
      const { value, done } = await iterator.next(payload);
      if (done) {
        currentState.value = 'completed';
      } else {
        currentState.value = value.stateName;
      }
      return value;
    } finally {
      isProcessing.value = false;
    }
  };
 
  return { state: readonly(currentState), isProcessing, start, next };
}