feat: enable compatibility of xstate-vue with Vue 3

[sarahdayan]

This PR enables compatibility of xstate-vue with Vue 3. It removes the peer dependency with @vue/composition-api. This creates a breaking change.

I had trouble running tests on my machine, I'll see how things look like in the CI and will take action to rectify if necessary.

cc @Andarist if you want to take a look 🙂

closes #1252

[changeset-bot]

🦋 Changeset detected

Latest commit: 42f4e20

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@xstate/vue	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[davidkpiano]

Thanks, Sarah! I think the way the tests were previously set up aren't playing well with the Vue 3 typings:

... is not assignable to parameter of type 'VueClass'

Summary of all failing tests
 FAIL  packages/xstate-vue/test/useMachine.test.ts
  ● Test suite failed to run

    packages/xstate-vue/test/useMachine.test.ts:49:47 - error TS2345: Argument of type 'typeof import("/Users/davidkpiano/Code/xstate-v4/packages/xstate-vue/node_modules/vue/dist/vue")' is not assignable to parameter of type 'VueClass<Vue>'.
      Type 'typeof import("/Users/davidkpiano/Code/xstate-v4/packages/xstate-vue/node_modules/vue/dist/vue")' is not assignable to type 'new (...args: any[]) => Vue'.
        Type 'typeof import("/Users/davidkpiano/Code/xstate-v4/packages/xstate-vue/node_modules/vue/dist/vue")' provides no match for the signature 'new (...args: any[]): Vue'.

    49     const { getByText, getByTestId } = render(UseMachine);
                                                     ~~~~~~~~~~
    packages/xstate-vue/test/useMachine.test.ts:59:47 - error TS2345: Argument of type 'typeof import("/Users/davidkpiano/Code/xstate-v4/packages/xstate-vue/node_modules/vue/dist/vue")' is not assignable to parameter of type 'VueClass<Vue>'.
      Type 'typeof import("/Users/davidkpiano/Code/xstate-v4/packages/xstate-vue/node_modules/vue/dist/vue")' is not assignable to type 'new (...args: any[]) => Vue'.

    59     const { getByText, getByTestId } = render(UseMachine, {
                                                     ~~~~~~~~~~
    packages/xstate-vue/test/useMachine.test.ts:71:47 - error TS2345: Argument of type 'typeof import("/Users/davidkpiano/Code/xstate-v4/packages/xstate-vue/node_modules/vue/dist/vue")' is not assignable to parameter of type 'VueClass<Vue>'.
      Type 'typeof import("/Users/davidkpiano/Code/xstate-v4/packages/xstate-vue/node_modules/vue/dist/vue")' is not assignable to type 'new (...args: any[]) => Vue'.

    71     const { getByText, getByTestId } = render(UseMachine, {
                                                     ~~~~~~~~~~
    packages/xstate-vue/test/useMachine.test.ts:81:27 - error TS2769: No overload matches this call.
      Overload 1 of 3, '(component: VueClass<Vue>, options?: ThisTypedMountOptions<Vue> | undefined): Wrapper<Vue>', gave the following error.
        Argument of type 'typeof import("/Users/davidkpiano/Code/xstate-v4/packages/xstate-vue/node_modules/vue/dist/vue")' is not assignable to parameter of type 'VueClass<Vue>'.
          Type 'typeof import("/Users/davidkpiano/Code/xstate-v4/packages/xstate-vue/node_modules/vue/dist/vue")' is not assignable to type 'new (...args: any[]) => Vue'.
      Overload 2 of 3, '(component: ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>, options?: ThisTypedMountOptions<...> | undefined): Wrapper<...>', gave the following error.
        Argument of type 'typeof import("/Users/davidkpiano/Code/xstate-v4/packages/xstate-vue/node_modules/vue/dist/vue")' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>'.
          Types of property 'computed' are incompatible.
            Type '{ <T>(getter: ComputedGetter<T>): ComputedRef<T>; <T>(options: WritableComputedOptions<T>): WritableComputedRef<T>; }' is not assignable to type 'Accessors<DefaultComputed>'.
              Index signature is missing in type '{ <T>(getter: ComputedGetter<T>): ComputedRef<T>; <T>(options: WritableComputedOptions<T>): WritableComputedRef<T>; }'.
      Overload 3 of 3, '(component: FunctionalComponentOptions<Record<string, any>, PropsDefinition<Record<string, any>>>, options?: MountOptions<Vue> | undefined): Wrapper<...>', gave the following error.
        Argument of type 'typeof import("/Users/davidkpiano/Code/xstate-v4/packages/xstate-vue/node_modules/vue/dist/vue")' is not assignable to parameter of type 'FunctionalComponentOptions<Record<string, any>, PropsDefinition<Record<string, any>>>'.
          Property 'functional' is missing in type 'typeof import("/Users/davidkpiano/Code/xstate-v4/packages/xstate-vue/node_modules/vue/dist/vue")' but required in type 'FunctionalComponentOptions<Record<string, any>, PropsDefinition<Record<string, any>>>'.

    81     const wrapper = mount(UseMachine, { localVue });
                                 ~~~~~~~~~~

      node_modules/vue/types/options.d.ts:132:3
        132   functional: boolean;
              ~~~~~~~~~~
        'functional' is declared here.
    packages/xstate-vue/test/useMachine.test.ts:90:14 - error TS2345: Argument of type 'typeof import("/Users/davidkpiano/Code/xstate-v4/packages/xstate-vue/node_modules/vue/dist/vue")' is not assignable to parameter of type 'VueClass<Vue>'.
      Type 'typeof import("/Users/davidkpiano/Code/xstate-v4/packages/xstate-vue/node_modules/vue/dist/vue")' is not assignable to type 'new (...args: any[]) => Vue'.

    90       render(UseMachineNoExtraOptions);
                    ~~~~~~~~~~~~~~~~~~~~~~~~

 FAIL  packages/xstate-vue/test/useService.test.ts
  ● Test suite failed to run

    packages/xstate-vue/test/useService.test.ts:36:39 - error TS2345: Argument of type '{ components: { UseService: typeof UseService; }; template: string; props: string[]; }' is not assignable to parameter of type 'VueClass<Vue>'.
      Type '{ components: { UseService: typeof UseService; }; template: string; props: string[]; }' is not assignable to type 'new (...args: any[]) => Vue'.
        Type '{ components: { UseService: typeof import("/Users/davidkpiano/Code/xstate-v4/packages/xstate-vue/node_modules/vue/dist/vue"); }; template: string; props: string[]; }' provides no match for the signature 'new (...args: any[]): Vue'.

    36     const { getAllByTestId } = render(twoServices, {
                                             ~~~~~~~~~~~
    packages/xstate-vue/test/useService.test.ts:57:49 - error TS2345: Argument of type 'typeof import("/Users/davidkpiano/Code/xstate-v4/packages/xstate-vue/node_modules/vue/dist/vue")' is not assignable to parameter of type 'VueClass<Vue>'.
      Type 'typeof import("/Users/davidkpiano/Code/xstate-v4/packages/xstate-vue/node_modules/vue/dist/vue")' is not assignable to type 'new (...args: any[]) => Vue'.
        Type 'typeof import("/Users/davidkpiano/Code/xstate-v4/packages/xstate-vue/node_modules/vue/dist/vue")' provides no match for the signature 'new (...args: any[]): Vue'.

    57     const { getByTestId, updateProps } = render(UseService, {
                                                       ~~~~~~~~~~

 FAIL  packages/xstate-vue/test/useFSM.test.ts
  ● Test suite failed to run

    packages/xstate-vue/test/useFSM.test.ts:14:47 - error TS2345: Argument of type 'typeof import("/Users/davidkpiano/Code/xstate-v4/packages/xstate-vue/node_modules/vue/dist/vue")' is not assignable to parameter of type 'VueClass<Vue>'.
      Type 'typeof import("/Users/davidkpiano/Code/xstate-v4/packages/xstate-vue/node_modules/vue/dist/vue")' is not assignable to type 'new (...args: any[]) => Vue'.
        Type 'typeof import("/Users/davidkpiano/Code/xstate-v4/packages/xstate-vue/node_modules/vue/dist/vue")' provides no match for the signature 'new (...args: any[]): Vue'.

    14     const { getByText, getByTestId } = render(UseFSM);
                                                     ~~~~~~

I can help look into these. Might just need some refactoring (instead of inlining the test components).

[pearofducks]

Just a heads up - this component isn't Vue 3 compatible at the moment.

Also I'm not sure if the 1.x version of @vue/test-utils is compatible with Vue 3 - there's a 2.x version on the next tag though!

[Andarist]

@sarahdayan could you merge master to your branch? It seems that CI was not running for external contributions - I've fixed that now.

[guilipan]

any progress here?

[davidkpiano]

any progress here?

Patience 🙏

[TheDutchCoder]

Any movement on this?
It's kind of a critical thing for us Vue devs :)