-
Notifications
You must be signed in to change notification settings - Fork 194
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Get HMR running #2
Comments
Not a top priority to me for now as I never used HMR in React Native, partially because it's default implementation is rather poor to me. We might want to implement it after going alpha. Also, might be a good first task for outside collaborators, should be fairly easy to do with a standard Webpack setup. |
Can you elaborate? I find it very useful and it works well. If you are in a deep nested screen of your app, you don't have to retraverse the whole app each time you edit a |
Will implementing HMR via react-hot-loader 3 work? I attempted to get it working locally once (we glued react-native's packager and webpack together via react-native-webpack-server), but the only problem I had was making the webpack dev client work, since the code ran in a worker context, and that had some weird issues. |
@SEAPUNK technically it should, feel free to give it a go and share your haul config! @Kerumen it works, but I was referring to this part specifically facebook/react-native#10991 (comment) |
I tried setting up Any ideas? |
Probably just a |
Or something like, export default class App extends Component {
state = { root: App };
componentWillMount() {
if (module.hot) {
module.hot.accept('./App.js', () =>
this.setState({ root: require('./App.js').default })
);
}
}
render() {
return React.createElement(this.state.root);
}
} |
Yes, we'll need to use |
I played around with I was able to get HMR set up but for some reason requests to the manifests were timing out. Check out this PR. Also, to get it working without having to use remote JS debugging, we'll have to add a polyfill for EDIT: It looks like a custom HMR middleware will be needed. |
I checked In this case we would definitely need a custom HMR middleware. |
As you can see in https://github.com/facebook/react-native/blob/master/Libraries/Utilities/HMRClient.js#L32-L137, when HMR is enabled by clicking We don't need any So in order to support HMR we need to write custom middleware that will create a bridge between webpack and HMR client. As in the mentioned article, implementation is similar to Webpack HMR API so it should be a matter of copy/pasting and tweaking it a little bit. You can track progress on this matter here: https://github.com/callstack-io/haul/compare/feature/hmr |
Done in #182 |
@alloy Do you have any feedback regarding initial HMR setup that you made? I heard (not sure it was you) that it's non trivial. Is there anything we can do in order to improve it? |
I struggled to get it working with Storybooks, which is our main development environment and eventually ran out of my timebox'd time. Our RN app exposes many |
CC: @zamotany who authored this module. Guys, let's sync on Slack and figure it out. |
Get HMR up & running. If supported by default, we should make a flag
--hot
on a CLI. I believe that switch from Dev Tools is rather useless. All in all, you don't want to change it during development.Eventually we might want to change dev tools in Simulator as well (given that it's been recently allowed), but we will see.
The text was updated successfully, but these errors were encountered: