@xstate/react 2.0.0 → 3.0.1

package/es/useMachine.js

@@ -14,41 +14,12 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import { useCallback, useState } from 'react';
-import { State } from 'xstate';
-import { ReactEffectType } from './types';
-import { useInterpret } from './useInterpret';
-function createReactActionFunction(exec, tag) {
-    var effectExec = function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        // don't execute; just return
-        return function () {
-            return exec.apply(void 0, __spreadArray([], __read(args), false));
-        };
-    };
-    Object.defineProperties(effectExec, {
-        name: { value: "effect:".concat(exec.name) },
-        __effect: { value: tag }
-    });
-    return effectExec;
-}
-export function asEffect(exec) {
-    return createReactActionFunction(exec, ReactEffectType.Effect);
-}
-export function asLayoutEffect(exec) {
-    return createReactActionFunction(exec, ReactEffectType.LayoutEffect);
+import { useCallback, useEffect } from 'react';
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
+import { InterpreterStatus, State } from 'xstate';
+import { useIdleInterpreter } from './useInterpret';
+function identity(a) {
+    return a;
 }
 export function useMachine(getMachine) {
     var _a = [];
@@ -56,23 +27,43 @@ export function useMachine(getMachine) {
         _a[_i - 1] = arguments[_i];
     }
     var _b = __read(_a, 1), _c = _b[0], options = _c === void 0 ? {} : _c;
-    var listener = useCallback(function (nextState) {
+    // 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 = useCallback(function () {
+        if (service.status === InterpreterStatus.NotStarted) {
+            return (options.state
+                ? State.create(options.state)
+                : service.machine.initialState);
+        }
+        return service.state;
+    }, [service]);
+    var isEqual = useCallback(function (prevState, nextState) {
+        if (service.status === InterpreterStatus.NotStarted) {
+            return true;
+        }
         // 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;
-        if (nextState.changed || initialStateChanged) {
-            setState(nextState);
-        }
+        var initialStateChanged = nextState.changed === undefined &&
+            (Object.keys(nextState.children).length > 0 ||
+                typeof prevState.changed === 'boolean');
+        return !(nextState.changed || initialStateChanged);
+    }, [service]);
+    var subscribe = useCallback(function (handleStoreChange) {
+        var unsubscribe = service.subscribe(handleStoreChange).unsubscribe;
+        return unsubscribe;
+    }, [service]);
+    var storeSnapshot = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
+    useEffect(function () {
+        var rehydratedState = options.state;
+        service.start(rehydratedState ? State.create(rehydratedState) : undefined);
+        return function () {
+            service.stop();
+            service.status = InterpreterStatus.NotStarted;
+        };
     }, []);
-    var service = useInterpret(getMachine, options, listener);
-    var _d = __read(useState(function () {
-        var initialState = service.machine.initialState;
-        return (options.state
-            ? State.create(options.state)
-            : initialState);
-    }), 2), state = _d[0], setState = _d[1];
-    return [state, service.send, service];
+    return [storeSnapshot, service.send, service];
 }

package/es/useSelector.js

@@ -1,70 +1,36 @@
-import { useMemo, useRef } from 'react';
-import { useSubscription } from 'use-subscription';
-import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
+import { useCallback, useRef } from 'react';
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 import { isActorWithState } from './useActor';
 import { getServiceSnapshot } from './utils';
 function isService(actor) {
     return 'state' in actor && 'machine' in actor;
 }
 var defaultCompare = function (a, b) { return a === b; };
-var defaultGetSnapshot = function (a) {
-    return isService(a)
-        ? getServiceSnapshot(a)
-        : isActorWithState(a)
-            ? a.state
-            : undefined;
+var defaultGetSnapshot = function (a, initialStateCacheRef) {
+    if (isService(a)) {
+        // A status of 0 = interpreter not started
+        if (a.status === 0 && initialStateCacheRef.current) {
+            return initialStateCacheRef.current;
+        }
+        var snapshot = getServiceSnapshot(a);
+        initialStateCacheRef.current = a.status === 0 ? snapshot : null;
+        return snapshot;
+    }
+    return isActorWithState(a) ? a.state : undefined;
 };
 export function useSelector(actor, selector, compare, getSnapshot) {
     if (compare === void 0) { compare = defaultCompare; }
-    if (getSnapshot === void 0) { getSnapshot = defaultGetSnapshot; }
-    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();
-                };
-            }
-        };
-        // 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)
+    var initialStateCacheRef = useRef(null);
+    var subscribe = useCallback(function (handleStoreChange) {
+        var unsubscribe = actor.subscribe(handleStoreChange).unsubscribe;
+        return unsubscribe;
     }, [actor]);
-    var currentSelected = useSubscription(subscription);
-    var currentChanged = false;
-    if (latestSelectorRef.current !== selector) {
-        var selected = selector(subscription.getSnapshot());
-        if (!compare(currentSelected, selected)) {
-            currentChanged = true;
-            currentSelected = selected;
-        }
-    }
-    useIsomorphicLayoutEffect(function () {
-        latestSelectorRef.current = selector;
-        // this condition should not be required, but setState bailouts are currently buggy: https://github.com/facebook/react/issues/22654
-        if (currentChanged) {
-            // 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);
+    var boundGetSnapshot = useCallback(function () {
+        if (getSnapshot) {
+            return getSnapshot(actor);
         }
-    });
-    return currentSelected;
+        return defaultGetSnapshot(actor, initialStateCacheRef);
+    }, [actor, getSnapshot]);
+    var selectedSnapshot = useSyncExternalStoreWithSelector(subscribe, boundGetSnapshot, boundGetSnapshot, selector, compare);
+    return selectedSnapshot;
 }

package/es/useSpawn.js

@@ -1,4 +1,4 @@
-import { spawnBehavior } from 'xstate/lib/behaviors';
+import { spawnBehavior } from 'xstate';
 import useConstant from './useConstant';
 /**
  * React hook that spawns an `ActorRef` with the specified `behavior`.

package/es/utils.d.ts

@@ -1,4 +1,5 @@
 import { Interpreter } from 'xstate';
 export declare function partition<T, A extends T, B extends T>(items: T[], predicate: (item: T) => item is A): [A[], B[]];
 export declare function getServiceSnapshot<TService extends Interpreter<any, any, any, any>>(service: TService): TService['state'];
+export declare function shallowEqual(objA: any, objB: any): boolean;
 //# sourceMappingURL=utils.d.ts.map

package/es/utils.js

@@ -51,3 +51,33 @@ export function partition(items, predicate) {
 export function getServiceSnapshot(service) {
     return service.status !== 0 ? service.state : service.machine.initialState;
 }
+// From https://github.com/reduxjs/react-redux/blob/master/src/utils/shallowEqual.ts
+function is(x, y) {
+    if (x === y) {
+        return x !== 0 || y !== 0 || 1 / x === 1 / y;
+    }
+    else {
+        return x !== x && y !== y;
+    }
+}
+export function shallowEqual(objA, objB) {
+    if (is(objA, objB))
+        return true;
+    if (typeof objA !== 'object' ||
+        objA === null ||
+        typeof objB !== 'object' ||
+        objB === null) {
+        return false;
+    }
+    var keysA = Object.keys(objA);
+    var keysB = Object.keys(objB);
+    if (keysA.length !== keysB.length)
+        return false;
+    for (var i = 0; i < keysA.length; i++) {
+        if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) ||
+            !is(objA[keysA[i]], objB[keysA[i]])) {
+            return false;
+        }
+    }
+    return true;
+}

package/lib/fsm.d.ts

@@ -1,20 +1,4 @@
-import { StateMachine, EventObject, Typestate } from '@xstate/fsm';
-export declare function useMachine<TContext extends object, TEvent extends EventObject = EventObject, TState extends Typestate<TContext> = {
-    value: any;
-    context: TContext;
-}>(stateMachine: StateMachine.Machine<TContext, TEvent, TState>, options?: {
-    actions?: StateMachine.ActionMap<TContext, TEvent>;
-}): [
-    StateMachine.State<TContext, TEvent, TState>,
-    StateMachine.Service<TContext, TEvent, TState>['send'],
-    StateMachine.Service<TContext, TEvent, TState>
-];
-export declare function useService<TContext extends object, TEvent extends EventObject = EventObject, TState extends Typestate<TContext> = {
-    value: any;
-    context: TContext;
-}>(service: StateMachine.Service<TContext, TEvent, TState>): [
-    StateMachine.State<TContext, TEvent, TState>,
-    StateMachine.Service<TContext, TEvent, TState>['send'],
-    StateMachine.Service<TContext, TEvent, TState>
-];
+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];
 //# sourceMappingURL=fsm.d.ts.map

package/lib/fsm.js

@@ -17,10 +17,14 @@ var __read = (this && this.__read) || function (o, n) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useService = exports.useMachine = void 0;
-var react_1 = require("react");
 var fsm_1 = require("@xstate/fsm");
-var use_subscription_1 = require("use-subscription");
+var react_1 = require("react");
+var use_isomorphic_layout_effect_1 = require("use-isomorphic-layout-effect");
+var with_selector_1 = require("use-sync-external-store/shim/with-selector");
 var useConstant_1 = require("./useConstant");
+function identity(a) {
+    return a;
+}
 var getServiceState = function (service) {
     var currentValue;
     service
@@ -31,6 +35,7 @@ var getServiceState = function (service) {
     return currentValue;
 };
 function useMachine(stateMachine, options) {
+    var persistedStateRef = (0, react_1.useRef)();
     if (process.env.NODE_ENV !== 'production') {
         var _a = __read((0, react_1.useState)(stateMachine), 1), initialMachine = _a[0];
         if (stateMachine !== initialMachine) {
@@ -38,41 +43,45 @@ function useMachine(stateMachine, options) {
                 'Please make sure that you pass the same Machine as argument each time.');
         }
     }
-    var service = (0, useConstant_1.default)(function () {
-        return (0, fsm_1.interpret)((0, fsm_1.createMachine)(stateMachine.config, options ? options : stateMachine._options)).start();
-    });
-    var _b = __read((0, react_1.useState)(function () { return getServiceState(service); }), 2), state = _b[0], setState = _b[1];
-    (0, react_1.useEffect)(function () {
+    var _b = __read((0, useConstant_1.default)(function () {
+        var queue = [];
+        var service = (0, fsm_1.interpret)((0, fsm_1.createMachine)(stateMachine.config, options ? options : stateMachine._options));
+        var send = service.send;
+        service.send = function (event) {
+            if (service.status === fsm_1.InterpreterStatus.NotStarted) {
+                queue.push(event);
+                return;
+            }
+            send(event);
+            persistedStateRef.current = service.state;
+        };
+        return [service, queue];
+    }), 2), service = _b[0], queue = _b[1];
+    (0, use_isomorphic_layout_effect_1.default)(function () {
         if (options) {
             service._machine._options = options;
         }
     });
+    var useServiceResult = useService(service);
     (0, react_1.useEffect)(function () {
-        service.subscribe(setState);
+        service.start(persistedStateRef.current);
+        queue.forEach(service.send);
+        persistedStateRef.current = service.state;
         return function () {
             service.stop();
         };
     }, []);
-    return [state, service.send, service];
+    return useServiceResult;
 }
 exports.useMachine = useMachine;
+var isEqual = function (_prevState, nextState) { return nextState.changed === false; };
 function useService(service) {
-    var subscription = (0, react_1.useMemo)(function () {
-        var currentState = getServiceState(service);
-        return {
-            getCurrentValue: function () { return currentState; },
-            subscribe: function (callback) {
-                var unsubscribe = service.subscribe(function (state) {
-                    if (state.changed !== false) {
-                        currentState = state;
-                        callback();
-                    }
-                }).unsubscribe;
-                return unsubscribe;
-            }
-        };
+    var getSnapshot = (0, react_1.useCallback)(function () { return getServiceState(service); }, [service]);
+    var subscribe = (0, react_1.useCallback)(function (handleStoreChange) {
+        var unsubscribe = service.subscribe(handleStoreChange).unsubscribe;
+        return unsubscribe;
     }, [service]);
-    var state = (0, use_subscription_1.useSubscription)(subscription);
-    return [state, service.send, service];
+    var storeSnapshot = (0, with_selector_1.useSyncExternalStoreWithSelector)(subscribe, getSnapshot, getSnapshot, identity, isEqual);
+    return [storeSnapshot, service.send, service];
 }
 exports.useService = useService;

package/lib/index.d.ts

@@ -1,6 +1,7 @@
-export { useMachine, asEffect, asLayoutEffect } from './useMachine';
+export { useMachine } from './useMachine';
 export { useActor } from './useActor';
 export { useInterpret } from './useInterpret';
 export { useSelector } from './useSelector';
 export { useSpawn } from './useSpawn';
+export { shallowEqual } from './utils';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.js

@@ -1,10 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSpawn = exports.useSelector = exports.useInterpret = exports.useActor = exports.asLayoutEffect = exports.asEffect = exports.useMachine = void 0;
+exports.shallowEqual = exports.useSpawn = exports.useSelector = exports.useInterpret = exports.useActor = exports.useMachine = void 0;
 var useMachine_1 = require("./useMachine");
 Object.defineProperty(exports, "useMachine", { enumerable: true, get: function () { return useMachine_1.useMachine; } });
-Object.defineProperty(exports, "asEffect", { enumerable: true, get: function () { return useMachine_1.asEffect; } });
-Object.defineProperty(exports, "asLayoutEffect", { enumerable: true, get: function () { return useMachine_1.asLayoutEffect; } });
 var useActor_1 = require("./useActor");
 Object.defineProperty(exports, "useActor", { enumerable: true, get: function () { return useActor_1.useActor; } });
 var useInterpret_1 = require("./useInterpret");
@@ -13,3 +11,5 @@ var useSelector_1 = require("./useSelector");
 Object.defineProperty(exports, "useSelector", { enumerable: true, get: function () { return useSelector_1.useSelector; } });
 var useSpawn_1 = require("./useSpawn");
 Object.defineProperty(exports, "useSpawn", { enumerable: true, get: function () { return useSpawn_1.useSpawn; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "shallowEqual", { enumerable: true, get: function () { return utils_1.shallowEqual; } });

package/lib/types.d.ts

@@ -1,18 +1,7 @@
-import { ActionMeta, ActionObject, EventObject, State, StateConfig } from 'xstate';
+import { EventObject, 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 declare enum ReactEffectType {
-    Effect = 1,
-    LayoutEffect = 2
-}
-export interface ReactActionFunction<TContext, TEvent extends EventObject> {
-    (context: TContext, event: TEvent, meta: ActionMeta<TContext, TEvent>): () => void;
-    __effect: ReactEffectType;
-}
-export interface ReactActionObject<TContext, TEvent extends EventObject> extends ActionObject<TContext, TEvent> {
-    exec: ReactActionFunction<TContext, TEvent>;
-}
 export interface UseMachineOptions<TContext, TEvent extends EventObject> {
     /**
      * If provided, will be merged with machine's `context`.
@@ -24,8 +13,4 @@ export interface UseMachineOptions<TContext, TEvent extends EventObject> {
      */
     state?: StateConfig<TContext, TEvent>;
 }
-export declare type ActionStateTuple<TContext, TEvent extends EventObject> = [
-    ReactActionObject<TContext, TEvent>,
-    State<TContext, TEvent>
-];
 //# sourceMappingURL=types.d.ts.map

package/lib/types.js

@@ -1,8 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReactEffectType = void 0;
-var ReactEffectType;
-(function (ReactEffectType) {
-    ReactEffectType[ReactEffectType["Effect"] = 1] = "Effect";
-    ReactEffectType[ReactEffectType["LayoutEffect"] = 2] = "LayoutEffect";
-})(ReactEffectType = exports.ReactEffectType || (exports.ReactEffectType = {}));

package/lib/useActor.js

@@ -1,25 +1,10 @@
 "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.useActor = exports.isActorWithState = void 0;
 var react_1 = require("react");
 var use_isomorphic_layout_effect_1 = require("use-isomorphic-layout-effect");
 var useConstant_1 = require("./useConstant");
+var shim_1 = require("use-sync-external-store/shim");
 function isActorWithState(actorRef) {
     return 'state' in actorRef;
 }
@@ -27,9 +12,6 @@ exports.isActorWithState = isActorWithState;
 function isDeferredActor(actorRef) {
     return 'deferred' in actorRef;
 }
-var noop = function () {
-    /* ... */
-};
 function defaultGetSnapshot(actorRef) {
     return 'getSnapshot' in actorRef
         ? actorRef.getSnapshot()
@@ -41,7 +23,15 @@ function useActor(actorRef, getSnapshot) {
     if (getSnapshot === void 0) { getSnapshot = defaultGetSnapshot; }
     var actorRefRef = (0, react_1.useRef)(actorRef);
     var deferredEventsRef = (0, react_1.useRef)([]);
-    var _a = __read((0, react_1.useState)(function () { return getSnapshot(actorRef); }), 2), current = _a[0], setCurrent = _a[1];
+    var subscribe = (0, react_1.useCallback)(function (handleStoreChange) {
+        var unsubscribe = actorRef.subscribe(handleStoreChange).unsubscribe;
+        return unsubscribe;
+    }, [actorRef]);
+    var boundGetSnapshot = (0, react_1.useCallback)(function () { return getSnapshot(actorRef); }, [
+        actorRef,
+        getSnapshot
+    ]);
+    var storeSnapshot = (0, shim_1.useSyncExternalStore)(subscribe, boundGetSnapshot, boundGetSnapshot);
     var send = (0, useConstant_1.default)(function () { return function () {
         var args = [];
         for (var _i = 0; _i < arguments.length; _i++) {
@@ -64,21 +54,12 @@ function useActor(actorRef, getSnapshot) {
     }; });
     (0, use_isomorphic_layout_effect_1.default)(function () {
         actorRefRef.current = actorRef;
-        setCurrent(getSnapshot(actorRef));
-        var subscription = actorRef.subscribe({
-            next: function (emitted) { return setCurrent(emitted); },
-            error: noop,
-            complete: noop
-        });
         // Dequeue deferred events from the previous deferred actorRef
         while (deferredEventsRef.current.length > 0) {
             var deferredEvent = deferredEventsRef.current.shift();
             actorRef.send(deferredEvent);
         }
-        return function () {
-            subscription.unsubscribe();
-        };
     }, [actorRef]);
-    return [current, send];
+    return [storeSnapshot, send];
 }
 exports.useActor = useActor;

package/lib/useInterpret.d.ts

@@ -1,13 +1,14 @@
-import { AreAllImplementationsAssumedToBeProvided, InternalMachineOptions, InterpreterFrom, InterpreterOptions, Observer, State, StateMachine } from 'xstate';
+import { AnyInterpreter, AnyStateMachine, AreAllImplementationsAssumedToBeProvided, InternalMachineOptions, InterpreterFrom, InterpreterOptions, MachineOptions, Observer, StateFrom } from 'xstate';
 import { MaybeLazy } from './types';
 import { UseMachineOptions } from './useMachine';
-declare type RestParams<TMachine extends StateMachine<any, any, any, any, any, any, any>> = AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends false ? [
+export declare function useIdleInterpreter(getMachine: MaybeLazy<AnyStateMachine>, options: Partial<InterpreterOptions> & Partial<UseMachineOptions<unknown, never>> & Partial<MachineOptions<unknown, never>>): AnyInterpreter;
+declare type RestParams<TMachine extends AnyStateMachine> = 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)
+    observerOrListener?: Observer<StateFrom<TMachine>> | ((value: StateFrom<TMachine>) => 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)
+    observerOrListener?: Observer<StateFrom<TMachine>> | ((value: StateFrom<TMachine>) => void)
 ];
-export declare function useInterpret<TMachine extends StateMachine<any, any, any, any, any, any, any>>(getMachine: MaybeLazy<TMachine>, ...[options, observerOrListener]: RestParams<TMachine>): InterpreterFrom<TMachine>;
+export declare function useInterpret<TMachine extends AnyStateMachine>(getMachine: MaybeLazy<TMachine>, ...[options, observerOrListener]: RestParams<TMachine>): InterpreterFrom<TMachine>;
 export {};
 //# sourceMappingURL=useInterpret.d.ts.map

package/lib/useInterpret.js

@@ -38,45 +38,24 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useInterpret = void 0;
+exports.useInterpret = exports.useIdleInterpreter = void 0;
 var react_1 = require("react");
 var use_isomorphic_layout_effect_1 = require("use-isomorphic-layout-effect");
 var xstate_1 = require("xstate");
 var useConstant_1 = require("./useConstant");
-var useReactEffectActions_1 = require("./useReactEffectActions");
-// copied from core/src/utils.ts
-// it avoids a breaking change between this package and XState which is its peer dep
-function toObserver(nextHandler, errorHandler, completionHandler) {
-    if (typeof nextHandler === 'object') {
-        return nextHandler;
-    }
-    var noop = function () { return void 0; };
-    return {
-        next: nextHandler,
-        error: errorHandler || noop,
-        complete: completionHandler || noop
-    };
-}
-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];
+function useIdleInterpreter(getMachine, options) {
     var machine = (0, useConstant_1.default)(function () {
         return typeof getMachine === 'function' ? getMachine() : getMachine;
     });
     if (process.env.NODE_ENV !== 'production' &&
         typeof getMachine !== 'function') {
-        var _d = __read((0, react_1.useState)(machine), 1), initialMachine = _d[0];
+        var _a = __read((0, react_1.useState)(machine), 1), initialMachine = _a[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, 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 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 service = (0, useConstant_1.default)(function () {
         var machineConfig = {
             context: context,
@@ -87,23 +66,8 @@ function useInterpret(getMachine) {
             delays: delays
         };
         var machineWithConfig = machine.withConfig(machineConfig, function () { return (__assign(__assign({}, machine.context), context)); });
-        return (0, xstate_1.interpret)(machineWithConfig, __assign({ deferEvents: true }, interpreterOptions));
+        return (0, xstate_1.interpret)(machineWithConfig, interpreterOptions);
     });
-    (0, use_isomorphic_layout_effect_1.default)(function () {
-        var sub;
-        if (observerOrListener) {
-            sub = service.subscribe(toObserver(observerOrListener));
-        }
-        return function () {
-            sub === null || sub === void 0 ? void 0 : sub.unsubscribe();
-        };
-    }, [observerOrListener]);
-    (0, use_isomorphic_layout_effect_1.default)(function () {
-        service.start(rehydratedState ? xstate_1.State.create(rehydratedState) : undefined);
-        return function () {
-            service.stop();
-        };
-    }, []);
     // 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.
@@ -114,7 +78,33 @@ function useInterpret(getMachine) {
         Object.assign(service.machine.options.services, services);
         Object.assign(service.machine.options.delays, delays);
     }, [actions, guards, activities, services, delays]);
-    (0, useReactEffectActions_1.useReactEffectActions)(service);
+    return service;
+}
+exports.useIdleInterpreter = useIdleInterpreter;
+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 service = useIdleInterpreter(getMachine, options);
+    (0, react_1.useEffect)(function () {
+        if (!observerOrListener) {
+            return;
+        }
+        var sub = service.subscribe((0, xstate_1.toObserver)(observerOrListener));
+        return function () {
+            sub.unsubscribe();
+        };
+    }, [observerOrListener]);
+    (0, react_1.useEffect)(function () {
+        var rehydratedState = options.state;
+        service.start(rehydratedState ? xstate_1.State.create(rehydratedState) : undefined);
+        return function () {
+            service.stop();
+            service.status = xstate_1.InterpreterStatus.NotStarted;
+        };
+    }, []);
     return service;
 }
 exports.useInterpret = useInterpret;