38-mini-vue 实现解析 element

实现解析 element

1. 思路

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

2. 测试代码

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

3. 效果实现

// compiler-core/src/parse.tsfunctionparseChildren(context){constnodes:any[]=[]letnode:anyconsts=context.sourceif(s.startsWith('{{')){node=parseInterpolation(context)}elseif(s[0]==='<'){// ✅ 匹配出标签if(/[a-z]/i.test(context.source[1])){// ✅console.log('解析到标签');node=parseElement(context)// 处理标签}}nodes.push(node)returnnodes}functionparseElement(context){// ✅letelement=parseTag(context,TagType.Start)// ✅ 处理前标签parseTag(context,TagType.End)// ✅ 处理后标签returnelement}functionparseTag(context,type:TagType){// ✅// 1. 解析 tagconstmatch:any=/^<\/?([a-z]*)/i.exec(context.source)consttag=match[1]// 2. 删除处理完成的代码advanceBy(context,match[0].length)advanceBy(context,1)if(type===TagType.End)returnreturn{type:NodeTypes.ELEMENT,tag}}