38-mini-vue 实现解析 element

pas1362026-01-30 11:36

实现解析 element

思路

区别与解析插值语法，解析 element 需要不同类型和方法, 尖角号和第一个字符是字母
将解析完成后的代码都删掉

测试代码

js 复制代码

describe("element",()=> {
  it("simple element div",()=>{
    const ast = baseParse("<div></div>")
    expect(ast.children[0]).toStrictEqual({
      type: NodeTypes.ELEMENT,
      tag: "div"
    })
  })
})

效果实现

js 复制代码

// compiler-core/src/parse.ts
function parseChildren(context) {
  const nodes: any[] = []
  let node:any
  const s = context.source
  if (s.startsWith('{{')) {
     node = parseInterpolation(context)
  } else if(s[0] === '<') { // ✅ 匹配出标签
    if(/[a-z]/i.test(context.source[1])){ // ✅
      console.log('解析到标签');
      node = parseElement(context) // 处理标签
    }
  }
  nodes.push(node)
  return nodes
}

function parseElement(context) { // ✅
  let element = parseTag(context, TagType.Start ) // ✅ 处理前标签
  parseTag(context, TagType.End) // ✅ 处理后标签
  return element
}
function parseTag(context, type: TagType) { // ✅
  // 1. 解析 tag
  const match:any = /^<\/?([a-z]*)/i.exec(context.source)
  const tag = match[1]

  // 2. 删除处理完成的代码
  advanceBy(context, match[0].length)
  advanceBy(context, 1)
  if(type === TagType.End) return
  return {
      type: NodeTypes.ELEMENT,
      tag
    }
}