How to use @xstate/fsm - 5 common examples
To help you get started, we’ve selected a few @xstate/fsm examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
hashicorp / consul / ui / packages / consul-ui / app / services / state.js View on Github 
interpret(chart, options) {
chart = this.prepareChart(chart);
const service = interpret(this.machine(chart, options));
// returns subscription
service.subscribe(state => {
if (state.changed) {
this.log(chart, state);
options.onTransition(state);
}
});
return service;
}interpret: function(chart, options) {
chart = this.prepareChart(chart);
const service = interpret(this.machine(chart, options));
// returns subscription
service.subscribe(state => {
if (state.changed) {
this.log(chart, state);
options.onTransition(state);
}
});
return service;
},
guards: function(chart) {export function useMachine(
stateMachine: StateMachine.Machine
): [
StateMachine.State,
StateMachine.Service['send'],
StateMachine.Service
] {
const [state, setState] = useState(stateMachine.initialState);
const ref = useRef | null>(null);
if (ref.current === null) {
ref.current = interpret(stateMachine);
}
useEffect(() => {
if (!ref.current) {
return;
}
ref.current.subscribe(setState);
ref.current.start();
return () => {
ref.current!.stop();
// reset so next call re-initializes
ref.current = null;
};
}, [stateMachine]);export function useMachine(
stateMachine: StateMachine.Machine
): {
state: Ref>;
send: StateMachine.Service['send'];
service: StateMachine.Service;
} {
const state = ref>(stateMachine.initialState);
const service = interpret(stateMachine);
const send = (event: TE | TE['type']) => service.send(event);
service.subscribe(s => (state.value = s));
service.start();
onBeforeUnmount(() => {
service.stop();
});
return { state, send, service };
}machine(chart, options = {}) {
return createMachine(...this.addGuards(chart, options));
}
