Hack Week: introduction of "hot reload" using Inject

[pmusolino]

Description

As part of the Hack Week, I started integrating the Hot Reload in our project using the Inject open-source library (MIT license). With hot reload, we can speed up our development process at 1000% 🚀 Stop the distractions of compiling the project. During my tests, I literally saved hours during the development phase, and this is confirmed by other developers who take advantage of the hot reload.

See the changes live in the app, in an instant, exactly like developing for the web. It is as if compilation times no longer exist, and it is as if Swift became an interpreted language. 🤯

I'd like to merge this PR before the end of the Hack Week, in this way the whole team can test it, and eventually, if some issues come up, I can remove it. However, the library will only work in Debug, so there should be no problems during the release phases.

Testing instructions

For enabling the hot reload, there is a small individual developer setup that you should follow on your machine.

1. Download the newest version of Xcode Injection app from its GitHub page or from the Mac App Store and install it.

2. Unpack it and place it under /Applications.

3. Make sure that the Xcode version you are using to compile our projects is under the default location: /Applications/Xcode.app. This is super important, unfortunately, Xcode Injection doesn't work if your Xcode is not under this path or it's called with a different name.

4. Run the injection application.

5. From the injection application in the menu bar, select "open project" from its menu and pick the right workspace file you are using.

6. Launch the WCiOS app from Xcode. If everything works properly, you should see in the console log something similar:

💉 InjectionIII connected /Users/youruserpath/woocommerce-ios/WooCommerce/WooCommerce.xcodeproj
💉 Watching files under /Users/youruserpath/woocommerce-ios/WooCommerce

7. Enjoy it! 🚀 You can try to do some changes in HubMenu which is ready to use Inject. Read the documentation I pushed in this PR for applying hot reload to other views.

Demo

Hot.Reload.using.Inject.mp4

---

• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

[wpmobilebot]

You can test the changes from this Pull Request by:

• Clicking here or scanning the QR code below to access App Center
• Then installing the build number pr7085-4606577 on your iPhone

If you need access to App Center, please ask a maintainer to add you.

[itsmeichigo]

Thank you @pmusolino for taking the initiative to integrate Inject into our project 🥇 💯 This will help a lot with our team's productivity!

This works well for me in general - here are a few things that I noticed:

• Should we also add a link to the hot reload doc from the main project README file for visibility?
• I tried setting up Inject for another file while running Woo on the simulator (with HubMenu already set up). This crashed the app when navigating to the view of that new file. Should we add a warning in the documentation that the setup for Inject should be handled before running the app?
• I tested Inject with AddEditCoupon and found that I could not make any changes to ListHeaderView reflected on the simulator. I even tried setting up Inject for ListHeaderView but it didn't work either. My take is that this tool is not perfect 😅

InjectCoupon.mov

[pmusolino]

Thank you @itsmeichigo for the review and for experimenting with it!

Should we also add a link to the hot reload doc from the main project README file for visibility?

This is a good idea. Added c739375

I tried setting up Inject for another file while running Woo on the simulator (with HubMenu already set up). This crashed the app when navigating to the view of that new file. Should we add a warning in the documentation that the setup for Inject should be handled before running the app?

Added here 👍 dacb3d7

I tested Inject with AddEditCoupon and found that I could not make any changes to ListHeaderView reflected on the simulator. I even tried setting up Inject for ListHeaderView but it didn't work either. My take is that this tool is not perfect

This is because the AddEditCoupon view is presented using a HostingController. To fix it, and making it working properly, you should init AddEditCouponHostingController under Inject.ViewControllerHost in CouponDetails, like this:

let addEditHostingController = Inject.ViewControllerHost(AddEditCouponHostingController(
                viewModel: addEditCouponViewModel,
                onDisappear: {
                    viewModel.resetAddEditViewModel()
                }))
            self.present(addEditHostingController, animated: true)

[itsmeichigo]

This is because the AddEditCoupon view is presented using a HostingController. To fix it, and making it working properly, you should init AddEditCouponHostingController under Inject.ViewControllerHost in CouponDetails

This works perfectly! Thanks for the suggestion ☺️. I'm not sure if it's too obvious, but should we also include this gotcha in the doc as well?