Xstate: Multiple guarded targets

[CodingDive]

Hey, I was wondering if it is possible to add guards to multiple targets.

The documentation shows how multiple targets can be specified within a single event but I'm not sure if it's also already possible to add guards.

In a slightly modified version from the example, I would maybe only want to transition to the inactive mode once the queue inside the context is empty:

id: 'settings',
type: 'parallel',
context: {
  queue: []
},
states: {
  mode: {
    initial: 'active',
    states: {
      inactive: {},
      pending: {},
      active: {}
    }
  },
  status: {
    initial: 'enabled',
    states: {
      disabled: {},
      enabled: {}
    }
  }
},
on: {
  // Multiple targets
  DEACTIVATE: {
    target: ['.mode.inactive', '.status.disabled'] // <--- How do I add a guard to the first target?
  }
}

[Andarist]

You have to split into 2 transitions, one guarded and one unguarded:

{
  on: {
    DEACTIVATE: [{
      cond: ctx => ctx.queue.length === 0,
      target: ['.mode.inactive', '.status.disabled']
    }, {
      target: ['.status.disabled']
    }]
  }
}

[CodingDive]

Nice! Thank you for the quick response. I was about to do something hacky 😄