babel-plugin-transform-class-bound-properties

> This plugin transforms class bound properties
> with hot reloading supported

Installation

$3

``sh
npm install --save-dev babel-plugin-transform-class-bound-properties
`

$3

`sh
yarn add --dev babel-plugin-transform-class-bound-properties
`

Usage

Please make sure transform-class-bound-properties is listed before transform-class-properties.

$3

.babelrc

`json


this will enable the plugin in dev mode only (process.env.NODE_ENV !== 'production')


{
"plugins": ["transform-class-bound-properties"]
}
`

`json


this will enable the plugin in both dev mode and production mode


{
"plugins": ["transform-class-bound-properties", { "production": true }]
}
`

$3

`sh
babel --plugins transform-class-bound-properties script.js
`

$3

`js
require("babel-core").transform("code", {
plugins: ["transform-class-bound-properties"]
})
`

$3

Editing the .babelrc won't actually change the setup, unless you start the packager with yarn start --reset-cache to clean the transform cache.

Why?

Hot module reload (HMR) has been broken for class bound properties in React Native.

The "hot loading" message appears, but the changes don't show up.

`js
import React from 'react';
import {View, Text} from 'react-native';

export default class HotReloadingTest extends React.Component {
constructor(props) {
super(props);

this.manualBind = this.manualBind.bind(this);
}

render() {
return (


{this.manualBind()}


{this.autoBind()}


);
}

manualBind() {
// changes in this "manualBind" method shows up as usual

return (

Manual reloads fine

);
}

autoBind = () => {
// changes in this "autoBind" method don't show up

return (

Auto doesn’t hot reload

);
}
}
`

!HotReloadingTest

How it works?

This plugin transform a bound property into a corresponding unbound class method and a bind statement in constructor (same as manualBind method in the sample code above)

`js
class SomeClass {
boundFn1 = () => {
return this.field1
}

boundFn2 = ({ value }) => this.field2 + value

asyncBoundFn1 = async () => {
return await this.field1
}
}

# will be transformed to

class SomeClass {
constructor() {
this.boundFn1 = this.boundFn1.bind(this)
this.boundFn2 = this.boundFn2.bind(this)
this.asyncBoundFn = this.asyncBoundFn.bind(this)
}

boundFn1() {
return this.field1
}

boundFn2({ value }) {
return this.field2 + value
}

async asyncBoundFn() {
return await this.someFn()
}
}
`

NOTE:

By default, this plugin transforms bound properties only in DEV mode (process.env.NODE_ENV !== 'production').

In production mode (when you build the code for release), as we don't need hot reloading, the plugin doesn't transform anything, so bound properties will be transformed by the plugin babel-plugin-transform-class-properties as usual.

If you still want to enable this plugin for production mode, please set production option to true

`json
{
"plugins": ["transform-class-bound-properties", { "production": true }]
}
``