@xstate/react 2.0.0-pr2674-202191175724 → 2.0.1

package/lib/useSelector.js

@@ -1,56 +1,74 @@
 "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");
+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)
-        ? useService_1.getServiceSnapshot(a)
-        : useActor_1.isActorWithState(a)
+        ? (0, utils_1.getServiceSnapshot)(a)
+        : (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 _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 = (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();
+                };
             }
         };
-        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 = (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;
 }
 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`.
@@ -11,8 +11,8 @@ var useConstant_1 = require("./useConstant");
  * @returns An ActorRef with the specified `behavior`
  */
 function useSpawn(behavior) {
-    var actorRef = useConstant_1.default(function () {
-        return behaviors_1.spawnBehavior(behavior);
+    var actorRef = (0, useConstant_1.default)(function () {
+        return (0, xstate_1.spawnBehavior)(behavior);
     });
     return actorRef;
 }

package/lib/utils.d.ts

@@ -1,2 +1,4 @@
+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'];
 //# 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.partition = void 0;
+exports.getServiceSnapshot = exports.partition = void 0;
 function partition(items, predicate) {
     var e_1, _a;
     var _b = __read([[], []], 2), truthy = _b[0], falsy = _b[1];
@@ -52,3 +52,7 @@ function partition(items, predicate) {
     return [truthy, falsy];
 }
 exports.partition = partition;
+function getServiceSnapshot(service) {
+    return service.status !== 0 ? service.state : service.machine.initialState;
+}
+exports.getServiceSnapshot = getServiceSnapshot;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xstate/react",
-  "version": "2.0.0-pr2674-202191175724",
+  "version": "2.0.1",
   "description": "XState tools for React",
   "keywords": [
     "state",
@@ -13,7 +13,7 @@
     "hook"
   ],
   "author": "David Khourshid <davidkpiano@gmail.com>",
-  "homepage": "https://github.com/davidkpiano/xstate/tree/main/packages/xstate-react#readme",
+  "homepage": "https://github.com/statelyai/xstate/tree/main/packages/xstate-react#readme",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -40,21 +40,21 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@github.com/davidkpiano/xstate.git"
+    "url": "git+ssh://git@github.com/statelyai/xstate.git"
   },
   "scripts": {
     "clean": "rm -rf dist lib tsconfig.tsbuildinfo",
     "build": "tsc && tsc --outDir es --module es2015 && rollup -c",
     "test": "jest",
-    "prepublish": "npm run build && npm run test"
+    "prepare": "npm run build"
   },
   "bugs": {
-    "url": "https://github.com/davidkpiano/xstate/issues"
+    "url": "https://github.com/statelyai/xstate/issues"
   },
   "peerDependencies": {
-    "@xstate/fsm": "^1.0.0",
+    "@xstate/fsm": "^1.6.5",
     "react": "^16.8.0 || ^17.0.0",
-    "xstate": "^4.26.0-pr2674-202191175724"
+    "xstate": "^4.30.3"
   },
   "peerDependenciesMeta": {
     "@xstate/fsm": {
@@ -87,7 +87,7 @@
     "rollup-plugin-terser": "^5.1.2",
     "rollup-plugin-typescript2": "^0.30.0",
     "ts-jest": "^26.5.6",
-    "typescript": "^4.3.5",
+    "typescript": "^4.5.2",
     "xstate": "*"
   }
 }

package/dist/xstate-react.cjs.js

@@ -1,16 +0,0 @@
-"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/es/useService.d.ts

@@ -1,16 +0,0 @@
-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.
- *
- * @param service The interpreted machine
- * @returns A tuple of the current `state` of the service and the service's `send(event)` method
- */
-export declare function useService<TContext, TEvent extends EventObject, TTypestate extends Typestate<TContext> = {
-    value: any;
-    context: TContext;
-}, 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/es/useService.js

@@ -1,36 +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;
-};
-import { useActor } from './useActor';
-export function getServiceSnapshot(service) {
-    // TODO: remove compat lines in a new major, replace literal number with InterpreterStatus then as well
-    return ('status' in service ? service.status : service._status) !== 0
-        ? service.state
-        : service.machine.initialState;
-}
-/**
- * @deprecated Use `useActor` instead.
- *
- * @param service The interpreted machine
- * @returns A tuple of the current `state` of the service and the service's `send(event)` method
- */
-export function useService(service) {
-    if (process.env.NODE_ENV !== 'production' && !('machine' in service)) {
-        throw new Error("Attempted to use an actor-like object instead of a service in the useService() hook. Please use the useActor() hook instead.");
-    }
-    var _a = __read(useActor(service), 1), state = _a[0];
-    return [state, service.send];
-}

package/lib/useService.d.ts

@@ -1,16 +0,0 @@
-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.
- *
- * @param service The interpreted machine
- * @returns A tuple of the current `state` of the service and the service's `send(event)` method
- */
-export declare function useService<TContext, TEvent extends EventObject, TTypestate extends Typestate<TContext> = {
-    value: any;
-    context: TContext;
-}, 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/useService.js

@@ -1,41 +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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useService = exports.getServiceSnapshot = void 0;
-var useActor_1 = require("./useActor");
-function getServiceSnapshot(service) {
-    // TODO: remove compat lines in a new major, replace literal number with InterpreterStatus then as well
-    return ('status' in service ? service.status : service._status) !== 0
-        ? service.state
-        : service.machine.initialState;
-}
-exports.getServiceSnapshot = getServiceSnapshot;
-/**
- * @deprecated Use `useActor` instead.
- *
- * @param service The interpreted machine
- * @returns A tuple of the current `state` of the service and the service's `send(event)` method
- */
-function useService(service) {
-    if (process.env.NODE_ENV !== 'production' && !('machine' in service)) {
-        throw new Error("Attempted to use an actor-like object instead of a service in the useService() hook. Please use the useActor() hook instead.");
-    }
-    var _a = __read(useActor_1.useActor(service), 1), state = _a[0];
-    return [state, service.send];
-}
-exports.useService = useService;