function compile(template) {
	//模板 AST
	const ast = parse(template)
	//將模板 AST轉(zhuǎn)換為JavaScript AST
	transform(ast)
	// 代碼生成
	const code = generate(ast.jsNode)
	return code
}

function generate(node){
	const context = {
		// 存儲(chǔ)最終生成的渲染函數(shù)代碼
		code: '',
		// 在生成代碼時(shí)，通過(guò)調(diào)用 push 函數(shù)完成代碼的拼接
		push(code){
			context.code += code
		}
	}
	// 該方法完成代碼生成的工作
	genNode(node,context)
	// 返回渲染函數(shù)代碼
	return context.code
}

function generate(node){
	const context = {
		code: '',
		push(code){
			context.code += code
		},
		// 當(dāng)前縮進(jìn)的級(jí)別，初始值為 0，即沒(méi)有縮進(jìn)
		currentIndent: 0,
		// 該函數(shù)用來(lái)?yè)Q行，即在代碼字符串的后面追加 \n 字符
		// 另外，換行時(shí)應(yīng)該保留縮進(jìn)，所以還要追加 currentIndent * 2 個(gè)空格字符
		newline(){
			context.code += '\n'+` `.repeat(context.currentIndent)
		},
		// 用來(lái)縮進(jìn)，即讓 currentIndent 自增后，調(diào)用換行函數(shù)
		indent(){
			context.currentIndent++
			context.newline()
		},
		// 取消縮進(jìn)
		deIndent(){
			context.currentIndent--
			context.newline()
		},
	}
	genNode(node, context)
	return context.code
}

function genNode(node,context){
	switch(node.type){
		case 'FunctionDecl':
			genFunctionDecl(node,context)
			break
		case 'ReturnStatement':
			genReturnStatement(node,context)
			break
		case 'CallExpression':
			genCallExpression(node,context)
			break
		case 'StringLiteral':
			genStringLiteral(node,context)
			break
		case 'ArrayExpression':
			genArrayExpression(node,context)
			break
	}
}

function genFunctionDecl(node,context){
	// 從context 對(duì)象中取出工具函數(shù)
	const {push, indent, deIndent} = context
	push(`function ${node.id.name}`)
	push(`(`)
	//調(diào)用 genNodeList 為函數(shù)的參數(shù)生成代碼
	genNodeList(node.params, context)
	push(`)`)
	push(`{`)
	indent()
	//為函數(shù)體生成代碼，這里遞歸地調(diào)用了 genNode 函數(shù)
	node.body.forEach(n=>genNode(n,context))
	deIndent()
	push(`}`)
}

function render(){
	...函數(shù)體
}

function genNodeList(nodes, context){
	const {push} = context
	for(let i=0;i<nodes.length;i++){
		const node = nodes[i]
		genNode(node,context)
		if(i<nodes.length - 1){
			push(',')
		}
	}
}

function genArrayExpression(node, context){
	const {push} = context
	// 追加方括號(hào)
	push(`[`)
	genNodeList(node.elements, context)
	// 補(bǔ)全方括號(hào)
	push(`]`)
}

function genReturnStatement(node, context){
	const {push} = context
	push(`return `)
	genNode(node.return, context)
}
function genStringLiteral(node, context){
	const {push} = context
	// 對(duì)于字符串字面量，只需要追加與 node.value 對(duì)應(yīng)的字符串即可
	genNode(`'${node.value}'`)
}

function genCallExpression(node, context){
	const {push} = context
	// 取得被調(diào)用函數(shù)名稱和參數(shù)列表
	const {callee, arguments: args} = node
	// 生成函數(shù)調(diào)用代碼
	push(`${callee.name}`)
	genNodeList(args,context)
	push(`)`)
}

const ast = parse(`<div><p>Vue</p><p>Template</p></div>`)
transform(ast)
const code = generate(ast.jsNode)

function render (){
	return h('div',[h('p','Vue'), h('p','Template')])
}