fix: render all slots inside a <template> vnode (#979)

Author: eddyerburgh

packages/create-instance/create-slot-vnodes.js

@@ -4,39 +4,32 @@ import { compileToFunctions } from 'vue-template-compiler'
 
 function createVNodes (
   vm: Component,
-  slotValue: string
+  slotValue: string,
+  name
 ): Array<VNode> {
-  const el = compileToFunctions(`<div>${slotValue}</div>`)
+  const el = compileToFunctions(
+    `<div><template slot=${name}>${slotValue}</template></div>`
+  )
   const _staticRenderFns = vm._renderProxy.$options.staticRenderFns
   const _staticTrees = vm._renderProxy._staticTrees
   vm._renderProxy._staticTrees = []
   vm._renderProxy.$options.staticRenderFns = el.staticRenderFns
   const vnode = el.render.call(vm._renderProxy, vm.$createElement)
   vm._renderProxy.$options.staticRenderFns = _staticRenderFns
   vm._renderProxy._staticTrees = _staticTrees
-  return vnode.children
+  return vnode.children[0]
 }
 
 function createVNodesForSlot (
   vm: Component,
   slotValue: SlotValue,
   name: string,
 ): VNode | Array<VNode> {
-  let vnode
   if (typeof slotValue === 'string') {
-    const vnodes = createVNodes(vm, slotValue)
-    if (vnodes.length > 1) {
-      return vnodes
-    }
-    vnode = vnodes[0]
-  } else {
-    vnode = vm.$createElement(slotValue)
-  }
-  if (vnode.data) {
-    vnode.data.slot = name
-  } else {
-    vnode.data = { slot: name }
+    return createVNodes(vm, slotValue, name)
   }
+  const vnode = vm.$createElement(slotValue)
+  ;(vnode.data || (vnode.data = {})).slot = name
   return vnode
 }
 

test/specs/mounting-options/slots.spec.js

@@ -237,14 +237,14 @@ describeWithMountingMethods('options.slots', mountingMethod => {
   it('mounts component with default and named text slot', () => {
     const wrapper = mountingMethod(ComponentWithSlots, {
       slots: {
-        default: 'hello,',
-        footer: '<template>world</template>'
+        footer: 'world',
+        default: 'hello,'
       }
     })
     if (mountingMethod.name === 'renderToString') {
-      expect(wrapper).contains('hello,world')
+      expect(wrapper).contains('hello,</main> <footer>world')
     } else {
-      expect(wrapper.text()).to.contain('hello,world')
+      expect(wrapper.text()).to.contain('hello, world')
     }
   })