vue3-yuanma/packages/compiler-core/src/codegen.ts

759 lines
18 KiB
TypeScript
Raw Normal View History

import { CodegenOptions } from './options'
import {
RootNode,
TemplateChildNode,
TextNode,
CommentNode,
ExpressionNode,
2019-09-23 04:50:57 +08:00
NodeTypes,
JSChildNode,
CallExpression,
ArrayExpression,
ObjectExpression,
Position,
InterpolationNode,
CompoundExpressionNode,
2019-09-28 08:29:20 +08:00
SimpleExpressionNode,
FunctionExpression,
SequenceExpression,
2019-10-19 09:51:34 +08:00
ConditionalExpression,
CacheExpression,
locStub,
SSRCodegenNode,
TemplateLiteral,
IfStatement
} from './ast'
import { SourceMapGenerator, RawSourceMap } from 'source-map'
2019-09-25 10:39:20 +08:00
import {
advancePositionWithMutation,
assert,
2019-10-05 05:43:20 +08:00
isSimpleIdentifier,
loadDep,
toValidAssetId
2019-09-25 10:39:20 +08:00
} from './utils'
import { isString, isArray, isSymbol } from '@vue/shared'
import {
helperNameMap,
2020-01-27 06:35:21 +08:00
TO_DISPLAY_STRING,
CREATE_VNODE,
RESOLVE_COMPONENT,
RESOLVE_DIRECTIVE,
SET_BLOCK_TRACKING,
CREATE_COMMENT,
CREATE_TEXT,
PUSH_SCOPE_ID,
POP_SCOPE_ID,
WITH_SCOPE_ID
} from './runtimeHelpers'
import { ImportItem } from './transform'
2019-09-23 04:50:57 +08:00
type CodegenNode = TemplateChildNode | JSChildNode | SSRCodegenNode
export interface CodegenResult {
code: string
ast: RootNode
map?: RawSourceMap
}
2019-09-22 03:47:26 +08:00
export interface CodegenContext extends Required<CodegenOptions> {
source: string
code: string
line: number
column: number
offset: number
2019-09-23 04:50:57 +08:00
indentLevel: number
map?: SourceMapGenerator
2019-10-11 06:02:51 +08:00
helper(key: symbol): string
push(code: string, node?: CodegenNode): void
2019-09-23 04:50:57 +08:00
indent(): void
deindent(withoutNewLine?: boolean): void
2019-09-23 04:50:57 +08:00
newline(): void
}
function createCodegenContext(
ast: RootNode,
2019-09-23 04:50:57 +08:00
{
mode = 'function',
prefixIdentifiers = mode === 'module' || mode === 'cjs',
2019-09-25 03:49:02 +08:00
sourceMap = false,
filename = `template.vue.html`,
scopeId = null,
ssr = false
2019-09-23 04:50:57 +08:00
}: CodegenOptions
): CodegenContext {
const context: CodegenContext = {
2019-09-23 04:50:57 +08:00
mode,
2019-09-24 01:29:41 +08:00
prefixIdentifiers,
2019-09-25 03:49:02 +08:00
sourceMap,
filename,
scopeId,
ssr,
source: ast.loc.source,
code: ``,
column: 1,
line: 1,
offset: 0,
2019-09-23 04:50:57 +08:00
indentLevel: 0,
map: undefined,
helper(key) {
const name = helperNameMap[key]
return prefixIdentifiers ? name : `_${name}`
},
push(code, node) {
2019-09-23 04:50:57 +08:00
context.code += code
if (!__BROWSER__ && context.map) {
if (node) {
let name
if (node.type === NodeTypes.SIMPLE_EXPRESSION && !node.isStatic) {
const content = node.content.replace(/^_ctx\./, '')
if (content !== node.content && isSimpleIdentifier(content)) {
name = content
}
}
addMapping(node.loc.start, name)
}
advancePositionWithMutation(context, code)
if (node && node.loc !== locStub) {
addMapping(node.loc.end)
}
}
2019-09-23 04:50:57 +08:00
},
indent() {
newline(++context.indentLevel)
},
deindent(withoutNewLine = false) {
if (withoutNewLine) {
--context.indentLevel
} else {
newline(--context.indentLevel)
}
2019-09-23 04:50:57 +08:00
},
newline() {
newline(context.indentLevel)
}
}
function newline(n: number) {
context.push('\n' + ` `.repeat(n))
}
function addMapping(loc: Position, name?: string) {
context.map!.addMapping({
name,
source: context.filename,
original: {
line: loc.line,
column: loc.column - 1 // source-map column is 0 based
},
generated: {
line: context.line,
column: context.column - 1
}
})
}
if (!__BROWSER__ && sourceMap) {
// lazy require source-map implementation, only in non-browser builds
context.map = new (loadDep('source-map')).SourceMapGenerator()
context.map!.setSourceContent(filename, context.source)
}
return context
}
2019-09-23 04:50:57 +08:00
export function generate(
ast: RootNode,
options: CodegenOptions = {}
): CodegenResult {
const context = createCodegenContext(ast, options)
const {
mode,
push,
helper,
prefixIdentifiers,
indent,
deindent,
newline,
scopeId,
ssr
} = context
const hasHelpers = ast.helpers.length > 0
2019-09-26 10:29:37 +08:00
const useWithBlock = !prefixIdentifiers && mode !== 'module'
const genScopeId = !__BROWSER__ && scopeId != null && mode === 'module'
// preambles
if (mode === 'function' || mode === 'cjs') {
const VueBinding = mode === 'function' ? `Vue` : `require("vue")`
// Generate const declaration for helpers
// In prefix mode, we place the const declaration at top so it's done
2019-10-05 22:29:50 +08:00
// only once; But if we not prefixing, we place the declaration inside the
// with block so it doesn't incur the `in` check cost for every helper access.
if (hasHelpers) {
if (prefixIdentifiers) {
push(
`const { ${ast.helpers.map(helper).join(', ')} } = ${VueBinding}\n`
)
} else {
2019-10-04 11:30:25 +08:00
// "with" mode.
// save Vue in a separate variable to avoid collision
push(`const _Vue = ${VueBinding}\n`)
2019-10-04 11:30:25 +08:00
// in "with" mode, helpers are declared inside the with block to avoid
2019-10-05 22:35:19 +08:00
// has check cost, but hoists are lifted out of the function - we need
2019-10-04 11:30:25 +08:00
// to provide the helper here.
if (ast.hoists.length) {
const staticHelpers = [CREATE_VNODE, CREATE_COMMENT, CREATE_TEXT]
.filter(helper => ast.helpers.includes(helper))
.map(s => `${helperNameMap[s]}: _${helperNameMap[s]}`)
.join(', ')
push(`const { ${staticHelpers} } = _Vue\n`)
2019-10-04 11:30:25 +08:00
}
}
}
genHoists(ast.hoists, context)
newline()
2019-09-23 04:50:57 +08:00
push(`return `)
} else {
// generate import statements for helpers
if (genScopeId) {
ast.helpers.push(WITH_SCOPE_ID)
if (ast.hoists.length) {
ast.helpers.push(PUSH_SCOPE_ID, POP_SCOPE_ID)
}
}
if (hasHelpers) {
push(`import { ${ast.helpers.map(helper).join(', ')} } from "vue"\n`)
}
if (ast.imports.length) {
genImports(ast.imports, context)
newline()
}
if (genScopeId) {
push(`const withId = ${helper(WITH_SCOPE_ID)}("${scopeId}")`)
newline()
}
genHoists(ast.hoists, context)
newline()
push(`export `)
2019-09-23 04:50:57 +08:00
}
// enter render function
if (genScopeId && !ssr) {
push(`const render = withId(`)
}
if (!ssr) {
push(`function render() {`)
} else {
push(`function ssrRender(_ctx, _push, _parent) {`)
}
2019-09-23 14:52:54 +08:00
indent()
2019-09-26 10:29:37 +08:00
if (useWithBlock) {
push(`with (this) {`)
indent()
// function mode const declarations should be inside with block
// also they should be renamed to avoid collision with user properties
if (hasHelpers) {
push(
`const { ${ast.helpers
.map(s => `${helperNameMap[s]}: _${helperNameMap[s]}`)
.join(', ')} } = _Vue`
)
newline()
if (ast.cached > 0) {
push(`const _cache = $cache`)
newline()
}
newline()
}
} else if (!ssr) {
push(`const _ctx = this`)
if (ast.cached > 0) {
newline()
push(`const _cache = _ctx.$cache`)
}
newline()
}
// generate asset resolution statements
if (ast.components.length) {
genAssets(ast.components, 'component', context)
}
if (ast.directives.length) {
genAssets(ast.directives, 'directive', context)
}
if (ast.components.length || ast.directives.length) {
2019-09-23 14:52:54 +08:00
newline()
}
// generate the VNode tree expression
if (!ssr) {
push(`return `)
}
if (ast.codegenNode) {
genNode(ast.codegenNode, context)
} else {
push(`null`)
}
2019-09-26 10:29:37 +08:00
if (useWithBlock) {
2019-09-23 04:50:57 +08:00
deindent()
push(`}`)
}
2019-09-26 10:29:37 +08:00
2019-09-23 04:50:57 +08:00
deindent()
push(`}`)
if (genScopeId && !ssr) {
push(`)`)
}
2019-09-23 04:50:57 +08:00
return {
ast,
2019-09-23 04:50:57 +08:00
code: context.code,
// SourceMapGenerator does have toJSON() method but it's not in the types
map: context.map ? (context.map as any).toJSON() : undefined
2019-09-23 04:50:57 +08:00
}
}
function genAssets(
assets: string[],
type: 'component' | 'directive',
context: CodegenContext
) {
const resolver = context.helper(
type === 'component' ? RESOLVE_COMPONENT : RESOLVE_DIRECTIVE
)
for (let i = 0; i < assets.length; i++) {
const id = assets[i]
context.push(
`const ${toValidAssetId(id, type)} = ${resolver}(${JSON.stringify(id)})`
)
context.newline()
}
}
function genHoists(hoists: JSChildNode[], context: CodegenContext) {
if (!hoists.length) {
return
}
const { push, newline, helper, scopeId, mode } = context
const genScopeId = !__BROWSER__ && scopeId != null && mode !== 'function'
newline()
// push scope Id before initilaizing hoisted vnodes so that these vnodes
// get the proper scopeId as well.
if (genScopeId) {
push(`${helper(PUSH_SCOPE_ID)}("${scopeId}")`)
newline()
}
hoists.forEach((exp, i) => {
push(`const _hoisted_${i + 1} = `)
genNode(exp, context)
newline()
})
if (genScopeId) {
push(`${helper(POP_SCOPE_ID)}()`)
newline()
}
}
function genImports(importsOptions: ImportItem[], context: CodegenContext) {
if (!importsOptions.length) {
return
}
importsOptions.forEach(imports => {
context.push(`import `)
genNode(imports.exp, context)
context.push(` from '${imports.path}'`)
context.newline()
})
}
function isText(n: string | CodegenNode) {
return (
isString(n) ||
n.type === NodeTypes.SIMPLE_EXPRESSION ||
n.type === NodeTypes.TEXT ||
n.type === NodeTypes.INTERPOLATION ||
n.type === NodeTypes.COMPOUND_EXPRESSION
)
}
2019-09-23 04:50:57 +08:00
function genNodeListAsArray(
nodes: (string | CodegenNode | TemplateChildNode[])[],
2019-09-23 04:50:57 +08:00
context: CodegenContext
) {
const multilines =
nodes.length > 3 ||
((!__BROWSER__ || __DEV__) && nodes.some(n => isArray(n) || !isText(n)))
2019-09-23 04:50:57 +08:00
context.push(`[`)
multilines && context.indent()
genNodeList(nodes, context, multilines)
multilines && context.deindent()
context.push(`]`)
}
2019-09-23 04:50:57 +08:00
function genNodeList(
2019-10-11 06:02:51 +08:00
nodes: (string | symbol | CodegenNode | TemplateChildNode[])[],
2019-09-23 04:50:57 +08:00
context: CodegenContext,
multilines: boolean = false
) {
const { push, newline } = context
for (let i = 0; i < nodes.length; i++) {
const node = nodes[i]
if (isString(node)) {
push(node)
} else if (isArray(node)) {
genNodeListAsArray(node, context)
2019-09-23 04:50:57 +08:00
} else {
genNode(node, context)
}
if (i < nodes.length - 1) {
if (multilines) {
push(',')
newline()
} else {
push(', ')
}
}
}
}
2019-10-11 06:02:51 +08:00
function genNode(node: CodegenNode | symbol | string, context: CodegenContext) {
if (isString(node)) {
context.push(node)
return
}
if (isSymbol(node)) {
context.push(context.helper(node))
return
}
switch (node.type) {
case NodeTypes.ELEMENT:
case NodeTypes.IF:
case NodeTypes.FOR:
__DEV__ &&
assert(
node.codegenNode != null,
`Codegen node is missing for element/if/for node. ` +
`Apply appropriate transforms first.`
)
genNode(node.codegenNode!, context)
break
case NodeTypes.TEXT:
genText(node, context)
break
case NodeTypes.SIMPLE_EXPRESSION:
genExpression(node, context)
break
case NodeTypes.INTERPOLATION:
genInterpolation(node, context)
break
case NodeTypes.TEXT_CALL:
genNode(node.codegenNode, context)
break
case NodeTypes.COMPOUND_EXPRESSION:
genCompoundExpression(node, context)
break
case NodeTypes.COMMENT:
genComment(node, context)
break
2019-09-23 04:50:57 +08:00
case NodeTypes.JS_CALL_EXPRESSION:
genCallExpression(node, context)
break
case NodeTypes.JS_OBJECT_EXPRESSION:
genObjectExpression(node, context)
break
case NodeTypes.JS_ARRAY_EXPRESSION:
genArrayExpression(node, context)
2019-09-23 14:52:54 +08:00
break
case NodeTypes.JS_FUNCTION_EXPRESSION:
genFunctionExpression(node, context)
break
case NodeTypes.JS_SEQUENCE_EXPRESSION:
genSequenceExpression(node, context)
break
case NodeTypes.JS_CONDITIONAL_EXPRESSION:
genConditionalExpression(node, context)
break
2019-10-19 09:51:34 +08:00
case NodeTypes.JS_CACHE_EXPRESSION:
genCacheExpression(node, context)
break
// SSR only types
case NodeTypes.JS_BLOCK_STATEMENT:
!__BROWSER__ && genNodeList(node.body, context, true)
break
case NodeTypes.JS_TEMPLATE_LITERAL:
!__BROWSER__ && genTemplateLiteral(node, context)
break
case NodeTypes.JS_IF_STATEMENT:
!__BROWSER__ && genIfStatement(node, context)
break
2019-09-29 02:15:10 +08:00
/* istanbul ignore next */
2019-09-23 14:52:54 +08:00
default:
if (__DEV__) {
2019-09-23 14:52:54 +08:00
assert(false, `unhandled codegen node type: ${(node as any).type}`)
// make sure we exhaust all possible types
const exhaustiveCheck: never = node
return exhaustiveCheck
}
}
}
function genText(
node: TextNode | SimpleExpressionNode,
context: CodegenContext
) {
context.push(JSON.stringify(node.content), node)
}
function genExpression(node: SimpleExpressionNode, context: CodegenContext) {
const { content, isStatic } = node
context.push(isStatic ? JSON.stringify(content) : content, node)
}
function genInterpolation(node: InterpolationNode, context: CodegenContext) {
const { push, helper } = context
2020-01-27 06:35:21 +08:00
push(`${helper(TO_DISPLAY_STRING)}(`)
genNode(node.content, context)
push(`)`)
}
function genCompoundExpression(
node: CompoundExpressionNode,
context: CodegenContext
) {
for (let i = 0; i < node.children!.length; i++) {
const child = node.children![i]
if (isString(child)) {
context.push(child)
} else {
genNode(child, context)
}
2019-09-23 14:52:54 +08:00
}
2019-09-23 04:50:57 +08:00
}
function genExpressionAsPropertyKey(
node: ExpressionNode,
context: CodegenContext
) {
2019-09-24 09:22:52 +08:00
const { push } = context
if (node.type === NodeTypes.COMPOUND_EXPRESSION) {
2019-09-24 09:22:52 +08:00
push(`[`)
genCompoundExpression(node, context)
push(`]`)
} else if (node.isStatic) {
2019-09-23 04:50:57 +08:00
// only quote keys if necessary
const text = isSimpleIdentifier(node.content)
? node.content
: JSON.stringify(node.content)
2019-09-24 09:22:52 +08:00
push(text, node)
2019-09-23 04:50:57 +08:00
} else {
push(`[${node.content}]`, node)
2019-09-23 14:52:54 +08:00
}
}
function genComment(node: CommentNode, context: CodegenContext) {
2019-09-25 03:49:02 +08:00
if (__DEV__) {
const { push, helper } = context
push(`${helper(CREATE_COMMENT)}(${JSON.stringify(node.content)})`, node)
2019-09-25 03:49:02 +08:00
}
}
2019-09-23 04:50:57 +08:00
// JavaScript
function genCallExpression(node: CallExpression, context: CodegenContext) {
const callee = isString(node.callee)
? node.callee
: context.helper(node.callee)
context.push(callee + `(`, node)
genNodeList(node.arguments, context)
2019-09-23 04:50:57 +08:00
context.push(`)`)
}
function genObjectExpression(node: ObjectExpression, context: CodegenContext) {
const { push, indent, deindent, newline } = context
2019-09-23 04:50:57 +08:00
const { properties } = node
if (!properties.length) {
push(`{}`, node)
return
}
const multilines =
properties.length > 1 ||
((!__BROWSER__ || __DEV__) &&
properties.some(p => p.value.type !== NodeTypes.SIMPLE_EXPRESSION))
push(multilines ? `{` : `{ `)
2019-09-23 04:50:57 +08:00
multilines && indent()
for (let i = 0; i < properties.length; i++) {
const { key, value } = properties[i]
2019-09-23 04:50:57 +08:00
// key
genExpressionAsPropertyKey(key, context)
push(`: `)
// value
2019-09-26 00:39:46 +08:00
genNode(value, context)
2019-09-23 04:50:57 +08:00
if (i < properties.length - 1) {
2019-09-25 04:35:01 +08:00
// will only reach this if it's multilines
push(`,`)
newline()
2019-09-23 04:50:57 +08:00
}
}
multilines && deindent()
2019-11-16 05:47:55 +08:00
push(multilines ? `}` : ` }`)
2019-09-23 04:50:57 +08:00
}
function genArrayExpression(node: ArrayExpression, context: CodegenContext) {
genNodeListAsArray(node.elements, context)
}
function genFunctionExpression(
node: FunctionExpression,
context: CodegenContext
) {
const { push, indent, deindent, scopeId, mode } = context
const { params, returns, body, newline, isSlot } = node
// slot functions also need to push scopeId before rendering its content
const genScopeId =
!__BROWSER__ && isSlot && scopeId != null && mode !== 'function'
if (genScopeId) {
push(`withId(`)
}
push(`(`, node)
if (isArray(params)) {
genNodeList(params, context)
} else if (params) {
genNode(params, context)
}
push(`) => `)
if (newline || body) {
push(`{`)
indent()
}
if (returns) {
if (newline) {
push(`return `)
}
if (isArray(returns)) {
genNodeListAsArray(returns, context)
} else {
genNode(returns, context)
}
} else if (body) {
genNode(body, context)
}
if (newline || body) {
deindent()
push(`}`)
}
if (genScopeId) {
push(`)`)
}
}
function genConditionalExpression(
node: ConditionalExpression,
context: CodegenContext
) {
const { test, consequent, alternate } = node
const { push, indent, deindent, newline } = context
if (test.type === NodeTypes.SIMPLE_EXPRESSION) {
const needsParens = !isSimpleIdentifier(test.content)
needsParens && push(`(`)
genExpression(test, context)
needsParens && push(`)`)
} else {
push(`(`)
genCompoundExpression(test, context)
push(`)`)
}
indent()
context.indentLevel++
push(`? `)
genNode(consequent, context)
context.indentLevel--
newline()
push(`: `)
const isNested = alternate.type === NodeTypes.JS_CONDITIONAL_EXPRESSION
if (!isNested) {
context.indentLevel++
}
genNode(alternate, context)
if (!isNested) {
context.indentLevel--
}
deindent(true /* without newline */)
}
function genSequenceExpression(
node: SequenceExpression,
context: CodegenContext
) {
context.push(`(`)
genNodeList(node.expressions, context)
context.push(`)`)
}
2019-10-19 09:51:34 +08:00
function genCacheExpression(node: CacheExpression, context: CodegenContext) {
const { push, helper, indent, deindent, newline } = context
push(`_cache[${node.index}] || (`)
if (node.isVNode) {
indent()
push(`${helper(SET_BLOCK_TRACKING)}(-1),`)
newline()
}
push(`_cache[${node.index}] = `)
2019-10-19 09:51:34 +08:00
genNode(node.value, context)
if (node.isVNode) {
push(`,`)
newline()
push(`${helper(SET_BLOCK_TRACKING)}(1),`)
newline()
push(`_cache[${node.index}]`)
deindent()
}
push(`)`)
2019-10-19 09:51:34 +08:00
}
function genTemplateLiteral(node: TemplateLiteral, context: CodegenContext) {
const { push } = context
push('`')
for (let i = 0; i < node.elements.length; i++) {
const e = node.elements[i]
if (isString(e)) {
push(e.replace(/`/g, '\\`'))
} else {
push('${')
genNode(e, context)
push('}')
}
}
push('`')
}
function genIfStatement(node: IfStatement, context: CodegenContext) {
const { push, indent, deindent } = context
const { test, consequent, alternate } = node
push(`if (`)
genNode(test, context)
push(`) {`)
indent()
genNode(consequent, context)
deindent()
push(`}`)
if (alternate) {
push(` else `)
if (alternate.type === NodeTypes.JS_IF_STATEMENT) {
genIfStatement(alternate, context)
} else {
push(`{`)
indent()
genNode(alternate, context)
deindent()
push(`}`)
}
}
}