GithubHelp home page GithubHelp logo

gaearon / babel-plugin-functional-hmr Goto Github PK

View Code? Open in Web Editor NEW

This project forked from bvic23/babel-plugin-functional-hmr

7.0 2.0 0.0 390 KB

Babel plugin enables HMR for functional components in React Native.

License: MIT License

Shell 0.58% JavaScript 99.42%

babel-plugin-functional-hmr's Introduction

babel-plugin-functional-hmr

A Babel plugin allows HMR for functional components in React Native.

Limitations

If you try to use hooks 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 in React Native.

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).

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

or

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:

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

With options:

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

Via CLI

babel --plugins functional-hmr script.js

Via Node API

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

Important Note

From Issue #5: "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:

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:

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

export default Button;

to:

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 for more examples.

Sources

License

MIT, see LICENSE.md for details.

babel-plugin-functional-hmr's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.