From 5ee9248b111a0dbd489b2550455160968494ce23 Mon Sep 17 00:00:00 2001 From: u3u Date: Sun, 25 Aug 2019 15:22:47 +0800 Subject: [PATCH] feat(*): replace with vue composition api close #52 BREAKING CHANGE: replace to [`@vue/composition-api`](https://github.com/vuejs/composition-api) --- .storybook/config.js | 6 +++--- .vscode/docs.code-snippets | 4 ++-- .vscode/hook.code-snippets | 2 +- README.md | 6 +++--- docs/useActions.md | 2 +- docs/useCounter.md | 2 +- docs/useDate.md | 2 +- docs/useGetters.md | 2 +- docs/useMutations.md | 2 +- docs/usePrevious.md | 2 +- docs/useRouter.md | 2 +- docs/useState.md | 2 +- docs/useStore.md | 2 +- docs/useWindowSize.md | 2 +- package.json | 2 +- src/__stories__/useActions.story.tsx | 2 +- src/__stories__/useCounter.story.tsx | 2 +- src/__stories__/useDate.story.tsx | 2 +- src/__stories__/useGetters.story.tsx | 2 +- src/__stories__/useMutations.story.tsx | 2 +- src/__stories__/usePrevious.story.tsx | 4 ++-- src/__stories__/useRouter.story.tsx | 6 +++--- src/__stories__/useState.story.tsx | 2 +- src/__stories__/useStore.story.tsx | 2 +- src/__stories__/useWindowSize.story.tsx | 2 +- src/__tests__/useDate.test.ts | 2 +- src/__tests__/useMedia.test.ts | 2 +- src/__tests__/useMountedState.test.ts | 2 +- src/__tests__/usePrevious.test.ts | 18 +++++++++--------- src/__tests__/useTimeout.test.ts | 2 +- src/helpers/vuex/index.ts | 2 +- src/helpers/vuex/interface.ts | 4 ++-- src/useCounter.ts | 4 ++-- src/useDate.ts | 4 ++-- src/useMedia.ts | 4 ++-- src/useMountedState.ts | 4 ++-- src/usePrevious.ts | 9 +++------ src/useRouter.ts | 2 +- src/useStore.ts | 2 +- src/useTimeout.ts | 4 ++-- src/useWindowSize.ts | 6 +++--- src/util/renderHook.ts | 16 +++++----------- yarn.lock | 14 +++++++------- 43 files changed, 79 insertions(+), 88 deletions(-) diff --git a/.storybook/config.js b/.storybook/config.js index fe96083..b4c75d3 100644 --- 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 index 7335c0d..7878c50 100644 --- 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 index 3c4a693..777f7ef 100644 --- 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 index e924bed..5a8b0be 100644 --- a/README.md +++ b/README.md @@ -21,15 +21,15 @@ Docs are available at ```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 index 7b78ada..d7d0986 100644 --- 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 index 7d1cf02..bfa0c09 100644 --- 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 index 77e3f69..6c631d4 100644 --- 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 index e9cfcad..13413c4 100644 --- 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 index 57d45d5..731f3f7 100644 --- 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 index 7a612eb..4281609 100644 --- 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 index 0c241e4..aee5b87 100644 --- 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 index 25d57c1..74223e9 100644 --- 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 index 830db1b..18adefb 100644 --- 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 index a615531..dcfc134 100644 --- 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 index 9d6b0c5..e7646a7 100644 --- 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 index aa89595..96fa0d6 100644 --- 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 index fed1c1d..3a2c82f 100644 --- 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 index c668a36..915c3ba 100644 --- 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 index a4b8a68..4b0a1b7 100644 --- 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 index 2b11d00..5b28aa6 100644 --- 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 index 346ffe9..3bedd87 100644 --- 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 = () => ; 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 index 768b61a..bb57109 100644 --- 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 index 163add9..dc3fac4 100644 --- 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 index f9f738d..4a12c80 100644 --- 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 index 7a07c19..794b898 100644 --- 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 index 311b9ec..2decc8c 100644 --- 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 index 69fa99e..bdd700d 100644 --- 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 index c1b8621..8fed2d0 100644 --- 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 index 399a483..c8d57bc 100644 --- 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 index 098f31f..028fe5b 100644 --- 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 index bcf64dc..eff0a7e 100644 --- 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 index 9484e34..a90d560 100644 --- 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 = { [key: string]: T }; -type Computed = Wrapper; +type Computed = Ref; type MutationMethod = (...args: any[]) => void; type ActionMethod = (...args: any[]) => Promise; type CustomVue = Vue & Dictionary; diff --git a/src/useCounter.ts b/src/useCounter.ts index dfe7229..dadbda9 100644 --- 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 index 959b6ae..0ea4a32 100644 --- a/src/useDate.ts +++ b/src/useDate.ts @@ -1,4 +1,4 @@ -import { value, onMounted, onUnmounted } from 'vue-function-api'; +import { ref, onMounted, onUnmounted } from '@vue/composition-api'; import dayjs from 'dayjs'; import relativeTime from 'dayjs/plugin/relativeTime'; @@ -8,7 +8,7 @@ export default function useDate( d: dayjs.ConfigType = Date.now(), timeout: number = 0, ) { - const date = value(dayjs(d)); + const date = ref(dayjs(d)); if (timeout) { let timerId: number; diff --git a/src/useMedia.ts b/src/useMedia.ts index 7687767..c56e626 100644 --- a/src/useMedia.ts +++ b/src/useMedia.ts @@ -1,8 +1,8 @@ -import { value, onMounted, onUnmounted } from 'vue-function-api'; +import { ref, onMounted, onUnmounted } from '@vue/composition-api'; export default function useMedia(query, defaultState = false) { let mql; - const matches = value(defaultState); + const matches = ref(defaultState); const updateMatches = () => { if (mql) matches.value = mql.matches; }; diff --git a/src/useMountedState.ts b/src/useMountedState.ts index a3b5679..9381837 100644 --- a/src/useMountedState.ts +++ b/src/useMountedState.ts @@ -1,8 +1,8 @@ import Vue from 'vue'; -import { value, onMounted } from 'vue-function-api'; +import { ref, onMounted } from '@vue/composition-api'; export default function useMountedState() { - const isMounted = value(false); + const isMounted = ref(false); onMounted(async () => { await Vue.nextTick(); diff --git a/src/usePrevious.ts b/src/usePrevious.ts index 84629fe..8de17f2 100644 --- a/src/usePrevious.ts +++ b/src/usePrevious.ts @@ -1,10 +1,7 @@ -import { value, watch, Wrapper } from 'vue-function-api'; -import { UnwrapValue } from 'vue-function-api/dist/wrappers'; +import { ref, watch, Ref } from '@vue/composition-api'; -export default function usePrevious( - state: Wrapper> | (() => UnwrapValue), -) { - const previous = value(undefined!); +export default function usePrevious(state: Ref | (() => T)) { + const previous = ref(undefined!); watch(state, (_, oldVal) => { previous.value = oldVal; diff --git a/src/useRouter.ts b/src/useRouter.ts index 19ce688..ebcb5a9 100644 --- a/src/useRouter.ts +++ b/src/useRouter.ts @@ -1,4 +1,4 @@ -import { computed } from 'vue-function-api'; +import { computed } from '@vue/composition-api'; import { getRuntimeVM } from './util/runtime'; export default function useRouter() { diff --git a/src/useStore.ts b/src/useStore.ts index 12331fc..33152c9 100644 --- a/src/useStore.ts +++ b/src/useStore.ts @@ -1,4 +1,4 @@ -import { computed } from 'vue-function-api'; +import { computed } from '@vue/composition-api'; import { Store } from 'vuex'; import { getRuntimeVM } from './util/runtime'; diff --git a/src/useTimeout.ts b/src/useTimeout.ts index 256e1ee..8f00e36 100644 --- a/src/useTimeout.ts +++ b/src/useTimeout.ts @@ -1,7 +1,7 @@ -import { value, onMounted, onUnmounted } from 'vue-function-api'; +import { ref, onMounted, onUnmounted } from '@vue/composition-api'; export default function useTimeout(delay = 0) { - const ready = value(false); + const ready = ref(false); let timerId: number; onMounted(() => { diff --git a/src/useWindowSize.ts b/src/useWindowSize.ts index 495fd4f..966300a 100644 --- a/src/useWindowSize.ts +++ b/src/useWindowSize.ts @@ -1,8 +1,8 @@ -import { value, computed, onMounted, onUnmounted } from 'vue-function-api'; +import { ref, computed, onMounted, onUnmounted } from '@vue/composition-api'; export default function useWindowSize() { - const width = value(window.innerWidth); - const height = value(window.innerHeight); + const width = ref(window.innerWidth); + const height = ref(window.innerHeight); const update = () => { width.value = window.innerWidth; height.value = window.innerHeight; diff --git a/src/util/renderHook.ts b/src/util/renderHook.ts index 121328f..6cdb8d7 100644 --- a/src/util/renderHook.ts +++ b/src/util/renderHook.ts @@ -1,8 +1,8 @@ /* eslint import/no-extraneous-dependencies: off */ import Vue from 'vue'; import { shallowMount, createLocalVue } from '@vue/test-utils'; -import { plugin, createComponent } from 'vue-function-api'; -import { SetupContext } from 'vue-function-api/dist/types/vue'; +import VueCompositionAPI, { createComponent } from '@vue/composition-api'; +import { SetupFunction, Data } from '@vue/composition-api/dist/component'; import { createRouter, createStore } from '../mocks'; import hooks from '..'; @@ -11,16 +11,10 @@ const router = createRouter(localVue); const store = createStore(localVue); localVue.use(hooks); -localVue.use(plugin); +localVue.use(VueCompositionAPI); -export type SetupFunction = ( - this: undefined, - props: { [K in keyof Props]: Props[K] }, - context: SetupContext, -) => object | null | undefined | void; - -export default function renderHook( - setup: SetupFunction, +export default function renderHook( + setup: SetupFunction, ) { const App = createComponent({ template: ` diff --git a/yarn.lock b/yarn.lock index 28728d3..fec4ee3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1955,6 +1955,13 @@ source-map "~0.6.1" vue-template-es2015-compiler "^1.9.0" +"@vue/composition-api@^0.2.0": + version "0.2.0" + resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-0.2.0.tgz#9e26ac3a4be0e8f25b1ab8c1710bfb2e106513fb" + integrity sha512-JUMegz0tQQ/JjhlQWXtS5zeOkPrdmL3dyyFuZZZVRZL3OY4YtuzQmyX7nZezoiUdSt84XAQA7bLH9L2muhb0pw== + dependencies: + tslib "^1.9.3" + "@vue/test-utils@^1.0.0-beta.29": version "1.0.0-beta.29" resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.0.0-beta.29.tgz#c942cf25e891cf081b6a03332b4ae1ef430726f0" @@ -12493,13 +12500,6 @@ vm-browserify@^1.0.1: resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.0.tgz#bd76d6a23323e2ca8ffa12028dc04559c75f9019" integrity sha512-iq+S7vZJE60yejDYM0ek6zg308+UZsdtPExWP9VZoCFCz1zkJoXFnAX7aZfd/ZwrkidzdUZL0C/ryW+JwAiIGw== -vue-function-api@^2.2.0: - version "2.2.0" - resolved "https://registry.yarnpkg.com/vue-function-api/-/vue-function-api-2.2.0.tgz#06aeb76fcbcf27d8591a1f87cee8d3d771d7feed" - integrity sha512-Qyg5IIi+1Zj5U3aHQ55K8nB98BwytxDv0HGWPssQFo9M32QDXHIwzgSE+BhUlzyclb1XkPiLubXApja1WQSwSQ== - dependencies: - tslib "^1.9.3" - vue-hot-reload-api@^2.3.0: version "2.3.3" resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf"