feat(ssr): support Vue 2.6 new SSR system

Author: Guillaume Chau

packages/vue-ssr/README.md

@@ -59,11 +59,14 @@ VueSSR.createApp = function (context) {
   const { app, router } = CreateApp()
   // Set the url in the router
   router.push(context.url)
-  return {
-    app,
+
+  // Called when Vue app has finished rendering
+  context.rendered = () => {
     // Inject some arbitrary JS
-    js: `console.log('hello')`,
+    context.js = `console.log('hello')`
   }
+
+  return app
 }
 ```
 
@@ -85,12 +88,14 @@ VueSSR.createApp = function (context) {
       }
 
       // Can use components prefetch here...
-
-      resolve({
-        app,
+      
+      // Called when Vue app has finished rendering
+      context.rendered = () => {
         // Inject some arbitrary JS
-        js: `console.log('hello')`,
-      })
+        context.js = `console.log('hello')`
+      }
+
+      resolve(app)
     })
   })
 }
@@ -124,26 +129,25 @@ VueSSR.createApp = function (context) {
 
     // ...
 
-    resolve({
-      app,
-      appendHtml() {
-        const {
-          title, link, style, script, noscript, meta
-        } = context.meta.inject()
-
-        return {
-          head: `
-            ${meta.text()}
-            ${title.text()}
-            ${link.text()}
-            ${style.text()}
-            ${script.text()}
-            ${noscript.text()}
-          `,
-          body: script.text({ body: true })
-        }
+    context.appendHtml = () => {
+      const {
+        title, link, style, script, noscript, meta
+      } = context.meta.inject()
+
+      return {
+        head: `
+          ${meta.text()}
+          ${title.text()}
+          ${link.text()}
+          ${style.text()}
+          ${script.text()}
+          ${noscript.text()}
+        `,
+        body: script.text({ body: true })
       }
-    })
+    }
+
+    resolve(app)
   })
 }
 ```

packages/vue-ssr/package.js

@@ -1,6 +1,6 @@
 Package.describe({
   name: 'akryum:vue-ssr',
-  version: '0.3.3',
+  version: '0.4.0',
   summary: 'Render Vue server-side',
   git: 'https://github.com/Akryum/meteor-vue-component',
   documentation: 'README.md',
@@ -19,7 +19,7 @@ Package.onUse(function (api) {
     'routepolicy',
     'url',
     'akryum:[email protected]',
-    'staringatlights:fast-render@3.0.3',
+    'staringatlights:fast-render@3.2.0',
     'ejson',
     'server-render',
   ])
@@ -28,7 +28,6 @@ Package.onUse(function (api) {
 })
 
 Npm.depends({
-  'vue-server-renderer': '2.5.18',
-  'vue-ssr-html-stream': '2.2.0',
-  'cookie-parser': '1.4.3',
+  'vue-server-renderer': '2.6.10',
+  'cookie-parser': '1.4.4',
 })

packages/vue-ssr/server/index.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import VueServerRenderer from 'vue-server-renderer/build.js'
+import { createRenderer } from 'vue-server-renderer'
 import { WebApp } from 'meteor/webapp'
 import cookieParser from 'cookie-parser'
 import { onPageLoad } from 'meteor/server-render'
@@ -62,7 +62,7 @@ VueSSR.inSubscription = new Meteor.EnvironmentVariable() // <-- needed in data.j
 
 patchSubscribeData(VueSSR)
 
-const renderer = VueServerRenderer.createRenderer()
+const renderer = createRenderer()
 
 function writeServerError (sink) {
   sink.appendToBody('Server Error')
@@ -91,24 +91,19 @@ onPageLoad(sink => new Promise((resolve, reject) => {
         // }
 
         // Vue
+        const context = { url: req.url }
         let asyncResult
-        const result = VueSSR.createApp({ url: req.url })
+        const result = VueSSR.createApp(context)
         if (result && typeof result.then === 'function') {
           asyncResult = result
         } else {
           asyncResult = Promise.resolve(result)
         }
 
-        asyncResult.then(result => {
-          let app
-          if (result.app) {
-            app = result.app
-          } else {
-            app = result
-          }
-
+        asyncResult.then(app => {
           renderer.renderToString(
             app,
+            context,
             (error, html) => {
               if (error) {
                 console.error(error)
@@ -125,11 +120,11 @@ onPageLoad(sink => new Promise((resolve, reject) => {
               // // sink.appendToHead(`<script type="text/inject-data">${encodeURIComponent(injectData)}</script>`)
 
               let appendHtml
-              if (typeof result.appendHtml === "function") appendHtml = result.appendHtml()
+              if (typeof context.appendHtml === "function") appendHtml = context.appendHtml()
 
-              const head = ((appendHtml && appendHtml.head) || result.head) || ''
-              const body = ((appendHtml && appendHtml.body) || result.body) || ''
-              const js = ((appendHtml && appendHtml.js) || result.js) || ''
+              const head = ((appendHtml && appendHtml.head) || context.head) || ''
+              const body = ((appendHtml && appendHtml.body) || context.body) || ''
+              const js = ((appendHtml && appendHtml.js) || context.js) || ''
 
               const script = js && `<script type="text/javascript">${js}</script>`