/** * This module is Node-only. */ import { NodeTypes, ElementNode, TransformContext, TemplateChildNode, SimpleExpressionNode, createCallExpression, HoistTransform, CREATE_STATIC, ExpressionNode, ElementTypes, PlainElementNode, JSChildNode } from '@vue/compiler-core' import { isVoidTag, isString, isSymbol, isKnownAttr, escapeHtml, toDisplayString, normalizeClass, normalizeStyle, stringifyStyle } from '@vue/shared' export const enum StringifyThresholds { ELEMENT_WITH_BINDING_COUNT = 5, NODE_COUNT = 20 } // Turn eligible hoisted static trees into stringied static nodes, e.g. // const _hoisted_1 = createStaticVNode(`
` function walk(node: ElementNode): boolean { for (let i = 0; i < node.props.length; i++) { const p = node.props[i] // bail on non-attr bindings if (p.type === NodeTypes.ATTRIBUTE && !isStringifiableAttr(p.name)) { return bail() } if (p.type === NodeTypes.DIRECTIVE && p.name === 'bind') { // bail on non-attr bindings if ( p.arg && (p.arg.type === NodeTypes.COMPOUND_EXPRESSION || (p.arg.isStatic && !isStringifiableAttr(p.arg.content))) ) { return bail() } // some transforms, e.g. `transformAssetUrls` in `@vue/compiler-sfc` may // convert static attributes into a v-bind with a constnat expresion. // Such constant bindings are eligible for hoisting but not for static // stringification because they cannot be pre-evaluated. if ( p.exp && (p.exp.type === NodeTypes.COMPOUND_EXPRESSION || p.exp.isRuntimeConstant) ) { return bail() } } } for (let i = 0; i < node.children.length; i++) { nc++ if (nc >= StringifyThresholds.NODE_COUNT) { return true } const child = node.children[i] if (child.type === NodeTypes.ELEMENT) { if (child.props.length > 0) { ec++ if (ec >= StringifyThresholds.ELEMENT_WITH_BINDING_COUNT) { return true } } walk(child) if (bailed) { return false } } } return true } return walk(node) ? [nc, ec] : false } function stringifyElement( node: ElementNode, context: TransformContext ): string { let res = `<${node.tag}` for (let i = 0; i < node.props.length; i++) { const p = node.props[i] if (p.type === NodeTypes.ATTRIBUTE) { res += ` ${p.name}` if (p.value) { res += `="${escapeHtml(p.value.content)}"` } } else if (p.type === NodeTypes.DIRECTIVE && p.name === 'bind') { // constant v-bind, e.g. :foo="1" let evaluated = evaluateConstant(p.exp as SimpleExpressionNode) const arg = p.arg && (p.arg as SimpleExpressionNode).content if (arg === 'class') { evaluated = normalizeClass(evaluated) } else if (arg === 'style') { evaluated = stringifyStyle(normalizeStyle(evaluated)) } res += ` ${(p.arg as SimpleExpressionNode).content}="${escapeHtml( evaluated )}"` } } if (context.scopeId) { res += ` ${context.scopeId}` } res += `>` for (let i = 0; i < node.children.length; i++) { res += stringifyNode(node.children[i], context) } if (!isVoidTag(node.tag)) { res += `${node.tag}>` } return res } function stringifyNode( node: string | TemplateChildNode, context: TransformContext ): string { if (isString(node)) { return node } if (isSymbol(node)) { return `` } switch (node.type) { case NodeTypes.ELEMENT: return stringifyElement(node, context) case NodeTypes.TEXT: return escapeHtml(node.content) case NodeTypes.COMMENT: return `` case NodeTypes.INTERPOLATION: return escapeHtml(toDisplayString(evaluateConstant(node.content))) case NodeTypes.COMPOUND_EXPRESSION: return escapeHtml(evaluateConstant(node)) case NodeTypes.TEXT_CALL: return stringifyNode(node.content, context) default: // static trees will not contain if/for nodes return '' } } // __UNSAFE__ // Reason: eval. // It's technically safe to eval because only constant expressions are possible // here, e.g. `{{ 1 }}` or `{{ 'foo' }}` // in addition, constant exps bail on presence of parens so you can't even // run JSFuck in here. But we mark it unsafe for security review purposes. // (see compiler-core/src/transformExpressions) function evaluateConstant(exp: ExpressionNode): string { if (exp.type === NodeTypes.SIMPLE_EXPRESSION) { return new Function(`return ${exp.content}`)() } else { // compound let res = `` exp.children.forEach(c => { if (isString(c) || isSymbol(c)) { return } if (c.type === NodeTypes.TEXT) { res += c.content } else if (c.type === NodeTypes.INTERPOLATION) { res += toDisplayString(evaluateConstant(c.content)) } else { res += evaluateConstant(c) } }) return res } }