Typescript not work well in complex state machine with React

[yangLiu57670838]

Hi, I have used xstate in our production, once the state machine grows, i realise that typegen cant work with splitted guard, event actions invoked children machine.. etc..

so I switched to just define context and event types by myself without typegen,
something like this:
createMachine<StateMachineContext, StateMachineEvents>
schema: {
context: {} as StateMachineContext,
events: {} as StateMachineEvents,
},

the type errors gone, however, without typegen, the state.matches() func and send() func have no more typescript hint.. for complex state machine, its really hard, cause children of children of children's state match means a lot of input in state.matched()

also, for invoked children state machine to work in React components, i have to:
const stateMachineService = useInterpret(... );
const [state] = useActor(stateMachineRef?.stateMachineService);
const [childrenState] = useActor(state.children.appContentRenderMachine);
which lead childrenState.send() have no typescript hint at all no matter its with typegen or without..

anyway, could I ask am i doing it wrong, or v5 will improve the typescript, thanks

[Andarist]

Hi, I have used xstate in our production, once the state machine grows, i realise that typegen cant work with splitted guard, event actions invoked children machine.. etc..

i can see how this might sometimes be problematic but it would still be great if you could give some code samples demonstrating the problem. With that, I could try to offer some solutions.

[yangLiu57670838]

thanks for the reply, sure, let me try to copy my local sample code, cause production code is not in my local ...

**export const statamachine = createMachine<
StateMachineContext,
StateMachineEvents

(
{
id: "",
initial: "AppInit",
schema: {
context: {} as StateMachineContext,
events: {} as StateMachineEvents,
},
context: appContext,
states: {
AppInit: {
type: "parallel",
on: {
LOGGINOUT: {
target: "Logout",
},
},
states: {
RegionA: {
initial: "Unselect",
states: {
Unselect: {
on: {
SELECT: {
target: "Selected",
},
},
},
Selected: {
entry: "isLoading",
invoke: {
src: "fetchRemote",
onDone: {
target: "Fetched",
actions: "fetchSuccess",
},
onError: {
target: "FetchFailed",
},
},
},
FetchFailed: {},
Fetched: {},
},
},
},
RegionB: {
invoke: {
id: "childrenMachine",
src: childrenMachine,
},
},
},
Logout: {
type: "final",
},
},
},
{
actions: stateMachineActions,
services: {},
}
);**

as you can see, once manually define types without typegen as above, in React components,
stateMachineService.send({ type: "wrong-event-name" }); // this will still show type error, but there is no hint about which events we can send

most important,
state.matches('parent.child1.child2.state') will have no type check for the states at all.. for complex state machine, it will be really hard to maintain..

second question is:
as you see, if invoked a child machine, (not spawn), when try to send() or matches() on child machine,
have to like:
const stateMachineService = useInterpret(... );
const [state] = useActor(stateMachineRef?.stateMachineService);
const [childrenState] = useActor(state.children.appContentRenderMachine);
childrenState.matches()
state.children.id.send()

which have no typescript check at all..