Vue3.0 源码系列（二）编译器核心 - Compiler core 1: parse.ts

 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

  /*
    不管是单标签还是多标签也好，自闭合标签的处理都一样，在 parseTag 里面解析都需要经过这么
    一段：advanceBy(context, isSelfClosing ? 2 : 1);
    然后结合 parseElement 中的检测 isSelfClosing 直接退出返回元素节点，即不需要再继续
    解析子节点了(它没有)
  ,*/
  test('self closing single tag', () => {
      const ast = baseParse('<div :class="{ some: condition }" />')

      expect(ast.children).toHaveLength(1)
      expect(ast.children[0]).toMatchObject({ tag: 'div' })
  })

  test('self closing multiple tag', () => {
      const ast = baseParse(
          `<div :class="{ some: condition }" />\n` +
              `<p v-bind:style="{ color: 'red' }"/>`
      )

      expect(ast).toMatchSnapshot()

      expect(ast.children).toHaveLength(2)
      expect(ast.children[0]).toMatchObject({ tag: 'div' })
      expect(ast.children[1]).toMatchObject({ tag: 'p' })
  })

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

  function parseAttributes(
      context: ParserContext,
      type: TagType
  ): (AttributeNode | DirectiveNode)[] {
      const props = []
      const attributeNames = new Set<string>()
      while (
          context.source.length > 0 &&
              !startsWith(context.source, '>') &&
              !startsWith(context.source, '/>')
      ) {
          // ...

          const attr = parseAttribute(context, attributeNames)
          // ...
      }
      return props
  }

 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
40
41

  test('attribute with empty value, double quote', () => {
      const ast = baseParse('<div id=""></div>')
      const element = ast.children[0] as ElementNode

      expect(element).toStrictEqual({
          type: NodeTypes.ELEMENT,
          ns: Namespaces.HTML,
          tag: 'div',
          tagType: ElementTypes.ELEMENT,
          codegenNode: undefined,
          props: [
              {
                  type: NodeTypes.ATTRIBUTE,
                  name: 'id',
                  value: {
                      type: NodeTypes.TEXT,
                      content: '',
                      loc: {
                          start: { offset: 8, line: 1, column: 9 },
                          end: { offset: 10, line: 1, column: 11 },
                          source: '""'
                      }
                  },
                  loc: {
                      start: { offset: 5, line: 1, column: 6 },
                      end: { offset: 10, line: 1, column: 11 },
                      source: 'id=""'
                  }
              }
          ],

          isSelfClosing: false,
          children: [],
          loc: {
              start: { offset: 0, line: 1, column: 1 },
              end: { offset: 17, line: 1, column: 18 },
              source: '<div id=""></div>'
          }
      })
  })

 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

  function parseAttributeValue(
      context: ParserContext
  ) {
      // ...省略

      const quote = context.source[0]
      const isQuoted = quote === `"` || quote === `'`
      if (isQuoted) { // id=""，有引号
          // Quoted value.
          advanceBy(context, 1)

          const endIndex = context.source.indexOf(quote)
          if (endIndex === -1) {
              content = parseTextData(
                  context,
                  context.source.length,
                  TextModes.ATTRIBUTE_VALUE
              )
          } else {
              // 到这里
              content = parseTextData(context, endIndex, TextModes.ATTRIBUTE_VALUE)
              advanceBy(context, 1)
          }
      } else {
          // 不会到这里
      }

      return { content, isQuoted, loc: getSelection(context, start) }
  }

 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

  function parseAttribute(
      context: ParserContext,
      nameSet: Set<string>
  ): AttributeNode | DirectiveNode {
      // ... 省略

      // 这里检测是不是有 name= 或 name=value 情况
      if (/^[\t\r\n\f ]*=/.test(context.source)) {
          advanceSpaces(context)
          advanceBy(context, 1)
          advanceSpaces(context)
          value = parseAttributeValue(context)
          // 这里是防止 name= 后面没有值得情况报错
          if (!value) {
              emitError(context, ErrorCodes.MISSING_ATTRIBUTE_VALUE)
          }
      }

      // ... 因为 id 没有 id=? 所以直接回到这里，不会进入
      // parseAttributeValue 解析属性值

      // ... id 非指令属性，所以直接到最后以普通属性类型退出
      return {
          type: NodeTypes.ATTRIBUTE,
          name,
          value: value && {
              type: NodeTypes.TEXT,
              content: value.content,
              loc: value.loc
          },
          loc
      }
  }

 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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

  function parseTag(
      context: ParserContext,
      type: TagType,
      parent: ElementNode | undefined
  ): ElementNode {
      // ... 省略

      let tagType = ElementTypes.ELEMENT
      const options = context.options
      // <comp> 由于是 isCustomElement 因此压根不会进入下面的 if (false) ...
      if (!context.inVPre && !options.isCustomElement(tag)) {
          const hasVIs = props.some(
              p => p.type === NodeTypes.DIRECTIVE && p.name === 'is'
          )
          if (options.isNativeTag && !hasVIs) {
              // div 会进入到这里，但是检测失败 if (!true) ...
              if (!options.isNativeTag(tag)) tagType = ElementTypes.COMPONENT
          } else if (
              // div 这里都不满足，if (false) ...
              hasVIs ||
                  isCoreComponent(tag) ||
                  (options.isBuiltInComponent && options.isBuiltInComponent(tag)) ||
                  /^[A-Z]/.test(tag) ||
                  tag === 'component'
          ) {
              tagType = ElementTypes.COMPONENT
          }

          if (tag === 'slot') {
              tagType = ElementTypes.SLOT
          } else if (
              tag === 'template' &&
                  props.some(p => {
                      return (
                          p.type === NodeTypes.DIRECTIVE && isSpecialTemplateDirective(p.name)
                      )
                  })
          ) {
              tagType = ElementTypes.TEMPLATE
          }
      }

      // 所以 <div> 最终使用了默认值：ELEMENT
      // 所以 <comp> 直接到了这里，是：ELEMENT 类型
      return {
          type: NodeTypes.ELEMENT,
          ns,
          tag,
          tagType,
          props,
          isSelfClosing,
          children: [],
          loc: getSelection(context, start),
          codegenNode: undefined // to be created during transform phase
      }
  }

 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

  function parseTag(
      context: ParserContext,
      type: TagType,
      parent: ElementNode | undefined
  ): ElementNode {
      // ... 省略

      let tagType = ElementTypes.ELEMENT
      const options = context.options
      // 前提，非 v-pre 指令，且非自定义标签(默认：NO)
      if (!context.inVPre && !options.isCustomElement(tag)) {

          // 是否有 v-is 指令
          const hasVIs = props.some(
              p => p.type === NodeTypes.DIRECTIVE && p.name === 'is'
          )

          // 首先由提供原生标签检测函数，且没有 v-is 情况下进入组件判断
          if (options.isNativeTag && !hasVIs) {
              // 类型为 COMPONENT 组件类型
              if (!options.isNativeTag(tag)) tagType = ElementTypes.COMPONENT
          }

          // ... 省略
      }

      return {
          type: NodeTypes.ELEMENT,
          ns,
          tag,
          tagType,
          props,
          isSelfClosing,
          children: [],
          loc: getSelection(context, start),
          codegenNode: undefined // to be created during transform phase
      }
  }

 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
40
41
42
43
44
45
46
47
48

  function parseTag(
      context: ParserContext,
      type: TagType,
      parent: ElementNode | undefined
  ): ElementNode {
      // ... 省略

      let tagType = ElementTypes.ELEMENT
      const options = context.options
      // 前提，非 v-pre 指令，且非自定义标签(默认：NO)
      if (!context.inVPre && !options.isCustomElement(tag)) {

          // 是否有 v-is 指令
          const hasVIs = props.some(
              p => p.type === NodeTypes.DIRECTIVE && p.name === 'is'
          )

          // 首先由提供原生标签检测函数，且没有 v-is 情况下进入组件判断
          if (options.isNativeTag && !hasVIs) {
              // 类型为 COMPONENT 组件类型
              if (!options.isNativeTag(tag)) tagType = ElementTypes.COMPONENT
          } else if (
              // 把这里省略的部分加上...
              hasVIs ||
                  isCoreComponent(tag) ||
                  (options.isBuiltInComponent && options.isBuiltInComponent(tag)) ||
                  // 重点在这里，检测到如果标签名开头是大写的就会被视为组件类型
                  /^[A-Z]/.test(tag) ||
                  tag === 'component'
          ) {
              tagType = ElementTypes.COMPONENT
          }

          // ... 省略
      }

      return {
          type: NodeTypes.ELEMENT,
          ns,
          tag,
          tagType,
          props,
          isSelfClosing,
          children: [],
          loc: getSelection(context, start),
          codegenNode: undefined // to be created during transform phase
      }
  }

 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

  test('it can have tag-like notation (3)', () => {
      const ast = baseParse('<div>{{ "</div>" }}</div>')
      // 这里解析出来的是 <div></div> 这个元素节点
      const element = ast.children[0] as ElementNode
      // 标签内部的所有内容在解析之后会被当做子节点存放到 children[] 数组中
      // 因此这里第一个子节点是个插值模板
      const interpolation = element.children[0] as InterpolationNode

      expect(interpolation).toStrictEqual({
          type: NodeTypes.INTERPOLATION,
          content: {
              type: NodeTypes.SIMPLE_EXPRESSION,
              isStatic: false,
              // The `isConstant` is the default value and will be determined in `transformExpression`.
              isConstant: false,
              content: '"</div>"',
              loc: {
                  start: { offset: 8, line: 1, column: 9 },
                  end: { offset: 16, line: 1, column: 17 },
                  source: '"</div>"'
              }
          },
          loc: {
              start: { offset: 5, line: 1, column: 6 },
              end: { offset: 19, line: 1, column: 20 },
              source: '{{ "</div>" }}'
          }
      })
  })

 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
40
41
42
43
44
45

  test('it can have tag-like notation (2)', () => {
      const ast = baseParse('{{ a<b }}{{ c>d }}')
      const interpolation1 = ast.children[0] as InterpolationNode
      const interpolation2 = ast.children[1] as InterpolationNode

      expect(interpolation1).toStrictEqual({
          type: NodeTypes.INTERPOLATION,
          content: {
              type: NodeTypes.SIMPLE_EXPRESSION,
              content: `a<b`,
              isStatic: false,
              isConstant: false,
              loc: {
                  start: { offset: 3, line: 1, column: 4 },
                  end: { offset: 6, line: 1, column: 7 },
                  source: 'a<b'
              }
          },
          loc: {
              start: { offset: 0, line: 1, column: 1 },
              end: { offset: 9, line: 1, column: 10 },
              source: '{{ a<b }}'
          }
      })

      expect(interpolation2).toStrictEqual({
          type: NodeTypes.INTERPOLATION,
          content: {
              type: NodeTypes.SIMPLE_EXPRESSION,
              isStatic: false,
              isConstant: false,
              content: 'c>d',
              loc: {
                  start: { offset: 12, line: 1, column: 13 },
                  end: { offset: 15, line: 1, column: 16 },
                  source: 'c>d'
              }
          },
          loc: {
              start: { offset: 9, line: 1, column: 10 },
              end: { offset: 18, line: 1, column: 19 },
              source: '{{ c>d }}'
          }
      })
  }

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

  test('text with mix of tags and interpolations', () => {
      const ast = baseParse('some <span>{{ foo < bar + foo }} text</span>')
      const text1 = ast.children[0] as TextNode
      const text2 = (ast.children[1] as ElementNode).children![1] as TextNode

      expect(text1).toStrictEqual({
          type: NodeTypes.TEXT,
          content: 'some ',
          loc: {
              start: { offset: 0, line: 1, column: 1 },
              end: { offset: 5, line: 1, column: 6 },
              source: 'some '
          }
      })
      expect(text2).toStrictEqual({
          type: NodeTypes.TEXT,
          content: ' text',
          loc: {
              start: { offset: 32, line: 1, column: 33 },
              end: { offset: 37, line: 1, column: 38 },
              source: ' text'
          }
      })
  }

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

  test('text with interpolation which has `<`', () => {
      const ast = baseParse('some {{ a<b && c>d }} text')
      const text1 = ast.children[0] as TextNode
      const text2 = ast.children[2] as TextNode

      expect(text1).toStrictEqual({
          type: NodeTypes.TEXT,
          content: 'some ',
          loc: {
              start: { offset: 0, line: 1, column: 1 },
              end: { offset: 5, line: 1, column: 6 },
              source: 'some '
          }
      })
      expect(text2).toStrictEqual({
          type: NodeTypes.TEXT,
          content: ' text',
          loc: {
              start: { offset: 21, line: 1, column: 22 },
              end: { offset: 26, line: 1, column: 27 },
              source: ' text'
          }
      })
  })

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

  function parseInterpolation(
      context: ParserContext,
      mode: TextModes
  ): InterpolationNode | undefined {
      // ... 省略

      // 也就是这两行，将 {{ ... }} 内的所有内容一次性取出来解析了，因此并不会
      // 进入到 parseChildren 的 while 循环中处理，也就不会出现异常情况
      const rawContentLength = closeIndex - open.length
      const rawContent = context.source.slice(0, rawContentLength)

      // ... 省略
  }

 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

  test("text with interpolation", () => {
      const ast = baseParse("some {{ foo + bar }} text");
      const text1 = ast.children[0],
      text2 = ast.children[2];

      expect(text1).toStrictEqual({
          type: NodeTypes.TEXT,
          content: "some ",
          loc: {
              start: { offset: 0, line: 1, column: 1 },
              source: "some ",
              end: { offset: 5, line: 1, column: 6 },
          },
      });

      expect(text2).toStrictEqual({
          type: NodeTypes.TEXT,
          content: " text",
          loc: {
              start: { offset: 20, line: 1, column: 21 },
              source: " text",
              end: { offset: 25, line: 1, column: 26 },
          },
      });
  }

1
2
3
4

  if (!context.inVPre && startsWith(s, context.options.delimiters[0])) {
      // '{{'
      node = parseInterpolation(context, mode)
  }