-
Notifications
You must be signed in to change notification settings - Fork 672
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: refactor add-slots.js (#556)
- Loading branch information
1 parent
807d3c8
commit ce9e1bf
Showing
3 changed files
with
53 additions
and
59 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,60 +1,43 @@ | ||
// @flow | ||
|
||
import { compileToFunctions } from 'vue-template-compiler' | ||
import { throwError } from 'shared/util' | ||
import { validateSlots } from './validate-slots' | ||
import { toArray } from 'shared/util' | ||
|
||
function addSlotToVm (vm: Component, slotName: string, slotValue: Component | string | Array<Component> | Array<string>): void { | ||
let elem | ||
if (typeof slotValue === 'string') { | ||
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.') | ||
} | ||
if (window.navigator.userAgent.match(/PhantomJS/i)) { | ||
throwError('the slots option does not support strings in PhantomJS. Please use Puppeteer, or pass a component.') | ||
} | ||
const domParser = new window.DOMParser() | ||
const _document = domParser.parseFromString(slotValue, 'text/html') | ||
const _slotValue = slotValue.trim() | ||
if (_slotValue[0] === '<' && _slotValue[_slotValue.length - 1] === '>' && _document.body.childElementCount === 1) { | ||
elem = vm.$createElement(compileToFunctions(slotValue)) | ||
} else { | ||
const compiledResult = compileToFunctions(`<div>${slotValue}{{ }}</div>`) | ||
const _staticRenderFns = vm._renderProxy.$options.staticRenderFns | ||
vm._renderProxy.$options.staticRenderFns = compiledResult.staticRenderFns | ||
elem = compiledResult.render.call(vm._renderProxy, vm.$createElement).children | ||
vm._renderProxy.$options.staticRenderFns = _staticRenderFns | ||
} | ||
} else { | ||
elem = vm.$createElement(slotValue) | ||
function isSingleHTMLTag (template: string) { | ||
if (!template.startsWith('<') || !template.endsWith('>')) { | ||
return false | ||
} | ||
if (Array.isArray(elem)) { | ||
if (Array.isArray(vm.$slots[slotName])) { | ||
vm.$slots[slotName] = [...vm.$slots[slotName], ...elem] | ||
const _document = new window.DOMParser().parseFromString(template, 'text/html') | ||
return _document.body.childElementCount === 1 | ||
} | ||
|
||
function createElementFromAdvancedString (slotValue, vm) { | ||
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 createElement (slotValue: string | Object, vm) { | ||
if (typeof slotValue === 'string') { | ||
slotValue = slotValue.trim() | ||
if (isSingleHTMLTag(slotValue)) { | ||
return vm.$createElement(compileToFunctions(slotValue)) | ||
} else { | ||
vm.$slots[slotName] = [...elem] | ||
return createElementFromAdvancedString(slotValue, vm) | ||
} | ||
} else { | ||
if (Array.isArray(vm.$slots[slotName])) { | ||
vm.$slots[slotName].push(elem) | ||
} else { | ||
vm.$slots[slotName] = [elem] | ||
} | ||
return vm.$createElement(slotValue) | ||
} | ||
} | ||
|
||
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) | ||
}) | ||
} else { | ||
addSlotToVm(vm, key, slots[key]) | ||
} | ||
Object.keys(slots).forEach(name => { | ||
vm.$slots[name] = toArray(slots[name]) | ||
.map(slotValue => createElement(slotValue, vm)) | ||
}) | ||
} |
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,23 +1,26 @@ | ||
// @flow | ||
|
||
import { throwError } from 'shared/util' | ||
|
||
function isValidSlot (slot: any): boolean { | ||
return Array.isArray(slot) || (slot !== null && typeof slot === 'object') || typeof slot === 'string' | ||
} | ||
import { throwError, toArray, isObject } from 'shared/util' | ||
import { compileToFunctions } from 'vue-template-compiler' | ||
|
||
export function validateSlots (slots: Object): void { | ||
slots && Object.keys(slots).forEach((key) => { | ||
if (!isValidSlot(slots[key])) { | ||
throwError('slots[key] must be a Component, string or an array of Components') | ||
} | ||
Object.keys(slots).forEach(key => { | ||
toArray(slots[key]).forEach(slotValue => { | ||
if (!isObject(slotValue) && typeof slotValue !== 'string') { | ||
throwError('slots[key] must be a Component, string or an array of Components') | ||
} | ||
|
||
if (Array.isArray(slots[key])) { | ||
slots[key].forEach((slotValue) => { | ||
if (!isValidSlot(slotValue)) { | ||
throwError('slots[key] must be a Component, string or an array of Components') | ||
if (typeof slotValue === 'string') { | ||
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.') | ||
} | ||
if (window.navigator.userAgent.match(/PhantomJS/i)) { | ||
throwError('the slots option does not support strings in PhantomJS. Please use Puppeteer, or pass a component.') | ||
} | ||
}) | ||
} | ||
} | ||
}) | ||
}) | ||
} |
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