chore(HMR): make website HMR able

Author: christianalfoni

package-lock.json

@@ -23,6 +23,8 @@
   },
   "dependencies": {
     "@babel/core": "^7.2.2",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.2.0",
     "@babel/preset-env": "^7.2.0",
     "@types/node": "10.5.1",
     "color": "3.0.0",
@@ -41,15 +43,15 @@
     "preact-compat": "3.18.4",
     "prismjs": "1.15.0",
     "query-string": "6.2.0",
+    "react": "16.8.1",
+    "react-dom": "16.8.1",
     "react-hot-loader": "^4.3.4",
     "styled-components": "3.3.3",
     "tslib": "1.9.3",
     "vue": "2.5.16",
     "vue-hot-reload-api": "2.3.0",
     "vue-styled-components": "1.3.0",
-    "ws": "5.2.1",
-    "react": "16.8.1",
-    "react-dom": "16.8.1"
+    "ws": "5.2.1"
   },
   "devDependencies": {
     "@babel/core": "7.2.2",
@@ -60,7 +62,7 @@
     "@types/react": "16.7.13",
     "@types/react-dom": "16.0.6",
     "@vue/component-compiler-utils": "2.1.0",
-    "babel-loader": "8.0.0-beta.4",
+    "babel-loader": "^8.0.5",
     "babel-plugin-transform-vue-jsx": "3.7.0",
     "commitizen": "^2.10.1",
     "concurrently": "3.6.1",

package.json

@@ -11,6 +11,7 @@ import Api from '../Api'
 import MobileTopBar from '../MobileTopBar'
 import { useIsMobile, useScrollToPosition } from '../../utils'
 import Footer from '../Footer'
+import { hot } from 'react-hot-loader/root'
 
 const pages = {
   [Page.HOME]: FrontPage,
@@ -62,4 +63,4 @@ const App: SFC = () => {
   )
 }
 
-export default App
+export default hot(App)

packages/overmind-website/src/components/App/index.tsx

@@ -3,6 +3,12 @@ import { render } from 'react-dom'
 import { injectGlobal } from 'emotion'
 import * as iconFont from './icomoon.woff2'
 import App from './components/App'
+import { setConfig } from 'react-hot-loader'
+
+setConfig({
+  ignoreSFC: true, // RHL will be __completely__ disabled for SFC
+  pureRender: true, // RHL will not change render method
+})
 
 injectGlobal`
   @font-face {

packages/overmind-website/src/index.tsx

@@ -38,6 +38,7 @@ module.exports = (env, args) => {
         '/backend': 'http://localhost:5000',
       },
       historyApiFallback: true,
+      hot: true,
     },
     module: {
       rules: [
@@ -55,12 +56,42 @@ module.exports = (env, args) => {
         },
         {
           test: /\.tsx?$/,
-          loader: 'ts-loader',
+          loader: 'babel-loader',
           include: path.join(__dirname, 'src'),
           options: {
-            allowTsInNodeModules: true,
+            presets: [
+              [
+                '@babel/preset-typescript',
+                {
+                  isTSX: true,
+                  jsxPragma: 'createElement',
+                  allExtensions: true,
+                },
+              ],
+              [
+                '@babel/preset-react',
+                {
+                  pragma: 'createElement',
+                },
+              ],
+              '@babel/preset-env',
+            ],
+            plugins: [
+              '@babel/plugin-syntax-dynamic-import',
+              [
+                '@babel/plugin-transform-runtime',
+                {
+                  regenerator: true,
+                },
+              ],
+            ],
           },
         },
+        {
+          test: /\.tsx/,
+          include: /node_modules/,
+          loader: 'react-hot-loader/webpack',
+        },
       ],
     },
     resolve: {