@xstate/react 4.0.0-alpha.0 → 4.0.0-alpha.2

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
 var withSelector = require('use-sync-external-store/shim/with-selector');
+var useConstant = require('./useConstant-c09b427a.cjs.prod.js');
 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 }; }
@@ -18,13 +18,11 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   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;
 }
 
@@ -32,10 +30,8 @@ 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;
@@ -43,27 +39,21 @@ function _objectWithoutProperties(source, excluded) {
       target[key] = source[key];
     }
   }
-
   return target;
 }
 
-var _excluded = ["context", "actors", "guards", "actions", "delays", "state"];
+var _excluded = ["actors", "guards", "actions", "delays"];
 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 actors = options.actors,
+    guards = options.guards,
+    actions = options.actions,
+    delays = options.delays,
+    interpreterOptions = _objectWithoutProperties(options, _excluded);
   var service = useConstant.useConstant(function () {
     var machineConfig = {
-      context: context,
       guards: guards,
       actions: actions,
       actors: actors,
@@ -71,15 +61,16 @@ function useIdleInterpreter(getMachine, options) {
     };
     var machineWithConfig = machine.provide(machineConfig);
     return xstate.interpret(machineWithConfig, interpreterOptions);
-  }); // Make sure options are kept updated when they change.
+  });
+
+  // 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);
+    Object.assign(service.behavior.options.actions, actions);
+    Object.assign(service.behavior.options.guards, guards);
+    Object.assign(service.behavior.options.actors, actors);
+    Object.assign(service.behavior.options.delays, delays);
   }, [actions, guards, actors, delays]);
   return service;
 }
@@ -87,27 +78,25 @@ 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];
+    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);
+    service.start();
     return function () {
       service.stop();
       service.status = xstate.InterpreterStatus.NotStarted;
+      service._initState();
     };
   }, []);
   return service;
@@ -116,51 +105,33 @@ function useInterpret(getMachine) {
 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$;
+    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;
-
+      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);
+    service.start();
     return function () {
       service.stop();
       service.status = xstate.InterpreterStatus.NotStarted;
+      service._initState();
     };
   }, []);
   return [storeSnapshot, service.send, service];
@@ -169,8 +140,7 @@ function useMachine(getMachine) {
 function useActor(actorRef) {
   var subscribe = React.useCallback(function (handleStoreChange) {
     var _actorRef$subscribe = actorRef.subscribe(handleStoreChange),
-        unsubscribe = _actorRef$subscribe.unsubscribe;
-
+      unsubscribe = _actorRef$subscribe.unsubscribe;
     return unsubscribe;
   }, [actorRef]);
   var boundGetSnapshot = React.useCallback(function () {
@@ -186,13 +156,11 @@ function useActor(actorRef) {
 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;
-
+      unsubscribe = _actor$subscribe.unsubscribe;
     return unsubscribe;
   }, [actor]);
   var boundGetSnapshot = React.useCallback(function () {
@@ -209,21 +177,149 @@ function useSelector(actor, selector) {
  * @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, '');
+    return xstate.interpret(behavior);
   });
   React.useEffect(function () {
-    actorRef.start();
+    var _actorRef$start;
+    (_actorRef$start = actorRef.start) === null || _actorRef$start === void 0 ? void 0 : _actorRef$start.call(actorRef);
     return function () {
-      actorRef.stop();
+      var _stop, _ref;
+      (_stop = (_ref = actorRef).stop) === null || _stop === void 0 ? void 0 : _stop.call(_ref);
     };
   }, []);
   return actorRef;
 }
 
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+
+// From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
+function is(x, y) {
+  if (x === y) {
+    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+  } else {
+    return x !== x && y !== y;
+  }
+}
+function shallowEqual(objA, objB) {
+  if (is(objA, objB)) return true;
+  if (_typeof(objA) !== 'object' || objA === null || _typeof(objB) !== 'object' || objB === null) {
+    return false;
+  }
+  var keysA = Object.keys(objA);
+  var keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) return false;
+  for (var i = 0; i < keysA.length; i++) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+
+function createActorContext(machine, interpreterOptions, observerOrListener) {
+  var ReactContext = /*#__PURE__*/React.createContext(null);
+  var OriginalProvider = ReactContext.Provider;
+  function Provider(_ref) {
+    var children = _ref.children,
+      _ref$machine = _ref.machine,
+      providedMachine = _ref$machine === void 0 ? machine : _ref$machine,
+      options = _ref.options;
+    var actor = useInterpret(providedMachine, _objectSpread2(_objectSpread2({}, interpreterOptions), options), observerOrListener);
+    return /*#__PURE__*/React.createElement(OriginalProvider, {
+      value: actor,
+      children: children
+    });
+  }
+  Provider.displayName = "ActorProvider(".concat(machine.id, ")");
+  function useContext() {
+    var actor = React.useContext(ReactContext);
+    if (!actor) {
+      throw new Error("You used a hook from \"".concat(Provider.displayName, "\" but it's not inside a <").concat(Provider.displayName, "> component."));
+    }
+    return actor;
+  }
+  function useActor$1() {
+    var actor = useContext();
+    return useActor(actor);
+  }
+  function useSelector$1(selector, compare) {
+    var actor = useContext();
+    return useSelector(actor, selector, compare);
+  }
+  return {
+    Provider: Provider,
+    useActorRef: useContext,
+    useActor: useActor$1,
+    useSelector: useSelector$1
+  };
+}
+
+exports.createActorContext = createActorContext;
+exports.shallowEqual = shallowEqual;
 exports.useActor = useActor;
 exports.useInterpret = useInterpret;
 exports.useMachine = useMachine;