add hot loader

Author: kitze

config-overrides.js

@@ -1,12 +1,15 @@
 const { override, disableEsLint, addBabelPlugin } = require('customize-cra');
+const rewireReactHotLoader = require('react-app-rewire-hot-loader');
 
-module.exports = override(
-  disableEsLint(),
-  addBabelPlugin('styled-components'),
-  addBabelPlugin([
-    'inline-react-svg',
-    {
-      ignorePattern: 'desert'
-    }
-  ])
-);
+module.exports = (config, env) => {
+  config = override(disableEsLint(),
+    addBabelPlugin('styled-components'),
+    addBabelPlugin([
+      'inline-react-svg',
+      {
+        ignorePattern: 'desert'
+      }
+    ]))(config, env);
+  config = rewireReactHotLoader(config, env);
+  return config;
+};

package.json

@@ -10,7 +10,9 @@
     "react-dom": "^16.8.6",
     "react-dom-confetti": "^0.1.1",
     "react-hanger": "^2.0.0",
+    "react-hot-loader": "^4.12.15",
     "react-pose": "^4.0.8",
+    "rodal": "^1.7.0",
     "styled-components": "^4.3.2",
     "styles-debugger": "^0.0.5"
   },
@@ -39,8 +41,9 @@
     "babel-plugin-styled-components": "^1.8.0",
     "customize-cra": "^0.2.13",
     "prettier": "^1.18.2",
-    "react-app-rewired": "^2.1.3",
-    "react-scripts": "^3.0.1",
+    "react-app-rewire-hot-loader": "^2.0.1",
+    "react-app-rewired": "^2.1.4",
+    "react-scripts": "^3.2.0",
     "typescript": "^3.5.2"
   }
 }

src/components/Root.js

@@ -4,6 +4,8 @@ import { useBoolean } from 'react-hanger';
 import { ThemeProvider } from 'styled-components';
 import themes from 'styles/themes';
 import { useToggleBodyClass } from '../utils/hooks';
+import { hot } from 'react-hot-loader/root';
+import { isDev } from 'utils/dev-prod';
 
 const Root = () => {
   const isAnimationDone = useBoolean(false);
@@ -17,4 +19,4 @@ const Root = () => {
   );
 };
 
-export default Root;
+export default isDev ? hot(Root) : Root;