fix: improve slots mounting option

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,9 +1,9 @@
 // @flow
 
-import { createSlotVNodes } from './add-slots'
 import addMocks from './add-mocks'
 import { addEventLogger } from './log-events'
 import { createComponentStubs } from 'shared/stub-components'
+import { createSlotVNodes } from './create-slot-vnodes'
 import { throwError, warn, vueVersion } from 'shared/util'
 import { compileTemplate } from 'shared/compile-template'
 import extractInstanceOptions from './extract-instance-options'

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

@@ -0,0 +1,64 @@
+// @flow
+
+import Vue from 'vue'
+import { compileToFunctions } from 'vue-template-compiler'
+
+const _renderSlot = Vue.prototype._t
+
+function createVNodes (
+  vm: Component,
+  slotValue: Component | string
+): ?Array<VNode> {
+  if (typeof slotValue === 'string') {
+    // Since compileToFunctions is checked in createSlotVNodes(),
+    // it is not necessary to check compileToFunctions.
+    const compiledResult = compileToFunctions(`<div>${slotValue}</div>`)
+    const _staticRenderFns = vm._renderProxy.$options.staticRenderFns
+    vm._renderProxy.$options.staticRenderFns = compiledResult.staticRenderFns
+    const vnodes = compiledResult.render.call(
+      vm._renderProxy, vm.$createElement
+    ).children
+    vm._renderProxy.$options.staticRenderFns = _staticRenderFns
+    return vnodes
+  }
+  return [vm.$createElement(slotValue)]
+}
+
+export default function createRenderSlot (
+  options: Object
+): (
+  name: string,
+  fallback: ?Array<VNode>,
+  props: ?Object,
+  bindObject: ?Object
+) => ?Array<VNode> {
+  return function renderSlot (
+    name: string,
+    fallback: ?Array<VNode>,
+    props: ?Object,
+    bindObject: ?Object
+  ): ?Array<VNode> {
+    if (options.slots && options.slots[name]) {
+      this.$slots[name] = []
+      const slotsValue = options.slots[name]
+      if (Array.isArray(slotsValue)) {
+        slotsValue.forEach((value) => {
+          if (typeof value === 'string') {
+            const vnodes = createVNodes(this, value)
+            if (Array.isArray(vnodes)) {
+              this.$slots[name].push(...vnodes)
+            }
+          } else {
+            this.$slots[name].push(this.$createElement(value))
+          }
+        })
+      } else {
+        const vnodes = createVNodes(this, slotsValue)
+        if (Array.isArray(vnodes)) {
+          this.$slots[name] = vnodes
+        }
+      }
+    }
+    return _renderSlot.call(this, name, fallback, props, bindObject)
+  }
+}

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

@@ -3,6 +3,7 @@
 import Vue from 'vue'
 import { compileToFunctions } from 'vue-template-compiler'
 import { throwError, vueVersion } from 'shared/util'
+import { checkCompileToFunctions } from 'shared/validators'
 
 function isDestructuringSlotScope (slotScope: string): boolean {
   return slotScope[0] === '{' && slotScope[slotScope.length - 1] === '}'
@@ -36,6 +37,7 @@ function getVueTemplateCompilerHelpers (): { [name: string]: Function } {
 }
 
 function validateEnvironment (): void {
+  checkCompileToFunctions()
   if (window.navigator.userAgent.match(/PhantomJS/i)) {
     throwError(
       `the scopedSlots option does not support PhantomJS. ` +

packages/create-instance/add-slots.js → packages/create-instance/create-slot-vnodes.js

@@ -1,6 +1,7 @@
 // @flow
 
 import { compileToFunctions } from 'vue-template-compiler'
+import { checkCompileToFunctions } from 'shared/validators'
 
 function startsWithTag (str: SlotValue): boolean {
   return typeof str === 'string' && str.trim()[0] === '<'
@@ -15,6 +16,7 @@ function createVNodesForSlot (
     return slotValue
   }
 
+  checkCompileToFunctions()
   const el =
     typeof slotValue === 'string' ? compileToFunctions(slotValue) : slotValue
 

packages/create-instance/index.js

@@ -0,0 +1,6 @@
+// @flow
+
+import createInstance from './create-instance'
+import createRenderSlot from './create-render-slot'
+
+export { createInstance, createRenderSlot }

packages/create-instance/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-instance",
   "version": "1.0.0-beta.20",
-  "main": "create-instance.js",
+  "main": "index.js",
   "private": true
 }

packages/create-instance/validate-slots.js

@@ -1,8 +1,10 @@
 // @flow
 
 import { throwError } from 'shared/util'
-import { compileToFunctions } from 'vue-template-compiler'
-import { isVueComponent } from '../shared/validators'
+import {
+  checkCompileToFunctions,
+  isVueComponent
+} from 'shared/validators'
 
 function isValidSlot (slot: any): boolean {
   return (
@@ -11,16 +13,6 @@ function isValidSlot (slot: any): boolean {
   )
 }
 
-function requiresTemplateCompiler (slot: any): void {
-  if (typeof slot === 'string' && !compileToFunctions) {
-    throwError(
-      `vueTemplateCompiler is undefined, you must pass ` +
-        `precompiled components if vue-template-compiler is ` +
-        `undefined`
-    )
-  }
-}
-
 export function validateSlots (slots: SlotsObject): void {
   Object.keys(slots).forEach(key => {
     const slot = Array.isArray(slots[key]) ? slots[key] : [slots[key]]
@@ -32,7 +24,9 @@ export function validateSlots (slots: SlotsObject): void {
             `of Components`
         )
       }
-      requiresTemplateCompiler(slotValue)
+      if (typeof slotValue === 'string') {
+        checkCompileToFunctions()
+      }
     })
   })
 }

packages/server-test-utils/src/renderToString.js

@@ -1,7 +1,7 @@
 // @flow
 
 import Vue from 'vue'
-import createInstance from 'create-instance'
+import { createInstance, createRenderSlot } from 'create-instance'
 import { throwError } from 'shared/util'
 import { createRenderer } from 'vue-server-renderer'
 import testUtils from '@vue/test-utils'
@@ -29,6 +29,8 @@ export default function renderToString (
     throwError(`you cannot use attachToDocument with ` + `renderToString`)
   }
   const vueConstructor = testUtils.createLocalVue(options.localVue)
+  vueConstructor.prototype._t = createRenderSlot(options)
+
   const vm = createInstance(
     component,
     mergeOptions(options, config),

packages/shared/compile-template.js

@@ -1,9 +1,11 @@
 // @flow
 
 import { compileToFunctions } from 'vue-template-compiler'
+import { checkCompileToFunctions } from './validators'
 
 export function compileTemplate (component: Component): void {
   if (component.template) {
+    checkCompileToFunctions()
     Object.assign(component, compileToFunctions(component.template))
   }
 

packages/shared/stub-components.js

@@ -9,6 +9,7 @@ import {
   hyphenate
 } from './util'
 import {
+  checkCompileToFunctions,
   componentNeedsCompiling,
   templateContainsComponent,
   isVueComponent
@@ -66,13 +67,7 @@ function createStubFromString (
   originalComponent: Component,
   name: string
 ): Component {
-  if (!compileToFunctions) {
-    throwError(
-      `vueTemplateCompiler is undefined, you must pass ` +
-        `precompiled components if vue-template-compiler is ` +
-        `undefined`
-    )
-  }
+  checkCompileToFunctions()
 
   if (templateContainsComponent(templateString, name)) {
     throwError('options.stub cannot contain a circular reference')
@@ -176,13 +171,7 @@ export function createComponentStubs (
         }
       } else {
         if (typeof stub === 'string') {
-          if (!compileToFunctions) {
-            throwError(
-              `vueTemplateCompiler is undefined, you must pass ` +
-                `precompiled components if vue-template-compiler is ` +
-                `undefined`
-            )
-          }
+          checkCompileToFunctions()
           components[stubName] = {
             ...compileToFunctions(stub)
           }

packages/shared/validators.js

@@ -1,6 +1,17 @@
 // @flow
+import { compileToFunctions } from 'vue-template-compiler'
 import { throwError, capitalize, camelize, hyphenate } from './util'
 
+export function checkCompileToFunctions (): void {
+  if (!compileToFunctions) {
+    throwError(
+      `vueTemplateCompiler is undefined, you must pass ` +
+        `precompiled components if vue-template-compiler is ` +
+        `undefined`
+    )
+  }
+}
+
 export function isDomSelector (selector: any): boolean {
   if (typeof selector !== 'string') {
     return false

packages/test-utils/src/mount.js

@@ -4,14 +4,14 @@ import './matches-polyfill'
 import './object-assign-polyfill'
 import Vue from 'vue'
 import VueWrapper from './vue-wrapper'
-import createInstance from 'create-instance'
 import createElement from './create-element'
 import createLocalVue from './create-local-vue'
 import errorHandler from './error-handler'
 import { findAllVueComponentsFromVm } from './find-vue-components'
 import { mergeOptions } from 'shared/merge-options'
 import config from './config'
 import warnIfNoWindow from './warn-if-no-window'
+import { createInstance, createRenderSlot } from 'create-instance'
 
 Vue.config.productionTip = false
 Vue.config.devtools = false
@@ -28,6 +28,7 @@ export default function mount (
   // Remove cached constructor
   delete component._Ctor
   const vueConstructor = createLocalVue(options.localVue)
+  vueConstructor.prototype._t = createRenderSlot(options)
 
   const elm = options.attachToDocument ? createElement() : undefined
 

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

@@ -0,0 +1,18 @@
+<template>
+  <div><span baz="qux">{{ time }},{{ fromLocalVue }},{{ bar }}</span></div>
+</template>
+
+<script>
+export default{
+  name: 'component-with-parent-name',
+  props: ['fromLocalVue', 'time'],
+  data () {
+    return {
+      bar: 'quux'
+    }
+  },
+  mounted () {
+    this.$parent.childComponentName = this.$options.name
+  }
+}
+</script>

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

@@ -4,7 +4,7 @@ import {
   isRunningPhantomJS
 } from '~resources/utils'
 import ComponentWithScopedSlots from '~resources/components/component-with-scoped-slots.vue'
-import { itDoNotRunIf } from 'conditional-specs'
+import { itSkipIf, itDoNotRunIf } from 'conditional-specs'
 
 describeWithShallowAndMount('scopedSlots', mountingMethod => {
   const windowSave = window
@@ -165,4 +165,43 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
         .with.property('message', message)
     }
   )
+
+  itSkipIf(
+    mountingMethod.name === 'renderToString',
+    'throws error if passed string in default slot object and vue-template-compiler is undefined',
+    () => {
+      const compilerSave =
+        require.cache[require.resolve('vue-template-compiler')].exports
+          .compileToFunctions
+      require.cache[
+        require.resolve('vue-template-compiler')
+      ].exports.compileToFunctions = undefined
+      delete require.cache[require.resolve('../../../packages/test-utils')]
+      const mountingMethodFresh = require('../../../packages/test-utils')[
+        mountingMethod.name
+      ]
+      const message =
+        '[vue-test-utils]: vueTemplateCompiler is undefined, you must pass precompiled components if vue-template-compiler is undefined'
+      const fn = () => {
+        mountingMethodFresh(ComponentWithScopedSlots, {
+          scopedSlots: {
+            list: '<p slot-scope="foo">{{foo.index}},{{foo.text}}</p>'
+          }
+        })
+      }
+      try {
+        expect(fn)
+          .to.throw()
+          .with.property('message', message)
+      } catch (err) {
+        require.cache[
+          require.resolve('vue-template-compiler')
+        ].exports.compileToFunctions = compilerSave
+        throw err
+      }
+      require.cache[
+        require.resolve('vue-template-compiler')
+      ].exports.compileToFunctions = compilerSave
+    }
+  )
 })