babel-plugin-react-remove-properties

babel-plugin-react-remove-properties

Babel plugin for removing React properties.

Installation

npm install --save-dev babel-plugin-react-remove-properties

The problem solved

This is useful when using selectors like data-test to run selenium test. Those properties are useless when running the code in production. You can save bandwidth by removing them.

Example

In

class Foo extends React.Component {
  render() {
    return (
      <div className="bar" data-test="thisIsASelectorForSelenium">
        Hello Wold!
      </div>
    );
  }
}

Out

class Foo extends React.Component {
  render() {
    return (
      <div className="bar">
        Hello Wold!
      </div>
    );
  }
}

Usage

Via .babelrc (Recommended)

.babelrc

without options:

{
  "env": {
    "production": {
      "plugins": [
        "react-remove-properties"
      ]
    }
  }
}

with options. We accepts an array of property names that can be either strings or regular expressions:

{
  "env": {
    "production": {
      "plugins": [
        ["react-remove-properties", {"properties": ["data-test", "data-foo", /my-suffix-expression$/]}]
      ]
    }
  }
}

Via CLI

babel --plugins react-remove-properties script.js

Via Node API

without options:

require('babel-core').transform('code', {
  plugins: [
    'react-remove-properties',
  ],
});

with options:

require('babel-core').transform('code', {
  plugins: [
    ['react-remove-properties', {properties: ['data-test', 'data-foo', /my-suffix-expression$/]}],
  ],
});

License

MIT