babel-plugin-react-directives

A babel plugin that provides some directives for react(any JSX), similar to directives of vue. And you can now try it online at playground.

中文文档

Table of Contents

• Usage
  • Installation
  • Configuring via .babelrc
  • Plugin options
• Directives
  • x-if
  • x-else-if and x-else
  • x-show
  • x-for
  • x-class
• Related Packages
• Known Issues
• CHANGELOG
• LICENSE

Usage

Requires node v10.0.0 or higher, babel v7.0.0 or higher.

Installation

use npm:

1npm install --save-dev babel-plugin-react-directives
2npm install --save react-directives-runtime

use yarn:

1yarn add --dev babel-plugin-react-directives
2yarn add react-directives-runtime

Configuring via .babelrc

1{
2  "plugins": [
3    "react-directives"
4  ]
5}

Plugin options

1{
2  "plugins": [
3    [
4      "react-directives",
5      {
6        "prefix": "x"
7      }
8    ]
9  ]
10}

• prefix: JSX props prefix for directives. Default: "x", example usage: x-if

Directives

x-if

If the x-if value is truthy, this element will be rendered, otherwise do not.

Example:

1const foo = <div x-if={true}>text</div>

Convert to:

1const foo = true ? <div>text</div> : null

x-else-if and x-else

The x-else-if must have a corresponding x-if. if x-if value is falsy, and x-else-if value is truthy, it will be rendered.

The x-else must have the corresponding x-if or x-if-else. When all corresponding x-if or x-else-if value are falsy, it will be rendered.

Example:

1const foo = (
2  <div>
3    <p x-if={data === 'a'}>A</p>
4    <p x-else-if={data === 'b'}>B</p>
5    <p x-else-if={data === 'c'}>C</p>
6    <p x-else>D</p>
7  </div>
8)

Convert to:

1const foo = (
2  <div>
3    {data === 'a'
4      ? <p>A</p>
5      : data === 'b'
6        ? <p>B</p>
7        : data === 'c'
8          ? <p>C</p>
9          : <p>D</p>
10    }
11  </div>
12)

x-show

The x-show controls the display or hiding of elements through the display of the style prop. If the x-show value is falsy, will set style.display = "none", otherwise do nothing.

Example:

1const foo = <div x-show={true}>text</div>

Convert to:

1const foo = (
2  <div style={{
3    display: true ? undefined : "none"
4  }}>text
5  </div>
6)

Of course, it will also merge other style props by calling the mergeProps method, for example:

1const foo = (
2  <div
3    style={{ color: 'red' }}
4    x-show={true}
5    {...extraProps}>
6    text
7  </div>
8)

will be converted to:

1const foo = (
2  <div
3    {...extraProps}
4    style={{
5      ...mergeProps.call(this, "style", [
6        { style: { color: 'red' } },
7        extraProps
8      ]),
9      display: true ? undefined : "none"
10    }}>text
11  </div>
12)

x-for

The x-for is used to traverse arrays to generate elements.

The value should like: (item, index) in list

• list: array for traversal
• item: current value
• index: current index (optional)

Note: If you use ESLint, you may receive an error that item and index are undeclared variables. Please install eslint-plugin-react-directives plugin to solve it.

Example:

1const foo = (
2  <ul>
3    <li
4      x-for={item in list}
5      key={item.id}>{item.name}
6    </li>
7  </ul>
8)

Convert to:

1const foo = (
2  <ul>
3    {list.map(item => (
4      <li key={item.id}>{item.name}</li>
5    ))}
6  </ul>
7)

Also note that if used with x-if, the x-for has a higher priority, for example:

1const foo = (
2  <ul>
3    <li
4      x-for={item in list}
5      x-if={item.name === 'alice'}
6      key={item.id}>{item.name}
7    </li>
8  </ul>
9)

will be converted to:

1const foo = (
2  <ul>
3    {list.map(item => (
4      item.name === 'alice'
5        ? <li key={item.id}>{item.name}</li>
6        : null
7    ))}
8  </ul>
9)

x-class

The x-class for conditionally joining classNames together by classnames, and it is useful for dynamically generating className. Usage is the same as classnames, the binding value will be passed as a parameter to the classNames method.

Example:

1const foo = <div x-class={{ abc: true, def: false }}>

Convert to:

1const foo = <div className={classNames({ abc: true, def: false })}>
2// className="abc"

Note: classNames method references runtime/classnames.js.

Of course, it will also merge other className props, for example:

1const foo = <div x-class={{ abc: true, def: false }} className="xyz">

will be converted to:

1const foo = <div className={classNames(["xyz", { abc: true, def: false }])}>
2// className="xyz abc"

The x-class can also be used with css-modules, the usage is as follows:

1import styles from './style.css';
2
3const foo = (
4  <div
5    className={styles.foo}
6    x-class={{
7      [styles.bar]: true,
8      [styles.qux]: false
9    }}
10  />
11)

Related Packages

• eslint-plugin-react-directives

Known Issues

• When using x-for in Typescript, the binding value item will report an error. The temporary solution is to declare the item variable before use. Such as declare let item: any. And it is not recommended to use x-for in Typescript.

CHANGELOG

See more information at: CHANGELOG

LICENSE

MIT