useMachine.js

import { readable } from "svelte/store";
import { interpret } from "xstate";
import { debugMachineTransition } from "./debug";

export function useMachine(machine: any, options: any = {}) {
  const service = interpret(machine, { ...options, devTools: true });

  const state = readable(machine.initialState, set => {
    service
      .onTransition(newState => {
        debugMachineTransition(`${machine.id}`);
        if (newState.changed) {
          set(newState);
        }
      })
      .start();

    // Make sure the state is initialized in the store
    set(service.state);

    return () => {
      service.stop();
    };
  });

  return {
    state,
    service,
    send: service.send,
  };
}