-
Notifications
You must be signed in to change notification settings - Fork 668
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add parent in create-instance (#586)
breaking change: removes templates from slots
- Loading branch information
1 parent
6a40f8a
commit 0ab5a75
Showing
38 changed files
with
290 additions
and
550 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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)) | ||
| } | ||
| }) | ||
| }, []) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 [email protected]+.') | ||
| } | ||
| 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() | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.