bvic23 / babel-plugin-functional-hmr Goto Github PK
View Code? Open in Web Editor NEWBabel plugin enables HMR for functional components in React Native.
License: MIT License
Babel plugin enables HMR for functional components in React Native.
License: MIT License
Hello.
After upgrade react-native (0.52.0) I receive this error: Unknown named module: 'react'
Steps to Reproduce
react-native init
App.js
:const App = () => (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
</View>
)
export default App
Just run react-native run-ios
I believe there is an issue with how this package detects if a function returns JSX.
HMR does not detect changes on a component that returns a fragment using babel syntax <></>
HMR doesn't see changes here
const ExampleScreen = () => (
<>
<View style={{ backgroundColor: 'red', height: '100%' }} />
</>
);
This works fine
const ExampleScreen = () => (
<React.Fragment>
<View style={{ backgroundColor: 'red', height: '100%' }} />
</React.Fragment>
);
With this plugin, some of the tests are breaking with the following message:
locals[0] does not appear to be a `module` object with Hot Module replacement API enabled. You should disable react-transform-hmr in production by using `env` section in Babel configuration. See the example in README: https://github.com/gaearon/react-transform-hmr
When I debug the tests, I find that those tests are testing shallow rendering for some components which include imported components from react-native
like the ActivityIndicator
component.
I'm using Babel7 and this is my config:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
['@babel/plugin-transform-flow-strip-types'],
['@babel/plugin-proposal-class-properties'],
['@babel/plugin-proposal-object-rest-spread'],
['@babel/plugin-transform-runtime'],
[
'babel-plugin-transform-builtin-extend',
{
globals: ['Error'],
},
],
['functional-hmr'],
],
};
Using RN 57.1 and node 8.12.0
And these are all the babel plugins:
"@babel/core": "7.1.0",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/plugin-transform-flow-strip-types": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.1.0",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "23.6.0",
"babel-plugin-functional-hmr": "^1.0.24",
"babel-plugin-transform-builtin-extend": "^1.1.2",
"babel-plugin-transform-remove-console": "^6.9.4",
So I disabled HMR during tests by adding NODE_ENV=TEST
and changing babel config to only add HMR in development.
Is this the right approach? or am I missing something?
Also any idea why the tests are failing to begin with after enabling this plugin?
Thanks ๐ฏ
how tough could it be to support hyperscript or plain React.createElement
calls?
Just a notice. Since this is actually transforming functional components to classes (as I understand it). 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").
This is ofcourse "by design" when using this plugin.
Maybe update the readme with a notice regarding this so others won't get their hopes up (like me) that you can use functional compoents, hooks AND hot reloading in your React Native apps...
Thanks for building this plugin. It really helps to overcome the annoying scenario that only classes benefit from hot reloading capabilities.
I identified one problem when bundling the app for Android though. While performing a cd android && ./gradlew assembleRelease
the build fails with:
Loading dependency graph, done.
warning: the transform cache was reset.
SyntaxError: Unexpected token: name (id)
:app:bundleReleaseJsAndAssets FAILED
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:bundleReleaseJsAndAssets'.
> Process 'command 'node'' finished with non-zero exit value 1
Removing the plugin configuration in .babelrc
helps and the build succeeds again.
When running in React Native 0.53 this package causes an error requiring unknown module "react"
. Not sure what could be causing this.
For storybook it looks like packager doesn't find it. Maybe just a small thing? Do you know the reason?
This is in a brand new app and brand new install of storybook
ERROR in ./storybook/addons.js
Module build failed: Error: Couldn't find preset "functional-hmr" relative to directory "/Users/myuser/Documents/Investegy/storybook"
at /Users/myuser/Documents/Investegy/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
at Array.map (native)
at OptionManager.resolvePresets (/Users/myuser/Documents/Investegy/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
at OptionManager.mergePresets (/Users/myuser/Documents/Investegy/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
at OptionManager.mergeOptions (/Users/myuser/Documents/Investegy/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
at OptionManager.init (/Users/myuser/Documents/Investegy/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (/Users/myuser/Documents/Investegy/node_modules/babel-core/lib/transformation/file/index.js:212:65)
at new File (/Users/myuser/Documents/Investegy/node_modules/babel-core/lib/transformation/file/index.js:135:24)
at Pipeline.transform (/Users/myuser/Documents/Investegy/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/Users/myuser/Documents/Investegy/node_modules/babel-loader/lib/index.js:49:20)
@ multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js
I somehow can't get this plugin to work. I'm tryin to use it with storybook. I'm not getting any errors, but the HMR isn't working either. Is there any way to check wether the plugin actually does it's transforms?
Hello,
I created a fresh 0.57.7 react-native iOS project and installed the plugin (1.0.24).
I did yarn start --reset-cache
and enabled Hot reloading.
When updating a functional component, the "hot loading" message appears,
but the changes don't show up.
My .babelrc
{
"presets": ["module:metro-react-native-babel-preset"],
"plugins": ["functional-hmr"]
}
My App.js
export default function App() {
return <Text>foo</Text>;
}
Hi! I've experienced a bug.
Here's an example of the component not being rendered correctly:
Correct rendering:
code:
import React from 'react';
import { View, Text, Image} from 'react-native';
import arrow from '../../../../res/arrow-up/arrow-up.png';
const Item = ({ title, info }) => (
<View>
<Text>{title}</Text>
<Text >{info}</Text>
<Image source={arrow} />
</View>
);
export default Item;
To reproduce:
What also helps:
export default ({ title, info }) => (
<View>
<Text>{title}</Text>
<Text >{info}</Text>
<Image source={arrow} />
</View>
);
Hi! Now that React Native 0.61 fixes the problem with Fast Refresh, it would be great if this project could have a loud deprecation notice in README.
The transform it's doing is not safe because it changes functions into classes. It's also making the code slower because the function codepath is more optimized in React.
Thank you!
A pattern that I tend to use is the following:
import React from 'react';
import { withState } from 'recompose'; // or any of the HOCs from recompose
const enhancer = withState('value', 'setValue', 0);
const MyComponent = ({ value, setValue }) => (
<div>
<span>Value: {String(value)}</span>
<button onClick={() => setValue(value + 1)}>Increment</button>
</div>
);
export default enhancer(MyComponent);
Because MyComponent
is not being export
ed as a const
or default
, it is not being picked up by babel-plugin-functional-hmr
.
Is there a way I can adjust my pattern or is there something that could be done regarding babel-plugin-functional-hmr
to get this experience working with HMR?
import { Text as RNText, StyleSheet } from 'react-native';
export const Text = ({ style, children, capitalized, ...props }: Object) =>
<RNText style={[styles.font, style]} {...props}>
{capitalized ? capitalizeFirstLetter(children) : children}
</RNText>;
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.