1.0.1 • Published 5 years ago
babel-plugin-mobile-optimizer-react v1.0.1
babel-plugin-mobile-optimizer-react
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?
:star: this repo
License
MIT © SanketMaru