vue3-core/packages/compiler-vapor/src/generate.ts

569 lines
15 KiB
TypeScript

import {
type CodegenOptions,
type CodegenResult,
type Position,
type SourceLocation,
NewlineType,
advancePositionWithMutation,
locStub,
BindingTypes,
createSimpleExpression,
walkIdentifiers,
advancePositionWithClone,
} from '@vue/compiler-dom'
import {
type IRDynamicChildren,
type RootIRNode,
type SetPropIRNode,
type IRExpression,
type OperationNode,
type VaporHelper,
type SetEventIRNode,
type WithDirectiveIRNode,
type SetTextIRNode,
type SetHtmlIRNode,
type CreateTextNodeIRNode,
type InsertNodeIRNode,
type PrependNodeIRNode,
type AppendNodeIRNode,
IRNodeTypes,
} from './ir'
import { SourceMapGenerator } from 'source-map-js'
import { camelize, isString } from '@vue/shared'
import type { Identifier } from '@babel/types'
// remove when stable
// @ts-expect-error
function checkNever(x: never): never {}
export interface CodegenContext extends Required<CodegenOptions> {
source: string
code: string
line: number
column: number
offset: number
indentLevel: number
map?: SourceMapGenerator
push(
code: string,
newlineIndex?: number,
loc?: SourceLocation,
name?: string,
): void
pushWithNewline(
code: string,
newlineIndex?: number,
loc?: SourceLocation,
name?: string,
): void
indent(): void
deindent(): void
newline(): void
helpers: Set<string>
vaporHelpers: Set<string>
helper(name: string): string
vaporHelper(name: string): string
}
function createCodegenContext(
ir: RootIRNode,
{
mode = 'function',
prefixIdentifiers = mode === 'module',
sourceMap = false,
filename = `template.vue.html`,
scopeId = null,
optimizeImports = false,
runtimeGlobalName = `Vue`,
runtimeModuleName = `vue`,
ssrRuntimeModuleName = 'vue/server-renderer',
ssr = false,
isTS = false,
inSSR = false,
inline = false,
bindingMetadata = {},
}: CodegenOptions,
) {
const { helpers, vaporHelpers } = ir
const context: CodegenContext = {
mode,
prefixIdentifiers,
sourceMap,
filename,
scopeId,
optimizeImports,
runtimeGlobalName,
runtimeModuleName,
ssrRuntimeModuleName,
ssr,
isTS,
inSSR,
bindingMetadata,
inline,
source: ir.source,
code: ``,
column: 1,
line: 1,
offset: 0,
indentLevel: 0,
helpers,
vaporHelpers,
helper(name: string) {
helpers.add(name)
return `_${name}`
},
vaporHelper(name: VaporHelper) {
vaporHelpers.add(name)
return `_${name}`
},
push(code, newlineIndex = NewlineType.None, loc, name) {
context.code += code
if (!__BROWSER__ && context.map) {
if (loc) addMapping(loc.start, name)
if (newlineIndex === NewlineType.Unknown) {
// multiple newlines, full iteration
advancePositionWithMutation(context, code)
} else {
// fast paths
context.offset += code.length
if (newlineIndex === NewlineType.None) {
// no newlines; fast path to avoid newline detection
if (__TEST__ && code.includes('\n')) {
throw new Error(
`CodegenContext.push() called newlineIndex: none, but contains` +
`newlines: ${code.replace(/\n/g, '\\n')}`,
)
}
context.column += code.length
} else {
// single newline at known index
if (newlineIndex === NewlineType.End) {
newlineIndex = code.length - 1
}
if (
__TEST__ &&
(code.charAt(newlineIndex) !== '\n' ||
code.slice(0, newlineIndex).includes('\n') ||
code.slice(newlineIndex + 1).includes('\n'))
) {
throw new Error(
`CodegenContext.push() called with newlineIndex: ${newlineIndex} ` +
`but does not conform: ${code.replace(/\n/g, '\\n')}`,
)
}
context.line++
context.column = code.length - newlineIndex
}
}
if (loc && loc !== locStub) {
addMapping(loc.end)
}
}
},
pushWithNewline(code, newlineIndex, node) {
context.newline()
context.push(code, newlineIndex, node)
},
indent() {
++context.indentLevel
},
deindent() {
--context.indentLevel
},
newline() {
newline(context.indentLevel)
},
}
function newline(n: number) {
context.push(`\n${` `.repeat(n)}`, NewlineType.Start)
}
function addMapping(loc: Position, name: string | null = null) {
// we use the private property to directly add the mapping
// because the addMapping() implementation in source-map-js has a bunch of
// unnecessary arg and validation checks that are pure overhead in our case.
const { _names, _mappings } = context.map!
if (name !== null && !_names.has(name)) _names.add(name)
_mappings.add({
originalLine: loc.line,
originalColumn: loc.column - 1, // source-map column is 0 based
generatedLine: context.line,
generatedColumn: context.column - 1,
source: filename,
// @ts-ignore it is possible to be null
name,
})
}
if (!__BROWSER__ && sourceMap) {
// lazy require source-map implementation, only in non-browser builds
context.map = new SourceMapGenerator()
context.map.setSourceContent(filename, context.source)
context.map._sources.add(filename)
}
return context
}
// IR -> JS codegen
export function generate(
ir: RootIRNode,
options: CodegenOptions = {},
): CodegenResult {
const ctx = createCodegenContext(ir, options)
const { push, pushWithNewline, indent, deindent, newline } = ctx
const { vaporHelper, helpers, vaporHelpers } = ctx
const functionName = 'render'
const isSetupInlined = !!options.inline
if (isSetupInlined) {
push(`(() => {`)
} else {
// placeholder for preamble
newline()
pushWithNewline(`export function ${functionName}(_ctx) {`)
}
indent()
ir.template.forEach((template, i) => {
if (template.type === IRNodeTypes.TEMPLATE_FACTORY) {
// TODO source map?
pushWithNewline(
`const t${i} = ${vaporHelper('template')}(${JSON.stringify(
template.template,
)})`,
)
} else {
// fragment
pushWithNewline(
`const t0 = ${vaporHelper('fragment')}()\n`,
NewlineType.End,
)
}
})
{
pushWithNewline(`const n${ir.dynamic.id} = t0()`)
const children = genChildren(ir.dynamic.children)
if (children) {
pushWithNewline(
`const ${children} = ${vaporHelper('children')}(n${ir.dynamic.id})`,
)
}
for (const oper of ir.operation.filter(
(oper): oper is WithDirectiveIRNode =>
oper.type === IRNodeTypes.WITH_DIRECTIVE,
)) {
genWithDirective(oper, ctx)
}
for (const operation of ir.operation) {
genOperation(operation, ctx)
}
for (const { operations } of ir.effect) {
pushWithNewline(`${vaporHelper('effect')}(() => {`)
indent()
for (const operation of operations) {
genOperation(operation, ctx)
}
deindent()
pushWithNewline('})')
}
// TODO multiple-template
// TODO return statement in IR
pushWithNewline(`return n${ir.dynamic.id}`)
}
deindent()
newline()
if (isSetupInlined) {
push('})()')
} else {
push('}')
}
let preamble = ''
if (vaporHelpers.size)
// TODO: extract import codegen
preamble = `import { ${[...vaporHelpers]
.map((h) => `${h} as _${h}`)
.join(', ')} } from 'vue/vapor';`
if (helpers.size)
preamble = `import { ${[...helpers]
.map((h) => `${h} as _${h}`)
.join(', ')} } from 'vue';`
if (!isSetupInlined) {
ctx.code = preamble + ctx.code
}
return {
code: ctx.code,
ast: ir as any,
preamble,
map: ctx.map ? ctx.map.toJSON() : undefined,
}
}
function genChildren(children: IRDynamicChildren) {
let code = ''
// TODO
let offset = 0
for (const [index, child] of Object.entries(children)) {
const childrenLength = Object.keys(child.children).length
if (child.ghost && child.placeholder === null && childrenLength === 0) {
offset--
continue
}
code += ` ${Number(index) + offset}: [`
const id = child.ghost ? child.placeholder : child.id
if (id !== null) code += `n${id}`
const childrenString = childrenLength && genChildren(child.children)
if (childrenString) code += `, ${childrenString}`
code += '],'
}
if (!code) return ''
return `{${code}}`
}
function genOperation(oper: OperationNode, context: CodegenContext) {
// TODO: cache old value
switch (oper.type) {
case IRNodeTypes.SET_PROP:
return genSetProp(oper, context)
case IRNodeTypes.SET_TEXT:
return genSetText(oper, context)
case IRNodeTypes.SET_EVENT:
return genSetEvent(oper, context)
case IRNodeTypes.SET_HTML:
return genSetHtml(oper, context)
case IRNodeTypes.CREATE_TEXT_NODE:
return genCreateTextNode(oper, context)
case IRNodeTypes.INSERT_NODE:
return genInsertNode(oper, context)
case IRNodeTypes.PREPEND_NODE:
return genPrependNode(oper, context)
case IRNodeTypes.APPEND_NODE:
return genAppendNode(oper, context)
case IRNodeTypes.WITH_DIRECTIVE:
// generated, skip
return
default:
return checkNever(oper)
}
}
function genSetProp(oper: SetPropIRNode, context: CodegenContext) {
const { push, pushWithNewline, vaporHelper } = context
pushWithNewline(`${vaporHelper('setAttr')}(n${oper.element}, `)
genExpression(oper.name, context)
push(`, undefined, `)
genExpression(oper.value, context)
push(')')
}
function genSetText(oper: SetTextIRNode, context: CodegenContext) {
const { push, pushWithNewline, vaporHelper } = context
pushWithNewline(`${vaporHelper('setText')}(n${oper.element}, undefined, `)
genExpression(oper.value, context)
push(')')
}
function genSetHtml(oper: SetHtmlIRNode, context: CodegenContext) {
const { push, pushWithNewline, vaporHelper } = context
pushWithNewline(`${vaporHelper('setHtml')}(n${oper.element}, undefined, `)
genExpression(oper.value, context)
push(')')
}
function genCreateTextNode(
oper: CreateTextNodeIRNode,
context: CodegenContext,
) {
const { push, pushWithNewline, vaporHelper } = context
pushWithNewline(`const n${oper.id} = ${vaporHelper('createTextNode')}(`)
genExpression(oper.value, context)
push(')')
}
function genInsertNode(oper: InsertNodeIRNode, context: CodegenContext) {
const { pushWithNewline, vaporHelper } = context
const elements = ([] as number[]).concat(oper.element)
let element = elements.map((el) => `n${el}`).join(', ')
if (elements.length > 1) element = `[${element}]`
pushWithNewline(
`${vaporHelper('insert')}(${element}, n${
oper.parent
}${`, n${oper.anchor}`})`,
)
}
function genPrependNode(oper: PrependNodeIRNode, context: CodegenContext) {
const { pushWithNewline, vaporHelper } = context
pushWithNewline(
`${vaporHelper('prepend')}(n${oper.parent}, ${oper.elements
.map((el) => `n${el}`)
.join(', ')})`,
)
}
function genAppendNode(oper: AppendNodeIRNode, context: CodegenContext) {
const { pushWithNewline, vaporHelper } = context
pushWithNewline(
`${vaporHelper('append')}(n${oper.parent}, ${oper.elements
.map((el) => `n${el}`)
.join(', ')})`,
)
}
function genSetEvent(oper: SetEventIRNode, context: CodegenContext) {
const { vaporHelper, push, pushWithNewline } = context
pushWithNewline(`${vaporHelper('on')}(n${oper.element}, `)
// second arg: event name
genExpression(oper.name, context)
push(', ')
const { keys, nonKeys, options } = oper.modifiers
if (keys.length) {
push(`${vaporHelper('withKeys')}(`)
}
if (nonKeys.length) {
push(`${vaporHelper('withModifiers')}(`)
}
genExpression(oper.value, context)
if (nonKeys.length) {
push(`, ${genArrayExpression(nonKeys)})`)
}
if (keys.length) {
push(`, ${genArrayExpression(keys)})`)
}
if (options.length) {
push(`, { ${options.map((v) => `${v}: true`).join(', ')} }`)
}
push(')')
}
function genWithDirective(oper: WithDirectiveIRNode, context: CodegenContext) {
const { push, pushWithNewline, vaporHelper, bindingMetadata } = context
// TODO merge directive for the same node
pushWithNewline(`${vaporHelper('withDirectives')}(n${oper.element}, [[`)
// TODO resolve directive
const directiveReference = camelize(`v-${oper.name}`)
if (bindingMetadata[directiveReference]) {
const directiveExpression = createSimpleExpression(directiveReference)
directiveExpression.ast = null
genExpression(directiveExpression, context)
}
if (oper.binding) {
push(', ')
genExpression(oper.binding, context)
}
push(']])')
return
}
// TODO: other types (not only string)
function genArrayExpression(elements: string[]) {
return `[${elements.map((it) => JSON.stringify(it)).join(', ')}]`
}
function genExpression(node: IRExpression, context: CodegenContext): void {
const { push } = context
if (isString(node)) return push(node)
const { content: rawExpr, ast, isStatic, loc } = node
if (__BROWSER__) {
return push(rawExpr)
}
if (
!context.prefixIdentifiers ||
!node.content.trim() ||
// there was a parsing error
ast === false
) {
return push(rawExpr, NewlineType.None, node.loc)
}
if (isStatic) {
// TODO
return push(JSON.stringify(rawExpr))
}
if (ast === null) {
// the expression is a simple identifier
return genIdentifier(rawExpr, context, loc)
}
const ids: Identifier[] = []
walkIdentifiers(
ast!,
(id) => {
ids.push(id)
},
true,
)
ids.sort((a, b) => a.start! - b.start!)
ids.forEach((id, i) => {
// range is offset by -1 due to the wrapping parens when parsed
const start = id.start! - 1
const end = id.end! - 1
const last = ids[i - 1]
const leadingText = rawExpr.slice(last ? last.end! - 1 : 0, start)
if (leadingText.length) push(leadingText, NewlineType.Unknown)
const source = rawExpr.slice(start, end)
genIdentifier(source, context, {
start: advancePositionWithClone(node.loc.start, source, start),
end: advancePositionWithClone(node.loc.start, source, end),
source,
})
if (i === ids.length - 1 && end < rawExpr.length) {
push(rawExpr.slice(end), NewlineType.Unknown)
}
})
}
function genIdentifier(
id: string,
{ inline, bindingMetadata, vaporHelper, push }: CodegenContext,
loc?: SourceLocation,
): void {
let name: string | undefined = id
if (inline) {
switch (bindingMetadata[id]) {
case BindingTypes.SETUP_REF:
name = id += '.value'
break
case BindingTypes.SETUP_MAYBE_REF:
id = `${vaporHelper('unref')}(${id})`
name = undefined
break
}
} else {
id = `_ctx.${id}`
}
push(id, NewlineType.None, loc, name)
}