babel-plugin-functional-hmr - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #typescript #go #android #docker #macos #nodejs #security #ios #openai #open-source

babel-plugin-functional-hmr

(★ 97)

Babel plugin enables HMR for functional components in React Native.

File Explorer

Download Latest Version (.zip)

- - class-already.js
  - class-and-function.js
  - declared-as-const-no-param.js
  - declared-as-const.js
  - destructure.js
  - embedded-return-arguments.js
  - embedded-return-extra-statements.js
  - embedded-return.js
  - export-default-param.js
  - multiple-components.js
  - non-jsx-body.js
  - nondefault-components.js
  - nontoplevel.js
  - simplefunction-multiple-param.js
  - simplefunction.js
  - wrapped-in-hoc.js
- - plugin.test.js
- index.js
.babelrc
.editorconfig
.eslintignore
.eslintrc
.gitignore
.npmignore
demo.gif
LICENSE.md
package.json
README.md
reset.sh
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/bvic23/babel-plugin-functional-hmr

Downloads the entire project code from GitHub to your computer.

cd babel-plugin-functional-hmr

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install --save-dev babel-plugin-functional-hmr

Downloads and installs the libraries listed in package.json.

yarn add babel-plugin-functional-hmr -D

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# !!!444!!! THIS PLUGIN IS DEPRECATED. PLEASE DON'T USE IT WITH React 0.61 AND ABOVE

React Native 0.61 fixes the problem with Fast Refresh.

# babel-plugin-functional-hmr

A [Babel](http://babeljs.io) plugin allows HMR for functional components in React Native.

![](https://raw.githubusercontent.com/bvic23/babel-plugin-functional-hmr/master/demo.gif)

## Limitations

If you try to use [hooks](https://reactjs.org/docs/hooks-intro.html) in your source they won't work (you will get an "Hooks can only be called inside the body of a function component").

## Why?

Hot module reload (HMR) has been [broken for functional components](https://github.com/facebook/react-native/issues/8465) in [React Native](http://www.reactnative.com).

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

## Installation

In most cases, you should install `babel-plugin-functional-hmr` as a development dependency (with `--save-dev`).

```sh
npm install --save-dev babel-plugin-functional-hmr
```

or

```sh
yarn add babel-plugin-functional-hmr -D
```

The transformation plugin is typically used only in development. See the examples below for more details.

## Usage

### Via `.babelrc` (Recommended)

Add the following line to your `.babelrc` file:

Without options:

```json
{
  "plugins": ["functional-hmr"]
}
```

With options:

```json
{
  "plugins": [
    ["functional-hmr"]
  ]
}
```

### Via CLI

```sh
babel --plugins functional-hmr script.js
```

### Via Node API

```js
require("babel-core").transform("code", {
  plugins: ["functional-hmr"]
});
```

### Important Note
From [Issue #5](https://github.com/bvic23/babel-plugin-functional-hmr/issues/5#issuecomment-333309618): *"Editing the `.babelrc` won't actually change the setup, unless you start the packager with `yarn start --reset-cache` to clean the transform cache."*

## Technical details

### Class
The plugin does not transform components defined as classes, such as:

```js
export default class Button extends Component {
    render() {
        return (
            <TouchableNativeFeedback onPress={this.props.onPress}>
                <Text style={{ color: 'green' }}>
                    {this.props.title}
                </Text>
            </TouchableNativeFeedback>
        );
    }
}
```

### Arrow functions
The plugin transforms arrow expressions **if**:

- it has `JSX` return
- it has only one object parameter or no parameters

It does not transform files located in `node_modules` folder.

From:

```js
const Button = ({ children, onPress }) =>
    <TouchableNativeFeedback onPress={onPress}>
        <Text style={{ color: 'blue' }}>
            {children}
        </Text>
    </TouchableNativeFeedback>;

export default Button;
```

to:

```js
import reactTransform from 'react-transform-hmr';

function wrapComponent(id, Component) {
    const t = reactTransform({
        components: {
            [id]: {
                displayName: id
            }
        },
        locals: [module],
        imports: [require("react")]
    });
    return t(Component, id);
}

class __Button extends require("react").Component {
    render() {
        const children = this.props.children,
              onPress = this.props.onPress;
        return (<TouchableNativeFeedback onPress={onPress}>
        <Text style={{ color: 'blue' }}>
            {children}
        </Text>
    </TouchableNativeFeedback>);
    }

}

const Button = wrapComponent('Button', __Button);
export default Button;
```

Checkout the [tests](https://github.com/bvic23/babel-plugin-functional-hmr/blob/master/lib/__tests__/plugin.test.js) for more examples.

## Sources

- [Babel Plugin Handbook](https://github.com/babel/babel/tree/master/packages/babel-types#babel-types)
- [Babel Types](https://github.com/babel/babel/tree/master/packages/babel-types#babel-types)
- [AST Explorer](https://astexplorer.net)

## License

MIT, see [LICENSE.md](/LICENSE.md) for details.