Forbid unrecognized properties in on
, onDone
and onError
transition declarations.
Transition declarations should not contain properties which are not recognized by XState.
In XState v5, the following transition properties are no longer valid:
cond
: removed in favor ofguard
in
: removed in favor of thestateIn
guardinternal
: removed in favor ofreenter
Examples of incorrect code for this rule:
// ❌
createMachine({
states: {
idle: {
on: {
EVENT: {
target: 'active',
foo: true, // ???
},
},
},
},
})
// ❌
createMachine({
states: {
idle: {
on: {
EVENT: [
{
target: 'active',
always: [], // ???
},
],
},
},
},
})
// ❌
createMachine({
states: {
heating: {
type: 'compound',
initial: 'cold',
states: {
cold: {},
hot: { type: 'final' },
},
onDone: {
target: 'cooling',
foo: true, // ???
},
},
},
})
Examples of correct code for this rule:
// ✅ only recognized properties inside transitions (XState v4)
createMachine({
states: {
idle: {
on: {
EVENT: {
cond: () => true,
target: 'active',
actions: [],
in: 'otherState.ready',
internal: false,
description: 'some text',
},
},
},
},
})
// ✅ only recognized properties inside transitions (XState v5)
createMachine({
states: {
idle: {
on: {
EVENT: {
guard: () => true,
target: 'active',
actions: [],
reenter: true,
description: 'some text',
},
OTHER_EVENT: {
// "stateIn" instead of the "in" guard
guard: stateIn('otherState.ready'),
target: 'active',
},
},
},
},
})