Vue3 源码头脑风暴之 3 ☞compiler-core - transform + codegen

feat: createRootCodegen() for pure text · gcclll/stb-vue-next@61ce406

只增加了针对非 ELEMENT 类型或者孩子节点没有 codegenNode 的情况实现(当前 commit 最简化)。

当 root.children 只有一个孩子节点且该节点没有自己的 codegenNode 时候：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

function createRootCodegen(root: RootNode, context: TransformContext) {
  // const { helper } = context
  const { children } = root
  if (children.length === 1) {
    // 只有一个孩子节点，直接取该孩子节点 的 codegenNode
    const child = children[0]
    if (isSingleElementRoot(root, child) && child.codegenNode) {
      // 当 root 节点下只有一个 element 元素的孩子节点时，不进行提升
    } else {
      // - single <slot/>, IfNode, ForNode: already blocks.
      // - single text node: always patched.
      // root codegen falls through via genNode()

      root.codegenNode = child
    }
  } else if (children.length > 1) {
    // TODO
  } else {
    // no children = noop, codegen will return null.
  }
}

测试

1
2
3
4
5
6

const {
  baseCompile
} = require(process.env.PWD + '/../../static/js/vue/compiler-core.global.js')

const res = baseCompile(`pure text`)
console.log(res)

{
  type: 0,
  children: [ { type: 2, content: 'pure text', loc: [Object] } ],
  helpers: [],
  components: [],
  directives: [],
  hoists: [],
  imports: [],
  cached: 0,
  temps: 0,
  codegenNode: {
    type: 2,
    content: 'pure text',
    loc: { start: [Object], end: [Object], source: 'pure text' }
  },
  loc: {
    start: { column: 1, line: 1, offset: 0 },
    end: { column: 10, line: 1, offset: 9 },
    source: 'pure text'
  }
}

注意 codegenNode 其实就是 root.children[0] 节点本身。

feat: transformText function · gcclll/stb-vue-next@b9f3cb7

1. 必须是文本节点或者类型是组合表达式类型(COMPOUND_EXPRESSION)

2. patch flag 处理

3. 构造 TEXT_CALL 类型节点

4. codegenNode -> createCallExpression

codegen 阶段目的是将 codegenNode 解析成 Render 函数的一部分。

1. f6d5271 add createCodegenContext()

   feat(add): codegen context creator · gcclll/stb-vue-next@f6d5271

   上下文对象创建函数，重点方法有两个(push(code, node) 和 helper(key))。

   FIX1: lint errors, fix: f6d5271 lint errors · gcclll/stb-vue-next@0ac8c2f

2. 2ef2699 增加 text codegen generator 实现

   feat: generate text codegen · gcclll/stb-vue-next@2ef2699

   该部分涉及到一个较为完整的 codegen generator 流程，所以增加内容较多，因此这里 不直接贴代码了，请点击上面 commit 链接查看实际增加的源码。

   处理流程：

   • preamble 处理，如果是 Node 环境需要通过 import { ...} from 'vue' 语法，如 果是浏览器环境使用 const { ... } = Vue 解构语法。

   • 是否使用 with() {} 作用域语法，默认是使用的

   • return ... 返回实际 render 函数返回结果，这里将返回最后被渲染的 DOM 结构。

   • genNode() 递归处理 ast 生成 render 函数的对应部分代码

3. 6b901f9 增加 node 环境或 module 环境处理(genModulePreamble)

   feat: module preamble · gcclll/stb-vue-next@6b901f9 modue preamble : export { ... } from 'vue' function preamble: const { ... } = Vue

重点增加的 genXxx 函数 genText(node, context) 专门用来处理文本节点的。

1
2
3
4
5
6

function genText(
  node: TextNode | SimpleExpressionNode,
  context: CodegenContext
) {
  context.push(JSON.stringify(node.content), node)
}

测试将分为两个部分，

1
2
3
4
5
6

const {
  baseCompile
} = require(process.env.PWD + '/../../static/js/vue/compiler-core.global.js')

const res = baseCompile(`pure text`)
console.log(res.code)

return function render(_ctx, _cache) {
  with (_ctx) {
    return "pure text"
  }
}
undefined

1
2
3
4
5
6
7

const {
  baseParse,
  baseCompile
} = require(process.env.PWD + '/../../static/js/vue/compiler-core.global.js')

const res = baseCompile(`pure text`, { mode: 'module' })
console.log(res.code)

return function render(_ctx, _cache) {
  return "pure text"
}
undefined

feat: utils for compiler-core · gcclll/stb-vue-next@9436d8f

相关正则： const memberExpRE = /^[A-Za-z_$][\w$]*(?:\s*\.\s*[A-Za-z_$][\w$]*|\[[^\]]+\])*$/

feat(add): resolveComponentType · gcclll/stb-vue-next@2265e46

解析出组件的类型，大体分为四类：

1. 动态组件： <component is="xx"> 或 <component v-is="xx">

2. 内置组件： Teleport, Transition, KeepAlive, Suspense

3. 用户组件： $setup[] 上的组件

4. 用户组件： context.components[] 上的组件

feat(add): transformElement function · gcclll/stb-vue-next@87339d2

普通标签的 transform codegenNode阶段。

1. add createVNodeCall() 函数，创建基本的 ELEMENT 类型节点 codegenNode

   根据 isBlock 参数决定使用 BLOCK 函数还是 VNODE 函数。

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

   export function createVNodeCall( context: TransformContext | null, tag: VNodeCall['tag'], props?: VNodeCall['props'], children?: VNodeCall['children'], patchFlag?: VNodeCall['patchFlag'], dynamicProps?: VNodeCall['dynamicProps'], directives?: VNodeCall['directives'], isBlock: VNodeCall['isBlock'] = false, disableTracking: VNodeCall['disableTracking'] = false, loc = locStub ): VNodeCall { if (context) { if (isBlock) { context.helper(OPEN_BLOCK) context.helper(CREATE_BLOCK) } else { context.helper(CREATE_VNODE) } } return { type: NodeTypes.VNODE_CALL, tag, props, children, patchFlag, dynamicProps, directives, isBlock, disableTracking, loc } }

2. add createObjectExpression() 函数

   1 2 3 4 5 6 7 8 9 10

   export function createObjectExpression( properties: ObjectExpression['properties'], loc: SourceLocation = locStub ): ObjectExpression { return { type: NodeTypes.JS_OBJECT_EXPRESSION, loc, properties } }

3. add getStaticType() 判断节点是否需要做静态提升处理

4. add transformElement: postTransformElement() 函数

5. add stringifyDynamicPropNames() 将属性转成数组结构

测试：

1
2
3
4
5
6
7
8

const {
  baseParse,
  baseCompile
} = require(process.env.PWD + '/../../static/js/vue/compiler-core.global.js')
 
const res = baseCompile(`<div></div>`)
console.log('root codegenNode: ', res.ast.codegenNode)
console.log(res.code)

root codegenNode:  undefined
const _Vue = Vue

return function render(_ctx, _cache) {
  with (_ctx) {
    const { createVNode : _createVNode } = _Vue

    return null
  }
}
undefined

正确结果：

ƒ render(_ctx, _cache) {
  with (_ctx) {
    const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue

    return (_openBlock(), _createBlock("div"))
  }
}

问题：

1. 根节点 codegenNode 为空

2. render 函数内没有 openBlock, createBlock 导出

3. return 后面没内容(这是 generator 范畴，此节不展开)

问题1，2都是在同一个地方处理的，因为当 ROOT 节点只有一个孩子节点的时候，不会用 CREATE_VNODE 创建，而是改用 CREATE_BLOCK，所以这两个问题一起处理

FIX 1,2: fix: no export open/create block function from Vue · gcclll/stb-vue-next@97cf290

修改： createRootCodegen(root: RootNode, context: TransformContext)

feat: element generator · gcclll/stb-vue-next@2f58786

路径：

1. VNODE_CALL ->

2. genVNodeCall() ->

3. genNodeList([], ctx) ->

   • string: push(node)

   • array: genNodeListAsArray(node, ctx)

   • other: genNode(node, ctx)

测试:

1
2
3
4
5
6
7
8

const {
  baseParse,
  baseCompile
} = require(process.env.PWD + '/../../static/js/vue/compiler-core.global.js')
 
const res = baseCompile(`<div></div>`)
console.log('root codegenNode: ', res.ast.codegenNode)
console.log(res.code)

root codegenNode:  {
  type: 13,
  tag: '"div"',
  props: undefined,
  children: undefined,
  patchFlag: undefined,
  dynamicProps: undefined,
  directives: undefined,
  isBlock: true,
  disableTracking: false,
  loc: {
    start: { column: 1, line: 1, offset: 0 },
    end: { column: 12, line: 1, offset: 11 },
    source: '<div></div>'
  }
}
const _Vue = Vue

return function render(_ctx, _cache) {
  with (_ctx) {
    const { createVNode : _createVNode, openBlock : _openBlock, createBlock : _createBlock } = _Vue

    return (_openBlock(), _createBlock("div"))
  }
}

feat: root.children has multi child · gcclll/stb-vue-next@05ca2f8 · GitHub

当有多个孩子节点的时候，会创建一个 fragment 将他们包起来。

FIX: 死循环， genNode(node.codegenNode, ctx)

测试：

1
2
3
4
5
6
7
8

const {
  baseParse,
  baseCompile
} = require(process.env.PWD + '/../../static/js/vue/compiler-core.global.js')
 
const res = baseCompile(`<div></div><div></div>`)
console.log(res.code)

const _Vue = Vue

return function render(_ctx, _cache) {
  with (_ctx) {
    const { createVNode : _createVNode, Fragment : _Fragment, openBlock : _openBlock, createBlock : _createBlock } = _Vue

    return (_openBlock(), _createBlock(_Fragment,null,[
      _createVNode("div"),
      _createVNode("div")
    ],64 /* STABLE_FRAGMENT */))
  }
}
undefined

FIX: 参数之间少了空格(feat: root.children has multi child · gcclll/stb-vue-next@05ca2f8)

正解：

const _Vue = Vue
const { createVNode: _createVNode } = _Vue

const _hoisted_1 = /*#__PURE__*/_createVNode("div", null, null, -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createVNode("div", null, null, -1 /* HOISTED */)

return function render(_ctx, _cache) {
  with (_ctx) {
    const { createVNode: _createVNode, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue

    return (_openBlock(), _createBlock(_Fragment, null, [
      _hoisted_1,
      _hoisted_2
    ], 64 /* STABLE_FRAGMENT */))
  }
}

正确答案中做了静态提升处理，代码在 transform() 函数中 hoistStatic(root, context) 的调用，会从 ROOT 节点开始遍历，将需要提升的节点进行提升处理。

feat: props generator · gcclll/stb-vue-next@e4acc0d

修改点：

1. add genExpressionAsPropertyKey() 生成属性 key 函数

   三种可能的属性名

   • 静态属性名: <div class="value"> -> { class: "value" }

   • 动态属性名: <div :[propName]="value" -> { [propName]: "value"}

   • 组合表达式属性名：TODO

     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

     // 生成对象的属性 key (可能是静态，动态) function genExpressionAsPropertyKey( node: ExpressionNode, context: CodegenContext ) { const { push } = context if (node.type === NodeTypes.COMPOUND_EXPRESSION) { // TODO 动态属性名或表达式 } else if (node.isStatic) { // only quote key if necessary const text = isSimpleIdentifier(node.content) ? node.content : JSON.stringify(node.content) push(text, node) } else { push(`[${node.content}]`, node) } }

2. add genObjectExpression() 将属性列表生成对象

   遍历节点的 node.properties 先生成 key(genExpressionAsPropertyKey(key)) 再生成 value(genNode(value)) 。

测试：

1
2
3
4
5
6
7
8

const {
  baseParse,
  baseCompile
} = require(process.env.PWD + '/../../static/js/vue/compiler-core.global.js')
 
const res = baseCompile(`<div class="first" name="div"></div>`, { hoistStatic: true })
console.log(res.code)

const _Vue = Vue
const { createVNode: _createVNode } = _Vue

const _hoisted_1 = {
  class: "first",
  name: "div"
}

return function render(_ctx, _cache) {
  with (_ctx) {
    const { createVNode : _createVNode, openBlock : _openBlock, createBlock : _createBlock } = _Vue

    return (_openBlock(), _createBlock("div", _hoisted_1))
  }
}
undefined

实例中最后是用的 createBlock() 是因为 root.children 只有一个 child 。

修改函数： transforms/transformElement

1
2
3
4
5
6
7
8

const {
  baseParse,
  baseCompile
} = require(process.env.PWD + '/../../static/js/vue/compiler-core.global.js')
 
const res = baseCompile(`<div class="first"></div><div class="second"></div>`, { hoistStatic: true })
console.log(res.ast.codegenNode.children[0].props[0])

{
  type: 6,
  name: 'class',
  value: {
    type: 2,
    content: 'first',
    loc: { start: [Object], end: [Object], source: '"first"' }
  },
  loc: {
    start: { column: 6, line: 1, offset: 5 },
    end: { column: 19, line: 1, offset: 18 },
    source: 'class="first"'
  }
}
undefined

feat: merge props · gcclll/stb-vue-next@6951dd1

合并属性的条件：存在没有参数的指令，如： <div v-bind="{...}" v-on="{...}"

FIX: fix: merge toHandlers props · gcclll/stb-vue-next@12a66f0

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

const {
  baseParse,
  baseCompile
} = require(process.env.PWD + '/../../static/js/vue/compiler-core.global.js')
const log = (code, title) => {
  console.log(`>>> ${title}`)
  const res = baseCompile(code)
  console.log(res.code)
}
 
log(`
<div class="first" v-on="{ click: clickHandle  }" v-bind="{ style: 'color:red' }"></div>`, '无参数的指令，合并所有属性')

log(`<div class="second" v-on:click="clickHandle" v-bind:style="color:red"></div>`, '有参数的指令，不合并')

>>> 无参数的指令，合并所有属性
const _Vue = Vue

return function render(_ctx, _cache) {
  with (_ctx) {
    const { toHandlers : _toHandlers, mergeProps : _mergeProps, createVNode : _createVNode, openBlock : _openBlock, createBlock : _createBlock } = _Vue

    return (_openBlock(), _createBlock("div", _mergeProps({ class: "first" }, _toHandlers({ click: clickHandle  }), { style: 'color:red' }), null, 16 /* FULL_PROPS */))
  }
}
>>> 有参数的指令，不合并
const _Vue = Vue

return function render(_ctx, _cache) {
  with (_ctx) {
    const { resolveDirective : _resolveDirective, createVNode : _createVNode, openBlock : _openBlock, createBlock : _createBlock } = _Vue

    return _withDirectives((_openBlock(), _createBlock("div", { class: "second" }, null, 512 /* NEED_PATCH */)), )
  }
}
undefined

有参数指令时，需要结合 v-on 指令解析，因此需要先实现了 transform 指令才能得到下面的正确结果。

不合并(mergeProps()) 的正解：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

(function anonymous(
) {
const _Vue = Vue

return function render(_ctx, _cache) {
  with (_ctx) {
    const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue

    return (_openBlock(), _createBlock("div", {
      class: "second",
      onClick: clickHandle,
      style: { color: 'red' }
    }, null, 12 /* STYLE, PROPS */, ["onClick"]))
  }
}
})

下面将继续完成指令相关的 transform

feat(init): v-if transform · gcclll/stb-vue-next@acdea14

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

export const transformIf = createStructuralDirectiveTransform(
  /^(if|else|else-if)$/,
  (node, dir, context) => {
    return processIf(node, dir, context, (ifNode, branch, isRoot) => {
      // TODO
      console.log(ifNode, branch, isRoot)
      return () => {}
    })
  }
)

export function processIf(
  node: ElementNode,
  dir: DirectiveNode,
  context: TransformContext,
  processCodegen?: (
    node: IfNode,
    branch: IfBranchNode,
    isRoot: boolean
  ) => (() => void) | undefined
) {}

初始化 v-if process 函数， processIf 函数里面会针对 v-if 节点甚至它的兄弟节点做 一系列操作，比如将下一个是 v-else 的兄弟节点删除移到自己的 branches[] 里面。

feat: v-if processIf · gcclll/stb-vue-next@9039a3e

这里增加了两个函数的实现：

1. processIf, 解析 if，创建 IF,9 类型的结构，替换 v-if 原来的 ast

   1 2 3 4 5

   const ifNode: IfNode = { type: NodeTypes.IF, loc: node.loc, branches: [branch] }

   其中 branches 保存着所有 v-else, v-else-if 分支节点，这里其实是创建了一个默认 的分支节点，因为 v-if 系列指令在 render 函数中是以三元运算符(?:)形式存 在的，所以 if 后面必须要有一个分支，即 condition ? node1 : node2 中的 node2 必须是个有效的值，才能正常使用 ?: 运算符。

   所以，如果只有 v-if 指令的时候三元符后面的值起始是个空值(好像是 null)

2. createIfBranch, 创建 v-if 的分支节点的

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

   function createIfBranch(node: ElementNode, dir: DirectiveNode): IfBranchNode { return { type: NodeTypes.IF_BRANCH, loc: node.loc, // condition ? v-if node : v-else node condition: dir.name === 'else' ? undefined : dir.exp, // 如果用的是 <template v-if="condition" ... 就需要 node.children // 因为 template 本身是不该被渲染的 children: node.tagType === ElementTypes.TEMPLATE && !findDir(node, 'for') ? node.children : [node], // 对于 v-for, v-if/... 都应该给它个 key, 这里是用户编写是的提供的唯一 key // 如果没有解析器会默认生成一个全局唯一的 key userKey: findProp(node, `key`) } }

   注意看最后一个属性， v-if 分支也是需要一个 key 属性的。

feat: v-if createIfBranch · gcclll/stb-vue-next@44985b4

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

export function createConditionalExpression(
  test: ConditionalExpression['test'],
  consequent: ConditionalExpression['consequent'],
  alternate: ConditionalExpression['alternate'],
  newline = true
) {
  return {
    type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
    test,
    consequent,
    alternate,
    newline,
    loc: locStub
  }
}

这里的结构(v-if)在 render 函数中的对应关系：

test ? consequent : alternate

如果有 v-else-if 时候， alternate 结构会是个完整的 JS_CONDITIONAL_EXPRESSION ，即： alternate: { test, consequent, alternate, ...} 所以：

test ? consequent : test1 ? consequent 1 : alternate

fix: no v-if transform · gcclll/stb-vue-next@1e24eb7

到这里 v-if 指令 transform 阶段已经完成，测试结果：

1
2
3
4
5
6
7
8

const {
  baseParse,
  baseCompile
} = require(process.env.PWD + '/../../static/js/vue/compiler-core.global.js')
 
const { code, ast } = baseCompile(`<div v-if="ok"/>`)
console.log(`>>> ast.codegenNode 结果`)
console.log(ast.codegenNode)

>>> ast.codegenNode 结果
{
  type: 9,
  loc: {
    start: { column: 1, line: 1, offset: 0 },
    end: { column: 17, line: 1, offset: 16 },
    source: '<div v-if="ok"/>'
  },
  branches: [
    {
      type: 10,
      loc: [Object],
      condition: [Object],
      children: [Array],
      userKey: undefined
    }
  ],
  codegenNode: {
    type: 19,
    test: {
      type: 4,
      content: 'ok',
      isStatic: false,
      isConstant: false,
      loc: [Object]
    },
    consequent: {
      type: 13,
      tag: '"div"',
      props: [Object],
      children: undefined,
      patchFlag: undefined,
      dynamicProps: undefined,
      directives: undefined,
      isBlock: true,
      disableTracking: false,
      loc: [Object]
    },
    alternate: {
      type: 14,
      loc: [Object],
      callee: Symbol(createCommentVNode),
      arguments: [Array]
    },
    newline: true,
    loc: { source: '', start: [Object], end: [Object] }
  }
}
undefined

+RESULTS: 错误结果

const _Vue = Vue

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

    return (_openBlock(), _createBlock("div", { key: 0 }))
  }
}
>>> ast.codegenNode 结果
{
  type: 13,
  tag: '"div"',
  props: {
    type: 15,
    loc: { source: '', start: [Object], end: [Object] },
    properties: [ [Object] ]
  },
  children: undefined,
  patchFlag: undefined,
  dynamicProps: undefined,
  directives: undefined,
  isBlock: true,
  disableTracking: false,
  loc: {
    start: { column: 1, line: 1, offset: 0 },
    end: { column: 17, line: 1, offset: 16 },
    source: '<div v-if="ok"/>'
  }
}
undefined

结果显示是不对的，因为创建的 IF 结构没有替换 ast 🌲中原来的节点，追踪后发现是 漏掉了 context.replaceNode(node) 的实现。

fix: v-if codegenNode is incorrect · gcclll/stb-vue-next@47c30d2

traverseNode 中需要增加 case 9,IF 分支处理，遍历所有的 branches[] 。

fix: v-if branches no codegenNode · gcclll/stb-vue-next@179f06f

feat: v-if generator · gcclll/stb-vue-next@742757e

genNode 增加 JS_CONDITIONAL_EXPRESSION 分支处理(genConditionalExpression)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

function genConditionalExpression(
  node: ConditionalExpression,
  context: CodegenContext
) {
  const { test, consequent, alternate, newline: needNewline } = node
  const { push, indent, deindent, newline } = context
  if (test.type === NodeTypes.SIMPLE_EXPRESSION) {
    // 非简单的标识符需要用括号，可能是表达式，所以需要 (a + b) ? ... : ...
    const needsParams = !isSimpleIdentifier(test.content)
    needsParams && push(`(`)
    genExpression(test, context)
    needsParams && push(`)`)
  } else {
    push(`(`)
    genNode(test, context)
    push(`)`)
  }

  needNewline && indent()
  context.indentLevel++
  needNewline || push(` `)
  push(`? `)
  genNode(consequent, context)
  context.indentLevel--
  needNewline && newline()
  needNewline || push(` `)
  push(`: `)
  const isNested = alternate.type === NodeTypes.JS_CONDITIONAL_EXPRESSION
  if (!isNested) {
    // 不是嵌套
    context.indentLevel++
  }
  genNode(alternate, context)
  if (!isNested) {
    context.indentLevel--
  }

  needNewline && deindent(true /* without newline */)
}

genConditionalExpression 处理分为三个部分

1. test 生成条件表达式，这里是: ok ，如果是表达式需要括号： (a + b)

2. consequent 用来生成 ? 后面的表达式，即 ok 结果为 truth 时执行

3. alternate 用来生成 : 后面的表达式，即 ok 结果为 falsy 时执行

   alternate 中的结构可能也是个 JS_CONDITIONAL_EXPRESSION 结构，代表可能有 v-else-if 分支，如： (a + b) ? node1 : (c + d) ? node2 : othernode 。

测试：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

const {
  baseParse,
  baseCompile
} = require(process.env.PWD + '/../../static/js/vue/compiler-core.global.js')
 
const c = ( tpl, desc ) => {
  console.log(`>>> ` + desc)
  const { code } = baseCompile(tpl, { hoistStatic: true })
  console.log(code)
}

c(`<div v-if="ok"/>`, 'basic v-if')
c(`<template v-if="ok"><div/>hello<p/></template>`, 'template v-if')

>>> basic v-if
const _Vue = Vue
const { createVNode: _createVNode, createCommentVNode: _createCommentVNode } = _Vue

const _hoisted_1 = { key: 0 }

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

    return ok
      ? (_openBlock(), _createBlock("div", _hoisted_1))
      : _createCommentVNode("v-if", true)
  }
}
>>> template v-if
const _Vue = Vue
const { createVNode: _createVNode, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode } = _Vue

const _hoisted_1 = /*#__PURE__*/_createVNode("div", null, null, -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createTextVNode("hello")
const _hoisted_3 = /*#__PURE__*/_createVNode("p", null, null, -1 /* HOISTED */)

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

    return ok
      ? (_openBlock(), _createBlock(_Fragment, { key: 0 }, [
          _hoisted_1,
          _hoisted_2,
          _hoisted_3
        ], 64 /* STABLE_FRAGMENT */))
      : _createCommentVNode("v-if", true)
  }
}
undefined

BUG: 这里居然少了个 _hoisted_2 ???

1
2
3
4
5

[
  _hoisted_1,
  ,
  _hoisted_3
]

答： genNode() 中缺少对 4,TEXT_CALL 纯文本类型处理。

解：fix: v-if TEXT_CALL gen node · gcclll/stb-vue-next@2372b5f

feat(add): v-else · gcclll/stb-vue-next@fa77b51

修改点：

1. processCodegen() 函数里面增加分支处理

   这里有一个需要注意的点: getParentCondition() 会一直查找 JS_CONDITIONAL_EXPRESSION 类型节点的 alternate ，如果它依旧是个 JS_CONDITIONAL_EXPRESSION 类型，说明是多级的 if/else 条件语句，直到找到最 后一个不是为止。

   相当于 ： c1 ? cons1 : c2 ? cons2 : c3 ? cons3 : alt 会一直从 c1 节点开始 查找直到找到最后的那个 alt 节点为止，然后将新的分支挂到 alt 后面组织成新 的分支: c1 ? cons1 : c2 ? cons2 : c3 ? cons3 : c4 ? cons4 : newalt

   PS: c1, c2, c3, c4 分别代表分支节点的 test ，最后追加的 c4 ? cons4 : newalt 三个对象都属于新加的节点， {test -> c4, cons4 -> consequent, alternate -> newalt }

2. processIf() 里增加分支处理

   新增代码里有个 while 循环去从当前的分支节点开始在它的兄弟节点里面往回找，直 到找到第一个 9,IF 节点，这中间不允许出现其他有效节点(除注释，空文本节点外)， 因为 v-if/else 指令节点必须紧靠着。

   找到之后，要将当前分支节点删除，并且同时要去手动 traverseNode(branch) 一次， 因为他在原来的 ast 树种删除了，所以原来的 traverse 进程不会遍历它，因此需要手 动执行 traverse 去处理它及其孩子节点生成对应的 codegenNode 。

   然后将其 push 到 9,IF 节点的 node.branches 里面作为分支。

3. isSameKey(a,b) 新增，检测两个 key 属性是不是相同

   几种判定为不相同的条件：

   1. key 类型不同 (a.type !== b.type)

   2. key 值不同 (a.value.content !== b.value.content)

   3. key 如果是指令类型，检测表达式类型，静态属性异同(isStatic)

4. getParentCondition() 新增，递归 9，IF 节点的 node.alternate.alternate.alternate... 直到找到 alternate 不是 JS_CONDITIONAL_EXPRESSION 的情况

FIX: fix: v-else current node dont removed · gcclll/stb-vue-next@464d681

测试：

1
2
3
4
5
6
7
8

const {
  baseParse,
  baseCompile
} = require(process.env.PWD + '/../../static/js/vue/compiler-core.global.js')
 
const { code } = baseCompile(`<div v-if="ok"/><p v-else/>`)
console.log(code)

const _Vue = Vue

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

    return ok
      ? (_openBlock(), _createBlock("div", { key: 0 }))
      : (_openBlock(), _createBlock("p", { key: 1 }))
  }
}
undefined

BUG: v-else-if 被解析成了 else 因为 parser 阶段匹配正则不对。 fix: parser v-else-if failed · gcclll/stb-vue-next@5b83d1c

feat: add track slot scopes · gcclll/stb-vue-next@ebdb1ed

还不知道干吗的❓

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// A NodeTransform that:
// 1. Tracks scope identifiers for scoped slots so that they don't get prefixed
//    by transformExpression. This is only applied in non-browser builds with
//    { prefixIdentifiers: true }.
// 2. Track v-slot depths so that we know a slot is inside another slot.
//    Note the exit callback is executed before buildSlots() on the same node,
//    so only nested slots see positive numbers.
export const trackSlotScopes: NodeTransform = (node, context) => {
  // <component> or <template>
  if (
    node.type === NodeTypes.ELEMENT &&
    (node.tagType === ElementTypes.COMPONENT ||
      node.tagType === ElementTypes.TEMPLATE)
  ) {
    // We are only checking non-empty v-slot here
    // since we only care about slots that introduce scope variables.
    const vSlot = findDir(node, 'slot')
    if (vSlot) {
      const slotProps = vSlot.exp
      if (!__BROWSER__ && context.prefixIdentifiers) {
        slotProps && context.addIdentifiers(slotProps)
      }

      context.scopes.vSlot++
      return () => {
        if (!__BROWSER__ && context.prefixIdentifiers) {
          slotProps && context.removeIdentifiers(slotProps)
        }
        context.scopes.vSlot--
      }
    }
  }
}

feat(add): default slot without template · gcclll/stb-vue-next@fbed5cf

<Comp><div/></Comp>

这种情况，用户组件上既没有 v-slot 孩子节点里面也没有 <template v-slot> 最后 的处理是 <Comp></Comp> 里面的所有 children 被当做默认插槽处理。

该示例符合：

1. 组件上没有 v-slot 指令

2. 孩子节点里面没有 <template v-slot:name="slotProps">

因此，这里的处理是将 <div/> 即 comp.children 全部作为默认的 slot:default 来处理。

处理流程： <Comp> -> transformElement -> isComponent -> buildSlots() -> {slots, hasDynamicSlots} -> vnodeChildren -> {type: 13,VNODE_CALL, children: vnodeChildren, ... }

1
2
3
4
5
6
7

const {
  baseParse,
  baseCompile
} = require(process.env.PWD + '/../../static/js/vue/compiler-core.global.js')

const { ast } = baseCompile(`<Comp><div/></Comp>`)
console.log(ast.codegenNode)

{
  type: 13,
  tag: '_component_Comp',
  props: undefined,
  children: {
    type: 15,
    loc: { start: [Object], end: [Object], source: '<Comp><div/></Comp>' },
    properties: [ [Object], [Object] ]
  },
  patchFlag: undefined,
  dynamicProps: undefined,
  directives: undefined,
  isBlock: true,
  disableTracking: false,
  loc: {
    start: { column: 1, line: 1, offset: 0 },
    end: { column: 20, line: 1, offset: 19 },
    source: '<Comp><div/></Comp>'
  }
}
undefined

另外在 transformElement() 函数中通过 isComponent = node.tagType === ElementTypes.COMPONENT 检测是不是用户组件，如果是继续解析该组件类型(resolveComponentType())。

这里最终得到的结果是： vnodeTag = _component_Comp 作为标签名，也是该 <Comp/> 组件在 Vue 实例过程中的存在的标签名(组件名称)。

feat(add): user component resolver generator · gcclll/stb-vue-next@8bed175

因为在 transform 阶段 transformElement 过程中，检测到 <Comp> 是个用户组件，所 以将其增加到了 context.components.add('Comp') 中了，在 generator 阶段会去检测 这个 components 用来解析组件得到组件的引用：

_component_Comp = _resolveComponent("Comp")

新增的代码主要由两部分：

1. 新增 genAssets() 函数处理 context.components

   处理之后的结果就是增加 _component_Comp = _resolveComponent("Comp")

2. 在 generate() 中增加 ast.components 检测，如果有内容调用 genAssets() 解 析

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

// generate() 中增加
 if (ast.components.length) {
    genAssets(ast.components, 'component', context)
    if (ast.directives.length || ast.temps > 0) {
      newline()
    }
  }

// 新增
function genAssets(
  assets: string[],
  type: 'component' | 'directive',
  { helper, push, newline }: CodegenContext
) {
  const resolver = helper(
    type === 'component' ? RESOLVE_COMPONENT : RESOLVE_DIRECTIVE
  )

  for (let i = 0; i < assets.length; i++) {
    const id = assets[i]
    push(
      `const ${toValidAssetId(id, type)} = ${resolver}(${JSON.stringify(id)})`
    )
    if (i < assets.length - 1) {
      newline()
    }
  }
}

测试：

1
2
3
4
5
6
7
8

const {
  baseParse,
  baseCompile
} = require(process.env.PWD + '/../../static/js/vue/compiler-core.global.js')

const { code } = baseCompile(`<Comp><div/></Comp>`, { hoistStatic: true })
console.log(code)

const _Vue = Vue
const { createVNode: _createVNode } = _Vue

const _hoisted_1 = /*#__PURE__*/_createVNode("div", null, null, -1 /* HOISTED */)

return function render(_ctx, _cache) {
  with (_ctx) {
    const { createVNode : _createVNode, resolveComponent : _resolveComponent, withCtx : _withCtx, openBlock : _openBlock, createBlock : _createBlock } = _Vue

    const _component_Comp = _resolveComponent("Comp")

    return (_openBlock(), _createBlock(_component_Comp, null, {
      default: _withCtx(() => [
        _hoisted_1
      ]),
      _: 1
    }))
  }
}
undefined

缺少 1 /* STABLE */ 注释: fix: slot flag text · gcclll/stb-vue-next@08a6fca

注意 _createBlock() 的第三个参数变成了一个对象(children) 对象里面包含了两个 属性: default 和 _ 分别代表了默认插槽下的孩子节点，和该插槽标识(1-STABLE,2-FORWARDED,3-DYNAMIC)

fix: adjacent text node need merge · gcclll/stb-vue-next@9f58154

对于 `<Comp v-slot="{ foo }">{{ foo }}{{ bar }}</Comp>` 用例得到的结果非预期。

vue-next 正确结果：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

const {
  baseCompile
} = require(process.env.PWD + '/../../static/vue/vue.js')
 
const { ast } = baseCompile(`<Comp v-slot="{ foo }">{{ foo }}{{ bar }}</Comp>`)
const returns = ast.codegenNode.children.properties[0].value.returns
console.log(returns)
console.log(`>>> 解析后的 {{ foo }} {{ bar }} 应该合并`)
console.log(returns[0].content)
console.log(`>>> 下面正是合并之后的两个插值`)
console.log(returns[0].content.children)

You are running a development build of Vue.
Make sure to use the production build (*.prod.js) when deploying for production.
[
  {
    type: 12,
    content: { type: 8, loc: [Object], children: [Array] },
    loc: { start: [Object], end: [Object], source: '{{ foo }}' },
    codegenNode: {
      type: 14,
      loc: [Object],
      callee: Symbol(createTextVNode),
      arguments: [Array]
    }
  }
]
>>> 解析后的 {{ foo }} {{ bar }} 应该合并
{
  type: 8,
  loc: {
    start: { column: 24, line: 1, offset: 23 },
    end: { column: 33, line: 1, offset: 32 },
    source: '{{ foo }}'
  },
  children: [
    { type: 5, content: [Object], loc: [Object] },
    ' + ',
    { type: 5, content: [Object], loc: [Object] }
  ]
}
>>> 下面正是合并之后的两个插值
[
  {
    type: 5,
    content: {
      type: 4,
      isStatic: false,
      constType: 0,
      content: 'foo',
      loc: [Object]
    },
    loc: { start: [Object], end: [Object], source: '{{ foo }}' }
  },
  ' + ',
  {
    type: 5,
    content: {
      type: 4,
      isStatic: false,
      constType: 0,
      content: 'bar',
      loc: [Object]
    },
    loc: { start: [Object], end: [Object], source: '{{ bar }}' }
  }
]
undefined

看下现阶段 stb-vue-next 输出结果：

1
2
3
4
5
6
7
8
9

const {
  baseCompile
} = require(process.env.PWD + '/../../static/js/vue/compiler-core.global.js')
 
const { ast } = baseCompile(`<Comp v-slot="{ foo }">{{ foo }}{{ bar }}</Comp>`)
const returns = ast.codegenNode.children.properties[0].value.returns
console.log(returns[0].content)
console.log(returns[1].content)

{
  type: 5,
  content: {
    type: 4,
    isStatic: false,
    isConstant: false,
    content: 'foo',
    loc: { start: [Object], end: [Object], source: 'foo' }
  },
  loc: {
    start: { column: 24, line: 1, offset: 23 },
    end: { column: 33, line: 1, offset: 32 },
    source: '{{ foo }}'
  }
}
{
  type: 5,
  content: {
    type: 4,
    isStatic: false,
    isConstant: false,
    content: 'bar',
    loc: { start: [Object], end: [Object], source: 'bar' }
  },
  loc: {
    start: { column: 33, line: 1, offset: 32 },
    end: { column: 42, line: 1, offset: 41 },
    source: '{{ bar }}'
  }
}
undefined

stb-vue-next 明显 returns 里面包含了两个元素分别是： {{ foo }} 和 {{ bar }}

这是因为在 transformText 里面没有进行文本(插值也算)合并。

fix: patchFlag should |= but != · gcclll/stb-vue-next@0773374

插槽嵌套使用。

1
2
3
4
5
6
7
8

`<Comp>
    <template #default="{ foo }">
        <Inner v-slot="{ bar }">
        {{ foo }}{{ bar }}{{ baz }}
        </Inner>
        {{ foo }}{{ bar }}{{ baz }}
    </template>
</Comp>`

插槽嵌套使用时的解析是先里后外，因为在 transform 阶段 ast 阶段转换之后，会进行回 溯，回溯过程是相反的。

如：

ast 结构 transform：

Comp.children -> [template] -> template.children -> [Inner, foo, bar, baz] -> Inner.children -> [foo, bar, baz]

ast回溯:

Inner.children -> Inner -> template.children -> template -> Comp.children -> Comp

所以首先执行 transformElement() 的是 Inner 所以它会先进入 buildSlots() 构 建插槽结构，完了之后是 <template> 最后是 <Comp>

render 推导过程：

1. <Inner v-slot="{bar}">{{foo}}{{bar}}{{baz}}</Inner>

   是在用户组件上应用了 v-slot 且是默认插槽，因此它的所有孩子节点都会成为默认 插槽一部分。

   结果：

   1 2 3 4 5 6

   _createVNode(_component_Inner, null, { default: _withCtx(({ bar }) => [ _createTextVNode(_toDisplayString(foo) + _toDisplayString(bar) + _toDisplayString(baz), 1 /* TEXT */) ]), _: 2, /* DYNAMIC */ }, 1024 /* DYNAMIC_SLOTS */)

   这里使用的是 _createVNode 因为 Inner 非唯一的孩子节点。

2. <template #default="{foo}">...</template>

   1 2 3 4 5 6 7 8 9 10 11 12

   (_openBlock(), _createBlock(_component_Comp, null { default: _withCtx(({ foo }) => [ _createVNode(_component_Inner, null, { default: _withCtx(({ bar }) => [ _createTextVNode(_toDisplayString(foo) + _toDisplayString(bar) + _toDisplayString(baz), 1 /* TEXT */) ]), _: 2 /* DYNAMIC */ }, 1024 /* DYNAMIC_SLOTS */), _createTextVNode(_toDisplayString(foo) + _toDisplayString(bar) + _toDisplayString(baz), 1 /* TEXT */) ]), _: 1 /* STABLE */ }))

   这里有个判断 Inner 为动态 slot 的关键点： context.scopes.vSlot > 0 而这个 值是在收集 transformXxx 阶段递增 +1 而后回溯过程中 -1 的。

   在收集阶段 <template> 收集到 trackSlotScopes() 函数此时 context.scopes.vSlot = 1 然后递归 children执行到 Inner 收集阶段的时候 context.scopes.vSlot = 2 直到递归结束。

   开始回溯，先是在 Inner 上应用 transformElement 直到 Inner 回溯到执行 trackSlotScopes() 应为它也有 v-slot 指令，所以 Inner 能收集到这个函数， 它回溯结束执行 trackSlotScopes() 随之 context.scopes.vSlot-- 所以此时，在 回溯 Inner 结束之后在开始回溯 <template> 之前 context.scopes.vSlot = 1 。

   这就是 Inner 为什么没有动态属性名但是依旧会判断为动态插槽的原理。

   一句话：如果在 <template v-slot> 里面嵌套另一个 v-slot 那个这个不管有没有 动态属性名都会被当做动态插槽来处理。

1
2
3

`<div v-for="i in list">
  <Comp v-slot="bar">foo</Comp>
</div>`

let hasDynamicSlots = context.scopes.vSlot > 0 || context.scopes.vFor > 0;

根据这个判断决定 v-for 里面的 v-slot 为动态插槽。

feat(add): slot with v-if · gcclll/stb-vue-next@cfef20e

1
2
3

`<Comp>
  <template #one v-if="ok">hello</template>
</Comp>`

测试：

1
2
3
4
5
6
7
8
9

const {
  baseParse,
  baseCompile
} = require(process.env.PWD + '/../../static/js/vue/compiler-core.global.js')

const { code } = baseCompile(`<Comp>
  <template #one v-if="ok">hello</template>
</Comp>`)
console.log(code)

const _Vue = Vue

return function render(_ctx, _cache) {
  with (_ctx) {
    const { createTextVNode : _createTextVNode, resolveComponent : _resolveComponent, withCtx : _withCtx, createSlots : _createSlots, createVNode : _createVNode, openBlock : _openBlock, createBlock : _createBlock } = _Vue

    const _component_Comp = _resolveComponent("Comp")

    return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
      ok
        ? {
            name: "one",
            fn: _withCtx(() => [
              _createTextVNode("hello")
            ])
          }
        : undefined
    ]), 1024 /* DYNAMIC_SLOTS */))
  }
}
undefined

动态 slots 处理之后： _createSlots({ /* 静态 slots */, [ /* 动态 slots 列表 */ ] })

看下面的运行时的 createSlots(slots, dynamicSlots) 其实就是讲两者合并在一起了 v-if 是个对象 { fn, name } v-for 是该对象的数组。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

export function createSlots(
  slots: Record<string, Slot>,
  dynamicSlots: (
    | CompiledSlotDescriptor
    | CompiledSlotDescriptor[]
    | undefined)[]
): Record<string, Slot> {
  for (let i = 0; i < dynamicSlots.length; i++) {
    const slot = dynamicSlots[i]
    // array of dynamic slot generated by <template v-for="..." #[...]>
    if (isArray(slot)) {
      for (let j = 0; j < slot.length; j++) {
        slots[slot[j].name] = slot[j].fn
      }
    } else if (slot) {
      // conditional single slot generated by <template v-if="..." #foo>
      slots[slot.name] = slot.fn
    }
  }
  return slots
}