babel-plugin-transform-class-bound-properties

babel-plugin-transform-class-bound-properties

This plugin transforms class bound properties with hot reloading supported

Installation

Via npm

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

Via yarn

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

Usage

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

Via .babelrc (Recommended)

.babelrc

# this will enable the plugin in dev mode only (process.env.NODE_ENV !== 'production')
{
  "plugins": ["transform-class-bound-properties"]
}

# this will enable the plugin in both dev mode and production mode
{
  "plugins": ["transform-class-bound-properties", { "production": true }]
}

Via CLI

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

Via CLI

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

Important Note

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.

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 (
      <View style={{flex: 1, paddingTop: 20}}>
        <View style={{flex: 1, backgroundColor: 'rgba(0, 255, 0, 0.1)'}}>
          {this.manualBind()}
        </View>
        <View style={{flex: 1, backgroundColor: 'rgba(255, 0, 0, 0.1)'}}>
          {this.autoBind()}
        </View>
      </View>
    );
  }

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

    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Manual reloads fine</Text>
      </View>
    );
  }

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

    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Auto doesn’t hot reload</Text>
      </View>
    );
  }
}

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)

  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

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