getComponent support function return a Promise

[baoti]

I am working on vue bindings for Hypernova, but vue-server-renderer renderer pass html by callback:

const Vue = require('vue')

const renderer = require('vue-server-renderer').createRenderer()

const vm = new Vue({
  render (h) {
    return h('div', 'hello')
  }
})

renderer.renderToString(vm, (err, html) => {
  console.log(html) // -> <div server-rendered="true">hello</div> 
})

So, I'd like getComponent support a function which return a Promise, just like props => Promise.resole(html).

[baoti]

Vue bindings for server like this:

export const renderVue = (name, component) => hypernova({
  server() {
    return (props) => {
      const vm = new component({ propsData: props });
      return new Promise((resolve, reject) => {
        renderer.renderToString(vm, (err, html) => {
          if (err) {
            reject(err);
          } else {
            resolve(serialize(name, html, props));
          }
        });
      });
    };
  },
}

[ljharb]

I'm not sure I understand - are you saying that the vue server renderer does not synchronously produce a string?

[baoti]

@ljharb Yes.

[ljharb]

According to the code, getComponent's return value is already passed into Promise.resolve.

[baoti]

getComponent's return value is a function, but renderFn(context.props)'s return value is a Promise.

[baoti]

context.html = renderFn(context.props);

context.html got a Promise, not a string.

[ljharb]

Gotcha; so you'd need https://github.com/airbnb/hypernova/blob/5dbddc4dba65bd9ee2bcbc04fec11713bfa89d57/src/utils/BatchManager.js#L160 changed.

Seems doable/reasonable to me.

[marconi1992]

@baoti you could use this npm package https://www.npmjs.com/package/hypernova-vue, there's an article about it too https://medium.com/@felipegaiacharly/using-vue-js-with-hypernova-server-ce792dcf1ac7

[baoti]

It's already supported since [2.1.1] - 2017-06-15, commit.

[baoti]

@marconi1992 Thanks, It works.