Skip to content

Conversation

@jamaljsr
Copy link
Collaborator

@jamaljsr jamaljsr commented Dec 31, 2018

Closes #125

Description

Adds React Hot Reload functionality to the development environment. No modifications are made to production builds. This simply improves the feedback loop of seeing changes

Steps to Test

  1. Run yarn run hot
  2. Load the extension in Chrome
  3. Click on the toolbar icon to open the popup
  4. Click on the Invoice button to open the drawer
  5. Type any number in the Amount field
  6. In your code editor, open the InvoiceForm.tsx file
  7. Change the Amount label to Payment Amount then Save the file
  8. Observe in the browser that the label updates but the state of the component remained unchanged

Notes

This is not 100% ready to be merged, but I wanted to put it out there for now. I need to test browsers other than Chrome to make sure nothing is broken.

)(Routes);

export default withRouter(ConnectedRoutes);
export default withRouter(hot(ConnectedRoutes));
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a note, the hot() function is essentially a NOOP in production builds

See https://github.com/gaearon/react-hot-loader/blob/master/root.js

@jamaljsr
Copy link
Collaborator Author

jamaljsr commented Jan 4, 2019

Confirmed working in Chrome, Firefox & Brave. This PR is ready, awaiting feedback.

@wbobeirne
Copy link
Member

Sorry for the delay, have had some computer issues that have kept me away from Joule for the last week. I'll be able to test & merge this tomorrow.

Copy link
Member

@wbobeirne wbobeirne left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works great, and will be a huge boon to productivity. Thanks for taking a crack at it. There's probably a lot that can be done to improve the incremental builds (my machine was getting ~5s per build) but we can merge as-is, and improve that later!

@wbobeirne wbobeirne merged commit d7858dd into joule-labs:develop Jan 7, 2019
@jamaljsr jamaljsr deleted the feat/react-hot-reload branch January 7, 2019 17:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants