feat: upgrade to @vue/composition-api v0.6.1

BREAKING CHANGE: There are a number of breaking changes in the latest upstream composition-api. See https://github.com/vuejs/composition-api/releases/tag/v0.6.0 for details.

package.json

@@ -58,7 +58,7 @@
     "pre-commit": "lint-staged"
   },
   "dependencies": {
-    "@vue/composition-api": "^0.5.0",
+    "@vue/composition-api": "^0.6.1",
     "defu": "^2.0.4"
   },
   "devDependencies": {
@@ -71,7 +71,7 @@
     "@types/jest": "^26.0.0",
     "@typescript-eslint/eslint-plugin": "^3.2.0",
     "@typescript-eslint/parser": "^3.2.0",
-    "@vue/composition-api": "^0.5.0",
+    "@vue/composition-api": "^0.6.1",
     "babel-loader": "^8.1.0",
     "codecov": "^3.7.0",
     "eslint": "^7.2.0",

src/async.ts

@@ -1,5 +1,5 @@
 import { isRef, onServerPrefetch } from '@vue/composition-api'
-import type { Ref } from '@vue/composition-api'
+import type { Ref, UnwrapRef } from '@vue/composition-api'
 
 import { globalNuxt } from './globals'
 import { ssrRef } from './ssr-ref'
@@ -51,14 +51,14 @@ export const useAsync = <T>(
     if (p instanceof Promise) {
       if (process.server) {
         onServerPrefetch(async () => {
-          _ref.value = await p
+          _ref.value = (await p) as UnwrapRef<T>
         })
       } else {
         // eslint-disable-next-line
-        p.then(res => (_ref.value = res))
+        p.then(res => (_ref.value = res as UnwrapRef<T>))
       }
     } else {
-      _ref.value = p
+      _ref.value = p as UnwrapRef<T>
     }
   }
 

src/entrypoint.ts

@@ -13,12 +13,22 @@ export { useStatic } from './static'
 
 export type {
   ComponentRenderProxy,
+  ComputedRef,
+  FlushMode,
   InjectionKey,
   PropOptions,
   PropType,
   Ref,
   SetupContext,
+  UnwrapRef,
   VueWatcher,
+  WatchCallback,
+  WatchEffect,
+  WatchOptions,
+  WatchOptionsBase,
+  WatchSource,
+  WatchStopHandle,
+  WritableComputedRef,
 } from '@vue/composition-api'
 
 export {
@@ -27,7 +37,9 @@ export {
   createElement,
   getCurrentInstance,
   inject,
+  isReactive,
   isRef,
+  markRaw,
   onActivated,
   onBeforeMount,
   onBeforeUnmount,
@@ -42,7 +54,13 @@ export {
   reactive,
   ref,
   set,
+  shallowReactive,
+  shallowRef,
+  toRaw,
+  toRef,
   toRefs,
+  triggerRef,
+  unref,
   watch,
   watchEffect,
 } from '@vue/composition-api'

src/meta.ts

@@ -106,7 +106,8 @@ export const useMeta = <T extends MetaInfo>(init?: T) => {
 
   const refs = toRefs(_head) as ToRefs<ReturnType<typeof createEmptyMeta> & T>
 
-  if (process.client) watch(Object.values(refs), vm.$meta().refresh)
+  if (process.client)
+    watch(Object.values(refs), vm.$meta().refresh, { immediate: true })
 
   return refs
 }

src/ssr-ref.ts

@@ -1,5 +1,5 @@
-import { ref, computed } from '@vue/composition-api'
-import type { Ref } from '@vue/composition-api'
+import { ref, computed, shallowRef } from '@vue/composition-api'
+import type { Ref, UnwrapRef } from '@vue/composition-api'
 
 import { globalContext, globalNuxt } from './globals'
 
@@ -40,7 +40,10 @@ const sanitise = (val: unknown) =>
   const val2 = ssrRef(myExpensiveSetterFunction)
   ```
  */
-export const ssrRef = <T>(value: T | (() => T), key?: string): Ref<T> => {
+export const ssrRef = <T>(
+  value: T | (() => T),
+  key?: string
+): Ref<UnwrapRef<T>> => {
   if (!key) {
     throw new Error(
       "You must provide a key. You can have it generated automatically by adding 'nuxt-composition-api/babel' to your Babel plugins."
@@ -85,15 +88,7 @@ export const ssrRef = <T>(value: T | (() => T), key?: string): Ref<T> => {
     },
   })
 
-  return proxy as Ref<T>
-}
-
-// TODO: remove when https://github.com/vuejs/composition-api/pull/311 is merged
-function shallowRef<T>(value: T): Ref<T> {
-  return computed({
-    get: () => value,
-    set: v => (value = v),
-  })
+  return proxy
 }
 
 /**

src/static.ts

@@ -1,5 +1,6 @@
 import { ssrRef } from './ssr-ref'
-import { Ref, onServerPrefetch, watch, computed } from '@vue/composition-api'
+import { onServerPrefetch, watch, computed, ref } from '@vue/composition-api'
+import type { Ref, UnwrapRef } from '@vue/composition-api'
 
 const staticPath = '<%= options.staticPath %>'
 const staticCache: Record<string, any> = {}
@@ -67,7 +68,7 @@ async function writeFile(key: string) {
  */
 export const useStatic = <T>(
   factory: (param: string, key: string) => Promise<T>,
-  param: Ref<string> = { value: '' },
+  param: Ref<string> = ref(''),
   keyBase: string
 ): Ref<T | null> => {
   const key = computed(() => `${keyBase}-${param.value}`)
@@ -79,40 +80,46 @@ export const useStatic = <T>(
     const onFailure = () =>
       factory(param.value, key.value).then(r => {
         staticCache[key.value] = r
-        result.value = r
+        result.value = r as UnwrapRef<T>
         return
       })
-    watch(key, key => {
-      if (key in staticCache) {
-        result.value = staticCache[key]
-        return
+    watch(
+      key,
+      key => {
+        if (key in staticCache) {
+          result.value = staticCache[key]
+          return
+        }
+        /* eslint-disable promise/always-return */
+        if (!process.static) onFailure()
+        else
+          fetch(`<%= options.publicPath %>${key}.json`)
+            .then(response => {
+              if (!response.ok) throw new Error('Response invalid.')
+              return response.json()
+            })
+            .then(json => {
+              staticCache[key] = json
+              result.value = json
+            })
+            .catch(onFailure)
+        /* eslint-enable */
+      },
+      {
+        immediate: true,
       }
-      /* eslint-disable promise/always-return */
-      if (!process.static) onFailure()
-      else
-        fetch(`<%= options.publicPath %>${key}.json`)
-          .then(response => {
-            if (!response.ok) throw new Error('Response invalid.')
-            return response.json()
-          })
-          .then(json => {
-            staticCache[key] = json
-            result.value = json
-          })
-          .catch(onFailure)
-      /* eslint-enable */
-    })
+    )
   } else {
     if (key.value in staticCache) {
       result.value = staticCache[key.value]
-      return result
+      return result as Ref<T | null>
     }
     onServerPrefetch(async () => {
-      result.value = await factory(param.value, key.value)
+      result.value = (await factory(param.value, key.value)) as UnwrapRef<T>
       staticCache[key.value] = result.value
       writeFile(key.value)
     })
   }
 
-  return result
+  return result as Ref<T | null>
 }

test/fixture/pages/context/_slug.vue

@@ -29,9 +29,13 @@ export default defineComponent({
   setup() {
     const { route, query, params } = useContext()
     const called = ref(0)
-    watch(route, () => {
-      called.value++
-    })
+    watch(
+      route,
+      () => {
+        called.value++
+      },
+      { immediate: true }
+    )
 
     return { route, query, params, called }
   },