fix(hooks): using runtime plugin

src/__tests__/useStore.test.ts

@@ -14,12 +14,12 @@ describe('useStore', () => {
   });
 
   it('should have store property', () => {
-    const { vm } = renderHook((context) => ({ store: useStore(context) }));
+    const { vm } = renderHook(() => ({ store: useStore() }));
     expect(vm).toHaveProperty('store');
   });
 
   it('should update store', () => {
-    const { vm } = renderHook((context) => ({ store: useStore(context) }));
+    const { vm } = renderHook(() => ({ store: useStore() }));
     expect(vm.store.state.count).toBe(0);
     expect(vm.store.getters.plusOne).toBe(1);
     expect(vm.store.state.test.count).toBe(0);

src/index.ts

@@ -1,9 +1,10 @@
-/* eslint import/prefer-default-export: off */
-import Vue from 'vue';
-import { plugin } from 'vue-function-api';
-
-Vue.use(plugin);
+import { VueConstructor } from 'vue';
+import { setRuntimeVM } from './util/runtime';
 
 export * from './useDate';
 export { default as useDate } from './useDate';
 export { default as useWindowSize } from './useWindowSize';
+
+export default function install(Vue: VueConstructor) {
+  Vue.mixin({ beforeCreate: setRuntimeVM });
+}

src/useRouter.ts

@@ -1,8 +1,9 @@
 import { computed } from 'vue-function-api';
-import withContext from './util/withContext';
+import { getRuntimeVM } from './util/runtime';
 
-export default withContext(function useRouter(vue) {
-  const route = computed(() => vue.$route);
-  const router = computed(() => vue.$router);
+export default function useRouter() {
+  const vm = getRuntimeVM();
+  const route = computed(() => vm.$route);
+  const router = computed(() => vm.$router);
   return { route, router };
-});
+}

src/useStore.ts

@@ -1,8 +1,9 @@
 import { computed } from 'vue-function-api';
 import { Store } from 'vuex';
-import withContext from './util/withContext';
+import { getRuntimeVM } from './util/runtime';
 
-export default withContext(function useStore<TState>(vue) {
-  const store = computed(() => vue.$store as Store<TState>);
+export default function useStore<TState>() {
+  const vm = getRuntimeVM();
+  const store = computed(() => vm.$store as Store<TState>);
   return store;
-});
+}

src/util/renderHook.ts

@@ -1,25 +1,34 @@
 /* eslint import/no-extraneous-dependencies: off */
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { plugin, createComponent } from 'vue-function-api';
+import { Context } from 'vue-function-api/dist/types/vue';
 import { Router, Store } from '../mocks';
+import hooks from '..';
 
 const localVue = createLocalVue();
 const router = Router(localVue);
 const store = Store(localVue);
 
+localVue.use(hooks);
 localVue.use(plugin);
 
-export default function renderHook(hook: Function) {
-  const App = createComponent({
+export type SetupFunction<Props> = (
+  this: undefined,
+  props: {
+    [K in keyof Props]: Props[K];
+  },
+  context: Context,
+) => object | null | undefined | void;
+
+export default function renderHook<Props>(setup: SetupFunction<Props>) {
+  const App = createComponent<Props>({
     template: `
       <div id="app">
         <router-view></router-view>
       </div>
     `,
 
-    setup(_, context) {
-      return hook(context);
-    },
+    setup,
   });
 
   return shallowMount(App, {