@xstate/react 4.0.0-alpha.0 → 4.0.0-alpha.1

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,3 +1,3 @@
1
- import { MachineImplementationsFrom, ServiceFrom, StateFrom, StateMachine } from '@xstate/fsm';
2
- export declare function useMachine<TMachine extends StateMachine.AnyMachine>(stateMachine: TMachine, options?: MachineImplementationsFrom<TMachine>): [StateFrom<TMachine>, ServiceFrom<TMachine>['send'], ServiceFrom<TMachine>];
3
- export declare function useService<TService extends StateMachine.AnyService>(service: TService): [StateFrom<TService>, TService['send'], TService];
1
+ import { MachineImplementationsFrom, ServiceFrom, StateFrom, StateMachine } from '@xstate/fsm';
2
+ export declare function useMachine<TMachine extends StateMachine.AnyMachine>(stateMachine: TMachine, options?: MachineImplementationsFrom<TMachine>): [StateFrom<TMachine>, ServiceFrom<TMachine>['send'], ServiceFrom<TMachine>];
3
+ export declare function useService<TService extends StateMachine.AnyService>(service: TService): [StateFrom<TService>, TService['send'], TService];
@@ -1,5 +1,6 @@
1
- export { useMachine } from './useMachine';
2
- export { useActor } from './useActor';
3
- export { useInterpret } from './useInterpret';
4
- export { useSelector } from './useSelector';
5
- export { useSpawn } from './useSpawn';
1
+ export { useMachine } from './useMachine';
2
+ export { useActor } from './useActor';
3
+ export { useInterpret } from './useInterpret';
4
+ export { useSelector } from './useSelector';
5
+ export { useSpawn } from './useSpawn';
6
+ export { shallowEqual } from './shallowEqual';
@@ -0,0 +1 @@
1
+ export declare function shallowEqual(objA: any, objB: any): boolean;
@@ -1,15 +1,15 @@
1
- import { EventObject, MachineContext, StateConfig } from 'xstate';
2
- export declare type MaybeLazy<T> = T | (() => T);
3
- export declare type NoInfer<T> = [T][T extends any ? 0 : any];
4
- export declare type Prop<T, K> = K extends keyof T ? T[K] : never;
5
- export interface UseMachineOptions<TContext extends MachineContext, TEvent extends EventObject> {
6
- /**
7
- * If provided, will be merged with machine's `context`.
8
- */
9
- context?: Partial<TContext>;
10
- /**
11
- * The state to rehydrate the machine to. The machine will
12
- * start at this state instead of its `initialState`.
13
- */
14
- state?: StateConfig<TContext, TEvent>;
15
- }
1
+ import { EventObject, MachineContext, StateConfig } from 'xstate';
2
+ export declare type MaybeLazy<T> = T | (() => T);
3
+ export declare type NoInfer<T> = [T][T extends any ? 0 : any];
4
+ export declare type Prop<T, K> = K extends keyof T ? T[K] : never;
5
+ export interface UseMachineOptions<TContext extends MachineContext, TEvent extends EventObject> {
6
+ /**
7
+ * If provided, will be merged with machine's `context`.
8
+ */
9
+ context?: Partial<TContext>;
10
+ /**
11
+ * The state to rehydrate the machine to. The machine will
12
+ * start at this state instead of its `initialState`.
13
+ */
14
+ state?: StateConfig<TContext, TEvent>;
15
+ }
@@ -1,3 +1,3 @@
1
- import { ActorRef, EventObject, SnapshotFrom } from 'xstate';
2
- export declare function useActor<TActor extends ActorRef<any, any>>(actorRef: TActor): [SnapshotFrom<TActor>, TActor['send']];
3
- export declare function useActor<TEvent extends EventObject, TSnapshot>(actorRef: ActorRef<TEvent, TSnapshot>): [TSnapshot, (event: TEvent) => void];
1
+ import { ActorRef, EventObject, SnapshotFrom } from 'xstate';
2
+ export declare function useActor<TActor extends ActorRef<any, any>>(actorRef: TActor): [SnapshotFrom<TActor>, TActor['send']];
3
+ export declare function useActor<TEvent extends EventObject, TSnapshot>(actorRef: ActorRef<TEvent, TSnapshot>): [TSnapshot, (event: TEvent) => void];
@@ -1 +1 @@
1
- export default function useConstant<T>(fn: () => T): T;
1
+ export default function useConstant<T>(fn: () => T): T;
@@ -1,13 +1,13 @@
1
- import { AnyInterpreter, AnyStateMachine, AreAllImplementationsAssumedToBeProvided, InternalMachineImplementations, InterpreterFrom, InterpreterOptions, MachineImplementations, Observer, StateFrom } from 'xstate';
2
- import { MaybeLazy } from './types';
3
- import { UseMachineOptions } from './useMachine';
4
- export declare function useIdleInterpreter(getMachine: MaybeLazy<AnyStateMachine>, options: Partial<InterpreterOptions> & Partial<UseMachineOptions<any, never>> & Partial<MachineImplementations<any, never>>): AnyInterpreter;
5
- declare type RestParams<TMachine extends AnyStateMachine> = AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends false ? [
6
- options: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta'], true>,
7
- observerOrListener?: Observer<StateFrom<TMachine>> | ((value: StateFrom<TMachine>) => void)
8
- ] : [
9
- options?: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta']>,
10
- observerOrListener?: Observer<StateFrom<TMachine>> | ((value: StateFrom<TMachine>) => void)
11
- ];
12
- export declare function useInterpret<TMachine extends AnyStateMachine>(getMachine: MaybeLazy<TMachine>, ...[options, observerOrListener]: RestParams<TMachine>): InterpreterFrom<TMachine>;
13
- export {};
1
+ import { AnyInterpreter, AnyStateMachine, AreAllImplementationsAssumedToBeProvided, InternalMachineImplementations, InterpreterFrom, InterpreterOptions, MachineImplementations, Observer, StateFrom } from 'xstate';
2
+ import { MaybeLazy } from './types';
3
+ import { UseMachineOptions } from './useMachine';
4
+ export declare function useIdleInterpreter(getMachine: MaybeLazy<AnyStateMachine>, options: Partial<InterpreterOptions> & Partial<UseMachineOptions<any, never>> & Partial<MachineImplementations<any, never>>): AnyInterpreter;
5
+ declare type RestParams<TMachine extends AnyStateMachine> = AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends false ? [
6
+ options: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta'], true>,
7
+ observerOrListener?: Observer<StateFrom<TMachine>> | ((value: StateFrom<TMachine>) => void)
8
+ ] : [
9
+ options?: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta']>,
10
+ observerOrListener?: Observer<StateFrom<TMachine>> | ((value: StateFrom<TMachine>) => void)
11
+ ];
12
+ export declare function useInterpret<TMachine extends AnyStateMachine>(getMachine: MaybeLazy<TMachine>, ...[options, observerOrListener]: RestParams<TMachine>): InterpreterFrom<TMachine>;
13
+ export {};
@@ -1,21 +1,21 @@
1
- import { AnyStateMachine, AreAllImplementationsAssumedToBeProvided, EventObject, InternalMachineImplementations, InterpreterFrom, InterpreterOptions, MachineContext, StateConfig, StateFrom } from 'xstate';
2
- import { MaybeLazy, Prop } from './types';
3
- export interface UseMachineOptions<TContext extends MachineContext, TEvent extends EventObject> {
4
- /**
5
- * If provided, will be merged with machine's `context`.
6
- */
7
- context?: Partial<TContext>;
8
- /**
9
- * The state to rehydrate the machine to. The machine will
10
- * start at this state instead of its `initialState`.
11
- */
12
- state?: StateConfig<TContext, TEvent>;
13
- }
14
- declare type RestParams<TMachine extends AnyStateMachine> = AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends false ? [
15
- options: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta'], true>
16
- ] : [
17
- options?: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta']>
18
- ];
19
- declare type UseMachineReturn<TMachine extends AnyStateMachine, TInterpreter = InterpreterFrom<TMachine>> = [StateFrom<TMachine>, Prop<TInterpreter, 'send'>, TInterpreter];
20
- export declare function useMachine<TMachine extends AnyStateMachine>(getMachine: MaybeLazy<TMachine>, ...[options]: RestParams<TMachine>): UseMachineReturn<TMachine>;
21
- export {};
1
+ import { AnyStateMachine, AreAllImplementationsAssumedToBeProvided, EventObject, InternalMachineImplementations, InterpreterFrom, InterpreterOptions, MachineContext, StateConfig, StateFrom } from 'xstate';
2
+ import { MaybeLazy, Prop } from './types';
3
+ export interface UseMachineOptions<TContext extends MachineContext, TEvent extends EventObject> {
4
+ /**
5
+ * If provided, will be merged with machine's `context`.
6
+ */
7
+ context?: Partial<TContext>;
8
+ /**
9
+ * The state to rehydrate the machine to. The machine will
10
+ * start at this state instead of its `initialState`.
11
+ */
12
+ state?: StateConfig<TContext, TEvent>;
13
+ }
14
+ declare type RestParams<TMachine extends AnyStateMachine> = AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends false ? [
15
+ options: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta'], true>
16
+ ] : [
17
+ options?: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta']>
18
+ ];
19
+ declare type UseMachineReturn<TMachine extends AnyStateMachine, TInterpreter = InterpreterFrom<TMachine>> = [StateFrom<TMachine>, Prop<TInterpreter, 'send'>, TInterpreter];
20
+ export declare function useMachine<TMachine extends AnyStateMachine>(getMachine: MaybeLazy<TMachine>, ...[options]: RestParams<TMachine>): UseMachineReturn<TMachine>;
21
+ export {};
@@ -1,2 +1,2 @@
1
- import { ActorRef, SnapshotFrom } from 'xstate';
2
- export declare function useSelector<TActor extends ActorRef<any, any>, T>(actor: TActor, selector: (emitted: SnapshotFrom<TActor>) => T, compare?: (a: T, b: T) => boolean): T;
1
+ import { ActorRef, SnapshotFrom } from 'xstate';
2
+ export declare function useSelector<TActor extends ActorRef<any, any>, T>(actor: TActor, selector: (emitted: SnapshotFrom<TActor>) => T, compare?: (a: T, b: T) => boolean): T;
@@ -1,9 +1,9 @@
1
- import { ActorRef, Behavior, EventObject } from 'xstate';
2
- /**
3
- * React hook that spawns an `ActorRef` with the specified `behavior`.
4
- * The returned `ActorRef` can be used with the `useActor(actorRef)` hook.
5
- *
6
- * @param behavior The actor behavior to spawn
7
- * @returns An ActorRef with the specified `behavior`
8
- */
9
- export declare function useSpawn<TState, TEvent extends EventObject>(behavior: Behavior<TEvent, TState>): ActorRef<TEvent, TState>;
1
+ import { ActorRef, Behavior, EventObject } from 'xstate';
2
+ /**
3
+ * React hook that spawns an `ActorRef` with the specified `behavior`.
4
+ * The returned `ActorRef` can be used with the `useActor(actorRef)` hook.
5
+ *
6
+ * @param behavior The actor behavior to spawn
7
+ * @returns An ActorRef with the specified `behavior`
8
+ */
9
+ export declare function useSpawn<TState, TEvent extends EventObject>(behavior: Behavior<TEvent, TState>): ActorRef<TEvent, TState>;
@@ -2,11 +2,11 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var useConstant = require('./useConstant-644f0e11.cjs.dev.js');
5
6
  var React = require('react');
7
+ var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
6
8
  var withSelector = require('use-sync-external-store/shim/with-selector');
7
9
  var xstate = require('xstate');
8
- var useConstant = require('./useConstant-644f0e11.cjs.dev.js');
9
- var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
10
10
  var shim = require('use-sync-external-store/shim');
11
11
 
12
12
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -86,10 +86,10 @@ function useIdleInterpreter(getMachine, options) {
86
86
  // in one place -- this hook's caller.
87
87
 
88
88
  useIsomorphicLayoutEffect__default['default'](function () {
89
- Object.assign(service.machine.options.actions, actions);
90
- Object.assign(service.machine.options.guards, guards);
91
- Object.assign(service.machine.options.actors, actors);
92
- Object.assign(service.machine.options.delays, delays);
89
+ Object.assign(service.behavior.options.actions, actions);
90
+ Object.assign(service.behavior.options.guards, guards);
91
+ Object.assign(service.behavior.options.actors, actors);
92
+ Object.assign(service.behavior.options.delays, delays);
93
93
  }, [actions, guards, actors, delays]);
94
94
  return service;
95
95
  }
@@ -114,7 +114,7 @@ function useInterpret(getMachine) {
114
114
  }, [observerOrListener]);
115
115
  React.useEffect(function () {
116
116
  var rehydratedState = options.state;
117
- service.start(rehydratedState ? xstate.State.create(rehydratedState) : undefined);
117
+ service.start(rehydratedState ? service.behavior.createState(rehydratedState) : undefined);
118
118
  return function () {
119
119
  service.stop();
120
120
  service.status = xstate.InterpreterStatus.NotStarted;
@@ -151,7 +151,7 @@ function useMachine(getMachine) {
151
151
  return cached;
152
152
  }
153
153
 
154
- var created = xstate.State.create(options.state);
154
+ var created = service.behavior.createState(options.state);
155
155
  cachedRehydratedStates.set(options.state, created);
156
156
  return created;
157
157
  }
@@ -167,7 +167,7 @@ function useMachine(getMachine) {
167
167
  var storeSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
168
168
  React.useEffect(function () {
169
169
  var rehydratedState = options.state;
170
- service.start(rehydratedState ? xstate.State.create(rehydratedState) : undefined);
170
+ service.start(rehydratedState ? service.behavior.createState(rehydratedState) : undefined);
171
171
  return function () {
172
172
  service.stop();
173
173
  service.status = xstate.InterpreterStatus.NotStarted;
@@ -223,17 +223,67 @@ function useSelector(actor, selector) {
223
223
  function useSpawn(behavior) {
224
224
  var actorRef = useConstant.useConstant(function () {
225
225
  // TODO: figure out what to do about the name argument
226
- return new xstate.ObservableActorRef(behavior, '');
226
+ return xstate.interpret(behavior);
227
227
  });
228
228
  React.useEffect(function () {
229
- actorRef.start();
229
+ var _actorRef$start;
230
+
231
+ (_actorRef$start = actorRef.start) === null || _actorRef$start === void 0 ? void 0 : _actorRef$start.call(actorRef);
230
232
  return function () {
231
- actorRef.stop();
233
+ var _stop, _ref;
234
+
235
+ (_stop = (_ref = actorRef).stop) === null || _stop === void 0 ? void 0 : _stop.call(_ref);
232
236
  };
233
237
  }, []);
234
238
  return actorRef;
235
239
  }
236
240
 
241
+ function _typeof(obj) {
242
+ "@babel/helpers - typeof";
243
+
244
+ if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
245
+ _typeof = function (obj) {
246
+ return typeof obj;
247
+ };
248
+ } else {
249
+ _typeof = function (obj) {
250
+ return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
251
+ };
252
+ }
253
+
254
+ return _typeof(obj);
255
+ }
256
+
257
+ // From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
258
+ function is(x, y) {
259
+ if (x === y) {
260
+ return x !== 0 || y !== 0 || 1 / x === 1 / y;
261
+ } else {
262
+ return x !== x && y !== y;
263
+ }
264
+ }
265
+
266
+ function shallowEqual(objA, objB) {
267
+ if (is(objA, objB)) return true;
268
+
269
+ if (_typeof(objA) !== 'object' || objA === null || _typeof(objB) !== 'object' || objB === null) {
270
+ return false;
271
+ }
272
+
273
+ var keysA = Object.keys(objA);
274
+ var keysB = Object.keys(objB);
275
+ if (keysA.length !== keysB.length) return false;
276
+
277
+ for (var i = 0; i < keysA.length; i++) {
278
+ if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
279
+ return false;
280
+ }
281
+ }
282
+
283
+ return true;
284
+ }
285
+
286
+ exports.shallowEqual = shallowEqual;
237
287
  exports.useActor = useActor;
238
288
  exports.useInterpret = useInterpret;
239
289
  exports.useMachine = useMachine;
@@ -3,10 +3,10 @@
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');
7
- var xstate = require('xstate');
8
6
  var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
7
+ var withSelector = require('use-sync-external-store/shim/with-selector');
9
8
  var useConstant = require('./useConstant-eeb49d3f.cjs.prod.js');
9
+ var xstate = require('xstate');
10
10
  var shim = require('use-sync-external-store/shim');
11
11
 
12
12
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -76,10 +76,10 @@ function useIdleInterpreter(getMachine, options) {
76
76
  // in one place -- this hook's caller.
77
77
 
78
78
  useIsomorphicLayoutEffect__default['default'](function () {
79
- Object.assign(service.machine.options.actions, actions);
80
- Object.assign(service.machine.options.guards, guards);
81
- Object.assign(service.machine.options.actors, actors);
82
- Object.assign(service.machine.options.delays, delays);
79
+ Object.assign(service.behavior.options.actions, actions);
80
+ Object.assign(service.behavior.options.guards, guards);
81
+ Object.assign(service.behavior.options.actors, actors);
82
+ Object.assign(service.behavior.options.delays, delays);
83
83
  }, [actions, guards, actors, delays]);
84
84
  return service;
85
85
  }
@@ -104,7 +104,7 @@ function useInterpret(getMachine) {
104
104
  }, [observerOrListener]);
105
105
  React.useEffect(function () {
106
106
  var rehydratedState = options.state;
107
- service.start(rehydratedState ? xstate.State.create(rehydratedState) : undefined);
107
+ service.start(rehydratedState ? service.behavior.createState(rehydratedState) : undefined);
108
108
  return function () {
109
109
  service.stop();
110
110
  service.status = xstate.InterpreterStatus.NotStarted;
@@ -141,7 +141,7 @@ function useMachine(getMachine) {
141
141
  return cached;
142
142
  }
143
143
 
144
- var created = xstate.State.create(options.state);
144
+ var created = service.behavior.createState(options.state);
145
145
  cachedRehydratedStates.set(options.state, created);
146
146
  return created;
147
147
  }
@@ -157,7 +157,7 @@ function useMachine(getMachine) {
157
157
  var storeSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
158
158
  React.useEffect(function () {
159
159
  var rehydratedState = options.state;
160
- service.start(rehydratedState ? xstate.State.create(rehydratedState) : undefined);
160
+ service.start(rehydratedState ? service.behavior.createState(rehydratedState) : undefined);
161
161
  return function () {
162
162
  service.stop();
163
163
  service.status = xstate.InterpreterStatus.NotStarted;
@@ -213,17 +213,67 @@ function useSelector(actor, selector) {
213
213
  function useSpawn(behavior) {
214
214
  var actorRef = useConstant.useConstant(function () {
215
215
  // TODO: figure out what to do about the name argument
216
- return new xstate.ObservableActorRef(behavior, '');
216
+ return xstate.interpret(behavior);
217
217
  });
218
218
  React.useEffect(function () {
219
- actorRef.start();
219
+ var _actorRef$start;
220
+
221
+ (_actorRef$start = actorRef.start) === null || _actorRef$start === void 0 ? void 0 : _actorRef$start.call(actorRef);
220
222
  return function () {
221
- actorRef.stop();
223
+ var _stop, _ref;
224
+
225
+ (_stop = (_ref = actorRef).stop) === null || _stop === void 0 ? void 0 : _stop.call(_ref);
222
226
  };
223
227
  }, []);
224
228
  return actorRef;
225
229
  }
226
230
 
231
+ function _typeof(obj) {
232
+ "@babel/helpers - typeof";
233
+
234
+ if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
235
+ _typeof = function (obj) {
236
+ return typeof obj;
237
+ };
238
+ } else {
239
+ _typeof = function (obj) {
240
+ return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
241
+ };
242
+ }
243
+
244
+ return _typeof(obj);
245
+ }
246
+
247
+ // From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
248
+ function is(x, y) {
249
+ if (x === y) {
250
+ return x !== 0 || y !== 0 || 1 / x === 1 / y;
251
+ } else {
252
+ return x !== x && y !== y;
253
+ }
254
+ }
255
+
256
+ function shallowEqual(objA, objB) {
257
+ if (is(objA, objB)) return true;
258
+
259
+ if (_typeof(objA) !== 'object' || objA === null || _typeof(objB) !== 'object' || objB === null) {
260
+ return false;
261
+ }
262
+
263
+ var keysA = Object.keys(objA);
264
+ var keysB = Object.keys(objB);
265
+ if (keysA.length !== keysB.length) return false;
266
+
267
+ for (var i = 0; i < keysA.length; i++) {
268
+ if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
269
+ return false;
270
+ }
271
+ }
272
+
273
+ return true;
274
+ }
275
+
276
+ exports.shallowEqual = shallowEqual;
227
277
  exports.useActor = useActor;
228
278
  exports.useInterpret = useInterpret;
229
279
  exports.useMachine = useMachine;
@@ -1,8 +1,8 @@
1
- import { useEffect, useState, useCallback } from 'react';
2
- import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
3
- import { toObserver, State, InterpreterStatus, interpret, ObservableActorRef } from 'xstate';
4
1
  import { u as useConstant, _ as _slicedToArray } from './useConstant-94bfdbb5.esm.js';
2
+ import { useEffect, useState, useCallback } from 'react';
5
3
  import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
4
+ import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
5
+ import { toObserver, InterpreterStatus, interpret } from 'xstate';
6
6
  import { useSyncExternalStore } from 'use-sync-external-store/shim';
7
7
 
8
8
  function _objectWithoutPropertiesLoose(source, excluded) {
@@ -78,10 +78,10 @@ function useIdleInterpreter(getMachine, options) {
78
78
  // in one place -- this hook's caller.
79
79
 
80
80
  useIsomorphicLayoutEffect(function () {
81
- Object.assign(service.machine.options.actions, actions);
82
- Object.assign(service.machine.options.guards, guards);
83
- Object.assign(service.machine.options.actors, actors);
84
- Object.assign(service.machine.options.delays, delays);
81
+ Object.assign(service.behavior.options.actions, actions);
82
+ Object.assign(service.behavior.options.guards, guards);
83
+ Object.assign(service.behavior.options.actors, actors);
84
+ Object.assign(service.behavior.options.delays, delays);
85
85
  }, [actions, guards, actors, delays]);
86
86
  return service;
87
87
  }
@@ -106,7 +106,7 @@ function useInterpret(getMachine) {
106
106
  }, [observerOrListener]);
107
107
  useEffect(function () {
108
108
  var rehydratedState = options.state;
109
- service.start(rehydratedState ? State.create(rehydratedState) : undefined);
109
+ service.start(rehydratedState ? service.behavior.createState(rehydratedState) : undefined);
110
110
  return function () {
111
111
  service.stop();
112
112
  service.status = InterpreterStatus.NotStarted;
@@ -143,7 +143,7 @@ function useMachine(getMachine) {
143
143
  return cached;
144
144
  }
145
145
 
146
- var created = State.create(options.state);
146
+ var created = service.behavior.createState(options.state);
147
147
  cachedRehydratedStates.set(options.state, created);
148
148
  return created;
149
149
  }
@@ -159,7 +159,7 @@ function useMachine(getMachine) {
159
159
  var storeSnapshot = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
160
160
  useEffect(function () {
161
161
  var rehydratedState = options.state;
162
- service.start(rehydratedState ? State.create(rehydratedState) : undefined);
162
+ service.start(rehydratedState ? service.behavior.createState(rehydratedState) : undefined);
163
163
  return function () {
164
164
  service.stop();
165
165
  service.status = InterpreterStatus.NotStarted;
@@ -215,15 +215,64 @@ function useSelector(actor, selector) {
215
215
  function useSpawn(behavior) {
216
216
  var actorRef = useConstant(function () {
217
217
  // TODO: figure out what to do about the name argument
218
- return new ObservableActorRef(behavior, '');
218
+ return interpret(behavior);
219
219
  });
220
220
  useEffect(function () {
221
- actorRef.start();
221
+ var _actorRef$start;
222
+
223
+ (_actorRef$start = actorRef.start) === null || _actorRef$start === void 0 ? void 0 : _actorRef$start.call(actorRef);
222
224
  return function () {
223
- actorRef.stop();
225
+ var _stop, _ref;
226
+
227
+ (_stop = (_ref = actorRef).stop) === null || _stop === void 0 ? void 0 : _stop.call(_ref);
224
228
  };
225
229
  }, []);
226
230
  return actorRef;
227
231
  }
228
232
 
229
- export { useActor, useInterpret, useMachine, useSelector, useSpawn };
233
+ function _typeof(obj) {
234
+ "@babel/helpers - typeof";
235
+
236
+ if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
237
+ _typeof = function (obj) {
238
+ return typeof obj;
239
+ };
240
+ } else {
241
+ _typeof = function (obj) {
242
+ return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
243
+ };
244
+ }
245
+
246
+ return _typeof(obj);
247
+ }
248
+
249
+ // From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
250
+ function is(x, y) {
251
+ if (x === y) {
252
+ return x !== 0 || y !== 0 || 1 / x === 1 / y;
253
+ } else {
254
+ return x !== x && y !== y;
255
+ }
256
+ }
257
+
258
+ function shallowEqual(objA, objB) {
259
+ if (is(objA, objB)) return true;
260
+
261
+ if (_typeof(objA) !== 'object' || objA === null || _typeof(objB) !== 'object' || objB === null) {
262
+ return false;
263
+ }
264
+
265
+ var keysA = Object.keys(objA);
266
+ var keysB = Object.keys(objB);
267
+ if (keysA.length !== keysB.length) return false;
268
+
269
+ for (var i = 0; i < keysA.length; i++) {
270
+ if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
271
+ return false;
272
+ }
273
+ }
274
+
275
+ return true;
276
+ }
277
+
278
+ export { shallowEqual, useActor, useInterpret, useMachine, useSelector, useSpawn };
@@ -2,11 +2,11 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var React = require('react');
6
- var withSelector = require('use-sync-external-store/shim/with-selector');
7
5
  var useConstant = require('../../dist/useConstant-644f0e11.cjs.dev.js');
8
- var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
9
6
  var fsm = require('@xstate/fsm');
7
+ var React = require('react');
8
+ var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
9
+ var withSelector = require('use-sync-external-store/shim/with-selector');
10
10
 
11
11
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
12
12
 
@@ -2,11 +2,11 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var fsm = require('@xstate/fsm');
5
6
  var React = require('react');
6
- var withSelector = require('use-sync-external-store/shim/with-selector');
7
7
  var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
8
+ var withSelector = require('use-sync-external-store/shim/with-selector');
8
9
  var useConstant = require('../../dist/useConstant-eeb49d3f.cjs.prod.js');
9
- var fsm = require('@xstate/fsm');
10
10
 
11
11
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
12
12
 
@@ -1,8 +1,8 @@
1
- import { useRef, useState, useEffect, useCallback } from 'react';
2
- import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
3
1
  import { _ as _slicedToArray, u as useConstant } from '../../dist/useConstant-94bfdbb5.esm.js';
4
- import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
5
2
  import { interpret, createMachine, InterpreterStatus } from '@xstate/fsm';
3
+ import { useRef, useState, useEffect, useCallback } from 'react';
4
+ import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
5
+ import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
6
6
 
7
7
  function identity(a) {
8
8
  return a;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xstate/react",
3
- "version": "4.0.0-alpha.0",
3
+ "version": "4.0.0-alpha.1",
4
4
  "description": "XState tools for React",
5
5
  "keywords": [
6
6
  "state",
@@ -17,6 +17,17 @@
17
17
  "license": "MIT",
18
18
  "main": "dist/xstate-react.cjs.js",
19
19
  "module": "dist/xstate-react.esm.js",
20
+ "exports": {
21
+ "./fsm": {
22
+ "module": "./fsm/dist/xstate-react-fsm.esm.js",
23
+ "default": "./fsm/dist/xstate-react-fsm.cjs.js"
24
+ },
25
+ ".": {
26
+ "module": "./dist/xstate-react.esm.js",
27
+ "default": "./dist/xstate-react.cjs.js"
28
+ },
29
+ "./package.json": "./package.json"
30
+ },
20
31
  "types": "dist/xstate-react.cjs.d.ts",
21
32
  "sideEffects": false,
22
33
  "files": [
@@ -32,9 +43,9 @@
32
43
  "url": "https://github.com/statelyai/xstate/issues"
33
44
  },
34
45
  "peerDependencies": {
35
- "@xstate/fsm": "^2.0.0",
46
+ "@xstate/fsm": "^3.0.0-alpha.0",
36
47
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
37
- "xstate": "^5.0.0-alpha.0"
48
+ "xstate": "^5.0.0-alpha.1"
38
49
  },
39
50
  "peerDependenciesMeta": {
40
51
  "@xstate/fsm": {
@@ -54,12 +65,12 @@
54
65
  "@types/react": "^17.0.43",
55
66
  "@types/react-dom": "^17.0.14",
56
67
  "@types/use-sync-external-store": "^0.0.3",
57
- "@xstate/fsm": "2.0.0",
68
+ "@xstate/fsm": "3.0.0-alpha.0",
58
69
  "jsdom": "^14.0.0",
59
70
  "jsdom-global": "^3.0.2",
60
71
  "react": "^18.0.0",
61
72
  "react-dom": "^18.0.0",
62
- "xstate": "5.0.0-alpha.0"
73
+ "xstate": "5.0.0-alpha.1"
63
74
  },
64
75
  "preconstruct": {
65
76
  "entrypoints": [
package/CHANGELOG.md DELETED
@@ -1,481 +0,0 @@
1
- # Changelog
2
-
3
- ## 4.0.0-alpha.0
4
-
5
- ### Major Changes
6
-
7
- - [#3148](https://github.com/statelyai/xstate/pull/3148) [`7a68cbb61`](https://github.com/statelyai/xstate/commit/7a68cbb615afb6556c83868535dae67af366a117) Thanks [@davidkpiano](https://github.com/davidkpiano)! - Removed `getSnapshot` parameter from hooks. It is expected that the received `actorRef` has to have a `getSnapshot` method on it that can be used internally.
8
-
9
- ### Patch Changes
10
-
11
- - Updated dependencies [[`7f3b84816`](https://github.com/statelyai/xstate/commit/7f3b84816564d951b6b29afdd7075256f1f59501), [`969a2f4fc`](https://github.com/statelyai/xstate/commit/969a2f4fc0bc9147b9a52da25306e5c13b97f159), [`c0a6dcafa`](https://github.com/statelyai/xstate/commit/c0a6dcafa1a11a5ff1660b57e0728675f155c292), [`7a68cbb61`](https://github.com/statelyai/xstate/commit/7a68cbb615afb6556c83868535dae67af366a117), [`172d6a7e1`](https://github.com/statelyai/xstate/commit/172d6a7e1e4ab0fa73485f76c52675be8a1f3362), [`31bc73e05`](https://github.com/statelyai/xstate/commit/31bc73e05692f29301f5bb5cb4b87b90773e0ef2), [`e09efc720`](https://github.com/statelyai/xstate/commit/e09efc720f05246b692d0fdf17cf5d8ac0344ee6), [`145539c4c`](https://github.com/statelyai/xstate/commit/145539c4cfe1bde5aac247792622428e44342dd6), [`3de36bb24`](https://github.com/statelyai/xstate/commit/3de36bb24e8f59f54d571bf587407b1b6a9856e0), [`9e10660ec`](https://github.com/statelyai/xstate/commit/9e10660ec2f1e89cbb09a1094edb4f6b8a273a99), [`8fcbddd51`](https://github.com/statelyai/xstate/commit/8fcbddd51d66716ab1d326d934566a7664a4e175), [`515cdc9c1`](https://github.com/statelyai/xstate/commit/515cdc9c148a3a1b558120c309080e9a21e876bc), [`6043a1c28`](https://github.com/statelyai/xstate/commit/6043a1c28d21ff8cbabc420a6817a02a1a54fcc8), [`6a6b2b869`](https://github.com/statelyai/xstate/commit/6a6b2b8691626112d1d9dbf23d0a0e80ff7130a8), [`0b49437b1`](https://github.com/statelyai/xstate/commit/0b49437b1be3e6d9bc61304711b83300cba88dc4), [`0e24ea6d6`](https://github.com/statelyai/xstate/commit/0e24ea6d62a5c1a8b7e365f2252dc930d94997c4), [`04e89f90f`](https://github.com/statelyai/xstate/commit/04e89f90f97fe25a45b5908c45f25a513f0fd70f), [`0096d9f7a`](https://github.com/statelyai/xstate/commit/0096d9f7afda7546fc7b1d5fdd1546f55c32bfe4), [`8fcbddd51`](https://github.com/statelyai/xstate/commit/8fcbddd51d66716ab1d326d934566a7664a4e175), [`b200e0e0b`](https://github.com/statelyai/xstate/commit/b200e0e0b7123797086080b75abdfcf2fce45253), [`7a68cbb61`](https://github.com/statelyai/xstate/commit/7a68cbb615afb6556c83868535dae67af366a117), [`9437c3de9`](https://github.com/statelyai/xstate/commit/9437c3de912c2a38c04798cbb94f267a1e5db3f8), [`0038c7b1e`](https://github.com/statelyai/xstate/commit/0038c7b1e2050fe7262849aab8fdff4a7ce7cf92), [`7a68cbb61`](https://github.com/statelyai/xstate/commit/7a68cbb615afb6556c83868535dae67af366a117), [`b24e47b9e`](https://github.com/statelyai/xstate/commit/b24e47b9e7a59a5b0527d4386cea3af16c84ca7a), [`390eaaa52`](https://github.com/statelyai/xstate/commit/390eaaa523cb0dd243e39c6300e671606c1e45fc), [`7a68cbb61`](https://github.com/statelyai/xstate/commit/7a68cbb615afb6556c83868535dae67af366a117), [`0c6cfee9a`](https://github.com/statelyai/xstate/commit/0c6cfee9a6d603aa1756e3a6d0f76d4da1486caf), [`e09efc720`](https://github.com/statelyai/xstate/commit/e09efc720f05246b692d0fdf17cf5d8ac0344ee6), [`025a2d6a2`](https://github.com/statelyai/xstate/commit/025a2d6a295359a746bee6ffc2953ccc51a6aaad), [`e09efc720`](https://github.com/statelyai/xstate/commit/e09efc720f05246b692d0fdf17cf5d8ac0344ee6), [`c99bb43af`](https://github.com/statelyai/xstate/commit/c99bb43afec01ddee86fc746c346ea1aeeca687d), [`fc5ca7b7f`](https://github.com/statelyai/xstate/commit/fc5ca7b7fcd2d7821ce2409743c50505529104e7), [`c9cda27cb`](https://github.com/statelyai/xstate/commit/c9cda27cbe52b9c706ccb63b709d22d049be31e3), [`5d16a7365`](https://github.com/statelyai/xstate/commit/5d16a73651e97dd0228c5215cb2452a4d9951118), [`8fcbddd51`](https://github.com/statelyai/xstate/commit/8fcbddd51d66716ab1d326d934566a7664a4e175), [`53a594e9a`](https://github.com/statelyai/xstate/commit/53a594e9a1b49ccb1121048a5784676f83950024), [`31a0d890f`](https://github.com/statelyai/xstate/commit/31a0d890f55d8f0b06772c9fd510b18302b76ebb)]:
12
- - xstate@5.0.0-alpha.0
13
-
14
- ## 3.0.0
15
-
16
- ### Major Changes
17
-
18
- - [#2939](https://github.com/statelyai/xstate/pull/2939) [`360e85462`](https://github.com/statelyai/xstate/commit/360e8546298c4a06b6d51d8f12c0563672dd7acf) Thanks [@Andarist](https://github.com/Andarist)! - This package now accepts React 18 as a peer dep and the implementation has been rewritten to use [`use-sync-external-store`](https://www.npmjs.com/package/use-sync-external-store) package. This doesn't break compatibility with older versions of React since we are using the shim to keep compatibility with those older versions.
19
-
20
- * [#2939](https://github.com/statelyai/xstate/pull/2939) [`360e85462`](https://github.com/statelyai/xstate/commit/360e8546298c4a06b6d51d8f12c0563672dd7acf) Thanks [@Andarist](https://github.com/Andarist)! - `asEffect` and `asLayoutEffect` action creators were removed. They were not fitting the React model that well and could lead to issues as their existence suggested that they are easy to use.
21
-
22
- To execute actions at those exact times you can always either just call your stuff directly from those effects or send events to the machine from those effects and execute explicit actions in response to said events.
23
-
24
- - [#2939](https://github.com/statelyai/xstate/pull/2939) [`360e85462`](https://github.com/statelyai/xstate/commit/360e8546298c4a06b6d51d8f12c0563672dd7acf) Thanks [@Andarist](https://github.com/Andarist)! - The signatures of `useMachine` and `useService` integrating with `@xstate/fsm` were changed. They now only accept a single generic each (`TMachine` and `TService` respectively). This has been done to match their signatures with the related hooks that integrate with `xstate` itself.
25
-
26
- ### Patch Changes
27
-
28
- - [#2939](https://github.com/statelyai/xstate/pull/2939) [`360e85462`](https://github.com/statelyai/xstate/commit/360e8546298c4a06b6d51d8f12c0563672dd7acf) Thanks [@Andarist](https://github.com/Andarist)! - In v2 we have changed signatures of `useMachine` and `useInterpret`. Instead of accepting a list of generics they now only support a single generic: `TMachine`. This change, erroneously, was only introduced to types targeting TS@4.x but the types targeting previous TS releases were still using the older signatures. This has now been fixed and users of older TS versions should now be able to leverage typegen with `@xstate/react`.
29
-
30
- * [#2939](https://github.com/statelyai/xstate/pull/2939) [`360e85462`](https://github.com/statelyai/xstate/commit/360e8546298c4a06b6d51d8f12c0563672dd7acf) Thanks [@Andarist](https://github.com/Andarist)! - `useMachine` for `xstate` now correctly rerenders with the initial state when the internal service is being restarted. This might happen during Fast Refresh and now you shouldn't be able to observe this stale state that didn't match the actual state of the service.
31
-
32
- - [#2939](https://github.com/statelyai/xstate/pull/2939) [`360e85462`](https://github.com/statelyai/xstate/commit/360e8546298c4a06b6d51d8f12c0563672dd7acf) Thanks [@Andarist](https://github.com/Andarist)! - `useMachine` for `@xstate/fsm` now starts the service in an effect. This avoids side-effects in render and improves the compatibility with `StrictMode`.
33
-
34
- * [#2939](https://github.com/statelyai/xstate/pull/2939) [`360e85462`](https://github.com/statelyai/xstate/commit/360e8546298c4a06b6d51d8f12c0563672dd7acf) Thanks [@Andarist](https://github.com/Andarist)! - Implementations given to `useMachine` targeting `@xstate/fsm` are now updated in a layout effect. This avoid some stale closure problems for actions that are executed in response to events sent from layout effects.
35
-
36
- * Updated dependencies [[`360e85462`](https://github.com/statelyai/xstate/commit/360e8546298c4a06b6d51d8f12c0563672dd7acf), [`360e85462`](https://github.com/statelyai/xstate/commit/360e8546298c4a06b6d51d8f12c0563672dd7acf)]:
37
- - @xstate/fsm@2.0.0
38
-
39
- ## 2.0.1
40
-
41
- ### Patch Changes
42
-
43
- - [#3089](https://github.com/statelyai/xstate/pull/3089) [`862697e29`](https://github.com/statelyai/xstate/commit/862697e2990934d46050580d7e09c749d09d8426) Thanks [@Andarist](https://github.com/Andarist)! - Fixed compatibility with Skypack by exporting some shared utilities from root entry of XState and consuming them directly in other packages (this avoids accessing those things using deep imports and thus it avoids creating those compatibility problems).
44
-
45
- ## 2.0.0
46
-
47
- ### Major Changes
48
-
49
- - [#2674](https://github.com/statelyai/xstate/pull/2674) [`e5a8b8dff`](https://github.com/statelyai/xstate/commit/e5a8b8dffb88cffbdca26683099ffdf5f1b01c8d) Thanks [@Andarist](https://github.com/Andarist), [@mattpocock](https://github.com/mattpocock)! - To avoid breaking any consumers and to leverage the newly introduced typegen support, the major version of this package had to be bumped. While you can still use it with older versions of TS, the typegen support in this package requires TS version 4.0 or greater.
50
-
51
- When using hooks from `@xstate/react` it's recommended to skip providing explicit generics to them. Note that that generics list has changed since v1 and we now only accept a single generic, `TMachine`.
52
-
53
- * [#2674](https://github.com/statelyai/xstate/pull/2674) [`ab919d300`](https://github.com/statelyai/xstate/commit/ab919d300f6d2b78871d3399ec58a697c4268d9b) Thanks [@Andarist](https://github.com/Andarist)! - Removed already deprecated `useService` from `@xstate/react`. You can replace its usage with `useActor`.
54
-
55
- ### Patch Changes
56
-
57
- - [#2957](https://github.com/statelyai/xstate/pull/2957) [`8550ddda7`](https://github.com/statelyai/xstate/commit/8550ddda73e2ad291e19173d7fa8d13e3336fbb9) Thanks [@davidkpiano](https://github.com/davidkpiano)! - The repository links have been updated from `github.com/davidkpiano` to `github.com/statelyai`.
58
-
59
- ## 1.6.3
60
-
61
- ### Patch Changes
62
-
63
- - [#2767](https://github.com/statelyai/xstate/pull/2767) [`c1503b121`](https://github.com/statelyai/xstate/commit/c1503b1219d995ebf0f45de46036c5a1d7e6442f) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an over-rendering issue in the `useSelector`.
64
-
65
- ## 1.6.2
66
-
67
- ### Patch Changes
68
-
69
- - [#2736](https://github.com/statelyai/xstate/pull/2736) [`2246ae051`](https://github.com/statelyai/xstate/commit/2246ae051663f261b4750d7adba57f008ec28f1d) Thanks [@Andarist](https://github.com/Andarist), [@davidkpiano](https://github.com/statelyai), [@VanTanev](https://github.com/VanTanev)! - The `useSelector(...)` hook now works as expected when the `actor` passed in changes. The hook will properly subscribe to the new `actor` and select the desired value. See [#2702](https://github.com/statelyai/xstate/issues/2702)
70
-
71
- * [#2685](https://github.com/statelyai/xstate/pull/2685) [`469268d39`](https://github.com/statelyai/xstate/commit/469268d39fbc23996599773adfc4ca824b48585f) Thanks [@farskid](https://github.com/farskid), [@Andarist](https://github.com/Andarist)! - Fixed a regression with a development-only warning not being shown when a machine reference is updated during the hook lifecycle. This usually happens when machine options are dependent on external values and they're passed via `withConfig`.
72
-
73
- ```js
74
- const machine = createMachine({
75
- initial: 'foo',
76
- context: { id: 1 },
77
- states: {
78
- foo: {
79
- on: {
80
- CHECK: {
81
- target: 'bar',
82
- cond: 'hasOverflown'
83
- }
84
- }
85
- },
86
- bar: {}
87
- }
88
- });
89
-
90
- const [id, setId] = useState(1);
91
- const [current, send] = useMachine(
92
- machine.withConfig({
93
- guards: {
94
- hasOverflown: () => id > 1 // id is a reference to an outside value
95
- }
96
- })
97
- );
98
-
99
- // later when id updates
100
- setId(2);
101
- // Now the reference passed to `useMachine` (the result of `machine.withConfig`) is updated but the interpreted machine stays the same. So the guard is still the previous one that got passed to the `useMachine` initially, and it closes over the stale `id`.
102
- ```
103
-
104
- ## 1.6.1
105
-
106
- ### Patch Changes
107
-
108
- - [#2587](https://github.com/statelyai/xstate/pull/2587) [`5aaa8445c`](https://github.com/statelyai/xstate/commit/5aaa8445c0041c6e9c47285c18e8b71cb2d805a7) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with implementations provided outside of React being wiped out and unusable.
109
-
110
- ## 1.6.0
111
-
112
- ### Minor Changes
113
-
114
- - [`4b4872ca`](https://github.com/statelyai/xstate/commit/4b4872cafd63f825f3918c6eb6fa84642d45e3e0) [#2241](https://github.com/statelyai/xstate/pull/2241) Thanks [@mattpocock](https://github.com/mattpocock)! - Changed the behaviour of guards, delays and activities when declared as options in `useMachine`/`useInterpret`.
115
-
116
- Previously, guards could not reference external props, because they would not be updated when the props changed. For instance:
117
-
118
- ```tsx
119
- const Modal = props => {
120
- useMachine(modalMachine, {
121
- guards: {
122
- isModalOpen: () => props.isOpen
123
- }
124
- });
125
- };
126
- ```
127
-
128
- When the component is created, `props.isOpen` would be checked and evaluated to the initial value. But if the guard is evaluated at any other time, it will not respond to the props' changed value.
129
-
130
- This is not true of actions/services. This will work as expected:
131
-
132
- ```tsx
133
- const Modal = props => {
134
- useMachine(modalMachine, {
135
- actions: {
136
- consoleLogModalOpen: () => {
137
- console.log(props.isOpen);
138
- }
139
- }
140
- });
141
- };
142
- ```
143
-
144
- This change brings guards and delays into line with actions and services.
145
-
146
- ⚠️ **NOTE:** Whenever possible, use data from within `context` rather than external data in your guards and delays.
147
-
148
- ### Patch Changes
149
-
150
- - [`fe3e859f`](https://github.com/statelyai/xstate/commit/fe3e859f5c53813307bacad915bebc8d1f3a982c) [#2522](https://github.com/statelyai/xstate/pull/2522) Thanks [@farskid](https://github.com/farskid), [@Andarist](https://github.com/Andarist)! - Fixed an issue with actors not being spawned correctly by `useMachine` and `useInterpret` when they were defined a lazily evaluated context, like for example here:
151
-
152
- ```js
153
- createMachine({
154
- // lazy context
155
- context: () => ({
156
- ref: spawn(() => {})
157
- })
158
- });
159
- ```
160
-
161
- ## 1.5.1
162
-
163
- ### Patch Changes
164
-
165
- - [`453acacb`](https://github.com/statelyai/xstate/commit/453acacbec364531a2851f183c3ab446d7db0e84) [#2389](https://github.com/statelyai/xstate/pull/2389) Thanks [@davidkpiano](https://github.com/statelyai)! - An internal issue where the `spawnBehavior` import for the `useSpawn(...)` hook was broken internally has been fixed.
166
-
167
- ## 1.5.0
168
-
169
- ### Minor Changes
170
-
171
- - [`432b60f7`](https://github.com/statelyai/xstate/commit/432b60f7bcbcee9510e0d86311abbfd75b1a674e) [#2280](https://github.com/statelyai/xstate/pull/2280) Thanks [@davidkpiano](https://github.com/statelyai)! - Just like `useInvoke(...)`, other types of actors can now be spawned from _behaviors_ using `useSpawn(...)`:
172
-
173
- ```tsx
174
- import { fromReducer } from 'xstate/lib/behaviors';
175
- import { useActor, useSpawn } from '@xstate/react';
176
-
177
- type CountEvent = { type: 'INC' } | { type: 'DEC' };
178
-
179
- const countBehavior = fromReducer(
180
- (count: number, event: CountEvent): number => {
181
- if (event.type === 'INC') {
182
- return count + 1;
183
- } else if (event.type === 'DEC') {
184
- return count - 1;
185
- }
186
-
187
- return count;
188
- },
189
- 0 // initial state
190
- );
191
-
192
- const countMachine = createMachine({
193
- invoke: {
194
- id: 'count',
195
- src: () => fromReducer(countReducer, 0)
196
- },
197
- on: {
198
- INC: {
199
- actions: forwardTo('count')
200
- },
201
- DEC: {
202
- actions: forwardTo('count')
203
- }
204
- }
205
- });
206
-
207
- const Component = () => {
208
- const countActorRef = useSpawn(countBehavior);
209
- const [count, send] = useActor(countActorRef);
210
-
211
- return (
212
- <div>
213
- Count: {count}
214
- <button onClick={() => send({ type: 'INC' })}>Increment</button>
215
- <button onClick={() => send({ type: 'DEC' })}>Decrement</button>
216
- </div>
217
- );
218
- };
219
- ```
220
-
221
- ## 1.4.0
222
-
223
- ### Minor Changes
224
-
225
- - [`849ec56c`](https://github.com/statelyai/xstate/commit/849ec56c2a9db34e65a30af94e68a7a7a50b4158) [#2286](https://github.com/statelyai/xstate/pull/2286) Thanks [@davidkpiano](https://github.com/statelyai)! - The `useService(...)` hook will be deprecated, since services are also actors. In future versions, the `useActor(...)` hook should be used instead:
226
-
227
- ```diff
228
- -const [state, send] = useService(service);
229
- +const [state, send] = useActor(service);
230
- ```
231
-
232
- ### Patch Changes
233
-
234
- - [`ea3aaffb`](https://github.com/statelyai/xstate/commit/ea3aaffb906b34a42bb2736c7b91d54ffe9ed882) [#2326](https://github.com/statelyai/xstate/pull/2326) Thanks [@davidkpiano](https://github.com/statelyai)! - The `send` type returned in the tuple from `useActor(someService)` was an incorrect `never` type; this has been fixed.
235
-
236
- ## 1.3.4
237
-
238
- ### Patch Changes
239
-
240
- - [`aa3c2991`](https://github.com/statelyai/xstate/commit/aa3c29916b7382fbcf1a3efb183ca1e8eb625480) [#2223](https://github.com/statelyai/xstate/pull/2223) Thanks [@davidkpiano](https://github.com/statelyai)! - Support for actor refs with the `.getSnapshot()` method (added for spawned actors in XState version 4.19) is now supported in the `useActor(...)` hook.
241
-
242
- ## 1.3.3
243
-
244
- ### Patch Changes
245
-
246
- - [`27e7242c`](https://github.com/statelyai/xstate/commit/27e7242c24146de85cf618a658b400a3241fa7d7) [#2112](https://github.com/statelyai/xstate/pull/2112) Thanks [@davidkpiano](https://github.com/statelyai)! - The `executeEffect` function is no longer exported (was meant to be internal and is useless as a public function anyway). This also fixes a circular dependency issue.
247
-
248
- ## 1.3.2
249
-
250
- ### Patch Changes
251
-
252
- - [`bb5e81ea`](https://github.com/statelyai/xstate/commit/bb5e81eaa1ecba1fd54a7677ce9eaee9bd695964) [#2050](https://github.com/statelyai/xstate/pull/2050) Thanks [@theKashey](https://github.com/theKashey)! - Added an explicit entrypoint for `@xstate/react/fsm` which you can use instead of `@xstate/react/lib/fsm`. This is the only specifier that will be supported in the future - the other one will be dropped in the next major version.
253
-
254
- ```diff
255
- -import { useMachine } from '@xstate/react/lib/fsm'
256
- +import { useMachine } from '@xstate/react/fsm'
257
- ```
258
-
259
- ## 1.3.1
260
-
261
- ### Patch Changes
262
-
263
- - [`b076b253`](https://github.com/statelyai/xstate/commit/b076b25364224874f62e8065892be40dfbb28030) [#1947](https://github.com/statelyai/xstate/pull/1947) Thanks [@lukekarrys](https://github.com/lukekarrys)! - Fix typing of the service returned from the fsm useMachine hook by passing it Typestate
264
-
265
- * [`9b5dc784`](https://github.com/statelyai/xstate/commit/9b5dc7843c44f50bcca0ffccb843b3d50cef6ddc) [#1950](https://github.com/statelyai/xstate/pull/1950) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with `toObserver` being internally imported from `xstate/lib/utils` which has broken UMD build and the declared peer dep contract.
266
-
267
- ## 1.3.0
268
-
269
- ### Minor Changes
270
-
271
- - [`577ae023`](https://github.com/statelyai/xstate/commit/577ae02384926b49e876011c4393f212b49066f8) [#1915](https://github.com/statelyai/xstate/pull/1915) Thanks [@davidkpiano](https://github.com/statelyai)! - New hook: `useInterpret(machine)`, which is a low-level hook that interprets the `machine` and returns the `service`:
272
-
273
- ```js
274
- import { useInterpret } from '@xstate/react';
275
- import { someMachine } from '../path/to/someMachine';
276
-
277
- const App = () => {
278
- const service = useInterpret(someMachine);
279
-
280
- // ...
281
- };
282
- ```
283
-
284
- * [`577ae023`](https://github.com/statelyai/xstate/commit/577ae02384926b49e876011c4393f212b49066f8) [#1915](https://github.com/statelyai/xstate/pull/1915) Thanks [@davidkpiano](https://github.com/statelyai)! - New hook: `useSelector(actor, selector)`, which subscribes to `actor` and returns the selected state derived from `selector(snapshot)`:
285
-
286
- ```js
287
- import { useSelector } from '@xstate/react';
288
-
289
- const App = ({ someActor }) => {
290
- const count = useSelector(someActor, state => state.context.count);
291
-
292
- // ...
293
- };
294
- ```
295
-
296
- ## 1.2.2
297
-
298
- ### Patch Changes
299
-
300
- - [`4b31cefb`](https://github.com/statelyai/xstate/commit/4b31cefb3d3497e5515314046639df7e27dbe9e8) [#1780](https://github.com/statelyai/xstate/pull/1780) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with some external packages not being bundled correctly into the UMD bundles.
301
-
302
- ## 1.2.1
303
-
304
- ### Patch Changes
305
-
306
- - [`a16a5f2f`](https://github.com/statelyai/xstate/commit/a16a5f2ff5ba9d4d7834ec3ca2d0adecf5d6a870) [#1756](https://github.com/statelyai/xstate/pull/1756) Thanks [@dimitardanailov](https://github.com/dimitardanailov)! - Fixed an issue with `process` references not being removed correctly from the UMD bundles.
307
-
308
- ## 1.2.0
309
-
310
- ### Minor Changes
311
-
312
- - [`dd98296e`](https://github.com/statelyai/xstate/commit/dd98296e9fcbae905da2395e67e876e28be7c774) [#1738](https://github.com/statelyai/xstate/pull/1738) Thanks [@dimitardanailov](https://github.com/dimitardanailov)! - Added UMD bundle.
313
-
314
- ## 1.1.0
315
-
316
- ### Minor Changes
317
-
318
- - [`89f9c27c`](https://github.com/statelyai/xstate/commit/89f9c27c453dc56bdfdf49c8ea1f0f87ff1f9b67) [#1622](https://github.com/statelyai/xstate/pull/1622) Thanks [@davidkpiano](https://github.com/statelyai)! - Spawned/invoked actors and interpreters are now typed as extending `ActorRef` rather than `Actor` or `Interpreter`. This unification of types should make it more straightforward to provide actor types in React:
319
-
320
- ```ts
321
- import { ActorRef } from 'xstate';
322
- import { useActor } from '@xstate/react';
323
-
324
- const Child: React.FC<{ actorRef: ActorRef<SomeEvent, SomeEmitted> }> = ({
325
- actorRef
326
- }) => {
327
- // `state` is typed as `SomeEmitted`
328
- // `send` can be called with `SomeEvent` values
329
- const [state, send] = useActor(actorRef);
330
-
331
- // . ..
332
- };
333
- ```
334
-
335
- It's also easier to specify the type of a spawned/invoked machine with `ActorRefFrom`:
336
-
337
- ```ts
338
- import { createMachine, ActorRefFrom } from 'xstate';
339
- import { useActor } from '@xstate/react';
340
-
341
- const someMachine = createMachine<SomeContext, SomeEvent>({
342
- // ...
343
- });
344
-
345
- const Child: React.FC<{ someRef: ActorRefFrom<typeof someMachine> }> = ({
346
- someRef
347
- }) => {
348
- // `state` is typed as `State<SomeContext, SomeEvent>`
349
- // `send` can be called with `SomeEvent` values
350
- const [state, send] = useActor(someRef);
351
-
352
- // . ..
353
- };
354
- ```
355
-
356
- ## 1.0.3
357
-
358
- ### Patch Changes
359
-
360
- - [`27db2950`](https://github.com/statelyai/xstate/commit/27db295064d42cacb89ff10d55f39eb7609148e1) [#1636](https://github.com/statelyai/xstate/pull/1636) Thanks [@Andarist](https://github.com/Andarist)! - Allow React 17 in the specified peer dependency range.
361
-
362
- ## 1.0.2
363
-
364
- ### Patch Changes
365
-
366
- - [`c7927083`](https://github.com/statelyai/xstate/commit/c7927083a651e3c51952ade2ffda793df0391bf6) [#1516](https://github.com/statelyai/xstate/pull/1516) Thanks [@davidkpiano](https://github.com/statelyai)! - The `send` function returned from the `useService()` now can take two arguments (an event type and payload), to match the behavior of `@xstate/react` version 0.x.
367
-
368
- * [`db77623a`](https://github.com/statelyai/xstate/commit/db77623a48955d762cffa9b624f438220add5eed) [#1516](https://github.com/statelyai/xstate/pull/1516) Thanks [@davidkpiano](https://github.com/statelyai)! - The `send` value returned from the `useService()` hook will now accept a payload, which matches the signature of the `send` value returned from the `useMachine()` hook:
369
-
370
- ```js
371
- const [state, send] = useService(someService);
372
-
373
- // ...
374
-
375
- // this is OK:
376
- send('ADD', { value: 3 });
377
-
378
- // which is equivalent to:
379
- send({ type: 'ADD', value: 3 });
380
- ```
381
-
382
- - [`93f6db02`](https://github.com/statelyai/xstate/commit/93f6db02a2d56ec997198ddef0af3d7730bb79bb) [#1594](https://github.com/statelyai/xstate/pull/1594) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with internal `setState` in `useService` being called with 2 arguments instead of 1.
383
-
384
- * [`72b0880e`](https://github.com/statelyai/xstate/commit/72b0880e6444ae009adca72088872bb5c0760ce3) [#1504](https://github.com/statelyai/xstate/pull/1504) Thanks [@Andarist](https://github.com/Andarist)! - Fixed issue with `useService` returning an initial state for services in their final states.
385
-
386
- ## 1.0.1
387
-
388
- ### Patch Changes
389
-
390
- - [`c0bd0407`](https://github.com/statelyai/xstate/commit/c0bd040767dcac20ed690e49a8725b4f1011dd5d) [#1493](https://github.com/statelyai/xstate/pull/1493) Thanks [@davidkpiano](https://github.com/statelyai)! - There will now be a descriptive error when trying to use an actor-like object in the `useService()` hook, where `useActor()` should be preferred:
391
-
392
- > Attempted to use an actor-like object instead of a service in the useService() hook. Please use the useActor() hook instead.
393
-
394
- All notable changes to this project will be documented in this file.
395
-
396
- ## [1.0.0-rc.7]
397
-
398
- - The `machine` passed into `useMachine(machine)` can now be passed in lazily:
399
-
400
- ```js
401
- const [state, send] = useMachine(() => createMachine(/* ... */));
402
-
403
- // ...
404
- ```
405
-
406
- This has the benefit of avoiding unnecessary machine initializations whenever the component rerenders.
407
-
408
- - The `useActor` hook now takes a second argument: `getSnapshot` which is a function that should return the last emitted value:
409
-
410
- ```js
411
- const [state, send] = useActor(someActor, actor => actor.current);
412
- ```
413
-
414
- ## [1.0.0-rc.6]
415
-
416
- ## [1.0.0-rc.5]
417
-
418
- - You can now schedule actions in `useEffect` or `useLayoutEffect` via:
419
- - `asEffect` - queues the action to be executed in `useEffect`
420
- - `asLayoutEffect` - queues the action to be executed in `useLayoutEffect`
421
-
422
- ```jsx
423
- import { createMachine } from 'xstate';
424
- import { useMachine, asEffect } from '@xstate/react';
425
-
426
- const machine = createMachine({
427
- initial: 'focused',
428
- states: {
429
- focused: {
430
- entry: 'focus'
431
- }
432
- }
433
- });
434
-
435
- const Input = () => {
436
- const inputRef = useRef(null);
437
- const [state, send] = useMachine(machine, {
438
- actions: {
439
- focus: asEffect(() => {
440
- inputRef.current && inputRef.current.focus();
441
- })
442
- }
443
- });
444
-
445
- return <input ref={inputRef} />;
446
- };
447
- ```
448
-
449
- ## [0.8.1]
450
-
451
- - Services are now kept up to date
452
-
453
- ## [0.8.0]
454
-
455
- - The `useActor()` hook is now available.
456
- - Support for persisted states
457
-
458
- ## [0.7.1]
459
-
460
- - Actions passed into `useMachine(..., { actions: { ... } })` will now be kept up-to-date and no longer reference stale data.
461
-
462
- ## [0.7.0]
463
-
464
- ### Added
465
-
466
- - Machine configuration can now be merged into the options argument of `useMachine(machine, options)`. The following Machine Config options are available: `guards`, `actions`, `activities`, `services`, `delays` and `updates` (NOTE: `context` option is not implemented yet, use `withContext` or `withConfig` instead for the meantime)
467
-
468
- ```js
469
- const [current, send] = useMachine(someMachine, {
470
- actions: {
471
- doThing: doTheThing
472
- },
473
- services: {
474
- /* ... */
475
- },
476
- guards: {
477
- /* ... */
478
- }
479
- // ... etc.
480
- });
481
- ```