@xstate/react 2.0.0 → 3.0.1

package/lib/useMachine.d.ts

@@ -1,7 +1,5 @@
-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>;
+import { AnyStateMachine, AreAllImplementationsAssumedToBeProvided, EventObject, InternalMachineOptions, InterpreterFrom, InterpreterOptions, StateConfig, StateFrom } from 'xstate';
+import { MaybeLazy, Prop } from './types';
 export interface UseMachineOptions<TContext, TEvent extends EventObject> {
     /**
      * If provided, will be merged with machine's `context`.
@@ -13,12 +11,12 @@ export interface UseMachineOptions<TContext, TEvent extends EventObject> {
      */
     state?: StateConfig<TContext, TEvent>;
 }
-declare type RestParams<TMachine extends StateMachine<any, any, any, any, any, any, any>> = AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends false ? [
+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>
 ] : [
     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, any>, TInterpreter = InterpreterFrom<TMachine>> = [StateFrom<TMachine>, Prop<TInterpreter, 'send'>, TInterpreter];
-export declare function useMachine<TMachine extends StateMachine<any, any, any, any, any, any, any>>(getMachine: MaybeLazy<TMachine>, ...[options]: RestParams<TMachine>): UseMachineReturn<TMachine>;
+declare type UseMachineReturn<TMachine extends AnyStateMachine, TInterpreter = InterpreterFrom<TMachine>> = [StateFrom<TMachine>, Prop<TInterpreter, 'send'>, TInterpreter];
+export declare function useMachine<TMachine extends AnyStateMachine>(getMachine: MaybeLazy<TMachine>, ...[options]: RestParams<TMachine>): UseMachineReturn<TMachine>;
 export {};
 //# sourceMappingURL=useMachine.d.ts.map

package/lib/useMachine.js

@@ -15,70 +15,59 @@ 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));
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMachine = exports.asLayoutEffect = exports.asEffect = void 0;
+exports.useMachine = void 0;
 var react_1 = require("react");
+var with_selector_1 = require("use-sync-external-store/shim/with-selector");
 var xstate_1 = require("xstate");
-var types_1 = require("./types");
 var useInterpret_1 = require("./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;
-}
-function asEffect(exec) {
-    return createReactActionFunction(exec, types_1.ReactEffectType.Effect);
+function identity(a) {
+    return a;
 }
-exports.asEffect = asEffect;
-function asLayoutEffect(exec) {
-    return createReactActionFunction(exec, types_1.ReactEffectType.LayoutEffect);
-}
-exports.asLayoutEffect = asLayoutEffect;
 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 = (0, react_1.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 = (0, useInterpret_1.useIdleInterpreter)(getMachine, options);
+    var getSnapshot = (0, react_1.useCallback)(function () {
+        if (service.status === xstate_1.InterpreterStatus.NotStarted) {
+            return (options.state
+                ? xstate_1.State.create(options.state)
+                : service.machine.initialState);
+        }
+        return service.state;
+    }, [service]);
+    var isEqual = (0, react_1.useCallback)(function (prevState, nextState) {
+        if (service.status === xstate_1.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 = (0, react_1.useCallback)(function (handleStoreChange) {
+        var unsubscribe = service.subscribe(handleStoreChange).unsubscribe;
+        return unsubscribe;
+    }, [service]);
+    var storeSnapshot = (0, with_selector_1.useSyncExternalStoreWithSelector)(subscribe, getSnapshot, getSnapshot, identity, isEqual);
+    (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;
+        };
     }, []);
-    var service = (0, useInterpret_1.useInterpret)(getMachine, options, listener);
-    var _d = __read((0, react_1.useState)(function () {
-        var initialState = service.machine.initialState;
-        return (options.state
-            ? xstate_1.State.create(options.state)
-            : initialState);
-    }), 2), state = _d[0], setState = _d[1];
-    return [state, service.send, service];
+    return [storeSnapshot, service.send, service];
 }
 exports.useMachine = useMachine;

package/lib/useSelector.js

@@ -2,73 +2,39 @@
 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 with_selector_1 = require("use-sync-external-store/shim/with-selector");
 var useActor_1 = require("./useActor");
 var utils_1 = require("./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)
-        ? (0, utils_1.getServiceSnapshot)(a)
-        : (0, useActor_1.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 = (0, utils_1.getServiceSnapshot)(a);
+        initialStateCacheRef.current = a.status === 0 ? snapshot : null;
+        return snapshot;
+    }
+    return (0, useActor_1.isActorWithState)(a) ? a.state : undefined;
 };
 function useSelector(actor, selector, compare, getSnapshot) {
     if (compare === void 0) { compare = defaultCompare; }
-    if (getSnapshot === void 0) { getSnapshot = defaultGetSnapshot; }
-    var latestSelectorRef = (0, react_1.useRef)(selector);
-    var subscription = (0, 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();
-                };
-            }
-        };
-        // 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 = (0, react_1.useRef)(null);
+    var subscribe = (0, react_1.useCallback)(function (handleStoreChange) {
+        var unsubscribe = actor.subscribe(handleStoreChange).unsubscribe;
+        return unsubscribe;
     }, [actor]);
-    var currentSelected = (0, use_subscription_1.useSubscription)(subscription);
-    var currentChanged = false;
-    if (latestSelectorRef.current !== selector) {
-        var selected = selector(subscription.getSnapshot());
-        if (!compare(currentSelected, selected)) {
-            currentChanged = true;
-            currentSelected = selected;
-        }
-    }
-    (0, use_isomorphic_layout_effect_1.default)(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 = (0, react_1.useCallback)(function () {
+        if (getSnapshot) {
+            return getSnapshot(actor);
         }
-    });
-    return currentSelected;
+        return defaultGetSnapshot(actor, initialStateCacheRef);
+    }, [actor, getSnapshot]);
+    var selectedSnapshot = (0, with_selector_1.useSyncExternalStoreWithSelector)(subscribe, boundGetSnapshot, boundGetSnapshot, selector, compare);
+    return selectedSnapshot;
 }
 exports.useSelector = useSelector;

package/lib/useSpawn.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSpawn = void 0;
-var behaviors_1 = require("xstate/lib/behaviors");
+var xstate_1 = require("xstate");
 var useConstant_1 = require("./useConstant");
 /**
  * React hook that spawns an `ActorRef` with the specified `behavior`.
@@ -12,7 +12,7 @@ var useConstant_1 = require("./useConstant");
  */
 function useSpawn(behavior) {
     var actorRef = (0, useConstant_1.default)(function () {
-        return (0, behaviors_1.spawnBehavior)(behavior);
+        return (0, xstate_1.spawnBehavior)(behavior);
     });
     return actorRef;
 }

package/lib/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/lib/utils.js

@@ -27,7 +27,7 @@ var __values = (this && this.__values) || function(o) {
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getServiceSnapshot = exports.partition = void 0;
+exports.shallowEqual = exports.getServiceSnapshot = exports.partition = void 0;
 function partition(items, predicate) {
     var e_1, _a;
     var _b = __read([[], []], 2), truthy = _b[0], falsy = _b[1];
@@ -56,3 +56,34 @@ function getServiceSnapshot(service) {
     return service.status !== 0 ? service.state : service.machine.initialState;
 }
 exports.getServiceSnapshot = getServiceSnapshot;
+// 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;
+    }
+}
+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;
+}
+exports.shallowEqual = shallowEqual;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xstate/react",
-  "version": "2.0.0",
+  "version": "3.0.1",
   "description": "XState tools for React",
   "keywords": [
     "state",
@@ -52,9 +52,9 @@
     "url": "https://github.com/statelyai/xstate/issues"
   },
   "peerDependencies": {
-    "@xstate/fsm": "^1.6.4",
-    "react": "^16.8.0 || ^17.0.0",
-    "xstate": "^4.29.0"
+    "@xstate/fsm": "^2.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "xstate": "^4.33.0"
   },
   "peerDependenciesMeta": {
     "@xstate/fsm": {
@@ -66,23 +66,24 @@
   },
   "dependencies": {
     "use-isomorphic-layout-effect": "^1.0.0",
-    "use-subscription": "^1.3.0"
+    "use-sync-external-store": "^1.0.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-node-resolve": "^11.0.1",
-    "@testing-library/react": "^8.0.9",
+    "@testing-library/react": "^13.0.0",
     "@types/jsdom": "^12.2.3",
-    "@types/react": "^16.9.11",
-    "@types/react-dom": "^16.9.4",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
+    "@types/use-sync-external-store": "^0.0.3",
     "@xstate/fsm": "*",
     "jest": "^26.6.3",
     "jsdom": "^14.0.0",
     "jsdom-global": "^3.0.2",
     "lerna-alias": "3.0.3-0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "rollup": "^2.35.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "rollup": "^2.69.0",
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-terser": "^5.1.2",
     "rollup-plugin-typescript2": "^0.30.0",