@xstate/react 2.0.0 → 4.0.0-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # Changelog
 
+## 4.0.0-alpha.0
+
+### Major Changes
+
+- [#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.
+
+### Patch Changes
+
+- 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)]:
+  - xstate@5.0.0-alpha.0
+
+## 3.0.0
+
+### Major Changes
+
+- [#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.
+
+* [#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.
+
+  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.
+
+- [#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.
+
+### Patch Changes
+
+- [#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`.
+
+* [#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.
+
+- [#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`.
+
+* [#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.
+
+* Updated dependencies [[`360e85462`](https://github.com/statelyai/xstate/commit/360e8546298c4a06b6d51d8f12c0563672dd7acf), [`360e85462`](https://github.com/statelyai/xstate/commit/360e8546298c4a06b6d51d8f12c0563672dd7acf)]:
+  - @xstate/fsm@2.0.0
+
+## 2.0.1
+
+### Patch Changes
+
+- [#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).
+
 ## 2.0.0
 
 ### Major Changes

package/dist/declarations/src/fsm.d.ts

@@ -0,0 +1,3 @@
+import { MachineImplementationsFrom, ServiceFrom, StateFrom, StateMachine } from '@xstate/fsm';
+export declare function useMachine<TMachine extends StateMachine.AnyMachine>(stateMachine: TMachine, options?: MachineImplementationsFrom<TMachine>): [StateFrom<TMachine>, ServiceFrom<TMachine>['send'], ServiceFrom<TMachine>];
+export declare function useService<TService extends StateMachine.AnyService>(service: TService): [StateFrom<TService>, TService['send'], TService];

package/{es/index.js → dist/declarations/src/index.d.ts}

@@ -1,5 +1,5 @@
-export { useMachine, asEffect, asLayoutEffect } from './useMachine';
-export { useActor } from './useActor';
-export { useInterpret } from './useInterpret';
-export { useSelector } from './useSelector';
-export { useSpawn } from './useSpawn';
+export { useMachine } from './useMachine';
+export { useActor } from './useActor';
+export { useInterpret } from './useInterpret';
+export { useSelector } from './useSelector';
+export { useSpawn } from './useSpawn';

package/dist/declarations/src/types.d.ts

@@ -0,0 +1,15 @@
+import { EventObject, MachineContext, StateConfig } from 'xstate';
+export declare type MaybeLazy<T> = T | (() => T);
+export declare type NoInfer<T> = [T][T extends any ? 0 : any];
+export declare type Prop<T, K> = K extends keyof T ? T[K] : never;
+export interface UseMachineOptions<TContext extends MachineContext, TEvent extends EventObject> {
+    /**
+     * If provided, will be merged with machine's `context`.
+     */
+    context?: Partial<TContext>;
+    /**
+     * The state to rehydrate the machine to. The machine will
+     * start at this state instead of its `initialState`.
+     */
+    state?: StateConfig<TContext, TEvent>;
+}

package/dist/declarations/src/useActor.d.ts

@@ -0,0 +1,3 @@
+import { ActorRef, EventObject, SnapshotFrom } from 'xstate';
+export declare function useActor<TActor extends ActorRef<any, any>>(actorRef: TActor): [SnapshotFrom<TActor>, TActor['send']];
+export declare function useActor<TEvent extends EventObject, TSnapshot>(actorRef: ActorRef<TEvent, TSnapshot>): [TSnapshot, (event: TEvent) => void];

package/{es → dist/declarations/src}/useConstant.d.ts

@@ -1,2 +1 @@
-export default function useConstant<T>(fn: () => T): T;
-//# sourceMappingURL=useConstant.d.ts.map
+export default function useConstant<T>(fn: () => T): T;

package/dist/declarations/src/useInterpret.d.ts

@@ -0,0 +1,13 @@
+import { AnyInterpreter, AnyStateMachine, AreAllImplementationsAssumedToBeProvided, InternalMachineImplementations, InterpreterFrom, InterpreterOptions, MachineImplementations, Observer, StateFrom } from 'xstate';
+import { MaybeLazy } from './types';
+import { UseMachineOptions } from './useMachine';
+export declare function useIdleInterpreter(getMachine: MaybeLazy<AnyStateMachine>, options: Partial<InterpreterOptions> & Partial<UseMachineOptions<any, never>> & Partial<MachineImplementations<any, never>>): AnyInterpreter;
+declare type RestParams<TMachine extends AnyStateMachine> = AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends false ? [
+    options: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta'], true>,
+    observerOrListener?: Observer<StateFrom<TMachine>> | ((value: StateFrom<TMachine>) => void)
+] : [
+    options?: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta']>,
+    observerOrListener?: Observer<StateFrom<TMachine>> | ((value: StateFrom<TMachine>) => void)
+];
+export declare function useInterpret<TMachine extends AnyStateMachine>(getMachine: MaybeLazy<TMachine>, ...[options, observerOrListener]: RestParams<TMachine>): InterpreterFrom<TMachine>;
+export {};

package/dist/declarations/src/useMachine.d.ts

@@ -0,0 +1,21 @@
+import { AnyStateMachine, AreAllImplementationsAssumedToBeProvided, EventObject, InternalMachineImplementations, InterpreterFrom, InterpreterOptions, MachineContext, StateConfig, StateFrom } from 'xstate';
+import { MaybeLazy, Prop } from './types';
+export interface UseMachineOptions<TContext extends MachineContext, TEvent extends EventObject> {
+    /**
+     * If provided, will be merged with machine's `context`.
+     */
+    context?: Partial<TContext>;
+    /**
+     * The state to rehydrate the machine to. The machine will
+     * start at this state instead of its `initialState`.
+     */
+    state?: StateConfig<TContext, TEvent>;
+}
+declare type RestParams<TMachine extends AnyStateMachine> = AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends false ? [
+    options: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta'], true>
+] : [
+    options?: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta']>
+];
+declare type UseMachineReturn<TMachine extends AnyStateMachine, TInterpreter = InterpreterFrom<TMachine>> = [StateFrom<TMachine>, Prop<TInterpreter, 'send'>, TInterpreter];
+export declare function useMachine<TMachine extends AnyStateMachine>(getMachine: MaybeLazy<TMachine>, ...[options]: RestParams<TMachine>): UseMachineReturn<TMachine>;
+export {};

package/dist/declarations/src/useSelector.d.ts

@@ -0,0 +1,2 @@
+import { ActorRef, SnapshotFrom } from 'xstate';
+export declare function useSelector<TActor extends ActorRef<any, any>, T>(actor: TActor, selector: (emitted: SnapshotFrom<TActor>) => T, compare?: (a: T, b: T) => boolean): T;

package/{es → dist/declarations/src}/useSpawn.d.ts

@@ -1,10 +1,9 @@
-import { ActorRef, Behavior, EventObject } from 'xstate';
-/**
- * React hook that spawns an `ActorRef` with the specified `behavior`.
- * The returned `ActorRef` can be used with the `useActor(actorRef)` hook.
- *
- * @param behavior The actor behavior to spawn
- * @returns An ActorRef with the specified `behavior`
- */
-export declare function useSpawn<TState, TEvent extends EventObject>(behavior: Behavior<TEvent, TState>): ActorRef<TEvent, TState>;
-//# sourceMappingURL=useSpawn.d.ts.map
+import { ActorRef, Behavior, EventObject } from 'xstate';
+/**
+ * React hook that spawns an `ActorRef` with the specified `behavior`.
+ * The returned `ActorRef` can be used with the `useActor(actorRef)` hook.
+ *
+ * @param behavior The actor behavior to spawn
+ * @returns An ActorRef with the specified `behavior`
+ */
+export declare function useSpawn<TState, TEvent extends EventObject>(behavior: Behavior<TEvent, TState>): ActorRef<TEvent, TState>;

package/dist/useConstant-644f0e11.cjs.dev.js

@@ -0,0 +1,74 @@
+'use strict';
+
+var React = require('react');
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
+
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+function useConstant(fn) {
+  var ref = React.useRef();
+
+  if (!ref.current) {
+    ref.current = {
+      v: fn()
+    };
+  }
+
+  return ref.current.v;
+}
+
+exports._slicedToArray = _slicedToArray;
+exports.useConstant = useConstant;

package/dist/useConstant-94bfdbb5.esm.js

@@ -0,0 +1,71 @@
+import { useRef } from 'react';
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
+
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+function useConstant(fn) {
+  var ref = useRef();
+
+  if (!ref.current) {
+    ref.current = {
+      v: fn()
+    };
+  }
+
+  return ref.current.v;
+}
+
+export { _slicedToArray as _, useConstant as u };

package/dist/useConstant-eeb49d3f.cjs.prod.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var React = require('react');
+
+function useConstant(fn) {
+  var ref = React.useRef();
+
+  if (!ref.current) {
+    ref.current = {
+      v: fn()
+    };
+  }
+
+  return ref.current.v;
+}
+
+exports.useConstant = useConstant;

package/dist/xstate-react.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./declarations/src/index";

package/dist/xstate-react.cjs.dev.js

@@ -0,0 +1,241 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var withSelector = require('use-sync-external-store/shim/with-selector');
+var xstate = require('xstate');
+var useConstant = require('./useConstant-644f0e11.cjs.dev.js');
+var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
+var shim = require('use-sync-external-store/shim');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var useIsomorphicLayoutEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicLayoutEffect);
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
+var _excluded = ["context", "actors", "guards", "actions", "delays", "state"];
+function useIdleInterpreter(getMachine, options) {
+  var machine = useConstant.useConstant(function () {
+    return typeof getMachine === 'function' ? getMachine() : getMachine;
+  });
+
+  if (process.env.NODE_ENV !== 'production' && typeof getMachine !== 'function') {
+    var _useState = React.useState(machine),
+        _useState2 = useConstant._slicedToArray(_useState, 1),
+        initialMachine = _useState2[0];
+
+    if (getMachine !== initialMachine) {
+      console.warn('Machine given to `useMachine` has changed between renders. This is not supported and might lead to unexpected results.\n' + 'Please make sure that you pass the same Machine as argument each time.');
+    }
+  }
+
+  var context = options.context,
+      actors = options.actors,
+      guards = options.guards,
+      actions = options.actions,
+      delays = options.delays,
+      rehydratedState = options.state,
+      interpreterOptions = _objectWithoutProperties(options, _excluded);
+
+  var service = useConstant.useConstant(function () {
+    var machineConfig = {
+      context: context,
+      guards: guards,
+      actions: actions,
+      actors: actors,
+      delays: delays
+    };
+    var machineWithConfig = machine.provide(machineConfig);
+    return xstate.interpret(machineWithConfig, interpreterOptions);
+  }); // Make sure options are kept updated when they change.
+  // This mutation assignment is safe because the service instance is only used
+  // in one place -- this hook's caller.
+
+  useIsomorphicLayoutEffect__default['default'](function () {
+    Object.assign(service.machine.options.actions, actions);
+    Object.assign(service.machine.options.guards, guards);
+    Object.assign(service.machine.options.actors, actors);
+    Object.assign(service.machine.options.delays, delays);
+  }, [actions, guards, actors, delays]);
+  return service;
+}
+function useInterpret(getMachine) {
+  for (var _len = arguments.length, _ref = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    _ref[_key - 1] = arguments[_key];
+  }
+
+  var _ref$ = _ref[0],
+      options = _ref$ === void 0 ? {} : _ref$,
+      observerOrListener = _ref[1];
+  var service = useIdleInterpreter(getMachine, options);
+  React.useEffect(function () {
+    if (!observerOrListener) {
+      return;
+    }
+
+    var sub = service.subscribe(xstate.toObserver(observerOrListener));
+    return function () {
+      sub.unsubscribe();
+    };
+  }, [observerOrListener]);
+  React.useEffect(function () {
+    var rehydratedState = options.state;
+    service.start(rehydratedState ? xstate.State.create(rehydratedState) : undefined);
+    return function () {
+      service.stop();
+      service.status = xstate.InterpreterStatus.NotStarted;
+    };
+  }, []);
+  return service;
+}
+
+function identity(a) {
+  return a;
+}
+
+var isEqual = function isEqual(prevState, nextState) {
+  return prevState === nextState || nextState.changed === false;
+};
+
+// TODO: rethink how we can do this better
+var cachedRehydratedStates = new WeakMap();
+function useMachine(getMachine) {
+  for (var _len = arguments.length, _ref = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    _ref[_key - 1] = arguments[_key];
+  }
+
+  var _ref$ = _ref[0],
+      options = _ref$ === void 0 ? {} : _ref$;
+  // using `useIdleInterpreter` allows us to subscribe to the service *before* we start it
+  // so we don't miss any notifications
+  var service = useIdleInterpreter(getMachine, options);
+  var getSnapshot = React.useCallback(function () {
+    if (service.status === xstate.InterpreterStatus.NotStarted && options.state) {
+      var cached = cachedRehydratedStates.get(options.state);
+
+      if (cached) {
+        return cached;
+      }
+
+      var created = xstate.State.create(options.state);
+      cachedRehydratedStates.set(options.state, created);
+      return created;
+    }
+
+    return service.getSnapshot();
+  }, [service]);
+  var subscribe = React.useCallback(function (handleStoreChange) {
+    var _service$subscribe = service.subscribe(handleStoreChange),
+        unsubscribe = _service$subscribe.unsubscribe;
+
+    return unsubscribe;
+  }, [service]);
+  var storeSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
+  React.useEffect(function () {
+    var rehydratedState = options.state;
+    service.start(rehydratedState ? xstate.State.create(rehydratedState) : undefined);
+    return function () {
+      service.stop();
+      service.status = xstate.InterpreterStatus.NotStarted;
+    };
+  }, []);
+  return [storeSnapshot, service.send, service];
+}
+
+function useActor(actorRef) {
+  var subscribe = React.useCallback(function (handleStoreChange) {
+    var _actorRef$subscribe = actorRef.subscribe(handleStoreChange),
+        unsubscribe = _actorRef$subscribe.unsubscribe;
+
+    return unsubscribe;
+  }, [actorRef]);
+  var boundGetSnapshot = React.useCallback(function () {
+    return actorRef.getSnapshot();
+  }, [actorRef]);
+  var storeSnapshot = shim.useSyncExternalStore(subscribe, boundGetSnapshot, boundGetSnapshot);
+  var boundSend = React.useCallback(function (event) {
+    return actorRef.send(event);
+  }, [actorRef]);
+  return [storeSnapshot, boundSend];
+}
+
+function defaultCompare(a, b) {
+  return a === b;
+}
+
+function useSelector(actor, selector) {
+  var compare = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultCompare;
+  var subscribe = React.useCallback(function (handleStoreChange) {
+    var _actor$subscribe = actor.subscribe(handleStoreChange),
+        unsubscribe = _actor$subscribe.unsubscribe;
+
+    return unsubscribe;
+  }, [actor]);
+  var boundGetSnapshot = React.useCallback(function () {
+    return actor.getSnapshot();
+  }, [actor]);
+  var selectedSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, boundGetSnapshot, boundGetSnapshot, selector, compare);
+  return selectedSnapshot;
+}
+
+/**
+ * React hook that spawns an `ActorRef` with the specified `behavior`.
+ * The returned `ActorRef` can be used with the `useActor(actorRef)` hook.
+ *
+ * @param behavior The actor behavior to spawn
+ * @returns An ActorRef with the specified `behavior`
+ */
+
+function useSpawn(behavior) {
+  var actorRef = useConstant.useConstant(function () {
+    // TODO: figure out what to do about the name argument
+    return new xstate.ObservableActorRef(behavior, '');
+  });
+  React.useEffect(function () {
+    actorRef.start();
+    return function () {
+      actorRef.stop();
+    };
+  }, []);
+  return actorRef;
+}
+
+exports.useActor = useActor;
+exports.useInterpret = useInterpret;
+exports.useMachine = useMachine;
+exports.useSelector = useSelector;
+exports.useSpawn = useSpawn;

package/dist/xstate-react.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./xstate-react.cjs.prod.js");
+} else {
+  module.exports = require("./xstate-react.cjs.dev.js");
+}