@xstate/react 2.0.1 → 3.0.0

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,8 +2,7 @@
 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) {
@@ -20,55 +19,15 @@ var defaultGetSnapshot = function (a) {
 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 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);
-        }
-    });
-    return currentSelected;
+    var boundGetSnapshot = (0, react_1.useCallback)(function () { return getSnapshot(actor); }, [
+        actor,
+        getSnapshot
+    ]);
+    var selectedSnapshot = (0, with_selector_1.useSyncExternalStoreWithSelector)(subscribe, boundGetSnapshot, boundGetSnapshot, selector, compare);
+    return selectedSnapshot;
 }
 exports.useSelector = useSelector;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xstate/react",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "description": "XState tools for React",
   "keywords": [
     "state",
@@ -52,9 +52,9 @@
     "url": "https://github.com/statelyai/xstate/issues"
   },
   "peerDependencies": {
-    "@xstate/fsm": "^1.6.5",
-    "react": "^16.8.0 || ^17.0.0",
-    "xstate": "^4.30.3"
+    "@xstate/fsm": "^2.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "xstate": "^4.31.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",

package/es/useReactEffectActions.d.ts

@@ -1,3 +0,0 @@
-import { EventObject, Interpreter } from 'xstate';
-export declare function useReactEffectActions<TContext, TEvent extends EventObject>(service: Interpreter<TContext, any, TEvent, any>): void;
-//# sourceMappingURL=useReactEffectActions.d.ts.map

package/es/useReactEffectActions.js

@@ -1,76 +0,0 @@
-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;
-};
-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 { useEffect, useRef } from 'react';
-import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
-import { ReactEffectType } from './types';
-import { partition } from './utils';
-function executeEffect(action, state) {
-    var exec = action.exec;
-    var originalExec = exec(state.context, state._event.data, {
-        action: action,
-        state: state,
-        _event: state._event
-    });
-    originalExec();
-}
-export function useReactEffectActions(service) {
-    var effectActionsRef = useRef([]);
-    var layoutEffectActionsRef = useRef([]);
-    useIsomorphicLayoutEffect(function () {
-        var sub = service.subscribe(function (currentState) {
-            var _a, _b;
-            if (currentState.actions.length) {
-                var reactEffectActions = currentState.actions.filter(function (action) {
-                    return (typeof action.exec === 'function' &&
-                        '__effect' in action.exec);
-                });
-                var _c = __read(partition(reactEffectActions, function (action) {
-                    return action.exec.__effect === ReactEffectType.Effect;
-                }), 2), effectActions = _c[0], layoutEffectActions = _c[1];
-                (_a = effectActionsRef.current).push.apply(_a, __spreadArray([], __read(effectActions.map(function (effectAction) { return [effectAction, currentState]; })), false));
-                (_b = layoutEffectActionsRef.current).push.apply(_b, __spreadArray([], __read(layoutEffectActions.map(function (layoutEffectAction) { return [layoutEffectAction, currentState]; })), false));
-            }
-        });
-        return function () {
-            sub.unsubscribe();
-        };
-    }, []);
-    // this is somewhat weird - this should always be flushed within useLayoutEffect
-    // but we don't want to receive warnings about useLayoutEffect being used on the server
-    // so we have to use `useIsomorphicLayoutEffect` to silence those warnings
-    useIsomorphicLayoutEffect(function () {
-        while (layoutEffectActionsRef.current.length) {
-            var _a = __read(layoutEffectActionsRef.current.shift(), 2), layoutEffectAction = _a[0], effectState = _a[1];
-            executeEffect(layoutEffectAction, effectState);
-        }
-    }); // https://github.com/statelyai/xstate/pull/1202#discussion_r429677773
-    useEffect(function () {
-        while (effectActionsRef.current.length) {
-            var _a = __read(effectActionsRef.current.shift(), 2), effectAction = _a[0], effectState = _a[1];
-            executeEffect(effectAction, effectState);
-        }
-    });
-}

package/lib/useReactEffectActions.d.ts

@@ -1,3 +0,0 @@
-import { EventObject, Interpreter } from 'xstate';
-export declare function useReactEffectActions<TContext, TEvent extends EventObject>(service: Interpreter<TContext, any, TEvent, any>): void;
-//# sourceMappingURL=useReactEffectActions.d.ts.map

package/lib/useReactEffectActions.js

@@ -1,80 +0,0 @@
-"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;
-};
-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.useReactEffectActions = void 0;
-var react_1 = require("react");
-var use_isomorphic_layout_effect_1 = require("use-isomorphic-layout-effect");
-var types_1 = require("./types");
-var utils_1 = require("./utils");
-function executeEffect(action, state) {
-    var exec = action.exec;
-    var originalExec = exec(state.context, state._event.data, {
-        action: action,
-        state: state,
-        _event: state._event
-    });
-    originalExec();
-}
-function useReactEffectActions(service) {
-    var effectActionsRef = (0, react_1.useRef)([]);
-    var layoutEffectActionsRef = (0, react_1.useRef)([]);
-    (0, use_isomorphic_layout_effect_1.default)(function () {
-        var sub = service.subscribe(function (currentState) {
-            var _a, _b;
-            if (currentState.actions.length) {
-                var reactEffectActions = currentState.actions.filter(function (action) {
-                    return (typeof action.exec === 'function' &&
-                        '__effect' in action.exec);
-                });
-                var _c = __read((0, utils_1.partition)(reactEffectActions, function (action) {
-                    return action.exec.__effect === types_1.ReactEffectType.Effect;
-                }), 2), effectActions = _c[0], layoutEffectActions = _c[1];
-                (_a = effectActionsRef.current).push.apply(_a, __spreadArray([], __read(effectActions.map(function (effectAction) { return [effectAction, currentState]; })), false));
-                (_b = layoutEffectActionsRef.current).push.apply(_b, __spreadArray([], __read(layoutEffectActions.map(function (layoutEffectAction) { return [layoutEffectAction, currentState]; })), false));
-            }
-        });
-        return function () {
-            sub.unsubscribe();
-        };
-    }, []);
-    // this is somewhat weird - this should always be flushed within useLayoutEffect
-    // but we don't want to receive warnings about useLayoutEffect being used on the server
-    // so we have to use `useIsomorphicLayoutEffect` to silence those warnings
-    (0, use_isomorphic_layout_effect_1.default)(function () {
-        while (layoutEffectActionsRef.current.length) {
-            var _a = __read(layoutEffectActionsRef.current.shift(), 2), layoutEffectAction = _a[0], effectState = _a[1];
-            executeEffect(layoutEffectAction, effectState);
-        }
-    }); // https://github.com/statelyai/xstate/pull/1202#discussion_r429677773
-    (0, react_1.useEffect)(function () {
-        while (effectActionsRef.current.length) {
-            var _a = __read(effectActionsRef.current.shift(), 2), effectAction = _a[0], effectState = _a[1];
-            executeEffect(effectAction, effectState);
-        }
-    });
-}
-exports.useReactEffectActions = useReactEffectActions;