add auto hot reload support

[EdmondChuiHW]

requires #1064 to be merged

Summary

Automatically hot reload all components rendered with react_ujs without source file changes. Existing support requires manually wrapping all components with hot(App). This PR removes the need.

Other Information

Inline comments have been added to discuss options considered and their tradeoffs.

related: facebook/react#16604

Also uncertain on how to fix the Travis CI build error

Steps to enable (also updated in README)

1. install react-hot-loader and @hot-loader/react-dom
2. add the following to your webpack config in dev:

{
  module: {
    rules: [
      {
        test: /\.(jsx|tsx)?$/,
        use: ["react-hot-loader/webpack"],
      },
    ],
  },
  resolve: {
    alias: {
      "react-dom": "@hot-loader/react-dom",
    },
  },
}

3. in your entry file, usually where you call ReactRailsUJS.useContext already, call useHotReload:

var ReactRailsUJS = require("react_ujs")
var myCustomContext = require.context("custom_components", true)
ReactRailsUJS.useHotReload(myCustomContext)

4. optionally, for CSS to hot reload, update the following for dev in webpacker.yml:

development:
  <<: *default
  extract_css: false

[EdmondChuiHW]

As mentioned in the add render component extension point PR, the folder structure and import pattern is taking reference from getConstructor for consistency. Please let me know if there is a better way

[EdmondChuiHW]

Let me know if this comment could be more helpful, i.e. should the steps to setup be inlined here?

[EdmondChuiHW]

In addition, there is an opportunity to "stack" instead of "replace". See the example and discussion at #1064. The proposed approach here mirrors getConstructor and useContext. Let me know if the "stack" option would be a better option

[EdmondChuiHW]

Same for this one. Let me know if this comment could be more helpful, i.e. should the steps to setup be inlined here?

[EdmondChuiHW]

Let me know if the steps in readme is concise and simple to follow. Happy to pull into a separate file if requested

[BookOfGreg]

I'll need to test it doesn't negatively affect any existing integration but this looks promising so thank you for contributing!
The documentation also reads well to me.

Travis succeeded on all builds except Webpack 4 so I'll need to take a look at that.

[danvernon]

@EdmondChuiHW whats the status of this PR? would love to have access to this.

[EdmondChuiHW]

@EdmondChuiHW whats the status of this PR? would love to have access to this.

@danvernon looks good to me 😜 Ask the author to see if there's anything I can do to help merge this

[danvernon]

@BookOfGreg anything stopping this being merged?

[justin808]

We need a solution that uses: https://github.com/pmmmwh/react-refresh-webpack-plugin/

Per https://github.com/gaearon/react-hot-loader, react-hot-loader is no longer recommended.

The new plugin is much less intrusive to your source code. It does not require changing the source code, only the development build configuration to use webpack and babel plugins.

Shakapacker supports HMR with React:

https://github.com/shakacode/shakapacker/blob/master/docs/react.md#enabling-hot-module-replacement-hmr