@fluixi/腾讯-parser
Fluixi 的解析器 html`...` 模板:无依赖的标识符+
生成一个 位置, 可恢复的模板 AST。 。 。 .
它是需要理解模板的一切的共同基础。 今天,我们..
实值 @fluixi/compiler 财务报告和审定财务报表 @fluixi/ts-plugin; 要点
拆分就是他们同意一个语法,一个节点模型和一组
诊断,且一个前题或语言服务器可以稍后加入,无需秒
语法出现.
为什么一个单独的解析器
编译器曾将模板文本用一通直接扫描成代码源IR. 这对排放代码是罚款,但对于工具没有用处:没有源跨度,没有 诊断,没有错误恢复, 和硬接通 Babel。 这个包是 解析层分出,使每个工具都能再利用:
pieces → Reader (lexing + holes) → parseTemplate → Template AST
│
┌─────────────────────────────────┴──────┐
compiler (→ IR) TS plugin
解析器从不解决内部的 JavaScript ${...}。每个孔被记录为
a 一个 不透明槽 (指数+源跨). 下游,每个工具绑住槽
对它自己的代表:汇编器中的 Babel 节点, a ts.Expression 在TS系统中
插件, 格式中的原始文本 。 单接线是保持 解析器主机-不可知.
使用量
import { parse } from '@fluixi/template-parser';
const { root, diagnostics } = parse([
'<button @click=', // static segment 0
'>', // hole 0 sits between segment 0 and 1
'</button>', // static segment 1
]); // → <button @click=${…}>${…}</button>
parse(statics) 取静态字符串片段(比
和返回 { root, diagnostics }。具有真实源位置的主机
构建 Piece[] 直接(通过) parseTemplate所以,每一个跨度地图回
原始档案.
如何解释
标准 HTML,组件(<Button/>, (中文(简体) ), <Ctx.Provider>),碎片(<>, (中文(简体) ),
注释, SVG, 原始文本元素, 空白元素, 以及完整绑定的表面 :
| 语法 | 节点 |
|---|---|
name, (中文(简体) ), name="x", (中文(简体) ), name=${x}, (中文(简体) ), name="a ${x} b" | AttributeNode |
?disabled | AttributeNode (布尔) |
.currentTime=${t} | PropertyBindingNode |
@click=${h} 编号 : onClick=${h} | EventBindingNode |
ref=${el} | RefBindingNode |
...${props} 编号 : ${obj} | SpreadNode |
if=${c} 编号 : else | IfDirectiveNode 编号 : ElseDirectiveNode |
each=${xs} (+ 数) key(中文(简体) ) | EachDirectiveNode |
bind:value=${sig} | BindDirectiveNode |
class:active=${on} | ClassDirectiveNode |
style:color=${c} | StyleDirectiveNode |
use=${d} 编号 : use:tooltip | UseDirectiveNode |
扩展性
添加指令是指令中的新条目 登记永远不变 到核心解析器 :
import { CORE_DIRECTIVES, parseTemplate, type DirectiveDescriptor } from '@fluixi/template-parser';
const highlight: DirectiveDescriptor = {
id: 'highlight',
match: (name) => name === 'highlight',
build: (raw) => ({ kind: 'Attribute', name: 'data-highlight', value: raw.value, boolean: false, loc: raw.loc }),
};
parseTemplate(pieces, { directives: [highlight, ...CORE_DIRECTIVES] });
诊断
解剖师从不扔 也从不拖延 它从错误的输入中恢复
解析:未关闭/不匹配/出错标签,未终止
注释、重复指令和无效约束。 每个诊断都带有
SourceSpan。 。 。 .
许可证
麻省理工学院