@xstate/react 4.0.0-beta.4 → 4.0.0-beta.6

package/dist/xstate-react.development.esm.js

@@ -0,0 +1,165 @@
+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 { u as useConstant } from './useConstant-bac83df4.development.esm.js';
+import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
+import { isActorRef } from 'xstate/actors';
+
+function useIdleInterpreter(machine, options) {
+  {
+    const [initialMachine] = useState(machine);
+    if (machine.config !== initialMachine.config) {
+      console.warn(`Actor logic has changed between renders. This is not supported and may lead to invalid snapshots.`);
+    }
+  }
+  const actorRef = useConstant(() => {
+    return interpret(machine, options);
+  });
+
+  // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
+  useIsomorphicLayoutEffect(() => {
+    actorRef.logic.options = machine.options;
+  });
+  return actorRef;
+}
+function useActorRef(machine, ...[options = {}, observerOrListener]) {
+  const service = useIdleInterpreter(machine, options);
+  useEffect(() => {
+    if (!observerOrListener) {
+      return;
+    }
+    let sub = service.subscribe(toObserver(observerOrListener));
+    return () => {
+      sub.unsubscribe();
+    };
+  }, [observerOrListener]);
+  useEffect(() => {
+    service.start();
+    return () => {
+      service.stop();
+      service.status = InterpreterStatus.NotStarted;
+      service._initState();
+    };
+  }, []);
+  return service;
+}
+
+function identity(a) {
+  return a;
+}
+const isEqual = (prevState, nextState) => {
+  return prevState === nextState || nextState.changed === false;
+};
+function useActor(logic, options = {}) {
+  if (isActorRef(logic)) {
+    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.`);
+  }
+  const actorRef = useIdleInterpreter(logic, options);
+  const getSnapshot = useCallback(() => {
+    return actorRef.getSnapshot();
+  }, [actorRef]);
+  const subscribe = useCallback(handleStoreChange => {
+    const {
+      unsubscribe
+    } = actorRef.subscribe(handleStoreChange);
+    return unsubscribe;
+  }, [actorRef]);
+  const actorSnapshot = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
+  useEffect(() => {
+    actorRef.start();
+    return () => {
+      actorRef.stop();
+      actorRef.status = InterpreterStatus.NotStarted;
+      actorRef._initState();
+    };
+  }, [actorRef]);
+  return [actorSnapshot, actorRef.send, actorRef];
+}
+
+function defaultCompare(a, b) {
+  return a === b;
+}
+function useSelector(actor, selector, compare = defaultCompare) {
+  const subscribe = useCallback(handleStoreChange => {
+    const {
+      unsubscribe
+    } = actor.subscribe(handleStoreChange);
+    return unsubscribe;
+  }, [actor]);
+  const boundGetSnapshot = useCallback(() => actor.getSnapshot(), [actor]);
+  const selectedSnapshot = useSyncExternalStoreWithSelector(subscribe, boundGetSnapshot, boundGetSnapshot, selector, compare);
+  return selectedSnapshot;
+}
+
+// From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
+function is(x, y) {
+  if (x === y) {
+    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+  } else {
+    return x !== x && y !== y;
+  }
+}
+function shallowEqual(objA, objB) {
+  if (is(objA, objB)) return true;
+  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) return false;
+  for (let i = 0; i < keysA.length; i++) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function createActorContext(actorLogic, interpreterOptions, observerOrListener) {
+  const ReactContext = /*#__PURE__*/React.createContext(null);
+  const OriginalProvider = ReactContext.Provider;
+  function Provider({
+    children,
+    logic: providedLogic = actorLogic,
+    machine
+  }) {
+    if (machine) {
+      throw new Error(`The "machine" prop has been deprecated. Please use "logic" instead.`);
+    }
+    const actor = useActorRef(providedLogic, interpreterOptions, observerOrListener);
+    return /*#__PURE__*/React.createElement(OriginalProvider, {
+      value: actor,
+      children
+    });
+  }
+
+  // TODO: add properties to actor ref to make more descriptive
+  Provider.displayName = `ActorProvider`;
+  function useContext() {
+    const actor = React.useContext(ReactContext);
+    if (!actor) {
+      throw new Error(`You used a hook from "${Provider.displayName}" but it's not inside a <${Provider.displayName}> component.`);
+    }
+    return actor;
+  }
+  function useSelector$1(selector, compare) {
+    const actor = useContext();
+    return useSelector(actor, selector, compare);
+  }
+  return {
+    Provider: Provider,
+    useActorRef: useContext,
+    useSelector: useSelector$1
+  };
+}
+
+/**
+ *
+ * @deprecated Use `useActor(...)` instead.
+ */
+function useMachine(machine, options = {}) {
+  return useActor(machine, options);
+}
+
+export { createActorContext, shallowEqual, useActor, useActorRef, useMachine, useSelector };

package/dist/xstate-react.esm.js

@@ -1,50 +1,36 @@
 import * as React from 'react';
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useCallback } from 'react';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 import { toObserver, InterpreterStatus, interpret } from 'xstate';
-import { _ as _slicedToArray, u as useConstant } from './useConstant-9bbaf12a.esm.js';
+import { u as useConstant } from './useConstant-c7ec0fdd.esm.js';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
-import { isActorRef } from 'xstate/actors';
+import 'xstate/actors';
 
 function useIdleInterpreter(machine, options) {
-  if (process.env.NODE_ENV !== 'production') {
-    var _useState = useState(machine),
-      _useState2 = _slicedToArray(_useState, 1),
-      initialMachine = _useState2[0];
-    if (machine.config !== initialMachine.config) {
-      console.warn("Actor logic has changed between renders. This is not supported and may lead to invalid snapshots.");
-    }
-  }
-  var actorRef = useConstant(function () {
+  const actorRef = useConstant(() => {
     return interpret(machine, options);
   });
 
   // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
-  useIsomorphicLayoutEffect(function () {
-    actorRef.behavior.options = machine.options;
+  useIsomorphicLayoutEffect(() => {
+    actorRef.logic.options = machine.options;
   });
   return actorRef;
 }
-function useActorRef(machine) {
-  for (var _len = arguments.length, _ref = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    _ref[_key - 1] = arguments[_key];
-  }
-  var _ref$ = _ref[0],
-    options = _ref$ === void 0 ? {} : _ref$,
-    observerOrListener = _ref[1];
-  var service = useIdleInterpreter(machine, options);
-  useEffect(function () {
+function useActorRef(machine, ...[options = {}, observerOrListener]) {
+  const service = useIdleInterpreter(machine, options);
+  useEffect(() => {
     if (!observerOrListener) {
       return;
     }
-    var sub = service.subscribe(toObserver(observerOrListener));
-    return function () {
+    let sub = service.subscribe(toObserver(observerOrListener));
+    return () => {
       sub.unsubscribe();
     };
   }, [observerOrListener]);
-  useEffect(function () {
+  useEffect(() => {
     service.start();
-    return function () {
+    return () => {
       service.stop();
       service.status = InterpreterStatus.NotStarted;
       service._initState();
@@ -56,29 +42,24 @@ function useActorRef(machine) {
 function identity(a) {
   return a;
 }
-var isEqual = function isEqual(prevState, nextState) {
+const isEqual = (prevState, nextState) => {
   return prevState === nextState || nextState.changed === false;
 };
-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 actorRef = useIdleInterpreter(behavior, options);
-  var getSnapshot = useCallback(function () {
+function useActor(logic, options = {}) {
+  const actorRef = useIdleInterpreter(logic, options);
+  const getSnapshot = useCallback(() => {
     return actorRef.getSnapshot();
   }, [actorRef]);
-  var subscribe = useCallback(function (handleStoreChange) {
-    var _actorRef$subscribe = actorRef.subscribe(handleStoreChange),
-      unsubscribe = _actorRef$subscribe.unsubscribe;
+  const subscribe = useCallback(handleStoreChange => {
+    const {
+      unsubscribe
+    } = actorRef.subscribe(handleStoreChange);
     return unsubscribe;
   }, [actorRef]);
-  var actorSnapshot = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
-  useEffect(function () {
+  const actorSnapshot = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
+  useEffect(() => {
     actorRef.start();
-    return function () {
+    return () => {
       actorRef.stop();
       actorRef.status = InterpreterStatus.NotStarted;
       actorRef._initState();
@@ -90,30 +71,18 @@ function useActor(behavior) {
 function defaultCompare(a, b) {
   return a === b;
 }
-function useSelector(actor, selector) {
-  var compare = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultCompare;
-  var subscribe = useCallback(function (handleStoreChange) {
-    var _actor$subscribe = actor.subscribe(handleStoreChange),
-      unsubscribe = _actor$subscribe.unsubscribe;
+function useSelector(actor, selector, compare = defaultCompare) {
+  const subscribe = useCallback(handleStoreChange => {
+    const {
+      unsubscribe
+    } = actor.subscribe(handleStoreChange);
     return unsubscribe;
   }, [actor]);
-  var boundGetSnapshot = useCallback(function () {
-    return actor.getSnapshot();
-  }, [actor]);
-  var selectedSnapshot = useSyncExternalStoreWithSelector(subscribe, boundGetSnapshot, boundGetSnapshot, selector, compare);
+  const boundGetSnapshot = useCallback(() => actor.getSnapshot(), [actor]);
+  const selectedSnapshot = useSyncExternalStoreWithSelector(subscribe, boundGetSnapshot, boundGetSnapshot, selector, compare);
   return selectedSnapshot;
 }
 
-function _typeof(obj) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof(obj);
-}
-
 // From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
 function is(x, y) {
   if (x === y) {
@@ -124,13 +93,13 @@ function is(x, y) {
 }
 function shallowEqual(objA, objB) {
   if (is(objA, objB)) return true;
-  if (_typeof(objA) !== 'object' || objA === null || _typeof(objB) !== 'object' || objB === null) {
+  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
     return false;
   }
-  var keysA = Object.keys(objA);
-  var keysB = Object.keys(objB);
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
   if (keysA.length !== keysB.length) return false;
-  for (var i = 0; i < keysA.length; i++) {
+  for (let i = 0; i < keysA.length; i++) {
     if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
       return false;
     }
@@ -138,29 +107,35 @@ function shallowEqual(objA, objB) {
   return true;
 }
 
-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;
-    var actor = useActorRef(providedMachine, interpreterOptions, observerOrListener);
+function createActorContext(actorLogic, interpreterOptions, observerOrListener) {
+  const ReactContext = /*#__PURE__*/React.createContext(null);
+  const OriginalProvider = ReactContext.Provider;
+  function Provider({
+    children,
+    logic: providedLogic = actorLogic,
+    machine
+  }) {
+    if (machine) {
+      throw new Error(`The "machine" prop has been deprecated. Please use "logic" instead.`);
+    }
+    const actor = useActorRef(providedLogic, interpreterOptions, observerOrListener);
     return /*#__PURE__*/React.createElement(OriginalProvider, {
       value: actor,
-      children: children
+      children
     });
   }
-  Provider.displayName = "ActorProvider(".concat(machine.id, ")");
+
+  // TODO: add properties to actor ref to make more descriptive
+  Provider.displayName = `ActorProvider`;
   function useContext() {
-    var actor = React.useContext(ReactContext);
+    const 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."));
+      throw new Error(`You used a hook from "${Provider.displayName}" but it's not inside a <${Provider.displayName}> component.`);
     }
     return actor;
   }
   function useSelector$1(selector, compare) {
-    var actor = useContext();
+    const actor = useContext();
     return useSelector(actor, selector, compare);
   }
   return {
@@ -174,8 +149,7 @@ function createActorContext(machine, interpreterOptions, observerOrListener) {
  *
  * @deprecated Use `useActor(...)` instead.
  */
-function useMachine(machine) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+function useMachine(machine, options = {}) {
   return useActor(machine, options);
 }
 

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

@@ -1,7 +1,68 @@
 'use strict';
 
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./xstate-react-fsm.cjs.prod.js");
-} else {
-  module.exports = require("./xstate-react-fsm.cjs.dev.js");
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var fsm = require('@xstate/fsm');
+var React = require('react');
+var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
+var withSelector = require('use-sync-external-store/shim/with-selector');
+var useConstant = require('../../dist/useConstant-2ee82f84.cjs.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var useIsomorphicLayoutEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicLayoutEffect);
+
+function identity(a) {
+  return a;
 }
+function useMachine(stateMachine, options) {
+  const persistedStateRef = React.useRef();
+  const [service, queue] = useConstant.useConstant(() => {
+    const queue = [];
+    const service = fsm.interpret(fsm.createMachine(stateMachine.config, options ? options : stateMachine._options));
+    const {
+      send
+    } = service;
+    service.send = event => {
+      if (service.status === fsm.InterpreterStatus.NotStarted) {
+        queue.push(event);
+        return;
+      }
+      send(event);
+      persistedStateRef.current = service.state;
+    };
+    return [service, queue];
+  });
+
+  // TODO: consider using `useInsertionEffect` if available
+  useIsomorphicLayoutEffect__default["default"](() => {
+    if (options) {
+      service._machine._options = options;
+    }
+  });
+  const useServiceResult = useService(service);
+  React.useEffect(() => {
+    service.start(persistedStateRef.current);
+    queue.forEach(service.send);
+    persistedStateRef.current = service.state;
+    return () => {
+      service.stop();
+    };
+  }, []);
+  return useServiceResult;
+}
+const isEqual = (_prevState, nextState) => nextState.changed === false;
+function useService(service) {
+  const getSnapshot = React.useCallback(() => service.state, [service]);
+  const subscribe = React.useCallback(handleStoreChange => {
+    const {
+      unsubscribe
+    } = service.subscribe(handleStoreChange);
+    return unsubscribe;
+  }, [service]);
+  const storeSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
+  return [storeSnapshot, service.send, service];
+}
+
+exports.useMachine = useMachine;
+exports.useService = useService;

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

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

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

@@ -0,0 +1,65 @@
+import { interpret, createMachine, InterpreterStatus } from '@xstate/fsm';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
+import { u as useConstant } from '../../dist/useConstant-bac83df4.development.esm.js';
+
+function identity(a) {
+  return a;
+}
+function useMachine(stateMachine, options) {
+  const persistedStateRef = useRef();
+  {
+    const [initialMachine] = useState(stateMachine);
+    if (stateMachine !== initialMachine) {
+      console.warn('Machine given to `useMachine` has changed between renders. This is not supported and might lead to unexpected results.\n' + 'Please make sure that you pass the same Machine as argument each time.');
+    }
+  }
+  const [service, queue] = useConstant(() => {
+    const queue = [];
+    const service = interpret(createMachine(stateMachine.config, options ? options : stateMachine._options));
+    const {
+      send
+    } = service;
+    service.send = event => {
+      if (service.status === InterpreterStatus.NotStarted) {
+        queue.push(event);
+        return;
+      }
+      send(event);
+      persistedStateRef.current = service.state;
+    };
+    return [service, queue];
+  });
+
+  // TODO: consider using `useInsertionEffect` if available
+  useIsomorphicLayoutEffect(() => {
+    if (options) {
+      service._machine._options = options;
+    }
+  });
+  const useServiceResult = useService(service);
+  useEffect(() => {
+    service.start(persistedStateRef.current);
+    queue.forEach(service.send);
+    persistedStateRef.current = service.state;
+    return () => {
+      service.stop();
+    };
+  }, []);
+  return useServiceResult;
+}
+const isEqual = (_prevState, nextState) => nextState.changed === false;
+function useService(service) {
+  const getSnapshot = useCallback(() => service.state, [service]);
+  const subscribe = useCallback(handleStoreChange => {
+    const {
+      unsubscribe
+    } = service.subscribe(handleStoreChange);
+    return unsubscribe;
+  }, [service]);
+  const storeSnapshot = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
+  return [storeSnapshot, service.send, service];
+}
+
+export { useMachine, useService };