@xstate/react 3.0.2 → 3.1.0

package/dist/xstate-react.umd.min.js

@@ -36,4 +36,4 @@ s((function(t,e){}));var S=s((function(t){t.exports=h}));
      * This source code is licensed under the MIT license found in the
      * LICENSE file in the root directory of this source tree.
      */
-s((function(t,e){}));var k=s((function(t){t.exports=w})),C=e.useLayoutEffect;function P(t){var e=a.useRef();return e.current||(e.current={v:t()}),e.current.v}function R(t,e){var r=P((function(){return"function"==typeof t?t():t})),u=e.context,o=e.guards,a=e.actions,c=e.activities,s=e.services,f=e.delays;e.state;var l=function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var u=0;for(r=Object.getOwnPropertySymbols(t);u<r.length;u++)e.indexOf(r[u])<0&&Object.prototype.propertyIsEnumerable.call(t,r[u])&&(n[r[u]]=t[r[u]])}return n}(e,["context","guards","actions","activities","services","delays","state"]),v=P((function(){var t={context:u,guards:o,actions:a,activities:c,services:s,delays:f},e=r.withConfig(t,(function(){return i(i({},r.context),u)}));return n.interpret(e,l)}));return C((function(){Object.assign(v.machine.options.actions,a),Object.assign(v.machine.options.guards,o),Object.assign(v.machine.options.activities,c),Object.assign(v.machine.options.services,s),Object.assign(v.machine.options.delays,f)}),[a,o,c,s,f]),v}function I(t){return t}function V(t){return 0!==t.status?t.getSnapshot():t.machine.initialState}function M(t,e){return t===e?0!==t||0!==e||1/t==1/e:t!=t&&e!=e}function N(t){return"state"in t&&"machine"in t}function _(t){return"state"in t}function q(t){return"deferred"in t}function D(t){return"getSnapshot"in t?N(t)?V(t):t.getSnapshot():_(t)?t.state:void 0}var W=function(t,e){return t===e};t.shallowEqual=function(t,e){if(M(t,e))return!0;if("object"!=typeof t||null===t||"object"!=typeof e||null===e)return!1;var n=Object.keys(t),r=Object.keys(e);if(n.length!==r.length)return!1;for(var u=0;u<n.length;u++)if(!Object.prototype.hasOwnProperty.call(e,n[u])||!M(t[n[u]],e[n[u]]))return!1;return!0},t.useActor=function(t,n){void 0===n&&(n=D);var r=e.useRef(t),u=e.useRef([]),o=e.useCallback((function(e){return t.subscribe(e).unsubscribe}),[t]),a=e.useCallback((function(){return n(t)}),[t,n]),i=S.useSyncExternalStore(o,a,a),c=P((function(){return function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];var n=t[0],o=r.current;q(o)&&o.deferred?u.current.push(n):o.send(n)}}));return C((function(){for(r.current=t;u.current.length>0;){var e=u.current.shift();t.send(e)}}),[t]),[i,c]},t.useInterpret=function(t){for(var r=[],u=1;u<arguments.length;u++)r[u-1]=arguments[u];var o=c(r,2),a=o[0],i=void 0===a?{}:a,s=o[1],f=R(t,i);return e.useEffect((function(){if(s){var t=f.subscribe(n.toObserver(s));return function(){t.unsubscribe()}}}),[s]),e.useEffect((function(){var t=i.state;return f.start(t?n.State.create(t):void 0),function(){f.stop(),f.status=n.InterpreterStatus.NotStarted}}),[]),f},t.useMachine=function(t){for(var r=[],u=1;u<arguments.length;u++)r[u-1]=arguments[u];var o=c(r,1),a=o[0],i=void 0===a?{}:a,s=R(t,i),f=e.useCallback((function(){return s.status===n.InterpreterStatus.NotStarted?i.state?n.State.create(i.state):s.machine.initialState:s.getSnapshot()}),[s]),l=e.useCallback((function(t,e){if(s.status===n.InterpreterStatus.NotStarted)return!0;var r=void 0===e.changed&&(Object.keys(e.children).length>0||"boolean"==typeof t.changed);return!(e.changed||r)}),[s]),v=e.useCallback((function(t){return s.subscribe(t).unsubscribe}),[s]),d=k.useSyncExternalStoreWithSelector(v,f,f,I,l);return e.useEffect((function(){var t=i.state;return s.start(t?n.State.create(t):void 0),function(){s.stop(),s.status=n.InterpreterStatus.NotStarted}}),[]),[d,s.send,s]},t.useSelector=function(t,n,r,u){void 0===r&&(r=W);var o=e.useRef(null),a=e.useCallback((function(e){return t.subscribe(e).unsubscribe}),[t]),i=e.useCallback((function(){return u?u(t):function(t,e){if(N(t)){if(0===t.status&&e.current)return e.current;var n=V(t);return e.current=0===t.status?n:null,n}return _(t)?t.state:void 0}(t,o)}),[t,u]);return k.useSyncExternalStoreWithSelector(a,i,i,n,r)},t.useSpawn=function(t){return P((function(){return n.spawnBehavior(t)}))},Object.defineProperty(t,"__esModule",{value:!0})}));
+s((function(t,e){}));var k=s((function(t){t.exports=w})),C=e.useLayoutEffect;function P(t){var e=a.useRef();return e.current||(e.current={v:t()}),e.current.v}function R(t,e){var r=P((function(){return"function"==typeof t?t():t})),u=e.context,o=e.guards,a=e.actions,c=e.activities,s=e.services,f=e.delays;e.state;var l=function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var u=0;for(r=Object.getOwnPropertySymbols(t);u<r.length;u++)e.indexOf(r[u])<0&&Object.prototype.propertyIsEnumerable.call(t,r[u])&&(n[r[u]]=t[r[u]])}return n}(e,["context","guards","actions","activities","services","delays","state"]),v=P((function(){var t={context:u,guards:o,actions:a,activities:c,services:s,delays:f},e=r.withConfig(t,(function(){return i(i({},r.context),u)}));return n.interpret(e,l)}));return C((function(){Object.assign(v.machine.options.actions,a),Object.assign(v.machine.options.guards,o),Object.assign(v.machine.options.activities,c),Object.assign(v.machine.options.services,s),Object.assign(v.machine.options.delays,f)}),[a,o,c,s,f]),v}function N(t){for(var r=[],u=1;u<arguments.length;u++)r[u-1]=arguments[u];var o=c(r,2),a=o[0],i=void 0===a?{}:a,s=o[1],f=R(t,i);return e.useEffect((function(){if(s){var t=f.subscribe(n.toObserver(s));return function(){t.unsubscribe()}}}),[s]),e.useEffect((function(){var t=i.state;return f.start(t?n.State.create(t):void 0),function(){f.stop(),f.status=n.InterpreterStatus.NotStarted}}),[]),f}function I(t){return t}function A(t){return 0!==t.status?t.getSnapshot():t.machine.initialState}function V(t,e){return t===e?0!==t||0!==e||1/t==1/e:t!=t&&e!=e}function M(t){return"state"in t&&"machine"in t}function _(t){return"state"in t}function q(t){return"deferred"in t}function D(t){return"getSnapshot"in t?M(t)?A(t):t.getSnapshot():_(t)?t.state:void 0}function W(t,n){void 0===n&&(n=D);var r=e.useRef(t),u=e.useRef([]),o=e.useCallback((function(e){return t.subscribe(e).unsubscribe}),[t]),a=e.useCallback((function(){return n(t)}),[t,n]),i=S.useSyncExternalStore(o,a,a),c=P((function(){return function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];var n=t[0],o=r.current;q(o)&&o.deferred?u.current.push(n):o.send(n)}}));return C((function(){for(r.current=t;u.current.length>0;){var e=u.current.shift();t.send(e)}}),[t]),[i,c]}var L=function(t,e){return t===e};function T(t,n,r,u){void 0===r&&(r=L);var o=e.useRef(null),a=e.useCallback((function(e){return t.subscribe(e).unsubscribe}),[t]),i=e.useCallback((function(){return u?u(t):function(t,e){if(M(t)){if(0===t.status&&e.current)return e.current;var n=A(t);return e.current=0===t.status?n:null,n}return _(t)?t.state:void 0}(t,o)}),[t,u]);return k.useSyncExternalStoreWithSelector(a,i,i,n,r)}t.createActorContext=function(t){var e=a.createContext(null),n=e.Provider;function r(e){var r=e.children,u=e.machine,o=N(void 0===u?t:u);return a.createElement(n,{value:o},r)}function u(){var t=a.useContext(e);if(!t)throw new Error('You used a hook from "'.concat(r.displayName,"\" but it's not inside a <").concat(r.displayName,"> component."));return t}return r.displayName="ActorProvider(".concat(t.id,")"),{Provider:r,useActorRef:u,useActor:function(){return W(u())},useSelector:function(t,e){return T(u(),t,e)}}},t.shallowEqual=function(t,e){if(V(t,e))return!0;if("object"!=typeof t||null===t||"object"!=typeof e||null===e)return!1;var n=Object.keys(t),r=Object.keys(e);if(n.length!==r.length)return!1;for(var u=0;u<n.length;u++)if(!Object.prototype.hasOwnProperty.call(e,n[u])||!V(t[n[u]],e[n[u]]))return!1;return!0},t.useActor=W,t.useInterpret=N,t.useMachine=function(t){for(var r=[],u=1;u<arguments.length;u++)r[u-1]=arguments[u];var o=c(r,1),a=o[0],i=void 0===a?{}:a,s=R(t,i),f=e.useCallback((function(){return s.status===n.InterpreterStatus.NotStarted?i.state?n.State.create(i.state):s.machine.initialState:s.getSnapshot()}),[s]),l=e.useCallback((function(t,e){if(s.status===n.InterpreterStatus.NotStarted)return!0;var r=void 0===e.changed&&(Object.keys(e.children).length>0||"boolean"==typeof t.changed);return!(e.changed||r)}),[s]),v=e.useCallback((function(t){return s.subscribe(t).unsubscribe}),[s]),d=k.useSyncExternalStoreWithSelector(v,f,f,I,l);return e.useEffect((function(){var t=i.state;return s.start(t?n.State.create(t):void 0),function(){s.stop(),s.status=n.InterpreterStatus.NotStarted}}),[]),[d,s.send,s]},t.useSelector=T,t.useSpawn=function(t){return P((function(){return n.spawnBehavior(t)}))},Object.defineProperty(t,"__esModule",{value:!0})}));

package/es/createActorContext.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { useActor as useActorUnbound } from './useActor';
+import { ActorRefFrom, AnyStateMachine, EmittedFrom } from 'xstate';
+export declare function createActorContext<TMachine extends AnyStateMachine>(machine: TMachine): {
+    useActor: () => ReturnType<typeof useActorUnbound<ActorRefFrom<TMachine>>>;
+    useSelector: <T>(selector: (snapshot: EmittedFrom<TMachine>) => T, compare?: (a: T, b: T) => boolean) => T;
+    useActorRef: () => ActorRefFrom<TMachine>;
+    Provider: (props: {
+        children: React.ReactNode;
+        machine?: TMachine | (() => TMachine);
+    }) => React.ReactElement<any, any>;
+};
+//# sourceMappingURL=createActorContext.d.ts.map

package/es/createActorContext.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { useInterpret } from './useInterpret';
+import { useActor as useActorUnbound } from './useActor';
+import { useSelector as useSelectorUnbound } from './useSelector';
+export function createActorContext(machine) {
+    var ReactContext = React.createContext(null);
+    var OriginalProvider = ReactContext.Provider;
+    function Provider(_a) {
+        var children = _a.children, _b = _a.machine, providedMachine = _b === void 0 ? machine : _b;
+        var actor = useInterpret(providedMachine);
+        return React.createElement(OriginalProvider, { value: actor }, 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() {
+        var actor = useContext();
+        return useActorUnbound(actor);
+    }
+    function useSelector(selector, compare) {
+        var actor = useContext();
+        return useSelectorUnbound(actor, selector, compare);
+    }
+    return {
+        Provider: Provider,
+        useActorRef: useContext,
+        useActor: useActor,
+        useSelector: useSelector
+    };
+}

package/es/index.d.ts

@@ -4,4 +4,5 @@ export { useInterpret } from './useInterpret';
 export { useSelector } from './useSelector';
 export { useSpawn } from './useSpawn';
 export { shallowEqual } from './utils';
+export { createActorContext } from './createActorContext';
 //# sourceMappingURL=index.d.ts.map

package/es/index.js

@@ -4,3 +4,4 @@ export { useInterpret } from './useInterpret';
 export { useSelector } from './useSelector';
 export { useSpawn } from './useSpawn';
 export { shallowEqual } from './utils';
+export { createActorContext } from './createActorContext';

package/lib/createActorContext.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { useActor as useActorUnbound } from './useActor';
+import { ActorRefFrom, AnyStateMachine, EmittedFrom } from 'xstate';
+export declare function createActorContext<TMachine extends AnyStateMachine>(machine: TMachine): {
+    useActor: () => ReturnType<typeof useActorUnbound<ActorRefFrom<TMachine>>>;
+    useSelector: <T>(selector: (snapshot: EmittedFrom<TMachine>) => T, compare?: (a: T, b: T) => boolean) => T;
+    useActorRef: () => ActorRefFrom<TMachine>;
+    Provider: (props: {
+        children: React.ReactNode;
+        machine?: TMachine | (() => TMachine);
+    }) => React.ReactElement<any, any>;
+};
+//# sourceMappingURL=createActorContext.d.ts.map

package/lib/createActorContext.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createActorContext = void 0;
+var React = require("react");
+var useInterpret_1 = require("./useInterpret");
+var useActor_1 = require("./useActor");
+var useSelector_1 = require("./useSelector");
+function createActorContext(machine) {
+    var ReactContext = React.createContext(null);
+    var OriginalProvider = ReactContext.Provider;
+    function Provider(_a) {
+        var children = _a.children, _b = _a.machine, providedMachine = _b === void 0 ? machine : _b;
+        var actor = (0, useInterpret_1.useInterpret)(providedMachine);
+        return React.createElement(OriginalProvider, { value: actor }, 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() {
+        var actor = useContext();
+        return (0, useActor_1.useActor)(actor);
+    }
+    function useSelector(selector, compare) {
+        var actor = useContext();
+        return (0, useSelector_1.useSelector)(actor, selector, compare);
+    }
+    return {
+        Provider: Provider,
+        useActorRef: useContext,
+        useActor: useActor,
+        useSelector: useSelector
+    };
+}
+exports.createActorContext = createActorContext;

package/lib/index.d.ts

@@ -4,4 +4,5 @@ export { useInterpret } from './useInterpret';
 export { useSelector } from './useSelector';
 export { useSpawn } from './useSpawn';
 export { shallowEqual } from './utils';
+export { createActorContext } from './createActorContext';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.shallowEqual = exports.useSpawn = exports.useSelector = exports.useInterpret = exports.useActor = exports.useMachine = void 0;
+exports.createActorContext = exports.shallowEqual = exports.useSpawn = exports.useSelector = exports.useInterpret = exports.useActor = exports.useMachine = void 0;
 var useMachine_1 = require("./useMachine");
 Object.defineProperty(exports, "useMachine", { enumerable: true, get: function () { return useMachine_1.useMachine; } });
 var useActor_1 = require("./useActor");
@@ -13,3 +13,5 @@ var useSpawn_1 = require("./useSpawn");
 Object.defineProperty(exports, "useSpawn", { enumerable: true, get: function () { return useSpawn_1.useSpawn; } });
 var utils_1 = require("./utils");
 Object.defineProperty(exports, "shallowEqual", { enumerable: true, get: function () { return utils_1.shallowEqual; } });
+var createActorContext_1 = require("./createActorContext");
+Object.defineProperty(exports, "createActorContext", { enumerable: true, get: function () { return createActorContext_1.createActorContext; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xstate/react",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "description": "XState tools for React",
   "keywords": [
     "state",
@@ -54,7 +54,7 @@
   "peerDependencies": {
     "@xstate/fsm": "^2.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "xstate": "^4.35.2"
+    "xstate": "^4.35.3"
   },
   "peerDependenciesMeta": {
     "@xstate/fsm": {