compiler-core
compiler-dom // 浏览器
compiler-sfc // 单文件组件
compiler-ssr // 服务端渲染

e (s.length) {
 if (startsWith(s, '{{')) {
  // 如果以 '{{' 开头
  node = parseInterpolation(context, mode)
 } else if (s[0] === '<') {
  // 以 < 标签开头
  if (s[1] === '!') {
   if (startsWith(s, '<!--')) {
    // 注释
    node = parseComment(context)
   } else if (startsWith(s, '<!DOCTYPE')) {
    // 文档声明，当成注释处理
    node = parseBogusComment(context)
   }
  } else if (s[1] === '/') {
   // 结束标签
   parseTag(context, TagType.End, parent)
  } else if (/[a-z]/i.test(s[1])) {
   // 开始标签
   node = parseElement(context, ancestors)
  }
 } else {
  // 普通文本节点
  node = parseText(context, mode)
 }
}

<div name="test">
 <p></p>
</div>

name="test">
 <p></p>
</div>

 <p></p>
</div>

></p>
</div>

</div>

<!-- 所有字符串已经解析完 -->

rt interface BaseElementNode extends Node {
 type: NodeTypes.ELEMENT // 类型
 ns: Namespace // 命名空间 默认为 HTML，即 0
 tag: string // 标签名
 tagType: ElementTypes // 元素类型
 isSelfClosing: boolean // 是否是自闭合标签 例如 <br/> <hr/>
 props: Array<AttributeNode | DirectiveNode> // props 属性，包含 HTML 属性和指令
 children: TemplateChildNode[] // 字节点
}

<div name="test">
 <!-- 这是注释 -->
 <p>{{ test }}</p>
 一个文本节点
 <div>good job!</div>
</div>

1. [div] // div 入栈
2. [div, p] // p 入栈
3. [div] // p 出栈
4. [div, div] // div 入栈
5. [div] // div 出栈
6. [] // 最后一个 div 出栈，模板字符串已解析完，这时栈为空

ROOT, // 根节点 0
ELEMENT, // 元素节点 1
TEXT, // 文本节点 2
COMMENT, // 注释节点 3
SIMPLE_EXPRESSION, // 表达式 4
INTERPOLATION, // 双花插值 {{ }} 5
ATTRIBUTE, // 属性 6
DIRECTIVE, // 指令 7

 <!-- 这是注释 -->
 <p>{{ test }}</p>
 一个文本节点
 <div>good job!</div>
</div>

turn {
 type: NodeTypes.INTERPOLATION, // 双花插值类型
 content: {
 type: NodeTypes.SIMPLE_EXPRESSION,
 isStatic: false, // 非静态节点
 isConstant: false,
 content,
 loc: getSelection(context, innerStart, innerEnd)
 },
 loc: getSelection(context, start)
}

t const enum ElementTypes {
 ELEMENT, // 0 元素节点
 COMPONENT, // 1 组件
 SLOT, // 2 插槽
 TEMPLATE // 3 模板
}

{ onClick: _cache[0] || (_cache[0] = e => _ctx.foo(e)) }

enum PatchFlags {
 // 动态文本节点
 TEXT = 1,

 // 动态 class
 CLASS = 1 << 1, // 2

 // 动态 style
 STYLE = 1 << 2, // 4

 // 动态属性，但不包含类名和样式
 // 如果是组件，则可以包含类名和样式
 PROPS = 1 << 3, // 8

 // 具有动态 key 属性，当 key 改变时，需要进行完整的 diff 比较。
 FULL_PROPS = 1 << 4, // 16

 // 带有监听事件的节点
 HYDRATE_EVENTS = 1 << 5, // 32

 // 一个不会改变子节点顺序的 fragment
 STABLE_FRAGMENT = 1 << 6, // 64

 // 带有 key 属性的 fragment 或部分子字节有 key
 KEYED_FRAGMENT = 1 << 7, // 128

 // 子节点没有 key 的 fragment
 UNKEYED_FRAGMENT = 1 << 8, // 256

 // 一个节点只会进行非 props 比较
 NEED_PATCH = 1 << 9, // 512

 // 动态 slot
 DYNAMIC_SLOTS = 1 << 10, // 1024

 // 静态节点
 HOISTED = -1,

 // 指示在 diff 过程应该要退出优化模式
 BAIL = -2
}

helpers: new Set(),
hoists: [],

// methods
helper(name) {
 context.helpers.add(name)
 return name
},
helperString(name) {
 return `_${helperNameMap[context.helper(name)]}`
},
hoist(exp) {
 context.hoists.push(exp)
 const identifier = createSimpleExpression(
 `_hoisted_${context.hoists.length}`,
 false,
 exp.loc,
 true
 )
 identifier.hoisted = exp
 return identifier
},

node.codegenNode = createVNodeCall(
 context,
 vnodeTag,
 vnodeProps,
 vnodeChildren,
 vnodePatchFlag,
 vnodeDynamicProps,
 vnodeDirectives,
 !!shouldUseBlock,
 false /* disableTracking */,
 node.loc
)

// createVNodeCall() 内部执行过程，已删除多余的代码
context.helper(CREATE_VNODE)

return {
 type: NodeTypes.VNODE_CALL,
 tag,
 props,
 children,
 patchFlag,
 dynamicProps,
 directives,
 isBlock,
 disableTracking,
 loc
}

<div name="test"> // 属性静态节点
 <!-- 这是注释 -->
 <p>{{ test }}</p>
 一个文本节点 // 静态节点
 <div>good job!</div> // 静态节点
</div>

// codegen
VNODE_CALL, // 13
JS_CALL_EXPRESSION, // 14
JS_OBJECT_EXPRESSION, // 15
JS_PROPERTY, // 16
JS_ARRAY_EXPRESSION, // 17
JS_FUNCTION_EXPRESSION, // 18
JS_CONDITIONAL_EXPRESSION, // 19
JS_CACHE_EXPRESSION, // 20

{
 type: NodeTypes.VNODE_CALL,
 tag,
 props,
 children,
 patchFlag,
 dynamicProps,
 directives,
 isBlock,
 disableTracking,
 loc
}

nst _Vue = Vue
const { createVNode: _createVNode, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode } = _Vue

const _hoisted_1 = { name: "test" }
const _hoisted_2 = /*#__PURE__*/_createTextVNode(" 一个文本节点 ")
const _hoisted_3 = /*#__PURE__*/_createVNode("div", null, "good job!", -1 /* HOISTED */)

return function render(_ctx, _cache) {
 with (_ctx) {
 const { createCommentVNode: _createCommentVNode, toDisplayString: _toDisplayString, createVNode: _createVNode, createTextVNode: _createTextVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue

 return (_openBlock(), _createBlock("div", _hoisted_1, [
  _createCommentVNode(" 这是注释 "),
  _createVNode("p", null, _toDisplayString(test), 1 /* TEXT */),
  _hoisted_2,
  _hoisted_3
 ]))
 }
}

<div name="test">
 <!-- 这是注释 -->
 <p>{{ test }}</p>
 一个文本节点
 <div>good job!</div>
</div>

n val == null
 "p", null, _toDisplayString(test), 1 /* TEXT */) 最后一个参数 1 就是 transform 添加的 patchflag 了。

帮助函数 helpers
在 transform、codegen 这两个阶段，我们都能看到 helpers 的影子，到底 helpers 是干什么用的？


// Name mapping for runtime helpers that need to be imported from 'vue' in
// generated code. Make sure these are correctly exported in the runtime!
// Using `any` here because TS doesn't allow symbols as index type.
export const helperNameMap: any = {
 [FRAGMENT]: `Fragment`,
 [TELEPORT]: `Teleport`,
 [SUSPENSE]: `Suspense`,
 [KEEP_ALIVE]: `KeepAlive`,
 [BASE_TRANSITION]: `BaseTransition`,
 [OPEN_BLOCK]: `openBlock`,
 [CREATE_BLOCK]: `createBlock`,
 [CREATE_VNODE]: `createVNode`,
 [CREATE_COMMENT]: `createCommentVNode`,
 [CREATE_TEXT]: `createTextVNode`,
 [CREATE_STATIC]: `createStaticVNode`,
 [RESOLVE_COMPONENT]: `resolveComponent`,
 [RESOLVE_DYNAMIC_COMPONENT]: `resolveDynamicComponent`,
 [RESOLVE_DIRECTIVE]: `resolveDirective`,
 [WITH_DIRECTIVES]: `withDirectives`,
 [RENDER_LIST]: `renderList`,
 [RENDER_SLOT]: `renderSlot`,
 [CREATE_SLOTS]: `createSlots`,
 [TO_DISPLAY_STRING]: `toDisplayString`,
 [MERGE_PROPS]: `mergeProps`,
 [TO_HANDLERS]: `toHandlers`,
 [CAMELIZE]: `camelize`,
 [CAPITALIZE]: `capitalize`,
 [SET_BLOCK_TRACKING]: `setBlockTracking`,
 [PUSH_SCOPE_ID]: `pushScopeId`,
 [POP_SCOPE_ID]: `popScopeId`,
 [WITH_SCOPE_ID]: `withScopeId`,
 [WITH_CTX]: `withCtx`
}

export function registerRuntimeHelpers(helpers: any) {
 Object.getOwnPropertySymbols(helpers).forEach(s => {
 helperNameMap[s] = helpers[s]
 })
}


其实帮助函数就是在代码生成时从 Vue 引入的一些函数，以便让程序正常执行，从上面生成的代码中就可以看出来。而 helperNameMap 是默认的映射表名称，这些名称就是要从 Vue 引入的函数名称。
另外，我们还能看到一个注册函数 registerRuntimeHelpers(helpers: any() ，它是干什么用的呢？
我们知道编译模块 compiler-core 是平台无关的，而 compiler-dom 是浏览器相关的编译模块。为了能在浏览器正常运行 Vue 程序，就得把浏览器相关的 Vue 数据和函数导入进来。 registerRuntimeHelpers(helpers: any() 正是用来做这件事的，从 compiler-dom 的 runtimeHelpers.ts 文件就能看出来：


registerRuntimeHelpers({
 [V_MODEL_RADIO]: `vModelRadio`,
 [V_MODEL_CHECKBOX]: `vModelCheckbox`,
 [V_MODEL_TEXT]: `vModelText`,
 [V_MODEL_SELECT]: `vModelSelect`,
 [V_MODEL_DYNAMIC]: `vModelDynamic`,
 [V_ON_WITH_MODIFIERS]: `withModifiers`,
 [V_ON_WITH_KEYS]: `withKeys`,
 [V_SHOW]: `vShow`,
 [TRANSITION]: `Transition`,
 [TRANSITION_GROUP]: `TransitionGroup`
})


它运行 registerRuntimeHelpers(helpers: any() ，往映射表注入了浏览器相关的部分函数。
helpers 是怎么使用的呢"htmlcode">

// 这是 module 模式
`import { ${ast.helpers
 .map(s => `${helperNameMap[s]} as _${helperNameMap[s]}`)
 .join(', ')} } from ${JSON.stringify(runtimeModuleName)}\n`


如何生成代码？
从 codegen.ts 文件中，可以看到很多代码生成函数：


generate() // 代码生成入口文件
genFunctionExpression() // 生成函数表达式
genNode() // 生成 Vnode 节点
...


生成代码则是根据不同的 AST 节点调用不同的代码生成函数，最终将代码字符串拼在一起，输出一个完整的代码字符串。
老规矩，还是看一个例子：


t _hoisted_1 = { name: "test" }
const _hoisted_2 = /*#__PURE__*/_createTextVNode(" 一个文本节点 ")
const _hoisted_3 = /*#__PURE__*/_createVNode("div", null, "good job!", -1 /* HOISTED */)


看一下这段代码是怎么生成的，首先执行 genHoists(ast.hoists, context) ，将 transform 生成的静态节点数组 hoists 作为第一个参数。 genHoists() 内部实现：


hoists.forEach((exp, i) => {
 if (exp) {
  push(`const _hoisted_${i + 1} = `);
  genNode(exp, context);
  newline();
 }
})


从上述代码可以看到，遍历 hoists 数组，调用 genNode(exp, context) 。 genNode() 根据不同的 type 执行不同的函数。


st _hoisted_1 = { name: "test" }


这一行代码中的 const _hoisted_1 = 由 genHoists() 生成， { name: "test" } 由 genObjectExpression() 生成。 同理，剩下的两行代码生成过程也是如此，只是最终调用的函数不同。