feat(*): replace with vue composition api

u3u · u3u · commit 5ee9248b111a · 2019-08-25T17:06:41.000+08:00
close #52 BREAKING CHANGE: replace to [`@vue/composition-api`](https://github.com/vuejs/composition-api)
diff --git a/.storybook/config.js b/.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$/);
diff --git a/.vscode/docs.code-snippets b/.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({",
diff --git a/.vscode/hook.code-snippets b/.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",
diff --git a/README.md b/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({
diff --git a/docs/useActions.md b/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({
diff --git a/docs/useCounter.md b/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({
diff --git a/docs/useDate.md b/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({
diff --git a/docs/useGetters.md b/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({
diff --git a/docs/useMutations.md b/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({
diff --git a/docs/usePrevious.md b/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({
diff --git a/docs/useRouter.md b/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({
diff --git a/docs/useState.md b/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({
diff --git a/docs/useStore.md b/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({
diff --git a/docs/useWindowSize.md b/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({
diff --git a/package.json b/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",
diff --git a/src/__stories__/useActions.story.tsx b/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';
diff --git a/src/__stories__/useCounter.story.tsx b/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';
 
diff --git a/src/__stories__/useDate.story.tsx b/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';
 
diff --git a/src/__stories__/useGetters.story.tsx b/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';
diff --git a/src/__stories__/useMutations.story.tsx b/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';
diff --git a/src/__stories__/usePrevious.story.tsx b/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++;
diff --git a/src/__stories__/useRouter.story.tsx b/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, () => {
diff --git a/src/__stories__/useState.story.tsx b/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';
diff --git a/src/__stories__/useStore.story.tsx b/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';
diff --git a/src/__stories__/useWindowSize.story.tsx b/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';
 
diff --git a/src/__tests__/useDate.test.ts b/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';
 
diff --git a/src/__tests__/useMedia.test.ts b/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';
 
diff --git a/src/__tests__/useMountedState.test.ts b/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';
 
diff --git a/src/__tests__/usePrevious.test.ts b/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);
     });
   });
diff --git a/src/__tests__/useTimeout.test.ts b/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';
 
diff --git a/src/helpers/vuex/index.ts b/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';
diff --git a/src/helpers/vuex/interface.ts b/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>;
diff --git a/src/useCounter.ts b/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;
diff --git a/src/useDate.ts b/src/useDate.ts
diff --git a/src/useMedia.ts b/src/useMedia.ts
diff --git a/src/useMountedState.ts b/src/useMountedState.ts
diff --git a/src/usePrevious.ts b/src/usePrevious.ts
diff --git a/src/useRouter.ts b/src/useRouter.ts
diff --git a/src/useStore.ts b/src/useStore.ts
diff --git a/src/useTimeout.ts b/src/useTimeout.ts
diff --git a/src/useWindowSize.ts b/src/useWindowSize.ts
diff --git a/src/util/renderHook.ts b/src/util/renderHook.ts
diff --git a/yarn.lock b/yarn.lock
