@cissie/babel-plugin-jsx

> TODO: description

Usage no npm install needed!

<script type="module">
  import cissieBabelPluginJsx from 'https://cdn.skypack.dev/@cissie/babel-plugin-jsx';
</script>

README

babel-plugin-jsx

一个 babel 插件,使 React 支持类似 VUE 的指令,简化 JSX 书写。

本插件基于 babel 直接操作 AST,所以不会带来任何性能影响,放心大胆的用吧。

用法

安装

npm install -D @cissie/babel-plugin-jsx

在 webpack 中配置 babel 插件,如果项目基于 webpack chain,可直接使用如下代码

config.module
  .rule('js')
  .use('babel-loader')
  .tap((args) => {
    const plugins = args.plugins;
    args.plugins = [
      path.resolve(
        __dirname,
        '../node_modules/@cissie/babel-plugin-jsx',
      ),
      ...plugins,
    ];
    return args;
  });

指令介绍

xif 条件选

<div xif={a && b}>123</div>

会被转换为

{
  a && b && <div>123</div>;
}

注:如果是 Fragment

<Fragment xif={a && b}>123</Fragment>

xbind 双向绑定

<>
  <Input xbind={v1} />
  <Radio xbind={v2} />
  <Switch xbind={v3} />
</>

会被转换为

<>
    <Input value={v1} onChange: e => setV1(e.target.value)/>
    <Radio value={v2} onSelect: value => setV2(value)/>
    <Switch checked={v3} onChange: value => setV3(value)/>

    <Input value={[v1, setV1]} onChange: e => setV1(e.target.value)/>
</>

理论上支持已知的 antd 组件。

注:使用 xbind 时需保证相应的 set 方法已被定义(驼峰命名)

xfor 循环

<Menu xfor={roleList}>
  {/* eslint-disable-next-line no-undef */}
  <Menu.Item key={item.role_id}>{item.role_name}</Menu.Item>
</Menu>

会被转换为

<Menu>
  {roleList.map((item, index) => (
    <Menu.Item key={item.role_id}>{item.role_name}</Menu.Item>
  ))}
</Menu>

注:可以通过设置{/* eslint-disable-next-line no-undef */}来通过 eslint 校验