@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.
- package/README.md +0 -8
- package/dist/declarations/src/createActorContext.d.ts +12 -9
- package/dist/declarations/src/index.d.ts +6 -7
- package/dist/declarations/src/useActor.d.ts +2 -3
- package/dist/declarations/src/useActorRef.d.ts +14 -0
- package/dist/declarations/src/useMachine.d.ts +8 -9
- 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.js +187 -4
- package/dist/xstate-react.cjs.mjs +8 -0
- package/dist/xstate-react.development.cjs.js +199 -0
- package/dist/xstate-react.development.cjs.mjs +8 -0
- package/dist/xstate-react.development.esm.js +168 -0
- package/dist/xstate-react.esm.js +91 -253
- package/package.json +21 -21
- package/dist/declarations/src/fsm.d.ts +0 -3
- package/dist/declarations/src/types.d.ts +0 -15
- package/dist/declarations/src/useConstant.d.ts +0 -1
- package/dist/declarations/src/useInterpret.d.ts +0 -12
- package/dist/declarations/src/useSpawn.d.ts +0 -9
- package/dist/useConstant-0013a606.esm.js +0 -68
- package/dist/useConstant-c09b427a.cjs.prod.js +0 -15
- package/dist/useConstant-ff65b597.cjs.dev.js +0 -71
- package/dist/xstate-react.cjs.dev.js +0 -335
- package/dist/xstate-react.cjs.prod.js +0 -327
- package/fsm/dist/xstate-react-fsm.cjs.d.ts +0 -1
- package/fsm/dist/xstate-react-fsm.cjs.dev.js +0 -87
- package/fsm/dist/xstate-react-fsm.cjs.js +0 -7
- package/fsm/dist/xstate-react-fsm.cjs.prod.js +0 -134
- package/fsm/dist/xstate-react-fsm.esm.js +0 -78
- 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 };
|
package/dist/xstate-react.esm.js
CHANGED
|
@@ -1,208 +1,91 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useEffect,
|
|
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
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
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
|
|
15
|
+
return ref.current.v;
|
|
35
16
|
}
|
|
36
17
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
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
|
-
//
|
|
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;
|
|
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
|
|
78
|
-
|
|
79
|
-
|
|
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
|
-
|
|
90
|
-
return
|
|
35
|
+
let sub = actorRef.subscribe(toObserver(observerOrListener));
|
|
36
|
+
return () => {
|
|
91
37
|
sub.unsubscribe();
|
|
92
38
|
};
|
|
93
39
|
}, [observerOrListener]);
|
|
94
|
-
useEffect(
|
|
95
|
-
|
|
96
|
-
return
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
40
|
+
useEffect(() => {
|
|
41
|
+
actorRef.start();
|
|
42
|
+
return () => {
|
|
43
|
+
actorRef.stop();
|
|
44
|
+
actorRef.status = ActorStatus.NotStarted;
|
|
45
|
+
actorRef._initState();
|
|
100
46
|
};
|
|
101
47
|
}, []);
|
|
102
|
-
return
|
|
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(
|
|
141
|
-
|
|
142
|
-
|
|
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
|
-
|
|
150
|
-
|
|
151
|
-
|
|
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 [
|
|
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
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
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
|
-
|
|
167
|
-
|
|
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 (
|
|
99
|
+
if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
|
|
217
100
|
return false;
|
|
218
101
|
}
|
|
219
|
-
|
|
220
|
-
|
|
102
|
+
const keysA = Object.keys(objA);
|
|
103
|
+
const keysB = Object.keys(objB);
|
|
221
104
|
if (keysA.length !== keysB.length) return false;
|
|
222
|
-
for (
|
|
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
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
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
|
|
128
|
+
children
|
|
295
129
|
});
|
|
296
130
|
}
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
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(
|
|
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
|
-
|
|
142
|
+
const actor = useContext();
|
|
311
143
|
return useSelector(actor, selector, compare);
|
|
312
144
|
}
|
|
313
145
|
return {
|
|
314
146
|
Provider: Provider,
|
|
315
|
-
useActorRef: useContext
|
|
316
|
-
useActor: useActor$1,
|
|
147
|
+
useActorRef: useContext,
|
|
317
148
|
useSelector: useSelector$1
|
|
318
149
|
};
|
|
319
150
|
}
|
|
320
151
|
|
|
321
|
-
|
|
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-
|
|
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-
|
|
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.
|
|
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-
|
|
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];
|