@xstate/react - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

CHANGELOG.md

 # Changelog
 
+## 1.0.2
+
+### Patch Changes
+
+- [`c7927083`](https://github.com/davidkpiano/xstate/commit/c7927083a651e3c51952ade2ffda793df0391bf6) [#1516](https://github.com/davidkpiano/xstate/pull/1516) Thanks [@davidkpiano](https://github.com/davidkpiano)! - The `send` function returned from the `useService()` now can take two arguments (an event type and payload), to match the behavior of `@xstate/react` version 0.x.
+
+* [`db77623a`](https://github.com/davidkpiano/xstate/commit/db77623a48955d762cffa9b624f438220add5eed) [#1516](https://github.com/davidkpiano/xstate/pull/1516) Thanks [@davidkpiano](https://github.com/davidkpiano)! - The `send` value returned from the `useService()` hook will now accept a payload, which matches the signature of the `send` value returned from the `useMachine()` hook:
+
+  ```js
+  const [state, send] = useService(someService);
+
+  // ...
+
+  // this is OK:
+  send('ADD', { value: 3 });
+
+  // which is equivalent to:
+  send({ type: 'ADD', value: 3 });
+  ```
+
+- [`93f6db02`](https://github.com/davidkpiano/xstate/commit/93f6db02a2d56ec997198ddef0af3d7730bb79bb) [#1594](https://github.com/davidkpiano/xstate/pull/1594) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with internal `setState` in `useService` being called with 2 arguments instead of 1.
+
+* [`72b0880e`](https://github.com/davidkpiano/xstate/commit/72b0880e6444ae009adca72088872bb5c0760ce3) [#1504](https://github.com/davidkpiano/xstate/pull/1504) Thanks [@Andarist](https://github.com/Andarist)! - Fixed issue with `useService` returning an initial state for services in their final states.
+
 ## 1.0.1
@@ -28,3 +52,3 @@
   ```js
-  const [state, send] = useActor(someActor, (actor) => actor.current);
+  const [state, send] = useActor(someActor, actor => actor.current);
   ```
@@ -31,0 +55,0 @@

es/types.d.ts

@@ -30,2 +30,21 @@ import { EventObject } from 'xstate';
 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 {};
 //# sourceMappingURL=types.d.ts.map

es/useActor.js

@@ -17,3 +17,5 @@ var __read = (this && this.__read) || function (o, n) {
 };
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useRef } from 'react';
+import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
+import useConstant from './useConstant';
 export function useActor(actorRef, getSnapshot) {
@@ -23,17 +25,19 @@ if (getSnapshot === void 0) { getSnapshot = function (a) {
     }; }
-    // const actor = useMemo(() => resolveActor(actorLike), [actorLike]);
+    var actorRefRef = useRef(actorRef);
     var deferredEventsRef = useRef([]);
     var _a = __read(useState(function () { return getSnapshot(actorRef); }), 2), current = _a[0], setCurrent = _a[1];
-    var send = useCallback(function (event) {
+    var send = useConstant(function () { return function (event) {
+        var currentActorRef = actorRefRef.current;
         // If the previous actor is a deferred actor,
         // queue the events so that they can be replayed
         // on the non-deferred actor.
-        if ('deferred' in actorRef && actorRef.deferred) {
+        if ('deferred' in currentActorRef && currentActorRef.deferred) {
             deferredEventsRef.current.push(event);
         }
         else {
-            actorRef.send(event);
+            currentActorRef.send(event);
         }
-    }, [actorRef]);
-    useEffect(function () {
+    }; });
+    useIsomorphicLayoutEffect(function () {
+        actorRefRef.current = actorRef;
         setCurrent(getSnapshot(actorRef));
@@ -40,0 +44,0 @@ var subscription = actorRef.subscribe(setCurrent);

es/useMachine.js

@@ -108,6 +108,6 @@ var __assign = (this && this.__assign) || function () {
         };
-        var resolvedMachine = machine.withConfig(machineConfig, __assign(__assign({}, machine.context), context));
+        var machineWithConfig = machine.withConfig(machineConfig, __assign(__assign({}, machine.context), context));
         return [
-            resolvedMachine,
-            interpret(resolvedMachine, __assign({ deferEvents: true }, interpreterOptions))
+            machineWithConfig,
+            interpret(machineWithConfig, __assign({ deferEvents: true }, interpreterOptions))
         ];
@@ -114,0 +114,0 @@ }), 2), resolvedMachine = _b[0], service = _b[1];

es/useService.d.ts

@@ -1,3 +0,3 @@
-import { EventObject, State, Interpreter, Typestate, Sender } from 'xstate';
-import { ActorRef } from './types';
+import { EventObject, State, Interpreter, Typestate } from 'xstate';
+import { ActorRef, PayloadSender } from './types';
 export declare function fromService<TContext, TEvent extends EventObject>(service: Interpreter<TContext, any, TEvent>): ActorRef<TEvent, State<TContext, TEvent>>;
@@ -7,3 +7,3 @@ export declare function useService<TContext, TEvent extends EventObject, TTypestate extends Typestate<TContext> = {
     context: TContext;
-}>(service: Interpreter<TContext, any, TEvent, TTypestate>): [State<TContext, TEvent, any, TTypestate>, Sender<TEvent>];
+}>(service: Interpreter<TContext, any, TEvent, TTypestate>): [State<TContext, TEvent, any, TTypestate>, PayloadSender<TEvent>];
 //# sourceMappingURL=useService.d.ts.map

es/useService.js

@@ -0,1 +1,17 @@
+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 { useMemo } from 'react';
@@ -10,5 +26,8 @@ import { useActor } from './useActor';
         send: service.send.bind(service),
-        subscribe: service.subscribe.bind(service),
+        subscribe: function (cb) { return service.subscribe(function (state) { return cb(state); }); },
         stop: service.stop,
-        current: service.initialized ? service.state : machine.initialState,
+        // TODO: remove compat lines in a new major, replace literal number with InterpreterStatus then as well
+        current: ('status' in service ? service.status : service._status) !== 0
+            ? service.state
+            : machine.initialState,
         name: service.sessionId
@@ -19,3 +38,4 @@ };
     var serviceActor = useMemo(function () { return fromService(service); }, [service]);
-    return useActor(serviceActor, function (actor) { return actor.current; });
+    var _a = __read(useActor(serviceActor, function (actor) { return actor.current; }), 1), state = _a[0];
+    return [state, service.send];
 }

lib/types.d.ts

@@ -30,2 +30,21 @@ import { EventObject } from 'xstate';
 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 {};
 //# sourceMappingURL=types.d.ts.map

lib/useActor.js

@@ -21,2 +21,4 @@ "use strict";
 var react_1 = require("react");
+var use_isomorphic_layout_effect_1 = require("use-isomorphic-layout-effect");
+var useConstant_1 = require("./useConstant");
 function useActor(actorRef, getSnapshot) {
@@ -26,17 +28,19 @@ if (getSnapshot === void 0) { getSnapshot = function (a) {
     }; }
-    // const actor = useMemo(() => resolveActor(actorLike), [actorLike]);
+    var actorRefRef = react_1.useRef(actorRef);
     var deferredEventsRef = react_1.useRef([]);
     var _a = __read(react_1.useState(function () { return getSnapshot(actorRef); }), 2), current = _a[0], setCurrent = _a[1];
-    var send = react_1.useCallback(function (event) {
+    var send = useConstant_1.default(function () { return function (event) {
+        var currentActorRef = actorRefRef.current;
         // If the previous actor is a deferred actor,
         // queue the events so that they can be replayed
         // on the non-deferred actor.
-        if ('deferred' in actorRef && actorRef.deferred) {
+        if ('deferred' in currentActorRef && currentActorRef.deferred) {
             deferredEventsRef.current.push(event);
         }
         else {
-            actorRef.send(event);
+            currentActorRef.send(event);
         }
-    }, [actorRef]);
-    react_1.useEffect(function () {
+    }; });
+    use_isomorphic_layout_effect_1.default(function () {
+        actorRefRef.current = actorRef;
         setCurrent(getSnapshot(actorRef));
@@ -43,0 +47,0 @@ var subscription = actorRef.subscribe(setCurrent);

lib/useMachine.js

@@ -113,6 +113,6 @@ "use strict";
         };
-        var resolvedMachine = machine.withConfig(machineConfig, __assign(__assign({}, machine.context), context));
+        var machineWithConfig = machine.withConfig(machineConfig, __assign(__assign({}, machine.context), context));
         return [
-            resolvedMachine,
-            xstate_1.interpret(resolvedMachine, __assign({ deferEvents: true }, interpreterOptions))
+            machineWithConfig,
+            xstate_1.interpret(machineWithConfig, __assign({ deferEvents: true }, interpreterOptions))
         ];
@@ -119,0 +119,0 @@ }), 2), resolvedMachine = _b[0], service = _b[1];

lib/useService.d.ts

@@ -1,3 +0,3 @@
-import { EventObject, State, Interpreter, Typestate, Sender } from 'xstate';
-import { ActorRef } from './types';
+import { EventObject, State, Interpreter, Typestate } from 'xstate';
+import { ActorRef, PayloadSender } from './types';
 export declare function fromService<TContext, TEvent extends EventObject>(service: Interpreter<TContext, any, TEvent>): ActorRef<TEvent, State<TContext, TEvent>>;
@@ -7,3 +7,3 @@ export declare function useService<TContext, TEvent extends EventObject, TTypestate extends Typestate<TContext> = {
     context: TContext;
-}>(service: Interpreter<TContext, any, TEvent, TTypestate>): [State<TContext, TEvent, any, TTypestate>, Sender<TEvent>];
+}>(service: Interpreter<TContext, any, TEvent, TTypestate>): [State<TContext, TEvent, any, TTypestate>, PayloadSender<TEvent>];
 //# sourceMappingURL=useService.d.ts.map

lib/useService.js

 "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 });
@@ -13,5 +29,8 @@ exports.useService = exports.fromService = void 0;
         send: service.send.bind(service),
-        subscribe: service.subscribe.bind(service),
+        subscribe: function (cb) { return service.subscribe(function (state) { return cb(state); }); },
         stop: service.stop,
-        current: service.initialized ? service.state : machine.initialState,
+        // TODO: remove compat lines in a new major, replace literal number with InterpreterStatus then as well
+        current: ('status' in service ? service.status : service._status) !== 0
+            ? service.state
+            : machine.initialState,
         name: service.sessionId
@@ -23,4 +42,5 @@ };
     var serviceActor = react_1.useMemo(function () { return fromService(service); }, [service]);
-    return useActor_1.useActor(serviceActor, function (actor) { return actor.current; });
+    var _a = __read(useActor_1.useActor(serviceActor, function (actor) { return actor.current; }), 1), state = _a[0];
+    return [state, service.send];
 }
 exports.useService = useService;

package.json

 {
   "name": "@xstate/react",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "XState tools for React",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -442,3 +442,3 @@ # @xstate/react
   -import { useService } from '@xstate/react';
-  +import { useService } from '@xstate/react';
+  +import { useActor } from '@xstate/react';
 
@@ -445,0 +445,0 @@ -const [state, send] = useService(someActor);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

66416

increased by10.26%

Number of package files

36

increased by2.86%

Lines of code

1092

increased by8.55%

No dependency changes