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 connectMachine = Machine(
    {
        id: 'websocket',
        initial: 'idle',
        context: {
            retries: 0,
            subscriptions: [],
            queue: [],
        },
        states: {
            idle: {
                on: {
                    CONNECT: 'connecting',
                    SUBSCRIBE: {
                        target: 'connecting',
                        actions: ['queueSubscription'],
                    },
                },
            },
            connecting: {
                on: {
                    CONNECTED: 'active',
                    CONNECTION_LOST: 'connectionLost',
                    DISCONNECT: 'idle',
                    SUBSCRIBE: {
                        actions: ['queueSubscription'],
                    },
                },
            },
            active: {
                entry: ['dequeueSubscriptions'],
                on: {
                    DISCONNECT: 'idle',
                    CONNECTION_LOST: {
                        target: 'connectionLost',
                        actions: assign({
                            queue: (context) => context.subscriptions,
                            subscriptions: [],
                        })
                    },
                    SUBSCRIBE: {
                        actions: ['subscribe'],
                    },
                },
            },
            connectionLost: {
                on: {
                    always: [
                        {
                            target: 'connecting',
                            cond: 'shouldRetry',
                            actions: assign({
                                retries: (context, event) => context.retries + 1,
                            }),
                        },
                        { target: 'error' },
                    ],
                },
            },
            error: {
                final: true,
            },
        },
    },
    {
        actions: {
            subscribe: (context) => {
                // In reality this is async and needs a second action.
                context.subscriptions.push('subscription')
            },
            queueSubscription: (context) => {
                context.queue.push('subscription')
            },
            dequeueSubscriptions: (context) => {
                context.subscriptions.push(...context.queue)
                context.queue = [];
            },
        },
        guards: {
            shouldRetry: (context) => context.retries < 3,
        },
    },
);