Update xstate monorepo to v5 (major)

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@xstate/react (source)	3.2.2 -> 5.0.1
xstate (source)	4.38.0 -> 5.19.1

---

Release Notes

statelyai/xstate (@​xstate/react)

v5.0.1

Compare Source

Patch Changes

• #​4551 5041764b2 Thanks @​laurakalbag! - Flag that docs in this repo are deprecated in favour of docs at stately.ai/docs/xstate

v5.0.0

Compare Source

Patch Changes

• #​5109 d67b71dd25d457a2a59f2c943db13f50fab7ec3d Thanks @​davidkpiano! - Add React 19 as a peer dependency

• Updated dependencies [8c4b70652acaef2702f32435362e4755679a516d]:

  • xstate@5.19.0

v4.1.3

Compare Source

Patch Changes

• Updated dependencies [25963966c394fc904dc9b701a420b6e204ebe7f7]:
  • xstate@5.18.2

v4.1.2

Compare Source

Patch Changes

• #​5055 ad38c35c37 Thanks @​SandroMaglione! - Updated types of useActor, useMachine, and useActorRef to require input when defined inside types/input.

  Previously even when input was defined inside types, useActor, useMachine, and useActorRef would not make the input required:

  const machine = setup({
    types: {
      input: {} as { value: number }
    }
  }).createMachine({});
  
  function App() {
    // Event if `input` is not defined, `useMachine` works at compile time, but risks crashing at runtime
    const _ = useMachine(machine);
    return <></>;
  }

  With this change the above code will show a type error, since input is now required:

  const machine = setup({
    types: {
      input: {} as { value: number }
    }
  }).createMachine({});
  
  function App() {
    const _ = useMachine(machine, {
      input: { value: 1 } // Now input is required at compile time!
    });
    return <></>;
  }

  This avoids runtime errors when forgetting to pass input when defined inside types.

v4.1.1

Compare Source

Patch Changes

• #​4844 5aa6eb05c Thanks @​davidkpiano! - The useSelector(…) hook from @xstate/react is now compatible with stores from @xstate/store.

  import { createStore } from '@​xstate/store';
  import { useSelector } from '@​xstate/react';
  
  const store = createStore(
    {
      count: 0
    },
    {
      inc: {
        count: (context) => context.count + 1
      }
    }
  );
  
  function Counter() {
    // Note that this `useSelector` is from `@xstate/react`,
    // not `@xstate/store/react`
    const count = useSelector(store, (state) => state.context.count);
  
    return (
      <div>
        <button onClick={() => store.send({ type: 'inc' })}>{count}</button>
      </div>
    );
  }

v4.1.0

Compare Source

Minor Changes

• #​4231 c2402e7bc Thanks @​davidkpiano! - The actor passed to useSelector(actor, selector) is now allowed to be undefined for an actor that may not exist yet. For actors that may be undefined, the snapshot provided to the selector function can also be undefined:

  const count = useSelector(maybeActor, (snapshot) => {
    // `snapshot` may be undefined
    return snapshot?.context.count;
  });
  
  count; // number | undefined

v4.0.3

Compare Source

Patch Changes

• #​4695 52900a084 Thanks @​davidkpiano! - Options in createActorContext are now properly merged with provider options. Previously, provider options replaced the actor options.

  const { inspect } = createBrowserInspector();
  
  const SomeContext = createActorContext(someMachine, { inspect });
  
  // ...
  // Options are now merged:
  // { inspect: inspect, input: 10 }
  <SomeContext.Provider options={{ input: 10 }}>
    {/* ... */}
  </SomeContext.Provider>;

v4.0.2

Compare Source

Patch Changes

• #​4600 1f2ccb97c Thanks @​davidkpiano! - Typegen-based types for detecting missing implementations have been removed internally.

v4.0.1

Compare Source

Patch Changes

• #​4497 d7f220225 Thanks @​davidkpiano! - Fix an issue where after transitions do not work in React strict mode. Delayed events (including from after transitions) should now work as expected in all React modes.

v4.0.0

Compare Source

Major Changes

• #​3947 5fa3a0c74 Thanks @​davidkpiano! - Removed the ability to pass a factory function as argument to useMachine.

• #​4006 42df9a536 Thanks @​davidkpiano! - useActorRef is introduced, which returns an ActorRef from actor logic:

  const actorRef = useActorRef(machine, { ... });
  const anotherActorRef = useActorRef(fromPromise(...));

  ~~useMachine~~ is deprecated in favor of useActor, which works with machines and any other kind of logic

  -const [state, send] = useMachine(machine);
  +const [state, send] = useActor(machine);
  const [state, send] = useActor(fromTransition(...));

  ~~useSpawn~~ is removed in favor of useActorRef

  -const actorRef = useSpawn(machine);
  +const actorRef = useActorRef(machine);
  
  The previous use of `useActor(actorRef)` is now replaced with just using the `actorRef` directly, and with `useSelector`:
  
  ```diff
  -const [state, send] = useActor(actorRef);
  +const state = useSelector(actorRef, s => s);
  // actorRef.send(...)

• #​4050 fc88dc8e6 Thanks @​davidkpiano! - The options prop has been added (back) to the Context.Provider component returned from createActorContext:

  const SomeContext = createActorContext(someMachine);
  
  // ...
  
  <SomeContext.Provider options={{ input: 42 }}>
    {/* ... */}
  </SomeContext.Provider>;

• #​4006 42df9a536 Thanks @​davidkpiano! - useActor has been removed from the created actor context, you should be able to replace its usage with MyCtx.useSelector and MyCtx.useActorRef.

• #​4265 1153b3f9a Thanks @​davidkpiano! - FSM-related functions have been removed.

• #​3947 5fa3a0c74 Thanks @​davidkpiano! - Implementations for machines on useMachine hooks should go directly on the machine via machine.provide(...), and are no longer allowed to be passed in as options.

  -const [state, send] = useMachine(machine, {
  -  actions: {
  -    // ...
  -  }
  -});
  +const [state, send] = useMachine(machine.provide({
  +  actions: {
  +    // ...
  +  }
  +}));

• #​3148 7a68cbb61 Thanks @​davidkpiano! - Removed getSnapshot parameter from hooks. It is expected that the received actorRef has to have a getSnapshot method on it that can be used internally.

Minor Changes

• #​3727 5fb3c683d Thanks @​Andarist! - exports field has been added to the package.json manifest. It limits what files can be imported from a package - it's no longer possible to import from files that are not considered to be a part of the public API.
• #​4240 409552cf8 Thanks @​davidkpiano! - The useMachine function is an alias of useActor.
• #​4436 340aee643 Thanks @​Andarist! - Fast refresh now works as expected for most use-cases.
• #​4050 fc88dc8e6 Thanks @​davidkpiano! - The observerOrListener argument has been removed from the 3rd argument of createActorContext(logic, options).

---

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about these updates again.

---

• If you want to rebase/retry this PR, check this box

---

This PR was generated by Mend Renovate. View the repository job log.

[netlify]

✅ Deploy Preview for superstore-redwood-stripe ready!

Name	Link
🔨 Latest commit	c331df4
🔍 Latest deploy log	https://app.netlify.com/sites/superstore-redwood-stripe/deploys/676b28a0a99cce000889070e
😎 Deploy Preview	https://deploy-preview-476--superstore-redwood-stripe.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.