• [email protected]

• [email protected]

#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.

#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>
  );
}

#4507 9ea542c34 Thanks @Andarist! - The useMachine(machine) hook now returns { snapshot, send, actorRef } instead of { state, send, service }:

const {
- state,
+ snapshot,
  send,
- service
+ actorRef
} = useMachine(machine);

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

#3254 c0b787d2a Thanks @Andarist! - The major version of this package had to be bumped to allow integrating with the typegen. This package will now require TS version 4.0 or greater.

When using hooks from @xstate/svelte it's recommended to skip providing explicit generics to them. Note that that generics list has changed since v1 and we now only accept a single generic, TMachine.

#3172 390a115cd Thanks @Andarist! - Fixed an issue with the internal interpreter created by useMachine being unsubscribed when its subscribers' count went to zero. The lifetime of this interpreter should be bound to the lifetime of the component that has created it.

#3209 8520e203b Thanks @schibrikov! - Added ESM build to fix some bundling issues, more information can be found here

• @xstate/[email protected]

#2614 0f77ec36d Thanks @DavKato! - Added new useSelector(actor, selector), which subscribes to actor and returns a svelte store that represents the selected state derived from selector(snapshot):

<script>
  // It won't be updated unless the selected value changed.
  const value = useSelector(service, (state) => state.context.value);
</script>

<p>{$value}</p>

fe3e859f #2522 Thanks @farskid, @Andarist! - Fixed an issue with actors not being spawned correctly by useMachine and useInterpret when they were defined a lazily evaluated context, like for example here:

createMachine({
  // lazy context
  context: () => ({
    ref: spawn(() => {})
  })
});