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 // ✅
}  
相关推荐
wordbaby4 分钟前
为什么刷新页面就 404?聊聊 SPA 路由与 Nginx 的那点事
前端
daols8810 分钟前
vxe-table 渲染器教程一:实现金额输入控件
javascript·vue.js·vxe-table
不好听61323 分钟前
React 核心概念:JSX、组件与数据驱动
前端·react.js
触底反弹25 分钟前
🔥 React 零基础入门(中):500 行屎山代码到组件化的蜕变
前端·javascript·react.js
不好听61325 分钟前
React vs Vue:两大前端框架技术选型深度对比
前端·vue.js·react.js
GuWenyue26 分钟前
Cursor黑盒拆解!1套LangChain.js手写Mini编程Agent,自动生成React项目,效率提升60%
前端·数据库·人工智能
GuWenyue26 分钟前
传统Agent工具两大痛点!300行代码落地MCP跨语言工具,彻底解耦LLM与工具
前端·人工智能·算法
小林ixn1 小时前
从 onclick 到 React 合成事件,再到完整应用逻辑:一次前端架构的深度剖析
前端·react.js·前端框架
Csvn2 小时前
🧩「找不到模块」排查全记录——Monorepo 下 TypeScript 路径别名的 5 种「不通」与根治方案
前端
腻害兔2 小时前
【若依项目-产品经理视角】RuoYi-Vue-Pro 源码拆解:字典、短信、邮件、通知——后台系统的“基础设施四件套“!
java·前端·vue.js·产品经理·ai编程