transition happens on first place without sending any action

[hosseind88]

we are using this document https://xstate.js.org/docs/packages/xstate-vue/#configuring-machines for our vue application to start working with xstate, and as we did put a console.log on onTransiton function body, we see that when we load the page, a transition happens and our console.log is called

  <button @click="send('TOGGLE')">
    {{
      state.value === 'inactive'
        ? 'Click to activate'
        : 'Active! Click to deactivate'
    }}
  </button>
</template>

<script>
import { useMachine } from '@xstate/vue';
import { createMachine } from 'xstate';

const toggleMachine = createMachine({
  id: 'toggle',
  initial: 'inactive',
  states: {
    inactive: {
      on: { TOGGLE: 'active' }
    },
    active: {
      on: { TOGGLE: 'inactive' }
    }
  }
});

export default {
  setup() {
    const { state, send, service } = useMachine(toggleMachine);
   service.onTransition((state) => {
      console.log(state)
   })

    return {
      state,
      send
    };
  }
};
</script>

[Andarist]

If I understand your issue correctly it's because the callback given to onTransition gets called immediately when you hook into it:

xstate/packages/core/src/interpreter.ts

Lines 327 to 330 in 8d7a02e

	// Send current state to listener
	if (this.status === InterpreterStatus.Running) {
	listener(this.state, this.state.event);
	}

Maybe it's something worth reconsidering for the next major version, after all - no transition is happening at that moment so calling that callback immediately can be confusing. cc @davidkpiano

[hosseind88]

sorry I didn't understand, you mean there is a solution for this or it is a thing that needs to be added?

[Andarist]

I mean that this is how it works right now. If you want to ignore that first call you could do something like this:

let ignoreOnTransition = true
service.onTransition((state) => {
  if (ignoreOnTransition) {
    return
  }
  console.log(state)
})
ignoreOnTransition = false

[davidkpiano]

Yep, noted here: https://github.com/statelyai/xstate/projects/1#card-57108716

In v5, .onTransition() will only be called at the moment transitions happen, giving you the expected behavior. Whereas .subscribe() will provide the current state.