babel-plugin-mobile-optimizer-react

1.0.1 • Public • Published

babel-plugin-mobile-optimizer-react

BuildStatus npm

 

Babel plugin that removes class methods and JSX elements based on conditions.

Conditions are passed based on env variables which are   JSX_ENV :- Remove JSX Elements matching with element name. CLASS_METHOD_ENV :- Remove class methods ending with this string

 

Example

Condition is that we want to remove desktop related code when viewing the web app in a mobile device. This plugin helps to remove the code during the build time itself when a chunk is created.

Your App.js that contains this code:

export default class App extends Component {
 
  handleClick_mobile() {
    console.log("Mobile Handle Click");
  }
 
  handleClick_desktop() {
    console.log("Desktop handle Click");
  }
 
  render() {
    return (
      <div>
        <table>
          <tr data-mobile onClick={this.handleClick_mobile.bind(this)}>
            <td>Mobile</td>
          </tr>
          <tr data-desktop onClick={this.handleClick_desktop.bind(this)}>
            <td>Web</td>
          </tr>
        </table>
      </div>
    );
  }
}

will be transpiled to:

export default class App extends Component {
 
  handleClick_mobile() {
    console.log("Mobile Handle Click");
  }
 
  render() {
    return (
      <div>
        <table>
          <tr data-mobile onClick={this.handleClick_mobile.bind(this)}>
            <td>Mobile</td>
          </tr>
        </table>
      </div>
    );
  }
}

 

You like?

⭐️ this repo

 

License

MIT © SanketMaru

Package Sidebar

Install

npm i babel-plugin-mobile-optimizer-react

Weekly Downloads

0

Version

1.0.1

License

MIT

Unpacked Size

5.24 kB

Total Files

6

Last publish

Collaborators

  • sanketmaru