feat(*): replace with vue composition api

close #52

BREAKING CHANGE:
replace to [`@vue/composition-api`](https://github.com/vuejs/composition-api)

Author: u3u

.storybook/config.js

@@ -1,9 +1,9 @@
 import { configure, addParameters } from '@storybook/vue';
 import { themes } from '@storybook/theming';
-import { plugin } from 'vue-function-api';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import VueRouter from 'vue-router';
+import VueCompositionAPI from '@vue/composition-api';
 import hooks from '../src';
 import 'github-markdown-css';
 import 'prismjs/themes/prism-tomorrow.css';
@@ -18,10 +18,10 @@ addParameters({
   },
 });
 
-Vue.use(hooks);
-Vue.use(plugin);
 Vue.use(Vuex);
 Vue.use(VueRouter);
+Vue.use(VueCompositionAPI);
+Vue.use(hooks);
 
 function loadStories() {
   const req = require.context('../src', true, /\.story\.tsx$/);

.vscode/docs.code-snippets

@@ -7,7 +7,7 @@
       "import 'vue-tsx-support/enable-check';",
       "import Vue from 'vue';",
       "import { storiesOf } from '@storybook/vue';",
-      "import { createComponent } from 'vue-function-api';",
+      "import { createComponent } from '@vue/composition-api';",
       "import { use${1:Hook} } from '..';",
       "import { ShowDocs } from './components';",
       "",
@@ -48,7 +48,7 @@
       "## Usage",
       "",
       "```jsx {6,11}",
-      "import { createComponent } from 'vue-function-api';",
+      "import { createComponent } from '@vue/composition-api';",
       "import { use${1:Hook} } from '@u3u/vue-hooks';",
       "",
       "const Demo = createComponent({",

.vscode/hook.code-snippets

@@ -3,7 +3,7 @@
     "scope": "typescript",
     "prefix": "use",
     "body": [
-      "import { $1 } from 'vue-function-api';",
+      "import { $1 } from '@vue/composition-api';",
       "",
       "export default function use${2:Hook}() {",
       "  $3",

README.md

@@ -21,15 +21,15 @@ Docs are available at <https://vue-hooks.netlify.com>
 
 ```js
 import Vue from 'vue';
-import { plugin } from 'vue-function-api';
+import VueCompositionAPI from '@vue/composition-api';
 import hooks from '@u3u/vue-hooks';
 
 Vue.use(hooks);
-Vue.use(plugin); // Don't forget to use the plugin!
+Vue.use(VueCompositionAPI); // Don't forget to use the plugin!
 ```
 
 ```jsx
-import { createComponent } from 'vue-function-api';
+import { createComponent } from '@vue/composition-api';
 import { useWindowSize } from '@u3u/vue-hooks';
 
 export default createComponent({

docs/useActions.md

@@ -7,7 +7,7 @@ Vue hook for [`mapActions`](https://vuex.vuejs.org/api/#mapactions).
 ## Usage
 
 ```jsx {17,18,24,29,36,37}
-import { createComponent } from 'vue-function-api';
+import { createComponent } from '@vue/composition-api';
 import { useState, useGetters, useActions } from '@u3u/vue-hooks';
 
 const Demo = createComponent({

docs/useCounter.md

@@ -5,7 +5,7 @@ Vue hook that tracks a numeric value.
 ## Usage
 
 ```jsx {6,17}
-import { createComponent } from 'vue-function-api';
+import { createComponent } from '@vue/composition-api';
 import { useCounter } from '@u3u/vue-hooks';
 
 const Demo = createComponent({

docs/useDate.md

@@ -5,7 +5,7 @@ Vue hook that process date via [`dayjs`](https://github.com/iamkun/dayjs).
 ## Usage
 
 ```jsx {6,11}
-import { createComponent } from 'vue-function-api';
+import { createComponent } from '@vue/composition-api';
 import { useDate } from '@u3u/vue-hooks';
 
 const Demo = createComponent({

docs/useGetters.md

@@ -7,7 +7,7 @@ Vue hook for [`mapGetters`](https://vuex.vuejs.org/api/#mapgetters).
 ## Usage
 
 ```jsx {8,9,15,19}
-import { createComponent } from 'vue-function-api';
+import { createComponent } from '@vue/composition-api';
 import { useStore, useGetters } from '@u3u/vue-hooks';
 
 const Demo = createComponent({

docs/useMutations.md

@@ -7,7 +7,7 @@ Vue hook for [`mapMutations`](https://vuex.vuejs.org/api/#mapmutations).
 ## Usage
 
 ```jsx {17,18,24,29,36,37}
-import { createComponent } from 'vue-function-api';
+import { createComponent } from '@vue/composition-api';
 import { useState, useGetters, useMutations } from '@u3u/vue-hooks';
 
 const Demo = createComponent({

docs/usePrevious.md

@@ -5,7 +5,7 @@ Vue hook that returns the previous value.
 ## Usage
 
 ```jsx {7,12,16}
-import { createComponent, value } from 'vue-function-api';
+import { createComponent, value } from '@vue/composition-api';
 import { usePrevious } from '@u3u/vue-hooks';
 
 const Demo = createComponent({

docs/useRouter.md

@@ -7,7 +7,7 @@ Vue hook for [vue-router](https://router.vuejs.org).
 ## Usage
 
 ```jsx {6,11,19,23}
-import { createComponent, onMounted, onUnmounted } from 'vue-function-api';
+import { createComponent, onMounted, onUnmounted } from '@vue/composition-api';
 import { useRouter } from '@u3u/vue-hooks';
 
 const Demo = createComponent({

docs/useState.md

@@ -7,7 +7,7 @@ Vue hook for [`mapState`](https://vuex.vuejs.org/api/#mapstate).
 ## Usage
 
 ```jsx {7,8,14,18}
-import { createComponent, computed } from 'vue-function-api';
+import { createComponent, computed } from '@vue/composition-api';
 import { useState } from '@u3u/vue-hooks';
 
 const Demo = createComponent({

docs/useStore.md

@@ -7,7 +7,7 @@ Vue hook for [vuex](https://vuex.vuejs.org).
 ## Usage
 
 ```jsx {6,12,16}
-import { createComponent, computed } from 'vue-function-api';
+import { createComponent, computed } from '@vue/composition-api';
 import { useStore } from '@u3u/vue-hooks';
 
 const Demo = createComponent({

docs/useWindowSize.md

@@ -5,7 +5,7 @@ Vue hook that tracks dimensions of the browser window.
 ## Usage
 
 ```jsx {6,11}
-import { createComponent } from 'vue-function-api';
+import { createComponent } from '@vue/composition-api';
 import { useWindowSize } from '@u3u/vue-hooks';
 
 const Demo = createComponent({

package.json

@@ -73,6 +73,7 @@
     "@types/storybook__vue": "^5.0.2",
     "@typescript-eslint/parser": "^2.0.0",
     "@vue/babel-preset-jsx": "^1.1.0",
+    "@vue/composition-api": "^0.2.0",
     "@vue/test-utils": "^1.0.0-beta.29",
     "all-contributors-cli": "^6.8.1",
     "babel-loader": "^8.0.6",
@@ -97,7 +98,6 @@
     "semantic-release": "^15.13.21",
     "typescript": "^3.5.3",
     "vue": "^2.6.10",
-    "vue-function-api": "^2.2.0",
     "vue-loader": "^15.7.1",
     "vue-router": "^3.1.2",
     "vue-template-compiler": "^2.6.10",

src/__stories__/useActions.story.tsx

@@ -2,7 +2,7 @@
 import 'vue-tsx-support/enable-check';
 import Vue from 'vue';
 import { storiesOf } from '@storybook/vue';
-import { createComponent } from 'vue-function-api';
+import { createComponent } from '@vue/composition-api';
 import { useState, useGetters, useActions } from '..';
 import { ShowDocs } from './components';
 import { createStore } from '../mocks';

src/__stories__/useCounter.story.tsx

@@ -2,7 +2,7 @@
 import 'vue-tsx-support/enable-check';
 import Vue from 'vue';
 import { storiesOf } from '@storybook/vue';
-import { createComponent } from 'vue-function-api';
+import { createComponent } from '@vue/composition-api';
 import { useCounter } from '..';
 import { ShowDocs } from './components';
 

src/__stories__/useDate.story.tsx

@@ -2,7 +2,7 @@
 import 'vue-tsx-support/enable-check';
 import Vue from 'vue';
 import { storiesOf } from '@storybook/vue';
-import { createComponent } from 'vue-function-api';
+import { createComponent } from '@vue/composition-api';
 import { useDate, dayjs } from '..';
 import { ShowDocs } from './components';
 

src/__stories__/useGetters.story.tsx

@@ -2,7 +2,7 @@
 import 'vue-tsx-support/enable-check';
 import Vue from 'vue';
 import { storiesOf } from '@storybook/vue';
-import { createComponent } from 'vue-function-api';
+import { createComponent } from '@vue/composition-api';
 import { useStore, useGetters } from '..';
 import { ShowDocs } from './components';
 import { createStore } from '../mocks';

src/__stories__/useMutations.story.tsx

@@ -2,7 +2,7 @@
 import 'vue-tsx-support/enable-check';
 import Vue from 'vue';
 import { storiesOf } from '@storybook/vue';
-import { createComponent } from 'vue-function-api';
+import { createComponent } from '@vue/composition-api';
 import { useState, useGetters, useMutations } from '..';
 import { ShowDocs } from './components';
 import { createStore } from '../mocks';

src/__stories__/usePrevious.story.tsx

@@ -2,7 +2,7 @@
 import 'vue-tsx-support/enable-check';
 import Vue from 'vue';
 import { storiesOf } from '@storybook/vue';
-import { createComponent, value } from 'vue-function-api';
+import { createComponent, ref } from '@vue/composition-api';
 import { usePrevious } from '..';
 import { ShowDocs } from './components';
 
@@ -17,7 +17,7 @@ const Docs = () => <ShowDocs md={require('../../docs/usePrevious.md')} />;
 
 const Demo = createComponent({
   setup() {
-    const count = value(0);
+    const count = ref(0);
     const prevCount = usePrevious(count);
 
     const increment = () => count.value++;

src/__stories__/useRouter.story.tsx

@@ -6,11 +6,11 @@ import VueRouter, { Route } from 'vue-router';
 import { storiesOf } from '@storybook/vue';
 import {
   createComponent,
-  value,
+  ref,
   watch,
   onMounted,
   onUnmounted,
-} from 'vue-function-api';
+} from '@vue/composition-api';
 import { useRouter } from '..';
 import { ShowDocs } from './components';
 
@@ -77,7 +77,7 @@ const Demo = createComponent({
 
   setup() {
     const { route, router } = useRouter();
-    const time = value(5);
+    const time = ref(5);
     let timerId;
 
     watch(route, () => {

src/__stories__/useState.story.tsx

@@ -2,7 +2,7 @@
 import 'vue-tsx-support/enable-check';
 import Vue from 'vue';
 import { storiesOf } from '@storybook/vue';
-import { createComponent, computed } from 'vue-function-api';
+import { createComponent, computed } from '@vue/composition-api';
 import { useStore, useState } from '..';
 import { ShowDocs } from './components';
 import { createStore } from '../mocks';

src/__stories__/useStore.story.tsx

@@ -3,7 +3,7 @@ import 'vue-tsx-support/enable-check';
 import Vue from 'vue';
 import { Store } from 'vuex';
 import { storiesOf } from '@storybook/vue';
-import { createComponent, computed } from 'vue-function-api';
+import { createComponent, computed } from '@vue/composition-api';
 import { useStore } from '..';
 import { ShowDocs } from './components';
 import { createStore } from '../mocks';

src/__stories__/useWindowSize.story.tsx

@@ -2,7 +2,7 @@
 import 'vue-tsx-support/enable-check';
 import Vue from 'vue';
 import { storiesOf } from '@storybook/vue';
-import { createComponent } from 'vue-function-api';
+import { createComponent } from '@vue/composition-api';
 import { useWindowSize } from '..';
 import { ShowDocs } from './components';
 

src/__tests__/useDate.test.ts

@@ -1,4 +1,4 @@
-import { onMounted, onUnmounted } from 'vue-function-api';
+import { onMounted, onUnmounted } from '@vue/composition-api';
 import { useDate, dayjs } from '..';
 import renderHook from '../util/renderHook';
 

src/__tests__/useMedia.test.ts

@@ -1,4 +1,4 @@
-import { onMounted, onUnmounted } from 'vue-function-api';
+import { onMounted, onUnmounted } from '@vue/composition-api';
 import { useMedia } from '..';
 import renderHook from '../util/renderHook';
 

src/__tests__/useMountedState.test.ts

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import { onMounted } from 'vue-function-api';
+import { onMounted } from '@vue/composition-api';
 import { useMountedState } from '..';
 import renderHook from '../util/renderHook';
 

src/__tests__/usePrevious.test.ts

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import { value, state } from 'vue-function-api';
+import { ref, reactive } from '@vue/composition-api';
 import { usePrevious } from '..';
 import renderHook from '../util/renderHook';
 
@@ -10,7 +10,7 @@ describe('usePrevious', () => {
 
   it('should be previous wrapper count', () => {
     renderHook(async () => {
-      const count = value(0);
+      const count = ref(0);
       const prevCount = usePrevious(count);
 
       expect(count.value).toBe(0);
@@ -32,22 +32,22 @@ describe('usePrevious', () => {
 
   it('should be previous state count', () => {
     renderHook(async () => {
-      const store = state({ count: 0 });
-      const prevCount = usePrevious(() => store.count);
+      const state = reactive({ count: 0 });
+      const prevCount = usePrevious(() => state.count);
 
-      expect(store.count).toBe(0);
+      expect(state.count).toBe(0);
       expect(prevCount.value).toBeUndefined();
 
-      store.count += 1;
+      state.count += 1;
 
       await Vue.nextTick();
-      expect(store.count).toBe(1);
+      expect(state.count).toBe(1);
       expect(prevCount.value).toBe(0);
 
-      store.count -= 1;
+      state.count -= 1;
 
       await Vue.nextTick();
-      expect(store.count).toBe(0);
+      expect(state.count).toBe(0);
       expect(prevCount.value).toBe(1);
     });
   });

src/__tests__/useTimeout.test.ts

@@ -1,4 +1,4 @@
-import { onMounted, onUnmounted } from 'vue-function-api';
+import { onMounted, onUnmounted } from '@vue/composition-api';
 import { useTimeout } from '..';
 import renderHook from '../util/renderHook';
 

src/helpers/vuex/index.ts

@@ -1,4 +1,4 @@
-import { computed } from 'vue-function-api';
+import { computed } from '@vue/composition-api';
 import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
 import { useState, useGetters, useMutations, useActions } from './interface';
 import { getRuntimeVM } from '../../util/runtime';

src/helpers/vuex/interface.ts

@@ -1,9 +1,9 @@
 import Vue from 'vue';
 import { Dispatch, Commit } from 'vuex';
-import { Wrapper } from 'vue-function-api';
+import { Ref } from '@vue/composition-api';
 
 type Dictionary<T> = { [key: string]: T };
-type Computed = Wrapper<any>;
+type Computed = Ref<any>;
 type MutationMethod = (...args: any[]) => void;
 type ActionMethod = (...args: any[]) => Promise<any>;
 type CustomVue = Vue & Dictionary<any>;

src/useCounter.ts

@@ -1,8 +1,8 @@
 /* eslint no-return-assign: off */
-import { value } from 'vue-function-api';
+import { ref } from '@vue/composition-api';
 
 export default function useCounter(initialValue = 0) {
-  const count = value(initialValue);
+  const count = ref(initialValue);
   const inc = (delta = 1) => (count.value += delta);
   const dec = (delta = 1) => (count.value -= delta);
   const get = () => count.value;