Last active
February 24, 2020 01:35
-
-
Save hrafnkellpalsson/0bcbe350ea6754f4afd17aecf4c99ee4 to your computer and use it in GitHub Desktop.
Generated by XState Viz: https://xstate.js.org/viz
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // There must be exactly one initial state, which implies | |
| // there must be at least one finite state. | |
| // const dullHuman = Machine({ | |
| // id: 'dullHuman', | |
| // initial: 'idle', | |
| // states: { | |
| // idle: {} | |
| // } | |
| // }) | |
| // const simpleHuman = Machine({ | |
| // id: 'simpleHuman', | |
| // initial: 'idle', | |
| // states: { | |
| // idle: { | |
| // on: { | |
| // 'excited': 'juggling' | |
| // } | |
| // }, | |
| // juggling: { | |
| // on: { | |
| // 'frustrated': 'idle' | |
| // } | |
| // } | |
| // } | |
| // }); | |
| // const service = interpret(simpleHuman) | |
| // console.log('simpleHuman', simpleHuman) | |
| // console.log('service', service) | |
| // console.log('simpleHuman.config', simpleHuman.config) | |
| // console.log('simpleHuman.initialState', simpleHuman.initialState) | |
| // console.log('service.state', service.state) | |
| // type parallel replaces the initial state | |
| // instead the inital state moves into the state nodes | |
| // which in all useful machines are compound state nodes | |
| // const parallelHuman = Machine({ | |
| // id: 'parallelHuman', | |
| // type: 'parallel', | |
| // states: { | |
| // hands: { | |
| // initial: 'inPockets', | |
| // states: { | |
| // 'inPockets': { | |
| // on: { | |
| // 'excited': 'juggling', | |
| // } | |
| // }, | |
| // 'juggling': { | |
| // on: { | |
| // 'frustrated': 'inPockets' | |
| // } | |
| // } | |
| // } | |
| // }, | |
| // feet: { | |
| // initial: 'walking', | |
| // states: { | |
| // 'walking': { | |
| // on: { | |
| // 'energetic': 'running' | |
| // } | |
| // }, | |
| // 'running': { | |
| // on: { | |
| // 'tired': 'walking' | |
| // } | |
| // } | |
| // } | |
| // } | |
| // } | |
| // }) | |
| // The state nodes of a parallel machine could be | |
| // simple but that makes for a pretty useless machine | |
| // const simpleParallelHuman = Machine({ | |
| // id: 'parallelHuman', | |
| // type: 'parallel', | |
| // states: { | |
| // hands: { | |
| // }, | |
| // feet: { | |
| // } | |
| // } | |
| // }) | |
| // Events can be defined on the machine itself, rather | |
| // than on the states. | |
| // This machine demonstrates a specific type of self | |
| // transition, an internal transition | |
| // const wordMachine = Machine({ | |
| // id: 'word', | |
| // initial: 'left', | |
| // states: { | |
| // left: {}, | |
| // right: {}, | |
| // center: {}, | |
| // justify: {} | |
| // }, | |
| // on: { | |
| // // internal transitions | |
| // LEFT_CLICK: '.left', | |
| // RIGHT_CLICK: { target: '.right' }, // same as '.right' | |
| // CENTER_CLICK: { target: '.center', internal: true }, // same as '.center' | |
| // JUSTIFY_CLICK: { target: 'word.justify', internal: true } // same as '.justify' | |
| // } | |
| // }); | |
| // This machine demonstrates a specific type of self | |
| // transition, an external transition | |
| // const wordMachine = Machine({ | |
| // id: 'word', | |
| // initial: 'left', | |
| // states: { | |
| // left: {}, | |
| // right: {}, | |
| // center: {}, | |
| // justify: {} | |
| // }, | |
| // on: { | |
| // // external transitions | |
| // LEFT_CLICK: 'word.left', | |
| // RIGHT_CLICK: 'word.right', | |
| // CENTER_CLICK: { target: '.center', internal: false }, // same as 'word.center' | |
| // JUSTIFY_CLICK: { target: 'word.justify', internal: false } // same as 'word.justify' | |
| // } | |
| // }); | |
| const birthday = Machine({ | |
| id: "birthday", | |
| initial: "notStarted", | |
| states: { | |
| started: { | |
| initial: "boring", | |
| entry: (ctx, e) => console.log('Parent entry action executed'), | |
| exit: (ctx, e) => console.log('Parent exit action executed'), | |
| on: { | |
| CAKE_BONANZA: { | |
| target: ".fun", | |
| internal: true, | |
| actions: [(ctx, e) => console.log("Cake")] | |
| }, | |
| RANTING_RELATIVE: { | |
| target: "started.boring", // Works! | |
| // target: "birthday.started.boring", // Doesn't work! | |
| // internal: false, | |
| actions: (ctx, e) => console.log("Ranting") | |
| } | |
| }, | |
| states: { | |
| boring: { | |
| on: { | |
| EAT_MORE: "fun" | |
| } | |
| }, | |
| fun: { | |
| on: { | |
| EAT_LESS: "boring" | |
| } | |
| } | |
| } | |
| }, | |
| notStarted: { | |
| on: { | |
| SINGING: "started" | |
| } | |
| } | |
| } | |
| }); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment