@xstate/react 4.1.1 → 4.1.3

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

@@ -6,9 +6,7 @@ export declare function createActorContext<TLogic extends AnyActorLogic>(actorLo
     Provider: (props: {
         children: React.ReactNode;
         options?: ActorOptions<TLogic>;
-        /**
-         * @deprecated Use `logic` instead.
-         */
+        /** @deprecated Use `logic` instead. */
         machine?: never;
         logic?: TLogic;
     }) => React.ReactElement<any, any>;

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

@@ -1,6 +1,6 @@
+export { createActorContext } from "./createActorContext.js";
+export { shallowEqual } from "./shallowEqual.js";
 export { useActor } from "./useActor.js";
 export { useActorRef } from "./useActorRef.js";
 export { useSelector } from "./useSelector.js";
-export { shallowEqual } from "./shallowEqual.js";
-export { createActorContext } from "./createActorContext.js";
 export { useMachine } from "./useMachine.js";

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

@@ -1,2 +1,6 @@
-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>];
+import { Actor, ActorOptions, AnyActorLogic, SnapshotFrom, type ConditionalRequired, type IsNotNever, type RequiredActorOptionsKeys } from 'xstate';
+export declare function useActor<TLogic extends AnyActorLogic>(logic: TLogic, ...[options]: ConditionalRequired<[
+    options?: ActorOptions<TLogic> & {
+        [K in RequiredActorOptionsKeys<TLogic>]: unknown;
+    }
+], IsNotNever<RequiredActorOptionsKeys<TLogic>>>): [SnapshotFrom<TLogic>, Actor<TLogic>['send'], Actor<TLogic>];

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

@@ -1,3 +1,15 @@
-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>;
+import { Actor, ActorOptions, AnyActorLogic, Observer, SnapshotFrom, type ConditionalRequired, type IsNotNever, type RequiredActorOptionsKeys } from 'xstate';
+export declare function useIdleActorRef<TLogic extends AnyActorLogic>(logic: TLogic, ...[options]: ConditionalRequired<[
+    options?: ActorOptions<TLogic> & {
+        [K in RequiredActorOptionsKeys<TLogic>]: unknown;
+    }
+], IsNotNever<RequiredActorOptionsKeys<TLogic>>>): Actor<TLogic>;
+export declare function useActorRef<TLogic extends AnyActorLogic>(machine: TLogic, ...[options, observerOrListener]: IsNotNever<RequiredActorOptionsKeys<TLogic>> extends true ? [
+    options: ActorOptions<TLogic> & {
+        [K in RequiredActorOptionsKeys<TLogic>]: unknown;
+    },
+    observerOrListener?: Observer<SnapshotFrom<TLogic>> | ((value: SnapshotFrom<TLogic>) => void)
+] : [
+    options?: ActorOptions<TLogic>,
+    observerOrListener?: Observer<SnapshotFrom<TLogic>> | ((value: SnapshotFrom<TLogic>) => void)
+]): Actor<TLogic>;

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

@@ -1,5 +1,7 @@
-import { Actor, ActorOptions, AnyStateMachine, StateFrom } from 'xstate';
-/**
- * @alias useActor
- */
-export declare function useMachine<TMachine extends AnyStateMachine>(machine: TMachine, options?: ActorOptions<TMachine>): [StateFrom<TMachine>, Actor<TMachine>['send'], Actor<TMachine>];
+import { Actor, ActorOptions, AnyStateMachine, StateFrom, type ConditionalRequired, type IsNotNever, type RequiredActorOptionsKeys } from 'xstate';
+/** @alias useActor */
+export declare function useMachine<TMachine extends AnyStateMachine>(machine: TMachine, ...[options]: ConditionalRequired<[
+    options?: ActorOptions<TMachine> & {
+        [K in RequiredActorOptionsKeys<TMachine>]: unknown;
+    }
+], IsNotNever<RequiredActorOptionsKeys<TMachine>>>): [StateFrom<TMachine>, Actor<TMachine>['send'], Actor<TMachine>];

package/dist/xstate-react.cjs.d.mts

@@ -1,2 +1,2 @@
 export * from "./declarations/src/index.js";
-//# sourceMappingURL=xstate-react.cjs.d.mts.map
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoieHN0YXRlLXJlYWN0LmNqcy5kLm10cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4vZGVjbGFyYXRpb25zL3NyYy9pbmRleC5kLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIn0=

package/dist/xstate-react.cjs.d.ts

@@ -1,2 +1,2 @@
 export * from "./declarations/src/index";
-//# sourceMappingURL=xstate-react.cjs.d.ts.map
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoieHN0YXRlLXJlYWN0LmNqcy5kLnRzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi9kZWNsYXJhdGlvbnMvc3JjL2luZGV4LmQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEifQ==

package/dist/xstate-react.cjs.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var shim = require('use-sync-external-store/shim');
 var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
 var xstate = require('xstate');
 var withSelector = require('use-sync-external-store/shim/with-selector');
+var shim = require('use-sync-external-store/shim');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -63,7 +63,7 @@ function stopRootWithRehydration(actorRef) {
   });
 }
 
-function useIdleActorRef(logic, options) {
+function useIdleActorRef(logic, ...[options]) {
   let [[currentConfig, actorRef], setCurrent] = React.useState(() => {
     const actorRef = xstate.createActor(logic, options);
     return [logic.config, actorRef];
@@ -85,7 +85,7 @@ function useIdleActorRef(logic, options) {
   });
   return actorRef;
 }
-function useActorRef(machine, options = {}, observerOrListener) {
+function useActorRef(machine, ...[options, observerOrListener]) {
   const actorRef = useIdleActorRef(machine, options);
   React.useEffect(() => {
     if (!observerOrListener) {
@@ -105,27 +105,6 @@ function useActorRef(machine, options = {}, observerOrListener) {
   return actorRef;
 }
 
-function useActor(logic, options = {}) {
-  const actorRef = useIdleActorRef(logic, options);
-  const getSnapshot = React.useCallback(() => {
-    return actorRef.getSnapshot();
-  }, [actorRef]);
-  const subscribe = React.useCallback(handleStoreChange => {
-    const {
-      unsubscribe
-    } = actorRef.subscribe(handleStoreChange);
-    return unsubscribe;
-  }, [actorRef]);
-  const actorSnapshot = shim.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  React.useEffect(() => {
-    actorRef.start();
-    return () => {
-      stopRootWithRehydration(actorRef);
-    };
-  }, [actorRef]);
-  return [actorSnapshot, actorRef.send, actorRef];
-}
-
 function defaultCompare(a, b) {
   return a === b;
 }
@@ -144,30 +123,6 @@ function useSelector(actor, selector, compare = defaultCompare) {
   return selectedSnapshot;
 }
 
-// From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
-function is(x, y) {
-  if (x === y) {
-    return x !== 0 || y !== 0 || 1 / x === 1 / y;
-  } else {
-    return x !== x && y !== y;
-  }
-}
-function shallowEqual(objA, objB) {
-  if (is(objA, objB)) return true;
-  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
-    return false;
-  }
-  const keysA = Object.keys(objA);
-  const keysB = Object.keys(objB);
-  if (keysA.length !== keysB.length) return false;
-  for (let i = 0; i < keysA.length; i++) {
-    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
-      return false;
-    }
-  }
-  return true;
-}
-
 function createActorContext(actorLogic, actorOptions) {
   const ReactContext = /*#__PURE__*/React__namespace.createContext(null);
   const OriginalProvider = ReactContext.Provider;
@@ -210,10 +165,53 @@ function createActorContext(actorLogic, actorOptions) {
   };
 }
 
-/**
- * @alias useActor
- */
-function useMachine(machine, options = {}) {
+// From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
+function is(x, y) {
+  if (x === y) {
+    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+  } else {
+    return x !== x && y !== y;
+  }
+}
+function shallowEqual(objA, objB) {
+  if (is(objA, objB)) return true;
+  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) return false;
+  for (let i = 0; i < keysA.length; i++) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function useActor(logic, ...[options]) {
+  const actorRef = useIdleActorRef(logic, options);
+  const getSnapshot = React.useCallback(() => {
+    return actorRef.getSnapshot();
+  }, [actorRef]);
+  const subscribe = React.useCallback(handleStoreChange => {
+    const {
+      unsubscribe
+    } = actorRef.subscribe(handleStoreChange);
+    return unsubscribe;
+  }, [actorRef]);
+  const actorSnapshot = shim.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  React.useEffect(() => {
+    actorRef.start();
+    return () => {
+      stopRootWithRehydration(actorRef);
+    };
+  }, [actorRef]);
+  return [actorSnapshot, actorRef.send, actorRef];
+}
+
+/** @alias useActor */
+function useMachine(machine, ...[options]) {
   return useActor(machine, options);
 }
 

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var shim = require('use-sync-external-store/shim');
 var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
 var xstate = require('xstate');
 var withSelector = require('use-sync-external-store/shim/with-selector');
+var shim = require('use-sync-external-store/shim');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -63,7 +63,7 @@ function stopRootWithRehydration(actorRef) {
   });
 }
 
-function useIdleActorRef(logic, options) {
+function useIdleActorRef(logic, ...[options]) {
   let [[currentConfig, actorRef], setCurrent] = React.useState(() => {
     const actorRef = xstate.createActor(logic, options);
     return [logic.config, actorRef];
@@ -85,7 +85,7 @@ function useIdleActorRef(logic, options) {
   });
   return actorRef;
 }
-function useActorRef(machine, options = {}, observerOrListener) {
+function useActorRef(machine, ...[options, observerOrListener]) {
   const actorRef = useIdleActorRef(machine, options);
   React.useEffect(() => {
     if (!observerOrListener) {
@@ -105,30 +105,6 @@ function useActorRef(machine, options = {}, observerOrListener) {
   return actorRef;
 }
 
-function useActor(logic, options = {}) {
-  if (!!logic && 'send' in logic && typeof logic.send === 'function') {
-    throw new Error(`useActor() expects actor logic (e.g. a machine), but received an ActorRef. Use the useSelector(actorRef, ...) hook instead to read the ActorRef's snapshot.`);
-  }
-  const actorRef = useIdleActorRef(logic, options);
-  const getSnapshot = React.useCallback(() => {
-    return actorRef.getSnapshot();
-  }, [actorRef]);
-  const subscribe = React.useCallback(handleStoreChange => {
-    const {
-      unsubscribe
-    } = actorRef.subscribe(handleStoreChange);
-    return unsubscribe;
-  }, [actorRef]);
-  const actorSnapshot = shim.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  React.useEffect(() => {
-    actorRef.start();
-    return () => {
-      stopRootWithRehydration(actorRef);
-    };
-  }, [actorRef]);
-  return [actorSnapshot, actorRef.send, actorRef];
-}
-
 function defaultCompare(a, b) {
   return a === b;
 }
@@ -147,30 +123,6 @@ function useSelector(actor, selector, compare = defaultCompare) {
   return selectedSnapshot;
 }
 
-// From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
-function is(x, y) {
-  if (x === y) {
-    return x !== 0 || y !== 0 || 1 / x === 1 / y;
-  } else {
-    return x !== x && y !== y;
-  }
-}
-function shallowEqual(objA, objB) {
-  if (is(objA, objB)) return true;
-  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
-    return false;
-  }
-  const keysA = Object.keys(objA);
-  const keysB = Object.keys(objB);
-  if (keysA.length !== keysB.length) return false;
-  for (let i = 0; i < keysA.length; i++) {
-    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
-      return false;
-    }
-  }
-  return true;
-}
-
 function createActorContext(actorLogic, actorOptions) {
   const ReactContext = /*#__PURE__*/React__namespace.createContext(null);
   const OriginalProvider = ReactContext.Provider;
@@ -213,10 +165,56 @@ function createActorContext(actorLogic, actorOptions) {
   };
 }
 
-/**
- * @alias useActor
- */
-function useMachine(machine, options = {}) {
+// From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
+function is(x, y) {
+  if (x === y) {
+    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+  } else {
+    return x !== x && y !== y;
+  }
+}
+function shallowEqual(objA, objB) {
+  if (is(objA, objB)) return true;
+  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) return false;
+  for (let i = 0; i < keysA.length; i++) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function useActor(logic, ...[options]) {
+  if (!!logic && 'send' in logic && typeof logic.send === 'function') {
+    throw new Error(`useActor() expects actor logic (e.g. a machine), but received an ActorRef. Use the useSelector(actorRef, ...) hook instead to read the ActorRef's snapshot.`);
+  }
+  const actorRef = useIdleActorRef(logic, options);
+  const getSnapshot = React.useCallback(() => {
+    return actorRef.getSnapshot();
+  }, [actorRef]);
+  const subscribe = React.useCallback(handleStoreChange => {
+    const {
+      unsubscribe
+    } = actorRef.subscribe(handleStoreChange);
+    return unsubscribe;
+  }, [actorRef]);
+  const actorSnapshot = shim.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  React.useEffect(() => {
+    actorRef.start();
+    return () => {
+      stopRootWithRehydration(actorRef);
+    };
+  }, [actorRef]);
+  return [actorSnapshot, actorRef.send, actorRef];
+}
+
+/** @alias useActor */
+function useMachine(machine, ...[options]) {
   return useActor(machine, options);
 }
 

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { useEffect, useState, useCallback } from 'react';
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
 import { toObserver, createActor } from 'xstate';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
 const forEachActor = (actorRef, callback) => {
   callback(actorRef);
@@ -37,7 +37,7 @@ function stopRootWithRehydration(actorRef) {
   });
 }
 
-function useIdleActorRef(logic, options) {
+function useIdleActorRef(logic, ...[options]) {
   let [[currentConfig, actorRef], setCurrent] = useState(() => {
     const actorRef = createActor(logic, options);
     return [logic.config, actorRef];
@@ -59,7 +59,7 @@ function useIdleActorRef(logic, options) {
   });
   return actorRef;
 }
-function useActorRef(machine, options = {}, observerOrListener) {
+function useActorRef(machine, ...[options, observerOrListener]) {
   const actorRef = useIdleActorRef(machine, options);
   useEffect(() => {
     if (!observerOrListener) {
@@ -79,30 +79,6 @@ function useActorRef(machine, options = {}, observerOrListener) {
   return actorRef;
 }
 
-function useActor(logic, options = {}) {
-  if (!!logic && 'send' in logic && typeof logic.send === 'function') {
-    throw new Error(`useActor() expects actor logic (e.g. a machine), but received an ActorRef. Use the useSelector(actorRef, ...) hook instead to read the ActorRef's snapshot.`);
-  }
-  const actorRef = useIdleActorRef(logic, options);
-  const getSnapshot = useCallback(() => {
-    return actorRef.getSnapshot();
-  }, [actorRef]);
-  const subscribe = useCallback(handleStoreChange => {
-    const {
-      unsubscribe
-    } = actorRef.subscribe(handleStoreChange);
-    return unsubscribe;
-  }, [actorRef]);
-  const actorSnapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  useEffect(() => {
-    actorRef.start();
-    return () => {
-      stopRootWithRehydration(actorRef);
-    };
-  }, [actorRef]);
-  return [actorSnapshot, actorRef.send, actorRef];
-}
-
 function defaultCompare(a, b) {
   return a === b;
 }
@@ -121,30 +97,6 @@ function useSelector(actor, selector, compare = defaultCompare) {
   return selectedSnapshot;
 }
 
-// From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
-function is(x, y) {
-  if (x === y) {
-    return x !== 0 || y !== 0 || 1 / x === 1 / y;
-  } else {
-    return x !== x && y !== y;
-  }
-}
-function shallowEqual(objA, objB) {
-  if (is(objA, objB)) return true;
-  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
-    return false;
-  }
-  const keysA = Object.keys(objA);
-  const keysB = Object.keys(objB);
-  if (keysA.length !== keysB.length) return false;
-  for (let i = 0; i < keysA.length; i++) {
-    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
-      return false;
-    }
-  }
-  return true;
-}
-
 function createActorContext(actorLogic, actorOptions) {
   const ReactContext = /*#__PURE__*/React.createContext(null);
   const OriginalProvider = ReactContext.Provider;
@@ -187,10 +139,56 @@ function createActorContext(actorLogic, actorOptions) {
   };
 }
 
-/**
- * @alias useActor
- */
-function useMachine(machine, options = {}) {
+// From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
+function is(x, y) {
+  if (x === y) {
+    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+  } else {
+    return x !== x && y !== y;
+  }
+}
+function shallowEqual(objA, objB) {
+  if (is(objA, objB)) return true;
+  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) return false;
+  for (let i = 0; i < keysA.length; i++) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function useActor(logic, ...[options]) {
+  if (!!logic && 'send' in logic && typeof logic.send === 'function') {
+    throw new Error(`useActor() expects actor logic (e.g. a machine), but received an ActorRef. Use the useSelector(actorRef, ...) hook instead to read the ActorRef's snapshot.`);
+  }
+  const actorRef = useIdleActorRef(logic, options);
+  const getSnapshot = useCallback(() => {
+    return actorRef.getSnapshot();
+  }, [actorRef]);
+  const subscribe = useCallback(handleStoreChange => {
+    const {
+      unsubscribe
+    } = actorRef.subscribe(handleStoreChange);
+    return unsubscribe;
+  }, [actorRef]);
+  const actorSnapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  useEffect(() => {
+    actorRef.start();
+    return () => {
+      stopRootWithRehydration(actorRef);
+    };
+  }, [actorRef]);
+  return [actorSnapshot, actorRef.send, actorRef];
+}
+
+/** @alias useActor */
+function useMachine(machine, ...[options]) {
   return useActor(machine, options);
 }
 

package/dist/xstate-react.esm.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { useEffect, useState, useCallback } from 'react';
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
 import { toObserver, createActor } from 'xstate';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
 const forEachActor = (actorRef, callback) => {
   callback(actorRef);
@@ -37,7 +37,7 @@ function stopRootWithRehydration(actorRef) {
   });
 }
 
-function useIdleActorRef(logic, options) {
+function useIdleActorRef(logic, ...[options]) {
   let [[currentConfig, actorRef], setCurrent] = useState(() => {
     const actorRef = createActor(logic, options);
     return [logic.config, actorRef];
@@ -59,7 +59,7 @@ function useIdleActorRef(logic, options) {
   });
   return actorRef;
 }
-function useActorRef(machine, options = {}, observerOrListener) {
+function useActorRef(machine, ...[options, observerOrListener]) {
   const actorRef = useIdleActorRef(machine, options);
   useEffect(() => {
     if (!observerOrListener) {
@@ -79,27 +79,6 @@ function useActorRef(machine, options = {}, observerOrListener) {
   return actorRef;
 }
 
-function useActor(logic, options = {}) {
-  const actorRef = useIdleActorRef(logic, options);
-  const getSnapshot = useCallback(() => {
-    return actorRef.getSnapshot();
-  }, [actorRef]);
-  const subscribe = useCallback(handleStoreChange => {
-    const {
-      unsubscribe
-    } = actorRef.subscribe(handleStoreChange);
-    return unsubscribe;
-  }, [actorRef]);
-  const actorSnapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  useEffect(() => {
-    actorRef.start();
-    return () => {
-      stopRootWithRehydration(actorRef);
-    };
-  }, [actorRef]);
-  return [actorSnapshot, actorRef.send, actorRef];
-}
-
 function defaultCompare(a, b) {
   return a === b;
 }
@@ -118,30 +97,6 @@ function useSelector(actor, selector, compare = defaultCompare) {
   return selectedSnapshot;
 }
 
-// From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
-function is(x, y) {
-  if (x === y) {
-    return x !== 0 || y !== 0 || 1 / x === 1 / y;
-  } else {
-    return x !== x && y !== y;
-  }
-}
-function shallowEqual(objA, objB) {
-  if (is(objA, objB)) return true;
-  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
-    return false;
-  }
-  const keysA = Object.keys(objA);
-  const keysB = Object.keys(objB);
-  if (keysA.length !== keysB.length) return false;
-  for (let i = 0; i < keysA.length; i++) {
-    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
-      return false;
-    }
-  }
-  return true;
-}
-
 function createActorContext(actorLogic, actorOptions) {
   const ReactContext = /*#__PURE__*/React.createContext(null);
   const OriginalProvider = ReactContext.Provider;
@@ -184,10 +139,53 @@ function createActorContext(actorLogic, actorOptions) {
   };
 }
 
-/**
- * @alias useActor
- */
-function useMachine(machine, options = {}) {
+// From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
+function is(x, y) {
+  if (x === y) {
+    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+  } else {
+    return x !== x && y !== y;
+  }
+}
+function shallowEqual(objA, objB) {
+  if (is(objA, objB)) return true;
+  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) return false;
+  for (let i = 0; i < keysA.length; i++) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function useActor(logic, ...[options]) {
+  const actorRef = useIdleActorRef(logic, options);
+  const getSnapshot = useCallback(() => {
+    return actorRef.getSnapshot();
+  }, [actorRef]);
+  const subscribe = useCallback(handleStoreChange => {
+    const {
+      unsubscribe
+    } = actorRef.subscribe(handleStoreChange);
+    return unsubscribe;
+  }, [actorRef]);
+  const actorSnapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  useEffect(() => {
+    actorRef.start();
+    return () => {
+      stopRootWithRehydration(actorRef);
+    };
+  }, [actorRef]);
+  return [actorSnapshot, actorRef.send, actorRef];
+}
+
+/** @alias useActor */
+function useMachine(machine, ...[options]) {
   return useActor(machine, options);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xstate/react",
-  "version": "4.1.1",
+  "version": "4.1.3",
   "description": "XState tools for React",
   "keywords": [
     "state",
@@ -49,13 +49,12 @@
     "type": "git",
     "url": "git+ssh://git@github.com/statelyai/xstate.git"
   },
-  "scripts": {},
   "bugs": {
     "url": "https://github.com/statelyai/xstate/issues"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "xstate": "^5.11.0"
+    "xstate": "^5.18.2"
   },
   "peerDependenciesMeta": {
     "xstate": {
@@ -67,15 +66,15 @@
     "use-sync-external-store": "^1.2.0"
   },
   "devDependencies": {
-    "@testing-library/react": "^14.2.1",
-    "@types/jsdom": "^12.2.3",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/use-sync-external-store": "^0.0.3",
-    "jsdom": "^14.0.0",
-    "jsdom-global": "^3.0.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "xstate": "5.11.0"
-  }
-}
+    "rxjs": "^7.8.1",
+    "@xstate-repo/jest-utils": "^0.0.0",
+    "xstate": "^5.18.2"
+  },
+  "scripts": {}
+}

package/dist/xstate-react.cjs.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"xstate-react.cjs.d.mts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}

package/dist/xstate-react.cjs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"xstate-react.cjs.d.ts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}