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)
  
  const fetchMachine = Machine({
    id: 'fetch',
    initial: 'active',
    
    context: {
      past: [],
      current: null,
      queue: [1, 2, 3]
    },
    
    on: {
      CREATE: {
        actions: [assign({
          queue: context => [...context.queue, Math.random()]
        }), send("CREATED")]
      },
      CREATE_NEXT: {
        actions: [assign({
          queue: context => [Math.random(), ...context.queue]
        }), send("CREATED")]
      },
      MOVE: {
        actions: send("MOVE")
      }
    },
    
    states: {
      active: {
        type: "parallel",
        
        states: {
          past: {
            initial: "empty",
            states: {
              empty: {
                on: {
                  "": {
                    target: "filled",
                    cond: "hasPast"
                  }
                }
              },
              filled: {}
            }
          },
          current: {
            initial: "empty",
            states: {
              empty: {
                on: {
                  "": {
                    target: "filled",
                    cond: "hasCurrent"
                  }
                }
              },
              filled: {
                on: {
                  MOVE: {
                    target: "empty",
                    actions: assign({
                      current: context => null,
                      past: context => [...context.past, context.current]
                    }),
                    cond: "hasCurrent"
                  }
                }
              }
            }
          },
          queued: {
            initial: "empty",
            states: {
              empty: {
                on: {
                  "": {
                    target: "filled",
                    cond: "hasNext"
                  }
                }
              },
              filled: {
                on: {
                  MOVE: {
                    target: "empty",
                    actions: assign({
                      current: context => context.queue[0],
                      queue: context => context.queue.slice(1)
                    }),
                    cond: "hasNext"
                  }
                }
              }
            }
          }
        }
      }
    }
  }, {
    guards: {
      hasCurrent: context => !!context.current,
      hasNoCurrent: context => !context.current,
      hasNext: context => context.queue.length > 0,
      hasPast: context => context.past.length > 0
    }
  });