实现 transform 功能

src/compiler-core/src/parse.ts

@@ -33,7 +33,7 @@ function parseChildren(context, ancestors) {
 }
 
 function isEnd(context, ancestors) {
-	console.log("isEnd:", ancestors)
+	// console.log("isEnd:", ancestors)
 	const s = context.source
 	// 2.遇到为结束标签
 	// if (ancestors && s.startsWith(`</${ancestors}>`)) {

src/compiler-core/src/transform.ts

@@ -0,0 +1,41 @@
+import { NodeTypes } from "./ast"
+
+export function transform(root, options) {
+	const context = createTransformContext(root, options)
+	// 1.遍历，深度优先搜索 ----》递归
+	traverseNode(root, context)
+	// 2.修改 text content
+}
+
+function createTransformContext(root, options) {
+	const context = {
+		root,
+		nodeTransforms: options.nodeTransforms || [],
+	}
+	return context
+}
+
+function traverseNode(node, context) {
+	console.log("node:", node)
+
+	// if (node.type === NodeTypes.TEXT) {
+	// 	node.content = node.content + "mini-vue"
+	// }
+	const nodeTransforms = context.nodeTransforms
+	for (let index = 0; index < nodeTransforms.length; index++) {
+		const transform = nodeTransforms[index]
+		transform(node)
+	}
+
+	traverseChildren(node, context)
+}
+
+function traverseChildren(node, context) {
+	const children = node.children
+	if (children) {
+		for (let index = 0; index < children.length; index++) {
+			const node = children[index]
+			traverseNode(node, context)
+		}
+	}
+}

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

@@ -4,14 +4,14 @@ import { baseParse } from "../src/parse"
 describe("Parse", () => {
 	describe("interpolation", () => {
 		test("simple interpolation", () => {
-			const ast: any = baseParse("{{massage}}")
+			const ast: any = baseParse("{{message}}")
 
 			// root
 			expect(ast.children[0]).toStrictEqual({
 				type: NodeTypes.INTERPOLATION,
 				content: {
 					type: NodeTypes.SIMPLE_EXPRESSION,
-					content: "massage",
+					content: "message",
 				},
 			})
 		})
@@ -39,7 +39,7 @@ describe("Parse", () => {
 	})
 
 	test("hello, world", () => {
-		const ast: any = baseParse("<div>hi,{{massage}}</div>")
+		const ast: any = baseParse("<div>hi,{{message}}</div>")
 
 		expect(ast.children[0]).toStrictEqual({
 			type: NodeTypes.ELEMENT,
@@ -53,15 +53,15 @@ describe("Parse", () => {
 					type: NodeTypes.INTERPOLATION,
 					content: {
 						type: NodeTypes.SIMPLE_EXPRESSION,
-						content: "massage",
+						content: "message",
 					},
 				},
 			],
 		})
 	})
 
 	test("Nested element", () => {
-		const ast: any = baseParse("<div><p>hi</p>{{massage}}</div>")
+		const ast: any = baseParse("<div><p>hi</p>{{message}}</div>")
 
 		expect(ast.children[0]).toStrictEqual({
 			type: NodeTypes.ELEMENT,
@@ -81,7 +81,7 @@ describe("Parse", () => {
 					type: NodeTypes.INTERPOLATION,
 					content: {
 						type: NodeTypes.SIMPLE_EXPRESSION,
-						content: "massage",
+						content: "message",
 					},
 				},
 			],

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

@@ -0,0 +1,20 @@
+import { NodeTypes } from "../src/ast"
+import { baseParse } from "../src/parse"
+import { transform } from "../src/transform"
+
+describe("transform", () => {
+	it("happy path", () => {
+		const ast = baseParse("<div>hi,{{message}}</div>")
+
+		const plugin = (node) => {
+			if (node.type === NodeTypes.TEXT) {
+				node.content = node.content + "mini-vue"
+			}
+		}
+		transform(ast, {
+			nodeTransforms: [plugin],
+		})
+		const nodeText = ast.children[0].children[0]
+		expect(nodeText.content).toBe("hi,mini-vue")
+	})
+})