fix(ssr): handle fallthrough attrs in ssr compile output

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

@@ -65,7 +65,7 @@ describe('ssr: renderToString', () => {
       expect(
         await renderToString(
           createApp(
-            defineComponent((props: {}) => {
+            defineComponent(() => {
               const msg = ref('hello')
               return () => h('div', msg.value)
             })
@@ -89,31 +89,6 @@ 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(
-          'Template compilation error: Unexpected EOF in tag.\n' +
-            '1  |  <\n' +
-            '   |   ^'
-        ).toHaveBeenWarned()
-      })
-    })
-
     test('nested vnode components', async () => {
       const Child = {
         props: ['msg'],
@@ -247,7 +222,7 @@ describe('ssr: renderToString', () => {
                   { msg: 'hello' },
                   {
                     // optimized slot using string push
-                    default: ({ msg }: any, push: any, p: any) => {
+                    default: ({ msg }: any, push: any, _p: any) => {
                       push(`<span>${msg}</span>`)
                     },
                     // important to avoid slots being normalized
@@ -583,4 +558,29 @@ describe('ssr: renderToString', () => {
       )
     })
   })
+
+  describe('integration w/ compiled template', () => {
+    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(
+        'Template compilation error: Unexpected EOF in tag.\n' +
+          '1  |  <\n' +
+          '   |   ^'
+      ).toHaveBeenWarned()
+    })
+  })
 })

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

@@ -0,0 +1,78 @@
+import { createApp } from 'vue'
+import { renderToString } from '../src/renderToString'
+
+describe('ssr: attr fallthrough', () => {
+  test('basic', async () => {
+    const Child = {
+      template: `<div class="foo" />`
+    }
+    const Parent = {
+      components: { Child },
+      template: `<child class="bar"/>`
+    }
+    const app = createApp(Parent)
+    expect(await renderToString(app)).toBe(`<div class="foo bar"></div>`)
+  })
+
+  test('with v-if', async () => {
+    const Child = {
+      props: ['ok'],
+      template: `<div v-if="ok" class="foo" /><span v-else />`
+    }
+    const Parent = {
+      props: ['ok'],
+      components: { Child },
+      template: `<child :ok="ok" class="bar"/>`
+    }
+    expect(await renderToString(createApp(Parent, { ok: true }))).toBe(
+      `<div class="foo bar"></div>`
+    )
+    expect(await renderToString(createApp(Parent, { ok: false }))).toBe(
+      `<span class="bar"></span>`
+    )
+  })
+
+  test('with v-model', async () => {
+    const Child = {
+      props: ['text'],
+      template: `<input v-model="text">`
+    }
+    const Parent = {
+      components: { Child },
+      template: `<child text="hello" class="bar"/>`
+    }
+    expect(await renderToString(createApp(Parent))).toBe(
+      `<input class="bar" value="hello">`
+    )
+  })
+
+  test('with v-bind', async () => {
+    const Child = {
+      props: ['obj'],
+      template: `<div v-bind="obj" />`
+    }
+    const Parent = {
+      components: { Child },
+      template: `<child :obj="{ class: 'foo' }" class="bar"/>`
+    }
+    expect(await renderToString(createApp(Parent))).toBe(
+      `<div class="foo bar"></div>`
+    )
+  })
+
+  test('nested fallthrough', async () => {
+    const Child = {
+      props: ['id'],
+      template: `<div :id="id"></div>`
+    }
+    const Parent = {
+      components: { Child },
+      template: `<child id="foo" class="bar"/>`
+    }
+    // pass to parent, fallthrough to child and merge
+    const app = createApp(Parent, { class: 'baz' })
+    expect(await renderToString(app)).toBe(
+      `<div id="foo" class="bar baz"></div>`
+    )
+  })
+})