babel-plugin-nornj-in-jsx

    5.3.4 • 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

    Install

    npm i babel-plugin-nornj-in-jsx

    DownloadsWeekly Downloads

    130

    Version

    5.3.4

    License

    MIT

    Unpacked Size

    49 kB

    Total Files

    12

    Last publish

    Collaborators

    • joe_sky