puntorigen / babel-plugin-react-directives

A babel plugin that provides some directives for react(JSX), similar to directives of vue.

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:

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

use yarn:

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

Configuring via .babelrc

{
  "plugins": [
    "react-directives"
  ]
}

Plugin options

{
  "plugins": [
    [
      "react-directives",
      {
        "prefix": "x"
      }
    ]
  ]
}

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

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

Convert to:

const 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:

const foo = (
  <div>
    <p x-if={data === 'a'}>A</p>
    <p x-else-if={data === 'b'}>B</p>
    <p x-else-if={data === 'c'}>C</p>
    <p x-else>D</p>
  </div>
)

Convert to:

const foo = (
  <div>
    {data === 'a'
      ? <p>A</p>
      : data === 'b'
        ? <p>B</p>
        : data === 'c'
          ? <p>C</p>
          : <p>D</p>
    }
  </div>
)

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:

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

Convert to:

const foo = (
  <div style={{
    display: true ? undefined : "none"
  }}>text
  </div>
)

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

const foo = (
  <div
    style={{ color: 'red' }}
    x-show={true}
    {...extraProps}>
    text
  </div>
)

will be converted to:

const foo = (
  <div
    {...extraProps}
    style={{
      ...mergeProps.call(this, "style", [
        { style: { color: 'red' } },
        extraProps
      ]),
      display: true ? undefined : "none"
    }}>text
  </div>
)

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:

const foo = (
  <ul>
    <li
      x-for={item in list}
      key={item.id}>{item.name}
    </li>
  </ul>
)

Convert to:

const foo = (
  <ul>
    {list.map(item => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
)

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

const foo = (
  <ul>
    <li
      x-for={item in list}
      x-if={item.name === 'alice'}
      key={item.id}>{item.name}
    </li>
  </ul>
)

will be converted to:

const foo = (
  <ul>
    {list.map(item => (
      item.name === 'alice'
        ? <li key={item.id}>{item.name}</li>
        : null
    ))}
  </ul>
)

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:

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

Convert to:

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

Note: classNames method references runtime/classnames.js.

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

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

will be converted to:

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

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

import styles from './style.css';

const foo = (
  <div
    className={styles.foo}
    x-class={{
      [styles.bar]: true,
      [styles.qux]: false
    }}
  />
)

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