@xstate/react 4.0.0-beta.5 → 4.0.0-beta.6
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 +7 -5
- package/dist/declarations/src/useActor.d.ts +2 -6
- package/dist/declarations/src/useActorRef.d.ts +10 -10
- package/dist/xstate-react.cjs.js +13 -7
- package/dist/xstate-react.development.cjs.js +14 -8
- package/dist/xstate-react.development.esm.js +14 -8
- package/dist/xstate-react.esm.js +13 -7
- package/package.json +3 -3
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { ActorRefFrom, AnyStateMachine, SnapshotFrom, InterpreterOptions, Observer,
|
|
2
|
+
import { ActorRefFrom, AnyStateMachine, SnapshotFrom, InterpreterOptions, Observer, AreAllImplementationsAssumedToBeProvided, MarkAllImplementationsAsProvided, StateMachine, AnyActorLogic } from 'xstate';
|
|
3
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;
|
|
4
|
-
export declare function createActorContext<TMachine extends
|
|
4
|
+
export declare function createActorContext<TMachine extends AnyActorLogic>(actorLogic: TMachine, interpreterOptions?: InterpreterOptions<TMachine>, observerOrListener?: Observer<SnapshotFrom<TMachine>> | ((value: SnapshotFrom<TMachine>) => void)): {
|
|
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
|
-
} & (AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends true ? {
|
|
10
|
-
|
|
9
|
+
} & (TMachine extends AnyStateMachine ? AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends true ? {
|
|
10
|
+
logic?: TMachine;
|
|
11
11
|
} : {
|
|
12
|
-
|
|
12
|
+
logic: ToMachinesWithProvidedImplementations<TMachine>;
|
|
13
|
+
} : {
|
|
14
|
+
logic?: TMachine;
|
|
13
15
|
})) => React.ReactElement<any, any>;
|
|
14
16
|
};
|
|
15
17
|
export {};
|
|
@@ -1,6 +1,2 @@
|
|
|
1
|
-
import { ActorRefFrom,
|
|
2
|
-
export declare function useActor<
|
|
3
|
-
SnapshotFrom<TBehavior>,
|
|
4
|
-
ActorRefFrom<TBehavior>['send'],
|
|
5
|
-
ActorRefFrom<TBehavior>
|
|
6
|
-
];
|
|
1
|
+
import { ActorRefFrom, AnyActorLogic, InterpreterOptions, SnapshotFrom } from 'xstate';
|
|
2
|
+
export declare function useActor<TLogic extends AnyActorLogic>(logic: TLogic, options?: InterpreterOptions<TLogic>): [SnapshotFrom<TLogic>, ActorRefFrom<TLogic>['send'], ActorRefFrom<TLogic>];
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare function useIdleInterpreter(machine:
|
|
3
|
-
type RestParams<
|
|
4
|
-
options: InterpreterOptions<
|
|
5
|
-
observerOrListener?: Observer<StateFrom<
|
|
1
|
+
import { AnyActorLogic, AnyInterpreter, AnyStateMachine, AreAllImplementationsAssumedToBeProvided, InternalMachineImplementations, ActorRefFrom, InterpreterOptions, Observer, StateFrom, SnapshotFrom } from 'xstate';
|
|
2
|
+
export declare function useIdleInterpreter(machine: AnyActorLogic, options: Partial<InterpreterOptions<AnyActorLogic>>): AnyInterpreter;
|
|
3
|
+
type RestParams<TLogic extends AnyActorLogic> = TLogic extends AnyStateMachine ? AreAllImplementationsAssumedToBeProvided<TLogic['__TResolvedTypesMeta']> extends false ? [
|
|
4
|
+
options: InterpreterOptions<TLogic> & InternalMachineImplementations<TLogic['__TContext'], TLogic['__TEvent'], TLogic['__TResolvedTypesMeta'], true>,
|
|
5
|
+
observerOrListener?: Observer<StateFrom<TLogic>> | ((value: StateFrom<TLogic>) => void)
|
|
6
6
|
] : [
|
|
7
|
-
options?: InterpreterOptions<
|
|
8
|
-
observerOrListener?: Observer<StateFrom<
|
|
7
|
+
options?: InterpreterOptions<TLogic> & InternalMachineImplementations<TLogic['__TContext'], TLogic['__TEvent'], TLogic['__TResolvedTypesMeta']>,
|
|
8
|
+
observerOrListener?: Observer<StateFrom<TLogic>> | ((value: StateFrom<TLogic>) => void)
|
|
9
9
|
] : [
|
|
10
|
-
options?: InterpreterOptions<
|
|
11
|
-
observerOrListener?: Observer<SnapshotFrom<
|
|
10
|
+
options?: InterpreterOptions<TLogic>,
|
|
11
|
+
observerOrListener?: Observer<SnapshotFrom<TLogic>> | ((value: SnapshotFrom<TLogic>) => void)
|
|
12
12
|
];
|
|
13
|
-
export declare function useActorRef<
|
|
13
|
+
export declare function useActorRef<TLogic extends AnyActorLogic>(machine: TLogic, ...[options, observerOrListener]: RestParams<TLogic>): ActorRefFrom<TLogic>;
|
|
14
14
|
export {};
|
package/dist/xstate-react.cjs.js
CHANGED
|
@@ -39,7 +39,7 @@ function useIdleInterpreter(machine, options) {
|
|
|
39
39
|
|
|
40
40
|
// TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
|
|
41
41
|
useIsomorphicLayoutEffect__default["default"](() => {
|
|
42
|
-
actorRef.
|
|
42
|
+
actorRef.logic.options = machine.options;
|
|
43
43
|
});
|
|
44
44
|
return actorRef;
|
|
45
45
|
}
|
|
@@ -71,8 +71,8 @@ function identity(a) {
|
|
|
71
71
|
const isEqual = (prevState, nextState) => {
|
|
72
72
|
return prevState === nextState || nextState.changed === false;
|
|
73
73
|
};
|
|
74
|
-
function useActor(
|
|
75
|
-
const actorRef = useIdleInterpreter(
|
|
74
|
+
function useActor(logic, options = {}) {
|
|
75
|
+
const actorRef = useIdleInterpreter(logic, options);
|
|
76
76
|
const getSnapshot = React.useCallback(() => {
|
|
77
77
|
return actorRef.getSnapshot();
|
|
78
78
|
}, [actorRef]);
|
|
@@ -133,20 +133,26 @@ function shallowEqual(objA, objB) {
|
|
|
133
133
|
return true;
|
|
134
134
|
}
|
|
135
135
|
|
|
136
|
-
function createActorContext(
|
|
136
|
+
function createActorContext(actorLogic, interpreterOptions, observerOrListener) {
|
|
137
137
|
const ReactContext = /*#__PURE__*/React__namespace.createContext(null);
|
|
138
138
|
const OriginalProvider = ReactContext.Provider;
|
|
139
139
|
function Provider({
|
|
140
140
|
children,
|
|
141
|
-
|
|
141
|
+
logic: providedLogic = actorLogic,
|
|
142
|
+
machine
|
|
142
143
|
}) {
|
|
143
|
-
|
|
144
|
+
if (machine) {
|
|
145
|
+
throw new Error(`The "machine" prop has been deprecated. Please use "logic" instead.`);
|
|
146
|
+
}
|
|
147
|
+
const actor = useActorRef(providedLogic, interpreterOptions, observerOrListener);
|
|
144
148
|
return /*#__PURE__*/React__namespace.createElement(OriginalProvider, {
|
|
145
149
|
value: actor,
|
|
146
150
|
children
|
|
147
151
|
});
|
|
148
152
|
}
|
|
149
|
-
|
|
153
|
+
|
|
154
|
+
// TODO: add properties to actor ref to make more descriptive
|
|
155
|
+
Provider.displayName = `ActorProvider`;
|
|
150
156
|
function useContext() {
|
|
151
157
|
const actor = React__namespace.useContext(ReactContext);
|
|
152
158
|
if (!actor) {
|
|
@@ -45,7 +45,7 @@ function useIdleInterpreter(machine, options) {
|
|
|
45
45
|
|
|
46
46
|
// TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
|
|
47
47
|
useIsomorphicLayoutEffect__default["default"](() => {
|
|
48
|
-
actorRef.
|
|
48
|
+
actorRef.logic.options = machine.options;
|
|
49
49
|
});
|
|
50
50
|
return actorRef;
|
|
51
51
|
}
|
|
@@ -77,11 +77,11 @@ function identity(a) {
|
|
|
77
77
|
const isEqual = (prevState, nextState) => {
|
|
78
78
|
return prevState === nextState || nextState.changed === false;
|
|
79
79
|
};
|
|
80
|
-
function useActor(
|
|
81
|
-
if (actors.isActorRef(
|
|
80
|
+
function useActor(logic, options = {}) {
|
|
81
|
+
if (actors.isActorRef(logic)) {
|
|
82
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
83
|
}
|
|
84
|
-
const actorRef = useIdleInterpreter(
|
|
84
|
+
const actorRef = useIdleInterpreter(logic, options);
|
|
85
85
|
const getSnapshot = React.useCallback(() => {
|
|
86
86
|
return actorRef.getSnapshot();
|
|
87
87
|
}, [actorRef]);
|
|
@@ -142,20 +142,26 @@ function shallowEqual(objA, objB) {
|
|
|
142
142
|
return true;
|
|
143
143
|
}
|
|
144
144
|
|
|
145
|
-
function createActorContext(
|
|
145
|
+
function createActorContext(actorLogic, interpreterOptions, observerOrListener) {
|
|
146
146
|
const ReactContext = /*#__PURE__*/React__namespace.createContext(null);
|
|
147
147
|
const OriginalProvider = ReactContext.Provider;
|
|
148
148
|
function Provider({
|
|
149
149
|
children,
|
|
150
|
-
|
|
150
|
+
logic: providedLogic = actorLogic,
|
|
151
|
+
machine
|
|
151
152
|
}) {
|
|
152
|
-
|
|
153
|
+
if (machine) {
|
|
154
|
+
throw new Error(`The "machine" prop has been deprecated. Please use "logic" instead.`);
|
|
155
|
+
}
|
|
156
|
+
const actor = useActorRef(providedLogic, interpreterOptions, observerOrListener);
|
|
153
157
|
return /*#__PURE__*/React__namespace.createElement(OriginalProvider, {
|
|
154
158
|
value: actor,
|
|
155
159
|
children
|
|
156
160
|
});
|
|
157
161
|
}
|
|
158
|
-
|
|
162
|
+
|
|
163
|
+
// TODO: add properties to actor ref to make more descriptive
|
|
164
|
+
Provider.displayName = `ActorProvider`;
|
|
159
165
|
function useContext() {
|
|
160
166
|
const actor = React__namespace.useContext(ReactContext);
|
|
161
167
|
if (!actor) {
|
|
@@ -19,7 +19,7 @@ function useIdleInterpreter(machine, options) {
|
|
|
19
19
|
|
|
20
20
|
// TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
|
|
21
21
|
useIsomorphicLayoutEffect(() => {
|
|
22
|
-
actorRef.
|
|
22
|
+
actorRef.logic.options = machine.options;
|
|
23
23
|
});
|
|
24
24
|
return actorRef;
|
|
25
25
|
}
|
|
@@ -51,11 +51,11 @@ function identity(a) {
|
|
|
51
51
|
const isEqual = (prevState, nextState) => {
|
|
52
52
|
return prevState === nextState || nextState.changed === false;
|
|
53
53
|
};
|
|
54
|
-
function useActor(
|
|
55
|
-
if (isActorRef(
|
|
54
|
+
function useActor(logic, options = {}) {
|
|
55
|
+
if (isActorRef(logic)) {
|
|
56
56
|
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.`);
|
|
57
57
|
}
|
|
58
|
-
const actorRef = useIdleInterpreter(
|
|
58
|
+
const actorRef = useIdleInterpreter(logic, options);
|
|
59
59
|
const getSnapshot = useCallback(() => {
|
|
60
60
|
return actorRef.getSnapshot();
|
|
61
61
|
}, [actorRef]);
|
|
@@ -116,20 +116,26 @@ function shallowEqual(objA, objB) {
|
|
|
116
116
|
return true;
|
|
117
117
|
}
|
|
118
118
|
|
|
119
|
-
function createActorContext(
|
|
119
|
+
function createActorContext(actorLogic, interpreterOptions, observerOrListener) {
|
|
120
120
|
const ReactContext = /*#__PURE__*/React.createContext(null);
|
|
121
121
|
const OriginalProvider = ReactContext.Provider;
|
|
122
122
|
function Provider({
|
|
123
123
|
children,
|
|
124
|
-
|
|
124
|
+
logic: providedLogic = actorLogic,
|
|
125
|
+
machine
|
|
125
126
|
}) {
|
|
126
|
-
|
|
127
|
+
if (machine) {
|
|
128
|
+
throw new Error(`The "machine" prop has been deprecated. Please use "logic" instead.`);
|
|
129
|
+
}
|
|
130
|
+
const actor = useActorRef(providedLogic, interpreterOptions, observerOrListener);
|
|
127
131
|
return /*#__PURE__*/React.createElement(OriginalProvider, {
|
|
128
132
|
value: actor,
|
|
129
133
|
children
|
|
130
134
|
});
|
|
131
135
|
}
|
|
132
|
-
|
|
136
|
+
|
|
137
|
+
// TODO: add properties to actor ref to make more descriptive
|
|
138
|
+
Provider.displayName = `ActorProvider`;
|
|
133
139
|
function useContext() {
|
|
134
140
|
const actor = React.useContext(ReactContext);
|
|
135
141
|
if (!actor) {
|
package/dist/xstate-react.esm.js
CHANGED
|
@@ -13,7 +13,7 @@ function useIdleInterpreter(machine, options) {
|
|
|
13
13
|
|
|
14
14
|
// TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
|
|
15
15
|
useIsomorphicLayoutEffect(() => {
|
|
16
|
-
actorRef.
|
|
16
|
+
actorRef.logic.options = machine.options;
|
|
17
17
|
});
|
|
18
18
|
return actorRef;
|
|
19
19
|
}
|
|
@@ -45,8 +45,8 @@ function identity(a) {
|
|
|
45
45
|
const isEqual = (prevState, nextState) => {
|
|
46
46
|
return prevState === nextState || nextState.changed === false;
|
|
47
47
|
};
|
|
48
|
-
function useActor(
|
|
49
|
-
const actorRef = useIdleInterpreter(
|
|
48
|
+
function useActor(logic, options = {}) {
|
|
49
|
+
const actorRef = useIdleInterpreter(logic, options);
|
|
50
50
|
const getSnapshot = useCallback(() => {
|
|
51
51
|
return actorRef.getSnapshot();
|
|
52
52
|
}, [actorRef]);
|
|
@@ -107,20 +107,26 @@ function shallowEqual(objA, objB) {
|
|
|
107
107
|
return true;
|
|
108
108
|
}
|
|
109
109
|
|
|
110
|
-
function createActorContext(
|
|
110
|
+
function createActorContext(actorLogic, interpreterOptions, observerOrListener) {
|
|
111
111
|
const ReactContext = /*#__PURE__*/React.createContext(null);
|
|
112
112
|
const OriginalProvider = ReactContext.Provider;
|
|
113
113
|
function Provider({
|
|
114
114
|
children,
|
|
115
|
-
|
|
115
|
+
logic: providedLogic = actorLogic,
|
|
116
|
+
machine
|
|
116
117
|
}) {
|
|
117
|
-
|
|
118
|
+
if (machine) {
|
|
119
|
+
throw new Error(`The "machine" prop has been deprecated. Please use "logic" instead.`);
|
|
120
|
+
}
|
|
121
|
+
const actor = useActorRef(providedLogic, interpreterOptions, observerOrListener);
|
|
118
122
|
return /*#__PURE__*/React.createElement(OriginalProvider, {
|
|
119
123
|
value: actor,
|
|
120
124
|
children
|
|
121
125
|
});
|
|
122
126
|
}
|
|
123
|
-
|
|
127
|
+
|
|
128
|
+
// TODO: add properties to actor ref to make more descriptive
|
|
129
|
+
Provider.displayName = `ActorProvider`;
|
|
124
130
|
function useContext() {
|
|
125
131
|
const actor = React.useContext(ReactContext);
|
|
126
132
|
if (!actor) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xstate/react",
|
|
3
|
-
"version": "4.0.0-beta.
|
|
3
|
+
"version": "4.0.0-beta.6",
|
|
4
4
|
"description": "XState tools for React",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"state",
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
"peerDependencies": {
|
|
72
72
|
"@xstate/fsm": "^3.0.0-beta.2",
|
|
73
73
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
74
|
-
"xstate": "^5.0.0-beta.
|
|
74
|
+
"xstate": "^5.0.0-beta.14"
|
|
75
75
|
},
|
|
76
76
|
"peerDependenciesMeta": {
|
|
77
77
|
"@xstate/fsm": {
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
"jsdom-global": "^3.0.2",
|
|
97
97
|
"react": "^18.0.0",
|
|
98
98
|
"react-dom": "^18.0.0",
|
|
99
|
-
"xstate": "5.0.0-beta.
|
|
99
|
+
"xstate": "5.0.0-beta.14"
|
|
100
100
|
},
|
|
101
101
|
"preconstruct": {
|
|
102
102
|
"entrypoints": [
|