0.0.21 • Published 2 years ago
@ra-lib/babel-plugin-attribute-wrapper v0.0.21
babel-plugin-attribute-wrapper
jsx 属性包装babel插件
API
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
importName | 非必须,引入名称,importName存在 import { importName as method} from packageName; 不存在:import method from packageName | string | - |
importName | 必须,引入的报名 | string | - |
attributeName | 必须,要处理的属性名称,比如 r-code、className等 | string | - |
methodName | 非必须,处理函数名称 | string | method |
conditional | 非必须,是否使用三元操作 | boolean | false |
replaceAttributeName | 非必须,需要替换的属性名称 | string | conditional===true ? null : wrapperAttributedName 丨丨 attributeName ; |
wrapperAttributedName | 非必须,值需要包裹的属性名称,attributeName={xxx} onClick={handleClick} => onClick={method(xxx, handleClick)} | string | - |
negation | 非必须,取反 disabled={!_method(xxx)} | boolean | false |
示例
className={xxx} 转 className={_method(xxx)}
babel配置:
{
plugins: [
[
'babel-plugin-attribute-wrapper',
{
packageName: 'classnames',
attributeName: 'className',
},
'className',
]
]
}
jsx源码:
<div>
<div>包裹classnames</div>
<div className={[styles.title, {[styles.disabled]: disabled}]}/>
<div className="title"/>
</div>
转换为:
import _method from "classnames";
<div>
<div>包裹classnames</div>
<div className={_method([styles.title, {[styles.disabled]: disabled}])}/>
<div className={_method("title")}/>
</div>
三元运算_method(xxx) ? : null
babel配置:
{
plugins: [
[
'babel-plugin-attribute-wrapper',
{
importName: 'hasPermission',
packageName: 'src/commons',
attributeName: 'r-code',
conditional: true,
},
'permission-remove',
]
]
}
jsx源码:
<div>
<div>三元操作</div>
<div r-code/>
<div r-code="ADD_USER"/>
<div r-code={a.code}/>
</div>
转换为:
import {hasPermission as _method} from "src/commons";
<div>
<div>三元操作</div>
{_method(true) ? <div/> : null}
{_method("ADD_USER") ? <div/> : null}
{_method(a.code) ? <div/> : null}
</div>
添加disabled={!_method(xxx)}属性
babel配置:
{
plugins: [
[
'babel-plugin-attribute-wrapper',
{
importName: 'hasPermission',
packageName: 'src/commons',
attributeName: 'd-code',
replaceAttributeName: 'disabled',
negation: true,
},
'permission-disabled',
]
]
}
jsx源码:
<div>
<div>替换为disabled属性</div>
<div d-code="ADD"/>
<div d-code>只写r-code属性,缺省值,默认true</div>
</div>
转换为:
import {hasPermission as _method} from "src/commons";
<div>
<div>替换为disabled属性</div>
<div disabled={!_method("ADD")}/>
<div disabled={!_method(true)}>只写r-code属性,缺省值,默认true</div>
</div>
r-report="用户保存" onClick={this.handleClick} => onClick={_method("用户保存", this.handleClick)}
babel配置:
{
plugins: [
[
'babel-plugin-attribute-wrapper',
{
importName: 'report',
packageName: 'src/commons',
attributeName: 'r-report',
wrapperAttributedName: 'onClick',
},
'wrapper',
]
]
}
jsx源码:
<div>
<div>劫持onClick</div>
<div r-report={reportToServer}></div>
<div r-report="用户保存" onClick={this.handleClick}></div>
<div r-report={a && b} onClick={handleClick}></div>
<div r-report={true} onClick={(e) => handleCLick(e, 12)}></div>
</div>
转换为:
import {report as _method} from "src/commons";
<div>劫持onClick</div>
<div onClick={_method(reportToServer)}></div>
<div onClick={_method("用户保存", this.handleClick)}></div>
<div onClick={_method(a && b, handleClick)}></div>
<div onClick={_method(true, e => handleCLick(e, 12))}></div>