@xstate/react 4.0.0-alpha.2 → 4.0.0-beta.10

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 (33) hide show
  1. package/README.md +0 -8
  2. package/dist/declarations/src/createActorContext.d.ts +12 -9
  3. package/dist/declarations/src/index.d.ts +6 -7
  4. package/dist/declarations/src/useActor.d.ts +2 -3
  5. package/dist/declarations/src/useActorRef.d.ts +14 -0
  6. package/dist/declarations/src/useMachine.d.ts +8 -9
  7. package/dist/xstate-react.cjs.d.mts +2 -0
  8. package/dist/xstate-react.cjs.d.mts.map +1 -0
  9. package/dist/xstate-react.cjs.d.ts +1 -0
  10. package/dist/xstate-react.cjs.d.ts.map +1 -0
  11. package/dist/xstate-react.cjs.js +187 -4
  12. package/dist/xstate-react.cjs.mjs +8 -0
  13. package/dist/xstate-react.development.cjs.js +199 -0
  14. package/dist/xstate-react.development.cjs.mjs +8 -0
  15. package/dist/xstate-react.development.esm.js +168 -0
  16. package/dist/xstate-react.esm.js +91 -253
  17. package/package.json +21 -21
  18. package/dist/declarations/src/fsm.d.ts +0 -3
  19. package/dist/declarations/src/types.d.ts +0 -15
  20. package/dist/declarations/src/useConstant.d.ts +0 -1
  21. package/dist/declarations/src/useInterpret.d.ts +0 -12
  22. package/dist/declarations/src/useSpawn.d.ts +0 -9
  23. package/dist/useConstant-0013a606.esm.js +0 -68
  24. package/dist/useConstant-c09b427a.cjs.prod.js +0 -15
  25. package/dist/useConstant-ff65b597.cjs.dev.js +0 -71
  26. package/dist/xstate-react.cjs.dev.js +0 -335
  27. package/dist/xstate-react.cjs.prod.js +0 -327
  28. package/fsm/dist/xstate-react-fsm.cjs.d.ts +0 -1
  29. package/fsm/dist/xstate-react-fsm.cjs.dev.js +0 -87
  30. package/fsm/dist/xstate-react-fsm.cjs.js +0 -7
  31. package/fsm/dist/xstate-react-fsm.cjs.prod.js +0 -134
  32. package/fsm/dist/xstate-react-fsm.esm.js +0 -78
  33. package/fsm/package.json +0 -4
@@ -0,0 +1,168 @@
1
+ import * as React from 'react';
2
+ import { useEffect, useState, useCallback } from 'react';
3
+ import { useSyncExternalStore } from 'use-sync-external-store/shim';
4
+ import { toObserver, ActorStatus, createActor } from 'xstate';
5
+ import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
6
+ import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
7
+
8
+ function useConstant(fn) {
9
+ const ref = React.useRef();
10
+ if (!ref.current) {
11
+ ref.current = {
12
+ v: fn()
13
+ };
14
+ }
15
+ return ref.current.v;
16
+ }
17
+
18
+ function useIdleInterpreter(machine, options) {
19
+ {
20
+ const [initialMachine] = useState(machine);
21
+ if (machine.config !== initialMachine.config) {
22
+ console.warn(`Actor logic has changed between renders. This is not supported and may lead to invalid snapshots.`);
23
+ }
24
+ }
25
+ const actorRef = useConstant(() => {
26
+ return createActor(machine, options);
27
+ });
28
+
29
+ // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
30
+ useIsomorphicLayoutEffect(() => {
31
+ actorRef.logic.implementations = machine.implementations;
32
+ });
33
+ return actorRef;
34
+ }
35
+ function useActorRef(machine, ...[options = {}, observerOrListener]) {
36
+ const actorRef = useIdleInterpreter(machine, options);
37
+ useEffect(() => {
38
+ if (!observerOrListener) {
39
+ return;
40
+ }
41
+ let sub = actorRef.subscribe(toObserver(observerOrListener));
42
+ return () => {
43
+ sub.unsubscribe();
44
+ };
45
+ }, [observerOrListener]);
46
+ useEffect(() => {
47
+ actorRef.start();
48
+ return () => {
49
+ actorRef.stop();
50
+ actorRef.status = ActorStatus.NotStarted;
51
+ actorRef._initState();
52
+ };
53
+ }, []);
54
+ return actorRef;
55
+ }
56
+
57
+ function useActor(logic, options = {}) {
58
+ if (!!logic && 'send' in logic && typeof logic.send === 'function') {
59
+ 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.`);
60
+ }
61
+ const actorRef = useIdleInterpreter(logic, options);
62
+ const getSnapshot = useCallback(() => {
63
+ return actorRef.getSnapshot();
64
+ }, [actorRef]);
65
+ const subscribe = useCallback(handleStoreChange => {
66
+ const {
67
+ unsubscribe
68
+ } = actorRef.subscribe(handleStoreChange);
69
+ return unsubscribe;
70
+ }, [actorRef]);
71
+ const actorSnapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
72
+ useEffect(() => {
73
+ actorRef.start();
74
+ return () => {
75
+ actorRef.stop();
76
+ actorRef.status = ActorStatus.NotStarted;
77
+ actorRef._initState();
78
+ };
79
+ }, [actorRef]);
80
+ return [actorSnapshot, actorRef.send, actorRef];
81
+ }
82
+
83
+ function defaultCompare(a, b) {
84
+ return a === b;
85
+ }
86
+ function useSelector(actor, selector, compare = defaultCompare) {
87
+ const subscribe = useCallback(handleStoreChange => {
88
+ const {
89
+ unsubscribe
90
+ } = actor.subscribe(handleStoreChange);
91
+ return unsubscribe;
92
+ }, [actor]);
93
+ const boundGetSnapshot = useCallback(() => actor.getSnapshot(), [actor]);
94
+ const selectedSnapshot = useSyncExternalStoreWithSelector(subscribe, boundGetSnapshot, boundGetSnapshot, selector, compare);
95
+ return selectedSnapshot;
96
+ }
97
+
98
+ // From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
99
+ function is(x, y) {
100
+ if (x === y) {
101
+ return x !== 0 || y !== 0 || 1 / x === 1 / y;
102
+ } else {
103
+ return x !== x && y !== y;
104
+ }
105
+ }
106
+ function shallowEqual(objA, objB) {
107
+ if (is(objA, objB)) return true;
108
+ if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
109
+ return false;
110
+ }
111
+ const keysA = Object.keys(objA);
112
+ const keysB = Object.keys(objB);
113
+ if (keysA.length !== keysB.length) return false;
114
+ for (let i = 0; i < keysA.length; i++) {
115
+ if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
116
+ return false;
117
+ }
118
+ }
119
+ return true;
120
+ }
121
+
122
+ function createActorContext(actorLogic, interpreterOptions) {
123
+ const ReactContext = /*#__PURE__*/React.createContext(null);
124
+ const OriginalProvider = ReactContext.Provider;
125
+ function Provider({
126
+ children,
127
+ logic: providedLogic = actorLogic,
128
+ machine,
129
+ options: providedOptions = interpreterOptions
130
+ }) {
131
+ if (machine) {
132
+ throw new Error(`The "machine" prop has been deprecated. Please use "logic" instead.`);
133
+ }
134
+ const actor = useActorRef(providedLogic, providedOptions);
135
+ return /*#__PURE__*/React.createElement(OriginalProvider, {
136
+ value: actor,
137
+ children
138
+ });
139
+ }
140
+
141
+ // TODO: add properties to actor ref to make more descriptive
142
+ Provider.displayName = `ActorProvider`;
143
+ function useContext() {
144
+ const actor = React.useContext(ReactContext);
145
+ if (!actor) {
146
+ throw new Error(`You used a hook from "${Provider.displayName}" but it's not inside a <${Provider.displayName}> component.`);
147
+ }
148
+ return actor;
149
+ }
150
+ function useSelector$1(selector, compare) {
151
+ const actor = useContext();
152
+ return useSelector(actor, selector, compare);
153
+ }
154
+ return {
155
+ Provider: Provider,
156
+ useActorRef: useContext,
157
+ useSelector: useSelector$1
158
+ };
159
+ }
160
+
161
+ /**
162
+ * @alias useActor
163
+ */
164
+ function useMachine(machine, options = {}) {
165
+ return useActor(machine, options);
166
+ }
167
+
168
+ export { createActorContext, shallowEqual, useActor, useActorRef, useMachine, useSelector };
@@ -1,208 +1,91 @@
1
- import { u as useConstant, _ as _slicedToArray } from './useConstant-0013a606.esm.js';
2
- import { useEffect, useState, useCallback, createContext, createElement, useContext } from 'react';
1
+ import * as React from 'react';
2
+ import { useEffect, useCallback } from 'react';
3
+ import { useSyncExternalStore } from 'use-sync-external-store/shim';
4
+ import { toObserver, ActorStatus, createActor } from 'xstate';
3
5
  import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
4
6
  import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
5
- import { toObserver, InterpreterStatus, interpret } from 'xstate';
6
- import { useSyncExternalStore } from 'use-sync-external-store/shim';
7
-
8
- function _objectWithoutPropertiesLoose(source, excluded) {
9
- if (source == null) return {};
10
- var target = {};
11
- var sourceKeys = Object.keys(source);
12
- var key, i;
13
- for (i = 0; i < sourceKeys.length; i++) {
14
- key = sourceKeys[i];
15
- if (excluded.indexOf(key) >= 0) continue;
16
- target[key] = source[key];
17
- }
18
- return target;
19
- }
20
7
 
21
- function _objectWithoutProperties(source, excluded) {
22
- if (source == null) return {};
23
- var target = _objectWithoutPropertiesLoose(source, excluded);
24
- var key, i;
25
- if (Object.getOwnPropertySymbols) {
26
- var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
27
- for (i = 0; i < sourceSymbolKeys.length; i++) {
28
- key = sourceSymbolKeys[i];
29
- if (excluded.indexOf(key) >= 0) continue;
30
- if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
31
- target[key] = source[key];
32
- }
8
+ function useConstant(fn) {
9
+ const ref = React.useRef();
10
+ if (!ref.current) {
11
+ ref.current = {
12
+ v: fn()
13
+ };
33
14
  }
34
- return target;
15
+ return ref.current.v;
35
16
  }
36
17
 
37
- var _excluded = ["actors", "guards", "actions", "delays"];
38
- function useIdleInterpreter(getMachine, options) {
39
- var machine = useConstant(function () {
40
- return typeof getMachine === 'function' ? getMachine() : getMachine;
41
- });
42
- if (process.env.NODE_ENV !== 'production' && typeof getMachine !== 'function') {
43
- var _useState = useState(machine),
44
- _useState2 = _slicedToArray(_useState, 1),
45
- initialMachine = _useState2[0];
46
- if (getMachine !== initialMachine) {
47
- 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.');
48
- }
49
- }
50
- var actors = options.actors,
51
- guards = options.guards,
52
- actions = options.actions,
53
- delays = options.delays,
54
- interpreterOptions = _objectWithoutProperties(options, _excluded);
55
- var service = useConstant(function () {
56
- var machineConfig = {
57
- guards: guards,
58
- actions: actions,
59
- actors: actors,
60
- delays: delays
61
- };
62
- var machineWithConfig = machine.provide(machineConfig);
63
- return interpret(machineWithConfig, interpreterOptions);
18
+ function useIdleInterpreter(machine, options) {
19
+ const actorRef = useConstant(() => {
20
+ return createActor(machine, options);
64
21
  });
65
22
 
66
- // Make sure options are kept updated when they change.
67
- // This mutation assignment is safe because the service instance is only used
68
- // in one place -- this hook's caller.
69
- useIsomorphicLayoutEffect(function () {
70
- Object.assign(service.behavior.options.actions, actions);
71
- Object.assign(service.behavior.options.guards, guards);
72
- Object.assign(service.behavior.options.actors, actors);
73
- Object.assign(service.behavior.options.delays, delays);
74
- }, [actions, guards, actors, delays]);
75
- return service;
23
+ // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
24
+ useIsomorphicLayoutEffect(() => {
25
+ actorRef.logic.implementations = machine.implementations;
26
+ });
27
+ return actorRef;
76
28
  }
77
- function useInterpret(getMachine) {
78
- for (var _len = arguments.length, _ref = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
79
- _ref[_key - 1] = arguments[_key];
80
- }
81
- var _ref$ = _ref[0],
82
- options = _ref$ === void 0 ? {} : _ref$,
83
- observerOrListener = _ref[1];
84
- var service = useIdleInterpreter(getMachine, options);
85
- useEffect(function () {
29
+ function useActorRef(machine, ...[options = {}, observerOrListener]) {
30
+ const actorRef = useIdleInterpreter(machine, options);
31
+ useEffect(() => {
86
32
  if (!observerOrListener) {
87
33
  return;
88
34
  }
89
- var sub = service.subscribe(toObserver(observerOrListener));
90
- return function () {
35
+ let sub = actorRef.subscribe(toObserver(observerOrListener));
36
+ return () => {
91
37
  sub.unsubscribe();
92
38
  };
93
39
  }, [observerOrListener]);
94
- useEffect(function () {
95
- service.start();
96
- return function () {
97
- service.stop();
98
- service.status = InterpreterStatus.NotStarted;
99
- service._initState();
40
+ useEffect(() => {
41
+ actorRef.start();
42
+ return () => {
43
+ actorRef.stop();
44
+ actorRef.status = ActorStatus.NotStarted;
45
+ actorRef._initState();
100
46
  };
101
47
  }, []);
102
- return service;
103
- }
104
-
105
- function identity(a) {
106
- return a;
107
- }
108
- var isEqual = function isEqual(prevState, nextState) {
109
- return prevState === nextState || nextState.changed === false;
110
- };
111
- function useMachine(getMachine) {
112
- for (var _len = arguments.length, _ref = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
113
- _ref[_key - 1] = arguments[_key];
114
- }
115
- var _ref$ = _ref[0],
116
- options = _ref$ === void 0 ? {} : _ref$;
117
- // using `useIdleInterpreter` allows us to subscribe to the service *before* we start it
118
- // so we don't miss any notifications
119
- var service = useIdleInterpreter(getMachine, options);
120
- var getSnapshot = useCallback(function () {
121
- return service.getSnapshot();
122
- }, [service]);
123
- var subscribe = useCallback(function (handleStoreChange) {
124
- var _service$subscribe = service.subscribe(handleStoreChange),
125
- unsubscribe = _service$subscribe.unsubscribe;
126
- return unsubscribe;
127
- }, [service]);
128
- var storeSnapshot = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
129
- useEffect(function () {
130
- service.start();
131
- return function () {
132
- service.stop();
133
- service.status = InterpreterStatus.NotStarted;
134
- service._initState();
135
- };
136
- }, []);
137
- return [storeSnapshot, service.send, service];
48
+ return actorRef;
138
49
  }
139
50
 
140
- function useActor(actorRef) {
141
- var subscribe = useCallback(function (handleStoreChange) {
142
- var _actorRef$subscribe = actorRef.subscribe(handleStoreChange),
143
- unsubscribe = _actorRef$subscribe.unsubscribe;
144
- return unsubscribe;
145
- }, [actorRef]);
146
- var boundGetSnapshot = useCallback(function () {
51
+ function useActor(logic, options = {}) {
52
+ const actorRef = useIdleInterpreter(logic, options);
53
+ const getSnapshot = useCallback(() => {
147
54
  return actorRef.getSnapshot();
148
55
  }, [actorRef]);
149
- var storeSnapshot = useSyncExternalStore(subscribe, boundGetSnapshot, boundGetSnapshot);
150
- var boundSend = useCallback(function (event) {
151
- return actorRef.send(event);
56
+ const subscribe = useCallback(handleStoreChange => {
57
+ const {
58
+ unsubscribe
59
+ } = actorRef.subscribe(handleStoreChange);
60
+ return unsubscribe;
61
+ }, [actorRef]);
62
+ const actorSnapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
63
+ useEffect(() => {
64
+ actorRef.start();
65
+ return () => {
66
+ actorRef.stop();
67
+ actorRef.status = ActorStatus.NotStarted;
68
+ actorRef._initState();
69
+ };
152
70
  }, [actorRef]);
153
- return [storeSnapshot, boundSend];
71
+ return [actorSnapshot, actorRef.send, actorRef];
154
72
  }
155
73
 
156
74
  function defaultCompare(a, b) {
157
75
  return a === b;
158
76
  }
159
- function useSelector(actor, selector) {
160
- var compare = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultCompare;
161
- var subscribe = useCallback(function (handleStoreChange) {
162
- var _actor$subscribe = actor.subscribe(handleStoreChange),
163
- unsubscribe = _actor$subscribe.unsubscribe;
77
+ function useSelector(actor, selector, compare = defaultCompare) {
78
+ const subscribe = useCallback(handleStoreChange => {
79
+ const {
80
+ unsubscribe
81
+ } = actor.subscribe(handleStoreChange);
164
82
  return unsubscribe;
165
83
  }, [actor]);
166
- var boundGetSnapshot = useCallback(function () {
167
- return actor.getSnapshot();
168
- }, [actor]);
169
- var selectedSnapshot = useSyncExternalStoreWithSelector(subscribe, boundGetSnapshot, boundGetSnapshot, selector, compare);
84
+ const boundGetSnapshot = useCallback(() => actor.getSnapshot(), [actor]);
85
+ const selectedSnapshot = useSyncExternalStoreWithSelector(subscribe, boundGetSnapshot, boundGetSnapshot, selector, compare);
170
86
  return selectedSnapshot;
171
87
  }
172
88
 
173
- /**
174
- * React hook that spawns an `ActorRef` with the specified `behavior`.
175
- * The returned `ActorRef` can be used with the `useActor(actorRef)` hook.
176
- *
177
- * @param behavior The actor behavior to spawn
178
- * @returns An ActorRef with the specified `behavior`
179
- */
180
- function useSpawn(behavior) {
181
- var actorRef = useConstant(function () {
182
- // TODO: figure out what to do about the name argument
183
- return interpret(behavior);
184
- });
185
- useEffect(function () {
186
- var _actorRef$start;
187
- (_actorRef$start = actorRef.start) === null || _actorRef$start === void 0 ? void 0 : _actorRef$start.call(actorRef);
188
- return function () {
189
- var _stop, _ref;
190
- (_stop = (_ref = actorRef).stop) === null || _stop === void 0 ? void 0 : _stop.call(_ref);
191
- };
192
- }, []);
193
- return actorRef;
194
- }
195
-
196
- function _typeof(obj) {
197
- "@babel/helpers - typeof";
198
-
199
- return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
200
- return typeof obj;
201
- } : function (obj) {
202
- return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
203
- }, _typeof(obj);
204
- }
205
-
206
89
  // From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
207
90
  function is(x, y) {
208
91
  if (x === y) {
@@ -213,13 +96,13 @@ function is(x, y) {
213
96
  }
214
97
  function shallowEqual(objA, objB) {
215
98
  if (is(objA, objB)) return true;
216
- if (_typeof(objA) !== 'object' || objA === null || _typeof(objB) !== 'object' || objB === null) {
99
+ if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
217
100
  return false;
218
101
  }
219
- var keysA = Object.keys(objA);
220
- var keysB = Object.keys(objB);
102
+ const keysA = Object.keys(objA);
103
+ const keysB = Object.keys(objB);
221
104
  if (keysA.length !== keysB.length) return false;
222
- for (var i = 0; i < keysA.length; i++) {
105
+ for (let i = 0; i < keysA.length; i++) {
223
106
  if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
224
107
  return false;
225
108
  }
@@ -227,95 +110,50 @@ function shallowEqual(objA, objB) {
227
110
  return true;
228
111
  }
229
112
 
230
- function _toPrimitive(input, hint) {
231
- if (typeof input !== "object" || input === null) return input;
232
- var prim = input[Symbol.toPrimitive];
233
- if (prim !== undefined) {
234
- var res = prim.call(input, hint || "default");
235
- if (typeof res !== "object") return res;
236
- throw new TypeError("@@toPrimitive must return a primitive value.");
237
- }
238
- return (hint === "string" ? String : Number)(input);
239
- }
240
-
241
- function _toPropertyKey(arg) {
242
- var key = _toPrimitive(arg, "string");
243
- return typeof key === "symbol" ? key : String(key);
244
- }
245
-
246
- function _defineProperty(obj, key, value) {
247
- key = _toPropertyKey(key);
248
- if (key in obj) {
249
- Object.defineProperty(obj, key, {
250
- value: value,
251
- enumerable: true,
252
- configurable: true,
253
- writable: true
254
- });
255
- } else {
256
- obj[key] = value;
257
- }
258
- return obj;
259
- }
260
-
261
- function ownKeys(object, enumerableOnly) {
262
- var keys = Object.keys(object);
263
- if (Object.getOwnPropertySymbols) {
264
- var symbols = Object.getOwnPropertySymbols(object);
265
- enumerableOnly && (symbols = symbols.filter(function (sym) {
266
- return Object.getOwnPropertyDescriptor(object, sym).enumerable;
267
- })), keys.push.apply(keys, symbols);
268
- }
269
- return keys;
270
- }
271
- function _objectSpread2(target) {
272
- for (var i = 1; i < arguments.length; i++) {
273
- var source = null != arguments[i] ? arguments[i] : {};
274
- i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
275
- _defineProperty(target, key, source[key]);
276
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
277
- Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
278
- });
279
- }
280
- return target;
281
- }
282
-
283
- function createActorContext(machine, interpreterOptions, observerOrListener) {
284
- var ReactContext = /*#__PURE__*/createContext(null);
285
- var OriginalProvider = ReactContext.Provider;
286
- function Provider(_ref) {
287
- var children = _ref.children,
288
- _ref$machine = _ref.machine,
289
- providedMachine = _ref$machine === void 0 ? machine : _ref$machine,
290
- options = _ref.options;
291
- var actor = useInterpret(providedMachine, _objectSpread2(_objectSpread2({}, interpreterOptions), options), observerOrListener);
292
- return /*#__PURE__*/createElement(OriginalProvider, {
113
+ function createActorContext(actorLogic, interpreterOptions) {
114
+ const ReactContext = /*#__PURE__*/React.createContext(null);
115
+ const OriginalProvider = ReactContext.Provider;
116
+ function Provider({
117
+ children,
118
+ logic: providedLogic = actorLogic,
119
+ machine,
120
+ options: providedOptions = interpreterOptions
121
+ }) {
122
+ if (machine) {
123
+ throw new Error(`The "machine" prop has been deprecated. Please use "logic" instead.`);
124
+ }
125
+ const actor = useActorRef(providedLogic, providedOptions);
126
+ return /*#__PURE__*/React.createElement(OriginalProvider, {
293
127
  value: actor,
294
- children: children
128
+ children
295
129
  });
296
130
  }
297
- Provider.displayName = "ActorProvider(".concat(machine.id, ")");
298
- function useContext$1() {
299
- var actor = useContext(ReactContext);
131
+
132
+ // TODO: add properties to actor ref to make more descriptive
133
+ Provider.displayName = `ActorProvider`;
134
+ function useContext() {
135
+ const actor = React.useContext(ReactContext);
300
136
  if (!actor) {
301
- throw new Error("You used a hook from \"".concat(Provider.displayName, "\" but it's not inside a <").concat(Provider.displayName, "> component."));
137
+ throw new Error(`You used a hook from "${Provider.displayName}" but it's not inside a <${Provider.displayName}> component.`);
302
138
  }
303
139
  return actor;
304
140
  }
305
- function useActor$1() {
306
- var actor = useContext$1();
307
- return useActor(actor);
308
- }
309
141
  function useSelector$1(selector, compare) {
310
- var actor = useContext$1();
142
+ const actor = useContext();
311
143
  return useSelector(actor, selector, compare);
312
144
  }
313
145
  return {
314
146
  Provider: Provider,
315
- useActorRef: useContext$1,
316
- useActor: useActor$1,
147
+ useActorRef: useContext,
317
148
  useSelector: useSelector$1
318
149
  };
319
150
  }
320
151
 
321
- export { createActorContext, shallowEqual, useActor, useInterpret, useMachine, useSelector, useSpawn };
152
+ /**
153
+ * @alias useActor
154
+ */
155
+ function useMachine(machine, options = {}) {
156
+ return useActor(machine, options);
157
+ }
158
+
159
+ export { createActorContext, shallowEqual, useActor, useActorRef, useMachine, useSelector };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xstate/react",
3
- "version": "4.0.0-alpha.2",
3
+ "version": "4.0.0-beta.10",
4
4
  "description": "XState tools for React",
5
5
  "keywords": [
6
6
  "state",
@@ -18,21 +18,32 @@
18
18
  "main": "dist/xstate-react.cjs.js",
19
19
  "module": "dist/xstate-react.esm.js",
20
20
  "exports": {
21
- "./fsm": {
22
- "module": "./fsm/dist/xstate-react-fsm.esm.js",
23
- "default": "./fsm/dist/xstate-react-fsm.cjs.js"
24
- },
25
21
  ".": {
22
+ "types": {
23
+ "import": "./dist/xstate-react.cjs.mjs",
24
+ "default": "./dist/xstate-react.cjs.js"
25
+ },
26
+ "development": {
27
+ "module": "./dist/xstate-react.development.esm.js",
28
+ "import": "./dist/xstate-react.development.cjs.mjs",
29
+ "default": "./dist/xstate-react.development.cjs.js"
30
+ },
26
31
  "module": "./dist/xstate-react.esm.js",
32
+ "import": "./dist/xstate-react.cjs.mjs",
27
33
  "default": "./dist/xstate-react.cjs.js"
28
34
  },
29
35
  "./package.json": "./package.json"
30
36
  },
37
+ "imports": {
38
+ "#is-development": {
39
+ "development": "./src/true.ts",
40
+ "default": "./src/false.ts"
41
+ }
42
+ },
31
43
  "types": "dist/xstate-react.cjs.d.ts",
32
44
  "sideEffects": false,
33
45
  "files": [
34
- "dist",
35
- "fsm"
46
+ "dist"
36
47
  ],
37
48
  "repository": {
38
49
  "type": "git",
@@ -43,20 +54,16 @@
43
54
  "url": "https://github.com/statelyai/xstate/issues"
44
55
  },
45
56
  "peerDependencies": {
46
- "@xstate/fsm": "^3.0.0-alpha.0",
47
57
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
48
- "xstate": "^5.0.0-alpha.3"
58
+ "xstate": "^5.0.0-beta.29"
49
59
  },
50
60
  "peerDependenciesMeta": {
51
- "@xstate/fsm": {
52
- "optional": true
53
- },
54
61
  "xstate": {
55
62
  "optional": true
56
63
  }
57
64
  },
58
65
  "dependencies": {
59
- "use-isomorphic-layout-effect": "^1.0.0",
66
+ "use-isomorphic-layout-effect": "^1.1.2",
60
67
  "use-sync-external-store": "^1.0.0"
61
68
  },
62
69
  "devDependencies": {
@@ -65,17 +72,10 @@
65
72
  "@types/react": "^17.0.43",
66
73
  "@types/react-dom": "^17.0.14",
67
74
  "@types/use-sync-external-store": "^0.0.3",
68
- "@xstate/fsm": "3.0.0-alpha.0",
69
75
  "jsdom": "^14.0.0",
70
76
  "jsdom-global": "^3.0.2",
71
77
  "react": "^18.0.0",
72
78
  "react-dom": "^18.0.0",
73
- "xstate": "5.0.0-alpha.3"
74
- },
75
- "preconstruct": {
76
- "entrypoints": [
77
- "./index.ts",
78
- "./fsm.ts"
79
- ]
79
+ "xstate": "5.0.0-beta.29"
80
80
  }
81
81
  }
@@ -1,3 +0,0 @@
1
- import { MachineImplementationsFrom, ServiceFrom, StateFrom, StateMachine } from '@xstate/fsm';
2
- export declare function useMachine<TMachine extends StateMachine.AnyMachine>(stateMachine: TMachine, options?: MachineImplementationsFrom<TMachine>): [StateFrom<TMachine>, ServiceFrom<TMachine>['send'], ServiceFrom<TMachine>];
3
- export declare function useService<TService extends StateMachine.AnyService>(service: TService): [StateFrom<TService>, TService['send'], TService];