@xstate/fsm

Minor Changes

• #5020 e974797b0 Thanks @with-heart! - Added the EventFromStore utility type which extracts the type of events from a store:

  import { createStore, type EventFromStore } from '@xstate/store';
  
  const store = createStore(
    { count: 0 },
    {
      add: (context, event: { addend: number }) => ({
        count: context.count + event.addend
      }),
      multiply: (context, event: { multiplier: number }) => ({
        count: context.count * event.multiplier
      })
    }
  );
  
  type StoreEvent = EventFromStore<typeof store>;
  //   ^? { type: 'add'; addend: number } | { type: 'multiply'; multiplier: number }
  

  ---

  EventFromStore allows us to create our own utility types which operate on a store's event types.

  For example, we could create a type EventByType which extracts the specific type of store event where Type matches the event's type property:

  import { type EventFromStore, type Store } from '@xstate/store';
  
  /**
   * Extract the event where `Type` matches the event's `type` from the given
   * `Store`.
   */
  type EventByType<
    TStore extends Store<any, any>,
    // creates a type-safe relationship between `Type` and the `type` keys of the
    // store's events
    Type extends EventFromStore<TStore>['type']
  > = Extract<EventFromStore<TStore>, { type: Type }>;
  

  Here's how the type works with the store we defined in the first example:

  // we get autocomplete listing the store's event `type` values on the second
  // type parameter
  type AddEvent = EventByType<typeof store, 'add'>;
  //   ^? { type: 'add'; addend: number }
  
  type MultiplyEvent = EventByType<typeof store, 'multiply'>;
  //   ^? { type: 'multiply'; multiplier: number }
  
  // the second type parameter is type-safe, meaning we get a type error if the
  // value isn't a valid event `type`
  type DivideEvent = EventByType<typeof store, 'divide'>;
  // Type '"divide"' does not satisfy the constraint '"add" | "multiply"'.ts(2344)
  

  Building on that, we could create a type EventInputByType to extract a specific event's "input" type (the event type without the type property):

  import { type EventFromStore, type Store } from '@xstate/store';
  
  /**
   * Extract a specific store event's "input" type (the event type without the
   * `type` property).
   */
  type EventInputByType<
    TStore extends Store<any, any>,
    Type extends EventFromStore<TStore>['type']
  > = Omit<EventByType<TStore, Type>, 'type'>;
  

  And here's how EventInputByType works with our example store:

  type AddInput = EventInputByType<typeof store, 'add'>;
  //   ^? { addend: number }
  
  type MultiplyInput = EventInputByType<typeof store, 'multiply'>;
  //   ^? { multiplier: number }
  
  type DivideInput = EventInputByType<typeof store, 'divide'>;
  // Type '"divide"' does not satisfy the constraint '"add" | "multiply"'.ts(2344)
  

  Putting it all together, we can use EventInputByType to create a type-safe transition function for each of our store's defined events:

  import { createStore, type EventFromStore, type Store } from '@xstate/store';
  
  /**
   * Extract the event where `Type` matches the event's `type` from the given
   * `Store`.
   */
  type EventByType<
    TStore extends Store<any, any>,
    Type extends EventFromStore<TStore>['type']
  > = Extract<EventFromStore<TStore>, { type: Type }>;
  
  /**
   * Extract a specific store event's "input" type (the event type without the
   * `type` property).
   */
  type EventInputByType<
    TStore extends Store<any, any>,
    Type extends EventFromStore<TStore>['type']
  > = Omit<EventByType<TStore, Type>, 'type'>;
  
  const store = createStore(
    { count: 0 },
    {
      add: (context, event: { addend: number }) => ({
        count: context.count + event.addend
      }),
      multiply: (context, event: { multiplier: number }) => ({
        count: context.count * event.multiplier
      })
    }
  );
  
  const add = (input: EventInputByType<typeof store, 'add'>) =>
    store.send({ type: 'add', addend: input.addend });
  
  add({ addend: 1 }); // sends { type: 'add', addend: 1 }
  
  const multiply = (input: EventInputByType<typeof store, 'multiply'>) =>
    store.send({ type: 'multiply', multiplier: input.multiplier });
  
  multiply({ multiplier: 2 }); // sends { type: 'multiply', multiplier: 2 }
  

  Happy typing!

Patch Changes

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

Major Changes

• #5512 063416d Thanks @davidkpiano! - Modernize Store v4 package entrypoints.

  Use framework-specific packages such as @xstate/store-react and @xstate/store-solid instead of @xstate/store/react or @xstate/store/solid. The Store packages now publish ESM package entrypoints.

• #5512 063416d Thanks @davidkpiano! - Add createStoreLogic(...) for reusable store definitions, and support creating stores from logic in framework hooks.

  const counterLogic = createStoreLogic({
    context: (input: { initialCount: number }) => ({
      count: input.initialCount
    }),
    on: {
      inc: (context) => ({ count: context.count + 1 })
    }
  });
  
  const store = useStore(counterLogic, { initialCount: 0 });
  

  If a store logic requires input, the input argument is also required:

  useStore(counterLogic, { initialCount: 0 });
  

  Framework hooks also preserve schema-derived context, event, and emitted event types when creating stores from config objects.

Minor Changes

• #5512 063416d Thanks @davidkpiano! - Add reusable atom configs and framework atom-state helpers.

  createAtomConfig(...) creates an inert atom definition that can be instantiated with its createAtom(...) method or React/Preact/Vue/Solid's useAtomState(...). These helpers return the current framework-native value and live atom instance, and also work with existing atom instances.

  const countConfig = createAtomConfig((input: { initialCount: number }) => {
    return input.initialCount;
  });
  
  function Counter() {
    const [count, countAtom] = useAtomState(countConfig, { initialCount: 0 });
  
    return (
      <button onClick={() => countAtom.set((count) => count + 1)}>
        {count}
      </button>
    );
  }
  

Patch Changes

• Updated dependencies [063416d, 063416d, 063416d, 063416d, 063416d, 063416d, 063416d, 063416d, 063416d, 063416d, 063416d, 063416d]:
  • @xstate/store@4.0.0

Minor Changes

• #5452 9992398 Thanks @davidkpiano! - Ensured that compare argument is a direct comparison function.

Patch Changes

• Updated dependencies [b453b2d72ba12d0fe46a995f9ccced8000fd0cc9]:
  • xstate@5.19.3

Patch Changes

• d6498eb Thanks @davidkpiano! - Added README.md

Patch Changes

• Updated dependencies [8c4b70652acaef2702f32435362e4755679a516d]:
  • xstate@5.19.0

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.

Minor Changes

• #3727 5fb3c68 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.

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

• #4748 d73ac8e48 Thanks @Andarist! - The createService(machine) hook has been removed; use the useActorRef(logic) hook instead.

• #4748 d73ac8e48 Thanks @Andarist! - The fromActorRef(actorRef) has been added. You can use it to get an accessor for reactive snapshot of any existing actorRef.

• #4748 d73ac8e48 Thanks @Andarist! - The useActor hook accepts an actor logic now and not an existing actorRef. It's used to creating a new instance of an actor and it works just like useMachine used to work (useMachine is now just an alias of useActor).