@xstate/react - npm Package Compare versions

Comparing version 4.0.0-beta.3 to 4.0.0-beta.4

dist/declarations/src/createActorContext.d.ts

 import * as React from 'react';
-import { ActorRefFrom, AnyStateMachine, AreAllImplementationsAssumedToBeProvided, SnapshotFrom, InternalMachineImplementations, InterpreterOptions, Observer, StateFrom } from 'xstate';
+import { ActorRefFrom, AnyStateMachine, SnapshotFrom, InterpreterOptions, Observer, StateFrom, AreAllImplementationsAssumedToBeProvided, MarkAllImplementationsAsProvided, StateMachine } from 'xstate';
+type ToMachinesWithProvidedImplementations<TMachine extends AnyStateMachine> = TMachine extends StateMachine<infer TContext, infer TEvent, infer TAction, infer TActorMap, infer TResolvedTypesMeta> ? StateMachine<TContext, TEvent, TAction, TActorMap, AreAllImplementationsAssumedToBeProvided<TResolvedTypesMeta> extends false ? MarkAllImplementationsAsProvided<TResolvedTypesMeta> : TResolvedTypesMeta> : never;
 export declare function createActorContext<TMachine extends AnyStateMachine>(machine: TMachine, interpreterOptions?: InterpreterOptions<TMachine>, observerOrListener?: Observer<StateFrom<TMachine>> | ((value: StateFrom<TMachine>) => void)): {
-    useActor: () => [StateFrom<TMachine>, ActorRefFrom<TMachine>['send']];
     useSelector: <T>(selector: (snapshot: SnapshotFrom<TMachine>) => T, compare?: (a: T, b: T) => boolean) => T;
@@ -9,8 +9,8 @@ useActorRef: () => ActorRefFrom<TMachine>;
         children: React.ReactNode;
-        machine?: TMachine | (() => TMachine);
-    } & (AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends false ? {
-        options: InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta'], true>;
+    } & (AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends true ? {
+        machine?: TMachine;
     } : {
-        options?: InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta']>;
+        machine: ToMachinesWithProvidedImplementations<TMachine>;
     })) => React.ReactElement<any, any>;
 };
+export {};

dist/declarations/src/index.d.ts

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

dist/declarations/src/useActor.d.ts

@@ -1,3 +0,6 @@
-import { ActorRef, EventObject, SnapshotFrom } from 'xstate';
-export declare function useActor<TActor extends ActorRef<any, any>>(actorRef: TActor): [SnapshotFrom<TActor>, TActor['send']];
-export declare function useActor<TEvent extends EventObject, TSnapshot>(actorRef: ActorRef<TEvent, TSnapshot>): [TSnapshot, (event: TEvent) => void];
+import { ActorRefFrom, AnyActorBehavior, InterpreterOptions, SnapshotFrom } from 'xstate';
+export declare function useActor<TBehavior extends AnyActorBehavior>(behavior: TBehavior, options?: InterpreterOptions<TBehavior>): [
+    SnapshotFrom<TBehavior>,
+    ActorRefFrom<TBehavior>['send'],
+    ActorRefFrom<TBehavior>
+];

dist/declarations/src/useMachine.d.ts

@@ -1,10 +0,10 @@
-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<TMachine> & InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta']>
+import { ActorRefFrom, AnyStateMachine, AreAllImplementationsAssumedToBeProvided, InterpreterOptions, MissingImplementationsError, StateFrom } from 'xstate';
+/**
+ *
+ * @deprecated Use `useActor(...)` instead.
+ */
+export declare function useMachine<TMachine extends AnyStateMachine>(machine: AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends true ? TMachine : MissingImplementationsError<TMachine['__TResolvedTypesMeta']>, options?: InterpreterOptions<TMachine>): [
+    StateFrom<TMachine>,
+    ActorRefFrom<TMachine>['send'],
+    ActorRefFrom<TMachine>
 ];
-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/xstate-react.cjs.d.ts

 export * from "./declarations/src/index";
+//# sourceMappingURL=xstate-react.cjs.d.ts.map

dist/xstate-react.cjs.dev.js

@@ -5,83 +5,52 @@ 'use strict';
 
-var useConstant = require('./useConstant-ff65b597.cjs.dev.js');
 var React = require('react');
-var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
 var withSelector = require('use-sync-external-store/shim/with-selector');
 var xstate = require('xstate');
-var shim = require('use-sync-external-store/shim');
+var useConstant = require('./useConstant-23e96eea.cjs.dev.js');
+var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
+var actors = require('xstate/actors');
 
 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];
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
   }
-  return target;
+  n["default"] = e;
+  return Object.freeze(n);
 }
 
-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 React__namespace = /*#__PURE__*/_interopNamespace(React);
+var useIsomorphicLayoutEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicLayoutEffect);
 
-var _excluded = ["actors", "guards", "actions", "delays"];
-function useIdleInterpreter(getMachine, options) {
-  var machine = useConstant.useConstant(function () {
-    return typeof getMachine === 'function' ? getMachine() : getMachine;
-  });
-  if (process.env.NODE_ENV !== 'production' && typeof getMachine !== 'function') {
+function useIdleInterpreter(machine, options) {
+  if (process.env.NODE_ENV !== 'production') {
     var _useState = React.useState(machine),
       _useState2 = useConstant._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.');
+    if (machine.config !== initialMachine.config) {
+      console.warn("Actor logic has changed between renders. This is not supported and may lead to invalid snapshots.");
     }
   }
-  var actors = options.actors,
-    guards = options.guards,
-    actions = options.actions,
-    delays = options.delays,
-    interpreterOptions = _objectWithoutProperties(options, _excluded);
-  var service = useConstant.useConstant(function () {
-    var machineConfig = {
-      guards: guards,
-      actions: actions,
-      actors: actors,
-      delays: delays
-    };
-    var machineWithConfig = machine.provide(machineConfig);
-    return xstate.interpret(machineWithConfig, interpreterOptions);
+  var actorRef = useConstant.useConstant(function () {
+    return xstate.interpret(machine, options);
   });
 
-  // 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.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;
+  // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
+  useIsomorphicLayoutEffect__default["default"](function () {
+    actorRef.behavior.options = machine.options;
+  });
+  return actorRef;
 }
-function useInterpret(getMachine) {
+function useActorRef(machine) {
   for (var _len = arguments.length, _ref = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
@@ -93,3 +62,3 @@ _ref[_key - 1] = arguments[_key];
     observerOrListener = _ref[1];
-  var service = useIdleInterpreter(getMachine, options);
+  var service = useIdleInterpreter(machine, options);
   React.useEffect(function () {
@@ -121,45 +90,28 @@ if (!observerOrListener) {
 };
-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];
+function useActor(behavior) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  if (process.env.NODE_ENV !== 'production') {
+    if (actors.isActorRef(behavior)) {
+      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.");
+    }
   }
-  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 actorRef = useIdleInterpreter(behavior, options);
   var getSnapshot = React.useCallback(function () {
-    return service.getSnapshot();
-  }, [service]);
+    return actorRef.getSnapshot();
+  }, [actorRef]);
   var subscribe = React.useCallback(function (handleStoreChange) {
-    var _service$subscribe = service.subscribe(handleStoreChange),
-      unsubscribe = _service$subscribe.unsubscribe;
+    var _actorRef$subscribe = actorRef.subscribe(handleStoreChange),
+      unsubscribe = _actorRef$subscribe.unsubscribe;
     return unsubscribe;
-  }, [service]);
-  var storeSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
+  }, [actorRef]);
+  var actorSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
   React.useEffect(function () {
-    service.start();
+    actorRef.start();
     return function () {
-      service.stop();
-      service.status = xstate.InterpreterStatus.NotStarted;
-      service._initState();
+      actorRef.stop();
+      actorRef.status = xstate.InterpreterStatus.NotStarted;
+      actorRef._initState();
     };
-  }, []);
-  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];
+  return [actorSnapshot, actorRef.send, actorRef];
 }
@@ -184,25 +136,2 @@
 
-/**
- * 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 xstate.interpret(behavior);
-  });
-  React.useEffect(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);
-    };
-  }, []);
-  return actorRef;
-}
-
 function _typeof(obj) {
@@ -242,57 +171,4 @@ "@babel/helpers - typeof";
 
-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 ReactContext = /*#__PURE__*/React__namespace.createContext(null);
   var OriginalProvider = ReactContext.Provider;
@@ -302,6 +178,5 @@ function Provider(_ref) {
       _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, {
+      providedMachine = _ref$machine === void 0 ? machine : _ref$machine;
+    var actor = useActorRef(providedMachine, interpreterOptions, observerOrListener);
+    return /*#__PURE__*/React__namespace.createElement(OriginalProvider, {
       value: actor,
@@ -313,3 +188,3 @@ children: children
   function useContext() {
-    var actor = React.useContext(ReactContext);
+    var actor = React__namespace.useContext(ReactContext);
     if (!actor) {
@@ -320,6 +195,2 @@ throw new Error("You used a hook from \"".concat(Provider.displayName, "\" but it's not inside a <").concat(Provider.displayName, "> component."));
   }
-  function useActor$1() {
-    var actor = useContext();
-    return useActor(actor);
-  }
   function useSelector$1(selector, compare) {
@@ -332,3 +203,2 @@ var actor = useContext();
     useActorRef: useContext,
-    useActor: useActor$1,
     useSelector: useSelector$1
@@ -338,8 +208,16 @@ };
 
+/**
+ *
+ * @deprecated Use `useActor(...)` instead.
+ */
+function useMachine(machine) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return useActor(machine, options);
+}
+
 exports.createActorContext = createActorContext;
 exports.shallowEqual = shallowEqual;
 exports.useActor = useActor;
-exports.useInterpret = useInterpret;
+exports.useActorRef = useActorRef;
 exports.useMachine = useMachine;
 exports.useSelector = useSelector;
-exports.useSpawn = useSpawn;

dist/xstate-react.cjs.prod.js

@@ -6,74 +6,43 @@ 'use strict';
 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 shim = require('use-sync-external-store/shim');
+var useConstant = require('./useConstant-720f1662.cjs.prod.js');
+var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
+require('xstate/actors');
 
 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];
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
   }
-  return target;
+  n["default"] = e;
+  return Object.freeze(n);
 }
 
-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 React__namespace = /*#__PURE__*/_interopNamespace(React);
+var useIsomorphicLayoutEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicLayoutEffect);
 
-var _excluded = ["actors", "guards", "actions", "delays"];
-function useIdleInterpreter(getMachine, options) {
-  var machine = useConstant.useConstant(function () {
-    return typeof getMachine === 'function' ? getMachine() : getMachine;
+function useIdleInterpreter(machine, options) {
+  var actorRef = useConstant.useConstant(function () {
+    return xstate.interpret(machine, options);
   });
-  var actors = options.actors,
-    guards = options.guards,
-    actions = options.actions,
-    delays = options.delays,
-    interpreterOptions = _objectWithoutProperties(options, _excluded);
-  var service = useConstant.useConstant(function () {
-    var machineConfig = {
-      guards: guards,
-      actions: actions,
-      actors: actors,
-      delays: delays
-    };
-    var machineWithConfig = machine.provide(machineConfig);
-    return xstate.interpret(machineWithConfig, interpreterOptions);
+
+  // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
+  useIsomorphicLayoutEffect__default["default"](function () {
+    actorRef.behavior.options = machine.options;
   });
-
-  // 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.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;
+  return actorRef;
 }
-function useInterpret(getMachine) {
+function useActorRef(machine) {
   for (var _len = arguments.length, _ref = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
@@ -85,3 +54,3 @@ _ref[_key - 1] = arguments[_key];
     observerOrListener = _ref[1];
-  var service = useIdleInterpreter(getMachine, options);
+  var service = useIdleInterpreter(machine, options);
   React.useEffect(function () {
@@ -113,45 +82,23 @@ if (!observerOrListener) {
 };
-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);
+function useActor(behavior) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var actorRef = useIdleInterpreter(behavior, options);
   var getSnapshot = React.useCallback(function () {
-    return service.getSnapshot();
-  }, [service]);
+    return actorRef.getSnapshot();
+  }, [actorRef]);
   var subscribe = React.useCallback(function (handleStoreChange) {
-    var _service$subscribe = service.subscribe(handleStoreChange),
-      unsubscribe = _service$subscribe.unsubscribe;
+    var _actorRef$subscribe = actorRef.subscribe(handleStoreChange),
+      unsubscribe = _actorRef$subscribe.unsubscribe;
     return unsubscribe;
-  }, [service]);
-  var storeSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
+  }, [actorRef]);
+  var actorSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
   React.useEffect(function () {
-    service.start();
+    actorRef.start();
     return function () {
-      service.stop();
-      service.status = xstate.InterpreterStatus.NotStarted;
-      service._initState();
+      actorRef.stop();
+      actorRef.status = xstate.InterpreterStatus.NotStarted;
+      actorRef._initState();
     };
-  }, []);
-  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];
+  return [actorSnapshot, actorRef.send, actorRef];
 }
@@ -176,25 +123,2 @@
 
-/**
- * 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 xstate.interpret(behavior);
-  });
-  React.useEffect(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);
-    };
-  }, []);
-  return actorRef;
-}
-
 function _typeof(obj) {
@@ -234,57 +158,4 @@ "@babel/helpers - typeof";
 
-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 ReactContext = /*#__PURE__*/React__namespace.createContext(null);
   var OriginalProvider = ReactContext.Provider;
@@ -294,6 +165,5 @@ function Provider(_ref) {
       _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, {
+      providedMachine = _ref$machine === void 0 ? machine : _ref$machine;
+    var actor = useActorRef(providedMachine, interpreterOptions, observerOrListener);
+    return /*#__PURE__*/React__namespace.createElement(OriginalProvider, {
       value: actor,
@@ -305,3 +175,3 @@ children: children
   function useContext() {
-    var actor = React.useContext(ReactContext);
+    var actor = React__namespace.useContext(ReactContext);
     if (!actor) {
@@ -312,6 +182,2 @@ throw new Error("You used a hook from \"".concat(Provider.displayName, "\" but it's not inside a <").concat(Provider.displayName, "> component."));
   }
-  function useActor$1() {
-    var actor = useContext();
-    return useActor(actor);
-  }
   function useSelector$1(selector, compare) {
@@ -324,3 +190,2 @@ var actor = useContext();
     useActorRef: useContext,
-    useActor: useActor$1,
     useSelector: useSelector$1
@@ -330,8 +195,16 @@ };
 
+/**
+ *
+ * @deprecated Use `useActor(...)` instead.
+ */
+function useMachine(machine) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return useActor(machine, options);
+}
+
 exports.createActorContext = createActorContext;
 exports.shallowEqual = shallowEqual;
 exports.useActor = useActor;
-exports.useInterpret = useInterpret;
+exports.useActorRef = useActorRef;
 exports.useMachine = useMachine;
 exports.useSelector = useSelector;
-exports.useSpawn = useSpawn;

dist/xstate-react.esm.js

@@ -1,78 +0,29 @@
-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';
+import * as React from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 import { toObserver, InterpreterStatus, interpret } from 'xstate';
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
+import { _ as _slicedToArray, u as useConstant } from './useConstant-9bbaf12a.esm.js';
+import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
+import { isActorRef } from 'xstate/actors';
 
-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 = ["actors", "guards", "actions", "delays"];
-function useIdleInterpreter(getMachine, options) {
-  var machine = useConstant(function () {
-    return typeof getMachine === 'function' ? getMachine() : getMachine;
-  });
-  if (process.env.NODE_ENV !== 'production' && typeof getMachine !== 'function') {
+function useIdleInterpreter(machine, options) {
+  if (process.env.NODE_ENV !== 'production') {
     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.');
+    if (machine.config !== initialMachine.config) {
+      console.warn("Actor logic has changed between renders. This is not supported and may lead to invalid snapshots.");
     }
   }
-  var actors = options.actors,
-    guards = options.guards,
-    actions = options.actions,
-    delays = options.delays,
-    interpreterOptions = _objectWithoutProperties(options, _excluded);
-  var service = useConstant(function () {
-    var machineConfig = {
-      guards: guards,
-      actions: actions,
-      actors: actors,
-      delays: delays
-    };
-    var machineWithConfig = machine.provide(machineConfig);
-    return interpret(machineWithConfig, interpreterOptions);
+  var actorRef = useConstant(function () {
+    return interpret(machine, options);
   });
 
-  // 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.
+  // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
   useIsomorphicLayoutEffect(function () {
-    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;
+    actorRef.behavior.options = machine.options;
+  });
+  return actorRef;
 }
-function useInterpret(getMachine) {
+function useActorRef(machine) {
   for (var _len = arguments.length, _ref = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
@@ -84,3 +35,3 @@ _ref[_key - 1] = arguments[_key];
     observerOrListener = _ref[1];
-  var service = useIdleInterpreter(getMachine, options);
+  var service = useIdleInterpreter(machine, options);
   useEffect(function () {
@@ -112,45 +63,28 @@ if (!observerOrListener) {
 };
-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];
+function useActor(behavior) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  if (process.env.NODE_ENV !== 'production') {
+    if (isActorRef(behavior)) {
+      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.");
+    }
   }
-  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 actorRef = useIdleInterpreter(behavior, options);
   var getSnapshot = useCallback(function () {
-    return service.getSnapshot();
-  }, [service]);
+    return actorRef.getSnapshot();
+  }, [actorRef]);
   var subscribe = useCallback(function (handleStoreChange) {
-    var _service$subscribe = service.subscribe(handleStoreChange),
-      unsubscribe = _service$subscribe.unsubscribe;
+    var _actorRef$subscribe = actorRef.subscribe(handleStoreChange),
+      unsubscribe = _actorRef$subscribe.unsubscribe;
     return unsubscribe;
-  }, [service]);
-  var storeSnapshot = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
+  }, [actorRef]);
+  var actorSnapshot = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
   useEffect(function () {
-    service.start();
+    actorRef.start();
     return function () {
-      service.stop();
-      service.status = InterpreterStatus.NotStarted;
-      service._initState();
+      actorRef.stop();
+      actorRef.status = InterpreterStatus.NotStarted;
+      actorRef._initState();
     };
-  }, []);
-  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];
+  return [actorSnapshot, actorRef.send, actorRef];
 }
@@ -175,25 +109,2 @@
 
-/**
- * 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 interpret(behavior);
-  });
-  useEffect(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);
-    };
-  }, []);
-  return actorRef;
-}
-
 function _typeof(obj) {
@@ -233,57 +144,4 @@ "@babel/helpers - typeof";
 
-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 ReactContext = /*#__PURE__*/React.createContext(null);
   var OriginalProvider = ReactContext.Provider;
@@ -293,6 +151,5 @@ function Provider(_ref) {
       _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, {
+      providedMachine = _ref$machine === void 0 ? machine : _ref$machine;
+    var actor = useActorRef(providedMachine, interpreterOptions, observerOrListener);
+    return /*#__PURE__*/React.createElement(OriginalProvider, {
       value: actor,
@@ -303,4 +160,4 @@ children: children
   Provider.displayName = "ActorProvider(".concat(machine.id, ")");
-  function useContext$1() {
-    var actor = useContext(ReactContext);
+  function useContext() {
+    var actor = React.useContext(ReactContext);
     if (!actor) {
@@ -311,8 +168,4 @@ throw new Error("You used a hook from \"".concat(Provider.displayName, "\" but it's not inside a <").concat(Provider.displayName, "> component."));
   }
-  function useActor$1() {
-    var actor = useContext$1();
-    return useActor(actor);
-  }
   function useSelector$1(selector, compare) {
-    var actor = useContext$1();
+    var actor = useContext();
     return useSelector(actor, selector, compare);
@@ -322,4 +175,3 @@ }
     Provider: Provider,
-    useActorRef: useContext$1,
-    useActor: useActor$1,
+    useActorRef: useContext,
     useSelector: useSelector$1
@@ -329,2 +181,11 @@ };
 
-export { createActorContext, shallowEqual, useActor, useInterpret, useMachine, useSelector, useSpawn };
+/**
+ *
+ * @deprecated Use `useActor(...)` instead.
+ */
+function useMachine(machine) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return useActor(machine, options);
+}
+
+export { createActorContext, shallowEqual, useActor, useActorRef, useMachine, useSelector };

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

 export * from "../../dist/declarations/src/fsm";
+//# sourceMappingURL=xstate-react-fsm.cjs.d.ts.map

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

@@ -5,3 +5,3 @@ 'use strict';
 
-var useConstant = require('../../dist/useConstant-ff65b597.cjs.dev.js');
+var useConstant = require('../../dist/useConstant-23e96eea.cjs.dev.js');
 var fsm = require('@xstate/fsm');
@@ -48,3 +48,3 @@ var React = require('react');
   // TODO: consider using `useInsertionEffect` if available
-  useIsomorphicLayoutEffect__default['default'](function () {
+  useIsomorphicLayoutEffect__default["default"](function () {
     if (options) {
@@ -51,0 +51,0 @@ service._machine._options = options;

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-c09b427a.cjs.prod.js');
+var useConstant = require('../../dist/useConstant-720f1662.cjs.prod.js');
 
@@ -95,3 +95,3 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
   // TODO: consider using `useInsertionEffect` if available
-  useIsomorphicLayoutEffect__default['default'](function () {
+  useIsomorphicLayoutEffect__default["default"](function () {
     if (options) {
@@ -98,0 +98,0 @@ service._machine._options = options;

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

@@ -1,2 +0,2 @@
-import { _ as _slicedToArray, u as useConstant } from '../../dist/useConstant-0013a606.esm.js';
+import { _ as _slicedToArray, u as useConstant } from '../../dist/useConstant-9bbaf12a.esm.js';
 import { interpret, createMachine, InterpreterStatus } from '@xstate/fsm';
@@ -3,0 +3,0 @@ import { useRef, useState, useEffect, useCallback } from 'react';

package.json

 {
   "name": "@xstate/react",
-  "version": "4.0.0-beta.3",
+  "version": "4.0.0-beta.4",
   "description": "XState tools for React",
@@ -23,2 +23,3 @@ "keywords": [
       "module": "./fsm/dist/xstate-react-fsm.esm.js",
+      "import": "./fsm/dist/xstate-react-fsm.cjs.mjs",
       "default": "./fsm/dist/xstate-react-fsm.cjs.js"
@@ -28,2 +29,3 @@ },
       "module": "./dist/xstate-react.esm.js",
+      "import": "./dist/xstate-react.cjs.mjs",
       "default": "./dist/xstate-react.cjs.js"
@@ -50,3 +52,3 @@ },
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "xstate": "^5.0.0-beta.7"
+    "xstate": "^5.0.0-beta.10"
   },
@@ -62,3 +64,3 @@ "peerDependenciesMeta": {
   "dependencies": {
-    "use-isomorphic-layout-effect": "^1.0.0",
+    "use-isomorphic-layout-effect": "^1.1.2",
     "use-sync-external-store": "^1.0.0"
@@ -77,3 +79,3 @@ },
     "react-dom": "^18.0.0",
-    "xstate": "5.0.0-beta.7"
+    "xstate": "5.0.0-beta.10"
   },
@@ -80,0 +82,0 @@ "preconstruct": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

34

increased by21.43%

Worsened metrics

Total package byte prevSize

46740

decreased by-22.11%

Lines of code

1068

decreased by-23.99%

Number of low supply chain risk alerts

8

increased by33.33%

Dependency changes

• Updateduse-isomorphic-layout-effect@^1.1.2