Skip to content

peakchen90/babel-plugin-react-directives

Repository files navigation

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.

Travis (.org) branch Codecov node npm GitHub

中文文档

Table of Contents

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

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