@xstate/vue@3.1.3

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.

@xstate/svelte@3.0.4

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.

@xstate/solid@0.2.1

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.

@xstate/react@4.1.2

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.

xstate@5.18.0

Minor Changes

• #5042 54c9d9e6a4 Thanks @boneskull! - waitFor() now accepts a {signal: AbortSignal} in WaitForOptions

• #5006 1ab974547f Thanks @davidkpiano! - The state value typings for setup state machine actors (setup({}).createMachine({ ... })) have been improved to represent the actual expected state values.

  const machine = setup({}).createMachine({
    initial: 'green',
    states: {
      green: {},
      yellow: {},
      red: {
        initial: 'walk',
        states: {
          walk: {},
          wait: {},
          stop: {}
        }
      },
      emergency: {
        type: 'parallel',
        states: {
          main: {
            initial: 'blinking',
            states: {
              blinking: {}
            }
          },
          cross: {
            initial: 'blinking',
            states: {
              blinking: {}
            }
          }
        }
      }
    }
  });
  
  const actor = createActor(machine).start();
  
  const stateValue = actor.getSnapshot().value;
  
  if (stateValue === 'green') {
    // ...
  } else if (stateValue === 'yellow') {
    // ...
  } else if ('red' in stateValue) {
    stateValue;
    // {
    //   red: "walk" | "wait" | "stop";
    // }
  } else {
    stateValue;
    // {
    //   emergency: {
    //     main: "blinking";
    //     cross: "blinking";
    //   };
    // }
  }

Patch Changes

• #5054 853f6daa0b Thanks @davidkpiano! - The CallbackLogicFunction type (previously InvokeCallback) is now exported. This is the callback function that you pass into fromCallback(callbackLogicFn) to create an actor from a callback function.

  import { type CallbackLogicFunction } from 'xstate';
  
  // ...

@xstate/store@2.3.0

Minor Changes

• #5056 8c35da9a72 Thanks @steveadams! - You can now use the xstate/store package with SolidJS.

  Import useSelector from @xstate/store/solid. Select the data you want via useSelector(…) and send events using store.send(eventObject):

  import { donutStore } from './donutStore.ts';
  import { useSelector } from '@xstate/store/solid';
  
  function DonutCounter() {
    const donutCount = useSelector(donutStore, (state) => state.context.donuts);
  
    return (
      <div>
        <button onClick={() => donutStore.send({ type: 'addDonut' })}>
          Add donut ({donutCount()})
        </button>
      </div>
    );
  }

@xstate/store@2.2.1

Patch Changes

• b740aafdb1 Thanks @davidkpiano! - Fixed some small issues from #5027 regarding XState types being imported

xstate@5.17.4

Patch Changes

• #5039 d6df8fb470 Thanks @Andarist! - Fixed an inference issue that prevented emit used directly in setup (or bare createMachine) to benefit from types.emitted types.

@xstate/store@2.2.0

Minor Changes

• #5027 758a78711d Thanks @davidkpiano! - You can now inspect XState stores using the .inspect(inspector) method:

  import { someStore } from './someStore';
  
  someStore.inspect((inspEv) => {
    console.log(inspEv);
    // logs "@xstate.event" events and "@xstate.snapshot" events
    // whenever an event is sent to the store
  });
  // The "@xstate.actor" event is immediately logged

xstate@5.17.3

Patch Changes

• #5034 7bed484c38 Thanks @davidkpiano! - Fix EventFrom and ContextFrom types