Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

增加对es6反单引号解析支持, 给regular增加pre功能 #212

Open
tswordyao opened this issue May 28, 2018 · 0 comments
Open

增加对es6反单引号解析支持, 给regular增加pre功能 #212

tswordyao opened this issue May 28, 2018 · 0 comments

Comments

@tswordyao
Copy link

tswordyao commented May 28, 2018

前提:
regular没有r-pre指令, 因为先做了DSL解析,也没法实现< my-pre >组件

分析:
vue先进行了domparse,借鉴不了.
借鉴react, react自然地利用{``}表示多行字符, 恰好regular中对{内容}也做了解析, 当表示{'常量字符串'}的时候, react's jsx 和 regular's DSL 正好达到了统一.

实现参考:

// lexer.js
// 增加对es6反单引号的识别, {'hello'} 即可升级为 {`多行`}
JST_STRING:  [ /'([^']*)'|`([^`]*)`|"([^"]*)"/, function(all, one, two,three){ //"'
  	return {type: 'STRING', value: one || two || three || ""}
}, 'JST'],
//Regular.js
// 在_touchExpr 中 new Function求值前, 替换反单引号为普通字符串, 做兼容
var bodyMathMline=expr.body.match(/^'\s*\n/);
if(bodyMathMline && bodyMathMline.index===0){
    expr.body=expr.body.replace(/\n/g,'\\\n');
}

// 使用

<template ref="tpl">
    {`
     <h5>webstorm中可以识别html格式{usr.group}</h5>
     <span on-click={this.emitDelete()}>删除</span>
     <span class="um-common">{item.providerName}</span>
    `}
< /template >

这样在lexer里处理,应该比如下新定义一个DSL语法的改动要小很多
{#pre}
....
{/pre}

另外原先的'([^']*)'这类识别也是有不足的 ,就是中间出现\'转义字符也非法. 这个问题依然存在。

反单引号,因为用到 ` 做起止的识别, 最后转化为 ' 包裹,  按现在的解析方式, 不对内部转义引号放行, pre内容中`和'都不可以使用。  不过这个影响很小, 价值也小。
{`常量字符串`} 比 {'常量字符串'} 好的是---如果实在要用单引号, 内部可以支持\'的形式。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants