@xstate/react 4.0.0-beta.3 → 4.0.0-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/dist/declarations/src/createActorContext.d.ts +6 -6
  2. package/dist/declarations/src/index.d.ts +6 -7
  3. package/dist/declarations/src/useActor.d.ts +6 -3
  4. package/dist/declarations/src/useActorRef.d.ts +14 -0
  5. package/dist/declarations/src/useMachine.d.ts +9 -9
  6. package/dist/useConstant-2ee82f84.cjs.js +35 -0
  7. package/dist/useConstant-ae6dceac.development.cjs.js +35 -0
  8. package/dist/{useConstant-c09b427a.cjs.prod.js → useConstant-bac83df4.development.esm.js} +3 -5
  9. package/dist/useConstant-c7ec0fdd.esm.js +13 -0
  10. package/dist/xstate-react.cjs.d.mts +2 -0
  11. package/dist/xstate-react.cjs.d.mts.map +1 -0
  12. package/dist/xstate-react.cjs.d.ts +1 -0
  13. package/dist/xstate-react.cjs.d.ts.map +1 -0
  14. package/dist/xstate-react.cjs.js +178 -4
  15. package/dist/xstate-react.cjs.mjs +8 -0
  16. package/dist/xstate-react.development.cjs.js +190 -0
  17. package/dist/xstate-react.development.esm.js +159 -0
  18. package/dist/xstate-react.esm.js +74 -245
  19. package/fsm/dist/xstate-react-fsm.cjs.d.mts +2 -0
  20. package/fsm/dist/xstate-react-fsm.cjs.d.mts.map +1 -0
  21. package/fsm/dist/xstate-react-fsm.cjs.d.ts +1 -0
  22. package/fsm/dist/xstate-react-fsm.cjs.d.ts.map +1 -0
  23. package/fsm/dist/xstate-react-fsm.cjs.js +65 -4
  24. package/fsm/dist/xstate-react-fsm.cjs.mjs +4 -0
  25. package/fsm/dist/xstate-react-fsm.development.cjs.js +74 -0
  26. package/fsm/dist/xstate-react-fsm.development.esm.js +65 -0
  27. package/fsm/dist/xstate-react-fsm.esm.js +30 -42
  28. package/package.json +30 -4
  29. package/dist/declarations/src/types.d.ts +0 -15
  30. package/dist/declarations/src/useConstant.d.ts +0 -1
  31. package/dist/declarations/src/useInterpret.d.ts +0 -12
  32. package/dist/declarations/src/useSpawn.d.ts +0 -9
  33. package/dist/useConstant-0013a606.esm.js +0 -68
  34. package/dist/useConstant-ff65b597.cjs.dev.js +0 -71
  35. package/dist/xstate-react.cjs.dev.js +0 -335
  36. package/dist/xstate-react.cjs.prod.js +0 -327
  37. package/fsm/dist/xstate-react-fsm.cjs.dev.js +0 -80
  38. package/fsm/dist/xstate-react-fsm.cjs.prod.js +0 -127
@@ -1,15 +1,15 @@
1
1
  import * as React from 'react';
2
- import { ActorRefFrom, AnyStateMachine, AreAllImplementationsAssumedToBeProvided, SnapshotFrom, InternalMachineImplementations, InterpreterOptions, Observer, StateFrom } from 'xstate';
2
+ import { ActorRefFrom, AnyStateMachine, SnapshotFrom, InterpreterOptions, Observer, StateFrom, AreAllImplementationsAssumedToBeProvided, MarkAllImplementationsAsProvided, StateMachine } from 'xstate';
3
+ 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;
3
4
  export declare function createActorContext<TMachine extends AnyStateMachine>(machine: TMachine, interpreterOptions?: InterpreterOptions<TMachine>, observerOrListener?: Observer<StateFrom<TMachine>> | ((value: StateFrom<TMachine>) => void)): {
4
- useActor: () => [StateFrom<TMachine>, ActorRefFrom<TMachine>['send']];
5
5
  useSelector: <T>(selector: (snapshot: SnapshotFrom<TMachine>) => T, compare?: (a: T, b: T) => boolean) => T;
6
6
  useActorRef: () => ActorRefFrom<TMachine>;
7
7
  Provider: (props: {
8
8
  children: React.ReactNode;
9
- machine?: TMachine | (() => TMachine);
10
- } & (AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends false ? {
11
- options: InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta'], true>;
9
+ } & (AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends true ? {
10
+ machine?: TMachine;
12
11
  } : {
13
- options?: InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta']>;
12
+ machine: ToMachinesWithProvidedImplementations<TMachine>;
14
13
  })) => React.ReactElement<any, any>;
15
14
  };
15
+ export {};
@@ -1,7 +1,6 @@
1
- export { useMachine } from './useMachine.ts';
2
- export { useActor } from './useActor.ts';
3
- export { useInterpret } from './useInterpret.ts';
4
- export { useSelector } from './useSelector.ts';
5
- export { useSpawn } from './useSpawn.ts';
6
- export { shallowEqual } from './shallowEqual.ts';
7
- export { createActorContext } from './createActorContext.ts';
1
+ export { useActor } from "./useActor.js";
2
+ export { useActorRef } from "./useActorRef.js";
3
+ export { useSelector } from "./useSelector.js";
4
+ export { shallowEqual } from "./shallowEqual.js";
5
+ export { createActorContext } from "./createActorContext.js";
6
+ export { useMachine } from "./useMachine.js";
@@ -1,3 +1,6 @@
1
- import { ActorRef, EventObject, SnapshotFrom } from 'xstate';
2
- export declare function useActor<TActor extends ActorRef<any, any>>(actorRef: TActor): [SnapshotFrom<TActor>, TActor['send']];
3
- export declare function useActor<TEvent extends EventObject, TSnapshot>(actorRef: ActorRef<TEvent, TSnapshot>): [TSnapshot, (event: TEvent) => void];
1
+ import { ActorRefFrom, AnyActorBehavior, InterpreterOptions, SnapshotFrom } from 'xstate';
2
+ export declare function useActor<TBehavior extends AnyActorBehavior>(behavior: TBehavior, options?: InterpreterOptions<TBehavior>): [
3
+ SnapshotFrom<TBehavior>,
4
+ ActorRefFrom<TBehavior>['send'],
5
+ ActorRefFrom<TBehavior>
6
+ ];
@@ -0,0 +1,14 @@
1
+ import { AnyActorBehavior, AnyInterpreter, AnyStateMachine, AreAllImplementationsAssumedToBeProvided, InternalMachineImplementations, ActorRefFrom, InterpreterOptions, Observer, StateFrom, SnapshotFrom } from 'xstate';
2
+ export declare function useIdleInterpreter(machine: AnyActorBehavior, options: Partial<InterpreterOptions<AnyActorBehavior>>): AnyInterpreter;
3
+ type RestParams<TBehavior extends AnyActorBehavior> = TBehavior extends AnyStateMachine ? AreAllImplementationsAssumedToBeProvided<TBehavior['__TResolvedTypesMeta']> extends false ? [
4
+ options: InterpreterOptions<TBehavior> & InternalMachineImplementations<TBehavior['__TContext'], TBehavior['__TEvent'], TBehavior['__TResolvedTypesMeta'], true>,
5
+ observerOrListener?: Observer<StateFrom<TBehavior>> | ((value: StateFrom<TBehavior>) => void)
6
+ ] : [
7
+ options?: InterpreterOptions<TBehavior> & InternalMachineImplementations<TBehavior['__TContext'], TBehavior['__TEvent'], TBehavior['__TResolvedTypesMeta']>,
8
+ observerOrListener?: Observer<StateFrom<TBehavior>> | ((value: StateFrom<TBehavior>) => void)
9
+ ] : [
10
+ options?: InterpreterOptions<TBehavior>,
11
+ observerOrListener?: Observer<SnapshotFrom<TBehavior>> | ((value: SnapshotFrom<TBehavior>) => void)
12
+ ];
13
+ export declare function useActorRef<TBehavior extends AnyActorBehavior>(machine: TBehavior, ...[options, observerOrListener]: RestParams<TBehavior>): ActorRefFrom<TBehavior>;
14
+ export {};
@@ -1,10 +1,10 @@
1
- import { AnyStateMachine, AreAllImplementationsAssumedToBeProvided, InternalMachineImplementations, InterpreterFrom, InterpreterOptions, StateFrom } from 'xstate';
2
- import { MaybeLazy, Prop } from './types.ts';
3
- type RestParams<TMachine extends AnyStateMachine> = AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends false ? [
4
- options: InterpreterOptions<TMachine> & InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta'], true>
5
- ] : [
6
- options?: InterpreterOptions<TMachine> & InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta']>
1
+ import { ActorRefFrom, AnyStateMachine, AreAllImplementationsAssumedToBeProvided, InterpreterOptions, MissingImplementationsError, StateFrom } from 'xstate';
2
+ /**
3
+ *
4
+ * @deprecated Use `useActor(...)` instead.
5
+ */
6
+ export declare function useMachine<TMachine extends AnyStateMachine>(machine: AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends true ? TMachine : MissingImplementationsError<TMachine['__TResolvedTypesMeta']>, options?: InterpreterOptions<TMachine>): [
7
+ StateFrom<TMachine>,
8
+ ActorRefFrom<TMachine>['send'],
9
+ ActorRefFrom<TMachine>
7
10
  ];
8
- type UseMachineReturn<TMachine extends AnyStateMachine, TInterpreter = InterpreterFrom<TMachine>> = [StateFrom<TMachine>, Prop<TInterpreter, 'send'>, TInterpreter];
9
- export declare function useMachine<TMachine extends AnyStateMachine>(getMachine: MaybeLazy<TMachine>, ...[options]: RestParams<TMachine>): UseMachineReturn<TMachine>;
10
- export {};
@@ -0,0 +1,35 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+
5
+ function _interopNamespace(e) {
6
+ if (e && e.__esModule) return e;
7
+ var n = Object.create(null);
8
+ if (e) {
9
+ Object.keys(e).forEach(function (k) {
10
+ if (k !== 'default') {
11
+ var d = Object.getOwnPropertyDescriptor(e, k);
12
+ Object.defineProperty(n, k, d.get ? d : {
13
+ enumerable: true,
14
+ get: function () { return e[k]; }
15
+ });
16
+ }
17
+ });
18
+ }
19
+ n["default"] = e;
20
+ return Object.freeze(n);
21
+ }
22
+
23
+ var React__namespace = /*#__PURE__*/_interopNamespace(React);
24
+
25
+ function useConstant(fn) {
26
+ const ref = React__namespace.useRef();
27
+ if (!ref.current) {
28
+ ref.current = {
29
+ v: fn()
30
+ };
31
+ }
32
+ return ref.current.v;
33
+ }
34
+
35
+ exports.useConstant = useConstant;
@@ -0,0 +1,35 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+
5
+ function _interopNamespace(e) {
6
+ if (e && e.__esModule) return e;
7
+ var n = Object.create(null);
8
+ if (e) {
9
+ Object.keys(e).forEach(function (k) {
10
+ if (k !== 'default') {
11
+ var d = Object.getOwnPropertyDescriptor(e, k);
12
+ Object.defineProperty(n, k, d.get ? d : {
13
+ enumerable: true,
14
+ get: function () { return e[k]; }
15
+ });
16
+ }
17
+ });
18
+ }
19
+ n["default"] = e;
20
+ return Object.freeze(n);
21
+ }
22
+
23
+ var React__namespace = /*#__PURE__*/_interopNamespace(React);
24
+
25
+ function useConstant(fn) {
26
+ const ref = React__namespace.useRef();
27
+ if (!ref.current) {
28
+ ref.current = {
29
+ v: fn()
30
+ };
31
+ }
32
+ return ref.current.v;
33
+ }
34
+
35
+ exports.useConstant = useConstant;
@@ -1,9 +1,7 @@
1
- 'use strict';
2
-
3
- var React = require('react');
1
+ import * as React from 'react';
4
2
 
5
3
  function useConstant(fn) {
6
- var ref = React.useRef();
4
+ const ref = React.useRef();
7
5
  if (!ref.current) {
8
6
  ref.current = {
9
7
  v: fn()
@@ -12,4 +10,4 @@ function useConstant(fn) {
12
10
  return ref.current.v;
13
11
  }
14
12
 
15
- exports.useConstant = useConstant;
13
+ export { useConstant as u };
@@ -0,0 +1,13 @@
1
+ import * as React from 'react';
2
+
3
+ function useConstant(fn) {
4
+ const ref = React.useRef();
5
+ if (!ref.current) {
6
+ ref.current = {
7
+ v: fn()
8
+ };
9
+ }
10
+ return ref.current.v;
11
+ }
12
+
13
+ export { useConstant as u };
@@ -0,0 +1,2 @@
1
+ export * from "./declarations/src/index.js";
2
+ //# sourceMappingURL=xstate-react.cjs.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"xstate-react.cjs.d.mts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}
@@ -1 +1,2 @@
1
1
  export * from "./declarations/src/index";
2
+ //# sourceMappingURL=xstate-react.cjs.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"xstate-react.cjs.d.ts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}
@@ -1,7 +1,181 @@
1
1
  'use strict';
2
2
 
3
- if (process.env.NODE_ENV === "production") {
4
- module.exports = require("./xstate-react.cjs.prod.js");
5
- } else {
6
- module.exports = require("./xstate-react.cjs.dev.js");
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var React = require('react');
6
+ var withSelector = require('use-sync-external-store/shim/with-selector');
7
+ var xstate = require('xstate');
8
+ var useConstant = require('./useConstant-2ee82f84.cjs.js');
9
+ var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
10
+ require('xstate/actors');
11
+
12
+ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
13
+
14
+ function _interopNamespace(e) {
15
+ if (e && e.__esModule) return e;
16
+ var n = Object.create(null);
17
+ if (e) {
18
+ Object.keys(e).forEach(function (k) {
19
+ if (k !== 'default') {
20
+ var d = Object.getOwnPropertyDescriptor(e, k);
21
+ Object.defineProperty(n, k, d.get ? d : {
22
+ enumerable: true,
23
+ get: function () { return e[k]; }
24
+ });
25
+ }
26
+ });
27
+ }
28
+ n["default"] = e;
29
+ return Object.freeze(n);
30
+ }
31
+
32
+ var React__namespace = /*#__PURE__*/_interopNamespace(React);
33
+ var useIsomorphicLayoutEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicLayoutEffect);
34
+
35
+ function useIdleInterpreter(machine, options) {
36
+ const actorRef = useConstant.useConstant(() => {
37
+ return xstate.interpret(machine, options);
38
+ });
39
+
40
+ // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
41
+ useIsomorphicLayoutEffect__default["default"](() => {
42
+ actorRef.behavior.options = machine.options;
43
+ });
44
+ return actorRef;
45
+ }
46
+ function useActorRef(machine, ...[options = {}, observerOrListener]) {
47
+ const service = useIdleInterpreter(machine, options);
48
+ React.useEffect(() => {
49
+ if (!observerOrListener) {
50
+ return;
51
+ }
52
+ let sub = service.subscribe(xstate.toObserver(observerOrListener));
53
+ return () => {
54
+ sub.unsubscribe();
55
+ };
56
+ }, [observerOrListener]);
57
+ React.useEffect(() => {
58
+ service.start();
59
+ return () => {
60
+ service.stop();
61
+ service.status = xstate.InterpreterStatus.NotStarted;
62
+ service._initState();
63
+ };
64
+ }, []);
65
+ return service;
66
+ }
67
+
68
+ function identity(a) {
69
+ return a;
70
+ }
71
+ const isEqual = (prevState, nextState) => {
72
+ return prevState === nextState || nextState.changed === false;
73
+ };
74
+ function useActor(behavior, options = {}) {
75
+ const actorRef = useIdleInterpreter(behavior, options);
76
+ const getSnapshot = React.useCallback(() => {
77
+ return actorRef.getSnapshot();
78
+ }, [actorRef]);
79
+ const subscribe = React.useCallback(handleStoreChange => {
80
+ const {
81
+ unsubscribe
82
+ } = actorRef.subscribe(handleStoreChange);
83
+ return unsubscribe;
84
+ }, [actorRef]);
85
+ const actorSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
86
+ React.useEffect(() => {
87
+ actorRef.start();
88
+ return () => {
89
+ actorRef.stop();
90
+ actorRef.status = xstate.InterpreterStatus.NotStarted;
91
+ actorRef._initState();
92
+ };
93
+ }, [actorRef]);
94
+ return [actorSnapshot, actorRef.send, actorRef];
7
95
  }
96
+
97
+ function defaultCompare(a, b) {
98
+ return a === b;
99
+ }
100
+ function useSelector(actor, selector, compare = defaultCompare) {
101
+ const subscribe = React.useCallback(handleStoreChange => {
102
+ const {
103
+ unsubscribe
104
+ } = actor.subscribe(handleStoreChange);
105
+ return unsubscribe;
106
+ }, [actor]);
107
+ const boundGetSnapshot = React.useCallback(() => actor.getSnapshot(), [actor]);
108
+ const selectedSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, boundGetSnapshot, boundGetSnapshot, selector, compare);
109
+ return selectedSnapshot;
110
+ }
111
+
112
+ // From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
113
+ function is(x, y) {
114
+ if (x === y) {
115
+ return x !== 0 || y !== 0 || 1 / x === 1 / y;
116
+ } else {
117
+ return x !== x && y !== y;
118
+ }
119
+ }
120
+ function shallowEqual(objA, objB) {
121
+ if (is(objA, objB)) return true;
122
+ if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
123
+ return false;
124
+ }
125
+ const keysA = Object.keys(objA);
126
+ const keysB = Object.keys(objB);
127
+ if (keysA.length !== keysB.length) return false;
128
+ for (let i = 0; i < keysA.length; i++) {
129
+ if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
130
+ return false;
131
+ }
132
+ }
133
+ return true;
134
+ }
135
+
136
+ function createActorContext(machine, interpreterOptions, observerOrListener) {
137
+ const ReactContext = /*#__PURE__*/React__namespace.createContext(null);
138
+ const OriginalProvider = ReactContext.Provider;
139
+ function Provider({
140
+ children,
141
+ machine: providedMachine = machine
142
+ }) {
143
+ const actor = useActorRef(providedMachine, interpreterOptions, observerOrListener);
144
+ return /*#__PURE__*/React__namespace.createElement(OriginalProvider, {
145
+ value: actor,
146
+ children
147
+ });
148
+ }
149
+ Provider.displayName = `ActorProvider(${machine.id})`;
150
+ function useContext() {
151
+ const actor = React__namespace.useContext(ReactContext);
152
+ if (!actor) {
153
+ throw new Error(`You used a hook from "${Provider.displayName}" but it's not inside a <${Provider.displayName}> component.`);
154
+ }
155
+ return actor;
156
+ }
157
+ function useSelector$1(selector, compare) {
158
+ const actor = useContext();
159
+ return useSelector(actor, selector, compare);
160
+ }
161
+ return {
162
+ Provider: Provider,
163
+ useActorRef: useContext,
164
+ useSelector: useSelector$1
165
+ };
166
+ }
167
+
168
+ /**
169
+ *
170
+ * @deprecated Use `useActor(...)` instead.
171
+ */
172
+ function useMachine(machine, options = {}) {
173
+ return useActor(machine, options);
174
+ }
175
+
176
+ exports.createActorContext = createActorContext;
177
+ exports.shallowEqual = shallowEqual;
178
+ exports.useActor = useActor;
179
+ exports.useActorRef = useActorRef;
180
+ exports.useMachine = useMachine;
181
+ exports.useSelector = useSelector;
@@ -0,0 +1,8 @@
1
+ export {
2
+ createActorContext,
3
+ shallowEqual,
4
+ useActor,
5
+ useActorRef,
6
+ useMachine,
7
+ useSelector
8
+ } from "./xstate-react.cjs.js";
@@ -0,0 +1,190 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var React = require('react');
6
+ var withSelector = require('use-sync-external-store/shim/with-selector');
7
+ var xstate = require('xstate');
8
+ var useConstant = require('./useConstant-ae6dceac.development.cjs.js');
9
+ var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
10
+ var actors = require('xstate/actors');
11
+
12
+ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
13
+
14
+ function _interopNamespace(e) {
15
+ if (e && e.__esModule) return e;
16
+ var n = Object.create(null);
17
+ if (e) {
18
+ Object.keys(e).forEach(function (k) {
19
+ if (k !== 'default') {
20
+ var d = Object.getOwnPropertyDescriptor(e, k);
21
+ Object.defineProperty(n, k, d.get ? d : {
22
+ enumerable: true,
23
+ get: function () { return e[k]; }
24
+ });
25
+ }
26
+ });
27
+ }
28
+ n["default"] = e;
29
+ return Object.freeze(n);
30
+ }
31
+
32
+ var React__namespace = /*#__PURE__*/_interopNamespace(React);
33
+ var useIsomorphicLayoutEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicLayoutEffect);
34
+
35
+ function useIdleInterpreter(machine, options) {
36
+ {
37
+ const [initialMachine] = React.useState(machine);
38
+ if (machine.config !== initialMachine.config) {
39
+ console.warn(`Actor logic has changed between renders. This is not supported and may lead to invalid snapshots.`);
40
+ }
41
+ }
42
+ const actorRef = useConstant.useConstant(() => {
43
+ return xstate.interpret(machine, options);
44
+ });
45
+
46
+ // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
47
+ useIsomorphicLayoutEffect__default["default"](() => {
48
+ actorRef.behavior.options = machine.options;
49
+ });
50
+ return actorRef;
51
+ }
52
+ function useActorRef(machine, ...[options = {}, observerOrListener]) {
53
+ const service = useIdleInterpreter(machine, options);
54
+ React.useEffect(() => {
55
+ if (!observerOrListener) {
56
+ return;
57
+ }
58
+ let sub = service.subscribe(xstate.toObserver(observerOrListener));
59
+ return () => {
60
+ sub.unsubscribe();
61
+ };
62
+ }, [observerOrListener]);
63
+ React.useEffect(() => {
64
+ service.start();
65
+ return () => {
66
+ service.stop();
67
+ service.status = xstate.InterpreterStatus.NotStarted;
68
+ service._initState();
69
+ };
70
+ }, []);
71
+ return service;
72
+ }
73
+
74
+ function identity(a) {
75
+ return a;
76
+ }
77
+ const isEqual = (prevState, nextState) => {
78
+ return prevState === nextState || nextState.changed === false;
79
+ };
80
+ function useActor(behavior, options = {}) {
81
+ if (actors.isActorRef(behavior)) {
82
+ 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.`);
83
+ }
84
+ const actorRef = useIdleInterpreter(behavior, options);
85
+ const getSnapshot = React.useCallback(() => {
86
+ return actorRef.getSnapshot();
87
+ }, [actorRef]);
88
+ const subscribe = React.useCallback(handleStoreChange => {
89
+ const {
90
+ unsubscribe
91
+ } = actorRef.subscribe(handleStoreChange);
92
+ return unsubscribe;
93
+ }, [actorRef]);
94
+ const actorSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
95
+ React.useEffect(() => {
96
+ actorRef.start();
97
+ return () => {
98
+ actorRef.stop();
99
+ actorRef.status = xstate.InterpreterStatus.NotStarted;
100
+ actorRef._initState();
101
+ };
102
+ }, [actorRef]);
103
+ return [actorSnapshot, actorRef.send, actorRef];
104
+ }
105
+
106
+ function defaultCompare(a, b) {
107
+ return a === b;
108
+ }
109
+ function useSelector(actor, selector, compare = defaultCompare) {
110
+ const subscribe = React.useCallback(handleStoreChange => {
111
+ const {
112
+ unsubscribe
113
+ } = actor.subscribe(handleStoreChange);
114
+ return unsubscribe;
115
+ }, [actor]);
116
+ const boundGetSnapshot = React.useCallback(() => actor.getSnapshot(), [actor]);
117
+ const selectedSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, boundGetSnapshot, boundGetSnapshot, selector, compare);
118
+ return selectedSnapshot;
119
+ }
120
+
121
+ // From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
122
+ function is(x, y) {
123
+ if (x === y) {
124
+ return x !== 0 || y !== 0 || 1 / x === 1 / y;
125
+ } else {
126
+ return x !== x && y !== y;
127
+ }
128
+ }
129
+ function shallowEqual(objA, objB) {
130
+ if (is(objA, objB)) return true;
131
+ if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
132
+ return false;
133
+ }
134
+ const keysA = Object.keys(objA);
135
+ const keysB = Object.keys(objB);
136
+ if (keysA.length !== keysB.length) return false;
137
+ for (let i = 0; i < keysA.length; i++) {
138
+ if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
139
+ return false;
140
+ }
141
+ }
142
+ return true;
143
+ }
144
+
145
+ function createActorContext(machine, interpreterOptions, observerOrListener) {
146
+ const ReactContext = /*#__PURE__*/React__namespace.createContext(null);
147
+ const OriginalProvider = ReactContext.Provider;
148
+ function Provider({
149
+ children,
150
+ machine: providedMachine = machine
151
+ }) {
152
+ const actor = useActorRef(providedMachine, interpreterOptions, observerOrListener);
153
+ return /*#__PURE__*/React__namespace.createElement(OriginalProvider, {
154
+ value: actor,
155
+ children
156
+ });
157
+ }
158
+ Provider.displayName = `ActorProvider(${machine.id})`;
159
+ function useContext() {
160
+ const actor = React__namespace.useContext(ReactContext);
161
+ if (!actor) {
162
+ throw new Error(`You used a hook from "${Provider.displayName}" but it's not inside a <${Provider.displayName}> component.`);
163
+ }
164
+ return actor;
165
+ }
166
+ function useSelector$1(selector, compare) {
167
+ const actor = useContext();
168
+ return useSelector(actor, selector, compare);
169
+ }
170
+ return {
171
+ Provider: Provider,
172
+ useActorRef: useContext,
173
+ useSelector: useSelector$1
174
+ };
175
+ }
176
+
177
+ /**
178
+ *
179
+ * @deprecated Use `useActor(...)` instead.
180
+ */
181
+ function useMachine(machine, options = {}) {
182
+ return useActor(machine, options);
183
+ }
184
+
185
+ exports.createActorContext = createActorContext;
186
+ exports.shallowEqual = shallowEqual;
187
+ exports.useActor = useActor;
188
+ exports.useActorRef = useActorRef;
189
+ exports.useMachine = useMachine;
190
+ exports.useSelector = useSelector;