Given the current configuration of babel-preset-zapier, if you make a change to any source code, this will cause your localhost to do a hard reload (given that hot is set to true).
This is inconvenient to the developer because there is quite a lot of JavaScript logic that runs on a fresh page load that will continuously run and run and run as you make changes. Not only that, but once the page reloads you may need to recreate the previous state you were in. Depending on the type of feature you are working on, that can be incredibly difficult and/or frustrating to have to do every time you make a small change.
Bringing in react-hot-loader into our babel configuration allows zapier/zapier to import react-hot-loader and mark specific parts of our application as hot to cause the page to instantaneously reload without doing a hard reload.
For more information on how to add and configure this tool, see here.
Still in zapier/zapier, run yarn link "@zapier/babel-preset-zapier"
Find a page you want to test hot reloading on, and wrap the top-level React component with hot(). You can use /app/settings/profile as a test if you'd like.
Kill your local yarn workspace @zapier/web dev task if it is running, and start it back up again.
Make an edit to the page and notice the changes update almost immediately in your browser without a full page reload.
Description
Given the current configuration of
babel-preset-zapier, if you make a change to any source code, this will cause yourlocalhostto do a hard reload (given thathotis set totrue).This is inconvenient to the developer because there is quite a lot of JavaScript logic that runs on a fresh page load that will continuously run and run and run as you make changes. Not only that, but once the page reloads you may need to recreate the previous state you were in. Depending on the type of feature you are working on, that can be incredibly difficult and/or frustrating to have to do every time you make a small change.
Bringing in
react-hot-loaderinto our babel configuration allowszapier/zapierto importreact-hot-loaderand mark specific parts of our application ashotto cause the page to instantaneously reload without doing a hard reload.For more information on how to add and configure this tool, see here.
Type of Changes
Before / Current Behavior
https://zappy.zapier.com/6DE032BF-377A-4772-B928-A2F5D017BEB5.mp4
After / New Behavior
https://zappy.zapier.com/71B2DD33-2D4D-43E8-A729-06A0CB7AAB65.mp4
Testing Steps / QA Criteria
babel-preset-zapier, checkout this branch.yarn linkin the root ofbabel-preset-zapier.zapier/zapier, checkoutadd-react-hot-loaderzapier/zapier, runyarn link "@zapier/babel-preset-zapier"hot(). You can use/app/settings/profileas a test if you'd like.yarn workspace @zapier/web devtask if it is running, and start it back up again.