Improve hmr experience for react components (#104)

* improve hmr experience for react components

* fix hmr for async module

Author: hardrese7

package-lock.json

@@ -57,6 +57,7 @@
     "raw-loader": "^4.0.2",
     "react-axe": "^3.5.4",
     "react-docgen-typescript-loader": "^3.7.2",
+    "react-hot-loader": "^4.13.0",
     "react-router-dom": "^5.2.0",
     "regenerator-runtime": "^0.13.7",
     "rimraf": "^3.0.2",
@@ -80,7 +81,7 @@
     "@patternfly/react-icons": "^4.7.11",
     "@patternfly/react-styles": "^4.7.8",
     "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react-dom": "npm:@hot-loader/react-dom@^16.14.0",
     "react-router-last-location": "^2.0.1",
     "sirv-cli": "^1.0.8"
   }

package.json

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { hot } from 'react-hot-loader/root';
 import { CubesIcon } from '@patternfly/react-icons';
 import {
   PageSection,
@@ -15,7 +16,7 @@ export interface ISupportProps {
   sampleProp?: string;
 }
 
-const Support: React.FunctionComponent<ISupportProps> = () => (
+let Support: React.FunctionComponent<ISupportProps> = () => (
     <PageSection>
       <EmptyState variant={EmptyStateVariant.full}>
         <EmptyStateIcon icon={CubesIcon} />
@@ -39,4 +40,5 @@ const Support: React.FunctionComponent<ISupportProps> = () => (
     </PageSection>
   )
 
+Support = hot(Support); // enable HMR for this async module
 export { Support };

src/app/Support/Support.tsx

@@ -1,3 +1,4 @@
+import { hot } from 'react-hot-loader/root';
 import * as React from 'react';
 import '@patternfly/react-core/dist/styles/base.css';
 import { BrowserRouter as Router } from 'react-router-dom';
@@ -13,4 +14,4 @@ const App: React.FunctionComponent = () => (
   </Router>
 );
 
-export { App };
+export default hot(App);

src/app/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { App } from '@app/index';
+import App from '@app/index';
 
 if (process.env.NODE_ENV !== "production") {
   const config = {

src/index.tsx

@@ -9,7 +9,7 @@ module.exports = env => {
 
   return {
     entry: {
-      app: path.resolve(__dirname, 'src', 'index.tsx')
+      app: ['react-hot-loader/patch', path.resolve(__dirname, 'src', 'index.tsx')]
     },
     module: {
       rules: [