babel-plugin-nornj-in-jsx

5.3.5 • Public • Published

Babel-Plugin-NornJ-in-jsx

一个可支持自由扩展的JSX语法增强插件 😉

NPM Version Coverage Status NPM Downloads

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语法并没有提供类似Vuev-ifv-forv-show等模板语法糖。当然,社区为JSX贡献了不少相关的插件,比如jsx-control-statements

Babel-Plugin-NornJ-in-jsx的设计灵感就来源于上述的jsx-control-statements。只不过,它比前者的功能要更加丰富得多;且可以支持扩展 😉

License

MIT

Dependencies (3)

Dev Dependencies (7)

Package Sidebar

Install

npm i babel-plugin-nornj-in-jsx

Weekly Downloads

6

Version

5.3.5

License

MIT

Unpacked Size

49.3 kB

Total Files

12

Last publish

Collaborators

  • joe_sky