joe-sky
Babel-Plugin-NornJ-in-jsx
一个可支持自由扩展的JSX语法增强插件 :wink:
Babel-Plugin-NornJ-in-jsx是一个能为 JSX 带来更多丰富语法的 Babel 插件，比如条件及循环语句：
const Button = () => {
return (
<div>
<for i={0} to={10}>
<if condition={i < 5}>
<i>less than 5</i>
<else>
<i>greater than 5</i>
</else>
</if>
</for>
</div>
);
};以及类似 Vue、Angular 的指令：
const Button = props => {
return (
<div>
<input type="button" n-show={props.showBtn} />
</div>
);
};还有过滤器：
const Button = props => {
return <div>{n`${props.name} | upperFirst`}</div>;
};更重要的是，除了以上这些预置的语法，还支持像 Vue、Angular 那样自由扩展新的语法：
import nj from 'nornj';
import cn from 'classnames';
nj.registerExtension('class', opts => cn(opts.value()));
const Button = props => {
return (
<div>
<input
type="button"
n-class={{
className1: true,
className2: props.hasClassName2
}}
/>
</div>
);
};为什么创建这个插件？
在React项目开发中，原生的JSX语法并没有提供类似Vue的v-if、v-for、v-show等模板语法糖。当然，社区为JSX贡献了不少相关的插件，比如jsx-control-statements。
而Babel-Plugin-NornJ-in-jsx的设计灵感就来源于上述的jsx-control-statements。只不过，它比前者的功能要更加丰富得多；且可以支持扩展 :wink:。
License
MIT