@xstate/react 4.0.0-beta.10 → 4.0.0-beta.12

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

@@ -1,12 +1,16 @@
 import * as React from 'react';
 import { ActorRefFrom, AnyStateMachine, SnapshotFrom, ActorOptions, AreAllImplementationsAssumedToBeProvided, MarkAllImplementationsAsProvided, StateMachine, AnyActorLogic } from 'xstate';
-type ToMachinesWithProvidedImplementations<TMachine extends AnyStateMachine> = TMachine extends StateMachine<infer TContext, infer TEvent, infer TActor, infer TAction, infer TGuard, infer TDelay, infer TTag, infer TInput, infer TOutput, infer TResolvedTypesMeta> ? StateMachine<TContext, TEvent, TActor, TAction, TGuard, TDelay, TTag, TInput, TOutput, AreAllImplementationsAssumedToBeProvided<TResolvedTypesMeta> extends false ? MarkAllImplementationsAsProvided<TResolvedTypesMeta> : TResolvedTypesMeta> : never;
+type ToMachinesWithProvidedImplementations<TMachine extends AnyStateMachine> = TMachine extends StateMachine<infer TContext, infer TEvent, infer TChildren, infer TActor, infer TAction, infer TGuard, infer TDelay, infer TStateValue, infer TTag, infer TInput, infer TOutput, infer TResolvedTypesMeta> ? StateMachine<TContext, TEvent, TChildren, TActor, TAction, TGuard, TDelay, TStateValue, TTag, TInput, TOutput, AreAllImplementationsAssumedToBeProvided<TResolvedTypesMeta> extends false ? MarkAllImplementationsAsProvided<TResolvedTypesMeta> : TResolvedTypesMeta> : never;
 export declare function createActorContext<TLogic extends AnyActorLogic>(actorLogic: TLogic, interpreterOptions?: ActorOptions<TLogic>): {
     useSelector: <T>(selector: (snapshot: SnapshotFrom<TLogic>) => T, compare?: (a: T, b: T) => boolean) => T;
     useActorRef: () => ActorRefFrom<TLogic>;
     Provider: (props: {
         children: React.ReactNode;
         options?: ActorOptions<TLogic>;
+        /**
+         * @deprecated Use `logic` instead.
+         */
+        machine?: never;
     } & (TLogic extends AnyStateMachine ? AreAllImplementationsAssumedToBeProvided<TLogic['__TResolvedTypesMeta']> extends true ? {
         logic?: TLogic;
     } : {

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

@@ -1,14 +1,3 @@
-import { AnyActorLogic, AnyActor, AnyStateMachine, AreAllImplementationsAssumedToBeProvided, InternalMachineImplementations, ActorRefFrom, ActorOptions, Observer, StateFrom, SnapshotFrom, TODO } from 'xstate';
-export declare function useIdleInterpreter(machine: AnyActorLogic, options: Partial<ActorOptions<AnyActorLogic>>): AnyActor;
-type RestParams<TLogic extends AnyActorLogic> = TLogic extends AnyStateMachine ? AreAllImplementationsAssumedToBeProvided<TLogic['__TResolvedTypesMeta']> extends false ? [
-    options: ActorOptions<TLogic> & InternalMachineImplementations<TLogic['__TContext'], TLogic['__TEvent'], TODO, TODO, TODO, TLogic['__TResolvedTypesMeta'], true>,
-    observerOrListener?: Observer<StateFrom<TLogic>> | ((value: StateFrom<TLogic>) => void)
-] : [
-    options?: ActorOptions<TLogic> & InternalMachineImplementations<TLogic['__TContext'], TLogic['__TEvent'], TODO, TODO, TODO, TLogic['__TResolvedTypesMeta']>,
-    observerOrListener?: Observer<StateFrom<TLogic>> | ((value: StateFrom<TLogic>) => void)
-] : [
-    options?: ActorOptions<TLogic>,
-    observerOrListener?: Observer<SnapshotFrom<TLogic>> | ((value: SnapshotFrom<TLogic>) => void)
-];
-export declare function useActorRef<TLogic extends AnyActorLogic>(machine: TLogic, ...[options, observerOrListener]: RestParams<TLogic>): ActorRefFrom<TLogic>;
-export {};
+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>;

package/dist/xstate-react.cjs.js

@@ -31,29 +31,60 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var useIsomorphicLayoutEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicLayoutEffect);
 
-function useConstant(fn) {
-  const ref = React__namespace.useRef();
-  if (!ref.current) {
-    ref.current = {
-      v: fn()
-    };
+const forEachActor = (actorRef, callback) => {
+  callback(actorRef);
+  const children = actorRef.getSnapshot().children;
+  if (children) {
+    Object.values(children).forEach(child => {
+      forEachActor(child, callback);
+    });
   }
-  return ref.current.v;
+};
+function stopRootWithRehydration(actorRef) {
+  // persist snapshot here in a custom way allows us to persist inline actors and to preserve actor references
+  // we do it to avoid setState in useEffect when the effect gets "reconnected"
+  // this currently only happens in Strict Effects but it simulates the Offscreen aka Activity API
+  // it also just allows us to end up with a somewhat more predictable behavior for the users
+  const persistedSnapshots = [];
+  forEachActor(actorRef, ref => {
+    persistedSnapshots.push([ref, ref.getSnapshot()]);
+    // muting observers allow us to avoid `useSelector` from being notified about the stopped snapshot
+    // React reconnects its subscribers (from the useSyncExternalStore) on its own
+    // and userland subscibers should basically always do the same anyway
+    // as each subscription should have its own cleanup logic and that should be called each such reconnect
+    ref.observers = new Set();
+  });
+  actorRef.stop();
+  persistedSnapshots.forEach(([ref, snapshot]) => {
+    ref._processingStatus = 0;
+    ref._snapshot = snapshot;
+  });
 }
 
-function useIdleInterpreter(machine, options) {
-  const actorRef = useConstant(() => {
-    return xstate.createActor(machine, options);
+function useIdleActorRef(logic, options) {
+  let [[currentConfig, actorRef], setCurrent] = React.useState(() => {
+    const actorRef = xstate.createActor(logic, options);
+    return [logic.config, actorRef];
   });
+  if (logic.config !== currentConfig) {
+    const newActorRef = xstate.createActor(logic, {
+      ...options,
+      snapshot: actorRef.getPersistedSnapshot({
+        __unsafeAllowInlineActors: true
+      })
+    });
+    setCurrent([logic.config, newActorRef]);
+    actorRef = newActorRef;
+  }
 
   // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
   useIsomorphicLayoutEffect__default["default"](() => {
-    actorRef.logic.implementations = machine.implementations;
+    actorRef.logic.implementations = logic.implementations;
   });
   return actorRef;
 }
-function useActorRef(machine, ...[options = {}, observerOrListener]) {
-  const actorRef = useIdleInterpreter(machine, options);
+function useActorRef(machine, options = {}, observerOrListener) {
+  const actorRef = useIdleActorRef(machine, options);
   React.useEffect(() => {
     if (!observerOrListener) {
       return;
@@ -66,16 +97,14 @@ function useActorRef(machine, ...[options = {}, observerOrListener]) {
   React.useEffect(() => {
     actorRef.start();
     return () => {
-      actorRef.stop();
-      actorRef.status = xstate.ActorStatus.NotStarted;
-      actorRef._initState();
+      stopRootWithRehydration(actorRef);
     };
-  }, []);
+  }, [actorRef]);
   return actorRef;
 }
 
 function useActor(logic, options = {}) {
-  const actorRef = useIdleInterpreter(logic, options);
+  const actorRef = useIdleActorRef(logic, options);
   const getSnapshot = React.useCallback(() => {
     return actorRef.getSnapshot();
   }, [actorRef]);
@@ -89,9 +118,7 @@ function useActor(logic, options = {}) {
   React.useEffect(() => {
     actorRef.start();
     return () => {
-      actorRef.stop();
-      actorRef.status = xstate.ActorStatus.NotStarted;
-      actorRef._initState();
+      stopRootWithRehydration(actorRef);
     };
   }, [actorRef]);
   return [actorSnapshot, actorRef.send, actorRef];

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

@@ -31,35 +31,60 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var useIsomorphicLayoutEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicLayoutEffect);
 
-function useConstant(fn) {
-  const ref = React__namespace.useRef();
-  if (!ref.current) {
-    ref.current = {
-      v: fn()
-    };
+const forEachActor = (actorRef, callback) => {
+  callback(actorRef);
+  const children = actorRef.getSnapshot().children;
+  if (children) {
+    Object.values(children).forEach(child => {
+      forEachActor(child, callback);
+    });
   }
-  return ref.current.v;
+};
+function stopRootWithRehydration(actorRef) {
+  // persist snapshot here in a custom way allows us to persist inline actors and to preserve actor references
+  // we do it to avoid setState in useEffect when the effect gets "reconnected"
+  // this currently only happens in Strict Effects but it simulates the Offscreen aka Activity API
+  // it also just allows us to end up with a somewhat more predictable behavior for the users
+  const persistedSnapshots = [];
+  forEachActor(actorRef, ref => {
+    persistedSnapshots.push([ref, ref.getSnapshot()]);
+    // muting observers allow us to avoid `useSelector` from being notified about the stopped snapshot
+    // React reconnects its subscribers (from the useSyncExternalStore) on its own
+    // and userland subscibers should basically always do the same anyway
+    // as each subscription should have its own cleanup logic and that should be called each such reconnect
+    ref.observers = new Set();
+  });
+  actorRef.stop();
+  persistedSnapshots.forEach(([ref, snapshot]) => {
+    ref._processingStatus = 0;
+    ref._snapshot = snapshot;
+  });
 }
 
-function useIdleInterpreter(machine, options) {
-  {
-    const [initialMachine] = React.useState(machine);
-    if (machine.config !== initialMachine.config) {
-      console.warn(`Actor logic has changed between renders. This is not supported and may lead to invalid snapshots.`);
-    }
-  }
-  const actorRef = useConstant(() => {
-    return xstate.createActor(machine, options);
+function useIdleActorRef(logic, options) {
+  let [[currentConfig, actorRef], setCurrent] = React.useState(() => {
+    const actorRef = xstate.createActor(logic, options);
+    return [logic.config, actorRef];
   });
+  if (logic.config !== currentConfig) {
+    const newActorRef = xstate.createActor(logic, {
+      ...options,
+      snapshot: actorRef.getPersistedSnapshot({
+        __unsafeAllowInlineActors: true
+      })
+    });
+    setCurrent([logic.config, newActorRef]);
+    actorRef = newActorRef;
+  }
 
   // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
   useIsomorphicLayoutEffect__default["default"](() => {
-    actorRef.logic.implementations = machine.implementations;
+    actorRef.logic.implementations = logic.implementations;
   });
   return actorRef;
 }
-function useActorRef(machine, ...[options = {}, observerOrListener]) {
-  const actorRef = useIdleInterpreter(machine, options);
+function useActorRef(machine, options = {}, observerOrListener) {
+  const actorRef = useIdleActorRef(machine, options);
   React.useEffect(() => {
     if (!observerOrListener) {
       return;
@@ -72,11 +97,9 @@ function useActorRef(machine, ...[options = {}, observerOrListener]) {
   React.useEffect(() => {
     actorRef.start();
     return () => {
-      actorRef.stop();
-      actorRef.status = xstate.ActorStatus.NotStarted;
-      actorRef._initState();
+      stopRootWithRehydration(actorRef);
     };
-  }, []);
+  }, [actorRef]);
   return actorRef;
 }
 
@@ -84,7 +107,7 @@ 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 = useIdleInterpreter(logic, options);
+  const actorRef = useIdleActorRef(logic, options);
   const getSnapshot = React.useCallback(() => {
     return actorRef.getSnapshot();
   }, [actorRef]);
@@ -98,9 +121,7 @@ function useActor(logic, options = {}) {
   React.useEffect(() => {
     actorRef.start();
     return () => {
-      actorRef.stop();
-      actorRef.status = xstate.ActorStatus.NotStarted;
-      actorRef._initState();
+      stopRootWithRehydration(actorRef);
     };
   }, [actorRef]);
   return [actorSnapshot, actorRef.send, actorRef];

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

@@ -1,39 +1,64 @@
 import * as React from 'react';
 import { useEffect, useState, useCallback } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
-import { toObserver, ActorStatus, createActor } from 'xstate';
+import { toObserver, createActor } from 'xstate';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 
-function useConstant(fn) {
-  const ref = React.useRef();
-  if (!ref.current) {
-    ref.current = {
-      v: fn()
-    };
+const forEachActor = (actorRef, callback) => {
+  callback(actorRef);
+  const children = actorRef.getSnapshot().children;
+  if (children) {
+    Object.values(children).forEach(child => {
+      forEachActor(child, callback);
+    });
   }
-  return ref.current.v;
+};
+function stopRootWithRehydration(actorRef) {
+  // persist snapshot here in a custom way allows us to persist inline actors and to preserve actor references
+  // we do it to avoid setState in useEffect when the effect gets "reconnected"
+  // this currently only happens in Strict Effects but it simulates the Offscreen aka Activity API
+  // it also just allows us to end up with a somewhat more predictable behavior for the users
+  const persistedSnapshots = [];
+  forEachActor(actorRef, ref => {
+    persistedSnapshots.push([ref, ref.getSnapshot()]);
+    // muting observers allow us to avoid `useSelector` from being notified about the stopped snapshot
+    // React reconnects its subscribers (from the useSyncExternalStore) on its own
+    // and userland subscibers should basically always do the same anyway
+    // as each subscription should have its own cleanup logic and that should be called each such reconnect
+    ref.observers = new Set();
+  });
+  actorRef.stop();
+  persistedSnapshots.forEach(([ref, snapshot]) => {
+    ref._processingStatus = 0;
+    ref._snapshot = snapshot;
+  });
 }
 
-function useIdleInterpreter(machine, options) {
-  {
-    const [initialMachine] = useState(machine);
-    if (machine.config !== initialMachine.config) {
-      console.warn(`Actor logic has changed between renders. This is not supported and may lead to invalid snapshots.`);
-    }
-  }
-  const actorRef = useConstant(() => {
-    return createActor(machine, options);
+function useIdleActorRef(logic, options) {
+  let [[currentConfig, actorRef], setCurrent] = useState(() => {
+    const actorRef = createActor(logic, options);
+    return [logic.config, actorRef];
   });
+  if (logic.config !== currentConfig) {
+    const newActorRef = createActor(logic, {
+      ...options,
+      snapshot: actorRef.getPersistedSnapshot({
+        __unsafeAllowInlineActors: true
+      })
+    });
+    setCurrent([logic.config, newActorRef]);
+    actorRef = newActorRef;
+  }
 
   // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
   useIsomorphicLayoutEffect(() => {
-    actorRef.logic.implementations = machine.implementations;
+    actorRef.logic.implementations = logic.implementations;
   });
   return actorRef;
 }
-function useActorRef(machine, ...[options = {}, observerOrListener]) {
-  const actorRef = useIdleInterpreter(machine, options);
+function useActorRef(machine, options = {}, observerOrListener) {
+  const actorRef = useIdleActorRef(machine, options);
   useEffect(() => {
     if (!observerOrListener) {
       return;
@@ -46,11 +71,9 @@ function useActorRef(machine, ...[options = {}, observerOrListener]) {
   useEffect(() => {
     actorRef.start();
     return () => {
-      actorRef.stop();
-      actorRef.status = ActorStatus.NotStarted;
-      actorRef._initState();
+      stopRootWithRehydration(actorRef);
     };
-  }, []);
+  }, [actorRef]);
   return actorRef;
 }
 
@@ -58,7 +81,7 @@ 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 = useIdleInterpreter(logic, options);
+  const actorRef = useIdleActorRef(logic, options);
   const getSnapshot = useCallback(() => {
     return actorRef.getSnapshot();
   }, [actorRef]);
@@ -72,9 +95,7 @@ function useActor(logic, options = {}) {
   useEffect(() => {
     actorRef.start();
     return () => {
-      actorRef.stop();
-      actorRef.status = ActorStatus.NotStarted;
-      actorRef._initState();
+      stopRootWithRehydration(actorRef);
     };
   }, [actorRef]);
   return [actorSnapshot, actorRef.send, actorRef];

package/dist/xstate-react.esm.js

@@ -1,33 +1,64 @@
 import * as React from 'react';
-import { useEffect, useCallback } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
-import { toObserver, ActorStatus, createActor } from 'xstate';
+import { toObserver, createActor } from 'xstate';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 
-function useConstant(fn) {
-  const ref = React.useRef();
-  if (!ref.current) {
-    ref.current = {
-      v: fn()
-    };
+const forEachActor = (actorRef, callback) => {
+  callback(actorRef);
+  const children = actorRef.getSnapshot().children;
+  if (children) {
+    Object.values(children).forEach(child => {
+      forEachActor(child, callback);
+    });
   }
-  return ref.current.v;
+};
+function stopRootWithRehydration(actorRef) {
+  // persist snapshot here in a custom way allows us to persist inline actors and to preserve actor references
+  // we do it to avoid setState in useEffect when the effect gets "reconnected"
+  // this currently only happens in Strict Effects but it simulates the Offscreen aka Activity API
+  // it also just allows us to end up with a somewhat more predictable behavior for the users
+  const persistedSnapshots = [];
+  forEachActor(actorRef, ref => {
+    persistedSnapshots.push([ref, ref.getSnapshot()]);
+    // muting observers allow us to avoid `useSelector` from being notified about the stopped snapshot
+    // React reconnects its subscribers (from the useSyncExternalStore) on its own
+    // and userland subscibers should basically always do the same anyway
+    // as each subscription should have its own cleanup logic and that should be called each such reconnect
+    ref.observers = new Set();
+  });
+  actorRef.stop();
+  persistedSnapshots.forEach(([ref, snapshot]) => {
+    ref._processingStatus = 0;
+    ref._snapshot = snapshot;
+  });
 }
 
-function useIdleInterpreter(machine, options) {
-  const actorRef = useConstant(() => {
-    return createActor(machine, options);
+function useIdleActorRef(logic, options) {
+  let [[currentConfig, actorRef], setCurrent] = useState(() => {
+    const actorRef = createActor(logic, options);
+    return [logic.config, actorRef];
   });
+  if (logic.config !== currentConfig) {
+    const newActorRef = createActor(logic, {
+      ...options,
+      snapshot: actorRef.getPersistedSnapshot({
+        __unsafeAllowInlineActors: true
+      })
+    });
+    setCurrent([logic.config, newActorRef]);
+    actorRef = newActorRef;
+  }
 
   // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
   useIsomorphicLayoutEffect(() => {
-    actorRef.logic.implementations = machine.implementations;
+    actorRef.logic.implementations = logic.implementations;
   });
   return actorRef;
 }
-function useActorRef(machine, ...[options = {}, observerOrListener]) {
-  const actorRef = useIdleInterpreter(machine, options);
+function useActorRef(machine, options = {}, observerOrListener) {
+  const actorRef = useIdleActorRef(machine, options);
   useEffect(() => {
     if (!observerOrListener) {
       return;
@@ -40,16 +71,14 @@ function useActorRef(machine, ...[options = {}, observerOrListener]) {
   useEffect(() => {
     actorRef.start();
     return () => {
-      actorRef.stop();
-      actorRef.status = ActorStatus.NotStarted;
-      actorRef._initState();
+      stopRootWithRehydration(actorRef);
     };
-  }, []);
+  }, [actorRef]);
   return actorRef;
 }
 
 function useActor(logic, options = {}) {
-  const actorRef = useIdleInterpreter(logic, options);
+  const actorRef = useIdleActorRef(logic, options);
   const getSnapshot = useCallback(() => {
     return actorRef.getSnapshot();
   }, [actorRef]);
@@ -63,9 +92,7 @@ function useActor(logic, options = {}) {
   useEffect(() => {
     actorRef.start();
     return () => {
-      actorRef.stop();
-      actorRef.status = ActorStatus.NotStarted;
-      actorRef._initState();
+      stopRootWithRehydration(actorRef);
     };
   }, [actorRef]);
   return [actorSnapshot, actorRef.send, actorRef];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xstate/react",
-  "version": "4.0.0-beta.10",
+  "version": "4.0.0-beta.12",
   "description": "XState tools for React",
   "keywords": [
     "state",
@@ -55,7 +55,7 @@
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "xstate": "^5.0.0-beta.29"
+    "xstate": "^5.0.0-beta.54"
   },
   "peerDependenciesMeta": {
     "xstate": {
@@ -76,6 +76,6 @@
     "jsdom-global": "^3.0.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "xstate": "5.0.0-beta.29"
+    "xstate": "5.0.0-beta.54"
   }
 }