feat(ssr): add ability to cleanup after request

close vuejs#9463

Author: ronald-d-rogers

src/server/bundle-renderer/create-bundle-renderer.js

@@ -28,6 +28,10 @@ type RenderBundle = {
   modules?: { [filename: string]: Array<string> };
 };
 
+function getRenderArguments(app) {
+  return app && app._isVue ? { app, onComplete: null } : app
+}
+
 export function createBundleRendererCreator (
   createRenderer: (options?: RenderOptions) => Renderer
 ) {
@@ -100,12 +104,16 @@ export function createBundleRendererCreator (
         run(context).catch(err => {
           rewriteErrorTrace(err, maps)
           cb(err)
-        }).then(app => {
+        }).then(args => {
+          const { app, onRequestComplete } = getRenderArguments(args)
           if (app) {
             renderer.renderToString(app, context, (err, res) => {
               rewriteErrorTrace(err, maps)
+              onRequestComplete && onRequestComplete()
               cb(err, res)
             })
+          } else {
+            onRequestComplete && onRequestComplete()
           }
         })
 
@@ -121,7 +129,8 @@ export function createBundleRendererCreator (
           process.nextTick(() => {
             res.emit('error', err)
           })
-        }).then(app => {
+        }).then(args => {
+          const { app, onComplete } = getRenderArguments(args)
           if (app) {
             const renderStream = renderer.renderToStream(app, context)
 
@@ -140,7 +149,15 @@ export function createBundleRendererCreator (
               })
             }
 
+            if (onComplete) {
+              renderStream.on('end', () => {
+                onComplete()
+              })
+            }
+
             renderStream.pipe(res)
+          } else {
+            onComplete && onComplete()
           }
         })
 

test/ssr/fixtures/app-callback.js

@@ -0,0 +1,13 @@
+import Vue from '../../../dist/vue.runtime.common.js'
+
+export default context => {
+  return new Promise(resolve => {
+    const app = new Vue({
+      render (h) {
+        return h('div', context.url)
+      }
+    })
+    const onComplete = () => { context.msg = 'hello' }
+    resolve({ app, onComplete })
+  })
+}

test/ssr/fixtures/split-callback.js

@@ -0,0 +1,27 @@
+import Vue from '../../../dist/vue.runtime.common.js'
+
+// async component!
+const Foo = () => import('./async-foo')
+const Bar = () => import('./async-bar') // eslint-disable-line
+
+export default context => {
+  return new Promise(resolve => {
+    const vm = new Vue({
+      render (h) {
+        return h('div', [
+          context.url,
+          h(Foo)
+        ])
+      }
+    })
+
+    const onComplete = () => { context.msg = 'hello' }
+
+    // simulate router.onReady
+    Foo().then(comp => {
+      // resolve now to make the render sync
+      Foo.resolved = Vue.extend(comp.default)
+      resolve({ app: vm, onComplete })
+    })
+  })
+}

test/ssr/ssr-bundle-render.spec.js

@@ -66,6 +66,33 @@ function createAssertions (runInNewContext) {
     })
   })
 
+  it('renderToString with callback', done => {
+    createRenderer('app-callback.js', { runInNewContext }, renderer => {
+      const context = { url: '/test' }
+      renderer.renderToString(context, (err, res) => {
+        expect(res).toBe('<div data-server-rendered="true">/test</div>')
+        expect(context.msg).toBe('hello')
+        done()
+      })
+    })
+  })
+
+  it('renderToStream with callback', done => {
+    createRenderer('app-callback.js', { runInNewContext }, renderer => {
+      const context = { url: '/test' }
+      const stream = renderer.renderToStream(context)
+      let res = ''
+      stream.on('data', chunk => {
+        res += chunk.toString()
+      })
+      stream.on('end', () => {
+        expect(res).toBe('<div data-server-rendered="true">/test</div>')
+        expect(context.msg).toBe('hello')
+        done()
+      })
+    })
+  })
+
   it('renderToString catch error', done => {
     createRenderer('error.js', { runInNewContext }, renderer => {
       renderer.renderToString(err => {
@@ -295,6 +322,34 @@ function createAssertions (runInNewContext) {
     })
   })
 
+  it('renderToString with callback (bundle format with code split)', done => {
+    createRenderer('split-callback.js', { runInNewContext, asBundle: true }, renderer => {
+      const context = { url: '/test' }
+      renderer.renderToString(context, (err, res) => {
+        expect(err).toBeNull()
+        expect(res).toBe('<div data-server-rendered="true">/test<div>async test.woff2 test.png</div></div>')
+        expect(context.msg).toBe('hello')
+        done()
+      })
+    })
+  })
+
+  it('renderToStream with callback (bundle format with code split)', done => {
+    createRenderer('split-callback.js', { runInNewContext, asBundle: true }, renderer => {
+      const context = { url: '/test' }
+      const stream = renderer.renderToStream(context)
+      let res = ''
+      stream.on('data', chunk => {
+        res += chunk.toString()
+      })
+      stream.on('end', () => {
+        expect(res).toBe('<div data-server-rendered="true">/test<div>async test.woff2 test.png</div></div>')
+        expect(context.msg).toBe('hello')
+        done()
+      })
+    })
+  })
+
   it('renderToString catch error (bundle format with source map)', done => {
     createRenderer('error.js', { runInNewContext, asBundle: true }, renderer => {
       renderer.renderToString(err => {
@@ -327,6 +382,17 @@ function createAssertions (runInNewContext) {
     })
   })
 
+  it('renderToString return Promise (callback)', done => {
+    createRenderer('app-callback.js', { runInNewContext }, renderer => {
+      const context = { url: '/test' }
+      renderer.renderToString(context).then(res => {
+        expect(res).toBe('<div data-server-rendered="true">/test</div>')
+        expect(context.msg).toBe('hello')
+        done()
+      })
+    })
+  })
+
   it('renderToString return Promise (error)', done => {
     createRenderer('error.js', { runInNewContext }, renderer => {
       renderer.renderToString().catch(err => {