@xstate/react 1.6.1 → 2.0.0-pr2674-2021926101023

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # Changelog
 
+## 2.0.0-pr2674-2021926101023
+
+### Major Changes
+
+- e5a8b8dff: author: @Andarist
+  author: @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 required at least TS 4.0.
+
+### Patch Changes
+
+- Updated dependencies [1cd26811c]
+  - xstate@4.27.0-pr2674-2021926101023
+
+## 1.6.2
+
+### Patch Changes
+
+- [#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/davidkpiano), [@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)
+
+* [#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`.
+
+  ```js
+  const machine = createMachine({
+    initial: 'foo',
+    context: { id: 1 },
+    states: {
+      foo: {
+        on: {
+          CHECK: {
+            target: 'bar',
+            cond: 'hasOverflown'
+          }
+        }
+      },
+      bar: {}
+    }
+  });
+
+  const [id, setId] = useState(1);
+  const [current, send] = useMachine(
+    machine.withConfig({
+      guards: {
+        hasOverflown: () => id > 1 // id is a reference to an outside value
+      }
+    })
+  );
+
+  // later when id updates
+  setId(2);
+  // 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`.
+  ```
+
 ## 1.6.1
 
 ### Patch Changes

package/README.md

@@ -1,8 +1,11 @@
 # @xstate/react
 
-[[toc]]
+This package contains utilities for using [XState](https://github.com/statelyai/xstate) with [React](https://github.com/facebook/react/).
 
-## Quick Start
+- [Read the full documentation in the XState docs](https://xstate.js.org/docs/packages/xstate-react/).
+- [Read our contribution guidelines](https://github.com/statelyai/xstate/blob/main/CONTRIBUTING.md).
+
+## Quick start
 
 1. Install `xstate` and `@xstate/react`:
 
@@ -57,513 +60,3 @@ export const Toggler = () => {
   );
 };
 ```
-
-## Examples
-
-- [XState + React TodoMVC (CodeSandbox)](https://codesandbox.io/s/xstate-todomvc-33wr94qv1)
-
-## API
-
-### `useMachine(machine, options?)`
-
-A [React hook](https://reactjs.org/hooks) that interprets the given `machine` and starts a service that runs for the lifetime of the component.
-
-**Arguments**
-
-- `machine` - An [XState machine](https://xstate.js.org/docs/guides/machines.html) or a function that lazily returns a machine:
-
-  ```js
-  // existing machine
-  const [state, send] = useMachine(machine);
-
-  // lazily-created machine
-  const [state, send] = useMachine(() =>
-    createMachine({
-      /* ... */
-    })
-  );
-  ```
-
-- `options` (optional) - [Interpreter options](https://xstate.js.org/docs/guides/interpretation.html#options) and/or any of the following machine config options: `guards`, `actions`, `services`, `delays`, `immediate`, `context`, `state`.
-
-**Returns** a tuple of `[state, send, service]`:
-
-- `state` - Represents the current state of the machine as an XState `State` object.
-- `send` - A function that sends events to the running service.
-- `service` - The created service.
-
-### `useService(service)`
-
-::: warning Deprecated
-
-In the next major version, `useService(service)` will be replaced with `useActor(service)`. Prefer using the `useActor(service)` hook for services instead, since services are also actors.
-
-Also, keep in mind that only a single argument (the event object) can be sent to `send(eventObject)` from `useActor(...)`. When migrating to `useActor(...)`, refactor `send(...)` calls to use only a single event object:
-
-```diff
-const [state, send] = useActor(service);
--send('CLICK', { x: 0, y: 3 });
-+send({ type: 'CLICK', x: 0, y: 3 });
-```
-
-:::
-
-A [React hook](https://reactjs.org/hooks) that subscribes to state changes from an existing [service](https://xstate.js.org/docs/guides/interpretation.html).
-
-**Arguments**
-
-- `service` - An [XState service](https://xstate.js.org/docs/guides/interpretation.html).
-
-**Returns** a tuple of `[state, send]`:
-
-- `state` - Represents the current state of the service as an XState `State` object.
-- `send` - A function that sends events to the running service.
-
-### `useActor(actor, getSnapshot?)`
-
-A [React hook](https://reactjs.org/hooks) that subscribes to emitted changes from an existing [actor](https://xstate.js.org/docs/guides/actors.html).
-
-**Arguments**
-
-- `actor` - an actor-like object that contains `.send(...)` and `.subscribe(...)` methods.
-- `getSnapshot` - a function that should return the latest emitted value from the `actor`.
-  - Defaults to attempting to get the `actor.state`, or returning `undefined` if that does not exist.
-
-```js
-const [state, send] = useActor(someSpawnedActor);
-
-// with custom actors
-const [state, send] = useActor(customActor, (actor) => {
-  // implementation-specific pseudocode example:
-  return actor.getLastEmittedValue();
-});
-```
-
-### `useInterpret(machine, options?, observer?)`
-
-A React hook that returns the `service` created from the `machine` with the `options`, if specified. It also sets up a subscription to the `service` with the `observer`, if provided.
-
-_Since 1.3.0_
-
-**Arguments**
-
-- `machine` - An [XState machine](https://xstate.js.org/docs/guides/machines.html) or a function that lazily returns a machine.
-- `options` (optional) - [Interpreter options](https://xstate.js.org/docs/guides/interpretation.html#options) and/or any of the following machine config options: `guards`, `actions`, `services`, `delays`, `immediate`, `context`, `state`.
-- `observer` (optional) - an observer or listener that listens to state updates:
-  - an observer (e.g., `{ next: (state) => {/* ... */} }`)
-  - or a listener (e.g., `(state) => {/* ... */}`)
-
-```js
-import { useInterpret } from '@xstate/react';
-import { someMachine } from '../path/to/someMachine';
-
-const App = () => {
-  const service = useInterpret(someMachine);
-
-  // ...
-};
-```
-
-With options + listener:
-
-```js
-// ...
-
-const App = () => {
-  const service = useInterpret(
-    someMachine,
-    {
-      actions: {
-        /* ... */
-      }
-    },
-    (state) => {
-      // subscribes to state changes
-      console.log(state);
-    }
-  );
-
-  // ...
-};
-```
-
-### `useSelector(actor, selector, compare?, getSnapshot?)`
-
-A React hook that returns the selected value from the snapshot of an `actor`, such as a service. This hook will only cause a rerender if the selected value changes, as determined by the optional `compare` function.
-
-_Since 1.3.0_
-
-**Arguments**
-
-- `actor` - a service or an actor-like object that contains `.send(...)` and `.subscribe(...)` methods.
-- `selector` - a function that takes in an actor's "current state" (snapshot) as an argument and returns the desired selected value.
-- `compare` (optional) - a function that determines if the current selected value is the same as the previous selected value.
-- `getSnapshot` (optional) - a function that should return the latest emitted value from the `actor`.
-  - Defaults to attempting to get the `actor.state`, or returning `undefined` if that does not exist. Will automatically pull the state from services.
-
-```js
-import { useSelector } from '@xstate/react';
-
-// tip: optimize selectors by defining them externally when possible
-const selectCount = (state) => state.context.count;
-
-const App = ({ service }) => {
-  const count = useSelector(service, selectCount);
-
-  // ...
-};
-```
-
-With `compare` function:
-
-```js
-// ...
-
-const selectUser = (state) => state.context.user;
-const compareUser = (prevUser, nextUser) => prevUser.id === nextUser.id;
-
-const App = ({ service }) => {
-  const user = useSelector(service, selectUser, compareUser);
-
-  // ...
-};
-```
-
-With `useInterpret(...)`:
-
-```js
-import { useInterpret, useSelector } from '@xstate/react';
-import { someMachine } from '../path/to/someMachine';
-
-const selectCount = (state) => state.context.count;
-
-const App = ({ service }) => {
-  const service = useInterpret(someMachine);
-  const count = useSelector(service, selectCount);
-
-  // ...
-};
-```
-
-### `asEffect(action)`
-
-Ensures that the `action` is executed as an effect in `useEffect`, rather than being immediately executed.
-
-**Arguments**
-
-- `action` - An action function (e.g., `(context, event) => { alert(context.message) })`)
-
-**Returns** a special action function that wraps the original so that `useMachine` knows to execute it in `useEffect`.
-
-**Example**
-
-```jsx
-const machine = createMachine({
-  initial: 'focused',
-  states: {
-    focused: {
-      entry: 'focus'
-    }
-  }
-});
-
-const Input = () => {
-  const inputRef = useRef(null);
-  const [state, send] = useMachine(machine, {
-    actions: {
-      focus: asEffect((context, event) => {
-        inputRef.current && inputRef.current.focus();
-      })
-    }
-  });
-
-  return <input ref={inputRef} />;
-};
-```
-
-### `asLayoutEffect(action)`
-
-Ensures that the `action` is executed as an effect in `useLayoutEffect`, rather than being immediately executed.
-
-**Arguments**
-
-- `action` - An action function (e.g., `(context, event) => { alert(context.message) })`)
-
-**Returns** a special action function that wraps the original so that `useMachine` knows to execute it in `useLayoutEffect`.
-
-### `useMachine(machine)` with `@xstate/fsm`
-
-A [React hook](https://reactjs.org/hooks) that interprets the given finite state `machine` from [`@xstate/fsm`] and starts a service that runs for the lifetime of the component.
-
-This special `useMachine` hook is imported from `@xstate/react/fsm`
-
-**Arguments**
-
-- `machine` - An [XState finite state machine (FSM)](https://xstate.js.org/docs/packages/xstate-fsm/).
-- `options` - An optional `options` object.
-
-**Returns** a tuple of `[state, send, service]`:
-
-- `state` - Represents the current state of the machine as an `@xstate/fsm` `StateMachine.State` object.
-- `send` - A function that sends events to the running service.
-- `service` - The created `@xstate/fsm` service.
-
-**Example**
-
-```js
-import { useEffect } from 'react';
-import { useMachine } from '@xstate/react/fsm';
-import { createMachine } from '@xstate/fsm';
-
-const context = {
-  data: undefined
-};
-const fetchMachine = createMachine({
-  id: 'fetch',
-  initial: 'idle',
-  context,
-  states: {
-    idle: {
-      on: { FETCH: 'loading' }
-    },
-    loading: {
-      entry: ['load'],
-      on: {
-        RESOLVE: {
-          target: 'success',
-          actions: assign({
-            data: (context, event) => event.data
-          })
-        }
-      }
-    },
-    success: {}
-  }
-});
-
-const Fetcher = ({
-  onFetch = () => new Promise((res) => res('some data'))
-}) => {
-  const [state, send] = useMachine(fetchMachine, {
-    actions: {
-      load: () => {
-        onFetch().then((res) => {
-          send({ type: 'RESOLVE', data: res });
-        });
-      }
-    }
-  });
-
-  switch (state.value) {
-    case 'idle':
-      return <button onClick={(_) => send('FETCH')}>Fetch</button>;
-    case 'loading':
-      return <div>Loading...</div>;
-    case 'success':
-      return (
-        <div>
-          Success! Data: <div data-testid="data">{state.context.data}</div>
-        </div>
-      );
-    default:
-      return null;
-  }
-};
-```
-
-## Configuring Machines
-
-Existing machines can be configured by passing the machine options as the 2nd argument of `useMachine(machine, options)`.
-
-Example: the `'fetchData'` service and `'notifySuccess'` action are both configurable:
-
-```js
-const fetchMachine = createMachine({
-  id: 'fetch',
-  initial: 'idle',
-  context: {
-    data: undefined,
-    error: undefined
-  },
-  states: {
-    idle: {
-      on: { FETCH: 'loading' }
-    },
-    loading: {
-      invoke: {
-        src: 'fetchData',
-        onDone: {
-          target: 'success',
-          actions: assign({
-            data: (_, event) => event.data
-          })
-        },
-        onError: {
-          target: 'failure',
-          actions: assign({
-            error: (_, event) => event.data
-          })
-        }
-      }
-    },
-    success: {
-      entry: 'notifySuccess',
-      type: 'final'
-    },
-    failure: {
-      on: {
-        RETRY: 'loading'
-      }
-    }
-  }
-});
-
-const Fetcher = ({ onResolve }) => {
-  const [state, send] = useMachine(fetchMachine, {
-    actions: {
-      notifySuccess: (ctx) => onResolve(ctx.data)
-    },
-    services: {
-      fetchData: (_, e) =>
-        fetch(`some/api/${e.query}`).then((res) => res.json())
-    }
-  });
-
-  switch (state.value) {
-    case 'idle':
-      return (
-        <button onClick={() => send('FETCH', { query: 'something' })}>
-          Search for something
-        </button>
-      );
-    case 'loading':
-      return <div>Searching...</div>;
-    case 'success':
-      return <div>Success! Data: {state.context.data}</div>;
-    case 'failure':
-      return (
-        <>
-          <p>{state.context.error.message}</p>
-          <button onClick={() => send('RETRY')}>Retry</button>
-        </>
-      );
-    default:
-      return null;
-  }
-};
-```
-
-## Matching States
-
-When using [hierarchical](https://xstate.js.org/docs/guides/hierarchical.html) and [parallel](https://xstate.js.org/docs/guides/parallel.html) machines, the state values will be objects, not strings. In this case, it is best to use [`state.matches(...)`](https://xstate.js.org/docs/guides/states.html#state-methods-and-getters).
-
-We can do this with `if/else if/else` blocks:
-
-```js
-// ...
-if (state.matches('idle')) {
-  return /* ... */;
-} else if (state.matches({ loading: 'user' })) {
-  return /* ... */;
-} else if (state.matches({ loading: 'friends' })) {
-  return /* ... */;
-} else {
-  return null;
-}
-```
-
-We can also continue to use `switch`, but we must make an adjustment to our approach. By setting the expression of the `switch` to `true`, we can use [`state.matches(...)`](https://xstate.js.org/docs/guides/states.html#state-methods-and-getters) as a predicate in each `case`:
-
-```js
-switch (true) {
-  case state.matches('idle'):
-    return /* ... */;
-  case state.matches({ loading: 'user' }):
-    return /* ... */;
-  case state.matches({ loading: 'friends' }):
-    return /* ... */;
-  default:
-    return null;
-}
-```
-
-A ternary statement can also be considered, especially within rendered JSX:
-
-```jsx
-const Loader = () => {
-  const [state, send] = useMachine(/* ... */);
-
-  return (
-    <div>
-      {state.matches('idle') ? (
-        <Loader.Idle />
-      ) : state.matches({ loading: 'user' }) ? (
-        <Loader.LoadingUser />
-      ) : state.matches({ loading: 'friends' }) ? (
-        <Loader.LoadingFriends />
-      ) : null}
-    </div>
-  );
-};
-```
-
-## Persisted and Rehydrated State
-
-You can persist and rehydrate state with `useMachine(...)` via `options.state`:
-
-```js
-// ...
-
-// Get the persisted state config object from somewhere, e.g. localStorage
-const persistedState = JSON.parse(localStorage.getItem('some-persisted-state-key')) || someMachine.initialState;
-
-const App = () => {
-  const [state, send] = useMachine(someMachine, {
-    state: persistedState // provide persisted state config object here
-  });
-
-  // state will initially be that persisted state, not the machine's initialState
-
-  return (/* ... */)
-}
-```
-
-## Services
-
-The `service` created in `useMachine(machine)` can be referenced as the third returned value:
-
-```js
-//                  vvvvvvv
-const [state, send, service] = useMachine(someMachine);
-```
-
-You can subscribe to that service's state changes with the [`useEffect` hook](https://reactjs.org/docs/hooks-effect.html):
-
-```js
-// ...
-
-useEffect(() => {
-  const subscription = service.subscribe((state) => {
-    // simple state logging
-    console.log(state);
-  });
-
-  return subscription.unsubscribe;
-}, [service]); // note: service should never change
-```
-
-## Migration from 0.x
-
-- For spawned actors created using `invoke` or `spawn(...)`, use the `useActor()` hook instead of `useService()`:
-
-  ```diff
-  -import { useService } from '@xstate/react';
-  +import { useActor } from '@xstate/react';
-
-  -const [state, send] = useService(someActor);
-  +const [state, send] = useActor(someActor);
-  ```
-
-## Resources
-
-[State Machines in React](https://gedd.ski/post/state-machines-in-react/)

package/dist/xstate-react.cjs.js

@@ -0,0 +1,16 @@
+"use strict";
+// this file might look strange and you might be wondering what it's for
+// it's lets you import your source files by importing this entrypoint
+// as you would import it if it was built with preconstruct build
+// this file is slightly different to some others though
+// it has a require hook which compiles your code with Babel
+// this means that you don't have to set up @babel/register or anything like that
+// but you can still require this module and it'll be compiled
+
+// this bit of code imports the require hook and registers it
+let unregister = require("../../../node_modules/@preconstruct/hook").___internalHook(typeof __dirname === 'undefined' ? undefined : __dirname, "../../..", "..");
+
+// this re-exports the source file
+module.exports = require("../src/index.ts");
+
+unregister();

package/dist/xstate-react.umd.min.js

@@ -1,4 +1,4 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("xstate"),require("xstate/lib/behaviors")):"function"==typeof define&&define.amd?define(["exports","react","xstate","xstate/lib/behaviors"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).XStateReact={},t.React,t.XState,t.behaviors)}(this,(function(t,e,n,r){"use strict";
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("xstate"),require("xstate/lib/behaviors")):"function"==typeof define&&define.amd?define(["exports","react","xstate","xstate/lib/behaviors"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).XStateReact={},e.React,e.XState,e.behaviors)}(this,(function(e,t,n,r){"use strict";function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o,i=u(t),c=function(){return(c=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var u in t=arguments[n])Object.prototype.hasOwnProperty.call(t,u)&&(e[u]=t[u]);return e}).apply(this,arguments)};
 /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
 
@@ -12,4 +12,17 @@
     LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
     OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
     PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */var u,i=function(){return(i=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var u in e=arguments[n])Object.prototype.hasOwnProperty.call(e,u)&&(t[u]=e[u]);return t}).apply(this,arguments)};function o(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var r,u,i=n.call(t),o=[];try{for(;(void 0===e||e-- >0)&&!(r=i.next()).done;)o.push(r.value)}catch(t){u={error:t}}finally{try{r&&!r.done&&(n=i.return)&&n.call(i)}finally{if(u)throw u.error}}return o}function c(t,e){for(var n=0,r=e.length,u=t.length;n<r;n++,u++)t[u]=e[n];return t}!function(t){t[t.Effect=1]="Effect",t[t.LayoutEffect=2]="LayoutEffect"}(u||(u={}));var a=e.useLayoutEffect;function f(t){var n=e.useRef();return n.current||(n.current={v:t()}),n.current.v}function s(t,e){var n,r,u=o([[],[]],2),i=u[0],c=u[1];try{for(var a=function(t){var e="function"==typeof Symbol&&Symbol.iterator,n=e&&t[e],r=0;if(n)return n.call(t);if(t&&"number"==typeof t.length)return{next:function(){return t&&r>=t.length&&(t=void 0),{value:t&&t[r++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}(t),f=a.next();!f.done;f=a.next()){var s=f.value;e(s)?i.push(s):c.push(s)}}catch(t){n={error:t}}finally{try{f&&!f.done&&(r=a.return)&&r.call(a)}finally{if(n)throw n.error}}return[i,c]}function l(t,e){(0,t.exec)(e.context,e._event.data,{action:t,state:e,_event:e._event})()}function v(t,r,v){void 0===r&&(r={});var p=f((function(){return"function"==typeof t?t():t})),d=r.context,h=r.guards,b=r.actions,y=r.activities,g=r.services,m=r.delays,x=r.state,O=function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var u=0;for(r=Object.getOwnPropertySymbols(t);u<r.length;u++)e.indexOf(r[u])<0&&Object.prototype.propertyIsEnumerable.call(t,r[u])&&(n[r[u]]=t[r[u]])}return n}(r,["context","guards","actions","activities","services","delays","state"]),S=f((function(){var t={context:d,guards:h,actions:b,activities:y,services:g,delays:m},e=p.withConfig(t,(function(){return i(i({},p.context),d)}));return n.interpret(e,i({deferEvents:!0},O))}));return a((function(){var t;return v&&(t=S.subscribe(function(t,e,n){if("object"==typeof t)return t;var r=function(){};return{next:t,error:e||r,complete:n||r}}(v))),function(){null==t||t.unsubscribe()}}),[v]),a((function(){return S.start(x?n.State.create(x):void 0),function(){S.stop()}}),[]),a((function(){Object.assign(S.machine.options.actions,b),Object.assign(S.machine.options.guards,h),Object.assign(S.machine.options.activities,y),Object.assign(S.machine.options.services,g),Object.assign(S.machine.options.delays,m)}),[b,h,y,g,m]),function(t){var n=e.useRef([]),r=e.useRef([]);a((function(){var e=t.subscribe((function(t){var e,i;if(t.actions.length){var a=o(s(t.actions.filter((function(t){return"function"==typeof t.exec&&"__effect"in t.exec})),(function(t){return t.exec.__effect===u.Effect})),2),f=a[0],l=a[1];(e=n.current).push.apply(e,c([],o(f.map((function(e){return[e,t]}))))),(i=r.current).push.apply(i,c([],o(l.map((function(e){return[e,t]})))))}}));return function(){e.unsubscribe()}}),[]),a((function(){for(;r.current.length;){var t=o(r.current.shift(),2);l(t[0],t[1])}})),e.useEffect((function(){for(;n.current.length;){var t=o(n.current.shift(),2);l(t[0],t[1])}}))}(S),S}function p(t,e){var n=function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];return function(){return t.apply(void 0,c([],o(e)))}};return Object.defineProperties(n,{name:{value:"effect:"+t.name},__effect:{value:e}}),n}function d(t){return"state"in t}function h(t){return"deferred"in t}var b=function(){};function y(t){return"getSnapshot"in t?t.getSnapshot():d(t)?t.state:void 0}function g(t,n){void 0===n&&(n=y);var r=e.useRef(t),u=e.useRef([]),i=o(e.useState((function(){return n(t)})),2),c=i[0],s=i[1],l=f((function(){return function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];var n=t[0],i=r.current;h(i)&&i.deferred?u.current.push(n):i.send(n)}}));return a((function(){r.current=t,s(n(t));for(var e=t.subscribe({next:function(t){return s(t)},error:b,complete:b});u.current.length>0;){var i=u.current.shift();t.send(i)}return function(){e.unsubscribe()}}),[t]),[c,l]}var m=function(t,e){return t===e},x=function(t){return"state"in(n=t)&&"machine"in n?0!==("status"in(e=t)?e.status:e._status)?e.state:e.machine.initialState:d(t)?t.state:void 0;var e,n};t.asEffect=function(t){return p(t,u.Effect)},t.asLayoutEffect=function(t){return p(t,u.LayoutEffect)},t.useActor=g,t.useInterpret=v,t.useMachine=function(t,r){void 0===r&&(r={});var u=e.useCallback((function(t){var e=void 0===t.changed&&Object.keys(t.children).length;(t.changed||e)&&f(t)}),[]),i=v(t,r,u),c=o(e.useState((function(){var t=i.machine.initialState;return r.state?n.State.create(r.state):t})),2),a=c[0],f=c[1];return[a,i.send,i]},t.useSelector=function(t,n,r,u){void 0===r&&(r=m),void 0===u&&(u=x);var i=o(e.useState((function(){return n(u(t))})),2),c=i[0],a=i[1],f=e.useRef(c);return e.useEffect((function(){var e=function(t){r(f.current,t)||(a(t),f.current=t)},i=n(u(t));e(i);var o=t.subscribe((function(t){var r=n(t);e(r)}));return function(){return o.unsubscribe()}}),[n,r]),c},t.useService=function(t){return[o(g(t),1)[0],t.send]},t.useSpawn=function(t){return f((function(){return r.spawnBehavior(t)}))},Object.defineProperty(t,"__esModule",{value:!0})}));
+    ***************************************************************************** */function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var u=0;for(r=Object.getOwnPropertySymbols(e);u<r.length;u++)t.indexOf(r[u])<0&&Object.prototype.propertyIsEnumerable.call(e,r[u])&&(n[r[u]]=e[r[u]])}return n}function f(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,u,o=n.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(r=o.next()).done;)i.push(r.value)}catch(e){u={error:e}}finally{try{r&&!r.done&&(n=o.return)&&n.call(o)}finally{if(u)throw u.error}}return i}function s(e,t){for(var n=0,r=t.length,u=e.length;n<r;n++,u++)e[u]=t[n];return e}!function(e){e[e.Effect=1]="Effect",e[e.LayoutEffect=2]="LayoutEffect"}(o||(o={}));var l=t.useLayoutEffect;function v(e){var n=t.useRef();return n.current||(n.current={v:e()}),n.current.v}function b(e,t){var n,r,u=f([[],[]],2),o=u[0],i=u[1];try{for(var c=function(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}(e),a=c.next();!a.done;a=c.next()){var s=a.value;t(s)?o.push(s):i.push(s)}}catch(e){n={error:e}}finally{try{a&&!a.done&&(r=c.return)&&r.call(c)}finally{if(n)throw n.error}}return[o,i]}function p(e,t){(0,e.exec)(t.context,t._event.data,{action:e,state:t,_event:t._event})()}function d(e){var n=t.useRef([]),r=t.useRef([]);l((function(){var t=e.subscribe((function(e){var t,u;if(e.actions.length){var i=f(b(e.actions.filter((function(e){return"function"==typeof e.exec&&"__effect"in e.exec})),(function(e){return e.exec.__effect===o.Effect})),2),c=i[0],a=i[1];(t=n.current).push.apply(t,s([],f(c.map((function(t){return[t,e]}))))),(u=r.current).push.apply(u,s([],f(a.map((function(t){return[t,e]})))))}}));return function(){t.unsubscribe()}}),[]),l((function(){for(;r.current.length;){var e=f(r.current.shift(),2);p(e[0],e[1])}})),t.useEffect((function(){for(;n.current.length;){var e=f(n.current.shift(),2);p(e[0],e[1])}}))}function h(e,t,n){if("object"==typeof e)return e;var r=function(){};return{next:e,error:t||r,complete:n||r}}function y(e){for(var t=[],r=1;r<arguments.length;r++)t[r-1]=arguments[r];var u=f(t,2),o=u[0],i=void 0===o?{}:o,s=u[1],b=v((function(){return"function"==typeof e?e():e})),p=i.context,y=i.guards,g=i.actions,O=i.services,j=i.delays,m=i.state,x=a(i,["context","guards","actions","services","delays","state"]),S=i.activities,w=v((function(){var e={context:p,guards:y,actions:g,activities:S,services:O,delays:j},t=b.withConfig(e,(function(){return c(c({},b.context),p)}));return n.interpret(t,c({deferEvents:!0},x))}));return l((function(){var e;return s&&(e=w.subscribe(h(s))),function(){null==e||e.unsubscribe()}}),[s]),l((function(){return w.start(m?n.State.create(m):void 0),function(){w.stop()}}),[]),l((function(){Object.assign(w.machine.options.actions,g),Object.assign(w.machine.options.guards,y),Object.assign(w.machine.options.activities,S),Object.assign(w.machine.options.services,O),Object.assign(w.machine.options.delays,j)}),[g,y,S,O,j]),d(w),w}function g(e,t){var n=function(){for(var t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];return function(){return e.apply(void 0,s([],f(t)))}};return Object.defineProperties(n,{name:{value:"effect:"+e.name},__effect:{value:t}}),n}function O(e){return"state"in e}function j(e){return"deferred"in e}var m=function(){};function x(e){return"getSnapshot"in e?e.getSnapshot():O(e)?e.state:void 0}function S(e,n){void 0===n&&(n=x);var r=t.useRef(e),u=t.useRef([]),o=f(t.useState((function(){return n(e)})),2),i=o[0],c=o[1],a=v((function(){return function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];var n=e[0],o=r.current;j(o)&&o.deferred?u.current.push(n):o.send(n)}}));return l((function(){r.current=e,c(n(e));for(var t=e.subscribe({next:function(e){return c(e)},error:m,complete:m});u.current.length>0;){var o=u.current.shift();e.send(o)}return function(){t.unsubscribe()}}),[e]),[i,a]}function w(e){var t={exports:{}};return e(t,t.exports),t.exports
+/*
+    object-assign
+    (c) Sindre Sorhus
+    @license MIT
+    */}var E=Object.getOwnPropertySymbols,_=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;function P(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}var V=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(e){r[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var n,r,u=P(e),o=1;o<arguments.length;o++){for(var i in n=Object(arguments[o]))_.call(n,i)&&(u[i]=n[i]);if(E){r=E(n);for(var c=0;c<r.length;c++)C.call(n,r[c])&&(u[r[c]]=n[r[c]])}}return u},R={useSubscription:function(e){var t=e.getCurrentValue,n=e.subscribe,r=i.default.useState((function(){return{getCurrentValue:t,subscribe:n,value:t()}}));e=r[0];var u=r[1];return r=e.value,e.getCurrentValue===t&&e.subscribe===n||(r=t(),u({getCurrentValue:t,subscribe:n,value:r})),i.default.useDebugValue(r),i.default.useEffect((function(){function e(){if(!r){var e=t();u((function(r){return r.getCurrentValue!==t||r.subscribe!==n||r.value===e?r:V({},r,{value:e})}))}}var r=!1,o=n(e);return e(),function(){r=!0,o()}}),[t,n]),r}},k=(w((function(e,t){})),w((function(e){e.exports=R})));
+/** @license React vundefined
+     * use-subscription.production.min.js
+     *
+     * Copyright (c) Facebook, Inc. and its affiliates.
+     *
+     * This source code is licensed under the MIT license found in the
+     * LICENSE file in the root directory of this source tree.
+     */var q=function(e,t){return e===t},L=function(e){return"state"in(n=e)&&"machine"in n?0!==("status"in(t=e)?t.status:t._status)?t.state:t.machine.initialState:O(e)?e.state:void 0;var t,n};e.asEffect=function(e){return g(e,o.Effect)},e.asLayoutEffect=function(e){return g(e,o.LayoutEffect)},e.useActor=S,e.useInterpret=y,e.useMachine=function(e){for(var r=[],u=1;u<arguments.length;u++)r[u-1]=arguments[u];var o=f(r,1),i=o[0],c=void 0===i?{}:i,a=t.useCallback((function(e){var t=void 0===e.changed&&Object.keys(e.children).length;(e.changed||t)&&b(e)}),[]),s=y(e,c,a),l=f(t.useState((function(){var e=s.machine.initialState;return c.state?n.State.create(c.state):e})),2),v=l[0],b=l[1];return[v,s.send,s]},e.useSelector=function(e,n,r,u){void 0===r&&(r=q),void 0===u&&(u=L);var o=t.useRef(n),i=t.useMemo((function(){var t,i=u(e),c=n(i);return{getSnapshot:function(){return i},getCurrentValue:function(){return c},setCurrentValue:function(e){c=e,null==t||t()},subscribe:function(n){t=n;var u=e.subscribe((function(e){i=e;var t=o.current(e);r(c,t)||(c=t,n())}));return function(){u.unsubscribe()}}}}),[e]),c=k.useSubscription(i);if(o.current!==n){var a=n(i.getSnapshot());r(c,a)||(c=a)}return l((function(){o.current=n,i.setCurrentValue(c)})),c},e.useService=function(e){return[f(S(e),1)[0],e.send]},e.useSpawn=function(e){return v((function(){return r.spawnBehavior(e)}))},Object.defineProperty(e,"__esModule",{value:!0})}));

package/es/types.d.ts

@@ -1,39 +1,7 @@
 import { ActionMeta, ActionObject, EventObject, State, StateConfig } from 'xstate';
-export declare type Sender<TEvent extends EventObject> = (event: TEvent) => void;
-export interface Subscription {
-    unsubscribe(): void;
-}
-export interface Observer<T> {
-    next?: (value: T) => void;
-    error?: (errorValue: any) => void;
-    complete: () => void;
-}
-export interface Subscribable<T> {
-    subscribe(observer: Observer<T>): Subscription;
-    subscribe(next: (value: T) => void, error?: (error: any) => void, complete?: () => void): Subscription;
-}
 export declare type MaybeLazy<T> = T | (() => T);
-declare type ExcludeType<A> = {
-    [K in Exclude<keyof A, 'type'>]: A[K];
-};
-declare type ExtractExtraParameters<A, T> = A extends {
-    type: T;
-} ? ExcludeType<A> : never;
-declare type ExtractSimple<A> = A extends any ? {} extends ExcludeType<A> ? A : never : never;
-declare type NeverIfEmpty<T> = {} extends T ? never : T;
-export interface PayloadSender<TEvent extends EventObject> {
-    /**
-     * Send an event object or just the event type, if the event has no other payload
-     */
-    (event: TEvent | ExtractSimple<TEvent>['type']): void;
-    /**
-     * Send an event type and its payload
-     */
-    <K extends TEvent['type']>(eventType: K, payload: NeverIfEmpty<ExtractExtraParameters<TEvent, K>>): void;
-}
-export interface ActorRef<TEvent extends EventObject, TEmitted = any> extends Subscribable<TEmitted> {
-    send: Sender<TEvent>;
-}
+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 declare enum ReactEffectType {
     Effect = 1,
     LayoutEffect = 2
@@ -60,5 +28,4 @@ export declare type ActionStateTuple<TContext, TEvent extends EventObject> = [
     ReactActionObject<TContext, TEvent>,
     State<TContext, TEvent>
 ];
-export {};
 //# sourceMappingURL=types.d.ts.map

package/es/useActor.d.ts

@@ -1,5 +1,4 @@
-import { Sender } from './types';
-import { ActorRef, EventObject } from 'xstate';
+import { ActorRef, EventObject, Sender } from 'xstate';
 export declare function isActorWithState<T extends ActorRef<any>>(actorRef: T): actorRef is T & {
     state: any;
 };

package/es/useInterpret.d.ts

@@ -1,8 +1,13 @@
-import { EventObject, StateMachine, State, Interpreter, InterpreterOptions, MachineOptions, Typestate, Observer } from 'xstate';
+import { AreAllImplementationsAssumedToBeProvided, InternalMachineOptions, InterpreterFrom, InterpreterOptions, Observer, State, StateMachine } from 'xstate';
 import { MaybeLazy } from './types';
 import { UseMachineOptions } from './useMachine';
-export declare function useInterpret<TContext, TEvent extends EventObject, TTypestate extends Typestate<TContext> = {
-    value: any;
-    context: TContext;
-}>(getMachine: MaybeLazy<StateMachine<TContext, any, TEvent, TTypestate>>, options?: Partial<InterpreterOptions> & Partial<UseMachineOptions<TContext, TEvent>> & Partial<MachineOptions<TContext, TEvent>>, observerOrListener?: Observer<State<TContext, TEvent, any, TTypestate>> | ((value: State<TContext, TEvent, any, TTypestate>) => void)): Interpreter<TContext, any, TEvent, TTypestate>;
+declare type RestParams<TMachine extends StateMachine<any, any, any, any, any, any>> = AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends false ? [
+    options: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineOptions<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta'], true>,
+    observerOrListener?: Observer<State<TMachine['__TContext'], TMachine['__TEvent'], any, TMachine['__TTypestate'], TMachine['__TResolvedTypesMeta']>> | ((value: State<TMachine['__TContext'], TMachine['__TEvent'], any, TMachine['__TTypestate'], TMachine['__TResolvedTypesMeta']>) => void)
+] : [
+    options?: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineOptions<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta']>,
+    observerOrListener?: Observer<State<TMachine['__TContext'], TMachine['__TEvent'], any, TMachine['__TTypestate'], TMachine['__TResolvedTypesMeta']>> | ((value: State<TMachine['__TContext'], TMachine['__TEvent'], any, TMachine['__TTypestate'], TMachine['__TResolvedTypesMeta']>) => void)
+];
+export declare function useInterpret<TMachine extends StateMachine<any, any, any, any, any, any>>(getMachine: MaybeLazy<TMachine>, ...[options, observerOrListener]: RestParams<TMachine>): InterpreterFrom<TMachine>;
+export {};
 //# sourceMappingURL=useInterpret.d.ts.map

package/es/useInterpret.js

@@ -54,20 +54,26 @@ function toObserver(nextHandler, errorHandler, completionHandler) {
         complete: completionHandler || noop
     };
 }
-export function useInterpret(getMachine, options, observerOrListener) {
-    if (options === void 0) { options = {}; }
+export function useInterpret(getMachine) {
+    var _a = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        _a[_i - 1] = arguments[_i];
+    }
+    var _b = __read(_a, 2), _c = _b[0], options = _c === void 0 ? {} : _c, observerOrListener = _b[1];
     var machine = useConstant(function () {
         return typeof getMachine === 'function' ? getMachine() : getMachine;
     });
     if (process.env.NODE_ENV !== 'production' &&
         typeof getMachine !== 'function') {
-        var _a = __read(useState(machine), 1), initialMachine = _a[0];
-        if (machine !== initialMachine) {
+        var _d = __read(useState(machine), 1), initialMachine = _d[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, guards = options.guards, actions = options.actions, activities = options.activities, services = options.services, delays = options.delays, rehydratedState = options.state, interpreterOptions = __rest(options, ["context", "guards", "actions", "activities", "services", "delays", "state"]);
+    var context = options.context, guards = options.guards, actions = options.actions, services = options.services, delays = options.delays, rehydratedState = options.state, interpreterOptions = __rest(options, ["context", "guards", "actions", "services", "delays", "state"]);
+    // it's not defined in `TypegenMachineOptions` so we can't just unpack this property here freely
+    var activities = options.activities;
     var service = useConstant(function () {
         var machineConfig = {
             context: context,

package/es/useMachine.d.ts

@@ -1,5 +1,5 @@
-import { EventObject, StateMachine, State, Interpreter, InterpreterOptions, MachineOptions, StateConfig, Typestate, ActionFunction } from 'xstate';
-import { MaybeLazy, ReactActionFunction } from './types';
+import { ActionFunction, AreAllImplementationsAssumedToBeProvided, EventObject, InternalMachineOptions, InterpreterFrom, InterpreterOptions, StateConfig, StateFrom, StateMachine } from 'xstate';
+import { MaybeLazy, Prop, ReactActionFunction } from './types';
 export declare function asEffect<TContext, TEvent extends EventObject>(exec: ActionFunction<TContext, TEvent>): ReactActionFunction<TContext, TEvent>;
 export declare function asLayoutEffect<TContext, TEvent extends EventObject>(exec: ActionFunction<TContext, TEvent>): ReactActionFunction<TContext, TEvent>;
 export interface UseMachineOptions<TContext, TEvent extends EventObject> {
@@ -13,12 +13,12 @@ export interface UseMachineOptions<TContext, TEvent extends EventObject> {
      */
     state?: StateConfig<TContext, TEvent>;
 }
-export declare function useMachine<TContext, TEvent extends EventObject, TTypestate extends Typestate<TContext> = {
-    value: any;
-    context: TContext;
-}>(getMachine: MaybeLazy<StateMachine<TContext, any, TEvent, TTypestate>>, options?: Partial<InterpreterOptions> & Partial<UseMachineOptions<TContext, TEvent>> & Partial<MachineOptions<TContext, TEvent>>): [
-    State<TContext, TEvent, any, TTypestate>,
-    Interpreter<TContext, any, TEvent, TTypestate>['send'],
-    Interpreter<TContext, any, TEvent, TTypestate>
+declare type RestParams<TMachine extends StateMachine<any, any, any, any, any, any>> = AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends false ? [
+    options: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineOptions<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta'], true>
+] : [
+    options?: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineOptions<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta']>
 ];
+declare type UseMachineReturn<TMachine extends StateMachine<any, any, any, any, any, any>, TInterpreter = InterpreterFrom<TMachine>> = [StateFrom<TMachine>, Prop<TInterpreter, 'send'>, TInterpreter];
+export declare function useMachine<TMachine extends StateMachine<any, any, any, any, any, any>>(getMachine: MaybeLazy<TMachine>, ...[options]: RestParams<TMachine>): UseMachineReturn<TMachine>;
+export {};
 //# sourceMappingURL=useMachine.d.ts.map

package/es/useMachine.js

@@ -46,26 +46,29 @@ export function asEffect(exec) {
 export function asLayoutEffect(exec) {
     return createReactActionFunction(exec, ReactEffectType.LayoutEffect);
 }
-export function useMachine(getMachine, options) {
-    if (options === void 0) { options = {}; }
+export function useMachine(getMachine) {
+    var _a = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        _a[_i - 1] = arguments[_i];
+    }
+    var _b = __read(_a, 1), _c = _b[0], options = _c === void 0 ? {} : _c;
     var listener = useCallback(function (nextState) {
         // Only change the current state if:
         // - the incoming state is the "live" initial state (since it might have new actors)
         // - OR the incoming state actually changed.
         //
         // The "live" initial state will have .changed === undefined.
-        var initialStateChanged = nextState.changed === undefined &&
-            Object.keys(nextState.children).length;
+        var initialStateChanged = nextState.changed === undefined && Object.keys(nextState.children).length;
         if (nextState.changed || initialStateChanged) {
             setState(nextState);
         }
     }, []);
     var service = useInterpret(getMachine, options, listener);
-    var _a = __read(useState(function () {
+    var _d = __read(useState(function () {
         var initialState = service.machine.initialState;
         return (options.state
             ? State.create(options.state)
             : initialState);
-    }), 2), state = _a[0], setState = _a[1];
+    }), 2), state = _d[0], setState = _d[1];
     return [state, service.send, service];
 }

package/es/useSelector.js

@@ -1,20 +1,6 @@
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-import { useEffect, useRef, useState } from 'react';
+import { useMemo, useRef } from 'react';
+import { useSubscription } from 'use-subscription';
+import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
 import { isActorWithState } from './useActor';
 import { getServiceSnapshot } from './useService';
 function isService(actor) {
@@ -31,22 +17,49 @@ var defaultGetSnapshot = function (a) {
 export function useSelector(actor, selector, compare, getSnapshot) {
     if (compare === void 0) { compare = defaultCompare; }
     if (getSnapshot === void 0) { getSnapshot = defaultGetSnapshot; }
-    var _a = __read(useState(function () { return selector(getSnapshot(actor)); }), 2), selected = _a[0], setSelected = _a[1];
-    var selectedRef = useRef(selected);
-    useEffect(function () {
-        var updateSelectedIfChanged = function (nextSelected) {
-            if (!compare(selectedRef.current, nextSelected)) {
-                setSelected(nextSelected);
-                selectedRef.current = nextSelected;
+    var latestSelectorRef = useRef(selector);
+    var subscription = useMemo(function () {
+        var snapshot = getSnapshot(actor);
+        var current = selector(snapshot);
+        var notifySubscriber;
+        return {
+            getSnapshot: function () { return snapshot; },
+            getCurrentValue: function () { return current; },
+            setCurrentValue: function (newCurrent) {
+                current = newCurrent;
+                notifySubscriber === null || notifySubscriber === void 0 ? void 0 : notifySubscriber();
+            },
+            subscribe: function (callback) {
+                notifySubscriber = callback;
+                var sub = actor.subscribe(function (emitted) {
+                    snapshot = emitted;
+                    var next = latestSelectorRef.current(emitted);
+                    if (!compare(current, next)) {
+                        current = next;
+                        callback();
+                    }
+                });
+                return function () {
+                    sub.unsubscribe();
+                };
             }
         };
-        var initialSelected = selector(getSnapshot(actor));
-        updateSelectedIfChanged(initialSelected);
-        var sub = actor.subscribe(function (emitted) {
-            var nextSelected = selector(emitted);
-            updateSelectedIfChanged(nextSelected);
-        });
-        return function () { return sub.unsubscribe(); };
-    }, [selector, compare]);
-    return selected;
+        // intentionally omit `getSnapshot` and `compare`
+        // - `getSnapshot`: it is only supposed to read the "initial" snapshot of an actor
+        // - `compare`: is really supposed to be idempotent and the same throughout the lifetime of this hook (the same assumption is made in React Redux v7)
+    }, [actor]);
+    var currentSelected = useSubscription(subscription);
+    if (latestSelectorRef.current !== selector) {
+        var selected = selector(subscription.getSnapshot());
+        if (!compare(currentSelected, selected)) {
+            currentSelected = selected;
+        }
+    }
+    useIsomorphicLayoutEffect(function () {
+        latestSelectorRef.current = selector;
+        // required so we don't cause a rerender by setting state (this could create infinite rerendering loop with inline selectors)
+        // at the same time we need to update the value within the subscription so new emits can compare against what has been returned to the user as current value
+        subscription.setCurrentValue(currentSelected);
+    });
+    return currentSelected;
 }

package/es/useService.d.ts

@@ -1,5 +1,4 @@
-import { EventObject, State, Interpreter, Typestate } from 'xstate';
-import { PayloadSender } from './types';
+import { EventObject, Interpreter, PayloadSender, State, TypegenConstraint, TypegenDisabled, Typestate } from 'xstate';
 export declare function getServiceSnapshot<TService extends Interpreter<any, any, any, any>>(service: TService): TService['state'];
 /**
  * @deprecated Use `useActor` instead.
@@ -10,5 +9,8 @@ export declare function getServiceSnapshot<TService extends Interpreter<any, any
 export declare function useService<TContext, TEvent extends EventObject, TTypestate extends Typestate<TContext> = {
     value: any;
     context: TContext;
-}>(service: Interpreter<TContext, any, TEvent, TTypestate>): [State<TContext, TEvent, any, TTypestate>, PayloadSender<TEvent>];
+}, TTypesMeta extends TypegenConstraint = TypegenDisabled>(service: Interpreter<TContext, any, TEvent, TTypestate, TTypesMeta>): [
+    State<TContext, TEvent, any, TTypestate, TTypesMeta>,
+    PayloadSender<TEvent>
+];
 //# sourceMappingURL=useService.d.ts.map

package/lib/types.d.ts

@@ -1,39 +1,7 @@
 import { ActionMeta, ActionObject, EventObject, State, StateConfig } from 'xstate';
-export declare type Sender<TEvent extends EventObject> = (event: TEvent) => void;
-export interface Subscription {
-    unsubscribe(): void;
-}
-export interface Observer<T> {
-    next?: (value: T) => void;
-    error?: (errorValue: any) => void;
-    complete: () => void;
-}
-export interface Subscribable<T> {
-    subscribe(observer: Observer<T>): Subscription;
-    subscribe(next: (value: T) => void, error?: (error: any) => void, complete?: () => void): Subscription;
-}
 export declare type MaybeLazy<T> = T | (() => T);
-declare type ExcludeType<A> = {
-    [K in Exclude<keyof A, 'type'>]: A[K];
-};
-declare type ExtractExtraParameters<A, T> = A extends {
-    type: T;
-} ? ExcludeType<A> : never;
-declare type ExtractSimple<A> = A extends any ? {} extends ExcludeType<A> ? A : never : never;
-declare type NeverIfEmpty<T> = {} extends T ? never : T;
-export interface PayloadSender<TEvent extends EventObject> {
-    /**
-     * Send an event object or just the event type, if the event has no other payload
-     */
-    (event: TEvent | ExtractSimple<TEvent>['type']): void;
-    /**
-     * Send an event type and its payload
-     */
-    <K extends TEvent['type']>(eventType: K, payload: NeverIfEmpty<ExtractExtraParameters<TEvent, K>>): void;
-}
-export interface ActorRef<TEvent extends EventObject, TEmitted = any> extends Subscribable<TEmitted> {
-    send: Sender<TEvent>;
-}
+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 declare enum ReactEffectType {
     Effect = 1,
     LayoutEffect = 2
@@ -60,5 +28,4 @@ export declare type ActionStateTuple<TContext, TEvent extends EventObject> = [
     ReactActionObject<TContext, TEvent>,
     State<TContext, TEvent>
 ];
-export {};
 //# sourceMappingURL=types.d.ts.map

package/lib/useActor.d.ts

@@ -1,5 +1,4 @@
-import { Sender } from './types';
-import { ActorRef, EventObject } from 'xstate';
+import { ActorRef, EventObject, Sender } from 'xstate';
 export declare function isActorWithState<T extends ActorRef<any>>(actorRef: T): actorRef is T & {
     state: any;
 };

package/lib/useInterpret.d.ts

@@ -1,8 +1,13 @@
-import { EventObject, StateMachine, State, Interpreter, InterpreterOptions, MachineOptions, Typestate, Observer } from 'xstate';
+import { AreAllImplementationsAssumedToBeProvided, InternalMachineOptions, InterpreterFrom, InterpreterOptions, Observer, State, StateMachine } from 'xstate';
 import { MaybeLazy } from './types';
 import { UseMachineOptions } from './useMachine';
-export declare function useInterpret<TContext, TEvent extends EventObject, TTypestate extends Typestate<TContext> = {
-    value: any;
-    context: TContext;
-}>(getMachine: MaybeLazy<StateMachine<TContext, any, TEvent, TTypestate>>, options?: Partial<InterpreterOptions> & Partial<UseMachineOptions<TContext, TEvent>> & Partial<MachineOptions<TContext, TEvent>>, observerOrListener?: Observer<State<TContext, TEvent, any, TTypestate>> | ((value: State<TContext, TEvent, any, TTypestate>) => void)): Interpreter<TContext, any, TEvent, TTypestate>;
+declare type RestParams<TMachine extends StateMachine<any, any, any, any, any, any>> = AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends false ? [
+    options: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineOptions<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta'], true>,
+    observerOrListener?: Observer<State<TMachine['__TContext'], TMachine['__TEvent'], any, TMachine['__TTypestate'], TMachine['__TResolvedTypesMeta']>> | ((value: State<TMachine['__TContext'], TMachine['__TEvent'], any, TMachine['__TTypestate'], TMachine['__TResolvedTypesMeta']>) => void)
+] : [
+    options?: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineOptions<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta']>,
+    observerOrListener?: Observer<State<TMachine['__TContext'], TMachine['__TEvent'], any, TMachine['__TTypestate'], TMachine['__TResolvedTypesMeta']>> | ((value: State<TMachine['__TContext'], TMachine['__TEvent'], any, TMachine['__TTypestate'], TMachine['__TResolvedTypesMeta']>) => void)
+];
+export declare function useInterpret<TMachine extends StateMachine<any, any, any, any, any, any>>(getMachine: MaybeLazy<TMachine>, ...[options, observerOrListener]: RestParams<TMachine>): InterpreterFrom<TMachine>;
+export {};
 //# sourceMappingURL=useInterpret.d.ts.map

package/lib/useInterpret.js

@@ -57,20 +57,26 @@ function toObserver(nextHandler, errorHandler, completionHandler) {
         complete: completionHandler || noop
     };
 }
-function useInterpret(getMachine, options, observerOrListener) {
-    if (options === void 0) { options = {}; }
+function useInterpret(getMachine) {
+    var _a = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        _a[_i - 1] = arguments[_i];
+    }
+    var _b = __read(_a, 2), _c = _b[0], options = _c === void 0 ? {} : _c, observerOrListener = _b[1];
     var machine = useConstant_1.default(function () {
         return typeof getMachine === 'function' ? getMachine() : getMachine;
     });
     if (process.env.NODE_ENV !== 'production' &&
         typeof getMachine !== 'function') {
-        var _a = __read(react_1.useState(machine), 1), initialMachine = _a[0];
-        if (machine !== initialMachine) {
+        var _d = __read(react_1.useState(machine), 1), initialMachine = _d[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, guards = options.guards, actions = options.actions, activities = options.activities, services = options.services, delays = options.delays, rehydratedState = options.state, interpreterOptions = __rest(options, ["context", "guards", "actions", "activities", "services", "delays", "state"]);
+    var context = options.context, guards = options.guards, actions = options.actions, services = options.services, delays = options.delays, rehydratedState = options.state, interpreterOptions = __rest(options, ["context", "guards", "actions", "services", "delays", "state"]);
+    // it's not defined in `TypegenMachineOptions` so we can't just unpack this property here freely
+    var activities = options.activities;
     var service = useConstant_1.default(function () {
         var machineConfig = {
             context: context,

package/lib/useMachine.d.ts

@@ -1,5 +1,5 @@
-import { EventObject, StateMachine, State, Interpreter, InterpreterOptions, MachineOptions, StateConfig, Typestate, ActionFunction } from 'xstate';
-import { MaybeLazy, ReactActionFunction } from './types';
+import { ActionFunction, AreAllImplementationsAssumedToBeProvided, EventObject, InternalMachineOptions, InterpreterFrom, InterpreterOptions, StateConfig, StateFrom, StateMachine } from 'xstate';
+import { MaybeLazy, Prop, ReactActionFunction } from './types';
 export declare function asEffect<TContext, TEvent extends EventObject>(exec: ActionFunction<TContext, TEvent>): ReactActionFunction<TContext, TEvent>;
 export declare function asLayoutEffect<TContext, TEvent extends EventObject>(exec: ActionFunction<TContext, TEvent>): ReactActionFunction<TContext, TEvent>;
 export interface UseMachineOptions<TContext, TEvent extends EventObject> {
@@ -13,12 +13,12 @@ export interface UseMachineOptions<TContext, TEvent extends EventObject> {
      */
     state?: StateConfig<TContext, TEvent>;
 }
-export declare function useMachine<TContext, TEvent extends EventObject, TTypestate extends Typestate<TContext> = {
-    value: any;
-    context: TContext;
-}>(getMachine: MaybeLazy<StateMachine<TContext, any, TEvent, TTypestate>>, options?: Partial<InterpreterOptions> & Partial<UseMachineOptions<TContext, TEvent>> & Partial<MachineOptions<TContext, TEvent>>): [
-    State<TContext, TEvent, any, TTypestate>,
-    Interpreter<TContext, any, TEvent, TTypestate>['send'],
-    Interpreter<TContext, any, TEvent, TTypestate>
+declare type RestParams<TMachine extends StateMachine<any, any, any, any, any, any>> = AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends false ? [
+    options: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineOptions<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta'], true>
+] : [
+    options?: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineOptions<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta']>
 ];
+declare type UseMachineReturn<TMachine extends StateMachine<any, any, any, any, any, any>, TInterpreter = InterpreterFrom<TMachine>> = [StateFrom<TMachine>, Prop<TInterpreter, 'send'>, TInterpreter];
+export declare function useMachine<TMachine extends StateMachine<any, any, any, any, any, any>>(getMachine: MaybeLazy<TMachine>, ...[options]: RestParams<TMachine>): UseMachineReturn<TMachine>;
+export {};
 //# sourceMappingURL=useMachine.d.ts.map

package/lib/useMachine.js

@@ -51,27 +51,30 @@ function asLayoutEffect(exec) {
     return createReactActionFunction(exec, types_1.ReactEffectType.LayoutEffect);
 }
 exports.asLayoutEffect = asLayoutEffect;
-function useMachine(getMachine, options) {
-    if (options === void 0) { options = {}; }
+function useMachine(getMachine) {
+    var _a = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        _a[_i - 1] = arguments[_i];
+    }
+    var _b = __read(_a, 1), _c = _b[0], options = _c === void 0 ? {} : _c;
     var listener = react_1.useCallback(function (nextState) {
         // Only change the current state if:
         // - the incoming state is the "live" initial state (since it might have new actors)
         // - OR the incoming state actually changed.
         //
         // The "live" initial state will have .changed === undefined.
-        var initialStateChanged = nextState.changed === undefined &&
-            Object.keys(nextState.children).length;
+        var initialStateChanged = nextState.changed === undefined && Object.keys(nextState.children).length;
         if (nextState.changed || initialStateChanged) {
             setState(nextState);
         }
     }, []);
     var service = useInterpret_1.useInterpret(getMachine, options, listener);
-    var _a = __read(react_1.useState(function () {
+    var _d = __read(react_1.useState(function () {
         var initialState = service.machine.initialState;
         return (options.state
             ? xstate_1.State.create(options.state)
             : initialState);
-    }), 2), state = _a[0], setState = _a[1];
+    }), 2), state = _d[0], setState = _d[1];
     return [state, service.send, service];
 }
 exports.useMachine = useMachine;

package/lib/useSelector.js

@@ -1,23 +1,9 @@
 "use strict";
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSelector = void 0;
 var react_1 = require("react");
+var use_subscription_1 = require("use-subscription");
+var use_isomorphic_layout_effect_1 = require("use-isomorphic-layout-effect");
 var useActor_1 = require("./useActor");
 var useService_1 = require("./useService");
 function isService(actor) {
@@ -34,23 +20,50 @@ var defaultGetSnapshot = function (a) {
 function useSelector(actor, selector, compare, getSnapshot) {
     if (compare === void 0) { compare = defaultCompare; }
     if (getSnapshot === void 0) { getSnapshot = defaultGetSnapshot; }
-    var _a = __read(react_1.useState(function () { return selector(getSnapshot(actor)); }), 2), selected = _a[0], setSelected = _a[1];
-    var selectedRef = react_1.useRef(selected);
-    react_1.useEffect(function () {
-        var updateSelectedIfChanged = function (nextSelected) {
-            if (!compare(selectedRef.current, nextSelected)) {
-                setSelected(nextSelected);
-                selectedRef.current = nextSelected;
+    var latestSelectorRef = react_1.useRef(selector);
+    var subscription = react_1.useMemo(function () {
+        var snapshot = getSnapshot(actor);
+        var current = selector(snapshot);
+        var notifySubscriber;
+        return {
+            getSnapshot: function () { return snapshot; },
+            getCurrentValue: function () { return current; },
+            setCurrentValue: function (newCurrent) {
+                current = newCurrent;
+                notifySubscriber === null || notifySubscriber === void 0 ? void 0 : notifySubscriber();
+            },
+            subscribe: function (callback) {
+                notifySubscriber = callback;
+                var sub = actor.subscribe(function (emitted) {
+                    snapshot = emitted;
+                    var next = latestSelectorRef.current(emitted);
+                    if (!compare(current, next)) {
+                        current = next;
+                        callback();
+                    }
+                });
+                return function () {
+                    sub.unsubscribe();
+                };
             }
         };
-        var initialSelected = selector(getSnapshot(actor));
-        updateSelectedIfChanged(initialSelected);
-        var sub = actor.subscribe(function (emitted) {
-            var nextSelected = selector(emitted);
-            updateSelectedIfChanged(nextSelected);
-        });
-        return function () { return sub.unsubscribe(); };
-    }, [selector, compare]);
-    return selected;
+        // intentionally omit `getSnapshot` and `compare`
+        // - `getSnapshot`: it is only supposed to read the "initial" snapshot of an actor
+        // - `compare`: is really supposed to be idempotent and the same throughout the lifetime of this hook (the same assumption is made in React Redux v7)
+    }, [actor]);
+    var currentSelected = use_subscription_1.useSubscription(subscription);
+    if (latestSelectorRef.current !== selector) {
+        var selected = selector(subscription.getSnapshot());
+        if (!compare(currentSelected, selected)) {
+            currentSelected = selected;
+        }
+    }
+    use_isomorphic_layout_effect_1.default(function () {
+        latestSelectorRef.current = selector;
+        // required so we don't cause a rerender by setting state (this could create infinite rerendering loop with inline selectors)
+        // at the same time we need to update the value within the subscription so new emits can compare against what has been returned to the user as current value
+        subscription.setCurrentValue(currentSelected);
+    });
+    return currentSelected;
 }
 exports.useSelector = useSelector;

package/lib/useService.d.ts

@@ -1,5 +1,4 @@
-import { EventObject, State, Interpreter, Typestate } from 'xstate';
-import { PayloadSender } from './types';
+import { EventObject, Interpreter, PayloadSender, State, TypegenConstraint, TypegenDisabled, Typestate } from 'xstate';
 export declare function getServiceSnapshot<TService extends Interpreter<any, any, any, any>>(service: TService): TService['state'];
 /**
  * @deprecated Use `useActor` instead.
@@ -10,5 +9,8 @@ export declare function getServiceSnapshot<TService extends Interpreter<any, any
 export declare function useService<TContext, TEvent extends EventObject, TTypestate extends Typestate<TContext> = {
     value: any;
     context: TContext;
-}>(service: Interpreter<TContext, any, TEvent, TTypestate>): [State<TContext, TEvent, any, TTypestate>, PayloadSender<TEvent>];
+}, TTypesMeta extends TypegenConstraint = TypegenDisabled>(service: Interpreter<TContext, any, TEvent, TTypestate, TTypesMeta>): [
+    State<TContext, TEvent, any, TTypestate, TTypesMeta>,
+    PayloadSender<TEvent>
+];
 //# sourceMappingURL=useService.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xstate/react",
-  "version": "1.6.1",
+  "version": "2.0.0-pr2674-2021926101023",
   "description": "XState tools for React",
   "keywords": [
     "state",
@@ -18,6 +18,13 @@
   "main": "lib/index.js",
   "module": "es/index.js",
   "types": "lib/index.d.ts",
+  "typesVersions": {
+    "<4.0": {
+      "lib/index.d.ts": [
+        "index.v3.d.ts"
+      ]
+    }
+  },
   "sideEffects": false,
   "directories": {
     "lib": "lib",
@@ -47,7 +54,7 @@
   "peerDependencies": {
     "@xstate/fsm": "^1.0.0",
     "react": "^16.8.0 || ^17.0.0",
-    "xstate": "^4.11.0"
+    "xstate": "^4.27.0-pr2674-2021926101023"
   },
   "peerDependenciesMeta": {
     "@xstate/fsm": {