@xstate/react 4.0.0-beta.5 → 4.0.0-beta.7

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.
Files changed (8) hide show
  1. package/dist/declarations/src/createActorContext.d.ts +10 -7
  2. package/dist/declarations/src/useActor.d.ts +2 -6
  3. package/dist/declarations/src/useActorRef.d.ts +10 -10
  4. package/dist/xstate-react.cjs.js +24 -22
  5. package/dist/xstate-react.development.cjs.js +25 -23
  6. package/dist/xstate-react.development.esm.js +25 -23
  7. package/dist/xstate-react.esm.js +24 -22
  8. package/package.json +3 -3
package/dist/declarations/src/createActorContext.d.ts CHANGED
@@ -1,15 +1,18 @@
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, 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)): {
5
- useSelector: <T>(selector: (snapshot: SnapshotFrom<TMachine>) => T, compare?: (a: T, b: T) => boolean) => T;
6
- useActorRef: () => ActorRefFrom<TMachine>;
4
+ export declare function createActorContext<TLogic extends AnyActorLogic>(actorLogic: TLogic, interpreterOptions?: InterpreterOptions<TLogic>): {
5
+ useSelector: <T>(selector: (snapshot: SnapshotFrom<TLogic>) => T, compare?: (a: T, b: T) => boolean) => T;
6
+ useActorRef: () => ActorRefFrom<TLogic>;
7
7
  Provider: (props: {
8
8
  children: React.ReactNode;
9
- } & (AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends true ? {
10
- machine?: TMachine;
9
+ options?: InterpreterOptions<TLogic>;
10
+ } & (TLogic extends AnyStateMachine ? AreAllImplementationsAssumedToBeProvided<TLogic['__TResolvedTypesMeta']> extends true ? {
11
+ logic?: TLogic;
11
12
  } : {
12
- machine: ToMachinesWithProvidedImplementations<TMachine>;
13
+ logic: ToMachinesWithProvidedImplementations<TLogic>;
14
+ } : {
15
+ logic?: TLogic;
13
16
  })) => React.ReactElement<any, any>;
14
17
  };
15
18
  export {};
package/dist/declarations/src/useActor.d.ts CHANGED
@@ -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>];
package/dist/declarations/src/useActorRef.d.ts CHANGED
@@ -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 {};
package/dist/xstate-react.cjs.js CHANGED
@@ -3,11 +3,12 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
- var withSelector = require('use-sync-external-store/shim/with-selector');
6
+ var shim = require('use-sync-external-store/shim');
7
7
  var xstate = require('xstate');
8
8
  var useConstant = require('./useConstant-2ee82f84.cjs.js');
9
9
  var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
10
10
  require('xstate/actors');
11
+ var withSelector = require('use-sync-external-store/shim/with-selector');
11
12
 
12
13
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
13
14
 
@@ -39,40 +40,34 @@ function useIdleInterpreter(machine, options) {
39
40
 
40
41
  // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
41
42
  useIsomorphicLayoutEffect__default["default"](() => {
42
- actorRef.behavior.options = machine.options;
43
+ actorRef.logic.implementations = machine.implementations;
43
44
  });
44
45
  return actorRef;
45
46
  }
46
47
  function useActorRef(machine, ...[options = {}, observerOrListener]) {
47
- const service = useIdleInterpreter(machine, options);
48
+ const actorRef = useIdleInterpreter(machine, options);
48
49
  React.useEffect(() => {
49
50
  if (!observerOrListener) {
50
51
  return;
51
52
  }
52
- let sub = service.subscribe(xstate.toObserver(observerOrListener));
53
+ let sub = actorRef.subscribe(xstate.toObserver(observerOrListener));
53
54
  return () => {
54
55
  sub.unsubscribe();
55
56
  };
56
57
  }, [observerOrListener]);
57
58
  React.useEffect(() => {
58
- service.start();
59
+ actorRef.start();
59
60
  return () => {
60
- service.stop();
61
- service.status = xstate.InterpreterStatus.NotStarted;
62
- service._initState();
61
+ actorRef.stop();
62
+ actorRef.status = xstate.InterpreterStatus.NotStarted;
63
+ actorRef._initState();
63
64
  };
64
65
  }, []);
65
- return service;
66
+ return actorRef;
66
67
  }
67
68
 
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);
69
+ function useActor(logic, options = {}) {
70
+ const actorRef = useIdleInterpreter(logic, options);
76
71
  const getSnapshot = React.useCallback(() => {
77
72
  return actorRef.getSnapshot();
78
73
  }, [actorRef]);
@@ -82,7 +77,7 @@ function useActor(behavior, options = {}) {
82
77
  } = actorRef.subscribe(handleStoreChange);
83
78
  return unsubscribe;
84
79
  }, [actorRef]);
85
- const actorSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
80
+ const actorSnapshot = shim.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
86
81
  React.useEffect(() => {
87
82
  actorRef.start();
88
83
  return () => {
@@ -133,20 +128,27 @@ function shallowEqual(objA, objB) {
133
128
  return true;
134
129
  }
135
130
 
136
- function createActorContext(machine, interpreterOptions, observerOrListener) {
131
+ function createActorContext(actorLogic, interpreterOptions) {
137
132
  const ReactContext = /*#__PURE__*/React__namespace.createContext(null);
138
133
  const OriginalProvider = ReactContext.Provider;
139
134
  function Provider({
140
135
  children,
141
- machine: providedMachine = machine
136
+ logic: providedLogic = actorLogic,
137
+ machine,
138
+ options: providedOptions = interpreterOptions
142
139
  }) {
143
- const actor = useActorRef(providedMachine, interpreterOptions, observerOrListener);
140
+ if (machine) {
141
+ throw new Error(`The "machine" prop has been deprecated. Please use "logic" instead.`);
142
+ }
143
+ const actor = useActorRef(providedLogic, providedOptions);
144
144
  return /*#__PURE__*/React__namespace.createElement(OriginalProvider, {
145
145
  value: actor,
146
146
  children
147
147
  });
148
148
  }
149
- Provider.displayName = `ActorProvider(${machine.id})`;
149
+
150
+ // TODO: add properties to actor ref to make more descriptive
151
+ Provider.displayName = `ActorProvider`;
150
152
  function useContext() {
151
153
  const actor = React__namespace.useContext(ReactContext);
152
154
  if (!actor) {
package/dist/xstate-react.development.cjs.js CHANGED
@@ -3,11 +3,12 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
- var withSelector = require('use-sync-external-store/shim/with-selector');
6
+ var shim = require('use-sync-external-store/shim');
7
7
  var xstate = require('xstate');
8
8
  var useConstant = require('./useConstant-ae6dceac.development.cjs.js');
9
9
  var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
10
10
  var actors = require('xstate/actors');
11
+ var withSelector = require('use-sync-external-store/shim/with-selector');
11
12
 
12
13
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
13
14
 
@@ -45,43 +46,37 @@ function useIdleInterpreter(machine, options) {
45
46
 
46
47
  // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
47
48
  useIsomorphicLayoutEffect__default["default"](() => {
48
- actorRef.behavior.options = machine.options;
49
+ actorRef.logic.implementations = machine.implementations;
49
50
  });
50
51
  return actorRef;
51
52
  }
52
53
  function useActorRef(machine, ...[options = {}, observerOrListener]) {
53
- const service = useIdleInterpreter(machine, options);
54
+ const actorRef = useIdleInterpreter(machine, options);
54
55
  React.useEffect(() => {
55
56
  if (!observerOrListener) {
56
57
  return;
57
58
  }
58
- let sub = service.subscribe(xstate.toObserver(observerOrListener));
59
+ let sub = actorRef.subscribe(xstate.toObserver(observerOrListener));
59
60
  return () => {
60
61
  sub.unsubscribe();
61
62
  };
62
63
  }, [observerOrListener]);
63
64
  React.useEffect(() => {
64
- service.start();
65
+ actorRef.start();
65
66
  return () => {
66
- service.stop();
67
- service.status = xstate.InterpreterStatus.NotStarted;
68
- service._initState();
67
+ actorRef.stop();
68
+ actorRef.status = xstate.InterpreterStatus.NotStarted;
69
+ actorRef._initState();
69
70
  };
70
71
  }, []);
71
- return service;
72
+ return actorRef;
72
73
  }
73
74
 
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)) {
75
+ function useActor(logic, options = {}) {
76
+ if (actors.isActorRef(logic)) {
82
77
  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
78
  }
84
- const actorRef = useIdleInterpreter(behavior, options);
79
+ const actorRef = useIdleInterpreter(logic, options);
85
80
  const getSnapshot = React.useCallback(() => {
86
81
  return actorRef.getSnapshot();
87
82
  }, [actorRef]);
@@ -91,7 +86,7 @@ function useActor(behavior, options = {}) {
91
86
  } = actorRef.subscribe(handleStoreChange);
92
87
  return unsubscribe;
93
88
  }, [actorRef]);
94
- const actorSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
89
+ const actorSnapshot = shim.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
95
90
  React.useEffect(() => {
96
91
  actorRef.start();
97
92
  return () => {
@@ -142,20 +137,27 @@ function shallowEqual(objA, objB) {
142
137
  return true;
143
138
  }
144
139
 
145
- function createActorContext(machine, interpreterOptions, observerOrListener) {
140
+ function createActorContext(actorLogic, interpreterOptions) {
146
141
  const ReactContext = /*#__PURE__*/React__namespace.createContext(null);
147
142
  const OriginalProvider = ReactContext.Provider;
148
143
  function Provider({
149
144
  children,
150
- machine: providedMachine = machine
145
+ logic: providedLogic = actorLogic,
146
+ machine,
147
+ options: providedOptions = interpreterOptions
151
148
  }) {
152
- const actor = useActorRef(providedMachine, interpreterOptions, observerOrListener);
149
+ if (machine) {
150
+ throw new Error(`The "machine" prop has been deprecated. Please use "logic" instead.`);
151
+ }
152
+ const actor = useActorRef(providedLogic, providedOptions);
153
153
  return /*#__PURE__*/React__namespace.createElement(OriginalProvider, {
154
154
  value: actor,
155
155
  children
156
156
  });
157
157
  }
158
- Provider.displayName = `ActorProvider(${machine.id})`;
158
+
159
+ // TODO: add properties to actor ref to make more descriptive
160
+ Provider.displayName = `ActorProvider`;
159
161
  function useContext() {
160
162
  const actor = React__namespace.useContext(ReactContext);
161
163
  if (!actor) {
package/dist/xstate-react.development.esm.js CHANGED
@@ -1,10 +1,11 @@
1
1
  import * as React from 'react';
2
2
  import { useEffect, useState, useCallback } from 'react';
3
- import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
3
+ import { useSyncExternalStore } from 'use-sync-external-store/shim';
4
4
  import { toObserver, InterpreterStatus, interpret } from 'xstate';
5
5
  import { u as useConstant } from './useConstant-bac83df4.development.esm.js';
6
6
  import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
7
7
  import { isActorRef } from 'xstate/actors';
8
+ import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
8
9
 
9
10
  function useIdleInterpreter(machine, options) {
10
11
  {
@@ -19,43 +20,37 @@ function useIdleInterpreter(machine, options) {
19
20
 
20
21
  // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
21
22
  useIsomorphicLayoutEffect(() => {
22
- actorRef.behavior.options = machine.options;
23
+ actorRef.logic.implementations = machine.implementations;
23
24
  });
24
25
  return actorRef;
25
26
  }
26
27
  function useActorRef(machine, ...[options = {}, observerOrListener]) {
27
- const service = useIdleInterpreter(machine, options);
28
+ const actorRef = useIdleInterpreter(machine, options);
28
29
  useEffect(() => {
29
30
  if (!observerOrListener) {
30
31
  return;
31
32
  }
32
- let sub = service.subscribe(toObserver(observerOrListener));
33
+ let sub = actorRef.subscribe(toObserver(observerOrListener));
33
34
  return () => {
34
35
  sub.unsubscribe();
35
36
  };
36
37
  }, [observerOrListener]);
37
38
  useEffect(() => {
38
- service.start();
39
+ actorRef.start();
39
40
  return () => {
40
- service.stop();
41
- service.status = InterpreterStatus.NotStarted;
42
- service._initState();
41
+ actorRef.stop();
42
+ actorRef.status = InterpreterStatus.NotStarted;
43
+ actorRef._initState();
43
44
  };
44
45
  }, []);
45
- return service;
46
+ return actorRef;
46
47
  }
47
48
 
48
- function identity(a) {
49
- return a;
50
- }
51
- const isEqual = (prevState, nextState) => {
52
- return prevState === nextState || nextState.changed === false;
53
- };
54
- function useActor(behavior, options = {}) {
55
- if (isActorRef(behavior)) {
49
+ function useActor(logic, options = {}) {
50
+ if (isActorRef(logic)) {
56
51
  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
52
  }
58
- const actorRef = useIdleInterpreter(behavior, options);
53
+ const actorRef = useIdleInterpreter(logic, options);
59
54
  const getSnapshot = useCallback(() => {
60
55
  return actorRef.getSnapshot();
61
56
  }, [actorRef]);
@@ -65,7 +60,7 @@ function useActor(behavior, options = {}) {
65
60
  } = actorRef.subscribe(handleStoreChange);
66
61
  return unsubscribe;
67
62
  }, [actorRef]);
68
- const actorSnapshot = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
63
+ const actorSnapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
69
64
  useEffect(() => {
70
65
  actorRef.start();
71
66
  return () => {
@@ -116,20 +111,27 @@ function shallowEqual(objA, objB) {
116
111
  return true;
117
112
  }
118
113
 
119
- function createActorContext(machine, interpreterOptions, observerOrListener) {
114
+ function createActorContext(actorLogic, interpreterOptions) {
120
115
  const ReactContext = /*#__PURE__*/React.createContext(null);
121
116
  const OriginalProvider = ReactContext.Provider;
122
117
  function Provider({
123
118
  children,
124
- machine: providedMachine = machine
119
+ logic: providedLogic = actorLogic,
120
+ machine,
121
+ options: providedOptions = interpreterOptions
125
122
  }) {
126
- const actor = useActorRef(providedMachine, interpreterOptions, observerOrListener);
123
+ if (machine) {
124
+ throw new Error(`The "machine" prop has been deprecated. Please use "logic" instead.`);
125
+ }
126
+ const actor = useActorRef(providedLogic, providedOptions);
127
127
  return /*#__PURE__*/React.createElement(OriginalProvider, {
128
128
  value: actor,
129
129
  children
130
130
  });
131
131
  }
132
- Provider.displayName = `ActorProvider(${machine.id})`;
132
+
133
+ // TODO: add properties to actor ref to make more descriptive
134
+ Provider.displayName = `ActorProvider`;
133
135
  function useContext() {
134
136
  const actor = React.useContext(ReactContext);
135
137
  if (!actor) {
package/dist/xstate-react.esm.js CHANGED
@@ -1,10 +1,11 @@
1
1
  import * as React from 'react';
2
2
  import { useEffect, useCallback } from 'react';
3
- import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
3
+ import { useSyncExternalStore } from 'use-sync-external-store/shim';
4
4
  import { toObserver, InterpreterStatus, interpret } from 'xstate';
5
5
  import { u as useConstant } from './useConstant-c7ec0fdd.esm.js';
6
6
  import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
7
7
  import 'xstate/actors';
8
+ import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
8
9
 
9
10
  function useIdleInterpreter(machine, options) {
10
11
  const actorRef = useConstant(() => {
@@ -13,40 +14,34 @@ function useIdleInterpreter(machine, options) {
13
14
 
14
15
  // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
15
16
  useIsomorphicLayoutEffect(() => {
16
- actorRef.behavior.options = machine.options;
17
+ actorRef.logic.implementations = machine.implementations;
17
18
  });
18
19
  return actorRef;
19
20
  }
20
21
  function useActorRef(machine, ...[options = {}, observerOrListener]) {
21
- const service = useIdleInterpreter(machine, options);
22
+ const actorRef = useIdleInterpreter(machine, options);
22
23
  useEffect(() => {
23
24
  if (!observerOrListener) {
24
25
  return;
25
26
  }
26
- let sub = service.subscribe(toObserver(observerOrListener));
27
+ let sub = actorRef.subscribe(toObserver(observerOrListener));
27
28
  return () => {
28
29
  sub.unsubscribe();
29
30
  };
30
31
  }, [observerOrListener]);
31
32
  useEffect(() => {
32
- service.start();
33
+ actorRef.start();
33
34
  return () => {
34
- service.stop();
35
- service.status = InterpreterStatus.NotStarted;
36
- service._initState();
35
+ actorRef.stop();
36
+ actorRef.status = InterpreterStatus.NotStarted;
37
+ actorRef._initState();
37
38
  };
38
39
  }, []);
39
- return service;
40
+ return actorRef;
40
41
  }
41
42
 
42
- function identity(a) {
43
- return a;
44
- }
45
- const isEqual = (prevState, nextState) => {
46
- return prevState === nextState || nextState.changed === false;
47
- };
48
- function useActor(behavior, options = {}) {
49
- const actorRef = useIdleInterpreter(behavior, options);
43
+ function useActor(logic, options = {}) {
44
+ const actorRef = useIdleInterpreter(logic, options);
50
45
  const getSnapshot = useCallback(() => {
51
46
  return actorRef.getSnapshot();
52
47
  }, [actorRef]);
@@ -56,7 +51,7 @@ function useActor(behavior, options = {}) {
56
51
  } = actorRef.subscribe(handleStoreChange);
57
52
  return unsubscribe;
58
53
  }, [actorRef]);
59
- const actorSnapshot = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
54
+ const actorSnapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
60
55
  useEffect(() => {
61
56
  actorRef.start();
62
57
  return () => {
@@ -107,20 +102,27 @@ function shallowEqual(objA, objB) {
107
102
  return true;
108
103
  }
109
104
 
110
- function createActorContext(machine, interpreterOptions, observerOrListener) {
105
+ function createActorContext(actorLogic, interpreterOptions) {
111
106
  const ReactContext = /*#__PURE__*/React.createContext(null);
112
107
  const OriginalProvider = ReactContext.Provider;
113
108
  function Provider({
114
109
  children,
115
- machine: providedMachine = machine
110
+ logic: providedLogic = actorLogic,
111
+ machine,
112
+ options: providedOptions = interpreterOptions
116
113
  }) {
117
- const actor = useActorRef(providedMachine, interpreterOptions, observerOrListener);
114
+ if (machine) {
115
+ throw new Error(`The "machine" prop has been deprecated. Please use "logic" instead.`);
116
+ }
117
+ const actor = useActorRef(providedLogic, providedOptions);
118
118
  return /*#__PURE__*/React.createElement(OriginalProvider, {
119
119
  value: actor,
120
120
  children
121
121
  });
122
122
  }
123
- Provider.displayName = `ActorProvider(${machine.id})`;
123
+
124
+ // TODO: add properties to actor ref to make more descriptive
125
+ Provider.displayName = `ActorProvider`;
124
126
  function useContext() {
125
127
  const actor = React.useContext(ReactContext);
126
128
  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.7",
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.16"
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.16"
100
100
  },
101
101
  "preconstruct": {
102
102
  "entrypoints": [