feat: add useAsync and improve ssrRef

package.json

@@ -43,7 +43,7 @@
     "release": "release-it",
     "test": "run-s test:*",
     "test:types": "tsd",
-    "test:e2e": "testcafe firefox:headless test/e2e --app 'node test/start-fixture.js'"
+    "test:e2e": "testcafe firefox:headless test/e2e --app node test/start-fixture.js"
   },
   "tsd": {
     "directory": "test/tsd",

src/async.ts

@@ -0,0 +1,29 @@
+import { ssrRef } from './ssr-ref'
+import { onServerPrefetch } from './server-prefetch'
+import { Ref, isRef } from '@vue/composition-api'
+
+export const useAsync = <T>(
+  cb: () => T | Promise<T>,
+  key?: string | Ref<null>
+): Ref<null | T> => {
+  const _ref = isRef(key) ? key : ssrRef<T | null>(null, key)
+
+  if (!_ref.value) {
+    const p = cb()
+
+    if (p instanceof Promise) {
+      if (process.server) {
+        onServerPrefetch(async () => {
+          _ref.value = await p
+        })
+      } else {
+        // eslint-disable-next-line
+        p.then(res => (_ref.value = res))
+      }
+    } else {
+      _ref.value = p
+    }
+  }
+
+  return _ref as Ref<null | T>
+}

src/babel.ts

@@ -22,7 +22,10 @@ export default function ssrRefPlugin({ loadOptions, getEnv, types: t }: Babel) {
         }
       : {}),
     CallExpression(path) {
-      if (!('name' in path.node.callee) || path.node.callee.name !== 'ssrRef')
+      if (
+        !('name' in path.node.callee) ||
+        !['ssrRef', 'useAsync'].includes(path.node.callee.name)
+      )
         return
 
       if (path.node.arguments.length > 1) return

src/fetch.ts

@@ -1,7 +1,6 @@
 import Vue from 'vue'
 import { getCurrentInstance, onBeforeMount } from '@vue/composition-api'
-
-import { onServerPrefetch } from './ssr-ref'
+import { onServerPrefetch } from './server-prefetch'
 
 import { ComponentInstance } from '@vue/composition-api/dist/component'
 

src/index.ts

@@ -27,7 +27,9 @@ export const meta = require('../package.json')
 
 export { useFetch } from './fetch'
 export { withContext } from './context'
-export { ssrRef, onServerPrefetch, setSSRContext } from './ssr-ref'
+export { ssrRef, setSSRContext } from './ssr-ref'
+export { onServerPrefetch } from './server-prefetch'
+export { useAsync } from './async'
 export { useHead } from './meta'
 
 export {

src/server-prefetch.ts

@@ -0,0 +1,24 @@
+import { onServerPrefetch as onPrefetch } from '@vue/composition-api'
+const prefetchFunctions: Array<() => any> = []
+const prefetchFunctionsEnd: Array<() => any> = []
+
+let hasServerPrefetch = false
+function setupOnServerPrefetch() {
+  if (!hasServerPrefetch) {
+    hasServerPrefetch = true
+    onPrefetch(async () => {
+      await Promise.all(prefetchFunctions.map(p => p()))
+      await Promise.all(prefetchFunctionsEnd.map(p => p()))
+    })
+  }
+}
+
+export function onServerPrefetch(cb: () => any) {
+  prefetchFunctions.push(cb)
+  setupOnServerPrefetch()
+}
+
+export function onServerPrefetchEnd(cb: () => any) {
+  prefetchFunctionsEnd.push(cb)
+  setupOnServerPrefetch()
+}

src/ssr-ref.ts

@@ -1,55 +1,53 @@
-import { ref, Ref, onServerPrefetch as prefetch } from '@vue/composition-api'
+import { ref, Ref } from '@vue/composition-api'
+import { onServerPrefetchEnd } from './server-prefetch'
 
 function getValue<T>(value: T | (() => T)): T {
   if (value instanceof Function) return value()
   return value
 }
 
-let ssrContext: any
-let injected = false
+let data: any = {}
 
-const refs: [string, Ref<any>][] = []
-
-export function setSSRContext(context: any) {
-  ssrContext = ssrContext || context
+export function setSSRContext(ssrContext: any) {
+  ssrContext.nuxt.ssrRefs = data
 }
 
-export function injectRefs() {
-  if (!process.server || !ssrContext) return
-
-  if (!ssrContext.nuxt.ssrRefs) ssrContext.nuxt.ssrRefs = {}
-
-  refs.forEach(([key, ref]) => {
-    ssrContext.nuxt.ssrRefs[key] = JSON.parse(JSON.stringify(ref.value))
-  })
+function clone<T>(obj: T): T {
+  if (typeof obj === 'object') {
+    return JSON.parse(JSON.stringify(obj))
+  } else {
+    return obj
+  }
 }
 
+/**
+ * Creates a Ref that is in sync with the client.
+ */
 export const ssrRef = <T>(value: T | (() => T), key?: string): Ref<T> => {
-  const val = ref<T>(getValue(value))
-
-  if (!key)
+  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."
     )
-
-  if (!injected) {
-    prefetch(injectRefs)
-    injected = true
   }
 
   if (process.client) {
-    const nuxtState = (window as any).__NUXT__
-    val.value = (nuxtState.ssrRefs || {})[key!] ?? getValue(value)
-  } else {
-    refs.push([key, val])
+    return ref((window as any).__NUXT__?.ssrRefs?.[key] ?? getValue(value))
   }
 
-  return val as Ref<T>
-}
+  if (typeof value === 'function') {
+    const sref = ref(getValue(value)) as Ref<T>
+    onServerPrefetchEnd(() => (data[key] = sref.value))
+
+    return sref
+  } else {
+    const val = getValue(value)
+    const initVal = clone(val)
+    const sref = ref(val) as Ref<T>
 
-export const onServerPrefetch = (callback: Function) => {
-  prefetch(async () => {
-    await callback()
-    injectRefs()
-  })
+    onServerPrefetchEnd(() =>
+      initVal !== sref.value ? (data[key] = sref.value) : null
+    )
+
+    return sref
+  }
 }

test/e2e/ssr-refs.ts

@@ -14,6 +14,7 @@ test('Shows data on ssr-loaded page', async t => {
   await expectOnPage('ref-only SSR rendered')
   await expectOnPage('function-runs SSR or client-side')
   await expectOnPage('prefetched-result')
+  await expectOnPage('on: server')
 
   await t.click(Selector('a').withText('home'))
   await t.click(Selector('a').withText('ssr refs'))
@@ -26,4 +27,5 @@ test('Shows appropriate data on client-loaded page', async t => {
   await expectPathnameToBe('/ssr-ref')
   await expectNotOnPage('ref-only SSR rendered')
   await expectOnPage('function-runs SSR or client-side')
+  await expectOnPage('on: client')
 })

test/fixture/pages/ssr-ref.vue

@@ -3,6 +3,8 @@
     <div>ref-{{ computedVal }}</div>
     <div>function-{{ funcValue }}</div>
     <div>prefetched-{{ prefetchValue }}</div>
+    <div>on: {{ asyncValue }}</div>
+    <div>no-change: {{ noChange }}</div>
     <nuxt-link to="/">home</nuxt-link>
   </div>
 </template>
@@ -15,6 +17,7 @@ import {
   useFetch,
   ssrRef,
   onServerPrefetch,
+  useAsync,
 } from 'nuxt-composition-api'
 
 export function fetcher(result, time = 100) {
@@ -27,9 +30,10 @@ export function fetcher(result, time = 100) {
 
 export default defineComponent({
   setup() {
-    const refValue = ssrRef('')
-    const prefetchValue = ssrRef('')
-    const funcValue = ssrRef(() => 'runs SSR or client-side')
+    const refValue = ssrRef('') // changed => in __NUXT__
+    const prefetchValue = ssrRef('') // changed => in __NUXT__
+    const funcValue = ssrRef(() => 'runs SSR or client-side') // function => in __NUXT__
+    const noChange = ssrRef('initValue') // no Change => not in __NUXT__
 
     const computedVal = computed(() => refValue.value)
 
@@ -39,10 +43,21 @@ export default defineComponent({
       prefetchValue.value = await fetcher('result', 500)
     })
 
+    const asyncValue = useAsync(() =>
+      fetcher(process.server ? 'server' : 'client', 500)
+    )
+
+    // Error handeling
+    // useAsync(() => {
+    //   throw '42'
+    // })
+
     return {
       computedVal,
       funcValue,
       prefetchValue,
+      asyncValue,
+      noChange,
     }
   },
 })

test/tsd/async.test-d.ts

@@ -0,0 +1,9 @@
+import { expectType } from 'tsd'
+
+import { useAsync, Ref, ssrRef } from '../..'
+
+expectType<Ref<null | { a: string }>>(useAsync(async () => ({ a: 'test' })))
+
+expectType<Ref<null | { a: string }>>(
+  useAsync(async () => ({ a: 'test' }), ssrRef(null))
+)

test/tsd/ssr-ref.test-d.ts

@@ -2,10 +2,10 @@ import { expectType } from 'tsd'
 
 import { ssrRef, Ref } from '../..'
 
-// eslint-disable-next-line
 expectType<Ref<number>>(ssrRef(() => 42))
 expectType<Ref<string>>(ssrRef('thoughtless'))
 interface Obj {
   name: string
 }
 expectType<Ref<Obj>>(ssrRef({ name: 'today' }))
+expectType<Ref<null>>(ssrRef(null))

test/unit/__snapshots__/babel-ssr-ref.spec.ts.snap

@@ -4,5 +4,7 @@ exports[`babel plugin works 1`] = `
 "const ref = ref(1);
 const ref2 = ssrRef(2, \\"ref2-BAW7YFDj4E+Qxr+ujqEADg==\\");
 const ref3 = ssrRef(3, 'custom-key');
-const ref4 = ssrRef(4, \\"ref4-h6IKM1doqCRBR49lWv2V/g==\\");"
+const ref4 = ssrRef(() => 4, \\"ref4-h6IKM1doqCRBR49lWv2V/g==\\");
+const async1 = useAsync(() => null, \\"async1-nk1uJ/q39HMoKEMFH33Ryg==\\");
+const async2 = useAsync(() => null, 'key');"
 `;

test/unit/babel-ssr-ref.spec.ts

@@ -7,7 +7,10 @@ var example = `
 const ref = ref(1)
 const ref2 = ssrRef(2)
 const ref3 = ssrRef(3, 'custom-key')
-const ref4 = ssrRef(4)
+const ref4 = ssrRef(() => 4)
+
+const async1 = useAsync(() => null)
+const async2 = useAsync(() => null, 'key')
 `
 
 describe('babel plugin', () => {