Bug: typegen.ts ist incomplete when moving state node configs to separate files

[VILLAN3LL3]

XState version

XState version 4

Description

As my state machine definition is growing, I decided to move substates into separate objects in separate files.

It's now looking like this:

const myMachine = createMachine({
 ...
 intial: "Initial",
 states: {
  initial: {
  ...
  always: [{ target: '.substate' }],
  states: {
   substate: { ...SUB_STATE },
  }
 }
}

In separate files:

export const SUB_STATE: StateNodeConfig<MyContext, any, MyEvent, BaseActionObject> = {
 type: "parallel",
 states: {
  subsubstate1: { ...SUB_SUB_STATE_1 },
  subsubstate2: { ...SUB_SUB_STATE_2 }
 }
}

SUB_SUB_STATE_1 and SUB_SUB_STATE_2 are also of type StateNodeConfig. It's working fine, but the TypeScript typegen doesn't recognize the sub-states which results in errors referencing a substate in a react component. The matchesStates property of the typegen.ts File looks like this: matchesStates: "initial" | "initial.substate" | { "initial"?: "substate"; };

state.matches("initial.substate.subsubstate1.xyz") will result in the error "No Overload Matches This Call".

Expected result

the typegen.ts file should include all states which are configured within createMachine

Actual result

The matchesStates property of the typegen.ts file is incomplete and looks like this: matchesStates: "initial" | "initial.substate" | { "initial"?: "substate"; };

state.matches("initial.substate.subsubstate1.xyz") will result in the error "No Overload Matches This Call".

Reproduction

https://stackblitz.com/edit/vitejs-vite-jmrvnd?file=src%2Fstate-machine.tsx

Additional context

No response

[davidkpiano]

Three small issues:

• Typegen only applies to XState v4, not XState v5.
• We also do not currently recommend splitting the state machine definition as it makes it more difficult to specify/infer the types for.
• state.matches(…) in v5 does not accept a delimited.string.value for compound state values; it must be represented as an object.

  // const matchesSubstate = current.matches('initial.substate.subsubstate1');
  const matchesSubstate = current.matches({
    initial: {
      substate: 'substate1',
    },
  });

Here is a working example: https://stackblitz.com/edit/vitejs-vite-ngjvqn?file=src%2FApp.tsx

[VILLAN3LL3]

Thanks for your response. Yes I know that typegen is not yet ready for v5. That's why I use v4, see stackblitz example. @davidkpiano

[davidkpiano]

Thanks for the clarification (the original issue stated XState v5).

The last 2 points still stand:

• We also do not currently recommend splitting the state machine definition as it makes it more difficult to specify/infer the types for.
• state.matches(…) in v5 does not accept a delimited.string.value for compound state values; it must be represented as an object.