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

machine.js

var variantEditorMachine = Machine({
    id: 'editing',
    initial: 'editing',
    states: {
        editing: {
            id: 'live',
            on: {
                SAVE_CHANGES: 'saving',
                DISCARD_CHANGES: 'confirmingDiscard'
            }
        },
        confirmingDiscard: {
            on: {
                CONFIRM_DISCARD: {
                    actions: 'discard'
                },
                CANCEL_DISCARD: '#editing'
            }
        },
        saving: {
            on: {
                ON_SUCCESS: 'finish',
                ON_CONFLICT: 'solvingConflict',
                ON_FAILURE: 'editing'
            }
        },
        solvingConflict: {
            on: {
                OVERRIDE: 'finish',
                CANCEL: 'editing'
            }
        },
        finish: {
            id: 'finish',
            type: 'final'
        }
    }
}, {
    actions: {
        discard: sendParent('DISCARD')
    }
});

var contentEditorMachine = Machine({
    id: 'content',
    initial: 'unknown',
    context: {
        variants: [
            { id: '1', status: 'draft' },
            { id: '2', status: 'live' },
        ],
        targetVariant: {
            id: '2',
            status: 'live'
        }
    },
    states: {
        unknown: {
            id: 'unknown',
            on: {
                '': [
                    { target: 'live', cond: 'isLive' },
                    { target: 'draft.viewing', cond: 'isDraft' },
                    { target: 'draft' },
                ]
            }
        },
        live: {
            id: 'live',
            initial: 'viewing',
            states: {
                viewing: {
                    on: {
                        EDIT: '#draft.creating',
                        OPEN_DRAFT: {
                            target: '#draft.viewing',
                            actions: 'changeTargetVariant'
                        }
                    }
                }
            }
        },
        draft: {
            id: 'draft',
            initial: 'viewing',
            states: {
                creating: {
                    invoke: {
                        id: 'createDraft',
                        src: variantEditorMachine,
                        autoForward: true,
                        onDone: 'viewing'
                    },
                    on: {
                        CANCEL: '#unknown'
                    }
                },
                editing: {
                    invoke: {
                        id: 'editingDraft',
                        src: variantEditorMachine,
                        autoForward: true,
                        onDone: 'viewing'
                    },
                    on: {
                        DISCARD: '#unknown'
                    }
                },
                viewing: {
                    on: {
                        EDIT: 'editing',
                        OPEN_LIVE: {
                            target: '#live',
                            actions: 'changeTargetVariant'
                        },
                        PUBLISH: 'publishing'
                    }
                },
                publishing: {
                    on: {
                        CONFIRM_PUBLISHING: '#live',
                        CANCEL_PUBLISHING: 'viewing'
                    }
                }
            }
        }
    }
}, {
    guards: {
        isLive: function (ctx) { var _a, _b; return ((_b = (_a = ctx) === null || _a === void 0 ? void 0 : _a.targetVariant) === null || _b === void 0 ? void 0 : _b.status) === 'live'; },
        isDraft: function (ctx) { var _a, _b; return ((_b = (_a = ctx) === null || _a === void 0 ? void 0 : _a.targetVariant) === null || _b === void 0 ? void 0 : _b.status) === 'draft'; }
    },
    actions: {
        changeTargetVariant: assign({
            targetVariant: function (_, event) { return event.variant; }
        })
    }
});