# babel-plugin-transform-class-bound-properties
> This plugin transforms bound properties declared with the arrow function property initializer syntax
Latest version **1.0.2** (published 2019-01-14) · MIT license · 0 weekly downloads
## Install
```sh
npm install babel-plugin-transform-class-bound-properties
pnpm add babel-plugin-transform-class-bound-properties
yarn add babel-plugin-transform-class-bound-properties
bun add babel-plugin-transform-class-bound-properties
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.2 |
| Published | 2019-01-14 |
| First published | 2018-01-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 100.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Trong Nguyen |
| Maintainers | trongnd |
| Keywords | babel-plugin, transform-class-bound-properties, react, react-native, hot-reload, hmr |
## Links
- npm: https://www.npmjs.com/package/babel-plugin-transform-class-bound-properties
- Repository: https://github.com/trongnd/babel-plugin-transform-class-bound-properties
- Homepage: https://github.com/trongnd/babel-plugin-transform-class-bound-properties#readme
- Issues: https://github.com/trongnd/babel-plugin-transform-class-bound-properties/issues
- npm.io page: https://npm.io/package/babel-plugin-transform-class-bound-properties
## Dependencies (1)
- [babel-plugin-syntax-class-properties](https://npm.io/package/babel-plugin-syntax-class-properties.md) ^6.8.0
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 1.0.2 (latest) — 2019-01-14
- 1.0.1 — 2018-01-25
## README
# babel-plugin-transform-class-bound-properties
> This plugin transforms class bound properties
> with hot reloading supported
## Installation
### Via `npm`
```sh
npm install --save-dev babel-plugin-transform-class-bound-properties
```
### Via `yarn`
```sh
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**
```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 }]
}
```
### Via CLI
```sh
babel --plugins transform-class-bound-properties script.js
```
### Via CLI
```js
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](https://github.com/facebook/react-native/issues/15363) 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
);
}
}
```
## 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 }]
}
```
---
_Source: https://npm.io/package/babel-plugin-transform-class-bound-properties · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._