@xstate/react - npm Package Compare versions

Comparing version 4.0.0-alpha.1 to 4.0.0-alpha.2

dist/declarations/src/index.d.ts

@@ -1,6 +0,7 @@
-export { useMachine } from './useMachine';
-export { useActor } from './useActor';
-export { useInterpret } from './useInterpret';
-export { useSelector } from './useSelector';
-export { useSpawn } from './useSpawn';
-export { shallowEqual } from './shallowEqual';
+export { useMachine } from './useMachine.ts';
+export { useActor } from './useActor.ts';
+export { useInterpret } from './useInterpret.ts';
+export { useSelector } from './useSelector.ts';
+export { useSpawn } from './useSpawn.ts';
+export { shallowEqual } from './shallowEqual.ts';
+export { createActorContext } from './createActorContext.ts';

dist/declarations/src/types.d.ts

 import { EventObject, MachineContext, StateConfig } from 'xstate';
-export declare type MaybeLazy<T> = T | (() => T);
-export declare type NoInfer<T> = [T][T extends any ? 0 : any];
-export declare type Prop<T, K> = K extends keyof T ? T[K] : never;
+export type MaybeLazy<T> = T | (() => T);
+export type NoInfer<T> = [T][T extends any ? 0 : any];
+export type Prop<T, K> = K extends keyof T ? T[K] : never;
 export interface UseMachineOptions<TContext extends MachineContext, TEvent extends EventObject> {
@@ -6,0 +6,0 @@ /**

dist/declarations/src/useInterpret.d.ts

 import { AnyInterpreter, AnyStateMachine, AreAllImplementationsAssumedToBeProvided, InternalMachineImplementations, InterpreterFrom, InterpreterOptions, MachineImplementations, Observer, StateFrom } from 'xstate';
-import { MaybeLazy } from './types';
-import { UseMachineOptions } from './useMachine';
-export declare function useIdleInterpreter(getMachine: MaybeLazy<AnyStateMachine>, options: Partial<InterpreterOptions> & Partial<UseMachineOptions<any, never>> & Partial<MachineImplementations<any, never>>): AnyInterpreter;
-declare type RestParams<TMachine extends AnyStateMachine> = AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends false ? [
-    options: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta'], true>,
+import { MaybeLazy } from './types.ts';
+export declare function useIdleInterpreter(getMachine: MaybeLazy<AnyStateMachine>, options: Partial<InterpreterOptions<AnyStateMachine>> & Partial<MachineImplementations<any, never>>): AnyInterpreter;
+type RestParams<TMachine extends AnyStateMachine> = AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends false ? [
+    options: InterpreterOptions<TMachine> & InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta'], true>,
     observerOrListener?: Observer<StateFrom<TMachine>> | ((value: StateFrom<TMachine>) => void)
 ] : [
-    options?: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta']>,
+    options?: InterpreterOptions<TMachine> & InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta']>,
     observerOrListener?: Observer<StateFrom<TMachine>> | ((value: StateFrom<TMachine>) => void)
@@ -11,0 +10,0 @@ ];

dist/declarations/src/useMachine.d.ts

@@ -1,21 +0,10 @@
-import { AnyStateMachine, AreAllImplementationsAssumedToBeProvided, EventObject, InternalMachineImplementations, InterpreterFrom, InterpreterOptions, MachineContext, StateConfig, StateFrom } from 'xstate';
-import { MaybeLazy, Prop } from './types';
-export interface UseMachineOptions<TContext extends MachineContext, TEvent extends EventObject> {
-    /**
-     * If provided, will be merged with machine's `context`.
-     */
-    context?: Partial<TContext>;
-    /**
-     * The state to rehydrate the machine to. The machine will
-     * start at this state instead of its `initialState`.
-     */
-    state?: StateConfig<TContext, TEvent>;
-}
-declare type RestParams<TMachine extends AnyStateMachine> = AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends false ? [
-    options: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta'], true>
+import { AnyStateMachine, AreAllImplementationsAssumedToBeProvided, InternalMachineImplementations, InterpreterFrom, InterpreterOptions, StateFrom } from 'xstate';
+import { MaybeLazy, Prop } from './types.ts';
+type RestParams<TMachine extends AnyStateMachine> = AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends false ? [
+    options: InterpreterOptions<TMachine> & InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta'], true>
 ] : [
-    options?: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta']>
+    options?: InterpreterOptions<TMachine> & InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta']>
 ];
-declare type UseMachineReturn<TMachine extends AnyStateMachine, TInterpreter = InterpreterFrom<TMachine>> = [StateFrom<TMachine>, Prop<TInterpreter, 'send'>, TInterpreter];
+type UseMachineReturn<TMachine extends AnyStateMachine, TInterpreter = InterpreterFrom<TMachine>> = [StateFrom<TMachine>, Prop<TInterpreter, 'send'>, TInterpreter];
 export declare function useMachine<TMachine extends AnyStateMachine>(getMachine: MaybeLazy<TMachine>, ...[options]: RestParams<TMachine>): UseMachineReturn<TMachine>;
 export {};

dist/declarations/src/useSpawn.d.ts

@@ -1,2 +0,2 @@
-import { ActorRef, Behavior, EventObject } from 'xstate';
+import { ActorRef, ActorBehavior, EventObject } from 'xstate';
 /**
@@ -9,2 +9,2 @@ * React hook that spawns an `ActorRef` with the specified `behavior`.
  */
-export declare function useSpawn<TState, TEvent extends EventObject>(behavior: Behavior<TEvent, TState>): ActorRef<TEvent, TState>;
+export declare function useSpawn<TState, TEvent extends EventObject>(behavior: ActorBehavior<TEvent, TState>): ActorRef<TEvent, TState>;

dist/xstate-react.cjs.dev.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var useConstant = require('./useConstant-644f0e11.cjs.dev.js');
+var useConstant = require('./useConstant-ff65b597.cjs.dev.js');
 var React = require('react');
@@ -22,3 +22,2 @@ var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
@@ -29,3 +28,2 @@ key = sourceKeys[i];
   }
-
   return target;
@@ -38,6 +36,4 @@ }
   var key, i;
-
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
     for (i = 0; i < sourceSymbolKeys.length; i++) {
@@ -50,7 +46,6 @@ key = sourceSymbolKeys[i];
   }
-
   return target;
 }
 
-var _excluded = ["context", "actors", "guards", "actions", "delays", "state"];
+var _excluded = ["actors", "guards", "actions", "delays"];
 function useIdleInterpreter(getMachine, options) {
@@ -60,8 +55,6 @@ var machine = useConstant.useConstant(function () {
   });
-
   if (process.env.NODE_ENV !== 'production' && typeof getMachine !== 'function') {
     var _useState = React.useState(machine),
-        _useState2 = useConstant._slicedToArray(_useState, 1),
-        initialMachine = _useState2[0];
-
+      _useState2 = useConstant._slicedToArray(_useState, 1),
+      initialMachine = _useState2[0];
     if (getMachine !== initialMachine) {
@@ -71,14 +64,9 @@ 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 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,
@@ -91,6 +79,7 @@ actions: actions,
     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 () {
@@ -108,6 +97,5 @@ Object.assign(service.behavior.options.actions, actions);
   }
-
   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);
@@ -118,3 +106,2 @@ React.useEffect(function () {
     }
-
     var sub = service.subscribe(xstate.toObserver(observerOrListener));
@@ -126,7 +113,7 @@ return function () {
   React.useEffect(function () {
-    var rehydratedState = options.state;
-    service.start(rehydratedState ? service.behavior.createState(rehydratedState) : undefined);
+    service.start();
     return function () {
       service.stop();
       service.status = xstate.InterpreterStatus.NotStarted;
+      service._initState();
     };
@@ -140,9 +127,5 @@ }, []);
 }
-
 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) {
@@ -152,5 +135,4 @@ for (var _len = arguments.length, _ref = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _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
@@ -160,14 +142,2 @@ // so we don't miss any notifications
   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 = service.behavior.createState(options.state);
-      cachedRehydratedStates.set(options.state, created);
-      return created;
-    }
-
     return service.getSnapshot();
@@ -177,4 +147,3 @@ }, [service]);
     var _service$subscribe = service.subscribe(handleStoreChange),
-        unsubscribe = _service$subscribe.unsubscribe;
-
+      unsubscribe = _service$subscribe.unsubscribe;
     return unsubscribe;
@@ -184,7 +153,7 @@ }, [service]);
   React.useEffect(function () {
-    var rehydratedState = options.state;
-    service.start(rehydratedState ? service.behavior.createState(rehydratedState) : undefined);
+    service.start();
     return function () {
       service.stop();
       service.status = xstate.InterpreterStatus.NotStarted;
+      service._initState();
     };
@@ -198,4 +167,3 @@ }, []);
     var _actorRef$subscribe = actorRef.subscribe(handleStoreChange),
-        unsubscribe = _actorRef$subscribe.unsubscribe;
-
+      unsubscribe = _actorRef$subscribe.unsubscribe;
     return unsubscribe;
@@ -216,3 +184,2 @@ }, [actorRef]);
 }
-
 function useSelector(actor, selector) {
@@ -222,4 +189,3 @@ var compare = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultCompare;
     var _actor$subscribe = actor.subscribe(handleStoreChange),
-        unsubscribe = _actor$subscribe.unsubscribe;
-
+      unsubscribe = _actor$subscribe.unsubscribe;
     return unsubscribe;
@@ -241,3 +207,2 @@ }, [actor]);
  */
-
 function useSpawn(behavior) {
@@ -250,7 +215,5 @@ var actorRef = useConstant.useConstant(function () {
     var _actorRef$start;
-
     (_actorRef$start = actorRef.start) === null || _actorRef$start === void 0 ? void 0 : _actorRef$start.call(actorRef);
     return function () {
       var _stop, _ref;
-
       (_stop = (_ref = actorRef).stop) === null || _stop === void 0 ? void 0 : _stop.call(_ref);
@@ -265,13 +228,7 @@ };
 
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function (obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function (obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _typeof(obj);
+  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);
 }
@@ -287,14 +244,10 @@
 }
-
 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++) {
@@ -305,6 +258,97 @@ if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
   }
-
   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;
@@ -311,0 +355,0 @@ exports.useActor = useActor;

dist/xstate-react.cjs.prod.js

@@ -8,3 +8,3 @@ 'use strict';
 var withSelector = require('use-sync-external-store/shim/with-selector');
-var useConstant = require('./useConstant-eeb49d3f.cjs.prod.js');
+var useConstant = require('./useConstant-c09b427a.cjs.prod.js');
 var xstate = require('xstate');
@@ -22,3 +22,2 @@ var shim = require('use-sync-external-store/shim');
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
@@ -29,3 +28,2 @@ key = sourceKeys[i];
   }
-
   return target;
@@ -38,6 +36,4 @@ }
   var key, i;
-
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
     for (i = 0; i < sourceSymbolKeys.length; i++) {
@@ -50,7 +46,6 @@ key = sourceSymbolKeys[i];
   }
-
   return target;
 }
 
-var _excluded = ["context", "actors", "guards", "actions", "delays", "state"];
+var _excluded = ["actors", "guards", "actions", "delays"];
 function useIdleInterpreter(getMachine, options) {
@@ -60,14 +55,9 @@ var machine = useConstant.useConstant(function () {
   });
-
-  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,
@@ -80,6 +70,7 @@ actions: actions,
     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 () {
@@ -97,6 +88,5 @@ Object.assign(service.behavior.options.actions, actions);
   }
-
   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);
@@ -107,3 +97,2 @@ React.useEffect(function () {
     }
-
     var sub = service.subscribe(xstate.toObserver(observerOrListener));
@@ -115,7 +104,7 @@ return function () {
   React.useEffect(function () {
-    var rehydratedState = options.state;
-    service.start(rehydratedState ? service.behavior.createState(rehydratedState) : undefined);
+    service.start();
     return function () {
       service.stop();
       service.status = xstate.InterpreterStatus.NotStarted;
+      service._initState();
     };
@@ -129,9 +118,5 @@ }, []);
 }
-
 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) {
@@ -141,5 +126,4 @@ for (var _len = arguments.length, _ref = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _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
@@ -149,14 +133,2 @@ // so we don't miss any notifications
   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 = service.behavior.createState(options.state);
-      cachedRehydratedStates.set(options.state, created);
-      return created;
-    }
-
     return service.getSnapshot();
@@ -166,4 +138,3 @@ }, [service]);
     var _service$subscribe = service.subscribe(handleStoreChange),
-        unsubscribe = _service$subscribe.unsubscribe;
-
+      unsubscribe = _service$subscribe.unsubscribe;
     return unsubscribe;
@@ -173,7 +144,7 @@ }, [service]);
   React.useEffect(function () {
-    var rehydratedState = options.state;
-    service.start(rehydratedState ? service.behavior.createState(rehydratedState) : undefined);
+    service.start();
     return function () {
       service.stop();
       service.status = xstate.InterpreterStatus.NotStarted;
+      service._initState();
     };
@@ -187,4 +158,3 @@ }, []);
     var _actorRef$subscribe = actorRef.subscribe(handleStoreChange),
-        unsubscribe = _actorRef$subscribe.unsubscribe;
-
+      unsubscribe = _actorRef$subscribe.unsubscribe;
     return unsubscribe;
@@ -205,3 +175,2 @@ }, [actorRef]);
 }
-
 function useSelector(actor, selector) {
@@ -211,4 +180,3 @@ var compare = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultCompare;
     var _actor$subscribe = actor.subscribe(handleStoreChange),
-        unsubscribe = _actor$subscribe.unsubscribe;
-
+      unsubscribe = _actor$subscribe.unsubscribe;
     return unsubscribe;
@@ -230,3 +198,2 @@ }, [actor]);
  */
-
 function useSpawn(behavior) {
@@ -239,7 +206,5 @@ var actorRef = useConstant.useConstant(function () {
     var _actorRef$start;
-
     (_actorRef$start = actorRef.start) === null || _actorRef$start === void 0 ? void 0 : _actorRef$start.call(actorRef);
     return function () {
       var _stop, _ref;
-
       (_stop = (_ref = actorRef).stop) === null || _stop === void 0 ? void 0 : _stop.call(_ref);
@@ -254,13 +219,7 @@ };
 
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function (obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function (obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _typeof(obj);
+  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);
 }
@@ -276,14 +235,10 @@
 }
-
 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++) {
@@ -294,6 +249,97 @@ if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
   }
-
   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;
@@ -300,0 +346,0 @@ exports.useActor = useActor;

dist/xstate-react.esm.js

@@ -1,3 +0,3 @@
-import { u as useConstant, _ as _slicedToArray } from './useConstant-94bfdbb5.esm.js';
-import { useEffect, useState, useCallback } from 'react';
+import { u as useConstant, _ as _slicedToArray } from './useConstant-0013a606.esm.js';
+import { useEffect, useState, useCallback, createContext, createElement, useContext } from 'react';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
@@ -13,3 +13,2 @@ import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
@@ -20,3 +19,2 @@ key = sourceKeys[i];
   }
-
   return target;
@@ -29,6 +27,4 @@ }
   var key, i;
-
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
     for (i = 0; i < sourceSymbolKeys.length; i++) {
@@ -41,7 +37,6 @@ key = sourceSymbolKeys[i];
   }
-
   return target;
 }
 
-var _excluded = ["context", "actors", "guards", "actions", "delays", "state"];
+var _excluded = ["actors", "guards", "actions", "delays"];
 function useIdleInterpreter(getMachine, options) {
@@ -51,8 +46,6 @@ var machine = useConstant(function () {
   });
-
   if (process.env.NODE_ENV !== 'production' && typeof getMachine !== 'function') {
     var _useState = useState(machine),
-        _useState2 = _slicedToArray(_useState, 1),
-        initialMachine = _useState2[0];
-
+      _useState2 = _slicedToArray(_useState, 1),
+      initialMachine = _useState2[0];
     if (getMachine !== initialMachine) {
@@ -62,14 +55,9 @@ 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 actors = options.actors,
+    guards = options.guards,
+    actions = options.actions,
+    delays = options.delays,
+    interpreterOptions = _objectWithoutProperties(options, _excluded);
   var service = useConstant(function () {
     var machineConfig = {
-      context: context,
       guards: guards,
@@ -82,6 +70,7 @@ actions: actions,
     return 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(function () {
@@ -99,6 +88,5 @@ Object.assign(service.behavior.options.actions, actions);
   }
-
   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);
@@ -109,3 +97,2 @@ useEffect(function () {
     }
-
     var sub = service.subscribe(toObserver(observerOrListener));
@@ -117,7 +104,7 @@ return function () {
   useEffect(function () {
-    var rehydratedState = options.state;
-    service.start(rehydratedState ? service.behavior.createState(rehydratedState) : undefined);
+    service.start();
     return function () {
       service.stop();
       service.status = InterpreterStatus.NotStarted;
+      service._initState();
     };
@@ -131,9 +118,5 @@ }, []);
 }
-
 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) {
@@ -143,5 +126,4 @@ for (var _len = arguments.length, _ref = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _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
@@ -151,14 +133,2 @@ // so we don't miss any notifications
   var getSnapshot = useCallback(function () {
-    if (service.status === InterpreterStatus.NotStarted && options.state) {
-      var cached = cachedRehydratedStates.get(options.state);
-
-      if (cached) {
-        return cached;
-      }
-
-      var created = service.behavior.createState(options.state);
-      cachedRehydratedStates.set(options.state, created);
-      return created;
-    }
-
     return service.getSnapshot();
@@ -168,4 +138,3 @@ }, [service]);
     var _service$subscribe = service.subscribe(handleStoreChange),
-        unsubscribe = _service$subscribe.unsubscribe;
-
+      unsubscribe = _service$subscribe.unsubscribe;
     return unsubscribe;
@@ -175,7 +144,7 @@ }, [service]);
   useEffect(function () {
-    var rehydratedState = options.state;
-    service.start(rehydratedState ? service.behavior.createState(rehydratedState) : undefined);
+    service.start();
     return function () {
       service.stop();
       service.status = InterpreterStatus.NotStarted;
+      service._initState();
     };
@@ -189,4 +158,3 @@ }, []);
     var _actorRef$subscribe = actorRef.subscribe(handleStoreChange),
-        unsubscribe = _actorRef$subscribe.unsubscribe;
-
+      unsubscribe = _actorRef$subscribe.unsubscribe;
     return unsubscribe;
@@ -207,3 +175,2 @@ }, [actorRef]);
 }
-
 function useSelector(actor, selector) {
@@ -213,4 +180,3 @@ var compare = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultCompare;
     var _actor$subscribe = actor.subscribe(handleStoreChange),
-        unsubscribe = _actor$subscribe.unsubscribe;
-
+      unsubscribe = _actor$subscribe.unsubscribe;
     return unsubscribe;
@@ -232,3 +198,2 @@ }, [actor]);
  */
-
 function useSpawn(behavior) {
@@ -241,7 +206,5 @@ var actorRef = useConstant(function () {
     var _actorRef$start;
-
     (_actorRef$start = actorRef.start) === null || _actorRef$start === void 0 ? void 0 : _actorRef$start.call(actorRef);
     return function () {
       var _stop, _ref;
-
       (_stop = (_ref = actorRef).stop) === null || _stop === void 0 ? void 0 : _stop.call(_ref);
@@ -256,13 +219,7 @@ };
 
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function (obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function (obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _typeof(obj);
+  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);
 }
@@ -278,14 +235,10 @@
 }
-
 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++) {
@@ -296,6 +249,96 @@ if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
   }
-
   return true;
 }
 
-export { shallowEqual, useActor, useInterpret, useMachine, useSelector, useSpawn };
+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__*/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__*/createElement(OriginalProvider, {
+      value: actor,
+      children: children
+    });
+  }
+  Provider.displayName = "ActorProvider(".concat(machine.id, ")");
+  function useContext$1() {
+    var actor = 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$1();
+    return useActor(actor);
+  }
+  function useSelector$1(selector, compare) {
+    var actor = useContext$1();
+    return useSelector(actor, selector, compare);
+  }
+  return {
+    Provider: Provider,
+    useActorRef: useContext$1,
+    useActor: useActor$1,
+    useSelector: useSelector$1
+  };
+}
+
+export { createActorContext, shallowEqual, useActor, useInterpret, useMachine, useSelector, useSpawn };

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

@@ -5,3 +5,3 @@ 'use strict';
 
-var useConstant = require('../../dist/useConstant-644f0e11.cjs.dev.js');
+var useConstant = require('../../dist/useConstant-ff65b597.cjs.dev.js');
 var fsm = require('@xstate/fsm');
@@ -19,3 +19,2 @@ var React = require('react');
 }
-
 var getServiceState = function getServiceState(service) {
@@ -28,11 +27,8 @@ var 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];
-
+      _useState2 = useConstant._slicedToArray(_useState, 1),
+      initialMachine = _useState2[0];
     if (stateMachine !== initialMachine) {
@@ -42,25 +38,21 @@ 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;
+      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];
 
-    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
-
-
+  // TODO: consider using `useInsertionEffect` if available
   useIsomorphicLayoutEffect__default['default'](function () {
@@ -82,7 +74,5 @@ if (options) {
 }
-
 var isEqual = function isEqual(_prevState, nextState) {
   return nextState.changed === false;
 };
-
 function useService(service) {
@@ -94,4 +84,3 @@ var getSnapshot = React.useCallback(function () {
     var _service$subscribe = service.subscribe(handleStoreChange),
-        unsubscribe = _service$subscribe.unsubscribe;
-
+      unsubscribe = _service$subscribe.unsubscribe;
     return unsubscribe;
@@ -98,0 +87,0 @@ }, [service]);

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

@@ -9,3 +9,3 @@ 'use strict';
 var withSelector = require('use-sync-external-store/shim/with-selector');
-var useConstant = require('../../dist/useConstant-eeb49d3f.cjs.prod.js');
+var useConstant = require('../../dist/useConstant-c09b427a.cjs.prod.js');
 
@@ -21,26 +21,27 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _e = undefined;
-
-  try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
+  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+  if (null != _i) {
+    var _s,
+      _e,
+      _x,
+      _r,
+      _arr = [],
+      _n = !0,
+      _d = !1;
     try {
-      if (!_n && _i["return"] != null) _i["return"]();
+      if (_x = (_i = _i.call(arr)).next, 0 === i) {
+        if (Object(_i) !== _i) return;
+        _n = !1;
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
+    } catch (err) {
+      _d = !0, _e = err;
     } finally {
-      if (_d) throw _e;
+      try {
+        if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
+      } finally {
+        if (_d) throw _e;
+      }
     }
+    return _arr;
   }
-
-  return _arr;
 }
@@ -50,5 +51,3 @@
   if (len == null || len > arr.length) len = arr.length;
-
   for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
   return arr2;
@@ -77,3 +76,2 @@ }
 }
-
 var getServiceState = function getServiceState(service) {
@@ -86,28 +84,23 @@ var currentValue;
 };
-
 function useMachine(stateMachine, options) {
   var persistedStateRef = React.useRef();
-
   var _useConstant = useConstant.useConstant(function () {
-    var queue = [];
-    var service = fsm.interpret(fsm.createMachine(stateMachine.config, options ? options : stateMachine._options));
-    var send = service.send;
+      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 = _slicedToArray(_useConstant, 2),
+    service = _useConstant2[0],
+    queue = _useConstant2[1];
 
-    service.send = function (event) {
-      if (service.status === fsm.InterpreterStatus.NotStarted) {
-        queue.push(event);
-        return;
-      }
-
-      send(event);
-      persistedStateRef.current = service.state;
-    };
-
-    return [service, queue];
-  }),
-      _useConstant2 = _slicedToArray(_useConstant, 2),
-      service = _useConstant2[0],
-      queue = _useConstant2[1]; // TODO: consider using `useInsertionEffect` if available
-
-
+  // TODO: consider using `useInsertionEffect` if available
   useIsomorphicLayoutEffect__default['default'](function () {
@@ -129,7 +122,5 @@ if (options) {
 }
-
 var isEqual = function isEqual(_prevState, nextState) {
   return nextState.changed === false;
 };
-
 function useService(service) {
@@ -141,4 +132,3 @@ var getSnapshot = React.useCallback(function () {
     var _service$subscribe = service.subscribe(handleStoreChange),
-        unsubscribe = _service$subscribe.unsubscribe;
-
+      unsubscribe = _service$subscribe.unsubscribe;
     return unsubscribe;
@@ -145,0 +135,0 @@ }, [service]);

fsm/dist/xstate-react-fsm.esm.js

@@ -1,2 +0,2 @@
-import { _ as _slicedToArray, u as useConstant } from '../../dist/useConstant-94bfdbb5.esm.js';
+import { _ as _slicedToArray, u as useConstant } from '../../dist/useConstant-0013a606.esm.js';
 import { interpret, createMachine, InterpreterStatus } from '@xstate/fsm';
@@ -10,3 +10,2 @@ import { useRef, useState, useEffect, useCallback } from 'react';
 }
-
 var getServiceState = function getServiceState(service) {
@@ -19,11 +18,8 @@ var currentValue;
 };
-
 function useMachine(stateMachine, options) {
   var persistedStateRef = useRef();
-
   if (process.env.NODE_ENV !== 'production') {
     var _useState = useState(stateMachine),
-        _useState2 = _slicedToArray(_useState, 1),
-        initialMachine = _useState2[0];
-
+      _useState2 = _slicedToArray(_useState, 1),
+      initialMachine = _useState2[0];
     if (stateMachine !== initialMachine) {
@@ -33,25 +29,21 @@ 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(function () {
-    var queue = [];
-    var service = interpret(createMachine(stateMachine.config, options ? options : stateMachine._options));
-    var send = service.send;
+      var queue = [];
+      var service = interpret(createMachine(stateMachine.config, options ? options : stateMachine._options));
+      var send = service.send;
+      service.send = function (event) {
+        if (service.status === InterpreterStatus.NotStarted) {
+          queue.push(event);
+          return;
+        }
+        send(event);
+        persistedStateRef.current = service.state;
+      };
+      return [service, queue];
+    }),
+    _useConstant2 = _slicedToArray(_useConstant, 2),
+    service = _useConstant2[0],
+    queue = _useConstant2[1];
 
-    service.send = function (event) {
-      if (service.status === InterpreterStatus.NotStarted) {
-        queue.push(event);
-        return;
-      }
-
-      send(event);
-      persistedStateRef.current = service.state;
-    };
-
-    return [service, queue];
-  }),
-      _useConstant2 = _slicedToArray(_useConstant, 2),
-      service = _useConstant2[0],
-      queue = _useConstant2[1]; // TODO: consider using `useInsertionEffect` if available
-
-
+  // TODO: consider using `useInsertionEffect` if available
   useIsomorphicLayoutEffect(function () {
@@ -73,7 +65,5 @@ if (options) {
 }
-
 var isEqual = function isEqual(_prevState, nextState) {
   return nextState.changed === false;
 };
-
 function useService(service) {
@@ -85,4 +75,3 @@ var getSnapshot = useCallback(function () {
     var _service$subscribe = service.subscribe(handleStoreChange),
-        unsubscribe = _service$subscribe.unsubscribe;
-
+      unsubscribe = _service$subscribe.unsubscribe;
     return unsubscribe;
@@ -89,0 +78,0 @@ }, [service]);

package.json

 {
   "name": "@xstate/react",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.2",
   "description": "XState tools for React",
@@ -48,3 +48,3 @@ "keywords": [
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "xstate": "^5.0.0-alpha.1"
+    "xstate": "^5.0.0-alpha.3"
   },
@@ -64,3 +64,3 @@ "peerDependenciesMeta": {
   "devDependencies": {
-    "@testing-library/react": "^13.0.0",
+    "@testing-library/react": "^13.4.0",
     "@types/jsdom": "^12.2.3",
@@ -75,3 +75,3 @@ "@types/react": "^17.0.43",
     "react-dom": "^18.0.0",
-    "xstate": "5.0.0-alpha.1"
+    "xstate": "5.0.0-alpha.3"
   },
@@ -78,0 +78,0 @@ "preconstruct": {

No alert changes

Improved metrics

Total package byte prevSize

60615

increased by14.91%

Number of package files

28

increased by3.7%

Lines of code

1426

increased by18.73%

No dependency changes