@xstate/react 1.0.3 → 1.2.2

package/CHANGELOG.md

@@ -1,5 +1,65 @@
 # Changelog
 
+## 1.2.2
+
+### Patch Changes
+
+- [`4b31cefb`](https://github.com/davidkpiano/xstate/commit/4b31cefb3d3497e5515314046639df7e27dbe9e8) [#1780](https://github.com/davidkpiano/xstate/pull/1780) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with some external packages not being bundled correctly into the UMD bundles.
+
+## 1.2.1
+
+### Patch Changes
+
+- [`a16a5f2f`](https://github.com/davidkpiano/xstate/commit/a16a5f2ff5ba9d4d7834ec3ca2d0adecf5d6a870) [#1756](https://github.com/davidkpiano/xstate/pull/1756) Thanks [@dimitardanailov](https://github.com/dimitardanailov)! - Fixed an issue with `process` references not being removed correctly from the UMD bundles.
+
+## 1.2.0
+
+### Minor Changes
+
+- [`dd98296e`](https://github.com/davidkpiano/xstate/commit/dd98296e9fcbae905da2395e67e876e28be7c774) [#1738](https://github.com/davidkpiano/xstate/pull/1738) Thanks [@dimitardanailov](https://github.com/dimitardanailov)! - Added UMD bundle.
+
+## 1.1.0
+
+### Minor Changes
+
+- [`89f9c27c`](https://github.com/davidkpiano/xstate/commit/89f9c27c453dc56bdfdf49c8ea1f0f87ff1f9b67) [#1622](https://github.com/davidkpiano/xstate/pull/1622) Thanks [@davidkpiano](https://github.com/davidkpiano)! - Spawned/invoked actors and interpreters are now typed as extending `ActorRef` rather than `Actor` or `Interpreter`. This unification of types should make it more straightforward to provide actor types in React:
+
+  ```ts
+  import { ActorRef } from 'xstate';
+  import { useActor } from '@xstate/react';
+
+  const Child: React.FC<{ actorRef: ActorRef<SomeEvent, SomeEmitted> }> = ({
+    actorRef
+  }) => {
+    // `state` is typed as `SomeEmitted`
+    // `send` can be called with `SomeEvent` values
+    const [state, send] = useActor(actorRef);
+
+    // . ..
+  };
+  ```
+
+  It's also easier to specify the type of a spawned/invoked machine with `ActorRefFrom`:
+
+  ```ts
+  import { createMachine, ActorRefFrom } from 'xstate';
+  import { useActor } from '@xstate/react';
+
+  const someMachine = createMachine<SomeContext, SomeEvent>({
+    // ...
+  });
+
+  const Child: React.FC<{ someRef: ActorRefFrom<typeof someMachine> }> = ({
+    someRef
+  }) => {
+    // `state` is typed as `State<SomeContext, SomeEvent>`
+    // `send` can be called with `SomeEvent` values
+    const [state, send] = useActor(someRef);
+
+    // . ..
+  };
+  ```
+
 ## 1.0.3
 
 ### Patch Changes

package/README.md

@@ -29,6 +29,22 @@
 npm i xstate @xstate/react
 ```
 
+**Via CDN**
+
+```html
+<script src="https://unpkg.com/@xstate/react/dist/xstate-react.umd.min.js"></script>
+```
+
+By using the global variable `XStateReact`
+
+or
+
+```html
+<script src="https://unpkg.com/@xstate/react/dist/xstate-react-fsm.umd.min.js"></script>
+```
+
+By using the global variable `XStateReactFSM`
+
 2. Import the `useMachine` hook:
 
 ```js

package/dist/xstate-react-fsm.umd.min.js

@@ -0,0 +1,28 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@xstate/fsm")):"function"==typeof define&&define.amd?define(["exports","react","@xstate/fsm"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).XStateReactFSM={},e.React,e.XStateFSM)}(this,(function(e,t,r){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=n(t);
+/*! *****************************************************************************
+    Copyright (c) Microsoft Corporation. All rights reserved.
+    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+    this file except in compliance with the License. You may obtain a copy of the
+    License at http://www.apache.org/licenses/LICENSE-2.0
+
+    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+    MERCHANTABLITY OR NON-INFRINGEMENT.
+
+    See the Apache Version 2.0 License for specific language governing permissions
+    and limitations under the License.
+    ***************************************************************************** */function o(e){var t={exports:{}};return e(t,t.exports),t.exports
+/*
+    object-assign
+    (c) Sindre Sorhus
+    @license MIT
+    */}var i=Object.getOwnPropertySymbols,c=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable;function f(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}var s=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},r=0;r<10;r++)t["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach((function(e){n[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var r,n,u=f(e),o=1;o<arguments.length;o++){for(var s in r=Object(arguments[o]))c.call(r,s)&&(u[s]=r[s]);if(i){n=i(r);for(var l=0;l<n.length;l++)a.call(r,n[l])&&(u[n[l]]=r[n[l]])}}return u},l={useSubscription:function(e){var t=e.getCurrentValue,r=e.subscribe,n=u.default.useState((function(){return{getCurrentValue:t,subscribe:r,value:t()}}));e=n[0];var o=n[1];return n=e.value,e.getCurrentValue===t&&e.subscribe===r||(n=t(),o({getCurrentValue:t,subscribe:r,value:n})),u.default.useDebugValue(n),u.default.useEffect((function(){function e(){if(!n){var e=t();o((function(n){return n.getCurrentValue!==t||n.subscribe!==r||n.value===e?n:s({},n,{value:e})}))}}var n=!1,u=r(e);return e(),function(){n=!0,u()}}),[t,r]),n}},b=(o((function(e,t){})),o((function(e){e.exports=l})));
+/** @license React v1.4.1
+     * use-subscription.production.min.js
+     *
+     * Copyright (c) Facebook, Inc. and its affiliates.
+     *
+     * This source code is licensed under the MIT license found in the
+     * LICENSE file in the root directory of this source tree.
+     */var p=function(e){var t;return e.subscribe((function(e){t=e})).unsubscribe(),t};e.useMachine=function(e,n){var u,o,i=(u=function(){return r.interpret(r.createMachine(e.config,n||e._options)).start()},(o=t.useRef()).current||(o.current={v:u()}),o.current.v),c=function(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,u,o=r.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(n=o.next()).done;)i.push(n.value)}catch(e){u={error:e}}finally{try{n&&!n.done&&(r=o.return)&&r.call(o)}finally{if(u)throw u.error}}return i}(t.useState((function(){return p(i)})),2),a=c[0],f=c[1];return t.useEffect((function(){n&&(i._machine._options=n)})),t.useEffect((function(){return i.subscribe(f),function(){i.stop()}}),[]),[a,i.send,i]},e.useService=function(e){var r=t.useMemo((function(){var t=p(e);return{getCurrentValue:function(){return t},subscribe:function(r){return e.subscribe((function(e){!1!==e.changed&&(t=e,r())})).unsubscribe}}}),[e]);return[b.useSubscription(r),e.send,e]},Object.defineProperty(e,"__esModule",{value:!0})}));

package/dist/xstate-react.umd.min.js

@@ -0,0 +1,15 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("xstate")):"function"==typeof define&&define.amd?define(["exports","react","xstate"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).XStateReact={},t.React,t.XState)}(this,(function(t,e,n){"use strict";
+/*! *****************************************************************************
+    Copyright (c) Microsoft Corporation. All rights reserved.
+    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+    this file except in compliance with the License. You may obtain a copy of the
+    License at http://www.apache.org/licenses/LICENSE-2.0
+
+    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+    MERCHANTABLITY OR NON-INFRINGEMENT.
+
+    See the Apache Version 2.0 License for specific language governing permissions
+    and limitations under the License.
+    ***************************************************************************** */var r=function(){return(r=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)};function o(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var r,o,u=n.call(t),c=[];try{for(;(void 0===e||e-- >0)&&!(r=u.next()).done;)c.push(r.value)}catch(t){o={error:t}}finally{try{r&&!r.done&&(n=u.return)&&n.call(u)}finally{if(o)throw o.error}}return c}function u(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(o(arguments[e]));return t}var c,i=e.useLayoutEffect;function f(t){var n=e.useRef();return n.current||(n.current={v:t()}),n.current.v}function a(t,e){var n,r,u=o([[],[]],2),c=u[0],i=u[1];try{for(var f=function(t){var e="function"==typeof Symbol&&Symbol.iterator,n=e&&t[e],r=0;if(n)return n.call(t);if(t&&"number"==typeof t.length)return{next:function(){return t&&r>=t.length&&(t=void 0),{value:t&&t[r++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}(t),a=f.next();!a.done;a=f.next()){var s=a.value;e(s)?c.push(s):i.push(s)}}catch(t){n={error:t}}finally{try{a&&!a.done&&(r=f.return)&&r.call(f)}finally{if(n)throw n.error}}return[c,i]}function s(t,e){var n=function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];return function(){return t.apply(void 0,u(e))}};return Object.defineProperties(n,{name:{value:"effect:"+t.name},__effect:{value:e}}),n}function l(t,e){(0,t.exec)(e.context,e._event.data,{action:t,state:e,_event:e._event})()}!function(t){t[t.Effect=1]="Effect",t[t.LayoutEffect=2]="LayoutEffect"}(c||(c={}));var v=function(){};function p(t,n){void 0===n&&(n=function(t){return function(t){return"state"in t}(t)?t.state:void 0});var r=e.useRef(t),u=e.useRef([]),c=o(e.useState((function(){return n(t)})),2),a=c[0],s=c[1],l=f((function(){return function(t){var e=r.current;(function(t){return"deferred"in t})(e)&&e.deferred?u.current.push(t):e.send(t)}}));return i((function(){r.current=t,s(n(t));for(var e=t.subscribe({next:function(t){return s(t)},error:v,complete:v});u.current.length>0;){var o=u.current.shift();t.send(o)}return function(){e.unsubscribe()}}),[t]),[a,l]}t.asEffect=function(t){return s(t,c.Effect)},t.asLayoutEffect=function(t){return s(t,c.LayoutEffect)},t.useActor=p,t.useMachine=function(t,s){void 0===s&&(s={});var v=f((function(){return"function"==typeof t?t():t})),p=s.context,d=s.guards,y=s.actions,h=s.activities,b=s.services,g=s.delays,x=s.state,m=function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(t);o<r.length;o++)e.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(t,r[o])&&(n[r[o]]=t[r[o]])}return n}(s,["context","guards","actions","activities","services","delays","state"]),O=o(f((function(){var t={context:p,guards:d,actions:y,activities:h,services:b,delays:g},e=v.withConfig(t,r(r({},v.context),p));return[e,n.interpret(e,r({deferEvents:!0},m))]})),2),E=O[0],S=O[1],j=o(e.useState((function(){var t=E.initialState;return x?n.State.create(x):t})),2),_=j[0],w=j[1],R=e.useRef([]),P=e.useRef([]);return i((function(){return S.onTransition((function(t){var e,n,r=void 0===t.changed&&Object.keys(t.children).length;if((t.changed||r)&&w(t),t.actions.length){var i=o(a(t.actions.filter((function(t){return"function"==typeof t.exec&&"__effect"in t.exec})),(function(t){return t.exec.__effect===c.Effect})),2),f=i[0],s=i[1];(e=R.current).push.apply(e,u(f.map((function(e){return[e,t]})))),(n=P.current).push.apply(n,u(s.map((function(e){return[e,t]}))))}})).start(x?n.State.create(x):void 0),function(){S.stop()}}),[]),e.useEffect((function(){Object.assign(S.machine.options.actions,y)}),[y]),e.useEffect((function(){Object.assign(S.machine.options.services,b)}),[b]),i((function(){for(;P.current.length;){var t=o(P.current.shift(),2);l(t[0],t[1])}}),[_]),e.useEffect((function(){for(;R.current.length;){var t=o(R.current.shift(),2);l(t[0],t[1])}}),[_]),[_,S.send,S]},t.useService=function(t){return[o(p(t,(function(){return 0!==("status"in t?t.status:t._status)?t.state:t.machine.initialState})),1)[0],t.send]},Object.defineProperty(t,"__esModule",{value:!0})}));

package/es/types.d.ts

@@ -12,20 +12,6 @@ export interface Subscribable<T> {
     subscribe(observer: Observer<T>): Subscription;
     subscribe(next: (value: T) => void, error?: (error: any) => void, complete?: () => void): Subscription;
 }
-export interface ActorRef<TEvent extends EventObject, TEmitted = any> extends Subscribable<TEmitted> {
-    send: Sender<TEvent>;
-    stop: () => void;
-    /**
-     * The most recently emitted value.
-     */
-    current: TEmitted;
-    name: string;
-}
-export interface ActorRefLike<TEvent extends EventObject, TEmitted = any> extends Subscribable<TEmitted> {
-    send: Sender<TEvent>;
-    stop?: () => void;
-    [key: string]: any;
-}
 export declare type MaybeLazy<T> = T | (() => T);
 declare type ExcludeType<A> = {
     [K in Exclude<keyof A, 'type'>]: A[K];
@@ -45,5 +31,8 @@ export interface PayloadSender<TEvent extends EventObject> {
      */
     <K extends TEvent['type']>(eventType: K, payload: NeverIfEmpty<ExtractExtraParameters<TEvent, K>>): void;
 }
+export interface ActorRef<TEvent extends EventObject, TEmitted = any> extends Subscribable<TEmitted> {
+    send: Sender<TEvent>;
+}
 export {};
 //# sourceMappingURL=types.d.ts.map

package/es/useActor.d.ts

@@ -1,4 +1,8 @@
-import { Sender, ActorRefLike } from './types';
-import { EventObject, Actor } from 'xstate';
-export declare function useActor<TEvent extends EventObject, TEmitted = any>(actorRef: ActorRefLike<TEvent, TEmitted> | Actor, getSnapshot?: (actor: typeof actorRef) => TEmitted): [TEmitted, Sender<TEvent>];
+import { Sender } from './types';
+import { ActorRef, EventObject } from 'xstate';
+declare type EventOfActorRef<TActor extends ActorRef<any, any>> = TActor extends ActorRef<infer TEvent, any> ? TEvent : never;
+declare type EmittedOfActorRef<TActor extends ActorRef<any, any>> = TActor extends ActorRef<any, infer TEmitted> ? TEmitted : never;
+export declare function useActor<TActor extends ActorRef<any, any>>(actorRef: TActor, getSnapshot?: (actor: TActor) => EmittedOfActorRef<TActor>): [EmittedOfActorRef<TActor>, Sender<EventOfActorRef<TActor>>];
+export declare function useActor<TEvent extends EventObject, TEmitted>(actorRef: ActorRef<TEvent, TEmitted>, getSnapshot?: (actor: ActorRef<TEvent, TEmitted>) => TEmitted): [TEmitted, Sender<TEvent>];
+export {};
 //# sourceMappingURL=useActor.d.ts.map

package/es/useActor.js

@@ -17,9 +17,18 @@ var __read = (this && this.__read) || function (o, n) {
 import { useState, useRef } from 'react';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
 import useConstant from './useConstant';
+function isActorWithState(actorRef) {
+    return 'state' in actorRef;
+}
+function isDeferredActor(actorRef) {
+    return 'deferred' in actorRef;
+}
+var noop = function () {
+    /* ... */
+};
 export function useActor(actorRef, getSnapshot) {
     if (getSnapshot === void 0) { getSnapshot = function (a) {
-        return 'state' in a ? a.state : undefined;
+        return isActorWithState(a) ? a.state : undefined;
     }; }
     var actorRefRef = useRef(actorRef);
     var deferredEventsRef = useRef([]);
@@ -29,7 +38,7 @@ export function useActor(actorRef, getSnapshot) {
         // 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 currentActorRef && currentActorRef.deferred) {
+        if (isDeferredActor(currentActorRef) && currentActorRef.deferred) {
             deferredEventsRef.current.push(event);
         }
         else {
@@ -39,7 +48,11 @@ export function useActor(actorRef, getSnapshot) {
     useIsomorphicLayoutEffect(function () {
         actorRefRef.current = actorRef;
         setCurrent(getSnapshot(actorRef));
-        var subscription = actorRef.subscribe(setCurrent);
+        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();

package/es/useService.d.ts

@@ -1,6 +1,5 @@
 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>>;
+import { PayloadSender } from './types';
 export declare function useService<TContext, TEvent extends EventObject, TTypestate extends Typestate<TContext> = {
     value: any;
     context: TContext;

package/es/useService.js

@@ -14,26 +14,16 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-import { useMemo } from 'react';
 import { useActor } from './useActor';
-export function fromService(service) {
+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 machine = service.machine;
-    return {
-        send: service.send.bind(service),
-        subscribe: function (cb) { return service.subscribe(function (state) { return cb(state); }); },
-        stop: service.stop,
+    var _a = __read(useActor(service, function () {
         // 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
+        return ('status' in service ? service.status : service._status) !== 0
             ? service.state
-            : machine.initialState,
-        name: service.sessionId
-    };
-}
-export function useService(service) {
-    var serviceActor = useMemo(function () { return fromService(service); }, [service]);
-    var _a = __read(useActor(serviceActor, function (actor) { return actor.current; }), 1), state = _a[0];
+            : service.machine.initialState;
+    }), 1), state = _a[0];
     return [state, service.send];
 }

package/lib/types.d.ts

@@ -12,20 +12,6 @@ export interface Subscribable<T> {
     subscribe(observer: Observer<T>): Subscription;
     subscribe(next: (value: T) => void, error?: (error: any) => void, complete?: () => void): Subscription;
 }
-export interface ActorRef<TEvent extends EventObject, TEmitted = any> extends Subscribable<TEmitted> {
-    send: Sender<TEvent>;
-    stop: () => void;
-    /**
-     * The most recently emitted value.
-     */
-    current: TEmitted;
-    name: string;
-}
-export interface ActorRefLike<TEvent extends EventObject, TEmitted = any> extends Subscribable<TEmitted> {
-    send: Sender<TEvent>;
-    stop?: () => void;
-    [key: string]: any;
-}
 export declare type MaybeLazy<T> = T | (() => T);
 declare type ExcludeType<A> = {
     [K in Exclude<keyof A, 'type'>]: A[K];
@@ -45,5 +31,8 @@ export interface PayloadSender<TEvent extends EventObject> {
      */
     <K extends TEvent['type']>(eventType: K, payload: NeverIfEmpty<ExtractExtraParameters<TEvent, K>>): void;
 }
+export interface ActorRef<TEvent extends EventObject, TEmitted = any> extends Subscribable<TEmitted> {
+    send: Sender<TEvent>;
+}
 export {};
 //# sourceMappingURL=types.d.ts.map

package/lib/useActor.d.ts

@@ -1,4 +1,8 @@
-import { Sender, ActorRefLike } from './types';
-import { EventObject, Actor } from 'xstate';
-export declare function useActor<TEvent extends EventObject, TEmitted = any>(actorRef: ActorRefLike<TEvent, TEmitted> | Actor, getSnapshot?: (actor: typeof actorRef) => TEmitted): [TEmitted, Sender<TEvent>];
+import { Sender } from './types';
+import { ActorRef, EventObject } from 'xstate';
+declare type EventOfActorRef<TActor extends ActorRef<any, any>> = TActor extends ActorRef<infer TEvent, any> ? TEvent : never;
+declare type EmittedOfActorRef<TActor extends ActorRef<any, any>> = TActor extends ActorRef<any, infer TEmitted> ? TEmitted : never;
+export declare function useActor<TActor extends ActorRef<any, any>>(actorRef: TActor, getSnapshot?: (actor: TActor) => EmittedOfActorRef<TActor>): [EmittedOfActorRef<TActor>, Sender<EventOfActorRef<TActor>>];
+export declare function useActor<TEvent extends EventObject, TEmitted>(actorRef: ActorRef<TEvent, TEmitted>, getSnapshot?: (actor: ActorRef<TEvent, TEmitted>) => TEmitted): [TEmitted, Sender<TEvent>];
+export {};
 //# sourceMappingURL=useActor.d.ts.map

package/lib/useActor.js

@@ -20,9 +20,18 @@ exports.useActor = void 0;
 var react_1 = require("react");
 var use_isomorphic_layout_effect_1 = require("use-isomorphic-layout-effect");
 var useConstant_1 = require("./useConstant");
+function isActorWithState(actorRef) {
+    return 'state' in actorRef;
+}
+function isDeferredActor(actorRef) {
+    return 'deferred' in actorRef;
+}
+var noop = function () {
+    /* ... */
+};
 function useActor(actorRef, getSnapshot) {
     if (getSnapshot === void 0) { getSnapshot = function (a) {
-        return 'state' in a ? a.state : undefined;
+        return isActorWithState(a) ? a.state : undefined;
     }; }
     var actorRefRef = react_1.useRef(actorRef);
     var deferredEventsRef = react_1.useRef([]);
@@ -32,7 +41,7 @@ function useActor(actorRef, getSnapshot) {
         // 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 currentActorRef && currentActorRef.deferred) {
+        if (isDeferredActor(currentActorRef) && currentActorRef.deferred) {
             deferredEventsRef.current.push(event);
         }
         else {
@@ -42,7 +51,11 @@ function useActor(actorRef, getSnapshot) {
     use_isomorphic_layout_effect_1.default(function () {
         actorRefRef.current = actorRef;
         setCurrent(getSnapshot(actorRef));
-        var subscription = actorRef.subscribe(setCurrent);
+        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();

package/lib/useService.d.ts

@@ -1,6 +1,5 @@
 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>>;
+import { PayloadSender } from './types';
 export declare function useService<TContext, TEvent extends EventObject, TTypestate extends Typestate<TContext> = {
     value: any;
     context: TContext;

package/lib/useService.js

@@ -16,29 +16,18 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useService = exports.fromService = void 0;
-var react_1 = require("react");
+exports.useService = void 0;
 var useActor_1 = require("./useActor");
-function fromService(service) {
+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 machine = service.machine;
-    return {
-        send: service.send.bind(service),
-        subscribe: function (cb) { return service.subscribe(function (state) { return cb(state); }); },
-        stop: service.stop,
+    var _a = __read(useActor_1.useActor(service, function () {
         // 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
+        return ('status' in service ? service.status : service._status) !== 0
             ? service.state
-            : machine.initialState,
-        name: service.sessionId
-    };
-}
-exports.fromService = fromService;
-function useService(service) {
-    var serviceActor = react_1.useMemo(function () { return fromService(service); }, [service]);
-    var _a = __read(useActor_1.useActor(serviceActor, function (actor) { return actor.current; }), 1), state = _a[0];
+            : service.machine.initialState;
+    }), 1), state = _a[0];
     return [state, service.send];
 }
 exports.useService = useService;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xstate/react",
-  "version": "1.0.3",
+  "version": "1.2.2",
   "description": "XState tools for React",
   "keywords": [
     "state",
@@ -26,6 +26,7 @@
   "files": [
     "lib/**/*.js",
     "lib/**/*.d.ts",
+    "dist/**/*.js",
     "es/**/*.js",
     "es/**/*.d.ts"
   ],
@@ -35,7 +36,7 @@
   },
   "scripts": {
     "clean": "rm -rf dist lib tsconfig.tsbuildinfo",
-    "build": "tsc && tsc --outDir es --module es2015",
+    "build": "tsc && tsc --outDir es --module es2015 && rollup -c",
     "test": "jest",
     "prepublish": "npm run build && npm run test"
   },
@@ -60,6 +61,8 @@
     "use-subscription": "^1.3.0"
   },
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-node-resolve": "^11.0.1",
     "@testing-library/react": "^8.0.9",
     "@types/jsdom": "^12.2.3",
     "@types/react": "^16.9.11",
@@ -71,8 +74,12 @@
     "lerna-alias": "3.0.3-0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "rollup": "^2.35.1",
+    "rollup-plugin-replace": "^2.2.0",
+    "rollup-plugin-terser": "^5.1.2",
+    "rollup-plugin-typescript2": "^0.29.0",
     "ts-jest": "^26.4.0",
-    "typescript": "^4.0.3",
+    "typescript": "^4.1.2",
     "xstate": "*"
   }
 }