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

packages/compiler-ssr/__tests__/ssrElement.spec.ts

@@ -23,23 +23,28 @@ describe('ssr: element', () => {
 
   describe('children override', () => {
     test('v-html', () => {
-      expect(getCompiledString(`<div v-html="foo"/>`)).toMatchInlineSnapshot(
-        `"\`<div>\${_ctx.foo}</div>\`"`
-      )
+      expect(getCompiledString(`<div v-html="foo"/>`)).toMatchInlineSnapshot(`
+        "\`<div>\${
+            _ctx.foo
+          }</div>\`"
+      `)
     })
 
     test('v-text', () => {
-      expect(getCompiledString(`<div v-text="foo"/>`)).toMatchInlineSnapshot(
-        `"\`<div>\${_ssrInterpolate(_ctx.foo)}</div>\`"`
-      )
+      expect(getCompiledString(`<div v-text="foo"/>`)).toMatchInlineSnapshot(`
+        "\`<div>\${
+            _ssrInterpolate(_ctx.foo)
+          }</div>\`"
+      `)
     })
 
     test('<textarea> with dynamic value', () => {
-      expect(
-        getCompiledString(`<textarea :value="foo"/>`)
-      ).toMatchInlineSnapshot(
-        `"\`<textarea>\${_ssrInterpolate(_ctx.foo)}</textarea>\`"`
-      )
+      expect(getCompiledString(`<textarea :value="foo"/>`))
+        .toMatchInlineSnapshot(`
+        "\`<textarea>\${
+            _ssrInterpolate(_ctx.foo)
+          }</textarea>\`"
+      `)
     })
 
     test('<textarea> with static value', () => {
@@ -51,13 +56,14 @@ describe('ssr: element', () => {
     test('<textarea> with dynamic v-bind', () => {
       expect(compile(`<textarea v-bind="obj">fallback</textarea>`).code)
         .toMatchInlineSnapshot(`
-        "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require(\\"@vue/server-renderer\\")
+        "const { mergeProps: _mergeProps } = require(\\"vue\\")
+        const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require(\\"@vue/server-renderer\\")
 
-        return function ssrRender(_ctx, _push, _parent) {
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
           let _temp0
 
           _push(\`<textarea\${
-            _ssrRenderAttrs(_temp0 = _ctx.obj, \\"textarea\\")
+            _ssrRenderAttrs(_temp0 = _mergeProps(_ctx.obj, _attrs), \\"textarea\\")
           }>\${
             _ssrInterpolate((\\"value\\" in _temp0) ? _temp0.value : \\"fallback\\")
           }</textarea>\`)
@@ -71,10 +77,11 @@ describe('ssr: element', () => {
           isCustomElement: () => true
         }).code
       ).toMatchInlineSnapshot(`
-        "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
+        "const { mergeProps: _mergeProps } = require(\\"vue\\")
+        const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
 
-        return function ssrRender(_ctx, _push, _parent) {
-          _push(\`<my-foo\${_ssrRenderAttrs(_ctx.obj, \\"my-foo\\")}></my-foo>\`)
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          _push(\`<my-foo\${_ssrRenderAttrs(_mergeProps(_ctx.obj, _attrs), \\"my-foo\\")}></my-foo>\`)
         }"
       `)
     })
@@ -88,107 +95,126 @@ describe('ssr: element', () => {
     })
 
     test('v-bind:class', () => {
-      expect(
-        getCompiledString(`<div id="foo" :class="bar"></div>`)
-      ).toMatchInlineSnapshot(
-        `"\`<div id=\\"foo\\" class=\\"\${_ssrRenderClass(_ctx.bar)}\\"></div>\`"`
-      )
+      expect(getCompiledString(`<div id="foo" :class="bar"></div>`))
+        .toMatchInlineSnapshot(`
+        "\`<div id=\\"foo\\" class=\\"\${
+            _ssrRenderClass(_ctx.bar)
+          }\\"></div>\`"
+      `)
     })
 
     test('static class + v-bind:class', () => {
-      expect(
-        getCompiledString(`<div class="foo" :class="bar"></div>`)
-      ).toMatchInlineSnapshot(
-        `"\`<div class=\\"\${_ssrRenderClass([_ctx.bar, \\"foo\\"])}\\"></div>\`"`
-      )
+      expect(getCompiledString(`<div class="foo" :class="bar"></div>`))
+        .toMatchInlineSnapshot(`
+        "\`<div class=\\"\${
+            _ssrRenderClass([_ctx.bar, \\"foo\\"])
+          }\\"></div>\`"
+      `)
     })
 
     test('v-bind:style', () => {
-      expect(
-        getCompiledString(`<div id="foo" :style="bar"></div>`)
-      ).toMatchInlineSnapshot(
-        `"\`<div id=\\"foo\\" style=\\"\${_ssrRenderStyle(_ctx.bar)}\\"></div>\`"`
-      )
+      expect(getCompiledString(`<div id="foo" :style="bar"></div>`))
+        .toMatchInlineSnapshot(`
+        "\`<div id=\\"foo\\" style=\\"\${
+            _ssrRenderStyle(_ctx.bar)
+          }\\"></div>\`"
+      `)
     })
 
     test('static style + v-bind:style', () => {
-      expect(
-        getCompiledString(`<div style="color:red;" :style="bar"></div>`)
-      ).toMatchInlineSnapshot(
-        `"\`<div style=\\"\${_ssrRenderStyle([{\\"color\\":\\"red\\"}, _ctx.bar])}\\"></div>\`"`
-      )
+      expect(getCompiledString(`<div style="color:red;" :style="bar"></div>`))
+        .toMatchInlineSnapshot(`
+        "\`<div style=\\"\${
+            _ssrRenderStyle([{\\"color\\":\\"red\\"}, _ctx.bar])
+          }\\"></div>\`"
+      `)
     })
 
     test('v-bind:key (boolean)', () => {
-      expect(
-        getCompiledString(`<input type="checkbox" :checked="checked">`)
-      ).toMatchInlineSnapshot(
-        `"\`<input type=\\"checkbox\\"\${(_ctx.checked) ? \\" checked\\" : \\"\\"}>\`"`
-      )
+      expect(getCompiledString(`<input type="checkbox" :checked="checked">`))
+        .toMatchInlineSnapshot(`
+        "\`<input type=\\"checkbox\\"\${
+            (_ctx.checked) ? \\" checked\\" : \\"\\"
+          }>\`"
+      `)
     })
 
     test('v-bind:key (non-boolean)', () => {
-      expect(
-        getCompiledString(`<div :id="id" class="bar"></div>`)
-      ).toMatchInlineSnapshot(
-        `"\`<div\${_ssrRenderAttr(\\"id\\", _ctx.id)} class=\\"bar\\"></div>\`"`
-      )
+      expect(getCompiledString(`<div :id="id" class="bar"></div>`))
+        .toMatchInlineSnapshot(`
+        "\`<div\${
+            _ssrRenderAttr(\\"id\\", _ctx.id)
+          } class=\\"bar\\"></div>\`"
+      `)
     })
 
     test('v-bind:[key]', () => {
-      expect(
-        getCompiledString(`<div v-bind:[key]="value"></div>`)
-      ).toMatchInlineSnapshot(
-        `"\`<div\${_ssrRenderAttrs({ [_ctx.key]: _ctx.value })}></div>\`"`
-      )
+      expect(getCompiledString(`<div v-bind:[key]="value"></div>`))
+        .toMatchInlineSnapshot(`
+        "\`<div\${
+            _ssrRenderAttrs({ [_ctx.key]: _ctx.value })
+          }></div>\`"
+      `)
 
       expect(getCompiledString(`<div class="foo" v-bind:[key]="value"></div>`))
         .toMatchInlineSnapshot(`
-        "\`<div\${_ssrRenderAttrs({
-            class: \\"foo\\",
-            [_ctx.key]: _ctx.value
-          })}></div>\`"
+        "\`<div\${
+            _ssrRenderAttrs({
+              class: \\"foo\\",
+              [_ctx.key]: _ctx.value
+            })
+          }></div>\`"
       `)
 
       expect(getCompiledString(`<div :id="id" v-bind:[key]="value"></div>`))
         .toMatchInlineSnapshot(`
-        "\`<div\${_ssrRenderAttrs({
-            id: _ctx.id,
-            [_ctx.key]: _ctx.value
-          })}></div>\`"
+        "\`<div\${
+            _ssrRenderAttrs({
+              id: _ctx.id,
+              [_ctx.key]: _ctx.value
+            })
+          }></div>\`"
       `)
     })
 
     test('v-bind="obj"', () => {
-      expect(
-        getCompiledString(`<div v-bind="obj"></div>`)
-      ).toMatchInlineSnapshot(`"\`<div\${_ssrRenderAttrs(_ctx.obj)}></div>\`"`)
+      expect(getCompiledString(`<div v-bind="obj"></div>`))
+        .toMatchInlineSnapshot(`
+        "\`<div\${
+            _ssrRenderAttrs(_ctx.obj)
+          }></div>\`"
+      `)
 
-      expect(
-        getCompiledString(`<div class="foo" v-bind="obj"></div>`)
-      ).toMatchInlineSnapshot(
-        `"\`<div\${_ssrRenderAttrs(_mergeProps({ class: \\"foo\\" }, _ctx.obj))}></div>\`"`
-      )
+      expect(getCompiledString(`<div class="foo" v-bind="obj"></div>`))
+        .toMatchInlineSnapshot(`
+        "\`<div\${
+            _ssrRenderAttrs(_mergeProps({ class: \\"foo\\" }, _ctx.obj))
+          }></div>\`"
+      `)
 
-      expect(
-        getCompiledString(`<div :id="id" v-bind="obj"></div>`)
-      ).toMatchInlineSnapshot(
-        `"\`<div\${_ssrRenderAttrs(_mergeProps({ id: _ctx.id }, _ctx.obj))}></div>\`"`
-      )
+      expect(getCompiledString(`<div :id="id" v-bind="obj"></div>`))
+        .toMatchInlineSnapshot(`
+        "\`<div\${
+            _ssrRenderAttrs(_mergeProps({ id: _ctx.id }, _ctx.obj))
+          }></div>\`"
+      `)
 
       // dynamic key + v-bind="object"
-      expect(
-        getCompiledString(`<div :[key]="id" v-bind="obj"></div>`)
-      ).toMatchInlineSnapshot(
-        `"\`<div\${_ssrRenderAttrs(_mergeProps({ [_ctx.key]: _ctx.id }, _ctx.obj))}></div>\`"`
-      )
+      expect(getCompiledString(`<div :[key]="id" v-bind="obj"></div>`))
+        .toMatchInlineSnapshot(`
+        "\`<div\${
+            _ssrRenderAttrs(_mergeProps({ [_ctx.key]: _ctx.id }, _ctx.obj))
+          }></div>\`"
+      `)
 
       // should merge class and :class
       expect(getCompiledString(`<div class="a" :class="b" v-bind="obj"></div>`))
         .toMatchInlineSnapshot(`
-        "\`<div\${_ssrRenderAttrs(_mergeProps({
-            class: [\\"a\\", _ctx.b]
-          }, _ctx.obj))}></div>\`"
+        "\`<div\${
+            _ssrRenderAttrs(_mergeProps({
+              class: [\\"a\\", _ctx.b]
+            }, _ctx.obj))
+          }></div>\`"
       `)
 
       // should merge style and :style
@@ -197,9 +223,11 @@ describe('ssr: element', () => {
           `<div style="color:red;" :style="b" v-bind="obj"></div>`
         )
       ).toMatchInlineSnapshot(`
-        "\`<div\${_ssrRenderAttrs(_mergeProps({
-            style: [{\\"color\\":\\"red\\"}, _ctx.b]
-          }, _ctx.obj))}></div>\`"
+        "\`<div\${
+            _ssrRenderAttrs(_mergeProps({
+              style: [{\\"color\\":\\"red\\"}, _ctx.b]
+            }, _ctx.obj))
+          }></div>\`"
       `)
     })
 
@@ -210,9 +238,12 @@ describe('ssr: element', () => {
       expect(
         getCompiledString(`<div id="foo" v-on="bar"/>`)
       ).toMatchInlineSnapshot(`"\`<div id=\\"foo\\"></div>\`"`)
-      expect(
-        getCompiledString(`<div v-bind="foo" v-on="bar"/>`)
-      ).toMatchInlineSnapshot(`"\`<div\${_ssrRenderAttrs(_ctx.foo)}></div>\`"`)
+      expect(getCompiledString(`<div v-bind="foo" v-on="bar"/>`))
+        .toMatchInlineSnapshot(`
+        "\`<div\${
+            _ssrRenderAttrs(_ctx.foo)
+          }></div>\`"
+      `)
     })
   })
 })