@xstate/svelte@3.0.5

Patch Changes

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

@xstate/store@2.6.0

Minor Changes

• #5079 25963966c394fc904dc9b701a420b6e204ebe7f7 Thanks @davidkpiano! - The createStoreWithProducer(…) function now uses the new configuration API:

  import { createStoreWithProducer } from '@xstate/store';
  // DEPRECATED API
  // const store = createStoreWithProducer(
  //   producer,
  //   {
  //     count: 0
  //   },
  //   {
  //     inc: (context, event) => {
  //       context.count++;
  //     }
  //   }
  // );
  
  const store = createStoreWithProducer(producer, {
    context: {
      count: 0
    },
    on: {
      inc: (context, event) => {
        context.count++;
      }
    }
  });

@xstate/solid@0.2.2

Patch Changes

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

@xstate/react@4.1.3

Patch Changes

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

@xstate/graph@2.0.1

Patch Changes

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

@xstate/store@2.5.0

Minor Changes

• #5085 51437a4d036029ab4ff74cb52721178b3e525c48 Thanks @davidkpiano! - The shallowEqual comparator has been added for selector comparison:

  import { shallowEqual } from '@xstate/store';
  import { useSelector } from '@xstate/store/react';
  
  import { store } from './store';
  
  function MyComponent() {
    const state = useSelector(
      store,
      (s) => {
        return s.items.filter(/* ... */);
      },
      shallowEqual
    );
  
    // ...
  }

@xstate/store@2.4.0

Minor Changes

• #5064 84aca37d0b02cb9cd5a32c8fd09e487bd8fe2a47 Thanks @davidkpiano! - There is a new single-argument config API for createStore(config):

  const store = createStore({
    // Types (optional)
    types: {
      emitted: {} as { type: 'incremented' }
    },
  
    // Context
    context: { count: 0 },
  
    // Transitions
    on: {
      inc: (context, event: { by: number }, enq) => {
        enq.emit({ type: 'incremented' });
  
        return { count: context.count + event.by };
      },
      dec: (context, event: { by: number }) => ({
        count: context.count - event.by
      })
    }
  });

• #5064 84aca37d0b02cb9cd5a32c8fd09e487bd8fe2a47 Thanks @davidkpiano! - You can now emit events from a store:

  import { createStore } from '@xstate/store';
  
  const store = createStore({
    context: {
      count: 0
    },
    on: {
      increment: (context, event, { emit }) => {
        emit({ type: 'incremented' });
        return { count: context.count + 1 };
      }
    }
  });
  
  store.on('incremented', () => {
    console.log('incremented!');
  });

xstate@5.18.1

Patch Changes

• #5055 ad38c35c37 Thanks @SandroMaglione! - Exported RequiredActorOptionsKeys type meant to be used by integration packages like @xstate/react

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