Add hot loader support

packages/web-console/babel.config.js

@@ -3,4 +3,5 @@ module.exports = {
     ["@babel/preset-env", { targets: { node: "current" } }],
     "@babel/preset-typescript",
   ],
+  plugins: ["react-hot-loader/babel"]
 }

packages/web-console/package.json

@@ -46,8 +46,9 @@
     "ramda": "0.27.1",
     "react": "16.13.1",
     "react-contextmenu": "2.14.0",
-    "react-dom": "16.13.1",
+    "react-dom": "npm:@hot-loader/react-dom",
     "react-hook-form": "7.22.3",
+    "react-hot-loader": "^4.13.1",
     "react-is": "^18.1.0",
     "react-popper": "2.2.3",
     "react-redux": "7.2.0",
@@ -56,6 +57,7 @@
     "react-virtuoso": "^2.2.6",
     "redux": "4.0.5",
     "redux-observable": "1.2.0",
+    "redux-persist": "^6.0.0",
     "resize-observer-polyfill": "1.5.1",
     "rxjs": "6.5.5",
     "slim-select": "1.26.0",

packages/web-console/src/index.tsx

@@ -26,10 +26,14 @@ import "core-js/features/promise"
 import "./js/console"
 import "docsearch.js/dist/cdn/docsearch.min.css"
 
+import { hot } from "react-hot-loader/root"
 import React from "react"
 import ReactDOM from "react-dom"
 import { Provider } from "react-redux"
 import { applyMiddleware, compose, createStore } from "redux"
+import { persistStore, persistReducer } from "redux-persist"
+import { PersistGate } from "redux-persist/integration/react"
+import storage from "redux-persist/lib/storage"
 import { createEpicMiddleware } from "redux-observable"
 import { ThemeProvider } from "styled-components"
 
@@ -52,7 +56,18 @@ const epicMiddleware = createEpicMiddleware<
   StoreShape
 >()
 
-const store = createStore(rootReducer, compose(applyMiddleware(epicMiddleware)))
+const persistConfig = {
+  key: "root",
+  storage,
+}
+
+const persistedReducer = persistReducer(persistConfig, rootReducer)
+
+const store = createStore(
+  persistedReducer,
+  compose(applyMiddleware(epicMiddleware)),
+)
+const persistor = persistStore(store)
 
 epicMiddleware.run(rootEpic)
 store.dispatch(actions.console.bootstrap())
@@ -64,18 +79,21 @@ const FadeSlow = createGlobalFadeTransition(
   TransitionDuration.SLOW,
 )
 
-ReactDOM.render(
+const App = hot(() => (
   <ScreenSizeProvider>
     <Provider store={store}>
-      <ThemeProvider theme={theme}>
-        {ReactDOM.createPortal(<ToastContainer />, document.body)}
-        <LocalStorageProvider>
-          <FadeSlow />
-          <FadeReg />
-          <Layout />
-        </LocalStorageProvider>
-      </ThemeProvider>
+      <PersistGate loading={null} persistor={persistor}>
+        <ThemeProvider theme={theme}>
+          {ReactDOM.createPortal(<ToastContainer />, document.body)}
+          <LocalStorageProvider>
+            <FadeSlow />
+            <FadeReg />
+            <Layout />
+          </LocalStorageProvider>
+        </ThemeProvider>
+      </PersistGate>
     </Provider>
-  </ScreenSizeProvider>,
-  document.getElementById("root"),
-)
+  </ScreenSizeProvider>
+))
+
+ReactDOM.render(<App />, document.getElementById("root"))

packages/web-console/webpack.config.js

@@ -67,6 +67,7 @@ const basePlugins = [
       NODE_ENV: JSON.stringify(process.env.NODE_ENV),
     },
   }),
+  new Webpack.HotModuleReplacementPlugin(),
 ]
 
 const devPlugins = [
@@ -107,7 +108,7 @@ module.exports = {
   devServer: {
     compress: true,
     host: "localhost",
-    hot: false,
+    hot: true,
     port: config.port,
     proxy: {
       context: ["/imp", "/exp", "/exec", "/chk"],
@@ -116,7 +117,7 @@ module.exports = {
   },
   devtool: config.isProduction ? false : "eval-source-map",
   mode: config.isProduction ? "production" : "development",
-  entry: "./src/index",
+  entry: ["react-hot-loader/patch", "./src/index"],
   output: {
     filename: "qdb.js",
     publicPath: config.assetPath,

yarn.lock

@@ -3967,8 +3967,9 @@ __metadata:
     ramda: 0.27.1
     react: 16.13.1
     react-contextmenu: 2.14.0
-    react-dom: 16.13.1
+    react-dom: "npm:@hot-loader/react-dom"
     react-hook-form: 7.22.3
+    react-hot-loader: ^4.13.1
     react-is: ^18.1.0
     react-popper: 2.2.3
     react-redux: 7.2.0
@@ -3977,6 +3978,7 @@ __metadata:
     react-virtuoso: ^2.2.6
     redux: 4.0.5
     redux-observable: 1.2.0
+    redux-persist: ^6.0.0
     resize-observer-polyfill: 1.5.1
     rimraf: 3.0.2
     rxjs: 6.5.5
@@ -12750,7 +12752,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"global@npm:^4.3.2, global@npm:^4.4.0":
+"global@npm:^4.3.0, global@npm:^4.3.2, global@npm:^4.4.0":
   version: 4.4.0
   resolution: "global@npm:4.4.0"
   dependencies:
@@ -15412,6 +15414,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"loader-utils@npm:^2.0.3":
+  version: 2.0.4
+  resolution: "loader-utils@npm:2.0.4"
+  dependencies:
+    big.js: ^5.2.2
+    emojis-list: ^3.0.0
+    json5: ^2.1.2
+  checksum: a5281f5fff1eaa310ad5e1164095689443630f3411e927f95031ab4fb83b4a98f388185bb1fe949e8ab8d4247004336a625e9255c22122b815bb9a4c5d8fc3b7
+  languageName: node
+  linkType: hard
+
 "locate-path@npm:^2.0.0":
   version: 2.0.0
   resolution: "locate-path@npm:2.0.0"
@@ -17632,7 +17645,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.0.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.0.0, prop-types@npm:^15.6.1, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -17930,6 +17943,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-hot-loader@npm:^4.13.1":
+  version: 4.13.1
+  resolution: "react-hot-loader@npm:4.13.1"
+  dependencies:
+    fast-levenshtein: ^2.0.6
+    global: ^4.3.0
+    hoist-non-react-statics: ^3.3.0
+    loader-utils: ^2.0.3
+    prop-types: ^15.6.1
+    react-lifecycles-compat: ^3.0.4
+    shallowequal: ^1.1.0
+    source-map: ^0.7.3
+  peerDependencies:
+    "@types/react": ^15.0.0 || ^16.0.0 || ^17.0.0
+    react: ^15.0.0 || ^16.0.0 || ^17.0.0
+    react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: f90890d5160dcb2bfae4022cba065d8e5c26b86f34c4604cbbdd39f5e4dfd82c05c317bb05ef3d4da2aa0be7e8e205c905daea1af40d3a7ef0d07c3d289da11c
+  languageName: node
+  linkType: hard
+
 "react-inspector@npm:^5.1.0":
   version: 5.1.1
   resolution: "react-inspector@npm:5.1.1"
@@ -17971,6 +18007,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-lifecycles-compat@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "react-lifecycles-compat@npm:3.0.4"
+  checksum: a904b0fc0a8eeb15a148c9feb7bc17cec7ef96e71188280061fc340043fd6d8ee3ff233381f0e8f95c1cf926210b2c4a31f38182c8f35ac55057e453d6df204f
+  languageName: node
+  linkType: hard
+
 "react-popper-tooltip@npm:^3.1.1":
   version: 3.1.1
   resolution: "react-popper-tooltip@npm:3.1.1"
@@ -18323,6 +18366,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"redux-persist@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "redux-persist@npm:6.0.0"
+  peerDependencies:
+    redux: ">4.0.0"
+  checksum: edaf10dbf17351ce8058d0802357adae8665b3a1ff39371834e37838ddbe1a79cccbc717b8ba54acb5307651ccf51d0f7dc1cbc8dbae0726ff952d11ef61c6b8
+  languageName: node
+  linkType: hard
+
 "redux@npm:4.0.5":
   version: 4.0.5
   resolution: "redux@npm:4.0.5"