Typegen doesn't support events name as enum

[GuillaumeAmat]

Maybe linked to the same root cause as #32?

I usually set my machines states/events/guards/actions name as enums, but migrating to Typegen, I noticed that the schema.events types doesn't support enums.

Considering the following state machine:

export enum States {
  Initial = 'initial',
  Success = 'success',
}

export enum Events {
  Submit = 'SUBMIT',
}

interface MachineContext {}

type MachineEvents = { type: Events.Submit }

export const myMachine = createMachine(
  {
    tsTypes: {} as import('./my.machine.typegen').Typegen0,
    schema: {
      context: {} as MachineContext,
      events: {} as MachineEvents,
    },
    id: 'myMachine',
    initial: States.Initial
    states: {
      [States.Initial]: {
        on: {
          [Events.Submit]: {
            target: States.Success,
            actions: 'onSubmit',
          },
        },
      },
      [States.Success]: {
        type: 'final',
      },
  },
  {
    actions: {
      onSubmit: assign((context, event) => ({ /* ... */ })),
  },
});

The event argument of the onSubmit action has the never type. But if I change the MachineEvents for:

type MachineEvents = { type: 'SUBMIT' }

It works as expected.

[Andarist]

Typegen generator only takes into consideration the static shape of the config argument - basically, we require it to be JSON-like, fully serializable, and self-contained. We don't look up any external AST nodes - so this won't work for the time being (and I'm not sure if we'll be working on supporting this in the future).

I'm also unsure if enums would work with the type machinery that consumes typegen metadata and that is implemented in XState itself.

[GuillaumeAmat]

Fair enough, I always used enum based schemas to work around the lack of good TypeScript support. I guess that's not required anymore ❤️

I'm just wondering if some edge cases would require some kind of code duplication.

E.g.:

Properly type a prop/argument which would receive a state/event/service/action. It's quite straightforward with enums, but without them, that would require to create another type/enum, which would need maintenance over time, etc.

Using the typegen file is not really an option, as it is meant to be a local devtool rather than a proper source code appendix, isn't it?

I don't know if it's relevant, just wondering. But thanks for your feedback anyway 👌

[Andarist]

Properly type a prop/argument which would receive a state/event/service/action. It's quite straightforward with enums, but without them, that would require to create another type/enum, which would need maintenance over time, etc.

Could you give me an example of what do you mean?

[GuillaumeAmat]

Let's say, you have a component which interprets a machine, and would like to give its children its state, in order for them to be able to use state.matches(). How would you type the state prop?

E.g.:

const TheParent: React.FC = () => {
  const [state] = useMachine(theMachine, {/* ... */});

  return (
    <TheChild state={state} />
  )
};

const TheChild: React.FC<{ state: ? }> = ({ state }) => {
  const showSomething = state.matches('something');

  /* ... */
};

It's an obviously over simplified example, but you've got the point.

And using React Context in conjunction with useInterpret and useActor to avoid having to type the prop doesn't help, because TheChild will eventually also need to know the type of the whole service injected in the Context, including the state, etc.

[Andarist]

We export a bunch of helper types that can be used to help out with this - StateFrom, ContexFrom, etc

[GuillaumeAmat]

That's great, thanks. Didn't know their existence 👌