search

callstack / haul

Haul is a command line tool for developing React Native apps, powered by Webpack
MIT License
3.64k stars 194 forks source link

Support Fast Refresh #583

Open gaearon opened 5 years ago

gaearon commented 5 years ago

Describe the feature

We've landed Fast Refresh on React Native master. You can try it if you build all Metro packages from master and replace them in node_modules of RNTester.

Motivation

It would be nice if Haul could replace react-hot-loader or other techniques with Fast Refresh because:

It likely also fixes hot reloading problems with navigation libraries because it's fully integrated with React. (Although I don't have a test case to verify that.)

It would also unify the behavior with mainline React Native.

But How?

I'd be happy to chat with someone to give an overview of how the new system works. For a 100% match in behavior we might need some new hooks from webpack, but you should be able to get reasonably close today too.

thymikee commented 5 years ago

We develop the next version of haul on next branch and disabled hot loader because it was just too hacky. We're happy to give Fast Refresh a try. Cc @zamotany who's developing Haul at the moment

zamotany commented 5 years ago

@gaearon Yeah, I'm happy to chat (with pretty much whatever means of communication you prefer). Alternatively you can write me a quick overview and point me to the source code in Metro if needed.

nonewcode commented 4 years ago

any updates on this?

gaearon commented 4 years ago

I wrote an overview of how Fast Refresh works here: https://github.com/facebook/react/issues/16604#issuecomment-528663101

There's a few implementations linked from that thread.

gaearon commented 4 years ago

Since Haul uses webpack, it might make sense to join efforts with https://github.com/pmmmwh/react-refresh-webpack-plugin.

zamotany commented 4 years ago

To anyone interested in the issue.

There's a common misconception that just because something is built for Webpack, it will work out of the box for React Native with Haul. 90% of the time it doesn't. Anything that's. being built for Webpack targets web and uses browser API.

From the investigation done some time ago here are the takeaways what would have to be done in order to support React Refresh in Haul. The fast refresh is terribly complex issue and it would require major changes and additions to support. As a base for investigation I did some time ago, I used https://github.com/pmmmwh/react-refresh-webpack-plugin:

  1. New React Refresh plugin should be created for Haul with React Native specifics in mind. It would require a lot of resources to port/workaround pmmmwh/react-refresh-webpack-plugin usage of browser specific APIs, because in Haul to support RN platform there'a a lot of tweaking and additional code that has to run in specific order. With the way pmmmwh/react-refresh-webpack-plugin is built, this order is not kept which results in crashes.

  2. Some tweaking in Webpack config will be necessary. For sure adding a HotModuleReplacementPlugin. Given my experience with working with this plugin, it also assumes that the browser APIs will be present, which means we would need to workaround or hack this usage somehow.

  3. To support HotModuleReplacementPlugin (which is needed to support React Refresh plugin) there's a need for major refactor for the server/compiler architecture that Haul is currently using. For each platform it would need a separate Webpack Hot Middleware so essentially we would need for each platform:

    • A platform-specific Webpack compiler (eg. Webpack compiler for iOS)
    • A platform-specific packager server (eg. packager server for iOS)
    • A platform-specific Webpack hot middleware injected into the platform-specific packager server

  4. And then a single proxy packager server that would proxy requests for specific platform to each platform-specific packager server. The platform-specific Webpack compiler, platform-specific server and platform-specific hot middleware together will have to be spawned in a separate process/thread.

To summarise: there are a lot of moving parts to get this working and it requires extensive/deep knowledge about how Webpack works - more specifically what parts are put into the final bundle, how the module system and Webpack logic working in the bundle and how HotModuleReplacementPlugin itself works.

likern commented 3 years ago

@zamotany Does this mean it will not be supplied in near future (if at all)?