feat(server-renderer): support on-the-fly template compilation (#707)

packages/server-renderer/__tests__/renderToString.spec.ts

@@ -6,10 +6,12 @@ import {
   resolveComponent,
   ComponentOptions
 } from 'vue'
-import { escapeHtml } from '@vue/shared'
+import { escapeHtml, mockWarn } from '@vue/shared'
 import { renderToString, renderComponent } from '../src/renderToString'
 import { ssrRenderSlot } from '../src/helpers/ssrRenderSlot'
 
+mockWarn()
+
 describe('ssr: renderToString', () => {
   test('should apply app context', async () => {
     const app = createApp({
@@ -56,6 +58,31 @@ describe('ssr: renderToString', () => {
       ).toBe(`<div>hello</div>`)
     })
 
+    describe('template components', () => {
+      test('render', async () => {
+        expect(
+          await renderToString(
+            createApp({
+              data() {
+                return { msg: 'hello' }
+              },
+              template: `<div>{{ msg }}</div>`
+            })
+          )
+        ).toBe(`<div>hello</div>`)
+      })
+
+      test('handle compiler errors', async () => {
+        await renderToString(createApp({ template: `<` }))
+
+        expect(
+          '[Vue warn]: Template compilation error: Unexpected EOF in tag.\n' +
+            '1  |  <\n' +
+            '   |   ^'
+        ).toHaveBeenWarned()
+      })
+    })
+
     test('nested vnode components', async () => {
       const Child = {
         props: ['msg'],
@@ -96,7 +123,22 @@ describe('ssr: renderToString', () => {
       ).toBe(`<div>parent<div>hello</div></div>`)
     })
 
-    test('mixing optimized / vnode components', async () => {
+    test('nested template components', async () => {
+      const Child = {
+        props: ['msg'],
+        template: `<div>{{ msg }}</div>`
+      }
+      const app = createApp({
+        template: `<div>parent<Child msg="hello" /></div>`
+      })
+      app.component('Child', Child)
+
+      expect(await renderToString(app)).toBe(
+        `<div>parent<div>hello</div></div>`
+      )
+    })
+
+    test('mixing optimized / vnode / template components', async () => {
       const OptimizedChild = {
         props: ['msg'],
         ssrRender(ctx: any, push: any) {
@@ -111,6 +153,11 @@ describe('ssr: renderToString', () => {
         }
       }
 
+      const TemplateChild = {
+        props: ['msg'],
+        template: `<div>{{ msg }}</div>`
+      }
+
       expect(
         await renderToString(
           createApp({
@@ -120,11 +167,21 @@ describe('ssr: renderToString', () => {
                 renderComponent(OptimizedChild, { msg: 'opt' }, null, parent)
               )
               push(renderComponent(VNodeChild, { msg: 'vnode' }, null, parent))
+              push(
+                renderComponent(
+                  TemplateChild,
+                  { msg: 'template' },
+                  null,
+                  parent
+                )
+              )
               push(`</div>`)
             }
           })
         )
-      ).toBe(`<div>parent<div>opt</div><div>vnode</div></div>`)
+      ).toBe(
+        `<div>parent<div>opt</div><div>vnode</div><div>template</div></div>`
+      )
     })
 
     test('nested components with optimized slots', async () => {
@@ -236,6 +293,50 @@ describe('ssr: renderToString', () => {
       )
     })
 
+    test('nested components with template slots', async () => {
+      const Child = {
+        props: ['msg'],
+        template: `<div class="child"><slot msg="from slot"></slot></div>`
+      }
+
+      const app = createApp({
+        template: `<div>parent<Child v-slot="{ msg }"><span>{{ msg }}</span></Child></div>`
+      })
+      app.component('Child', Child)
+
+      expect(await renderToString(app)).toBe(
+        `<div>parent<div class="child">` +
+          `<!----><span>from slot</span><!---->` +
+          `</div></div>`
+      )
+    })
+
+    test('nested render fn components with template slots', async () => {
+      const Child = {
+        props: ['msg'],
+        render(this: any) {
+          return h(
+            'div',
+            {
+              class: 'child'
+            },
+            this.$slots.default({ msg: 'from slot' })
+          )
+        }
+      }
+
+      const app = createApp({
+        template: `<div>parent<Child v-slot="{ msg }"><span>{{ msg }}</span></Child></div>`
+      })
+      app.component('Child', Child)
+
+      expect(await renderToString(app)).toBe(
+        `<div>parent<div class="child">` +
+          `<span>from slot</span>` +
+          `</div></div>`
+      )
+    })
+
     test('async components', async () => {
       const Child = {
         // should wait for resovled render context from setup()