手摸手实现一个编译器（中）

<下拉框 选中值="番茄" :数据="{
    "list":[
        {
          "名称": "🍅",
          "id": "番茄"
        },
        {
          "名称": "🍌",
          "id": "香蕉"
        }
    ],
    "total": 2
}">
  <子组件></子组件>
</下拉框>

const { parse } = require('../src/zh-template-compiler')

describe('zh-template-compiler', () => {
  test('不带属性的组件', () => {
    const template = `<组件></组件>`
    const ast = parse(template)

    expect(ast.attrs.length).toBe(0)
    expect(ast.children.length).toBe(0)
    expect(ast.type).toBe(1)
    expect(ast.tag).toBe('组件')
  })
  
  test('包含子组件', () => {
    const template = `<组件><子组件></子组件></组件>`
    const ast = parse(template)

    expect(ast).toMatchSnapshot()
  })

  test('包含多个子组件', () => {
    const template = `<组件><第一个子组件></第一个子组件><第二个子组件></第二个子组件></组件>`
    const ast = parse(template)

    expect(ast).toMatchSnapshot()
  })

  test('包含多层子组件', () => {
    const template = `<组件><子组件><孙子组件></孙子组件></子组件></组件>`
    const ast = parse(template)

    expect(ast).toMatchSnapshot()
  })
})

describe('zh-template-compiler', () => {
  // ...接上述代码
  
  test('带静态属性的组件', () => {
    const template = `<组件 属性="值"></组件>`
    const ast = parse(template)

    const attr = ast.attrs
    expect(attr.length).toBe(1)
    expect(attr[0]).toEqual({
      isBind: false,
      name: "属性",
      value: "值"
    })
  })

  test('带动态属性的组件', () => {
    const template = `<组件 :属性="值"></组件>`
    const ast = parse(template)

    const attr = ast.attrs
    expect(attr.length).toBe(1)
    expect(attr[0]).toEqual({
      isBind: true,
      name: "属性",
      value: "值"
    })
  })

  test('复杂的属性值', () => {
    const template = `
    <下拉框 选中值="番茄" :数据="{
      "list":[
          {
            "名称": "🍅",
            "id": "番茄"
          },
          {
            "名称": "🍌",
            "id": "香蕉"
          }
      ],
      "total": 2
  }">
    <子组件></子组件>
  </下拉框>`

    const ast = parse(template)
    expect(ast).toMatchSnapshot()
  })

  test('带静态+动态属性的组件', () => {
    const template = `<组件 静态属性="静态属性的值" :动态属性="动态属性的值"></组件>`
    const ast = parse(template)

    const attrs = ast.attrs
    expect(attrs.length).toBe(2)
    expect(attrs).toEqual([{
      isBind: false,
      name: "静态属性",
      value: "静态属性的值"
    }, {
      isBind: true,
      name: "动态属性",
      value: "动态属性的值"
    }])
  })
})

describe('zh-template-compiler', () => {
  // ...接上述代码
  
  test('组件名称只能包含汉字', () => {
    const template = `<组件1></组件1>`

    try {
      parse(template)
    } catch (e) {
      console.log(e)
      expect(e.message).toBe('Expected ":", ">", or [一-龥] but "1" found.')
    }
  })

  test('属性名称只能包含汉字', () => {
    const template = `<组件 属性1="值1"></组件>`

    try {
      parse(template)
    } catch (e) {
      console.log(e)
      expect(e.message).toBe('Expected \"=\" or [一-龥] but \"1\" found.')
    }
  })
})

Program
 = program:Tag {
  return program;
 }

// 一个完整的模板定义
// ws 即空白符，开始标签前随便你输入几个空白字符
// StartTag，开始标签的匹配
// children: (Tag*) 很关键，很关键，很关键！！！反复匹配 Tag 规则。
// EndTag，结束标签的匹配
// 最后的 action 即处理函数很关键，拿到匹配信息你可以做任何的判断、格式化
// 比如这里的 start 和 end 标签的 tag 不一致即组件名不一致，那必须报错。vue2中是通过栈去维护的这个关系，可以看到 PEG.js 的处理更加简洁。
Tag
 = ws
 start:StartTag
 children: (Tag*)
 end:EndTag
 ws
 {
   if (start.tag !== end.tag) {
     throw Error('开始标签和结束标签不一致')
   }
   
   return {
     ...start,
     children
   }
 }

// 开始标签和属性
// component:$zh 组件名只能是中文，zh = [\u4e00-\u9fa5]+ 匹配一个以上的汉字，有个细节，zh 前面有一个 $，这里拿到的 component 是一个匹配的中文字符串，如果不加这个 $,那拿到的是一个匹配数组。忘记这个语法的童鞋可以回到上篇再回顾哦
// attrsList: (...)* 匹配任意个 attr，并存入 attrList
// attrs:Attrs 匹配单个组件属性
// 最后 action 处理返回了一个对象，这里的 type = 1 跟 vue2 中的 VNode 保持一致，表示的是组件类型
StartTag
 = "<"
   ws
   component:$zh
   attrList: (
     ws
     attrs:Attrs
     ws
     {
       if (attrs.name) {
         return attrs
       }
     }
   )*
   ">" {
     return {
       type: 1,
       tag: component,
       attrs: attrList
     }
   }

// 结束标签
EndTag
 = "</"
 component:$zh
 ">"
 {
   return {
     tag: component
   }
 }

// 匹配中文字符
zh = [\u4e00-\u9fa5]+

// 匹配组件属性
// isBind:name_separator ? 匹配到 : 就返回对应的串，然后返回 null
// attrName:$zh+ 属性名称是一个中文字符串
// quotation_mark 引号
// attrValue:( $zh / JSON_text ) 属性值可以是一个中文，或者是一个 JSON 文本，JSON_text 是利用了上篇文章中那个定义哦，想了解的可以回去上文查看注释。
// 全部匹配完成之后返回匹配对象
Attrs
 = isBind:name_separator ?
 attrName:$zh+
 "="
 quotation_mark
 attrValue:(
   $zh / JSON_text
 )
 quotation_mark {
   if (attrName) {
     let hasVbind = isBind ? true : false
     return {
       isBind: hasVbind,
       name: attrName,
       value: attrValue
     }
   } 
 }

npx pegjs -o zh-template-compiler.js src/zh-template-compiler.pegjs

{
   "type": 1,
   "tag": "下拉框",
   "attrs": [
      {
         "isBind": false,
         "name": "选中值",
         "value": "番茄"
      },
      {
         "isBind": true,
         "name": "数据",
         "value": {
            "list": [
               {
                  "名称": "🍅",
                  "id": "番茄"
               },
               {
                  "名称": "🍌",
                  "id": "香蕉"
               }
            ],
            "total": 2
         }
      }
   ],
   "children": [
      {
         "type": 1,
         "tag": "子组件",
         "attrs": [],
         "children": []
      }
   ]
}