feat: support Vue 3 and Vuex 4

BREAKING CHANGE: No longer support Vue 2 and Vuex 3

jest.config.js

@@ -1,7 +1,6 @@
 module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
-  setupFilesAfterEnv: ['./test/setup.ts'],
   globals: {
     'ts-jest': {
       tsconfig: './test/tsconfig.json',

package.json

@@ -48,8 +48,7 @@
   },
   "devDependencies": {
     "@types/jest": "^26.0.0",
-    "@vue/composition-api": "^1.0.0-rc.10",
-    "@vue/test-utils": "^1.0.0-beta.29",
+    "@vue/test-utils": "^2.0.0-rc.6",
     "downlevel-dts": "^0.7.0",
     "eslint": "^7.3.0",
     "eslint-config-ktsn-typescript": "^2.2.0",
@@ -64,12 +63,8 @@
     "tslib": "^2.0.0",
     "typescript": "~4.3.2",
     "uglify-js": "^3.6.0",
-    "vue": "^2.6.13",
-    "vue-composable-tester": "^0.1.2",
-    "vue-template-compiler": "^2.6.13",
-    "vuex": "^3.1.1"
-  },
-  "peerDependencies": {
-    "@vue/composition-api": "^1.0.0-rc.10"
+    "vue": "^3.0.11",
+    "vue-composable-tester": "^0.1.3",
+    "vuex": "^4.0.1"
   }
 }

src/composables.ts

@@ -1,15 +1,11 @@
-import { getCurrentInstance } from '@vue/composition-api'
+import { useStore } from 'vuex'
 import { Module } from './module'
-import { assert } from './utils'
 
 export function createComposable<Mod extends Module<any, any, any, any, any>>(
   module: Mod
 ) {
   return function useContext() {
-    const vm = getCurrentInstance()?.proxy
-    assert(vm, 'Failed to get the current component instance')
-    assert(vm.$store, 'Vuex store is not installed')
-
-    return module.context(vm.$store)
+    const store = useStore()
+    return module.context(store)
   }
 }

src/global.d.ts

@@ -0,0 +1,8 @@
+import { Store } from 'vuex'
+import '@vue/runtime-core'
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $store: Store<unknown>
+  }
+}

src/mapper.ts

@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import {
   ContextPosition,
   getters as namespacedGetters,
@@ -11,6 +10,7 @@ import {
 import { mapValues, get } from './utils'
 import { Module } from './module'
 import { BG, BM, BA, Payload } from './assets'
+import { ComponentPublicInstance } from 'vue'
 
 export type MappedFunction<Fn, R> = undefined extends Payload<Fn>
   ? (payload?: Payload<Fn>) => R
@@ -48,7 +48,7 @@ export class ComponentMapper<
     const pos = this.pos
 
     return createMappedObject(map, (value) => {
-      return function mappedStateComputed(this: Vue) {
+      return function mappedStateComputed(this: ComponentPublicInstance) {
         const state = get(pos.path, this.$store.state)
 
         if (typeof value === 'function') {
@@ -69,7 +69,7 @@ export class ComponentMapper<
     const pos = this.pos
 
     return createMappedObject(map, (value) => {
-      function mappedGetterComputed(this: Vue) {
+      function mappedGetterComputed(this: ComponentPublicInstance) {
         return this.$store.getters[pos.namespace + value]
       }
 
@@ -95,7 +95,10 @@ export class ComponentMapper<
     const pos = this.pos
 
     return createMappedObject(map, (value) => {
-      return function mappedMutationMethod(this: Vue, ...args: any[]) {
+      return function mappedMutationMethod(
+        this: ComponentPublicInstance,
+        ...args: any[]
+      ) {
         const commit = (type: any, payload: any) => {
           return namespacedCommit(this.$store, pos.namespace, type, payload)
         }
@@ -122,7 +125,10 @@ export class ComponentMapper<
     const pos = this.pos
 
     return createMappedObject(map, (value) => {
-      return function mappedActionMethod(this: Vue, ...args: any[]) {
+      return function mappedActionMethod(
+        this: ComponentPublicInstance,
+        ...args: any[]
+      ) {
         const dispatch = (type: any, payload: any) => {
           return namespacedDispatch(this.$store, pos.namespace, type, payload)
         }

test/composables.spec.ts

@@ -1,6 +1,6 @@
-import { getCurrentInstance } from '@vue/composition-api'
 import { mount } from 'vue-composable-tester'
-import { Store } from 'vuex'
+import { provide } from 'vue'
+import { Store, storeKey } from 'vuex'
 import {
   Actions,
   createComposable,
@@ -61,7 +61,7 @@ describe('composables', () => {
     it('state', () => {
       const { result } = mount(useFooContext, {
         provider: () => {
-          getCurrentInstance()!.proxy.$store = store
+          provide(storeKey, store)
         },
       })
       expect(result.state.value).toBe(1)
@@ -70,7 +70,7 @@ describe('composables', () => {
     it('getters', () => {
       const { result } = mount(useFooContext, {
         provider: () => {
-          getCurrentInstance()!.proxy.$store = store
+          provide(storeKey, store)
         },
       })
       expect(result.getters.double).toBe(2)
@@ -79,7 +79,7 @@ describe('composables', () => {
     it('mutations', () => {
       const { result } = mount(useFooContext, {
         provider: () => {
-          getCurrentInstance()!.proxy.$store = store
+          provide(storeKey, store)
         },
       })
       expect(result.state.value).toBe(1)
@@ -90,7 +90,7 @@ describe('composables', () => {
     it('actions', async () => {
       const { result } = mount(useFooContext, {
         provider: () => {
-          getCurrentInstance()!.proxy.$store = store
+          provide(storeKey, store)
         },
       })
       expect(result.getters.double).toBe(2)