[@xstate/vue] Fix send(…) type in useActor(…) (#4759)

* Fix send type for useActor

* Add file to test

* Update .changeset/honest-tools-shave.md

Co-authored-by: Mateusz Burzyński <[email protected]>

* Add test

---------

Co-authored-by: Mateusz Burzyński <[email protected]>

.changeset/honest-tools-shave.md

@@ -0,0 +1,5 @@
+---
+'@xstate/vue': patch
+---
+
+Fix `send(…)` type for `useActor(…)`

packages/xstate-vue/src/useActor.ts

@@ -15,7 +15,7 @@ export function useActor<TLogic extends AnyActorLogic>(
   options?: ActorOptions<TLogic>
 ): {
   snapshot: Ref<SnapshotFrom<TLogic>>;
-  send: (event: Actor<TLogic>['send']) => void;
+  send: Actor<TLogic>['send'];
   actorRef: Actor<TLogic>;
 };
 export function useActor(

packages/xstate-vue/test/UseActorWithTransitionLogic.vue

@@ -0,0 +1,28 @@
+<template>
+  <button data-testid="count" @click="send({ type: 'INC' })">
+    {{ snapshot.context }}
+  </button>
+</template>
+
+<script lang="ts">
+import { useActor } from '../src/index.ts';
+import { fromTransition } from 'xstate/actors';
+import { defineComponent } from 'vue';
+
+const reducer = (state: number, event: { type: 'INC' }): number => {
+  if (event.type === 'INC') {
+    return state + 1;
+  }
+  return state;
+};
+
+const logic = fromTransition(reducer, 0);
+
+export default defineComponent({
+  setup() {
+    const { snapshot, send } = useActor(logic);
+
+    return { snapshot, send };
+  }
+});
+</script>

packages/xstate-vue/test/useActor.test.ts

@@ -1,5 +1,6 @@
-import { render } from '@testing-library/vue';
+import { fireEvent, render } from '@testing-library/vue';
 import UseActorWithInitiallyInvokedChild from './UseActorWithInitiallyInvokedChild.vue';
+import UseActorWithTransitionLogic from './UseActorWithTransitionLogic.vue';
 
 describe('useActor', () => {
   it('initial invoked actor should be immediately available', async () => {
@@ -11,4 +12,15 @@ describe('useActor', () => {
     expect(machineSnapshotEl.textContent).toBe('active');
     expect(actorSnapshotEl.textContent).toBe('active');
   });
+
+  it('should be able to spawn an actor from actor logic', async () => {
+    const { getByTestId } = render(UseActorWithTransitionLogic);
+    const button = getByTestId('count');
+
+    expect(button.textContent).toEqual('0');
+
+    await fireEvent.click(button);
+
+    expect(button.textContent).toEqual('1');
+  });
 });