Transition based on parallel state

[kelvinhammond]

Hello,

I have a machine which contains a parallel state with two states. Based on the result / final state of the two child states in the parallel states I want to transition to another state in the parent.

For Context:
I'm trying to model a pattern matching state matching similar to a regex. I intend to use the parallel states which are generated from the parsed pattern to handle OR operations. AND operations will be handled by sequential states. I'm looping the tokens (objects) and sending NEXT { value: token } events to the machine which then either goes back to start, accepts, or rejects states to signal output. Am I going in the right direction?

[kelvinhammond]

Here is an example, I'm trying to use parallel machine to achieve an OR operator.

import { Machine, interpret } from 'xstate';

const machine = Machine({
  id: 'regexp',
  initial: 'start',
  states: {
    start: {
      on: {
        '': 'group1',
      }
    },
    group1: {
      id: 'group3',
      type: 'parallel',
      states: {
        match1: {
          id: 'match3',
          initial: 'start',
          states: {
            start: {
              on: {
                NEXT: [
                  { target: 'accept', cond: { type: 'matchWord', word: 'me' }  },
                  { target: 'reject', }
                ]
              }
            },
            accept: { type: 'final' },
            reject: { type: 'final' },
          },
        },
        match2: {
          id: 'match4',
          initial: 'start',
          states: {
            start: {
              on: {
                NEXT: [
                  { target: 'accept', cond: { type: 'matchWord', word: 'moi' }  },
                  { target: 'reject', }
                ]
              }
            },
            accept: { type: 'final' },
            reject: { type: 'final' },
          }
        }
      },
      onDone: [
        { target: 'accept', in: 'match1.accept' },
        { target: 'accept', in: 'match2.accept' },
        { target: 'reject' }
      ],
    },
    accept: { type: 'final' },
    reject: { type: 'final' },
  }
}, {
  guards: {
    matchWord: (context, event, { cond: { word } }) => {
      return event.value === word
    },
  }
});

const matchService = interpret(machine)
  .onTransition((state, ...args) => {
    console.log("new state:", state.value);
    console.log("  args:", ...args);
  })
  .start();

matchService.send({ type: 'NEXT', value: 'moi' });
//matchService.send({ type: 'NEXT', value: 'me' });
//matchService.send({ type: 'NEXT', });

console.log(matchService.state.value);

The output is:

new state: { group1: { match1: 'start', match2: 'start' } }
  args: { type: 'xstate.init' }
new state: reject
  args: { type: 'NEXT', value: 'moi' }
reject

If I change the onDone to the below it works but is not self contained to the current state because it relies on the parent name(s) / path and hinders composition a bit.

      onDone: [
        { target: 'accept', in: 'group1.match1.accept' },
        { target: 'accept', in: 'group1.match2.accept' },
        { target: 'reject' }
      ],

I intend to compose some states together to create a matcher for objects which contain metadata such as tags, etc.