add auto hot reload support

[EdmondChuiHW]

requires https://github.com/reactjs/react-rails/pull/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: https://github.com/facebook/react/issues/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

[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