39-mini-vue 实现解析 text 功能

实现解析 text 功能

  1. 测试
js 复制代码
describe("text", ()=>{
  it("simple text",()=>{
    const ast = baseParse("some text")
    expect(ast.children[0]).toStrictEqual({
      type: NodeTypes.TEXT,
      content: "some text"
    })
  })
})
  1. 思路:
    * 如果没有命中插值和元素的话,默认就走 Text 类型
    * 如果是 Text 类型,我们取出 content 值,然后推进 some text,也就是删除 some text
  2. 功能实现
js 复制代码
// compiler-core/parse.ts
function parseChildren(context) {
  const nodes: any[] = []
  let node: any
  const s = context.source
  if (s.startsWith('{{')) {
    node = parseInterpolation(context)
  } else if (s[0] === '<') {
    if (/[a-z]/i.test(context.source[1])) {
      node = parseElement(context)
    }
  }
  if (!node) { // ✅ text类型
    node = parseText(context)
  }
  nodes.push(node)
  return nodes
}
function parseText(context: any) { // ✅ 解析过程
  // 1. 获取 content
  const content = parseTextData(context, context.source.length)
  // 2. 推进
  advanceBy(context, content.length)
  return {
    type: NodeTypes.TEXT,
    content: "some text"
  }
}
// ✅ 函数抽离
function parseTextData(context:any, length: number) {
  return context.source.slice(0, length)
}

// src/ast.ts  
export const enum NodeTypes {
  INTERPOLATION,
  SIMPLE_EXPRESSION,
  ELEMENT,
  TEXT // ✅
}  
相关推荐
ℋᙚᵐⁱᒻᵉ鲸落3 小时前
移动端滑动手势冲突:overflow: auto导致外层横向滑动失效
前端·javascript·css·vue.js·html
默_笙4 小时前
🎃 前端学了 Next.js,后端该学啥?NestJS 就是 Node 版的蜜雪冰城
前端·javascript
前端snow5 小时前
ai agent --- 实现 openclaw 定时间效果
前端
码云之上5 小时前
换模型之后,Chatbot 为什么要自己做 compact?
前端·agent·前端工程化
এ慕ོ冬℘゜5 小时前
navigator 导航对象 BOM制作方法
javascript
星栈6 小时前
自定义 UI-UX-Pro-Max 的 CSV 知识库,把 AI 生成的后台拉回行业该有的样子
前端·agent·weui
研☆香6 小时前
简单的图片上传 删除 预览
前端
ITresearchGuest6 小时前
我用 AI 一小时写了一个世界杯数据可视化平台|前端 VibeCoding 初体验
前端·人工智能·信息可视化
慧一居士7 小时前
Vite项目中使用Less步骤,详细使用示例
前端·css
花间相见7 小时前
【LangChain组件03】—— LangChain Agents 执行与状态:工作流程与状态管理实战
java·前端·langchain