const code = ``
const tokens = tokenize(code) // 詞法+語(yǔ)法+語(yǔ)義分析，生成token流
const tAst = parse(tokens) // 生成ast
const jsAst = transform(tAst) // 將ast轉(zhuǎn)化為jsAst
const renderCode = generate(jsAst) // 將jsAst轉(zhuǎn)化為render函數(shù)

<div>
  <h1 v-if="show">我愛(ài)前端</h1>
<div>

interface AstNode{
  // 元素類型,是html原生還是vue自定義
  type:string; 
  // 元素名稱，是div還是h1 
  tag:string;
  // 子節(jié)點(diǎn)，h1是div的子節(jié)點(diǎn)
  children:AstNode[];
  // 開(kāi)標(biāo)簽屬性內(nèi)容
  props:{
    type:string;
    name?:string;
    exp?:{
      ...
    }
    ...
  }[];
}

const fs = require('node:fs')
const code =  fs.readFileSync('./vue.txt','utf-8')

function parse(code){
    while(code.length){
        code = code.substring(1)
    }
}

const State = {
    // 初始
    initial:1,
    // 標(biāo)簽開(kāi)始
    start:2,
    // 標(biāo)簽名稱
    startName:3,
    // 標(biāo)簽文本
    text:4,
    // 標(biāo)簽結(jié)束
    end:5,
    // 標(biāo)簽結(jié)束名稱
    endName:6
}

const isAlpha = function(char){
    return /[a-zA-Z1-6]/.test(char)
}

function tokenize(code){
    let currentState = State.initial
    const tokens = []
    const chars = []
    while(code.length){
        const act = code[0]
        switch(currentState){
            case State.initial:
                if(act === '<'){
                    currentState = State.start
                }else if(isAlpha(act)){
                    currentState = State.text
                    chars.push(act)
                }
                break
            case State.start:
                if(isAlpha(act)){
                    currentState = State.startName
                    chars.push(act)
                }else if(act === '/'){
                    currentState = State.end
                }
                break
            case State.startName:
                if(isAlpha(act)){
                    chars.push(act)
                }else if(act === '>'){
                    // 切到初始狀態(tài)，形式閉環(huán)，記錄token
                    currentState = State.initial
                    tokens.push({
                        type:'tag',
                        name:chars.join('')
                    })
                    chars.length = 0
                }
                break
            case State.text:
                /**
                 * 1.<div></div>  act = i
                 * 2.<div>我愛(ài)前端</div> act = 愛(ài)
                 */
                if(isAlpha(act)){
                    chars.push(act)
                }else if(act === '<'){
                    currentState = State.start
                    tokens.push({
                        type:'text',
                        content:chars.join('')
                    })
                    chars.length = 0
                }
                break
            case State.end:
                // 當(dāng)遇到/才會(huì)切換到結(jié)束標(biāo)簽狀態(tài)
                if(isAlpha(act)){
                    currentState = State.endName
                    chars.push(act)
                }
                break
            case State.endName:
                if(isAlpha(act)){
                    chars.push(act)
                }else if(act === '>'){
                    currentState = State.initial
                    tokens.push({
                        type:'tagEnd',
                        name:chars.join('')
                    })
                    chars.length = 0
                }
                break
        }
        code = code.substring(1)
    }
    return tokens
}

const root = {
    type:'Root',
    children:[]
}
復(fù)制代碼

const stack = [root]
復(fù)制代碼

class Node{
    constructor(type,tag){
        this.type = type
        this.tag = tag
        this.children = []
    }
    setContent(content){
        this.content = content
    }
}
復(fù)制代碼

while(tokens.length){
        const p = stack[stack.length - 1]
        const act = tokens.shift()
        switch(act.type){
            case 'tag':{
                const e = new Node('Element',act.name)
                p.children.push(e)
                stack.push(e)
                break
            }
            case 'text':{
                const e = new Node('text')
                e.setContent(act.content)
                p.children.push(e)
                break
            }
            case 'tagEnd':{
                stack.pop()
            }
        }
}

function transform(tAst){
    const children = tAst.children
    if(Array.isArray(children)){
        for(let i=0;i<children.length;i++){
            transform(children[i])
        }
    }
}

function transform(tAst,ctx){
    const act = tAst
    const transforms = ctx.nodeTransforms
    for(let i=0;i<transforms;i++){
        if(typeof transforms[i] === 'function'){
            transforms[i](act,ctx)
        }
    }
    ......
}

function transform(tAst,ctx){
    // 當(dāng)前的節(jié)點(diǎn)樹(shù)
    ctx.act = tAst
    const transforms = ctx.nodeTransforms
    for(let i=0;i<transforms.length;i++){
        if(typeof transforms[i] === 'function'){
            transforms[i](ctx.act,ctx)
        }
    }
    const children = ctx.act.children
    if(Array.isArray(children)){
        // 當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)
        ctx.parent = ctx.act
        for(let i=0;i<children.length;i++){
            // 當(dāng)前節(jié)點(diǎn)樹(shù)是父節(jié)點(diǎn)的第幾個(gè)子節(jié)點(diǎn)
            ctx.index = i
            // 當(dāng)前節(jié)點(diǎn)的兄弟節(jié)點(diǎn)
            ctx.siblings = [arr[i-1],arr[i+1]].map(v=>v||null)
            transform(children[i],ctx)
        }
    }
}

function _replaceNode(newNode){
    this.act = newNode
    this.parent.children[this.index] = newNode
}
function transformElement(node,ctx){
    if(node.type === 'Element'){
        switch(node.tag){
            case 'h1':
                _replaceNode.call(ctx,{
                    type:'Element',
                    tag:'p',
                    children:node.children
                })
                break
        }
    }
}

function transform(tAst,ctx){
    // 退出回調(diào)列表
    const cbs = []
    ...
    const cb = transforms[i](ctx.act,ctx)
    if(typeof cb === 'function'){
       cbs.push(cb)
    }
    ...
    // 退出
    let i = cbs.length
    while(i--){
        cbs[i]()
    }
}

<div>
 <h1>123</h1>
</div>

function render(){
  return h('div',h('h1','123'))
}

{
  type:'FunctionDecl',
  id:{
      type:"Identifier",
      name:"render"
  },
  params:[],
  body:[
    {
      type:"ReturnStatement",
      return:{
        type:"CallExpression",
        callee:{
          type:"Identifier",
          name:"h"
        },
        arguments:[
          {
            type:"StringLiteral",
            value:"div"
          },
          {
            type:"ArrayExpression",
            elements:[
               //CallExpression類型,
              //CallExpression類型,
            ]
          }
        ]
      }
    }
  ]
}

function _newType(type,value,arguments){
    const o = {
        type,
    }
    switch(type){
        case 'StringLiteral':
            o.value = value
            break
        case 'Identifier':
            o.name = value
            break
        case 'ArrayExpression':
            o.elements = value
            break
        case 'CallExpression':
            o.callee = _newType('Identifier',value)
            o.arguments = arguments
            break
    }
    return o
}

function transformElement(node,ctx){
    return ()=>{
        if(node.type === 'Element'){
        }
    }
}

const callee = _newType('CallExpression','h',[
      _newType('StringLiteral',node.tag)
    // 參數(shù)二取決于子節(jié)點(diǎn)的數(shù)量，需要?jiǎng)討B(tài)生成
])

node.children.length === 1 
            ? callee.arguments.push(node.children[0].jsCode)
            : callee.arguments.push(node.children.map(v=>v.jsCode))

node.jsCode = callee

<div>
 <h1>123</h1>
</div>

h('div',[
  h('h1','123')
])

function transformRoot(node){
    return ()=>{
        if(node.type === 'Root'){
            node.jsCode = {
                type:"FunctionDecl",
                id:_newType("Identifier","render"),
                params:[],
                body:[
                    {
                        type:"ReturnStatement",
                        return:node.children[0].jsCode
                    }
                ]
            }
        }
    }
}

const ctx = {
    code: "",
    append(code) {
        this.code += code;
    },
    newLine(indent = 1) {
        this.code += "\n" + " ".repeat(indent * 2);
    },
};

const genMap = new Map([
    ['FunctionDecl',genFunctionDecl],
    ['ReturnStatement',genReturnStatement],
    ['StringLiteral',genStringLiteral],
    ['CallExpression',genCallExpression],
    ['ArrayExpression',genArrayExpression]
])

function genParams(nodes,ctx) {
    nodes.forEach((v,i)=>{
        genMap.get(v.type)(v,ctx)
        if(i<nodes.length-1){
            ctx.append(',')
        }
    })
}

function genFunctionDecl(node, ctx) {
    ctx.append(`function ${node.id.name}(`);
    genParams(node.params, ctx);
    ctx.append("){");
    ctx.newLine();
    node.body.forEach((v) => genMap.get(v.type)(v, ctx));
    ctx.newLine(0)
    ctx.append('}')
}

function genReturnStatement(node,ctx) {
    ctx.append('return ')
    genMap.get(node.return.type)(node.return,ctx)
}

function genCallExpression(node,ctx) {
    ctx.append(`${node.callee.name}(`)
    genParams(node.arguments,ctx)
    ctx.append(')')
}

function genStringLiteral(node,ctx) {
    ctx.append(`'${node.value}'`)
}

<div>
 <h1>123</h1>
 <h2>456</h2>
</div>

function genArrayExpression(node,ctx) {
    ctx.append('[')
    genParams(node.elements,ctx)
    ctx.append(']')
}