Accessing typegen information attached to an xstate-machine in library code

[UberMouse]

I write a library built on top of xstate, xstate-tree, for binding react views to xstate machines. As part of this library there is an abstraction layer between the machine and the view so the view does not have any direct reference to the state machine. This is done by creating selectors that take in context and inState and the return value is passed to the view, same concept for actions which provide callbacks to attach to UI events which in turn send actions to the machine.

Both the selector function and the view are passed an inState function, which is (state: UnionOfMachineStates) => boolean to determine if a machine is in a specific state. Up until recently the typings for this function had used type states to extract the union of states. But since we have recently started using typegen and typestates are deprecated, I recently landed a change that uses the matchesStates property of the typegen information to type the state union if the machine is using typegen, falling back to the typestate information for legacy machines.

This was the solution I came up for accessing that type information

function buildSelectors<
  TContext,
  TStateSchema,
  TEvent extends EventObject,
  TTypestate extends Typestate<TContext>,
  TXstateActions extends BaseActionObject,
  TServices extends ServiceMap,
  TTypegen extends TypegenConstraint,
  TSelectors,
  TStates = TTypegen extends TypegenEnabled
    ? TTypegen extends ResolveTypegenMeta<infer T, any, any, any>
      ? T extends TypegenMeta
        ? T["matchesStates"]
        : never
      : never
    : TTypestate["value"]
>(
  __machine: StateMachine<
    TContext,
    TStateSchema,
    TEvent,
    TTypestate,
    TXstateActions,
    TServices,
    TTypegen
  >,
  selectors: Selectors<TContext, TEvent, TSelectors, TStates>
): (
  ctx: TContext,
  canHandleEvent: (e: TEvent) => boolean,
  inState: (state: TStates) => boolean,
  currentState: TStates
) => TSelectors

However @Andarist instructed me that might break at any time and to open an issue to discuss the use-case, so here I am.

[Andarist]

Could you showcase how this is used by the consumer? And what exact shape of TStates do you assume when you consider compound and parallel states?

[Andarist]

Ok, so if this matches the matches directly 1-to-1 then I think using StateFrom<MachineType>["matches"] should be the way to go:

import { createMachine, StateFrom } from "xstate";

const m = createMachine({
  tsTypes: {} as { "@@xstate/typegen": true; matchesStates: "a" | "b" },
});

const myMatches: StateFrom<typeof m>["matches"] = m.initialState.matches;

TS playground

[UberMouse]

Did not know about StateFrom, I think I can change it so the inState function is typed as the matches property of a machines state instead of trying to extract the state. But it doesn't work for reasons I don't quite understand

TS playground

[Andarist]

In here it’s best to use TMatches and not TStates:
TS playground

[UberMouse]

Ahhh very obvious mistake now that I see it. So we end up with this, very nice. I have some refactoring to do :)

Thanks for the help

[Andarist]

No problem! We should probably nest typegen stuff in some extra property like __dontUseThisAskForHelp 😝