15.4.2 转换上下文与节点操作

function traverseNode(ast, context) {
  // 设置当前转换的节点信息 context.currentNode
  context.currentNode = ast

  const transforms = context.nodeTransforms
  for (let i = 0; i < transforms.length; i++) {
    transforms[i](context.currentNode, context)
  }

  // 递归转换子节点
  const children = context.currentNode.children
  if (children) {
    for (let i = 0; i < children.length; i++) {
      // 递归之前，把当前节点设为父节点，并记录位置索引
      context.parent = context.currentNode
      context.childIndex = i
      traverseNode(children[i], context) // 透传 context
    }
  }
}

function transform(ast) {
  const context = {
    currentNode: null,   // 当前正在转换的节点
    childIndex: 0,       // 当前节点在父节点 children 中的索引
    parent: null,        // 当前转换节点的父节点
    nodeTransforms: [transformElement, transformText]
  }

  traverseNode(ast, context)
  console.log(dump(ast))
}

// 用于替换节点的函数，接收新节点作为参数
replaceNode(node) {
  // 替换的本质是修改 AST：
  // 找到当前节点在父节点 children 中的位置（context.childIndex），用新节点替换
  context.parent.children[context.childIndex] = node
  // 当前节点已被替换，同步把 currentNode 指向新节点
  context.currentNode = node
}

function transformText(node, context) {
  if (node.type === 'Text') {
    // 把文本节点替换为元素节点
    context.replaceNode({ type: 'Element', tag: 'span' })
  }
}

// 测试：遍历是深度优先的，若「文本外再套一层标签」，
// 会导致后续节点的 parent 变化、替换失败，所以用结构简单的模板测试
const ast = parse(`<div>hello<p>vue</p></div>`)
transform(ast)

// 用于删除当前节点
removeNode() {
  if (context.parent) {
    // 根据当前节点的索引，从父节点的 children 中删除当前节点
    context.parent.children.splice(context.childIndex, 1)
    // 将 currentNode 置空，作为「已被删除」的标记
    context.currentNode = null
  }
}

for (let i = 0; i < transforms.length; i++) {
  transforms[i](context.currentNode, context)
  // 当前节点被移除了 → 直接返回
  if (!context.currentNode) return
}

function transformText(node, context) {
  if (node.type === 'Text') {
    // 直接移除文本节点
    context.removeNode()
  }
}

// 测试
const ast = parse(`<div>hello<p>vue</p></div>`)
transform(ast)