Yet-to-be-named Statechart DSL

fetchMachine.js

const fetchMachine = createMachine((statechart, { goto, send, store }) => {
    store.retries = 0;
    return statechart`
        main machine fetch {
            initial state idle {
                on:FETCH ${() => goto('loading')}
            }

            state loading {
                @enter ${async () => {
                    if (store.error) store.error = undefined;
                    try {
                        const res = await fetch('https://pokeapi.co/api/v2/pokemon/ditto');
                        const data = await res.json();
                        send('RESOLVE', { data });
                    } catch (e) {
                        const error = e.message || 'An unknown error occured';
                        send('REJECT', { error });
                    }
                }}
                on:RESOLVE ${({ data }) => {
                    store.data = data;
                    goto('success')
                }}
                on:REJECT ${({ error }) => {
                    store.error = error;
                    goto('failure')
                }}
            }

            state failure {
                on:RETRY ${() => {
                    store.retries++;
                    goto('loading');
                }}
            }

            final state success {}
        }
    `
});