Skip to content

Instantly share code, notes, and snippets.

@simontegg
Last active July 27, 2020 03:01
Show Gist options
  • Select an option

  • Save simontegg/0bcfa91c05c8ca9a0248592e6785bdbd to your computer and use it in GitHub Desktop.

Select an option

Save simontegg/0bcfa91c05c8ca9a0248592e6785bdbd to your computer and use it in GitHub Desktop.
Generated by XState Viz: https://xstate.js.org/viz
const machine = Machine({
"id": "wizard",
"initial": "idle",
"context": {
"steps": [
{
"title": "Step 1",
"next": true
},
{
"title": "Step 2",
"next": true
},
{
"title": "Step 3",
"next": true
},
{
"title": "Step 4 - Review",
"finish": true
}
],
"loading": true,
"currentStepIndex": -1,
"editIndex": null,
"message": "",
"messages": [],
"variables": {}
},
"invoke": {
"id": "messageQuery",
"src": {
"id": "messageQuery",
"key": "messageQuery",
"type": "compound",
"initial": "active",
"history": false,
"states": {
"active": {
"id": "messageQuery.active",
"key": "active",
"type": "atomic",
"history": false,
"states": {},
"on": {},
"transitions": [],
"entry": [],
"exit": [],
"activities": [],
"order": 1,
"invoke": []
},
"error": {
"id": "messageQuery.error",
"key": "error",
"type": "final",
"history": false,
"states": {},
"on": {},
"transitions": [],
"entry": [],
"exit": [],
"activities": [],
"order": 2,
"invoke": []
}
},
"on": {
"RESULT": [
{
"cond": {
"type": "xstate.guard",
"name": "hasErrors"
},
"target": [
"#messageQuery.error"
],
"event": "RESULT",
"actions": [],
"source": "#messageQuery",
"internal": false,
"eventType": "RESULT"
},
{
"actions": [
{
"type": "load"
}
],
"event": "RESULT",
"source": "#messageQuery",
"internal": true,
"eventType": "RESULT"
}
]
},
"transitions": [
{
"cond": {
"type": "xstate.guard",
"name": "hasErrors"
},
"target": [
"#messageQuery.error"
],
"event": "RESULT",
"actions": [],
"source": "#messageQuery",
"internal": false,
"eventType": "RESULT"
},
{
"actions": [
{
"type": "load"
}
],
"event": "RESULT",
"source": "#messageQuery",
"internal": true,
"eventType": "RESULT"
}
],
"entry": [],
"exit": [],
"activities": [
{
"id": "messageQuery:invocation[0]",
"type": "xstate.invoke",
"src": "messageQuery:invocation[0]"
}
],
"order": -1,
"invoke": [
{
"type": "xstate.invoke",
"id": "messageQuery:invocation[0]",
"src": "messageQuery:invocation[0]"
}
]
}
},
"on": {
"messageQuery.LOAD": {
"actions": "loadMessages"
}
},
"states": {
"idle": {
"id": "idle",
"on": {
"START": {
"target": "step1",
"actions": {
"type": "xstate.assign",
"assignment": {
"currentStepIndex": 0
}
}
}
}
},
"step1": {
"on": {
"PREVIOUS": {
"target": "idle",
"actions": {
"type": "xstate.assign",
"assignment": {
"currentStepIndex": -1
}
}
},
"NEXT": {
"target": "step2",
"actions": {
"type": "xstate.assign",
"assignment": {
"currentStepIndex": 1
}
}
}
}
},
"step2": {
"on": {
"PREVIOUS": {
"target": "step1",
"actions": {
"type": "xstate.assign",
"assignment": {
"currentStepIndex": 0
}
}
},
"NEXT": {
"target": "step3",
"actions": {
"type": "xstate.assign",
"assignment": {
"currentStepIndex": 2
}
}
}
}
},
"step3": {
"id": "step3",
"on": {
"PREVIOUS": {
"target": "step2",
"actions": {
"type": "xstate.assign",
"assignment": {
"currentStepIndex": 1
}
}
},
"NEXT": {
"target": "step4",
"actions": {
"type": "xstate.assign",
"assignment": {
"currentStepIndex": 3
}
}
}
}
},
"step4": {
"initial": "ready",
"states": {
"ready": {
"id": "ready",
"on": {
"PREVIOUS": {
"target": "#step3",
"actions": {
"type": "xstate.assign",
"assignment": {
"currentStepIndex": 2
}
}
},
"CLOSE": {
"target": "#idle",
"actions": {
"type": "xstate.assign",
"assignment": {
"currentStepIndex": -1
}
}
},
"EDIT": {
"target": "editing",
"actions": "edit"
}
}
},
"editing": {
"on": {
"EDIT": {
"actions": "edit"
},
"CHANGE": {
"actions": "change"
},
"SAVE": {
"target": "saving",
"actions": "prepareSave"
}
}
},
"saving": {
"invoke": {
"id": "addMessageMutation",
"onDone": {
"target": "#ready"
}
}
}
}
}
}
}, {
"actions": {
"edit": {
"type": "xstate.assign",
"assignment": {}
},
"change": {
"type": "xstate.assign",
"assignment": {}
},
"prepareSave": {
"type": "xstate.assign",
"assignment": {
"message": ""
}
},
"loadMessages": {
"type": "xstate.assign"
}
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment