Generated by XState Viz: https://xstate.js.org/viz

machine.js

const defEmit = {
  initial: 'awaitingEvent',
  states: {
    awaitingEvent: {
      on: {
        EMIT_EVENT: 'emitting',
      }
    },
    emitting: {
      on: {
        EMIT_COMPLETE: 'awaitingEvent',
      },
          initial: 'stream1',
      type: 'parallel',
      states: {
        stream1: {
          initial: 'emitting',
          states: {
            emitting: {
              always: [{
                target: 'complete',
                cond: 'isEventFromThisStream'
              }],
              on: {
                SUCCESS_1: 'complete',
                ERROR_1: 'failed'
              }
            },
            complete: {
              type: 'final'
            },
            failed: {
              type: 'final'
            }
          }
        },
        streamn: {
          initial: 'emitting',
          states: {
            emitting: {
              always: [{
                target: 'complete',
                cond: 'isEventFromThisStream'
              }],
                on: {
                SUCCESS_N: 'complete',
                ERROR_N: 'failed'
              }
            },
            complete: {
              type: 'final'
            },
            failed: {
              type: 'final'
            }
          }
        }
      }
    }
  }
}
const defSaving = {
    saving: {
      on: {
        ERROR: 'error',
        EMIT_EVENT: '#machine.libraryLoaded.recv.awaitingEvent'
      }
    },
    error: {
      on : {
        RETRY: 'saving'
      }
    }
  }
  const defRecv = {
    id: 'recv',
    initial: 'awaitingEvent',
    context: {
      retries: 0
    },
    states: {
      awaitingEvent: {
        on: {
          EVENT_RECEIVED: {
            target: 'checking'
          }
        }
      },
      checking: {
        on: {
          SUPERSEDED: 'awaitingEvent',
          PROCESS: 'processing'
        }
      },
      processing: {
        invoke: {
          src: 'processEvent',
          onDone: {
            target: 'saving'
          },
          onError: {
            target: 'failed'
          }
        }
      },
      saving: {
        initial: 'saving',
        states: defSaving,
      },
      failed: {
        invoke: {
          src: 'handleError',
          onDone: {
            target: 'awaitingEvent',
          }
        }
      }
    }
  };
  const defTracks = {
     initial: 'waiting',
    states: {
      waiting: {
        on: {
          LOAD_TRACK: 'loading'
        }
      },
      loading: {
        on: {
          LOADED: 'loaded',
          ERROR: 'failed'
        }
      },
      loaded: {
        on: {
          LOAD_TRACK: 'loading'
        }
      },
      failed: {
        on: {
          LOAD_TRACK: 'loading'
        }
      }
    }
  }
  
  const def = {
    id: 'machine',
    initial: 'librariesLoading',
    context: {
      retries: 0
    },
    states: {
      librariesLoading: {
        on: {
          LOADED: 'librariesLoaded',
          ERROR: 'failed'
        }
      },
      librariesLoaded: {
        on: {
          SELECT_LIBRARY: 'libraryLoading',
        }
      },
      libraryLoading: {
        on: {
          LOADED: 'libraryLoaded',
          ERROR: 'failed'
        }
      },
      libraryLoaded: {
        type: 'parallel',
        states: {
          tracks: defTracks,
          emit: defEmit,
          recv: defRecv,
        }
      },
      failed: {
        type: 'final'
      }
    }
  };
  const machine = Machine(def);