@xstate/react 2.0.0 → 4.0.0-alpha.0

package/dist/xstate-react.cjs.prod.js

@@ -0,0 +1,231 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var withSelector = require('use-sync-external-store/shim/with-selector');
+var xstate = require('xstate');
+var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
+var useConstant = require('./useConstant-eeb49d3f.cjs.prod.js');
+var shim = require('use-sync-external-store/shim');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var useIsomorphicLayoutEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicLayoutEffect);
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
+var _excluded = ["context", "actors", "guards", "actions", "delays", "state"];
+function useIdleInterpreter(getMachine, options) {
+  var machine = useConstant.useConstant(function () {
+    return typeof getMachine === 'function' ? getMachine() : getMachine;
+  });
+
+  var context = options.context,
+      actors = options.actors,
+      guards = options.guards,
+      actions = options.actions,
+      delays = options.delays,
+      rehydratedState = options.state,
+      interpreterOptions = _objectWithoutProperties(options, _excluded);
+
+  var service = useConstant.useConstant(function () {
+    var machineConfig = {
+      context: context,
+      guards: guards,
+      actions: actions,
+      actors: actors,
+      delays: delays
+    };
+    var machineWithConfig = machine.provide(machineConfig);
+    return xstate.interpret(machineWithConfig, interpreterOptions);
+  }); // Make sure options are kept updated when they change.
+  // This mutation assignment is safe because the service instance is only used
+  // in one place -- this hook's caller.
+
+  useIsomorphicLayoutEffect__default['default'](function () {
+    Object.assign(service.machine.options.actions, actions);
+    Object.assign(service.machine.options.guards, guards);
+    Object.assign(service.machine.options.actors, actors);
+    Object.assign(service.machine.options.delays, delays);
+  }, [actions, guards, actors, delays]);
+  return service;
+}
+function useInterpret(getMachine) {
+  for (var _len = arguments.length, _ref = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    _ref[_key - 1] = arguments[_key];
+  }
+
+  var _ref$ = _ref[0],
+      options = _ref$ === void 0 ? {} : _ref$,
+      observerOrListener = _ref[1];
+  var service = useIdleInterpreter(getMachine, options);
+  React.useEffect(function () {
+    if (!observerOrListener) {
+      return;
+    }
+
+    var sub = service.subscribe(xstate.toObserver(observerOrListener));
+    return function () {
+      sub.unsubscribe();
+    };
+  }, [observerOrListener]);
+  React.useEffect(function () {
+    var rehydratedState = options.state;
+    service.start(rehydratedState ? xstate.State.create(rehydratedState) : undefined);
+    return function () {
+      service.stop();
+      service.status = xstate.InterpreterStatus.NotStarted;
+    };
+  }, []);
+  return service;
+}
+
+function identity(a) {
+  return a;
+}
+
+var isEqual = function isEqual(prevState, nextState) {
+  return prevState === nextState || nextState.changed === false;
+};
+
+// TODO: rethink how we can do this better
+var cachedRehydratedStates = new WeakMap();
+function useMachine(getMachine) {
+  for (var _len = arguments.length, _ref = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    _ref[_key - 1] = arguments[_key];
+  }
+
+  var _ref$ = _ref[0],
+      options = _ref$ === void 0 ? {} : _ref$;
+  // using `useIdleInterpreter` allows us to subscribe to the service *before* we start it
+  // so we don't miss any notifications
+  var service = useIdleInterpreter(getMachine, options);
+  var getSnapshot = React.useCallback(function () {
+    if (service.status === xstate.InterpreterStatus.NotStarted && options.state) {
+      var cached = cachedRehydratedStates.get(options.state);
+
+      if (cached) {
+        return cached;
+      }
+
+      var created = xstate.State.create(options.state);
+      cachedRehydratedStates.set(options.state, created);
+      return created;
+    }
+
+    return service.getSnapshot();
+  }, [service]);
+  var subscribe = React.useCallback(function (handleStoreChange) {
+    var _service$subscribe = service.subscribe(handleStoreChange),
+        unsubscribe = _service$subscribe.unsubscribe;
+
+    return unsubscribe;
+  }, [service]);
+  var storeSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
+  React.useEffect(function () {
+    var rehydratedState = options.state;
+    service.start(rehydratedState ? xstate.State.create(rehydratedState) : undefined);
+    return function () {
+      service.stop();
+      service.status = xstate.InterpreterStatus.NotStarted;
+    };
+  }, []);
+  return [storeSnapshot, service.send, service];
+}
+
+function useActor(actorRef) {
+  var subscribe = React.useCallback(function (handleStoreChange) {
+    var _actorRef$subscribe = actorRef.subscribe(handleStoreChange),
+        unsubscribe = _actorRef$subscribe.unsubscribe;
+
+    return unsubscribe;
+  }, [actorRef]);
+  var boundGetSnapshot = React.useCallback(function () {
+    return actorRef.getSnapshot();
+  }, [actorRef]);
+  var storeSnapshot = shim.useSyncExternalStore(subscribe, boundGetSnapshot, boundGetSnapshot);
+  var boundSend = React.useCallback(function (event) {
+    return actorRef.send(event);
+  }, [actorRef]);
+  return [storeSnapshot, boundSend];
+}
+
+function defaultCompare(a, b) {
+  return a === b;
+}
+
+function useSelector(actor, selector) {
+  var compare = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultCompare;
+  var subscribe = React.useCallback(function (handleStoreChange) {
+    var _actor$subscribe = actor.subscribe(handleStoreChange),
+        unsubscribe = _actor$subscribe.unsubscribe;
+
+    return unsubscribe;
+  }, [actor]);
+  var boundGetSnapshot = React.useCallback(function () {
+    return actor.getSnapshot();
+  }, [actor]);
+  var selectedSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, boundGetSnapshot, boundGetSnapshot, selector, compare);
+  return selectedSnapshot;
+}
+
+/**
+ * React hook that spawns an `ActorRef` with the specified `behavior`.
+ * The returned `ActorRef` can be used with the `useActor(actorRef)` hook.
+ *
+ * @param behavior The actor behavior to spawn
+ * @returns An ActorRef with the specified `behavior`
+ */
+
+function useSpawn(behavior) {
+  var actorRef = useConstant.useConstant(function () {
+    // TODO: figure out what to do about the name argument
+    return new xstate.ObservableActorRef(behavior, '');
+  });
+  React.useEffect(function () {
+    actorRef.start();
+    return function () {
+      actorRef.stop();
+    };
+  }, []);
+  return actorRef;
+}
+
+exports.useActor = useActor;
+exports.useInterpret = useInterpret;
+exports.useMachine = useMachine;
+exports.useSelector = useSelector;
+exports.useSpawn = useSpawn;

package/dist/xstate-react.esm.js

@@ -0,0 +1,229 @@
+import { useEffect, useState, useCallback } from 'react';
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
+import { toObserver, State, InterpreterStatus, interpret, ObservableActorRef } from 'xstate';
+import { u as useConstant, _ as _slicedToArray } from './useConstant-94bfdbb5.esm.js';
+import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
+var _excluded = ["context", "actors", "guards", "actions", "delays", "state"];
+function useIdleInterpreter(getMachine, options) {
+  var machine = useConstant(function () {
+    return typeof getMachine === 'function' ? getMachine() : getMachine;
+  });
+
+  if (process.env.NODE_ENV !== 'production' && typeof getMachine !== 'function') {
+    var _useState = useState(machine),
+        _useState2 = _slicedToArray(_useState, 1),
+        initialMachine = _useState2[0];
+
+    if (getMachine !== initialMachine) {
+      console.warn('Machine given to `useMachine` has changed between renders. This is not supported and might lead to unexpected results.\n' + 'Please make sure that you pass the same Machine as argument each time.');
+    }
+  }
+
+  var context = options.context,
+      actors = options.actors,
+      guards = options.guards,
+      actions = options.actions,
+      delays = options.delays,
+      rehydratedState = options.state,
+      interpreterOptions = _objectWithoutProperties(options, _excluded);
+
+  var service = useConstant(function () {
+    var machineConfig = {
+      context: context,
+      guards: guards,
+      actions: actions,
+      actors: actors,
+      delays: delays
+    };
+    var machineWithConfig = machine.provide(machineConfig);
+    return interpret(machineWithConfig, interpreterOptions);
+  }); // Make sure options are kept updated when they change.
+  // This mutation assignment is safe because the service instance is only used
+  // in one place -- this hook's caller.
+
+  useIsomorphicLayoutEffect(function () {
+    Object.assign(service.machine.options.actions, actions);
+    Object.assign(service.machine.options.guards, guards);
+    Object.assign(service.machine.options.actors, actors);
+    Object.assign(service.machine.options.delays, delays);
+  }, [actions, guards, actors, delays]);
+  return service;
+}
+function useInterpret(getMachine) {
+  for (var _len = arguments.length, _ref = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    _ref[_key - 1] = arguments[_key];
+  }
+
+  var _ref$ = _ref[0],
+      options = _ref$ === void 0 ? {} : _ref$,
+      observerOrListener = _ref[1];
+  var service = useIdleInterpreter(getMachine, options);
+  useEffect(function () {
+    if (!observerOrListener) {
+      return;
+    }
+
+    var sub = service.subscribe(toObserver(observerOrListener));
+    return function () {
+      sub.unsubscribe();
+    };
+  }, [observerOrListener]);
+  useEffect(function () {
+    var rehydratedState = options.state;
+    service.start(rehydratedState ? State.create(rehydratedState) : undefined);
+    return function () {
+      service.stop();
+      service.status = InterpreterStatus.NotStarted;
+    };
+  }, []);
+  return service;
+}
+
+function identity(a) {
+  return a;
+}
+
+var isEqual = function isEqual(prevState, nextState) {
+  return prevState === nextState || nextState.changed === false;
+};
+
+// TODO: rethink how we can do this better
+var cachedRehydratedStates = new WeakMap();
+function useMachine(getMachine) {
+  for (var _len = arguments.length, _ref = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    _ref[_key - 1] = arguments[_key];
+  }
+
+  var _ref$ = _ref[0],
+      options = _ref$ === void 0 ? {} : _ref$;
+  // using `useIdleInterpreter` allows us to subscribe to the service *before* we start it
+  // so we don't miss any notifications
+  var service = useIdleInterpreter(getMachine, options);
+  var getSnapshot = useCallback(function () {
+    if (service.status === InterpreterStatus.NotStarted && options.state) {
+      var cached = cachedRehydratedStates.get(options.state);
+
+      if (cached) {
+        return cached;
+      }
+
+      var created = State.create(options.state);
+      cachedRehydratedStates.set(options.state, created);
+      return created;
+    }
+
+    return service.getSnapshot();
+  }, [service]);
+  var subscribe = useCallback(function (handleStoreChange) {
+    var _service$subscribe = service.subscribe(handleStoreChange),
+        unsubscribe = _service$subscribe.unsubscribe;
+
+    return unsubscribe;
+  }, [service]);
+  var storeSnapshot = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
+  useEffect(function () {
+    var rehydratedState = options.state;
+    service.start(rehydratedState ? State.create(rehydratedState) : undefined);
+    return function () {
+      service.stop();
+      service.status = InterpreterStatus.NotStarted;
+    };
+  }, []);
+  return [storeSnapshot, service.send, service];
+}
+
+function useActor(actorRef) {
+  var subscribe = useCallback(function (handleStoreChange) {
+    var _actorRef$subscribe = actorRef.subscribe(handleStoreChange),
+        unsubscribe = _actorRef$subscribe.unsubscribe;
+
+    return unsubscribe;
+  }, [actorRef]);
+  var boundGetSnapshot = useCallback(function () {
+    return actorRef.getSnapshot();
+  }, [actorRef]);
+  var storeSnapshot = useSyncExternalStore(subscribe, boundGetSnapshot, boundGetSnapshot);
+  var boundSend = useCallback(function (event) {
+    return actorRef.send(event);
+  }, [actorRef]);
+  return [storeSnapshot, boundSend];
+}
+
+function defaultCompare(a, b) {
+  return a === b;
+}
+
+function useSelector(actor, selector) {
+  var compare = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultCompare;
+  var subscribe = useCallback(function (handleStoreChange) {
+    var _actor$subscribe = actor.subscribe(handleStoreChange),
+        unsubscribe = _actor$subscribe.unsubscribe;
+
+    return unsubscribe;
+  }, [actor]);
+  var boundGetSnapshot = useCallback(function () {
+    return actor.getSnapshot();
+  }, [actor]);
+  var selectedSnapshot = useSyncExternalStoreWithSelector(subscribe, boundGetSnapshot, boundGetSnapshot, selector, compare);
+  return selectedSnapshot;
+}
+
+/**
+ * React hook that spawns an `ActorRef` with the specified `behavior`.
+ * The returned `ActorRef` can be used with the `useActor(actorRef)` hook.
+ *
+ * @param behavior The actor behavior to spawn
+ * @returns An ActorRef with the specified `behavior`
+ */
+
+function useSpawn(behavior) {
+  var actorRef = useConstant(function () {
+    // TODO: figure out what to do about the name argument
+    return new ObservableActorRef(behavior, '');
+  });
+  useEffect(function () {
+    actorRef.start();
+    return function () {
+      actorRef.stop();
+    };
+  }, []);
+  return actorRef;
+}
+
+export { useActor, useInterpret, useMachine, useSelector, useSpawn };

package/fsm/dist/xstate-react-fsm.cjs.d.ts

@@ -0,0 +1 @@
+export * from "../../dist/declarations/src/fsm";

package/fsm/dist/xstate-react-fsm.cjs.dev.js

@@ -0,0 +1,98 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var withSelector = require('use-sync-external-store/shim/with-selector');
+var useConstant = require('../../dist/useConstant-644f0e11.cjs.dev.js');
+var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
+var fsm = require('@xstate/fsm');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var useIsomorphicLayoutEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicLayoutEffect);
+
+function identity(a) {
+  return a;
+}
+
+var getServiceState = function getServiceState(service) {
+  var currentValue;
+  service.subscribe(function (state) {
+    currentValue = state;
+  }).unsubscribe();
+  return currentValue;
+};
+
+function useMachine(stateMachine, options) {
+  var persistedStateRef = React.useRef();
+
+  if (process.env.NODE_ENV !== 'production') {
+    var _useState = React.useState(stateMachine),
+        _useState2 = useConstant._slicedToArray(_useState, 1),
+        initialMachine = _useState2[0];
+
+    if (stateMachine !== initialMachine) {
+      console.warn('Machine given to `useMachine` has changed between renders. This is not supported and might lead to unexpected results.\n' + 'Please make sure that you pass the same Machine as argument each time.');
+    }
+  }
+
+  var _useConstant = useConstant.useConstant(function () {
+    var queue = [];
+    var service = fsm.interpret(fsm.createMachine(stateMachine.config, options ? options : stateMachine._options));
+    var send = service.send;
+
+    service.send = function (event) {
+      if (service.status === fsm.InterpreterStatus.NotStarted) {
+        queue.push(event);
+        return;
+      }
+
+      send(event);
+      persistedStateRef.current = service.state;
+    };
+
+    return [service, queue];
+  }),
+      _useConstant2 = useConstant._slicedToArray(_useConstant, 2),
+      service = _useConstant2[0],
+      queue = _useConstant2[1]; // TODO: consider using `useInsertionEffect` if available
+
+
+  useIsomorphicLayoutEffect__default['default'](function () {
+    if (options) {
+      service._machine._options = options;
+    }
+  });
+  var useServiceResult = useService(service);
+  React.useEffect(function () {
+    service.start(persistedStateRef.current);
+    queue.forEach(service.send);
+    persistedStateRef.current = service.state;
+    return function () {
+      service.stop();
+    };
+  }, []);
+  return useServiceResult;
+}
+
+var isEqual = function isEqual(_prevState, nextState) {
+  return nextState.changed === false;
+};
+
+function useService(service) {
+  var getSnapshot = React.useCallback(function () {
+    return getServiceState(service);
+  }, [service]);
+  var subscribe = React.useCallback(function (handleStoreChange) {
+    var _service$subscribe = service.subscribe(handleStoreChange),
+        unsubscribe = _service$subscribe.unsubscribe;
+
+    return unsubscribe;
+  }, [service]);
+  var storeSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
+  return [storeSnapshot, service.send, service];
+}
+
+exports.useMachine = useMachine;
+exports.useService = useService;

package/fsm/dist/xstate-react-fsm.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./xstate-react-fsm.cjs.prod.js");
+} else {
+  module.exports = require("./xstate-react-fsm.cjs.dev.js");
+}