@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.
- package/dist/declarations/src/createActorContext.d.ts +6 -6
- package/dist/declarations/src/index.d.ts +6 -7
- 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-2ee82f84.cjs.js +35 -0
- package/dist/useConstant-ae6dceac.development.cjs.js +35 -0
- package/dist/{useConstant-c09b427a.cjs.prod.js → useConstant-bac83df4.development.esm.js} +3 -5
- package/dist/useConstant-c7ec0fdd.esm.js +13 -0
- 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 +178 -4
- package/dist/xstate-react.cjs.mjs +8 -0
- package/dist/xstate-react.development.cjs.js +190 -0
- package/dist/xstate-react.development.esm.js +159 -0
- package/dist/xstate-react.esm.js +74 -245
- 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.js +65 -4
- package/fsm/dist/xstate-react-fsm.cjs.mjs +4 -0
- package/fsm/dist/xstate-react-fsm.development.cjs.js +74 -0
- package/fsm/dist/xstate-react-fsm.development.esm.js +65 -0
- package/fsm/dist/xstate-react-fsm.esm.js +30 -42
- package/package.json +30 -4
- 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-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.dev.js +0 -80
- 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,
|
|
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
|
-
|
|
10
|
-
|
|
11
|
-
options: InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta'], true>;
|
|
9
|
+
} & (AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends true ? {
|
|
10
|
+
machine?: TMachine;
|
|
12
11
|
} : {
|
|
13
|
-
|
|
12
|
+
machine: ToMachinesWithProvidedImplementations<TMachine>;
|
|
14
13
|
})) => React.ReactElement<any, any>;
|
|
15
14
|
};
|
|
15
|
+
export {};
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export {
|
|
3
|
-
export {
|
|
4
|
-
export {
|
|
5
|
-
export {
|
|
6
|
-
export {
|
|
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 {
|
|
2
|
-
export declare function useActor<
|
|
3
|
-
|
|
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,
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
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
|
-
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
1
|
+
import * as React from 'react';
|
|
4
2
|
|
|
5
3
|
function useConstant(fn) {
|
|
6
|
-
|
|
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
|
-
|
|
13
|
+
export { useConstant as u };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"xstate-react.cjs.d.mts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"xstate-react.cjs.d.ts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}
|
package/dist/xstate-react.cjs.js
CHANGED
|
@@ -1,7 +1,181 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
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,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;
|