vue -- v3.4commit提交记录

Published: · LastMod: April 07, 2024 · 1882 words

vue – v3.4commit提交记录 🔗

  1. 复制htmlparser2 Parser Tokenizer文件 （解析器和分词）

  2. 去掉xmlMode和htmlMode，本质上vue不存在xmlMode

  3. 去除小写属性，

    1. 分词在对象构造函数中实例化
    2. buffer重写成字符串
    3. 重写slice方法
    4. 增加parse入口方法，用于实例调用

  4. 主parser中重写入口

    1. 暴露parser
    2. 增加htmlMode

  5. parser中单独实例化分词器

    1. 分词器中记录当前指针的行、列、开始的行、列

  6. 去除行列计数

  7. getPositionForIndex获取当前index所在的行列数据

  8. 用stack数组记录元素堆栈

  9. onattribname中拦截指令相关的标签，处理指令结尾

  10. currentAttrs 改为用Set记录当前属性

  11. 删除Parser中处理指令的代码，移到到分词器中处理

  12. 增加prop位置索引信息，删除外部上下文检查

  13. 删除解析中htmlMode的代码

  14. 分词器中处理插值的部分{{}}

  15. 处理v-pre指令部分

  16. 增加3种处理模式，base、sfc、html

image.png

  1. 删除buildIn类型

    1. image.png

    2. 改为手写，包括Suspense和Transition

      1. image.png

  2. refactor: swap to new template parser
    1. parser中特殊处理vFor指令
  3. 处理浏览器部分特殊字符解析

    1. image.png

  4. 标记解析时的根节点，默认为**Namespace.HTML **。
  5. 支持sfc中模版重用的功能
    1. 现在入口处直接转换成ast

      image.png

    2. 原transform部分不再进行转换ast了

      image.png

    3. compile部分优先使用ast，不存在则才使用source源码

      image.png

  6. 分词器中加入对template模板的支持
  7. 修复新解析器中vBind的处理

    image.png

  8. 如果template是从src引入的则不再处理

    image.png

  9. 重写resolveTemplateUsageCheckString中递归的写法
1
2
3

ast!.children.forEach(walk)

function walk(node: TemplateChildNode) {}

  1. 处理template lang=html的情况

    image.png

  2. 强制刷新ast

    image.png

  3. 当使用自定义编译器时，ast不可以复用

  4. 优化位置克隆，这里使用直接赋值

    image.png

  5. 去除magic-string中的script trim方法，这里作者解释可以优化10%的时间

    image.png

magic-string's trim method uses a regex check for aborting which turns
out to be extremely expensive - it cna take up to 10% time in total SFC
compilation! The usage here is purely aesthetic so simply removing it
for a big perf gain is well worth it.
  1. 合并生成代码中的一些多余操作, 这里在生成代码是的一些换行操作，原来通过push一个回车生成新行，现在标记成flag，可以提升6%
1
2
3
4
5
6
7

Previously, many CodegenContext.push() calls were unnecessarily
iterating through the entire pushed string to find newlines, when we
already know the newline positions for most of calls. Providing fast
paths for these calls significantly improves codegen performance when
source map is needed.

In benchmarks, this PR improves full SFC compilation performance by ~6%.
  1. 优化sourcemap生成, 这里直接操作context.map的原型，这里作者解释了，因为source-map-js中的addMapping()实现有一堆不必要的参数和验证检查，在我们的例子中是纯粹的开销。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

function addMapping(loc: Position, name: string | null = null) {
    // @ts-ignore 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,
      name
    })
  }
// ....
}

release: v3.4.0-alpha.2 🔗

  1. 空行问题， 首字符为回车行，会插入空行

    image.png

  2. ssr模式下ast重用

    1. image.png

    2. 增加flag用于确认是否已经解析过

      1. image.png

  3. 增加解析容忍度

    1. image.png

  4. 修复属性参数为空的情况

    1. image.png

release: v3.4.0-alpha.3 🔗

  1. 分词器在重置方法时调用重置inRCDATA 以致后续解析其他模板时不再报错

  2. 在解析模板开始时，重置分词器是否在xml的flag

    image.png

  3. 模板在解析时，不去解析Error作为全局变量

    image.png

  4. 通过分析ast，找出模版中引入的变量使用（analyze import usage in template via AST (#9729)）

    1. 解析器新增入口flag，（是否解析语句），默认时true

      image.png

    2. 新增creteSimpleExpression入口函数

      image.png

    3. 解析语句部分

      1. image.png

      2. children部分ast赋值到解析node对象上

        image.png

      3. 原来的code组装方式由原来的字符串拼接，现在采用Set进行整合去重

        image.png

  5. v-node指令监听语法升级为错误抛出

    image.png

  6. 删除v-is语法

    image.png

  7. 修复在v-pre中的插值语法

    image.png

release: v3.4.0-alpha.4 🔗

  1. 校验props的validator包含2个参数

    image.png

  2. 使用同样的解析参数进行编辑处理

    image.png

  3. 兼容最近的tc39提案，可以动态声明引入的类型https://github.com/tc39/proposal-import-attributes
1
2

import json from "./foo.json" with { type: "json" };
import("foo.json", { with: { type: "json" } });

image.png

  1. 透传filename属性

    image.png

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

    const ast = baseParse(`<div />`)
    
    const calls: any[] = []
    const plugin: NodeTransform = (node, context) => {
      calls.push({ ...context })
    }
    
    transform(ast, {
      filename: '/the/fileName.vue',
      nodeTransforms: [plugin]
    })
    
    expect(calls.length).toBe(2)
    expect(calls[1]).toMatchObject({
      filename: '/the/fileName.vue',
      selfName: 'FileName'
    })
  1. 提升ssr下面，hydrant对于html属性的检查，是否需要跳过检查

    image.png

  2. 增加 __VUE_PROD_HYDRATION_MISMATCH_DETAILS__标志，用于记录hydrant
  3. 增加MathML语法标签的支持

    image.png

  4. 增加组件类型中对于Slots的输出

    image.png

  5. 输出DefineType

    image.png

vue3 v3.4