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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  console.log('========================');
  console.log('========================');
  console.log('========================');
  
  const process = Machine({
    id: 'pid:1',
    initial: 'setup',
    context: {
      retryRegisterOnError: false,
      retries: 0,
    },
    states: {
      setup: {
        invoke: {
          src: 'register',
          onDone: 'idle',
          onError: 'error'
        }
      },
      idle: {
        on: {
          TEARDOWN: 'teardown'
        }
      },
      error: {
        on: {
          always: {
            target: 'setup',
            cond: c => c.retyRegisterOnErorr,
            actions: c => c.retires += 1
          }
        }
      }
    }
  });
  

  const supervisor = Machine({
    id: 'supervisor_1',
    initial: 'setup',
    context: {
      processes: []
    },
    states: {
      setup: {
        on: {
          // Do any setup logic needed
          '': 'running',
        }
      },
      running: {
        on: {
          PROPOGATE: {
            actions: [
              (...args) => console.log('PROPOGATE', args),
            ]
          },
          SPAWN: {
            actions: assign({
              processes: (c, e) => {
                console.log('SPAWN', {c,e});
                return [
                  ...c.processes,
                  spawn(e.process, `pid:${process.id}`)
                ]
              }
            })
          } 
        }
      }
    }
  });
  
  
  const parentProcess = Machine({
    id: 'form',
    initial: 'setup',
    context: {
      supervisor: undefined,
      isValid: false,
    },
    on: {
      SPAWN: {
        actions: (c) => {
          c.supervisor.send('SPAWN_PROCESS')
        } 
      }
    },
    states: {
      setup: {
        on: {
          '': {
            target: 'initialized',
            actions: assign({
              supervisor: () => spawn(supervisor)
            })
          }
        }
      },
      initialized: {
        type: 'parallel',
        states: {
          behaviour: {
            initial: 'unchanged',
            states: {
              unchanged: {
                on: {
                  CHANGE: 'changing',
                }
              },
              changing: {
                on: {
                  CHANGE: 'changing',
                  CHANGED: 'changed',
                }
              },
              changed: {
                on: {
                  CHANGE: 'changing',
                  SUMBIT: {
                    target: 'busy',
                    cond: 'isValid'
                  }
                }
              },
              busy: {
                on: {
                  SUCCESS: 'success',
                  ERROR: 'error'
                }
              },
              success: {
                on: {
                  '': 'unchanged',
                }
              },
              error: {
                on: {
                  '': 'unchanged',
                }
              },
            }
          },
          validity: {
            initial: 'validating',
            states: {
              validating: {
                invoke: {
                  src: 'validateFormObject',
                  onDone: {
                    target: 'valid',
                    actions: assign({
                      isValid: true
                    })
                  },
                  onError: {
                    target: 'invalid',
                    actions: assign({
                      isValid: false
                    })
                  }
                },
                on: {
                  VALIDATE: 'validating',
                }
              },
              valid: {
                on: {
                  VALIDATE: 'validating'
                }
              },
              invalid: {
                on: {
                  VALIDATE: 'validating'
                }
              },
            }
          },
        }
      }
    }
  }, {
    guards: {
      isValid: c => c.isValid,
    },
    services: {
      async validateFormObject(context, event) {
        try {
          console.log('supervisor', context.supervisor)
          context.supervisor.send('PROPOGATE', {
            msg: 'VALIDATE'
          });
          
          return Promise.resolve();
        } catch(e) {
          console.log('ERROR: ', e)
          return Promise.reject(e);
        }
      }
    }
  });
  
  const s = interpret(parentProcess);
  s.start();
  s.send('SPAWN', { process });