371 lines
12 KiB
TypeScript
371 lines
12 KiB
TypeScript
import {
|
|
ConstantTypes,
|
|
RootNode,
|
|
NodeTypes,
|
|
TemplateChildNode,
|
|
SimpleExpressionNode,
|
|
ElementTypes,
|
|
PlainElementNode,
|
|
ComponentNode,
|
|
TemplateNode,
|
|
VNodeCall,
|
|
ParentNode,
|
|
JSChildNode,
|
|
CallExpression,
|
|
createArrayExpression
|
|
} from '../ast'
|
|
import { TransformContext } from '../transform'
|
|
import { PatchFlags, isString, isSymbol, isArray } from '@vue/shared'
|
|
import { getVNodeBlockHelper, getVNodeHelper, isSlotOutlet } from '../utils'
|
|
import {
|
|
OPEN_BLOCK,
|
|
GUARD_REACTIVE_PROPS,
|
|
NORMALIZE_CLASS,
|
|
NORMALIZE_PROPS,
|
|
NORMALIZE_STYLE
|
|
} from '../runtimeHelpers'
|
|
|
|
export function hoistStatic(root: RootNode, context: TransformContext) {
|
|
walk(
|
|
root,
|
|
context,
|
|
// Root node is unfortunately non-hoistable due to potential parent
|
|
// fallthrough attributes.
|
|
isSingleElementRoot(root, root.children[0])
|
|
)
|
|
}
|
|
|
|
export function isSingleElementRoot(
|
|
root: RootNode,
|
|
child: TemplateChildNode
|
|
): child is PlainElementNode | ComponentNode | TemplateNode {
|
|
const { children } = root
|
|
return (
|
|
children.length === 1 &&
|
|
child.type === NodeTypes.ELEMENT &&
|
|
!isSlotOutlet(child)
|
|
)
|
|
}
|
|
|
|
function walk(
|
|
node: ParentNode,
|
|
context: TransformContext,
|
|
doNotHoistNode: boolean = false
|
|
) {
|
|
// Some transforms, e.g. transformAssetUrls from @vue/compiler-sfc, replaces
|
|
// static bindings with expressions. These expressions are guaranteed to be
|
|
// constant so they are still eligible for hoisting, but they are only
|
|
// available at runtime and therefore cannot be evaluated ahead of time.
|
|
// This is only a concern for pre-stringification (via transformHoist by
|
|
// @vue/compiler-dom), but doing it here allows us to perform only one full
|
|
// walk of the AST and allow `stringifyStatic` to stop walking as soon as its
|
|
// stringficiation threshold is met.
|
|
let canStringify = true
|
|
|
|
const { children } = node
|
|
const originalCount = children.length
|
|
let hoistedCount = 0
|
|
|
|
for (let i = 0; i < children.length; i++) {
|
|
const child = children[i]
|
|
// only plain elements & text calls are eligible for hoisting.
|
|
if (
|
|
child.type === NodeTypes.ELEMENT &&
|
|
child.tagType === ElementTypes.ELEMENT
|
|
) {
|
|
const constantType = doNotHoistNode
|
|
? ConstantTypes.NOT_CONSTANT
|
|
: getConstantType(child, context)
|
|
if (constantType > ConstantTypes.NOT_CONSTANT) {
|
|
if (constantType < ConstantTypes.CAN_STRINGIFY) {
|
|
canStringify = false
|
|
}
|
|
if (constantType >= ConstantTypes.CAN_HOIST) {
|
|
;(child.codegenNode as VNodeCall).patchFlag =
|
|
PatchFlags.HOISTED + (__DEV__ ? ` /* HOISTED */` : ``)
|
|
child.codegenNode = context.hoist(child.codegenNode!)
|
|
hoistedCount++
|
|
continue
|
|
}
|
|
} else {
|
|
// node may contain dynamic children, but its props may be eligible for
|
|
// hoisting.
|
|
const codegenNode = child.codegenNode!
|
|
if (codegenNode.type === NodeTypes.VNODE_CALL) {
|
|
const flag = getPatchFlag(codegenNode)
|
|
if (
|
|
(!flag ||
|
|
flag === PatchFlags.NEED_PATCH ||
|
|
flag === PatchFlags.TEXT) &&
|
|
getGeneratedPropsConstantType(child, context) >=
|
|
ConstantTypes.CAN_HOIST
|
|
) {
|
|
const props = getNodeProps(child)
|
|
if (props) {
|
|
codegenNode.props = context.hoist(props)
|
|
}
|
|
}
|
|
if (codegenNode.dynamicProps) {
|
|
codegenNode.dynamicProps = context.hoist(codegenNode.dynamicProps)
|
|
}
|
|
}
|
|
}
|
|
} else if (child.type === NodeTypes.TEXT_CALL) {
|
|
const contentType = getConstantType(child.content, context)
|
|
if (contentType > 0) {
|
|
if (contentType < ConstantTypes.CAN_STRINGIFY) {
|
|
canStringify = false
|
|
}
|
|
if (contentType >= ConstantTypes.CAN_HOIST) {
|
|
child.codegenNode = context.hoist(child.codegenNode)
|
|
hoistedCount++
|
|
}
|
|
}
|
|
}
|
|
|
|
// walk further
|
|
if (child.type === NodeTypes.ELEMENT) {
|
|
const isComponent = child.tagType === ElementTypes.COMPONENT
|
|
if (isComponent) {
|
|
context.scopes.vSlot++
|
|
}
|
|
walk(child, context)
|
|
if (isComponent) {
|
|
context.scopes.vSlot--
|
|
}
|
|
} else if (child.type === NodeTypes.FOR) {
|
|
// Do not hoist v-for single child because it has to be a block
|
|
walk(child, context, child.children.length === 1)
|
|
} else if (child.type === NodeTypes.IF) {
|
|
for (let i = 0; i < child.branches.length; i++) {
|
|
// Do not hoist v-if single child because it has to be a block
|
|
walk(
|
|
child.branches[i],
|
|
context,
|
|
child.branches[i].children.length === 1
|
|
)
|
|
}
|
|
}
|
|
}
|
|
|
|
if (canStringify && hoistedCount && context.transformHoist) {
|
|
context.transformHoist(children, context, node)
|
|
}
|
|
|
|
// all children were hoisted - the entire children array is hoistable.
|
|
if (
|
|
hoistedCount &&
|
|
hoistedCount === originalCount &&
|
|
node.type === NodeTypes.ELEMENT &&
|
|
node.tagType === ElementTypes.ELEMENT &&
|
|
node.codegenNode &&
|
|
node.codegenNode.type === NodeTypes.VNODE_CALL &&
|
|
isArray(node.codegenNode.children)
|
|
) {
|
|
node.codegenNode.children = context.hoist(
|
|
createArrayExpression(node.codegenNode.children)
|
|
)
|
|
}
|
|
}
|
|
|
|
export function getConstantType(
|
|
node: TemplateChildNode | SimpleExpressionNode,
|
|
context: TransformContext
|
|
): ConstantTypes {
|
|
const { constantCache } = context
|
|
switch (node.type) {
|
|
case NodeTypes.ELEMENT:
|
|
if (node.tagType !== ElementTypes.ELEMENT) {
|
|
return ConstantTypes.NOT_CONSTANT
|
|
}
|
|
const cached = constantCache.get(node)
|
|
if (cached !== undefined) {
|
|
return cached
|
|
}
|
|
const codegenNode = node.codegenNode!
|
|
if (codegenNode.type !== NodeTypes.VNODE_CALL) {
|
|
return ConstantTypes.NOT_CONSTANT
|
|
}
|
|
const flag = getPatchFlag(codegenNode)
|
|
if (!flag) {
|
|
let returnType = ConstantTypes.CAN_STRINGIFY
|
|
|
|
// Element itself has no patch flag. However we still need to check:
|
|
|
|
// 1. Even for a node with no patch flag, it is possible for it to contain
|
|
// non-hoistable expressions that refers to scope variables, e.g. compiler
|
|
// injected keys or cached event handlers. Therefore we need to always
|
|
// check the codegenNode's props to be sure.
|
|
const generatedPropsType = getGeneratedPropsConstantType(node, context)
|
|
if (generatedPropsType === ConstantTypes.NOT_CONSTANT) {
|
|
constantCache.set(node, ConstantTypes.NOT_CONSTANT)
|
|
return ConstantTypes.NOT_CONSTANT
|
|
}
|
|
if (generatedPropsType < returnType) {
|
|
returnType = generatedPropsType
|
|
}
|
|
|
|
// 2. its children.
|
|
for (let i = 0; i < node.children.length; i++) {
|
|
const childType = getConstantType(node.children[i], context)
|
|
if (childType === ConstantTypes.NOT_CONSTANT) {
|
|
constantCache.set(node, ConstantTypes.NOT_CONSTANT)
|
|
return ConstantTypes.NOT_CONSTANT
|
|
}
|
|
if (childType < returnType) {
|
|
returnType = childType
|
|
}
|
|
}
|
|
|
|
// 3. if the type is not already CAN_SKIP_PATCH which is the lowest non-0
|
|
// type, check if any of the props can cause the type to be lowered
|
|
// we can skip can_patch because it's guaranteed by the absence of a
|
|
// patchFlag.
|
|
if (returnType > ConstantTypes.CAN_SKIP_PATCH) {
|
|
for (let i = 0; i < node.props.length; i++) {
|
|
const p = node.props[i]
|
|
if (p.type === NodeTypes.DIRECTIVE && p.name === 'bind' && p.exp) {
|
|
const expType = getConstantType(p.exp, context)
|
|
if (expType === ConstantTypes.NOT_CONSTANT) {
|
|
constantCache.set(node, ConstantTypes.NOT_CONSTANT)
|
|
return ConstantTypes.NOT_CONSTANT
|
|
}
|
|
if (expType < returnType) {
|
|
returnType = expType
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// only svg/foreignObject could be block here, however if they are
|
|
// static then they don't need to be blocks since there will be no
|
|
// nested updates.
|
|
if (codegenNode.isBlock) {
|
|
context.removeHelper(OPEN_BLOCK)
|
|
context.removeHelper(
|
|
getVNodeBlockHelper(context.inSSR, codegenNode.isComponent)
|
|
)
|
|
codegenNode.isBlock = false
|
|
context.helper(getVNodeHelper(context.inSSR, codegenNode.isComponent))
|
|
}
|
|
|
|
constantCache.set(node, returnType)
|
|
return returnType
|
|
} else {
|
|
constantCache.set(node, ConstantTypes.NOT_CONSTANT)
|
|
return ConstantTypes.NOT_CONSTANT
|
|
}
|
|
case NodeTypes.TEXT:
|
|
case NodeTypes.COMMENT:
|
|
return ConstantTypes.CAN_STRINGIFY
|
|
case NodeTypes.IF:
|
|
case NodeTypes.FOR:
|
|
case NodeTypes.IF_BRANCH:
|
|
return ConstantTypes.NOT_CONSTANT
|
|
case NodeTypes.INTERPOLATION:
|
|
case NodeTypes.TEXT_CALL:
|
|
return getConstantType(node.content, context)
|
|
case NodeTypes.SIMPLE_EXPRESSION:
|
|
return node.constType
|
|
case NodeTypes.COMPOUND_EXPRESSION:
|
|
let returnType = ConstantTypes.CAN_STRINGIFY
|
|
for (let i = 0; i < node.children.length; i++) {
|
|
const child = node.children[i]
|
|
if (isString(child) || isSymbol(child)) {
|
|
continue
|
|
}
|
|
const childType = getConstantType(child, context)
|
|
if (childType === ConstantTypes.NOT_CONSTANT) {
|
|
return ConstantTypes.NOT_CONSTANT
|
|
} else if (childType < returnType) {
|
|
returnType = childType
|
|
}
|
|
}
|
|
return returnType
|
|
default:
|
|
if (__DEV__) {
|
|
const exhaustiveCheck: never = node
|
|
exhaustiveCheck
|
|
}
|
|
return ConstantTypes.NOT_CONSTANT
|
|
}
|
|
}
|
|
|
|
const allowHoistedHelperSet = new Set([
|
|
NORMALIZE_CLASS,
|
|
NORMALIZE_STYLE,
|
|
NORMALIZE_PROPS,
|
|
GUARD_REACTIVE_PROPS
|
|
])
|
|
|
|
function getConstantTypeOfHelperCall(
|
|
value: CallExpression,
|
|
context: TransformContext
|
|
): ConstantTypes {
|
|
if (
|
|
value.type === NodeTypes.JS_CALL_EXPRESSION &&
|
|
!isString(value.callee) &&
|
|
allowHoistedHelperSet.has(value.callee)
|
|
) {
|
|
const arg = value.arguments[0] as JSChildNode
|
|
if (arg.type === NodeTypes.SIMPLE_EXPRESSION) {
|
|
return getConstantType(arg, context)
|
|
} else if (arg.type === NodeTypes.JS_CALL_EXPRESSION) {
|
|
// in the case of nested helper call, e.g. `normalizeProps(guardReactiveProps(exp))`
|
|
return getConstantTypeOfHelperCall(arg, context)
|
|
}
|
|
}
|
|
return ConstantTypes.NOT_CONSTANT
|
|
}
|
|
|
|
function getGeneratedPropsConstantType(
|
|
node: PlainElementNode,
|
|
context: TransformContext
|
|
): ConstantTypes {
|
|
let returnType = ConstantTypes.CAN_STRINGIFY
|
|
const props = getNodeProps(node)
|
|
if (props && props.type === NodeTypes.JS_OBJECT_EXPRESSION) {
|
|
const { properties } = props
|
|
for (let i = 0; i < properties.length; i++) {
|
|
const { key, value } = properties[i]
|
|
const keyType = getConstantType(key, context)
|
|
if (keyType === ConstantTypes.NOT_CONSTANT) {
|
|
return keyType
|
|
}
|
|
if (keyType < returnType) {
|
|
returnType = keyType
|
|
}
|
|
let valueType: ConstantTypes
|
|
if (value.type === NodeTypes.SIMPLE_EXPRESSION) {
|
|
valueType = getConstantType(value, context)
|
|
} else if (value.type === NodeTypes.JS_CALL_EXPRESSION) {
|
|
// some helper calls can be hoisted,
|
|
// such as the `normalizeProps` generated by the compiler for pre-normalize class,
|
|
// in this case we need to respect the ConstanType of the helper's argments
|
|
valueType = getConstantTypeOfHelperCall(value, context)
|
|
} else {
|
|
valueType = ConstantTypes.NOT_CONSTANT
|
|
}
|
|
if (valueType === ConstantTypes.NOT_CONSTANT) {
|
|
return valueType
|
|
}
|
|
if (valueType < returnType) {
|
|
returnType = valueType
|
|
}
|
|
}
|
|
}
|
|
return returnType
|
|
}
|
|
|
|
function getNodeProps(node: PlainElementNode) {
|
|
const codegenNode = node.codegenNode!
|
|
if (codegenNode.type === NodeTypes.VNODE_CALL) {
|
|
return codegenNode.props
|
|
}
|
|
}
|
|
|
|
function getPatchFlag(node: VNodeCall): number | undefined {
|
|
const flag = node.patchFlag
|
|
return flag ? parseInt(flag, 10) : undefined
|
|
}
|