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 小时前
React Native + OpenHarmony:自定义useFormik表单处理
javascript·react native·react.js
C澒3 小时前
面单打印服务的监控检查事项
前端·后端·安全·运维开发·交通物流
qq_532453533 小时前
使用 GaussianSplats3D 在 Vue 3 中构建交互式 3D 高斯点云查看器
前端·vue.js·3d
Swift社区4 小时前
Flutter 路由系统,对比 RN / Web / iOS 有什么本质不同?
前端·flutter·ios
2601_949833394 小时前
flutter_for_openharmony口腔护理app实战+我的实现
开发语言·javascript·flutter
雾眠气泡水@4 小时前
前端:解决同一张图片由于页面大小不统一导致图片模糊
前端
开发者小天4 小时前
python中计算平均值
开发语言·前端·python
我谈山美,我说你媚4 小时前
qiankun微前端 若依vue2主应用与vue2主应用
前端
大模型玩家七七4 小时前
混合检索不是折中,而是工程理性
android·java·javascript·数据库·人工智能·深度学习