@xstate/react 4.0.2 → 4.1.0

package/README.md

@@ -13,14 +13,6 @@ This package contains utilities for using [XState](https://github.com/statelyai/
 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`
-
 2. Import the `useMachine` hook:
 
 ```js

package/dist/declarations/src/createActorContext.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { ActorRefFrom, SnapshotFrom, ActorOptions, AnyActorLogic } from 'xstate';
-export declare function createActorContext<TLogic extends AnyActorLogic>(actorLogic: TLogic, interpreterOptions?: ActorOptions<TLogic>): {
+import { Actor, ActorOptions, AnyActorLogic, SnapshotFrom } from 'xstate';
+export declare function createActorContext<TLogic extends AnyActorLogic>(actorLogic: TLogic, actorOptions?: ActorOptions<TLogic>): {
     useSelector: <T>(selector: (snapshot: SnapshotFrom<TLogic>) => T, compare?: (a: T, b: T) => boolean) => T;
-    useActorRef: () => ActorRefFrom<TLogic>;
+    useActorRef: () => Actor<TLogic>;
     Provider: (props: {
         children: React.ReactNode;
         options?: ActorOptions<TLogic>;

package/dist/declarations/src/useActor.d.ts

@@ -1,2 +1,2 @@
-import { ActorRefFrom, AnyActorLogic, ActorOptions, SnapshotFrom } from 'xstate';
-export declare function useActor<TLogic extends AnyActorLogic>(logic: TLogic, options?: ActorOptions<TLogic>): [SnapshotFrom<TLogic>, ActorRefFrom<TLogic>['send'], ActorRefFrom<TLogic>];
+import { Actor, ActorOptions, AnyActorLogic, SnapshotFrom } from 'xstate';
+export declare function useActor<TLogic extends AnyActorLogic>(logic: TLogic, options?: ActorOptions<TLogic>): [SnapshotFrom<TLogic>, Actor<TLogic>['send'], Actor<TLogic>];

package/dist/declarations/src/useActorRef.d.ts

@@ -1,3 +1,3 @@
-import { AnyActorLogic, AnyActor, ActorRefFrom, ActorOptions, Observer, SnapshotFrom } from 'xstate';
-export declare function useIdleActorRef(logic: AnyActorLogic, options: Partial<ActorOptions<AnyActorLogic>>): AnyActor;
-export declare function useActorRef<TLogic extends AnyActorLogic>(machine: TLogic, options?: ActorOptions<TLogic>, observerOrListener?: Observer<SnapshotFrom<TLogic>> | ((value: SnapshotFrom<TLogic>) => void)): ActorRefFrom<TLogic>;
+import { Actor, ActorOptions, AnyActorLogic, Observer, SnapshotFrom } from 'xstate';
+export declare function useIdleActorRef<TLogic extends AnyActorLogic>(logic: TLogic, options: Partial<ActorOptions<TLogic>>): Actor<TLogic>;
+export declare function useActorRef<TLogic extends AnyActorLogic>(machine: TLogic, options?: ActorOptions<TLogic>, observerOrListener?: Observer<SnapshotFrom<TLogic>> | ((value: SnapshotFrom<TLogic>) => void)): Actor<TLogic>;

package/dist/declarations/src/useMachine.d.ts

@@ -1,9 +1,5 @@
-import { ActorRefFrom, AnyStateMachine, ActorOptions, StateFrom } from 'xstate';
+import { Actor, ActorOptions, AnyStateMachine, StateFrom } from 'xstate';
 /**
  * @alias useActor
  */
-export declare function useMachine<TMachine extends AnyStateMachine>(machine: TMachine, options?: ActorOptions<TMachine>): [
-    StateFrom<TMachine>,
-    ActorRefFrom<TMachine>['send'],
-    ActorRefFrom<TMachine>
-];
+export declare function useMachine<TMachine extends AnyStateMachine>(machine: TMachine, options?: ActorOptions<TMachine>): [StateFrom<TMachine>, Actor<TMachine>['send'], Actor<TMachine>];

package/dist/declarations/src/useSelector.d.ts

@@ -1,2 +1,2 @@
 import { ActorRef, SnapshotFrom } from 'xstate';
-export declare function useSelector<TActor extends ActorRef<any, any>, T>(actor: TActor, selector: (emitted: SnapshotFrom<TActor>) => T, compare?: (a: T, b: T) => boolean): T;
+export declare function useSelector<TActor extends ActorRef<any, any> | undefined, T>(actor: TActor, selector: (emitted: TActor extends ActorRef<any, any> ? SnapshotFrom<TActor> : undefined) => T, compare?: (a: T, b: T) => boolean): T;

package/dist/xstate-react.cjs.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var shim = require('use-sync-external-store/shim');
-var xstate = require('xstate');
 var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
+var xstate = require('xstate');
 var withSelector = require('use-sync-external-store/shim/with-selector');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -131,12 +131,15 @@ function defaultCompare(a, b) {
 }
 function useSelector(actor, selector, compare = defaultCompare) {
   const subscribe = React.useCallback(handleStoreChange => {
+    if (!actor) {
+      return () => {};
+    }
     const {
       unsubscribe
     } = actor.subscribe(handleStoreChange);
     return unsubscribe;
   }, [actor]);
-  const boundGetSnapshot = React.useCallback(() => actor.getSnapshot(), [actor]);
+  const boundGetSnapshot = React.useCallback(() => actor?.getSnapshot(), [actor]);
   const selectedSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, boundGetSnapshot, boundGetSnapshot, selector, compare);
   return selectedSnapshot;
 }
@@ -165,19 +168,22 @@ function shallowEqual(objA, objB) {
   return true;
 }
 
-function createActorContext(actorLogic, interpreterOptions) {
+function createActorContext(actorLogic, actorOptions) {
   const ReactContext = /*#__PURE__*/React__namespace.createContext(null);
   const OriginalProvider = ReactContext.Provider;
   function Provider({
     children,
     logic: providedLogic = actorLogic,
     machine,
-    options: providedOptions = interpreterOptions
+    options: providedOptions
   }) {
     if (machine) {
       throw new Error(`The "machine" prop has been deprecated. Please use "logic" instead.`);
     }
-    const actor = useActorRef(providedLogic, providedOptions);
+    const actor = useActorRef(providedLogic, {
+      ...actorOptions,
+      ...providedOptions
+    });
     return /*#__PURE__*/React__namespace.createElement(OriginalProvider, {
       value: actor,
       children

package/dist/xstate-react.development.cjs.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var shim = require('use-sync-external-store/shim');
-var xstate = require('xstate');
 var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
+var xstate = require('xstate');
 var withSelector = require('use-sync-external-store/shim/with-selector');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -134,12 +134,15 @@ function defaultCompare(a, b) {
 }
 function useSelector(actor, selector, compare = defaultCompare) {
   const subscribe = React.useCallback(handleStoreChange => {
+    if (!actor) {
+      return () => {};
+    }
     const {
       unsubscribe
     } = actor.subscribe(handleStoreChange);
     return unsubscribe;
   }, [actor]);
-  const boundGetSnapshot = React.useCallback(() => actor.getSnapshot(), [actor]);
+  const boundGetSnapshot = React.useCallback(() => actor?.getSnapshot(), [actor]);
   const selectedSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, boundGetSnapshot, boundGetSnapshot, selector, compare);
   return selectedSnapshot;
 }
@@ -168,19 +171,22 @@ function shallowEqual(objA, objB) {
   return true;
 }
 
-function createActorContext(actorLogic, interpreterOptions) {
+function createActorContext(actorLogic, actorOptions) {
   const ReactContext = /*#__PURE__*/React__namespace.createContext(null);
   const OriginalProvider = ReactContext.Provider;
   function Provider({
     children,
     logic: providedLogic = actorLogic,
     machine,
-    options: providedOptions = interpreterOptions
+    options: providedOptions
   }) {
     if (machine) {
       throw new Error(`The "machine" prop has been deprecated. Please use "logic" instead.`);
     }
-    const actor = useActorRef(providedLogic, providedOptions);
+    const actor = useActorRef(providedLogic, {
+      ...actorOptions,
+      ...providedOptions
+    });
     return /*#__PURE__*/React__namespace.createElement(OriginalProvider, {
       value: actor,
       children

package/dist/xstate-react.development.esm.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useEffect, useState, useCallback } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
-import { toObserver, createActor } from 'xstate';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
+import { toObserver, createActor } from 'xstate';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 
 const forEachActor = (actorRef, callback) => {
@@ -108,12 +108,15 @@ function defaultCompare(a, b) {
 }
 function useSelector(actor, selector, compare = defaultCompare) {
   const subscribe = useCallback(handleStoreChange => {
+    if (!actor) {
+      return () => {};
+    }
     const {
       unsubscribe
     } = actor.subscribe(handleStoreChange);
     return unsubscribe;
   }, [actor]);
-  const boundGetSnapshot = useCallback(() => actor.getSnapshot(), [actor]);
+  const boundGetSnapshot = useCallback(() => actor?.getSnapshot(), [actor]);
   const selectedSnapshot = useSyncExternalStoreWithSelector(subscribe, boundGetSnapshot, boundGetSnapshot, selector, compare);
   return selectedSnapshot;
 }
@@ -142,19 +145,22 @@ function shallowEqual(objA, objB) {
   return true;
 }
 
-function createActorContext(actorLogic, interpreterOptions) {
+function createActorContext(actorLogic, actorOptions) {
   const ReactContext = /*#__PURE__*/React.createContext(null);
   const OriginalProvider = ReactContext.Provider;
   function Provider({
     children,
     logic: providedLogic = actorLogic,
     machine,
-    options: providedOptions = interpreterOptions
+    options: providedOptions
   }) {
     if (machine) {
       throw new Error(`The "machine" prop has been deprecated. Please use "logic" instead.`);
     }
-    const actor = useActorRef(providedLogic, providedOptions);
+    const actor = useActorRef(providedLogic, {
+      ...actorOptions,
+      ...providedOptions
+    });
     return /*#__PURE__*/React.createElement(OriginalProvider, {
       value: actor,
       children

package/dist/xstate-react.esm.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useEffect, useState, useCallback } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
-import { toObserver, createActor } from 'xstate';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
+import { toObserver, createActor } from 'xstate';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 
 const forEachActor = (actorRef, callback) => {
@@ -105,12 +105,15 @@ function defaultCompare(a, b) {
 }
 function useSelector(actor, selector, compare = defaultCompare) {
   const subscribe = useCallback(handleStoreChange => {
+    if (!actor) {
+      return () => {};
+    }
     const {
       unsubscribe
     } = actor.subscribe(handleStoreChange);
     return unsubscribe;
   }, [actor]);
-  const boundGetSnapshot = useCallback(() => actor.getSnapshot(), [actor]);
+  const boundGetSnapshot = useCallback(() => actor?.getSnapshot(), [actor]);
   const selectedSnapshot = useSyncExternalStoreWithSelector(subscribe, boundGetSnapshot, boundGetSnapshot, selector, compare);
   return selectedSnapshot;
 }
@@ -139,19 +142,22 @@ function shallowEqual(objA, objB) {
   return true;
 }
 
-function createActorContext(actorLogic, interpreterOptions) {
+function createActorContext(actorLogic, actorOptions) {
   const ReactContext = /*#__PURE__*/React.createContext(null);
   const OriginalProvider = ReactContext.Provider;
   function Provider({
     children,
     logic: providedLogic = actorLogic,
     machine,
-    options: providedOptions = interpreterOptions
+    options: providedOptions
   }) {
     if (machine) {
       throw new Error(`The "machine" prop has been deprecated. Please use "logic" instead.`);
     }
-    const actor = useActorRef(providedLogic, providedOptions);
+    const actor = useActorRef(providedLogic, {
+      ...actorOptions,
+      ...providedOptions
+    });
     return /*#__PURE__*/React.createElement(OriginalProvider, {
       value: actor,
       children

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xstate/react",
-  "version": "4.0.2",
+  "version": "4.1.0",
   "description": "XState tools for React",
   "keywords": [
     "state",
@@ -55,7 +55,7 @@
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "xstate": "^5.4.1"
+    "xstate": "^5.6.2"
   },
   "peerDependenciesMeta": {
     "xstate": {
@@ -76,6 +76,6 @@
     "jsdom-global": "^3.0.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "xstate": "5.4.1"
+    "xstate": "5.6.2"
   }
 }