fix: support registered components in scopedSlots (#1065)

Author: eddyerburgh

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

@@ -7,7 +7,8 @@ import createScopedSlots from './create-scoped-slots'
 
 export default function createFunctionalComponent (
   component: Component,
-  mountingOptions: Options
+  mountingOptions: Options,
+  _Vue: Component
 ): Component {
   if (mountingOptions.context && typeof mountingOptions.context !== 'object') {
     throwError('mount.context must be an object')
@@ -29,7 +30,7 @@ export default function createFunctionalComponent (
     })
   }
 
-  context.scopedSlots = createScopedSlots(mountingOptions.scopedSlots)
+  context.scopedSlots = createScopedSlots(mountingOptions.scopedSlots, _Vue)
 
   return {
     render (h: Function) {

packages/create-instance/create-instance.js

@@ -71,7 +71,7 @@ export default function createInstance (
     (component.options && component.options.functional) ||
     component.functional
   ) {
-    component = createFunctionalComponent(component, options)
+    component = createFunctionalComponent(component, options, _Vue)
   } else if (options.context) {
     throwError(
       `mount.context can only be used when mounting a ` +
@@ -116,7 +116,7 @@ export default function createInstance (
     options.provide = () => obj
   }
 
-  const scopedSlots = createScopedSlots(options.scopedSlots)
+  const scopedSlots = createScopedSlots(options.scopedSlots, _Vue)
 
   if (options.parentComponent && !isPlainObject(options.parentComponent)) {
     throwError(

packages/create-instance/create-scoped-slots.js

@@ -1,15 +1,17 @@
 // @flow
 
-import Vue from 'vue'
 import { compileToFunctions } from 'vue-template-compiler'
 import { throwError, vueVersion } from 'shared/util'
 
 function isDestructuringSlotScope (slotScope: string): boolean {
   return slotScope[0] === '{' && slotScope[slotScope.length - 1] === '}'
 }
 
-function getVueTemplateCompilerHelpers (): { [name: string]: Function } {
-  const vue = new Vue()
+function getVueTemplateCompilerHelpers (
+  _Vue: Component
+): { [name: string]: Function } {
+  // $FlowIgnore
+  const vue = new _Vue()
   const helpers = {}
   const names = [
     '_c',
@@ -52,7 +54,8 @@ function customWarn (msg) {
 }
 
 export default function createScopedSlots (
-  scopedSlotsOption: ?{ [slotName: string]: string | Function }
+  scopedSlotsOption: ?{ [slotName: string]: string | Function },
+  _Vue: Component
 ): {
   [slotName: string]: (props: Object) => VNode | Array<VNode>
 } {
@@ -61,7 +64,7 @@ export default function createScopedSlots (
     return scopedSlots
   }
   validateEnvironment()
-  const helpers = getVueTemplateCompilerHelpers()
+  const helpers = getVueTemplateCompilerHelpers(_Vue)
   for (const scopedSlotName in scopedSlotsOption) {
     const slot = scopedSlotsOption[scopedSlotName]
     const isFn = typeof slot === 'function'

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

@@ -2,6 +2,7 @@ import {
   describeWithShallowAndMount,
   vueVersion
 } from '~resources/utils'
+import { createLocalVue } from '~vue/test-utils'
 import ComponentWithScopedSlots from '~resources/components/component-with-scoped-slots.vue'
 import { itDoNotRunIf } from 'conditional-specs'
 
@@ -234,4 +235,28 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
         .with.property('message', message)
     }
   )
+
+  itDoNotRunIf(
+    vueVersion < 2.5 || mountingMethod.name !== 'mount',
+    'renders using localVue constructor',
+    () => {
+      const RegisteredComponent = {
+        render: h => h('span')
+      }
+      const TestComponent = {
+        template: '<div><slot name="single" /></div>'
+      }
+
+      const localVue = createLocalVue()
+      localVue.component('registered-component', RegisteredComponent)
+
+      const wrapper = mountingMethod(TestComponent, {
+        scopedSlots: {
+          single: '<template><registered-component /></template>'
+        },
+        localVue
+      })
+
+      expect(wrapper.html()).to.contain('span')
+    })
 })