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