@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.
@@ -1,15 +1,17 @@
1
1
  import * as React from 'react';
2
- import { ActorRefFrom, AnyStateMachine, SnapshotFrom, InterpreterOptions, Observer, StateFrom, AreAllImplementationsAssumedToBeProvided, MarkAllImplementationsAsProvided, StateMachine } from 'xstate';
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 AnyStateMachine>(machine: TMachine, interpreterOptions?: InterpreterOptions<TMachine>, observerOrListener?: Observer<StateFrom<TMachine>> | ((value: StateFrom<TMachine>) => void)): {
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
- machine?: TMachine;
9
+ } & (TMachine extends AnyStateMachine ? AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends true ? {
10
+ logic?: TMachine;
11
11
  } : {
12
- machine: ToMachinesWithProvidedImplementations<TMachine>;
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, 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
- ];
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 { 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)
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<TBehavior> & InternalMachineImplementations<TBehavior['__TContext'], TBehavior['__TEvent'], TBehavior['__TResolvedTypesMeta']>,
8
- observerOrListener?: Observer<StateFrom<TBehavior>> | ((value: StateFrom<TBehavior>) => void)
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<TBehavior>,
11
- observerOrListener?: Observer<SnapshotFrom<TBehavior>> | ((value: SnapshotFrom<TBehavior>) => void)
10
+ options?: InterpreterOptions<TLogic>,
11
+ observerOrListener?: Observer<SnapshotFrom<TLogic>> | ((value: SnapshotFrom<TLogic>) => void)
12
12
  ];
13
- export declare function useActorRef<TBehavior extends AnyActorBehavior>(machine: TBehavior, ...[options, observerOrListener]: RestParams<TBehavior>): ActorRefFrom<TBehavior>;
13
+ export declare function useActorRef<TLogic extends AnyActorLogic>(machine: TLogic, ...[options, observerOrListener]: RestParams<TLogic>): ActorRefFrom<TLogic>;
14
14
  export {};
@@ -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.behavior.options = machine.options;
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(behavior, options = {}) {
75
- const actorRef = useIdleInterpreter(behavior, options);
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(machine, interpreterOptions, observerOrListener) {
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
- machine: providedMachine = machine
141
+ logic: providedLogic = actorLogic,
142
+ machine
142
143
  }) {
143
- const actor = useActorRef(providedMachine, interpreterOptions, observerOrListener);
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
- Provider.displayName = `ActorProvider(${machine.id})`;
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.behavior.options = machine.options;
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(behavior, options = {}) {
81
- if (actors.isActorRef(behavior)) {
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(behavior, options);
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(machine, interpreterOptions, observerOrListener) {
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
- machine: providedMachine = machine
150
+ logic: providedLogic = actorLogic,
151
+ machine
151
152
  }) {
152
- const actor = useActorRef(providedMachine, interpreterOptions, observerOrListener);
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
- Provider.displayName = `ActorProvider(${machine.id})`;
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.behavior.options = machine.options;
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(behavior, options = {}) {
55
- if (isActorRef(behavior)) {
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(behavior, options);
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(machine, interpreterOptions, observerOrListener) {
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
- machine: providedMachine = machine
124
+ logic: providedLogic = actorLogic,
125
+ machine
125
126
  }) {
126
- const actor = useActorRef(providedMachine, interpreterOptions, observerOrListener);
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
- Provider.displayName = `ActorProvider(${machine.id})`;
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) {
@@ -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.behavior.options = machine.options;
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(behavior, options = {}) {
49
- const actorRef = useIdleInterpreter(behavior, options);
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(machine, interpreterOptions, observerOrListener) {
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
- machine: providedMachine = machine
115
+ logic: providedLogic = actorLogic,
116
+ machine
116
117
  }) {
117
- const actor = useActorRef(providedMachine, interpreterOptions, observerOrListener);
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
- Provider.displayName = `ActorProvider(${machine.id})`;
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.5",
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.13"
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.13"
99
+ "xstate": "5.0.0-beta.14"
100
100
  },
101
101
  "preconstruct": {
102
102
  "entrypoints": [