vuejs · eddyerburgh · Jun 1, 2018 · May 5, 2018 · May 5, 2018 · May 20, 2018
diff --git a/flow/options.flow.js b/flow/options.flow.js
@@ -11,5 +11,10 @@ declare type Options = { // eslint-disable-line no-undef
    context?: Object,
    attrs?: Object,
    listeners?: Object,
-    logModifiedComponents?: Boolean
+    logModifiedComponents?: boolean,
+    sync?: boolean
 }
+
+declare type SlotValue = Component | string | Array<Component | string>
+
+declare type SlotsObject = {[name: string]: SlotValue}
diff --git a/flow/vue.flow.js b/flow/vue.flow.js
@@ -4,4 +4,3 @@

 declare type Component = Object | Function // eslint-disable-line no-undef
 declare type VNode = Object // eslint-disable-line no-undef
-declare type SlotValue = Component | string | Array<Component> | Array<string>
diff --git a/flow/wrapper.flow.js b/flow/wrapper.flow.js
@@ -39,5 +39,5 @@ declare interface BaseWrapper { // eslint-disable-line no-undef

 declare type WrapperOptions = { // eslint-disable-line no-undef
    attachedToDocument: boolean,
-    sync: boolean
+    sync?: boolean
 }
diff --git a/package.json b/package.json
@@ -63,12 +63,12 @@
    "rollup": "^0.58.2",
    "sinon": "^2.3.2",
    "sinon-chai": "^2.10.0",
-    "vue": "2.5.13",
+    "vue": "^2.5.16",
    "vue-class-component": "^6.1.2",
    "vue-loader": "^13.6.2",
    "vue-router": "^3.0.1",
-    "vue-server-renderer": "2.5.13",
-    "vue-template-compiler": "2.5.13",
+    "vue-server-renderer": "^2.5.16",
+    "vue-template-compiler": "^2.5.16",
    "vuepress": "^0.10.0",
    "vuepress-theme-vue": "^1.0.3",
    "vuetify": "^0.16.9",

diff --git a/packages/create-instance/add-attrs.js b/packages/create-instance/add-attrs.js
diff --git a/packages/create-instance/add-listeners.js b/packages/create-instance/add-listeners.js
diff --git a/packages/create-instance/add-provide.js b/packages/create-instance/add-provide.js
diff --git a/packages/create-instance/add-scoped-slots.js b/packages/create-instance/add-scoped-slots.js
diff --git a/packages/create-instance/add-slots.js b/packages/create-instance/add-slots.js
@@ -1,60 +1,34 @@
 // @flow

 import { compileToFunctions } from 'vue-template-compiler'
-import { throwError } from 'shared/util'
-import { validateSlots } from './validate-slots'

-// see https://github.com/vuejs/vue-test-utils/pull/274
-function createVNodes (vm: Component, slotValue: string) {
-  const compiledResult = compileToFunctions(`<div>${slotValue}{{ }}</div>`)
-  const _staticRenderFns = vm._renderProxy.$options.staticRenderFns
-  vm._renderProxy.$options.staticRenderFns = compiledResult.staticRenderFns
-  const elem = compiledResult.render.call(vm._renderProxy, vm.$createElement).children
-  vm._renderProxy.$options.staticRenderFns = _staticRenderFns
-  return elem
-}
-
-function validateEnvironment (): void {
-  if (!compileToFunctions) {
-    throwError('vueTemplateCompiler is undefined, you must pass components explicitly if vue-template-compiler is undefined')
-  }
-  if (typeof window === 'undefined') {
-    throwError('the slots string option does not support strings in server-test-uitls.')
-  }
-}
+function createVNodesForSlot (
+  h: Function,
+  slotValue: SlotValue,
+  name: string
+): Array<VNode> {
+  const el = typeof slotValue === 'string'
+    ? compileToFunctions(slotValue)
+    : slotValue

-function addSlotToVm (vm: Component, slotName: string, slotValue: SlotValue): void {
-  let elem
-  if (typeof slotValue === 'string') {
-    validateEnvironment()
-    elem = createVNodes(vm, slotValue)
-  } else {
-    elem = vm.$createElement(slotValue)
-  }
-  if (Array.isArray(elem)) {
-    if (Array.isArray(vm.$slots[slotName])) {
-      vm.$slots[slotName] = [...vm.$slots[slotName], ...elem]
-    } else {
-      vm.$slots[slotName] = [...elem]
-    }
-  } else {
-    if (Array.isArray(vm.$slots[slotName])) {
-      vm.$slots[slotName].push(elem)
-    } else {
-      vm.$slots[slotName] = [elem]
-    }
-  }
+  const vnode = h(el)
+  vnode.data.slot = name
+  return vnode
 }

-export function addSlots (vm: Component, slots: Object): void {
-  validateSlots(slots)
-  Object.keys(slots).forEach((key) => {
-    if (Array.isArray(slots[key])) {
-      slots[key].forEach((slotValue) => {
-        addSlotToVm(vm, key, slotValue)
-      })
+export function createSlotVNodes (
+  h: Function,
+  slots: SlotsObject
+): Array<VNode> {
+  return Object.keys(slots).reduce((acc, key) => {
+    const content = slots[key]
+    if (Array.isArray(content)) {
+      const nodes = content.reduce((accInner, slotDef) => {
+        return accInner.concat(createVNodesForSlot(h, slotDef, key))
+      }, [])
+      return acc.concat(nodes)
    } else {
-      addSlotToVm(vm, key, slots[key])
+      return acc.concat(createVNodesForSlot(h, content, key))
    }
-  })
+  }, [])
 }
diff --git a/packages/create-instance/create-instance.js b/packages/create-instance/create-instance.js
@@ -1,42 +1,29 @@
 // @flow

 import Vue from 'vue'
-import { addSlots } from './add-slots'
-import { addScopedSlots } from './add-scoped-slots'
+import { createSlotVNodes } from './add-slots'
 import addMocks from './add-mocks'
-import addAttrs from './add-attrs'
-import addListeners from './add-listeners'
-import addProvide from './add-provide'
 import { addEventLogger } from './log-events'
 import { createComponentStubs } from 'shared/stub-components'
-import { throwError, warn } from 'shared/util'
+import { throwError, warn, vueVersion } from 'shared/util'
 import { compileTemplate } from 'shared/compile-template'
-import deleteoptions from './delete-mounting-options'
+import deleteMountingOptions from './delete-mounting-options'
 import createFunctionalComponent from './create-functional-component'
 import { componentNeedsCompiling } from 'shared/validators'
-
-function isDestructuringSlotScope (slotScope: string): boolean {
-  return slotScope[0] === '{' && slotScope[slotScope.length - 1] === '}'
-}
-
-function getVueTemplateCompilerHelpers (proxy: Object): Object {
-  const helpers = {}
-  const names = ['_c', '_o', '_n', '_s', '_l', '_t', '_q', '_i', '_m', '_f', '_k', '_b', '_v', '_e', '_u', '_g']
-  names.forEach((name) => {
-    helpers[name] = proxy[name]
-  })
-  return helpers
-}
+import { validateSlots } from './validate-slots'

 export default function createInstance (
  component: Component,
  options: Options,
-  vue: Component
+  _Vue: Component,
+  elm?: Element
 ): Component {
+  // Remove cached constructor
+  delete component._Ctor
+
  if (options.mocks) {
-    addMocks(options.mocks, vue)
+    addMocks(options.mocks, _Vue)
  }
-
  if ((component.options && component.options.functional) || component.functional) {
    component = createFunctionalComponent(component, options)
  } else if (options.context) {
@@ -45,23 +32,23 @@ export default function createInstance (
    )
  }

-  if (options.provide) {
-    addProvide(component, options.provide, options)
-  }
-
  if (componentNeedsCompiling(component)) {
    compileTemplate(component)
  }

-  addEventLogger(vue)
+  addEventLogger(_Vue)
+
+  const instanceOptions = {
+    ...options,
+    propsData: {
+      ...options.propsData
+    }
+  }

-  const Constructor = (typeof component === 'function' && component.prototype instanceof Vue) ? component : vue.extend(component)
+  deleteMountingOptions(instanceOptions)

-  const instanceOptions = { ...options, propsData: { ...options.propsData }}
-  deleteoptions(instanceOptions)
  // $FlowIgnore
  const stubComponents = createComponentStubs(component.components, options.stubs)
-
  if (options.stubs) {
    instanceOptions.components = {
      ...instanceOptions.components,
@@ -76,60 +63,53 @@ export default function createInstance (
      if (options.logModifiedComponents) {
        warn(`an extended child component ${c} has been modified to ensure it has the correct instance properties. This means it is not possible to find the component with a component selector. To find the component, you must stub it manually using the stubs mounting option.`)
      }
-      instanceOptions.components[c] = vue.extend(component.components[c])
+      instanceOptions.components[c] = _Vue.extend(component.components[c])
    }
  })

  Object.keys(stubComponents).forEach(c => {
-    vue.component(c, stubComponents[c])
+    _Vue.component(c, stubComponents[c])
  })

-  const vm = new Constructor(instanceOptions)
-
-  // Workaround for Vue < 2.5
-  vm._staticTrees = []
+  const Constructor = (typeof component === 'function' && component.prototype instanceof Vue)
+    ? component.extend(instanceOptions)
+    : _Vue.extend(component).extend(instanceOptions)

-  addAttrs(vm, options.attrs)
-  addListeners(vm, options.listeners)
+  // const Constructor = _Vue.extend(component).extend(instanceOptions)

-  if (options.scopedSlots) {
-    if (window.navigator.userAgent.match(/PhantomJS/i)) {
-      throwError('the scopedSlots option does not support PhantomJS. Please use Puppeteer, or pass a component.')
-    }
-    const vueVersion = Number(`${Vue.version.split('.')[0]}.${Vue.version.split('.')[1]}`)
-    if (vueVersion >= 2.5) {
-      vm.$_vueTestUtils_scopedSlots = {}
-      vm.$_vueTestUtils_slotScopes = {}
-      const renderSlot = vm._renderProxy._t
-
-      vm._renderProxy._t = function (name, feedback, props, bindObject) {
-        const scopedSlotFn = vm.$_vueTestUtils_scopedSlots[name]
-        const slotScope = vm.$_vueTestUtils_slotScopes[name]
-        if (scopedSlotFn) {
-          props = { ...bindObject, ...props }
-          const helpers = getVueTemplateCompilerHelpers(vm._renderProxy)
-          let proxy = { ...helpers }
-          if (isDestructuringSlotScope(slotScope)) {
-            proxy = { ...helpers, ...props }
-          } else {
-            proxy[slotScope] = props
-          }
-          return scopedSlotFn.call(proxy)
-        } else {
-          return renderSlot.call(vm._renderProxy, name, feedback, props, bindObject)
-        }
-      }
+  Object.keys(instanceOptions.components || {}).forEach(key => {
+    Constructor.component(key, instanceOptions.components[key])
+    _Vue.component(key, instanceOptions.components[key])
+  })

-      // $FlowIgnore
-      addScopedSlots(vm, options.scopedSlots)
-    } else {
-      throwError('the scopedSlots option is only supported in vue@2.5+.')
-    }
+  if (options.slots) {
+    validateSlots(options.slots)
  }

-  if (options.slots) {
-    addSlots(vm, options.slots)
+  // Objects are not resolved in extended components in Vue < 2.5
+  // https://github.com/vuejs/vue/issues/6436
+  if (options.provide &&
+    typeof options.provide === 'object' &&
+    vueVersion < 2.5
+  ) {
+    const obj = { ...options.provide }
+    options.provide = () => obj
  }

-  return vm
+  const Parent = _Vue.extend({
+    provide: options.provide,
+    render (h) {
+      const slots = options.slots
+        ? createSlotVNodes(h, options.slots)
+        : undefined
+      return h(Constructor, {
+        ref: 'vm',
+        props: options.propsData,
+        on: options.listeners,
+        attrs: options.attrs
+      }, slots)
+    }
+  })
+
+  return new Parent()
 }
diff --git a/packages/create-instance/delete-mounting-options.js b/packages/create-instance/delete-mounting-options.js
@@ -8,4 +8,5 @@ export default function deleteMountingOptions (options) {
  delete options.clone
  delete options.attrs
  delete options.listeners
+  delete options.propsData
 }