Implement xstate-ninja-vue

[Zehir]

Contribution for #7

@rlaffers Should I add my name as author for the @xstate-ninja/vue package ?

[Zehir]

Some screenshot of the example

[rlaffers]

Contribution for #7

@rlaffers Should I add my name as author for the @xstate-ninja/vue package ?

Yes please.

[Zehir]

Contribution for #7 @rlaffers Should I add my name as author for the @xstate-ninja/vue package ?

Yes please.

Done @rlaffers thanks

[Zehir]

Could you publish it on npm ?

[Zehir]

What do you think about a more generic way to register Ninja ?

import type { AnyInterpreter } from 'xstate'

import createXStateNinjaSingleton from 'xstate-ninja'

const ninja = createXStateNinjaSingleton()

export function registerNinja(actor: AnyInterpreter) {
  return watchEffect((onCleanup) => {
    if (actor.options?.devTools) {
      ninja.register(actor)
      onCleanup(() => ninja.unregister(actor))
    }
  })
}

const machine = useMachine(gatewayMachine, {
  id: `${gatewayMachine.id}-${id.value}`,
  devTools: true,
})

onScopeDispose(registerNinja(machine.service))

The onScopeDispose is a vue method to auto call the method when the vue who started the machine get deleted

There is still some vue related method in the register method but we can extract them out too