-
-
Notifications
You must be signed in to change notification settings - Fork 26.8k
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
Add experimental react-refresh support #8582
Add experimental react-refresh support #8582
Conversation
Hi @charrondev! Thank you for your pull request and welcome to our community.We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. If you have received this in error or have any questions, please contact us at [email protected]. Thanks! |
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks! |
Awesome thanks for the PR @charrondev. I'll review this weekend. |
This looks great, my only concern here is that (and this is our fault) we don't have a huge range of test cases for this. Perhaps we could release as a beta. What do you think @ianschmitz? |
Yeah we might want to put behind a flag and treat as experimental until those libs mature and iron out any issues. |
@ianschmitz I can put a I've added it right now behind this env flag. |
One other thing I'm noticing as I test this is the actual cycle of
Takes ~3-4 minutes on my machine. Have you guys considered making a couple private packages in the yarn workspace that are already wired up to the local packages? I might just be doing it wrong though. I've been using |
@charrondev check out https://github.com/facebook/create-react-app/blob/master/CONTRIBUTING.md#setting-up-a-local-copy for assistance. You can use |
Hi! Thanks for putting in the work to integrate the plugin with CRA. I actually did some work to make the integration smoother/more seamless - it would be great if you guys can checkout pmmmwh/react-refresh-webpack-plugin#44 and give me some feedback so that I can be confident that the API fits the use case :) |
Thanks @pmmmwh - much appreciated. Would be good to get that figured out to understand the impact here as we are tightly integrated with our current overlay. |
After running this for a few days, there's a few differences between the overlays, and it probably would be best not to handle
At the same time. Once @pmmmwh's PR has landed, I'll update this PR to use the built in CRA overlay instead. Then other changes regarding the overlay could be regarded separately. |
Agreed. I think for first pass to get this in we should make this opt in (via env variable) to let folks experiment with this and iterate on any issues that arise. Once we're happy that it's stable and all of our existing functionality plays nice we can make it the default behavior. This means that the existing overlay should continue to work as it does today. |
a52f847
to
670b60a
Compare
@pmmmwh we had an interesting case here where we didn't end up needing |
I will relax the requirements a little bit in the next beta. Initially I didn't think that using a custom entry without using a custom overlay module would make sense, because it would bring in the plugin's default overlay and the integration between the entry and the overlay is not trivial. However, in this case I think the error is indeed correct if you guys want to preserve For reference: |
Thanks @charrondev! |
Issue pmmmwh/react-refresh-webpack-plugin#7
Since
react-refresh
was released, I've been really excited to use it as a replacement forreact-hot-loader
& others.@pmmmmwh/react-refresh-webpack-plugin
is the farthest along webpack plugin right now. You can see it's progress over time here pmmmwh/react-refresh-webpack-plugin#1Now as you might see as of Feb 28th 2020, not all of that issue is complete, however the remaining pieces don't really seem relevant as CRA doesn't really need advanced configuration options. If the maintainers here determine that those would be blockers to adoption in CRA, then maybe this PR will help get some additional eyes on the project.
Changes
@pmmmmwh/react-refresh-webpack-plugin
&react-refresh
.Open Questions
Testing instructions
yarn create-react-app test-react-refresh
cd test-react-refresh
yarn start
After some feedback, I've put this behind a ENV variable right now to enable, so add the following file to the root of your created project.
.env
# Enable React Refresh FAST_REFRESH=true
Hot Reloading Hooks & State preservation
Hook state preservation is one the main improvements out of react-refresh vs it's predecessors, so the following should be a quick way to validate that it works.
App.js
Gifs make everything better.