chushihua
This commit is contained in:
li
+170
@@ -0,0 +1,170 @@
|
||||
import { ASTElementHandler, ASTElementHandlers } from 'types/compiler'
|
||||
|
||||
const fnExpRE = /^([\w$_]+|\([^)]*?\))\s*=>|^function(?:\s+[\w$]+)?\s*\(/
|
||||
const fnInvokeRE = /\([^)]*?\);*$/
|
||||
const simplePathRE =
|
||||
/^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/
|
||||
|
||||
// KeyboardEvent.keyCode aliases
|
||||
const keyCodes: { [key: string]: number | Array<number> } = {
|
||||
esc: 27,
|
||||
tab: 9,
|
||||
enter: 13,
|
||||
space: 32,
|
||||
up: 38,
|
||||
left: 37,
|
||||
right: 39,
|
||||
down: 40,
|
||||
delete: [8, 46]
|
||||
}
|
||||
|
||||
// KeyboardEvent.key aliases
|
||||
const keyNames: { [key: string]: string | Array<string> } = {
|
||||
// #7880: IE11 and Edge use `Esc` for Escape key name.
|
||||
esc: ['Esc', 'Escape'],
|
||||
tab: 'Tab',
|
||||
enter: 'Enter',
|
||||
// #9112: IE11 uses `Spacebar` for Space key name.
|
||||
space: [' ', 'Spacebar'],
|
||||
// #7806: IE11 uses key names without `Arrow` prefix for arrow keys.
|
||||
up: ['Up', 'ArrowUp'],
|
||||
left: ['Left', 'ArrowLeft'],
|
||||
right: ['Right', 'ArrowRight'],
|
||||
down: ['Down', 'ArrowDown'],
|
||||
// #9112: IE11 uses `Del` for Delete key name.
|
||||
delete: ['Backspace', 'Delete', 'Del']
|
||||
}
|
||||
|
||||
// #4868: modifiers that prevent the execution of the listener
|
||||
// need to explicitly return null so that we can determine whether to remove
|
||||
// the listener for .once
|
||||
const genGuard = condition => `if(${condition})return null;`
|
||||
|
||||
const modifierCode: { [key: string]: string } = {
|
||||
stop: '$event.stopPropagation();',
|
||||
prevent: '$event.preventDefault();',
|
||||
self: genGuard(`$event.target !== $event.currentTarget`),
|
||||
ctrl: genGuard(`!$event.ctrlKey`),
|
||||
shift: genGuard(`!$event.shiftKey`),
|
||||
alt: genGuard(`!$event.altKey`),
|
||||
meta: genGuard(`!$event.metaKey`),
|
||||
left: genGuard(`'button' in $event && $event.button !== 0`),
|
||||
middle: genGuard(`'button' in $event && $event.button !== 1`),
|
||||
right: genGuard(`'button' in $event && $event.button !== 2`)
|
||||
}
|
||||
|
||||
export function genHandlers(
|
||||
events: ASTElementHandlers,
|
||||
isNative: boolean
|
||||
): string {
|
||||
const prefix = isNative ? 'nativeOn:' : 'on:'
|
||||
let staticHandlers = ``
|
||||
let dynamicHandlers = ``
|
||||
for (const name in events) {
|
||||
const handlerCode = genHandler(events[name])
|
||||
//@ts-expect-error
|
||||
if (events[name] && events[name].dynamic) {
|
||||
dynamicHandlers += `${name},${handlerCode},`
|
||||
} else {
|
||||
staticHandlers += `"${name}":${handlerCode},`
|
||||
}
|
||||
}
|
||||
staticHandlers = `{${staticHandlers.slice(0, -1)}}`
|
||||
if (dynamicHandlers) {
|
||||
return prefix + `_d(${staticHandlers},[${dynamicHandlers.slice(0, -1)}])`
|
||||
} else {
|
||||
return prefix + staticHandlers
|
||||
}
|
||||
}
|
||||
|
||||
function genHandler(
|
||||
handler: ASTElementHandler | Array<ASTElementHandler>
|
||||
): string {
|
||||
if (!handler) {
|
||||
return 'function(){}'
|
||||
}
|
||||
|
||||
if (Array.isArray(handler)) {
|
||||
return `[${handler.map(handler => genHandler(handler)).join(',')}]`
|
||||
}
|
||||
|
||||
const isMethodPath = simplePathRE.test(handler.value)
|
||||
const isFunctionExpression = fnExpRE.test(handler.value)
|
||||
const isFunctionInvocation = simplePathRE.test(
|
||||
handler.value.replace(fnInvokeRE, '')
|
||||
)
|
||||
|
||||
if (!handler.modifiers) {
|
||||
if (isMethodPath || isFunctionExpression) {
|
||||
return handler.value
|
||||
}
|
||||
return `function($event){${
|
||||
isFunctionInvocation ? `return ${handler.value}` : handler.value
|
||||
}}` // inline statement
|
||||
} else {
|
||||
let code = ''
|
||||
let genModifierCode = ''
|
||||
const keys: string[] = []
|
||||
for (const key in handler.modifiers) {
|
||||
if (modifierCode[key]) {
|
||||
genModifierCode += modifierCode[key]
|
||||
// left/right
|
||||
if (keyCodes[key]) {
|
||||
keys.push(key)
|
||||
}
|
||||
} else if (key === 'exact') {
|
||||
const modifiers = handler.modifiers
|
||||
genModifierCode += genGuard(
|
||||
['ctrl', 'shift', 'alt', 'meta']
|
||||
.filter(keyModifier => !modifiers[keyModifier])
|
||||
.map(keyModifier => `$event.${keyModifier}Key`)
|
||||
.join('||')
|
||||
)
|
||||
} else {
|
||||
keys.push(key)
|
||||
}
|
||||
}
|
||||
if (keys.length) {
|
||||
code += genKeyFilter(keys)
|
||||
}
|
||||
// Make sure modifiers like prevent and stop get executed after key filtering
|
||||
if (genModifierCode) {
|
||||
code += genModifierCode
|
||||
}
|
||||
const handlerCode = isMethodPath
|
||||
? `return ${handler.value}.apply(null, arguments)`
|
||||
: isFunctionExpression
|
||||
? `return (${handler.value}).apply(null, arguments)`
|
||||
: isFunctionInvocation
|
||||
? `return ${handler.value}`
|
||||
: handler.value
|
||||
return `function($event){${code}${handlerCode}}`
|
||||
}
|
||||
}
|
||||
|
||||
function genKeyFilter(keys: Array<string>): string {
|
||||
return (
|
||||
// make sure the key filters only apply to KeyboardEvents
|
||||
// #9441: can't use 'keyCode' in $event because Chrome autofill fires fake
|
||||
// key events that do not have keyCode property...
|
||||
`if(!$event.type.indexOf('key')&&` +
|
||||
`${keys.map(genFilterCode).join('&&')})return null;`
|
||||
)
|
||||
}
|
||||
|
||||
function genFilterCode(key: string): string {
|
||||
const keyVal = parseInt(key, 10)
|
||||
if (keyVal) {
|
||||
return `$event.keyCode!==${keyVal}`
|
||||
}
|
||||
const keyCode = keyCodes[key]
|
||||
const keyName = keyNames[key]
|
||||
return (
|
||||
`_k($event.keyCode,` +
|
||||
`${JSON.stringify(key)},` +
|
||||
`${JSON.stringify(keyCode)},` +
|
||||
`$event.key,` +
|
||||
`${JSON.stringify(keyName)}` +
|
||||
`)`
|
||||
)
|
||||
}
|
||||
+668
@@ -0,0 +1,668 @@
|
||||
import { genHandlers } from './events'
|
||||
import baseDirectives from '../directives/index'
|
||||
import { camelize, no, extend, capitalize } from 'shared/util'
|
||||
import { baseWarn, pluckModuleFunction } from '../helpers'
|
||||
import { emptySlotScopeToken } from '../parser/index'
|
||||
import {
|
||||
ASTAttr,
|
||||
ASTDirective,
|
||||
ASTElement,
|
||||
ASTExpression,
|
||||
ASTIfConditions,
|
||||
ASTNode,
|
||||
ASTText,
|
||||
CompilerOptions
|
||||
} from 'types/compiler'
|
||||
import { BindingMetadata, BindingTypes } from 'sfc/types'
|
||||
|
||||
type TransformFunction = (el: ASTElement, code: string) => string
|
||||
type DataGenFunction = (el: ASTElement) => string
|
||||
type DirectiveFunction = (
|
||||
el: ASTElement,
|
||||
dir: ASTDirective,
|
||||
warn: Function
|
||||
) => boolean
|
||||
|
||||
export class CodegenState {
|
||||
options: CompilerOptions
|
||||
warn: Function
|
||||
transforms: Array<TransformFunction>
|
||||
dataGenFns: Array<DataGenFunction>
|
||||
directives: { [key: string]: DirectiveFunction }
|
||||
maybeComponent: (el: ASTElement) => boolean
|
||||
onceId: number
|
||||
staticRenderFns: Array<string>
|
||||
pre: boolean
|
||||
|
||||
constructor(options: CompilerOptions) {
|
||||
this.options = options
|
||||
this.warn = options.warn || baseWarn
|
||||
this.transforms = pluckModuleFunction(options.modules, 'transformCode')
|
||||
this.dataGenFns = pluckModuleFunction(options.modules, 'genData')
|
||||
this.directives = extend(extend({}, baseDirectives), options.directives)
|
||||
const isReservedTag = options.isReservedTag || no
|
||||
this.maybeComponent = (el: ASTElement) =>
|
||||
!!el.component || !isReservedTag(el.tag)
|
||||
this.onceId = 0
|
||||
this.staticRenderFns = []
|
||||
this.pre = false
|
||||
}
|
||||
}
|
||||
|
||||
export type CodegenResult = {
|
||||
render: string
|
||||
staticRenderFns: Array<string>
|
||||
}
|
||||
|
||||
export function generate(
|
||||
ast: ASTElement | void,
|
||||
options: CompilerOptions
|
||||
): CodegenResult {
|
||||
const state = new CodegenState(options)
|
||||
// fix #11483, Root level <script> tags should not be rendered.
|
||||
const code = ast
|
||||
? ast.tag === 'script'
|
||||
? 'null'
|
||||
: genElement(ast, state)
|
||||
: '_c("div")'
|
||||
return {
|
||||
render: `with(this){return ${code}}`,
|
||||
staticRenderFns: state.staticRenderFns
|
||||
}
|
||||
}
|
||||
|
||||
export function genElement(el: ASTElement, state: CodegenState): string {
|
||||
if (el.parent) {
|
||||
el.pre = el.pre || el.parent.pre
|
||||
}
|
||||
|
||||
if (el.staticRoot && !el.staticProcessed) {
|
||||
return genStatic(el, state)
|
||||
} else if (el.once && !el.onceProcessed) {
|
||||
return genOnce(el, state)
|
||||
} else if (el.for && !el.forProcessed) {
|
||||
return genFor(el, state)
|
||||
} else if (el.if && !el.ifProcessed) {
|
||||
return genIf(el, state)
|
||||
} else if (el.tag === 'template' && !el.slotTarget && !state.pre) {
|
||||
return genChildren(el, state) || 'void 0'
|
||||
} else if (el.tag === 'slot') {
|
||||
return genSlot(el, state)
|
||||
} else {
|
||||
// component or element
|
||||
let code
|
||||
if (el.component) {
|
||||
code = genComponent(el.component, el, state)
|
||||
} else {
|
||||
let data
|
||||
const maybeComponent = state.maybeComponent(el)
|
||||
if (!el.plain || (el.pre && maybeComponent)) {
|
||||
data = genData(el, state)
|
||||
}
|
||||
|
||||
let tag: string | undefined
|
||||
// check if this is a component in <script setup>
|
||||
const bindings = state.options.bindings
|
||||
if (maybeComponent && bindings && bindings.__isScriptSetup !== false) {
|
||||
tag = checkBindingType(bindings, el.tag)
|
||||
}
|
||||
if (!tag) tag = `'${el.tag}'`
|
||||
|
||||
const children = el.inlineTemplate ? null : genChildren(el, state, true)
|
||||
code = `_c(${tag}${
|
||||
data ? `,${data}` : '' // data
|
||||
}${
|
||||
children ? `,${children}` : '' // children
|
||||
})`
|
||||
}
|
||||
// module transforms
|
||||
for (let i = 0; i < state.transforms.length; i++) {
|
||||
code = state.transforms[i](el, code)
|
||||
}
|
||||
return code
|
||||
}
|
||||
}
|
||||
|
||||
function checkBindingType(bindings: BindingMetadata, key: string) {
|
||||
const camelName = camelize(key)
|
||||
const PascalName = capitalize(camelName)
|
||||
const checkType = (type) => {
|
||||
if (bindings[key] === type) {
|
||||
return key
|
||||
}
|
||||
if (bindings[camelName] === type) {
|
||||
return camelName
|
||||
}
|
||||
if (bindings[PascalName] === type) {
|
||||
return PascalName
|
||||
}
|
||||
}
|
||||
const fromConst =
|
||||
checkType(BindingTypes.SETUP_CONST) ||
|
||||
checkType(BindingTypes.SETUP_REACTIVE_CONST)
|
||||
if (fromConst) {
|
||||
return fromConst
|
||||
}
|
||||
|
||||
const fromMaybeRef =
|
||||
checkType(BindingTypes.SETUP_LET) ||
|
||||
checkType(BindingTypes.SETUP_REF) ||
|
||||
checkType(BindingTypes.SETUP_MAYBE_REF)
|
||||
if (fromMaybeRef) {
|
||||
return fromMaybeRef
|
||||
}
|
||||
}
|
||||
|
||||
// hoist static sub-trees out
|
||||
function genStatic(el: ASTElement, state: CodegenState): string {
|
||||
el.staticProcessed = true
|
||||
// Some elements (templates) need to behave differently inside of a v-pre
|
||||
// node. All pre nodes are static roots, so we can use this as a location to
|
||||
// wrap a state change and reset it upon exiting the pre node.
|
||||
const originalPreState = state.pre
|
||||
if (el.pre) {
|
||||
state.pre = el.pre
|
||||
}
|
||||
state.staticRenderFns.push(`with(this){return ${genElement(el, state)}}`)
|
||||
state.pre = originalPreState
|
||||
return `_m(${state.staticRenderFns.length - 1}${
|
||||
el.staticInFor ? ',true' : ''
|
||||
})`
|
||||
}
|
||||
|
||||
// v-once
|
||||
function genOnce(el: ASTElement, state: CodegenState): string {
|
||||
el.onceProcessed = true
|
||||
if (el.if && !el.ifProcessed) {
|
||||
return genIf(el, state)
|
||||
} else if (el.staticInFor) {
|
||||
let key = ''
|
||||
let parent = el.parent
|
||||
while (parent) {
|
||||
if (parent.for) {
|
||||
key = parent.key!
|
||||
break
|
||||
}
|
||||
parent = parent.parent
|
||||
}
|
||||
if (!key) {
|
||||
__DEV__ &&
|
||||
state.warn(
|
||||
`v-once can only be used inside v-for that is keyed. `,
|
||||
el.rawAttrsMap['v-once']
|
||||
)
|
||||
return genElement(el, state)
|
||||
}
|
||||
return `_o(${genElement(el, state)},${state.onceId++},${key})`
|
||||
} else {
|
||||
return genStatic(el, state)
|
||||
}
|
||||
}
|
||||
|
||||
export function genIf(
|
||||
el: any,
|
||||
state: CodegenState,
|
||||
altGen?: Function,
|
||||
altEmpty?: string
|
||||
): string {
|
||||
el.ifProcessed = true // avoid recursion
|
||||
return genIfConditions(el.ifConditions.slice(), state, altGen, altEmpty)
|
||||
}
|
||||
|
||||
function genIfConditions(
|
||||
conditions: ASTIfConditions,
|
||||
state: CodegenState,
|
||||
altGen?: Function,
|
||||
altEmpty?: string
|
||||
): string {
|
||||
if (!conditions.length) {
|
||||
return altEmpty || '_e()'
|
||||
}
|
||||
|
||||
const condition = conditions.shift()!
|
||||
if (condition.exp) {
|
||||
return `(${condition.exp})?${genTernaryExp(
|
||||
condition.block
|
||||
)}:${genIfConditions(conditions, state, altGen, altEmpty)}`
|
||||
} else {
|
||||
return `${genTernaryExp(condition.block)}`
|
||||
}
|
||||
|
||||
// v-if with v-once should generate code like (a)?_m(0):_m(1)
|
||||
function genTernaryExp(el) {
|
||||
return altGen
|
||||
? altGen(el, state)
|
||||
: el.once
|
||||
? genOnce(el, state)
|
||||
: genElement(el, state)
|
||||
}
|
||||
}
|
||||
|
||||
export function genFor(
|
||||
el: any,
|
||||
state: CodegenState,
|
||||
altGen?: Function,
|
||||
altHelper?: string
|
||||
): string {
|
||||
const exp = el.for
|
||||
const alias = el.alias
|
||||
const iterator1 = el.iterator1 ? `,${el.iterator1}` : ''
|
||||
const iterator2 = el.iterator2 ? `,${el.iterator2}` : ''
|
||||
|
||||
if (
|
||||
__DEV__ &&
|
||||
state.maybeComponent(el) &&
|
||||
el.tag !== 'slot' &&
|
||||
el.tag !== 'template' &&
|
||||
!el.key
|
||||
) {
|
||||
state.warn(
|
||||
`<${el.tag} v-for="${alias} in ${exp}">: component lists rendered with ` +
|
||||
`v-for should have explicit keys. ` +
|
||||
`See https://v2.vuejs.org/v2/guide/list.html#key for more info.`,
|
||||
el.rawAttrsMap['v-for'],
|
||||
true /* tip */
|
||||
)
|
||||
}
|
||||
|
||||
el.forProcessed = true // avoid recursion
|
||||
return (
|
||||
`${altHelper || '_l'}((${exp}),` +
|
||||
`function(${alias}${iterator1}${iterator2}){` +
|
||||
`return ${(altGen || genElement)(el, state)}` +
|
||||
'})'
|
||||
)
|
||||
}
|
||||
|
||||
export function genData(el: ASTElement, state: CodegenState): string {
|
||||
let data = '{'
|
||||
|
||||
// directives first.
|
||||
// directives may mutate the el's other properties before they are generated.
|
||||
const dirs = genDirectives(el, state)
|
||||
if (dirs) data += dirs + ','
|
||||
|
||||
// key
|
||||
if (el.key) {
|
||||
data += `key:${el.key},`
|
||||
}
|
||||
// ref
|
||||
if (el.ref) {
|
||||
data += `ref:${el.ref},`
|
||||
}
|
||||
if (el.refInFor) {
|
||||
data += `refInFor:true,`
|
||||
}
|
||||
// pre
|
||||
if (el.pre) {
|
||||
data += `pre:true,`
|
||||
}
|
||||
// record original tag name for components using "is" attribute
|
||||
if (el.component) {
|
||||
data += `tag:"${el.tag}",`
|
||||
}
|
||||
// module data generation functions
|
||||
for (let i = 0; i < state.dataGenFns.length; i++) {
|
||||
data += state.dataGenFns[i](el)
|
||||
}
|
||||
// attributes
|
||||
if (el.attrs) {
|
||||
data += `attrs:${genProps(el.attrs)},`
|
||||
}
|
||||
// DOM props
|
||||
if (el.props) {
|
||||
data += `domProps:${genProps(el.props)},`
|
||||
}
|
||||
// event handlers
|
||||
if (el.events) {
|
||||
data += `${genHandlers(el.events, false)},`
|
||||
}
|
||||
if (el.nativeEvents) {
|
||||
data += `${genHandlers(el.nativeEvents, true)},`
|
||||
}
|
||||
// slot target
|
||||
// only for non-scoped slots
|
||||
if (el.slotTarget && !el.slotScope) {
|
||||
data += `slot:${el.slotTarget},`
|
||||
}
|
||||
// scoped slots
|
||||
if (el.scopedSlots) {
|
||||
data += `${genScopedSlots(el, el.scopedSlots, state)},`
|
||||
}
|
||||
// component v-model
|
||||
if (el.model) {
|
||||
data += `model:{value:${el.model.value},callback:${el.model.callback},expression:${el.model.expression}},`
|
||||
}
|
||||
// inline-template
|
||||
if (el.inlineTemplate) {
|
||||
const inlineTemplate = genInlineTemplate(el, state)
|
||||
if (inlineTemplate) {
|
||||
data += `${inlineTemplate},`
|
||||
}
|
||||
}
|
||||
data = data.replace(/,$/, '') + '}'
|
||||
// v-bind dynamic argument wrap
|
||||
// v-bind with dynamic arguments must be applied using the same v-bind object
|
||||
// merge helper so that class/style/mustUseProp attrs are handled correctly.
|
||||
if (el.dynamicAttrs) {
|
||||
data = `_b(${data},"${el.tag}",${genProps(el.dynamicAttrs)})`
|
||||
}
|
||||
// v-bind data wrap
|
||||
if (el.wrapData) {
|
||||
data = el.wrapData(data)
|
||||
}
|
||||
// v-on data wrap
|
||||
if (el.wrapListeners) {
|
||||
data = el.wrapListeners(data)
|
||||
}
|
||||
return data
|
||||
}
|
||||
|
||||
function genDirectives(el: ASTElement, state: CodegenState): string | void {
|
||||
const dirs = el.directives
|
||||
if (!dirs) return
|
||||
let res = 'directives:['
|
||||
let hasRuntime = false
|
||||
let i, l, dir, needRuntime
|
||||
for (i = 0, l = dirs.length; i < l; i++) {
|
||||
dir = dirs[i]
|
||||
needRuntime = true
|
||||
const gen: DirectiveFunction = state.directives[dir.name]
|
||||
if (gen) {
|
||||
// compile-time directive that manipulates AST.
|
||||
// returns true if it also needs a runtime counterpart.
|
||||
needRuntime = !!gen(el, dir, state.warn)
|
||||
}
|
||||
if (needRuntime) {
|
||||
hasRuntime = true
|
||||
res += `{name:"${dir.name}",rawName:"${dir.rawName}"${
|
||||
dir.value
|
||||
? `,value:(${dir.value}),expression:${JSON.stringify(dir.value)}`
|
||||
: ''
|
||||
}${dir.arg ? `,arg:${dir.isDynamicArg ? dir.arg : `"${dir.arg}"`}` : ''}${
|
||||
dir.modifiers ? `,modifiers:${JSON.stringify(dir.modifiers)}` : ''
|
||||
}},`
|
||||
}
|
||||
}
|
||||
if (hasRuntime) {
|
||||
return res.slice(0, -1) + ']'
|
||||
}
|
||||
}
|
||||
|
||||
function genInlineTemplate(
|
||||
el: ASTElement,
|
||||
state: CodegenState
|
||||
): string | undefined {
|
||||
const ast = el.children[0]
|
||||
if (__DEV__ && (el.children.length !== 1 || ast.type !== 1)) {
|
||||
state.warn(
|
||||
'Inline-template components must have exactly one child element.',
|
||||
{ start: el.start }
|
||||
)
|
||||
}
|
||||
if (ast && ast.type === 1) {
|
||||
const inlineRenderFns = generate(ast, state.options)
|
||||
return `inlineTemplate:{render:function(){${
|
||||
inlineRenderFns.render
|
||||
}},staticRenderFns:[${inlineRenderFns.staticRenderFns
|
||||
.map(code => `function(){${code}}`)
|
||||
.join(',')}]}`
|
||||
}
|
||||
}
|
||||
|
||||
function genScopedSlots(
|
||||
el: ASTElement,
|
||||
slots: { [key: string]: ASTElement },
|
||||
state: CodegenState
|
||||
): string {
|
||||
// by default scoped slots are considered "stable", this allows child
|
||||
// components with only scoped slots to skip forced updates from parent.
|
||||
// but in some cases we have to bail-out of this optimization
|
||||
// for example if the slot contains dynamic names, has v-if or v-for on them...
|
||||
let needsForceUpdate =
|
||||
el.for ||
|
||||
Object.keys(slots).some(key => {
|
||||
const slot = slots[key]
|
||||
return (
|
||||
slot.slotTargetDynamic || slot.if || slot.for || containsSlotChild(slot) // is passing down slot from parent which may be dynamic
|
||||
)
|
||||
})
|
||||
|
||||
// #9534: if a component with scoped slots is inside a conditional branch,
|
||||
// it's possible for the same component to be reused but with different
|
||||
// compiled slot content. To avoid that, we generate a unique key based on
|
||||
// the generated code of all the slot contents.
|
||||
let needsKey = !!el.if
|
||||
|
||||
// OR when it is inside another scoped slot or v-for (the reactivity may be
|
||||
// disconnected due to the intermediate scope variable)
|
||||
// #9438, #9506
|
||||
// TODO: this can be further optimized by properly analyzing in-scope bindings
|
||||
// and skip force updating ones that do not actually use scope variables.
|
||||
if (!needsForceUpdate) {
|
||||
let parent = el.parent
|
||||
while (parent) {
|
||||
if (
|
||||
(parent.slotScope && parent.slotScope !== emptySlotScopeToken) ||
|
||||
parent.for
|
||||
) {
|
||||
needsForceUpdate = true
|
||||
break
|
||||
}
|
||||
if (parent.if) {
|
||||
needsKey = true
|
||||
}
|
||||
parent = parent.parent
|
||||
}
|
||||
}
|
||||
|
||||
const generatedSlots = Object.keys(slots)
|
||||
.map(key => genScopedSlot(slots[key], state))
|
||||
.join(',')
|
||||
|
||||
return `scopedSlots:_u([${generatedSlots}]${
|
||||
needsForceUpdate ? `,null,true` : ``
|
||||
}${
|
||||
!needsForceUpdate && needsKey ? `,null,false,${hash(generatedSlots)}` : ``
|
||||
})`
|
||||
}
|
||||
|
||||
function hash(str) {
|
||||
let hash = 5381
|
||||
let i = str.length
|
||||
while (i) {
|
||||
hash = (hash * 33) ^ str.charCodeAt(--i)
|
||||
}
|
||||
return hash >>> 0
|
||||
}
|
||||
|
||||
function containsSlotChild(el: ASTNode): boolean {
|
||||
if (el.type === 1) {
|
||||
if (el.tag === 'slot') {
|
||||
return true
|
||||
}
|
||||
return el.children.some(containsSlotChild)
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
function genScopedSlot(el: ASTElement, state: CodegenState): string {
|
||||
const isLegacySyntax = el.attrsMap['slot-scope']
|
||||
if (el.if && !el.ifProcessed && !isLegacySyntax) {
|
||||
return genIf(el, state, genScopedSlot, `null`)
|
||||
}
|
||||
if (el.for && !el.forProcessed) {
|
||||
return genFor(el, state, genScopedSlot)
|
||||
}
|
||||
const slotScope =
|
||||
el.slotScope === emptySlotScopeToken ? `` : String(el.slotScope)
|
||||
const fn =
|
||||
`function(${slotScope}){` +
|
||||
`return ${
|
||||
el.tag === 'template'
|
||||
? el.if && isLegacySyntax
|
||||
? `(${el.if})?${genChildren(el, state) || 'undefined'}:undefined`
|
||||
: genChildren(el, state) || 'undefined'
|
||||
: genElement(el, state)
|
||||
}}`
|
||||
// reverse proxy v-slot without scope on this.$slots
|
||||
const reverseProxy = slotScope ? `` : `,proxy:true`
|
||||
return `{key:${el.slotTarget || `"default"`},fn:${fn}${reverseProxy}}`
|
||||
}
|
||||
|
||||
export function genChildren(
|
||||
el: ASTElement,
|
||||
state: CodegenState,
|
||||
checkSkip?: boolean,
|
||||
altGenElement?: Function,
|
||||
altGenNode?: Function
|
||||
): string | void {
|
||||
const children = el.children
|
||||
if (children.length) {
|
||||
const el: any = children[0]
|
||||
// optimize single v-for
|
||||
if (
|
||||
children.length === 1 &&
|
||||
el.for &&
|
||||
el.tag !== 'template' &&
|
||||
el.tag !== 'slot'
|
||||
) {
|
||||
const normalizationType = checkSkip
|
||||
? state.maybeComponent(el)
|
||||
? `,1`
|
||||
: `,0`
|
||||
: ``
|
||||
return `${(altGenElement || genElement)(el, state)}${normalizationType}`
|
||||
}
|
||||
const normalizationType = checkSkip
|
||||
? getNormalizationType(children, state.maybeComponent)
|
||||
: 0
|
||||
const gen = altGenNode || genNode
|
||||
return `[${children.map(c => gen(c, state)).join(',')}]${
|
||||
normalizationType ? `,${normalizationType}` : ''
|
||||
}`
|
||||
}
|
||||
}
|
||||
|
||||
// determine the normalization needed for the children array.
|
||||
// 0: no normalization needed
|
||||
// 1: simple normalization needed (possible 1-level deep nested array)
|
||||
// 2: full normalization needed
|
||||
function getNormalizationType(
|
||||
children: Array<ASTNode>,
|
||||
maybeComponent: (el: ASTElement) => boolean
|
||||
): number {
|
||||
let res = 0
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
const el: ASTNode = children[i]
|
||||
if (el.type !== 1) {
|
||||
continue
|
||||
}
|
||||
if (
|
||||
needsNormalization(el) ||
|
||||
(el.ifConditions &&
|
||||
el.ifConditions.some(c => needsNormalization(c.block)))
|
||||
) {
|
||||
res = 2
|
||||
break
|
||||
}
|
||||
if (
|
||||
maybeComponent(el) ||
|
||||
(el.ifConditions && el.ifConditions.some(c => maybeComponent(c.block)))
|
||||
) {
|
||||
res = 1
|
||||
}
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
function needsNormalization(el: ASTElement): boolean {
|
||||
return el.for !== undefined || el.tag === 'template' || el.tag === 'slot'
|
||||
}
|
||||
|
||||
function genNode(node: ASTNode, state: CodegenState): string {
|
||||
if (node.type === 1) {
|
||||
return genElement(node, state)
|
||||
} else if (node.type === 3 && node.isComment) {
|
||||
return genComment(node)
|
||||
} else {
|
||||
return genText(node)
|
||||
}
|
||||
}
|
||||
|
||||
export function genText(text: ASTText | ASTExpression): string {
|
||||
return `_v(${
|
||||
text.type === 2
|
||||
? text.expression // no need for () because already wrapped in _s()
|
||||
: transformSpecialNewlines(JSON.stringify(text.text))
|
||||
})`
|
||||
}
|
||||
|
||||
export function genComment(comment: ASTText): string {
|
||||
return `_e(${JSON.stringify(comment.text)})`
|
||||
}
|
||||
|
||||
function genSlot(el: ASTElement, state: CodegenState): string {
|
||||
const slotName = el.slotName || '"default"'
|
||||
const children = genChildren(el, state)
|
||||
let res = `_t(${slotName}${children ? `,function(){return ${children}}` : ''}`
|
||||
const attrs =
|
||||
el.attrs || el.dynamicAttrs
|
||||
? genProps(
|
||||
(el.attrs || []).concat(el.dynamicAttrs || []).map(attr => ({
|
||||
// slot props are camelized
|
||||
name: camelize(attr.name),
|
||||
value: attr.value,
|
||||
dynamic: attr.dynamic
|
||||
}))
|
||||
)
|
||||
: null
|
||||
const bind = el.attrsMap['v-bind']
|
||||
if ((attrs || bind) && !children) {
|
||||
res += `,null`
|
||||
}
|
||||
if (attrs) {
|
||||
res += `,${attrs}`
|
||||
}
|
||||
if (bind) {
|
||||
res += `${attrs ? '' : ',null'},${bind}`
|
||||
}
|
||||
return res + ')'
|
||||
}
|
||||
|
||||
// componentName is el.component, take it as argument to shun flow's pessimistic refinement
|
||||
function genComponent(
|
||||
componentName: string,
|
||||
el: ASTElement,
|
||||
state: CodegenState
|
||||
): string {
|
||||
const children = el.inlineTemplate ? null : genChildren(el, state, true)
|
||||
return `_c(${componentName},${genData(el, state)}${
|
||||
children ? `,${children}` : ''
|
||||
})`
|
||||
}
|
||||
|
||||
function genProps(props: Array<ASTAttr>): string {
|
||||
let staticProps = ``
|
||||
let dynamicProps = ``
|
||||
for (let i = 0; i < props.length; i++) {
|
||||
const prop = props[i]
|
||||
const value = transformSpecialNewlines(prop.value)
|
||||
if (prop.dynamic) {
|
||||
dynamicProps += `${prop.name},${value},`
|
||||
} else {
|
||||
staticProps += `"${prop.name}":${value},`
|
||||
}
|
||||
}
|
||||
staticProps = `{${staticProps.slice(0, -1)}}`
|
||||
if (dynamicProps) {
|
||||
return `_d(${staticProps},[${dynamicProps.slice(0, -1)}])`
|
||||
} else {
|
||||
return staticProps
|
||||
}
|
||||
}
|
||||
|
||||
// #3895, #4268
|
||||
function transformSpecialNewlines(text: string): string {
|
||||
return text.replace(/\u2028/g, '\\u2028').replace(/\u2029/g, '\\u2029')
|
||||
}
|
||||
Reference in New Issue
Block a user