@xstate/react 4.0.0-alpha.2 → 4.0.0-beta.4
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.
- package/dist/declarations/src/createActorContext.d.ts +6 -6
- package/dist/declarations/src/index.d.ts +2 -3
- package/dist/declarations/src/useActor.d.ts +6 -3
- package/dist/declarations/src/useActorRef.d.ts +14 -0
- package/dist/declarations/src/useMachine.d.ts +9 -9
- package/dist/{useConstant-ff65b597.cjs.dev.js → useConstant-23e96eea.cjs.dev.js} +21 -1
- package/dist/useConstant-720f1662.cjs.prod.js +35 -0
- package/dist/{useConstant-0013a606.esm.js → useConstant-9bbaf12a.esm.js} +2 -2
- package/dist/xstate-react.cjs.d.mts +2 -0
- package/dist/xstate-react.cjs.d.mts.map +1 -0
- package/dist/xstate-react.cjs.d.ts +1 -0
- package/dist/xstate-react.cjs.d.ts.map +1 -0
- package/dist/xstate-react.cjs.dev.js +66 -188
- package/dist/xstate-react.cjs.mjs +8 -0
- package/dist/xstate-react.cjs.prod.js +59 -186
- package/dist/xstate-react.esm.js +53 -192
- package/fsm/dist/xstate-react-fsm.cjs.d.mts +2 -0
- package/fsm/dist/xstate-react-fsm.cjs.d.mts.map +1 -0
- package/fsm/dist/xstate-react-fsm.cjs.d.ts +1 -0
- package/fsm/dist/xstate-react-fsm.cjs.d.ts.map +1 -0
- package/fsm/dist/xstate-react-fsm.cjs.dev.js +3 -10
- package/fsm/dist/xstate-react-fsm.cjs.mjs +4 -0
- package/fsm/dist/xstate-react-fsm.cjs.prod.js +3 -10
- package/fsm/dist/xstate-react-fsm.esm.js +2 -9
- package/package.json +8 -6
- package/dist/declarations/src/types.d.ts +0 -15
- package/dist/declarations/src/useInterpret.d.ts +0 -12
- package/dist/declarations/src/useSpawn.d.ts +0 -9
- package/dist/useConstant-c09b427a.cjs.prod.js +0 -15
|
@@ -3,85 +3,54 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
|
|
7
6
|
var withSelector = require('use-sync-external-store/shim/with-selector');
|
|
8
|
-
var useConstant = require('./useConstant-c09b427a.cjs.prod.js');
|
|
9
7
|
var xstate = require('xstate');
|
|
10
|
-
var
|
|
8
|
+
var useConstant = require('./useConstant-720f1662.cjs.prod.js');
|
|
9
|
+
var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
|
|
10
|
+
require('xstate/actors');
|
|
11
11
|
|
|
12
12
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
if (
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
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
|
+
});
|
|
25
27
|
}
|
|
26
|
-
|
|
28
|
+
n["default"] = e;
|
|
29
|
+
return Object.freeze(n);
|
|
27
30
|
}
|
|
28
31
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
var target = _objectWithoutPropertiesLoose(source, excluded);
|
|
32
|
-
var key, i;
|
|
33
|
-
if (Object.getOwnPropertySymbols) {
|
|
34
|
-
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
35
|
-
for (i = 0; i < sourceSymbolKeys.length; i++) {
|
|
36
|
-
key = sourceSymbolKeys[i];
|
|
37
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
38
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
39
|
-
target[key] = source[key];
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
return target;
|
|
43
|
-
}
|
|
32
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
33
|
+
var useIsomorphicLayoutEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicLayoutEffect);
|
|
44
34
|
|
|
45
|
-
|
|
46
|
-
function
|
|
47
|
-
|
|
48
|
-
return typeof getMachine === 'function' ? getMachine() : getMachine;
|
|
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.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 xstate.interpret(machineWithConfig, interpreterOptions);
|
|
35
|
+
function useIdleInterpreter(machine, options) {
|
|
36
|
+
var actorRef = useConstant.useConstant(function () {
|
|
37
|
+
return xstate.interpret(machine, options);
|
|
64
38
|
});
|
|
65
39
|
|
|
66
|
-
//
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
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;
|
|
40
|
+
// TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
|
|
41
|
+
useIsomorphicLayoutEffect__default["default"](function () {
|
|
42
|
+
actorRef.behavior.options = machine.options;
|
|
43
|
+
});
|
|
44
|
+
return actorRef;
|
|
76
45
|
}
|
|
77
|
-
function
|
|
46
|
+
function useActorRef(machine) {
|
|
78
47
|
for (var _len = arguments.length, _ref = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
79
48
|
_ref[_key - 1] = arguments[_key];
|
|
80
49
|
}
|
|
81
50
|
var _ref$ = _ref[0],
|
|
82
51
|
options = _ref$ === void 0 ? {} : _ref$,
|
|
83
52
|
observerOrListener = _ref[1];
|
|
84
|
-
var service = useIdleInterpreter(
|
|
53
|
+
var service = useIdleInterpreter(machine, options);
|
|
85
54
|
React.useEffect(function () {
|
|
86
55
|
if (!observerOrListener) {
|
|
87
56
|
return;
|
|
@@ -108,49 +77,27 @@ function identity(a) {
|
|
|
108
77
|
var isEqual = function isEqual(prevState, nextState) {
|
|
109
78
|
return prevState === nextState || nextState.changed === false;
|
|
110
79
|
};
|
|
111
|
-
function
|
|
112
|
-
|
|
113
|
-
|
|
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);
|
|
80
|
+
function useActor(behavior) {
|
|
81
|
+
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
82
|
+
var actorRef = useIdleInterpreter(behavior, options);
|
|
120
83
|
var getSnapshot = React.useCallback(function () {
|
|
121
|
-
return
|
|
122
|
-
}, [
|
|
123
|
-
var subscribe = React.useCallback(function (handleStoreChange) {
|
|
124
|
-
var _service$subscribe = service.subscribe(handleStoreChange),
|
|
125
|
-
unsubscribe = _service$subscribe.unsubscribe;
|
|
126
|
-
return unsubscribe;
|
|
127
|
-
}, [service]);
|
|
128
|
-
var storeSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
|
|
129
|
-
React.useEffect(function () {
|
|
130
|
-
service.start();
|
|
131
|
-
return function () {
|
|
132
|
-
service.stop();
|
|
133
|
-
service.status = xstate.InterpreterStatus.NotStarted;
|
|
134
|
-
service._initState();
|
|
135
|
-
};
|
|
136
|
-
}, []);
|
|
137
|
-
return [storeSnapshot, service.send, service];
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
function useActor(actorRef) {
|
|
84
|
+
return actorRef.getSnapshot();
|
|
85
|
+
}, [actorRef]);
|
|
141
86
|
var subscribe = React.useCallback(function (handleStoreChange) {
|
|
142
87
|
var _actorRef$subscribe = actorRef.subscribe(handleStoreChange),
|
|
143
88
|
unsubscribe = _actorRef$subscribe.unsubscribe;
|
|
144
89
|
return unsubscribe;
|
|
145
90
|
}, [actorRef]);
|
|
146
|
-
var
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
91
|
+
var actorSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
|
|
92
|
+
React.useEffect(function () {
|
|
93
|
+
actorRef.start();
|
|
94
|
+
return function () {
|
|
95
|
+
actorRef.stop();
|
|
96
|
+
actorRef.status = xstate.InterpreterStatus.NotStarted;
|
|
97
|
+
actorRef._initState();
|
|
98
|
+
};
|
|
152
99
|
}, [actorRef]);
|
|
153
|
-
return [
|
|
100
|
+
return [actorSnapshot, actorRef.send, actorRef];
|
|
154
101
|
}
|
|
155
102
|
|
|
156
103
|
function defaultCompare(a, b) {
|
|
@@ -170,29 +117,6 @@ function useSelector(actor, selector) {
|
|
|
170
117
|
return selectedSnapshot;
|
|
171
118
|
}
|
|
172
119
|
|
|
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.useConstant(function () {
|
|
182
|
-
// TODO: figure out what to do about the name argument
|
|
183
|
-
return xstate.interpret(behavior);
|
|
184
|
-
});
|
|
185
|
-
React.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
120
|
function _typeof(obj) {
|
|
197
121
|
"@babel/helpers - typeof";
|
|
198
122
|
|
|
@@ -227,85 +151,27 @@ function shallowEqual(objA, objB) {
|
|
|
227
151
|
return true;
|
|
228
152
|
}
|
|
229
153
|
|
|
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
154
|
function createActorContext(machine, interpreterOptions, observerOrListener) {
|
|
284
|
-
var ReactContext = /*#__PURE__*/
|
|
155
|
+
var ReactContext = /*#__PURE__*/React__namespace.createContext(null);
|
|
285
156
|
var OriginalProvider = ReactContext.Provider;
|
|
286
157
|
function Provider(_ref) {
|
|
287
158
|
var children = _ref.children,
|
|
288
159
|
_ref$machine = _ref.machine,
|
|
289
|
-
providedMachine = _ref$machine === void 0 ? machine : _ref$machine
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
return /*#__PURE__*/React.createElement(OriginalProvider, {
|
|
160
|
+
providedMachine = _ref$machine === void 0 ? machine : _ref$machine;
|
|
161
|
+
var actor = useActorRef(providedMachine, interpreterOptions, observerOrListener);
|
|
162
|
+
return /*#__PURE__*/React__namespace.createElement(OriginalProvider, {
|
|
293
163
|
value: actor,
|
|
294
164
|
children: children
|
|
295
165
|
});
|
|
296
166
|
}
|
|
297
167
|
Provider.displayName = "ActorProvider(".concat(machine.id, ")");
|
|
298
168
|
function useContext() {
|
|
299
|
-
var actor =
|
|
169
|
+
var actor = React__namespace.useContext(ReactContext);
|
|
300
170
|
if (!actor) {
|
|
301
171
|
throw new Error("You used a hook from \"".concat(Provider.displayName, "\" but it's not inside a <").concat(Provider.displayName, "> component."));
|
|
302
172
|
}
|
|
303
173
|
return actor;
|
|
304
174
|
}
|
|
305
|
-
function useActor$1() {
|
|
306
|
-
var actor = useContext();
|
|
307
|
-
return useActor(actor);
|
|
308
|
-
}
|
|
309
175
|
function useSelector$1(selector, compare) {
|
|
310
176
|
var actor = useContext();
|
|
311
177
|
return useSelector(actor, selector, compare);
|
|
@@ -313,15 +179,22 @@ function createActorContext(machine, interpreterOptions, observerOrListener) {
|
|
|
313
179
|
return {
|
|
314
180
|
Provider: Provider,
|
|
315
181
|
useActorRef: useContext,
|
|
316
|
-
useActor: useActor$1,
|
|
317
182
|
useSelector: useSelector$1
|
|
318
183
|
};
|
|
319
184
|
}
|
|
320
185
|
|
|
186
|
+
/**
|
|
187
|
+
*
|
|
188
|
+
* @deprecated Use `useActor(...)` instead.
|
|
189
|
+
*/
|
|
190
|
+
function useMachine(machine) {
|
|
191
|
+
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
192
|
+
return useActor(machine, options);
|
|
193
|
+
}
|
|
194
|
+
|
|
321
195
|
exports.createActorContext = createActorContext;
|
|
322
196
|
exports.shallowEqual = shallowEqual;
|
|
323
197
|
exports.useActor = useActor;
|
|
324
|
-
exports.
|
|
198
|
+
exports.useActorRef = useActorRef;
|
|
325
199
|
exports.useMachine = useMachine;
|
|
326
200
|
exports.useSelector = useSelector;
|
|
327
|
-
exports.useSpawn = useSpawn;
|
package/dist/xstate-react.esm.js
CHANGED
|
@@ -1,87 +1,38 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useEffect, useState, useCallback
|
|
3
|
-
import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useEffect, useState, useCallback } from 'react';
|
|
4
3
|
import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
|
|
5
4
|
import { toObserver, InterpreterStatus, interpret } from 'xstate';
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
|
|
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
|
-
|
|
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
|
-
}
|
|
33
|
-
}
|
|
34
|
-
return target;
|
|
35
|
-
}
|
|
5
|
+
import { _ as _slicedToArray, u as useConstant } from './useConstant-9bbaf12a.esm.js';
|
|
6
|
+
import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
|
|
7
|
+
import { isActorRef } from 'xstate/actors';
|
|
36
8
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
var machine = useConstant(function () {
|
|
40
|
-
return typeof getMachine === 'function' ? getMachine() : getMachine;
|
|
41
|
-
});
|
|
42
|
-
if (process.env.NODE_ENV !== 'production' && typeof getMachine !== 'function') {
|
|
9
|
+
function useIdleInterpreter(machine, options) {
|
|
10
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
43
11
|
var _useState = useState(machine),
|
|
44
12
|
_useState2 = _slicedToArray(_useState, 1),
|
|
45
13
|
initialMachine = _useState2[0];
|
|
46
|
-
if (
|
|
47
|
-
console.warn(
|
|
14
|
+
if (machine.config !== initialMachine.config) {
|
|
15
|
+
console.warn("Actor logic has changed between renders. This is not supported and may lead to invalid snapshots.");
|
|
48
16
|
}
|
|
49
17
|
}
|
|
50
|
-
var
|
|
51
|
-
|
|
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
|
+
var actorRef = useConstant(function () {
|
|
19
|
+
return interpret(machine, options);
|
|
64
20
|
});
|
|
65
21
|
|
|
66
|
-
//
|
|
67
|
-
// This mutation assignment is safe because the service instance is only used
|
|
68
|
-
// in one place -- this hook's caller.
|
|
22
|
+
// TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
|
|
69
23
|
useIsomorphicLayoutEffect(function () {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
Object.assign(service.behavior.options.delays, delays);
|
|
74
|
-
}, [actions, guards, actors, delays]);
|
|
75
|
-
return service;
|
|
24
|
+
actorRef.behavior.options = machine.options;
|
|
25
|
+
});
|
|
26
|
+
return actorRef;
|
|
76
27
|
}
|
|
77
|
-
function
|
|
28
|
+
function useActorRef(machine) {
|
|
78
29
|
for (var _len = arguments.length, _ref = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
79
30
|
_ref[_key - 1] = arguments[_key];
|
|
80
31
|
}
|
|
81
32
|
var _ref$ = _ref[0],
|
|
82
33
|
options = _ref$ === void 0 ? {} : _ref$,
|
|
83
34
|
observerOrListener = _ref[1];
|
|
84
|
-
var service = useIdleInterpreter(
|
|
35
|
+
var service = useIdleInterpreter(machine, options);
|
|
85
36
|
useEffect(function () {
|
|
86
37
|
if (!observerOrListener) {
|
|
87
38
|
return;
|
|
@@ -108,49 +59,32 @@ function identity(a) {
|
|
|
108
59
|
var isEqual = function isEqual(prevState, nextState) {
|
|
109
60
|
return prevState === nextState || nextState.changed === false;
|
|
110
61
|
};
|
|
111
|
-
function
|
|
112
|
-
|
|
113
|
-
|
|
62
|
+
function useActor(behavior) {
|
|
63
|
+
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
64
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
65
|
+
if (isActorRef(behavior)) {
|
|
66
|
+
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.");
|
|
67
|
+
}
|
|
114
68
|
}
|
|
115
|
-
var
|
|
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);
|
|
69
|
+
var actorRef = useIdleInterpreter(behavior, options);
|
|
120
70
|
var getSnapshot = useCallback(function () {
|
|
121
|
-
return
|
|
122
|
-
}, [
|
|
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];
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
function useActor(actorRef) {
|
|
71
|
+
return actorRef.getSnapshot();
|
|
72
|
+
}, [actorRef]);
|
|
141
73
|
var subscribe = useCallback(function (handleStoreChange) {
|
|
142
74
|
var _actorRef$subscribe = actorRef.subscribe(handleStoreChange),
|
|
143
75
|
unsubscribe = _actorRef$subscribe.unsubscribe;
|
|
144
76
|
return unsubscribe;
|
|
145
77
|
}, [actorRef]);
|
|
146
|
-
var
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
78
|
+
var actorSnapshot = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
|
|
79
|
+
useEffect(function () {
|
|
80
|
+
actorRef.start();
|
|
81
|
+
return function () {
|
|
82
|
+
actorRef.stop();
|
|
83
|
+
actorRef.status = InterpreterStatus.NotStarted;
|
|
84
|
+
actorRef._initState();
|
|
85
|
+
};
|
|
152
86
|
}, [actorRef]);
|
|
153
|
-
return [
|
|
87
|
+
return [actorSnapshot, actorRef.send, actorRef];
|
|
154
88
|
}
|
|
155
89
|
|
|
156
90
|
function defaultCompare(a, b) {
|
|
@@ -170,29 +104,6 @@ function useSelector(actor, selector) {
|
|
|
170
104
|
return selectedSnapshot;
|
|
171
105
|
}
|
|
172
106
|
|
|
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
107
|
function _typeof(obj) {
|
|
197
108
|
"@babel/helpers - typeof";
|
|
198
109
|
|
|
@@ -227,95 +138,45 @@ function shallowEqual(objA, objB) {
|
|
|
227
138
|
return true;
|
|
228
139
|
}
|
|
229
140
|
|
|
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
141
|
function createActorContext(machine, interpreterOptions, observerOrListener) {
|
|
284
|
-
var ReactContext = /*#__PURE__*/createContext(null);
|
|
142
|
+
var ReactContext = /*#__PURE__*/React.createContext(null);
|
|
285
143
|
var OriginalProvider = ReactContext.Provider;
|
|
286
144
|
function Provider(_ref) {
|
|
287
145
|
var children = _ref.children,
|
|
288
146
|
_ref$machine = _ref.machine,
|
|
289
|
-
providedMachine = _ref$machine === void 0 ? machine : _ref$machine
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
return /*#__PURE__*/createElement(OriginalProvider, {
|
|
147
|
+
providedMachine = _ref$machine === void 0 ? machine : _ref$machine;
|
|
148
|
+
var actor = useActorRef(providedMachine, interpreterOptions, observerOrListener);
|
|
149
|
+
return /*#__PURE__*/React.createElement(OriginalProvider, {
|
|
293
150
|
value: actor,
|
|
294
151
|
children: children
|
|
295
152
|
});
|
|
296
153
|
}
|
|
297
154
|
Provider.displayName = "ActorProvider(".concat(machine.id, ")");
|
|
298
|
-
function useContext
|
|
299
|
-
var actor = useContext(ReactContext);
|
|
155
|
+
function useContext() {
|
|
156
|
+
var actor = React.useContext(ReactContext);
|
|
300
157
|
if (!actor) {
|
|
301
158
|
throw new Error("You used a hook from \"".concat(Provider.displayName, "\" but it's not inside a <").concat(Provider.displayName, "> component."));
|
|
302
159
|
}
|
|
303
160
|
return actor;
|
|
304
161
|
}
|
|
305
|
-
function useActor$1() {
|
|
306
|
-
var actor = useContext$1();
|
|
307
|
-
return useActor(actor);
|
|
308
|
-
}
|
|
309
162
|
function useSelector$1(selector, compare) {
|
|
310
|
-
var actor = useContext
|
|
163
|
+
var actor = useContext();
|
|
311
164
|
return useSelector(actor, selector, compare);
|
|
312
165
|
}
|
|
313
166
|
return {
|
|
314
167
|
Provider: Provider,
|
|
315
|
-
useActorRef: useContext
|
|
316
|
-
useActor: useActor$1,
|
|
168
|
+
useActorRef: useContext,
|
|
317
169
|
useSelector: useSelector$1
|
|
318
170
|
};
|
|
319
171
|
}
|
|
320
172
|
|
|
321
|
-
|
|
173
|
+
/**
|
|
174
|
+
*
|
|
175
|
+
* @deprecated Use `useActor(...)` instead.
|
|
176
|
+
*/
|
|
177
|
+
function useMachine(machine) {
|
|
178
|
+
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
179
|
+
return useActor(machine, options);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
export { createActorContext, shallowEqual, useActor, useActorRef, useMachine, useSelector };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"xstate-react-fsm.cjs.d.mts","sourceRoot":"","sources":["../../dist/declarations/src/fsm.d.ts"],"names":[],"mappings":"AAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"xstate-react-fsm.cjs.d.ts","sourceRoot":"","sources":["../../dist/declarations/src/fsm.d.ts"],"names":[],"mappings":"AAAA"}
|