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

machine.js

const machine = Machine({
        id: 'persist',
        strict: true,
        initial: 'idle',
        on: {
            UPDATE: {
                target: 'updating',
            },
        },
        states: {
            idle: {
                initial: 'idle',
                states: {
                    idle: {},
                    saved: {
                        after: {
                            1000: 'idle',
                        },
                    },
                },
            },
            updating: {
                entry: 'applyTransaction',
                always: [
                    {
                        target: 'queued',
                        cond: 'isDirty',
                    },
                    {
                        target: 'idle',
                    },
                ],
            },
            queued: {
                // on: {
                //     UPDATE: {target: 'updating'},
                // },
                after: {
                    1000: [
                        {
                            target: 'persisting.creating',
                            cond: 'isUnpersisted',
                            actions: 'setPersisting',
                        },
                        {
                            target: 'persisting.discarding',
                            cond: 'isBlank',
                        },
                        {
                            target: 'persisting.updating',
                            actions: 'setPersisting',
                        },
                    ],
                },
            },
            persisting: {
                states: {
                    creating: {
                        invoke: {
                            src: 'create',
                            onDone: {
                                target: '#persist.idle.saved',
                                actions: [
                                    'setId',
                                    'setPersisted',
                                    'notifyCreated',
                                ],
                            },
                            onError: {
                                target: '#persist.error',
                                actions: 'clearPersisting',
                            },
                        },
                    },
                    updating: {
                        invoke: {
                            src: 'update',
                            onDone: {
                                target: '#persist.idle.saved',
                                actions: 'setPersisted',
                            },
                            onError: {
                                target: '#persist.error',
                                actions: 'clearPersisting',
                            },
                        },
                    },
                    discarding: {
                        invoke: {
                            src: 'discard',
                            onDone: {
                                target: '#persist.idle',
                                actions: [
                                    'setPersisted',
                                    'notifyDiscarded',
                                ],
                            },
                            onError: {
                                target: '#persist.error',
                                actions: 'clearPersisting',
                            },
                        },
                    },
                },
            },
            error: {},
        },
    })