feat: add useAsync and improve ssrRef

[mathe42]

Features

• add useAsync helper to prefetch data and send in ssrContext to client
• updates serverPrefetch helper
• improves ssrRef handling

[mathe42]

When this PR is accepted we have to rewrite fetch. I didn't look into that :D

Fell free to discouse about this. I don't know if my way is the best way...

[mathe42]

Finished for review.

[mathe42]

@danielroe changed ssrRef to only hydrate if value is function or value of ref get changed

[mathe42]

Note: The old and my new implementation do not allow to use outside of setup! I'm working on that there are some problems with watch. vuejs/composition-api#311 might fix them.

[danielroe]

Looking really interesting. Apart from the comments below, would you consider adding some e2e tests (or possibly we'll need to do it in jest if we're inspecting the raw HTML for the __NUXT__ content). I'd be happy to do the latter if you'd prefer, after it gets merged.

[mathe42]

I don't know where the test fails. Lokaly node test/start-fixture.js doesn't work anymore:

ERROR  Failed to compile with 1 errors                                                                         friendly-errors 09:22:20


 ERROR  in ./lib/index.es.js                                                                                    friendly-errors 09:22:20

Cannot statically analyse 'require(…, …)' in line 461                                                           friendly-errors 09:22:20
                                                                                                                friendly-errors 09:22:20
 @ ./test/fixture/.nuxt/composition-api/plugin.js 7:0-53
 @ ./test/fixture/.nuxt/index.js
 @ ./test/fixture/.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./test/fixture/.nuxt/client.js

[danielroe]

I don't know where the test fails. Lokaly node test/start-fixture.js doesn't work anymore:

ERROR  Failed to compile with 1 errors                                                                         friendly-errors 09:22:20


 ERROR  in ./lib/index.es.js                                                                                    friendly-errors 09:22:20

Cannot statically analyse 'require(…, …)' in line 461                                                           friendly-errors 09:22:20
                                                                                                                friendly-errors 09:22:20
 @ ./test/fixture/.nuxt/composition-api/plugin.js 7:0-53
 @ ./test/fixture/.nuxt/index.js
 @ ./test/fixture/.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./test/fixture/.nuxt/client.js

You're getting the error because the change to the Babel plugin is now injecting a key into every function call, including (in this case) require.

[mathe42]

Why are these test failing?

[danielroe]

Why are these test failing?

The reason they are now failing is that the e2e tests now run against a built version of the fixture, where this error is occuring: Node.appendChild: Cannot add children to a Comment. The error is caused by the current implementation of onServerPrefetch.

[mathe42]

this works:

<template>
  <div>
    <div>test: {{test}}</div>
  </div>
</template>

<script>
import {
  defineComponent,
  ref,
  onServerPrefetch
} from '@vue/composition-api'

export default defineComponent({
  setup() {
    const test = ref('test')

    onServerPrefetch(() => {
      test.value = 'Hello World.'
    })

    return {
      test
    }
  },
})
</script>

this doesn't work:

<template>
  <div>
    <div>test: {{test}}</div>
  </div>
</template>

<script>
import {
  defineComponent,
  ref,
  onServerPrefetch
} from 'nuxt-composition-api'

export default defineComponent({
  setup() {
    const test = ref('test')

    onServerPrefetch(() => {
      test.value = 'Hello World.'
    })

    return {
      test
    }
  },
})
</script>

[mathe42]

@danielroe had to rewrite onServerPrefetch now it works.

[mathe42]

That was wanted when useing a function I think it should be in __NUXT__

[mathe42]

Looks good for me.