fix: improve slots option

Author: 38elements

packages/create-instance/create-functional-component.js

@@ -2,7 +2,7 @@
 
 import { throwError } from 'shared/util'
 import { validateSlots } from './validate-slots'
-import { createSlotVNodes } from './add-slots'
+import { createSlotVNodes } from './create-slot-vnodes'
 
 export default function createFunctionalComponent (
   component: Component,

packages/create-instance/create-instance.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { createSlotVNodes } from './add-slots'
+import { createSlotVNodes } from './create-slot-vnodes'
 import addMocks from './add-mocks'
 import { addEventLogger } from './log-events'
 import { createComponentStubs } from 'shared/stub-components'

packages/create-instance/add-slots.js renamed to packages/create-instance/create-slot-vnodes.js

@@ -1,5 +1,6 @@
 // @flow
 
+import Vue from 'vue'
 import { compileToFunctions } from 'vue-template-compiler'
 
 function startsWithTag (str: SlotValue): boolean {
@@ -18,7 +19,17 @@ function createVNodesForSlot (
   const el =
     typeof slotValue === 'string' ? compileToFunctions(slotValue) : slotValue
 
-  const vnode = h(el)
+  let vnode = h(el)
+  if (typeof slotValue === 'string') {
+    const vue = new Vue()
+    try {
+      // $FlowIgnore
+      vnode = el.render.call(vue._renderProxy, h)
+      vnode = h(vnode.tag, vnode.data || {}, vnode.children)
+    } catch (e) {
+    }
+  }
+
   vnode.data.slot = name
   return vnode
 }

test/resources/components/component-with-parent-name.vue

@@ -0,0 +1,17 @@
+<template>
+  <div foo="bar"><span baz="qux">{{ quux }}</span></div>
+</template>
+
+<script>
+  export default{
+    name: 'component-with-parent-name',
+    data () {
+      return {
+        quux: 'quux'
+      }
+    },
+    mounted () {
+      this.$parent.childName = this.$options.name
+    }
+  }
+</script>

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

@@ -2,8 +2,10 @@ import { compileToFunctions } from 'vue-template-compiler'
 import Component from '~resources/components/component.vue'
 import ComponentWithSlots from '~resources/components/component-with-slots.vue'
 import ComponentAsAClass from '~resources/components/component-as-a-class.vue'
+import ComponentWithParentName from '~resources/components/component-with-parent-name.vue'
 import { describeWithMountingMethods, vueVersion } from '~resources/utils'
 import { itSkipIf, itDoNotRunIf } from 'conditional-specs'
+import { mount } from '~vue/test-utils'
 
 describeWithMountingMethods('options.slots', mountingMethod => {
   it('mounts component with default slot if passed component in slot object', () => {
@@ -546,4 +548,28 @@ describeWithMountingMethods('options.slots', mountingMethod => {
       wrapper.find('div').trigger('click')
     }
   )
+
+  it('sets a component which can access the parent component', () => {
+    const wrapperComponent = mount(
+      {
+        name: 'parentComponent',
+        template: '<div><slot /></div>',
+        data () {
+          return {
+            childName: ''
+          }
+        }
+      },
+      {
+        components: {
+          ComponentWithParentName
+        },
+        slots: {
+          default: '<component-with-parent-name />'
+        }
+      }
+    )
+    expect(wrapperComponent.vm.childName).to.equal('component-with-parent-name')
+    expect(wrapperComponent.html()).to.equal('<div><div foo="bar"><span baz="qux">quux</span></div></div>')
+  })
 })