@xstate/vue/dist/xstate-vue.development.cjs.js

XState tools for Vue

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var xstate = require('xstate');

function useActorRef(actorLogic, ...[options, observerOrListener]) {
  const actorRef = xstate.createActor(actorLogic, options);
  let sub;
  vue.onMounted(() => {
    if (observerOrListener) {
      sub = actorRef.subscribe(xstate.toObserver(observerOrListener));
    }
    actorRef.start();
  });
  vue.onBeforeUnmount(() => {
    actorRef.stop();
    sub?.unsubscribe();
  });
  return actorRef;
}

function defaultCompare(a, b) {
  return a === b;
}
const noop = () => {
  /* ... */
};
function useSelector(actor, selector, compare = defaultCompare) {
  const actorRefRef = vue.isRef(actor) ? actor : vue.shallowRef(actor);
  const selected = vue.shallowRef(selector(actorRefRef.value?.getSnapshot()));
  const updateSelectedIfChanged = nextSelected => {
    if (!compare(selected.value, nextSelected)) {
      selected.value = nextSelected;
    }
  };
  vue.watch(actorRefRef, (newActor, _, onCleanup) => {
    selected.value = selector(newActor?.getSnapshot());
    if (!newActor) {
      return;
    }
    const sub = newActor.subscribe({
      next: emitted => {
        updateSelectedIfChanged(selector(emitted));
      },
      error: noop,
      complete: noop
    });
    onCleanup(() => sub.unsubscribe());
  }, {
    immediate: true
  });
  return selected;
}

function useActor(actorLogic, options = {}) {
  if ('send' in actorLogic && typeof actorLogic.send === 'function') {
    throw new Error(`useActor() expects actor logic (e.g. a machine), but received an ActorRef. Use the useSelector(actorRef, ...) hook instead to read the ActorRef's snapshot.`);
  }
  function listener(nextSnapshot) {
    snapshot.value = nextSnapshot;
  }
  const actorRef = useActorRef(actorLogic, options, listener);
  const snapshot = useSelector(actorRef, s => s);
  return {
    snapshot,
    send: actorRef.send,
    actorRef: actorRef
  };
}

/** @alias useActor */
function useMachine(machine, ...[options]) {
  return useActor(machine, options);
}

exports.useActor = useActor;
exports.useActorRef = useActorRef;
exports.useMachine = useMachine;
exports.useSelector = useSelector;