@xstate/react 7.0.0-alpha.5 → 7.0.0-alpha.7

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Actor, ActorOptions, AnyActorLogic, SnapshotFrom } from 'xstate';
+/** @public */
 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: () => Actor<TLogic>;

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

@@ -1 +1,2 @@
+/** @public */
 export declare function shallowEqual(objA: any, objB: any): boolean;

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

@@ -1,4 +1,5 @@
 import { Actor, ActorOptions, AnyActorLogic, SnapshotFrom, type ConditionalRequired, type IsNotNever, type RequiredActorOptionsKeys, type RequiredActorOptionsFor } from 'xstate';
+/** @public */
 export declare function useActor<TLogic extends AnyActorLogic>(logic: TLogic, ...[options]: ConditionalRequired<[
     options?: ActorOptions<TLogic> & RequiredActorOptionsFor<TLogic>
 ], IsNotNever<RequiredActorOptionsKeys<TLogic>>>): [SnapshotFrom<TLogic>, Actor<TLogic>['send'], Actor<TLogic>];

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

@@ -3,6 +3,7 @@ export declare function useIdleActorRef<TLogic extends AnyActorLogic>(logic: TLo
     options?: ActorOptions<TLogic> & RequiredActorOptionsFor<TLogic>
 ], IsNotNever<RequiredActorOptionsKeys<TLogic>>>): [Actor<TLogic>, (actorRef: Actor<TLogic>) => void];
 export declare function useActorLifecycle<TLogic extends AnyActorLogic>(actorRef: Actor<TLogic>, setActorRef: (actorRef: Actor<TLogic>) => void, createReplacement: () => Actor<TLogic>): void;
+/** @public */
 export declare function useActorRef<TLogic extends AnyActorLogic>(machine: TLogic, ...[options, observerOrListener]: IsNotNever<RequiredActorOptionsKeys<TLogic>> extends true ? [
     options: ActorOptions<TLogic> & RequiredActorOptionsFor<TLogic>,
     observerOrListener?: Observer<SnapshotFrom<TLogic>> | ((value: SnapshotFrom<TLogic>) => void)

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

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

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

@@ -1,4 +1,5 @@
 import { AnyActorRef } from 'xstate';
+/** @public */
 export declare function useSelector<TActor extends Pick<AnyActorRef, 'subscribe' | 'getSnapshot'> | undefined, T>(actor: TActor, selector: (snapshot: TActor extends {
     getSnapshot(): infer TSnapshot;
 } ? TSnapshot : undefined) => T, compare?: (a: T, b: T) => boolean): T;

package/dist/xstate-react.cjs.js

@@ -31,9 +31,19 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var useIsomorphicLayoutEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicLayoutEffect);
 
+function isStateMachine(logic) {
+  return typeof logic.provide === 'function' && !!logic.config && !!logic.sources;
+}
+
+// The hook updates the sources of its machine on later renders. A per-hook
+// copy keeps those updates from reaching the caller's machine, which may be
+// shared by other actors.
+function ownLogic(logic) {
+  return isStateMachine(logic) ? logic.provide({}) : logic;
+}
 function useIdleActorRef(logic, ...[options]) {
   const [actorRef, setActorRef] = React.useState(() => {
-    return xstate.createActor(logic, options);
+    return xstate.createActor(ownLogic(logic), options);
   });
   // An object whose identity changes only when React Fast Refresh re-renders
   // this component. Fast Refresh ignores dependency lists while it applies an
@@ -51,7 +61,9 @@ function useIdleActorRef(logic, ...[options]) {
     refreshSignalRef.current !== refreshSignal;
     refreshSignalRef.current = refreshSignal;
     if (logic.config === currentLogic.config) {
-      currentLogic.sources = logic.sources;
+      if (isStateMachine(logic) && isStateMachine(currentLogic)) {
+        currentLogic.sources = logic.sources;
+      }
       return;
     }
   });
@@ -91,6 +103,8 @@ function useActorLifecycle(actorRef, setActorRef, createReplacement) {
     };
   }, [actorRef]);
 }
+
+/** @public */
 function useActorRef(machine, ...[options, observerOrListener]) {
   const [actorRef, setActorRef] = useIdleActorRef(machine, options);
   React.useEffect(() => {
@@ -109,6 +123,8 @@ function useActorRef(machine, ...[options, observerOrListener]) {
 function defaultCompare(a, b) {
   return a === b;
 }
+
+/** @public */
 function useSelector(actor, selector, compare = defaultCompare) {
   const subscribe = React.useCallback(handleStoreChange => {
     if (!actor) {
@@ -133,6 +149,7 @@ function useSelector(actor, selector, compare = defaultCompare) {
   return selectedSnapshot;
 }
 
+/** @public */
 function createActorContext(actorLogic, actorOptions) {
   const ReactContext = /*#__PURE__*/React__namespace.createContext(null);
   const OriginalProvider = ReactContext.Provider;
@@ -179,6 +196,8 @@ function is(x, y) {
     return x !== x && y !== y;
   }
 }
+
+/** @public */
 function shallowEqual(objA, objB) {
   if (is(objA, objB)) return true;
   if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
@@ -195,6 +214,7 @@ function shallowEqual(objA, objB) {
   return true;
 }
 
+/** @public */
 function useActor(logic, ...[options]) {
   const [actorRef, setActorRef] = useIdleActorRef(logic, options);
   const getSnapshot = React.useCallback(() => {
@@ -218,7 +238,12 @@ function useActor(logic, ...[options]) {
   return [actorSnapshot, actorRef.send, actorRef];
 }
 
-/** @alias useActor */
+/**
+ * @alias useActor
+ *
+ * @deprecated Use `useActor(machine, options)`.
+ * @public
+ */
 function useMachine(machine, ...[options]) {
   return useActor(machine, options);
 }

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

@@ -31,9 +31,19 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var useIsomorphicLayoutEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicLayoutEffect);
 
+function isStateMachine(logic) {
+  return typeof logic.provide === 'function' && !!logic.config && !!logic.sources;
+}
+
+// The hook updates the sources of its machine on later renders. A per-hook
+// copy keeps those updates from reaching the caller's machine, which may be
+// shared by other actors.
+function ownLogic(logic) {
+  return isStateMachine(logic) ? logic.provide({}) : logic;
+}
 function useIdleActorRef(logic, ...[options]) {
   const [actorRef, setActorRef] = React.useState(() => {
-    return xstate.createActor(logic, options);
+    return xstate.createActor(ownLogic(logic), options);
   });
   // An object whose identity changes only when React Fast Refresh re-renders
   // this component. Fast Refresh ignores dependency lists while it applies an
@@ -51,7 +61,9 @@ function useIdleActorRef(logic, ...[options]) {
     const refreshed = refreshSignalRef.current !== refreshSignal;
     refreshSignalRef.current = refreshSignal;
     if (logic.config === currentLogic.config) {
-      currentLogic.sources = logic.sources;
+      if (isStateMachine(logic) && isStateMachine(currentLogic)) {
+        currentLogic.sources = logic.sources;
+      }
       return;
     }
 
@@ -59,8 +71,9 @@ function useIdleActorRef(logic, ...[options]) {
     // defines the machine. Keep the running actor and carry its live snapshot
     // over to the new machine; start a fresh actor if it cannot be carried.
     if (refreshed) {
-      if (!xstate._hotSwapActorLogic(actorRef, logic)) {
-        setActorRef(xstate.createActor(logic, options));
+      const nextLogic = ownLogic(logic);
+      if (!xstate._hotSwapActorLogic(actorRef, nextLogic)) {
+        setActorRef(xstate.createActor(nextLogic, options));
       }
     }
   });
@@ -100,6 +113,8 @@ function useActorLifecycle(actorRef, setActorRef, createReplacement) {
     };
   }, [actorRef]);
 }
+
+/** @public */
 function useActorRef(machine, ...[options, observerOrListener]) {
   const [actorRef, setActorRef] = useIdleActorRef(machine, options);
   React.useEffect(() => {
@@ -118,6 +133,8 @@ function useActorRef(machine, ...[options, observerOrListener]) {
 function defaultCompare(a, b) {
   return a === b;
 }
+
+/** @public */
 function useSelector(actor, selector, compare = defaultCompare) {
   const subscribe = React.useCallback(handleStoreChange => {
     if (!actor) {
@@ -142,6 +159,7 @@ function useSelector(actor, selector, compare = defaultCompare) {
   return selectedSnapshot;
 }
 
+/** @public */
 function createActorContext(actorLogic, actorOptions) {
   const ReactContext = /*#__PURE__*/React__namespace.createContext(null);
   const OriginalProvider = ReactContext.Provider;
@@ -188,6 +206,8 @@ function is(x, y) {
     return x !== x && y !== y;
   }
 }
+
+/** @public */
 function shallowEqual(objA, objB) {
   if (is(objA, objB)) return true;
   if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
@@ -204,6 +224,7 @@ function shallowEqual(objA, objB) {
   return true;
 }
 
+/** @public */
 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.`);
@@ -230,7 +251,12 @@ function useActor(logic, ...[options]) {
   return [actorSnapshot, actorRef.send, actorRef];
 }
 
-/** @alias useActor */
+/**
+ * @alias useActor
+ *
+ * @deprecated Use `useActor(machine, options)`.
+ * @public
+ */
 function useMachine(machine, ...[options]) {
   return useActor(machine, options);
 }

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

@@ -5,9 +5,19 @@ import { _toObserver, createActor, _hotSwapActorLogic } from 'xstate';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
+function isStateMachine(logic) {
+  return typeof logic.provide === 'function' && !!logic.config && !!logic.sources;
+}
+
+// The hook updates the sources of its machine on later renders. A per-hook
+// copy keeps those updates from reaching the caller's machine, which may be
+// shared by other actors.
+function ownLogic(logic) {
+  return isStateMachine(logic) ? logic.provide({}) : logic;
+}
 function useIdleActorRef(logic, ...[options]) {
   const [actorRef, setActorRef] = useState(() => {
-    return createActor(logic, options);
+    return createActor(ownLogic(logic), options);
   });
   // An object whose identity changes only when React Fast Refresh re-renders
   // this component. Fast Refresh ignores dependency lists while it applies an
@@ -25,7 +35,9 @@ function useIdleActorRef(logic, ...[options]) {
     const refreshed = refreshSignalRef.current !== refreshSignal;
     refreshSignalRef.current = refreshSignal;
     if (logic.config === currentLogic.config) {
-      currentLogic.sources = logic.sources;
+      if (isStateMachine(logic) && isStateMachine(currentLogic)) {
+        currentLogic.sources = logic.sources;
+      }
       return;
     }
 
@@ -33,8 +45,9 @@ function useIdleActorRef(logic, ...[options]) {
     // defines the machine. Keep the running actor and carry its live snapshot
     // over to the new machine; start a fresh actor if it cannot be carried.
     if (refreshed) {
-      if (!_hotSwapActorLogic(actorRef, logic)) {
-        setActorRef(createActor(logic, options));
+      const nextLogic = ownLogic(logic);
+      if (!_hotSwapActorLogic(actorRef, nextLogic)) {
+        setActorRef(createActor(nextLogic, options));
       }
     }
   });
@@ -74,6 +87,8 @@ function useActorLifecycle(actorRef, setActorRef, createReplacement) {
     };
   }, [actorRef]);
 }
+
+/** @public */
 function useActorRef(machine, ...[options, observerOrListener]) {
   const [actorRef, setActorRef] = useIdleActorRef(machine, options);
   useEffect(() => {
@@ -92,6 +107,8 @@ function useActorRef(machine, ...[options, observerOrListener]) {
 function defaultCompare(a, b) {
   return a === b;
 }
+
+/** @public */
 function useSelector(actor, selector, compare = defaultCompare) {
   const subscribe = useCallback(handleStoreChange => {
     if (!actor) {
@@ -116,6 +133,7 @@ function useSelector(actor, selector, compare = defaultCompare) {
   return selectedSnapshot;
 }
 
+/** @public */
 function createActorContext(actorLogic, actorOptions) {
   const ReactContext = /*#__PURE__*/React.createContext(null);
   const OriginalProvider = ReactContext.Provider;
@@ -162,6 +180,8 @@ function is(x, y) {
     return x !== x && y !== y;
   }
 }
+
+/** @public */
 function shallowEqual(objA, objB) {
   if (is(objA, objB)) return true;
   if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
@@ -178,6 +198,7 @@ function shallowEqual(objA, objB) {
   return true;
 }
 
+/** @public */
 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.`);
@@ -204,7 +225,12 @@ function useActor(logic, ...[options]) {
   return [actorSnapshot, actorRef.send, actorRef];
 }
 
-/** @alias useActor */
+/**
+ * @alias useActor
+ *
+ * @deprecated Use `useActor(machine, options)`.
+ * @public
+ */
 function useMachine(machine, ...[options]) {
   return useActor(machine, options);
 }

package/dist/xstate-react.esm.js

@@ -5,9 +5,19 @@ import { _toObserver, createActor } from 'xstate';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
+function isStateMachine(logic) {
+  return typeof logic.provide === 'function' && !!logic.config && !!logic.sources;
+}
+
+// The hook updates the sources of its machine on later renders. A per-hook
+// copy keeps those updates from reaching the caller's machine, which may be
+// shared by other actors.
+function ownLogic(logic) {
+  return isStateMachine(logic) ? logic.provide({}) : logic;
+}
 function useIdleActorRef(logic, ...[options]) {
   const [actorRef, setActorRef] = useState(() => {
-    return createActor(logic, options);
+    return createActor(ownLogic(logic), options);
   });
   // An object whose identity changes only when React Fast Refresh re-renders
   // this component. Fast Refresh ignores dependency lists while it applies an
@@ -25,7 +35,9 @@ function useIdleActorRef(logic, ...[options]) {
     refreshSignalRef.current !== refreshSignal;
     refreshSignalRef.current = refreshSignal;
     if (logic.config === currentLogic.config) {
-      currentLogic.sources = logic.sources;
+      if (isStateMachine(logic) && isStateMachine(currentLogic)) {
+        currentLogic.sources = logic.sources;
+      }
       return;
     }
   });
@@ -65,6 +77,8 @@ function useActorLifecycle(actorRef, setActorRef, createReplacement) {
     };
   }, [actorRef]);
 }
+
+/** @public */
 function useActorRef(machine, ...[options, observerOrListener]) {
   const [actorRef, setActorRef] = useIdleActorRef(machine, options);
   useEffect(() => {
@@ -83,6 +97,8 @@ function useActorRef(machine, ...[options, observerOrListener]) {
 function defaultCompare(a, b) {
   return a === b;
 }
+
+/** @public */
 function useSelector(actor, selector, compare = defaultCompare) {
   const subscribe = useCallback(handleStoreChange => {
     if (!actor) {
@@ -107,6 +123,7 @@ function useSelector(actor, selector, compare = defaultCompare) {
   return selectedSnapshot;
 }
 
+/** @public */
 function createActorContext(actorLogic, actorOptions) {
   const ReactContext = /*#__PURE__*/React.createContext(null);
   const OriginalProvider = ReactContext.Provider;
@@ -153,6 +170,8 @@ function is(x, y) {
     return x !== x && y !== y;
   }
 }
+
+/** @public */
 function shallowEqual(objA, objB) {
   if (is(objA, objB)) return true;
   if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
@@ -169,6 +188,7 @@ function shallowEqual(objA, objB) {
   return true;
 }
 
+/** @public */
 function useActor(logic, ...[options]) {
   const [actorRef, setActorRef] = useIdleActorRef(logic, options);
   const getSnapshot = useCallback(() => {
@@ -192,7 +212,12 @@ function useActor(logic, ...[options]) {
   return [actorSnapshot, actorRef.send, actorRef];
 }
 
-/** @alias useActor */
+/**
+ * @alias useActor
+ *
+ * @deprecated Use `useActor(machine, options)`.
+ * @public
+ */
 function useMachine(machine, ...[options]) {
   return useActor(machine, options);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xstate/react",
-  "version": "7.0.0-alpha.5",
+  "version": "7.0.0-alpha.7",
   "description": "XState tools for React",
   "keywords": [
     "state",
@@ -54,12 +54,7 @@
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "xstate": "^6.0.0-alpha.68"
-  },
-  "peerDependenciesMeta": {
-    "xstate": {
-      "optional": true
-    }
+    "xstate": "^6.0.0-alpha.73"
   },
   "dependencies": {
     "use-isomorphic-layout-effect": "^1.1.2",
@@ -74,7 +69,7 @@
     "react-dom": "^19.0.0",
     "rxjs": "^7.8.1",
     "zod": "^3.25.51",
-    "xstate": "^6.0.0-alpha.68"
+    "xstate": "^6.0.0-alpha.73"
   },
   "scripts": {}
 }