Allow the interpreter to be extended with extra functionality

[VanTanev]

XState's interpreter ships with some extra event/action handling that's not strictly necessary as part of its implementation, but it's nice to have - stuff like actions.log.

It would be nice to be able to extend the interpreter with other actions from a third party.

In a recent discussion about forwarding React prop changes to machines, an interface similar this was floated as an idea:

type SyncEvent<Prop extends string, T> = {  type: `sync.${Prop}`, [Prop]: T  }

interface Context {
  count: number
  stepOffset: number
}
type Event = { type: INC } | SyncEvent<'stepOffset', string>

const machine = createMachine({
  context: { count: 0, stepOffset: 1 },
  on: {
    'sync.stepOffset': { actions: actions.log('stepOffsetChanged') },
    INC: { actions: assign(ctx => ({ count: ctx.count + ctx.stepOffset }) }
  },
})

const Counter = ({ stepOffset = 1 }) => 
  const service = useInterpret(machine, {
    context: { stepOffset },
    sync: {
      stepOffset
    }
  })
  ...
})

If the interpreter could be extended, such additions could be done in userland.

[davidkpiano]

I'm confused by the example; how do you want to extend the inspector? (I don't see the inspector being called here)

[VanTanev]

I would like to be able to extend the interpreter in at least 2 ways:

1. custom event handling - handle events not defined on the original machine
2. custom action handling - handle actions not defined on the original machine

The implementation of the above can be (very rough code):

function useInterpret(machine, options) {
  const { sync } = options
  // this will be done with `Object.keys(sync)` or something like that
  React.useEffect(() => {
    service.send({ type: 'xstate.sync.stepOffset', data: sync.stepOffset })
  }, [sync.stepOffset])
  
  const service = interpreter(machine, {
    extend: {
      on: {
        'xstate.sync.*': {
          actions: actions.pure([assign((ctx, e) => {
            let prop = extractProp(e.type) // "syncOffset"
            return [
              assign({ [prop]: e.data }),
              actions.send({ type: `sync.${prop}`, data: e.data })
            ]
          })
        }
      }
    }
  })
}

[davidkpiano]

custom event handling - handle events not defined on the original machine

This cannot happen for obvious reasons. The machine is the source of truth; this adds indirection. Extending machines are a deeper topic.

custom action handling - handle actions not defined on the original machine

This can already be done in machine.withConfig({ actions: ... }), can you show an example of the difference here?