All Projects → bvic23 → Babel Plugin Functional Hmr

bvic23 / Babel Plugin Functional Hmr

Licence: mit
Babel plugin enables HMR for functional components in React Native.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Babel Plugin Functional Hmr

Template Rwb
A full-featured Webpack setup with hot-reload
Stars: ✭ 165 (+65%)
Mutual labels:  hmr, hot-reload
Node Hot Loader
Hot module replacement (hot reload) for Node.js applications. Develop without server restarting.
Stars: ✭ 111 (+11%)
Mutual labels:  hmr, hot-reload
Sass Vars Loader
Use Sass variables defined in Webpack config or in external Javascript or JSON files
Stars: ✭ 112 (+12%)
Mutual labels:  hmr, hot-reload
minimal-hapi-react-webpack
Minimal Hapi + React + Webpack + HMR (hot module reloading) Sandbox
Stars: ✭ 55 (-45%)
Mutual labels:  hmr, hot-reload
systemjs-tools
(dev)tools for working with SystemJS
Stars: ✭ 41 (-59%)
Mutual labels:  hmr, hot-reload
Angular Hmr
🔥 Angular Hot Module Replacement for Hot Module Reloading
Stars: ✭ 490 (+390%)
Mutual labels:  hmr, hot-reload
Fuse Box
A blazing fast js bundler/loader with a comprehensive API 🔥
Stars: ✭ 4,055 (+3955%)
Mutual labels:  hmr, hot-reload
Systemjs Hmr
Hot Module Replacement for SystemJS
Stars: ✭ 24 (-76%)
Mutual labels:  hmr, hot-reload
Hot Reload.vim
A (Neo)vim plugin for Flutter to automatically hot reload the project every time a file is saved
Stars: ✭ 33 (-67%)
Mutual labels:  hot-reload
Extracted Loader
It reloads extracted stylesheets extracted with ExtractTextPlugin
Stars: ✭ 67 (-33%)
Mutual labels:  hot-reload
Got Reload
Reload Go code in a running process at function/method level granularity, using Yaegi
Stars: ✭ 29 (-71%)
Mutual labels:  hot-reload
React Pwa Webpack Starter
Boilerplate to build a React PWA with Webpack + Workbox
Stars: ✭ 38 (-62%)
Mutual labels:  hot-reload
Live.avalonia
In-app live reloading for Avalonia applications.
Stars: ✭ 71 (-29%)
Mutual labels:  hot-reload
Pyramidvue
Pyramid Web Framework (Python) implemented with Vuejs (JavaScript) & Webpack (HMR): starter template
Stars: ✭ 32 (-68%)
Mutual labels:  hmr
Boot Reload
Boot task providing live-reload of browser css, images, etc.
Stars: ✭ 90 (-10%)
Mutual labels:  hot-reload
Hr4r
Example project - "Hot Reloading 4 RequireJS" front-end web applications & some extra code demonstrating hot-reloading for Node.js Express servers
Stars: ✭ 28 (-72%)
Mutual labels:  hot-reload
Hot Loader Demo
React Hot Loader 3 minimal demo
Stars: ✭ 27 (-73%)
Mutual labels:  hot-reload
Molecule
⚛️ – :atom: – ⚛️ Boilerplate for cross platform web/native react apps with electron.
Stars: ✭ 95 (-5%)
Mutual labels:  hot-reload
Svelte Template
🚧 An easy-to-use Svelte template! (Svelte + Typescript + Parcel + Express) 2020
Stars: ✭ 88 (-12%)
Mutual labels:  hmr
Universal Hmr Ssr React Redux
⚡A Universal Javascript App Utilizing Express, Webpack, React, Redux and React Router with Server Side Rendering and Hot Module Reloading ⚡
Stars: ✭ 60 (-40%)
Mutual labels:  hot-reload

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].