@xstate/react 4.0.0-beta.6 → 4.0.0-beta.8

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 +9 -8
  2. package/dist/xstate-react.cjs.js +15 -19
  3. package/dist/xstate-react.development.cjs.js +15 -19
  4. package/dist/xstate-react.development.cjs.mjs +8 -0
  5. package/dist/xstate-react.development.esm.js +15 -19
  6. package/dist/xstate-react.esm.js +15 -19
  7. package/fsm/dist/xstate-react-fsm.development.cjs.mjs +4 -0
  8. package/package.json +5 -5
package/dist/declarations/src/createActorContext.d.ts CHANGED
@@ -1,17 +1,18 @@
1
1
  import * as React from 'react';
2
- import { ActorRefFrom, AnyStateMachine, SnapshotFrom, InterpreterOptions, Observer, AreAllImplementationsAssumedToBeProvided, MarkAllImplementationsAsProvided, StateMachine, AnyActorLogic } 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 AnyActorLogic>(actorLogic: TMachine, interpreterOptions?: InterpreterOptions<TMachine>, observerOrListener?: Observer<SnapshotFrom<TMachine>> | ((value: SnapshotFrom<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
- } & (TMachine extends AnyStateMachine ? AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends true ? {
10
- logic?: TMachine;
9
+ options?: InterpreterOptions<TLogic>;
10
+ } & (TLogic extends AnyStateMachine ? AreAllImplementationsAssumedToBeProvided<TLogic['__TResolvedTypesMeta']> extends true ? {
11
+ logic?: TLogic;
11
12
  } : {
12
- logic: ToMachinesWithProvidedImplementations<TMachine>;
13
+ logic: ToMachinesWithProvidedImplementations<TLogic>;
13
14
  } : {
14
- logic?: TMachine;
15
+ logic?: TLogic;
15
16
  })) => React.ReactElement<any, any>;
16
17
  };
17
18
  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,38 +40,32 @@ 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.logic.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
69
  function useActor(logic, options = {}) {
75
70
  const actorRef = useIdleInterpreter(logic, options);
76
71
  const getSnapshot = React.useCallback(() => {
@@ -82,7 +77,7 @@ function useActor(logic, 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,18 +128,19 @@ function shallowEqual(objA, objB) {
133
128
  return true;
134
129
  }
135
130
 
136
- function createActorContext(actorLogic, 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
136
  logic: providedLogic = actorLogic,
142
- machine
137
+ machine,
138
+ options: providedOptions = interpreterOptions
143
139
  }) {
144
140
  if (machine) {
145
141
  throw new Error(`The "machine" prop has been deprecated. Please use "logic" instead.`);
146
142
  }
147
- const actor = useActorRef(providedLogic, interpreterOptions, observerOrListener);
143
+ const actor = useActorRef(providedLogic, providedOptions);
148
144
  return /*#__PURE__*/React__namespace.createElement(OriginalProvider, {
149
145
  value: actor,
150
146
  children
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,38 +46,32 @@ 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.logic.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
75
  function useActor(logic, options = {}) {
81
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.`);
@@ -91,7 +86,7 @@ function useActor(logic, 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,18 +137,19 @@ function shallowEqual(objA, objB) {
142
137
  return true;
143
138
  }
144
139
 
145
- function createActorContext(actorLogic, 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
145
  logic: providedLogic = actorLogic,
151
- machine
146
+ machine,
147
+ options: providedOptions = interpreterOptions
152
148
  }) {
153
149
  if (machine) {
154
150
  throw new Error(`The "machine" prop has been deprecated. Please use "logic" instead.`);
155
151
  }
156
- const actor = useActorRef(providedLogic, interpreterOptions, observerOrListener);
152
+ const actor = useActorRef(providedLogic, providedOptions);
157
153
  return /*#__PURE__*/React__namespace.createElement(OriginalProvider, {
158
154
  value: actor,
159
155
  children
package/dist/xstate-react.development.cjs.mjs ADDED
@@ -0,0 +1,8 @@
1
+ export {
2
+ createActorContext,
3
+ shallowEqual,
4
+ useActor,
5
+ useActorRef,
6
+ useMachine,
7
+ useSelector
8
+ } from "./xstate-react.development.cjs.js";
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,38 +20,32 @@ 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.logic.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
49
  function useActor(logic, options = {}) {
55
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.`);
@@ -65,7 +60,7 @@ function useActor(logic, 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,18 +111,19 @@ function shallowEqual(objA, objB) {
116
111
  return true;
117
112
  }
118
113
 
119
- function createActorContext(actorLogic, 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
119
  logic: providedLogic = actorLogic,
125
- machine
120
+ machine,
121
+ options: providedOptions = interpreterOptions
126
122
  }) {
127
123
  if (machine) {
128
124
  throw new Error(`The "machine" prop has been deprecated. Please use "logic" instead.`);
129
125
  }
130
- const actor = useActorRef(providedLogic, interpreterOptions, observerOrListener);
126
+ const actor = useActorRef(providedLogic, providedOptions);
131
127
  return /*#__PURE__*/React.createElement(OriginalProvider, {
132
128
  value: actor,
133
129
  children
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,38 +14,32 @@ 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.logic.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
43
  function useActor(logic, options = {}) {
49
44
  const actorRef = useIdleInterpreter(logic, options);
50
45
  const getSnapshot = useCallback(() => {
@@ -56,7 +51,7 @@ function useActor(logic, 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,18 +102,19 @@ function shallowEqual(objA, objB) {
107
102
  return true;
108
103
  }
109
104
 
110
- function createActorContext(actorLogic, 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
110
  logic: providedLogic = actorLogic,
116
- machine
111
+ machine,
112
+ options: providedOptions = interpreterOptions
117
113
  }) {
118
114
  if (machine) {
119
115
  throw new Error(`The "machine" prop has been deprecated. Please use "logic" instead.`);
120
116
  }
121
- const actor = useActorRef(providedLogic, interpreterOptions, observerOrListener);
117
+ const actor = useActorRef(providedLogic, providedOptions);
122
118
  return /*#__PURE__*/React.createElement(OriginalProvider, {
123
119
  value: actor,
124
120
  children
package/fsm/dist/xstate-react-fsm.development.cjs.mjs ADDED
@@ -0,0 +1,4 @@
1
+ export {
2
+ useMachine,
3
+ useService
4
+ } from "./xstate-react-fsm.development.cjs.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xstate/react",
3
- "version": "4.0.0-beta.6",
3
+ "version": "4.0.0-beta.8",
4
4
  "description": "XState tools for React",
5
5
  "keywords": [
6
6
  "state",
@@ -69,9 +69,9 @@
69
69
  "url": "https://github.com/statelyai/xstate/issues"
70
70
  },
71
71
  "peerDependencies": {
72
- "@xstate/fsm": "^3.0.0-beta.2",
72
+ "@xstate/fsm": "^3.0.0-beta.3",
73
73
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
74
- "xstate": "^5.0.0-beta.14"
74
+ "xstate": "^5.0.0-beta.18"
75
75
  },
76
76
  "peerDependenciesMeta": {
77
77
  "@xstate/fsm": {
@@ -91,12 +91,12 @@
91
91
  "@types/react": "^17.0.43",
92
92
  "@types/react-dom": "^17.0.14",
93
93
  "@types/use-sync-external-store": "^0.0.3",
94
- "@xstate/fsm": "3.0.0-beta.2",
94
+ "@xstate/fsm": "3.0.0-beta.3",
95
95
  "jsdom": "^14.0.0",
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.14"
99
+ "xstate": "5.0.0-beta.18"
100
100
  },
101
101
  "preconstruct": {
102
102
  "entrypoints": [