实现解析 element

src/compiler-core/src/ast.ts

@@ -3,4 +3,5 @@ export const enum NodeTypes {
 	INTERPOLATION,
 	// simple_expression
 	SIMPLE_EXPRESSION,
+	ELEMENT,
 }

src/compiler-core/src/parse.ts

@@ -8,13 +8,49 @@ export function baseParse(content: string) {
 function parseChildren(context) {
 	const nodes: any = []
 	let node
-	if (context.source.startsWith("{{")) {
+	const s = context.source
+	if (s.startsWith("{{")) {
 		node = parseInterpolation(context)
+	} else if (s[0] === "<") {
+		if (/[a-z]/i.test(s[1])) {
+			node = parseElement(context)
+		}
 	}
 	nodes.push(node)
 	return nodes
 }
 
+const enum TagType {
+	START,
+	END,
+}
+
+function parseElement(context) {
+	const element = parseTag(context, TagType.START)
+
+	parseTag(context, TagType.END)
+
+	console.log(context.source, "1111")
+
+	return element
+}
+
+function parseTag(context: any, TagType) {
+	// 1.解析tag
+	const match: any = /^<\/?([a-z]*)/i.exec(context.source)
+	console.log(match)
+	const tag = match[1]
+	// 2.删除处理完成的代码
+	advanceBy(context, match[0].length)
+	advanceBy(context, 1)
+	// console.log(context.source)
+	if (TagType === TagType.END) return
+	return {
+		type: NodeTypes.ELEMENT,
+		tag,
+	}
+}
+
 function parseInterpolation(context) {
 	const openDelimiter = "{{"
 	const closeDelimiter = "}}"

src/compiler-core/tests/parse.spec.ts

@@ -4,9 +4,9 @@ import { baseParse } from "../src/parse"
 describe("Parse", () => {
 	describe("interpolation", () => {
 		test("simple interpolation", () => {
-			// root
 			const ast: any = baseParse("{{massage}}")
 
+			// root
 			expect(ast.children[0]).toStrictEqual({
 				type: NodeTypes.INTERPOLATION,
 				content: {
@@ -16,4 +16,14 @@ describe("Parse", () => {
 			})
 		})
 	})
+	describe("element", () => {
+		test("simple element div", () => {
+			const ast: any = baseParse("<div></div>")
+
+			expect(ast.children[0]).toStrictEqual({
+				type: NodeTypes.ELEMENT,
+				tag: "div",
+			})
+		})
+	})
 })